Add copy link button to electron titlebar

Nerimity · Jan 24, 2025 · 0db8b9a · 0db8b9a
1 parent d189332
commit 0db8b9a
Showing 1 changed file with 62 additions and 10 deletions.
diff --git a/src/components/ElectronTitleBar.tsx b/src/components/ElectronTitleBar.tsx
@@ -5,6 +5,7 @@ import Button from "./ui/Button";
 import { electronWindowAPI } from "@/common/Electron";
 import Icon from "./ui/icon/Icon";
 import { classNames } from "@/common/classNames";
+import { createSignal } from "solid-js";
 
 const BarContainer = styled(FlexRow)`
   height: 35px;
@@ -26,7 +27,7 @@ const windowControlButtonStyles = css`
   width: 30px;
   height: 20px;
   padding: 5px;
-  border-radius: 4px;
+  border-radius: 8px;
   background-color: transparent;
   border: none;
   color: white;
@@ -35,32 +36,37 @@ const windowControlButtonStyles = css`
 
 const minimize = css`
   &:hover {
-    background-color: rgba(255,255,255,0.1);
+    background-color: rgba(255, 255, 255, 0.1);
     color: var(--warn-color);
   }
 `;
+const copyLink = css`
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: var(--primary-color);
+  }
+`;
 
 const full = css`
   &:hover {
-    background-color: rgba(255,255,255,0.1);
+    background-color: rgba(255, 255, 255, 0.1);
     color: var(--success-color);
   }
 `;
 
 const close = css`
   &:hover {
-    background-color: rgba(255,255,255,0.1);
+    background-color: rgba(255, 255, 255, 0.1);
     color: var(--alert-color);
   }
 `;
 
-
 const IconImage = styled("img")`
   height: 20px;
   border-radius: 50%;
   margin-left: 10px;
   pointer-events: none;
-  background-color: #353535;
+  background-color: rgb(38, 38, 38);
 `;
 
 const TitleText = styled(Text)`
@@ -74,10 +80,56 @@ export function ElectronTitleBar() {
       <IconImage src="/assets/logo.png" />
       <TitleText>Nerimity</TitleText>
       <WindowControlButtonsContainer>
-        <Icon onClick={electronWindowAPI()?.minimize} class={classNames(windowControlButtonStyles, minimize)} name="horizontal_rule" size={16} />
-        <Icon onClick={electronWindowAPI()?.toggleMaximize} class={classNames(windowControlButtonStyles, full)} name="check_box_outline_blank" size={16} />
-        <Icon onClick={electronWindowAPI()?.close} class={classNames(windowControlButtonStyles, close)} name="close" size={18} />
+        <CopyLinkButton />
+        <Icon
+          onClick={electronWindowAPI()?.minimize}
+          class={classNames(windowControlButtonStyles, minimize)}
+          name="horizontal_rule"
+          size={16}
+        />
+        <Icon
+          onClick={electronWindowAPI()?.toggleMaximize}
+          class={classNames(windowControlButtonStyles, full)}
+          name="check_box_outline_blank"
+          size={16}
+        />
+        <Icon
+          onClick={electronWindowAPI()?.close}
+          class={classNames(windowControlButtonStyles, close)}
+          name="close"
+          size={18}
+        />
       </WindowControlButtonsContainer>
     </BarContainer>
   );
-}
+}
+
+const CopyLinkButton = () => {
+  const [clicked, setClicked] = createSignal(false);
+  const copyLinkClick = () => {
+    setClicked(true);
+    setTimeout(() => setClicked(false), 1000);
+    navigator.clipboard.writeText(window.location.href);
+  };
+  return (
+    <Icon
+      onClick={copyLinkClick}
+      title="Copy Page URL"
+      class={classNames(
+        windowControlButtonStyles,
+        copyLink,
+        clicked()
+          ? css`
+              background: var(--success-color);
+              &:hover {
+                background: var(--success-color);
+                color: white;
+              }
+            `
+          : undefined
+      )}
+      name="link"
+      size={16}
+    />
+  );
+};