feat: toggle switch

packages/app/src/Element/Event/NoteCreator.tsx

@@ -22,6 +22,7 @@ import { ZapTarget } from "Zapper";
 import { useNoteCreator } from "State/NoteCreator";
 import { NoteBroadcaster } from "./NoteBroadcaster";
 import FileUploadProgress from "./FileUpload";
+import { ToggleSwitch } from "Icons/Toggle";
 
 export function NoteCreator() {
   const { formatMessage } = useIntl();
@@ -343,9 +344,6 @@ export function NoteCreator() {
   function noteCreatorAdvanced() {
     return (
       <>
-        <button className="secondary" onClick={loadPreview}>
-          <FormattedMessage defaultMessage="Toggle Preview" />
-        </button>
         <div>
           <h4>
             <FormattedMessage defaultMessage="Custom Relays" />
@@ -468,6 +466,11 @@ export function NoteCreator() {
             className={classNames("note-creator-icon", { active: note.advanced })}
           />
           <FormattedMessage defaultMessage="Preview" />
+          <ToggleSwitch
+            onClick={() => loadPreview()}
+            size={40}
+            className={classNames({ active: Boolean(note.preview) })}
+          />
         </div>
         <div className="flex g8">
           <button className="secondary" onClick={cancel}>

packages/app/src/Icons/Toggle.css

@@ -0,0 +1,16 @@
+svg#icon-toggle #bg {
+  fill: var(--gray);
+  transition: fill 0.5s;
+}
+svg#icon-toggle #toggle {
+  transform: translateX(0px);
+  transition: transform 0.5s;
+}
+svg#icon-toggle.active #toggle {
+  transform: translateX(12px);
+  transition: transform 0.5s;
+}
+svg#icon-toggle.active #bg {
+  fill: var(--success);
+  transition: fill 0.5s;
+}

packages/app/src/Icons/Toggle.tsx

@@ -0,0 +1,31 @@
+import "./Toggle.css";
+import { IconProps } from "./Icon";
+
+export function ToggleSwitch(props: Omit<IconProps, "name">) {
+  const size = props.size || 20;
+  return (
+    <svg
+      id="icon-toggle"
+      viewBox="0 0 33.015999 19.353487"
+      fill="none"
+      width={size}
+      height={props.height ?? size}
+      className={props.className}
+      onClick={props.onClick}>
+      <path
+        id="bg"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="m 10.265361,0.05752611 c 1.126446,-0.06242431 2.251588,-0.05743114046 3.378034,-0.05743114046 0.0077,0 5.70779,0 5.70779,0 1.148521,0 2.273663,-0.0049931695 3.399407,0.05743114046 1.023495,0.05619252 2.020399,0.17605763 3.012887,0.44387929 2.089033,0.5631251 3.913363,1.739307 5.232065,3.4068227 1.310876,1.6569003 2.020399,3.685279 2.020399,5.7678955 0,2.0852294 -0.709523,4.1123014 -2.020399,5.7692404 -1.318702,1.666906 -3.143032,2.843688 -5.232065,3.406775 -0.992488,0.26785 -1.989392,0.387067 -3.012887,0.443869 -1.125744,0.06241 -2.250886,0.0568 -3.377332,0.0568 -0.0078,0 -5.709194,6.78e-4 -5.709194,6.78e-4 -1.147117,-6.78e-4 -2.272259,0.0049 -3.398705,-0.05748 C 9.2425688,19.239206 8.2455645,19.119989 7.253176,18.852139 5.1640828,18.289052 3.3397837,17.11227 2.021091,15.445364 0.71016486,13.788425 0,11.761353 0,9.676801 0,7.5935071 0.71016486,5.5651284 2.021091,3.9082281 3.3397837,2.2407124 5.1640828,1.0645305 7.253176,0.5014054 8.2455645,0.23358374 9.2425688,0.11371863 10.265361,0.05752611 Z"
+        fill="currentColor"
+      />
+      <path
+        id="toggle"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="m 10.118173,18.367375 c 4.8102,0 8.7097,-3.8995 8.7097,-8.7096999 0,-4.8101905 -3.8995,-8.7096505 -8.7097,-8.7096505 -4.8102196,0 -8.7096796,3.89946 -8.7096796,8.7096505 0,4.8101999 3.89946,8.7096999 8.7096796,8.7096999 z"
+        fill="#ffffff"
+      />
+    </svg>
+  );
+}

packages/app/src/lang.json

@@ -84,9 +84,6 @@
   "1c4YST": {
     "defaultMessage": "Connected to: {node} 🎉"
   },
-  "1iQ8GN": {
-    "defaultMessage": "Toggle Preview"
-  },
   "1nYUGC": {
     "defaultMessage": "{n} Following"
   },

packages/app/src/translations/en.json

@@ -27,7 +27,6 @@
   "1Mo59U": "Are you sure you want to remove this note from bookmarks?",
   "1R43+L": "Enter Nostr Wallet Connect config",
   "1c4YST": "Connected to: {node} 🎉",
-  "1iQ8GN": "Toggle Preview",
   "1nYUGC": "{n} Following",
   "1o2BgB": "Check Signatures",
   "1udzha": "Conversations",