feat: add experiments + fixes

design-system/Icons.tsx

@@ -424,3 +424,57 @@ export function Translate(props: {
     </Icon>
   )
 }
+
+export function Eye(props: {
+  size?: number
+  class?: string
+  stroke?: 2 | 1.5
+  onClick?: () => void
+  fill?: string
+}) {
+  return (
+    <Icon size={props.size} class={props.class} onClick={props.onClick}>
+      <path
+        d="M2 12.0001L1.11178 11.5406C0.962741 11.8288 0.962741 12.1713 1.11178 12.4595L2 12.0001ZM22 11.9999L22.8882 12.4594C23.0373 12.1712 23.0373 11.8287 22.8882 11.5405L22 11.9999ZM2.88822 12.4595C5.16609 8.05547 8.65289 6.00002 12 6C15.3471 5.99998 18.8339 8.05537 21.1118 12.4594L22.8882 11.5405C20.3386 6.61119 16.2391 3.99997 12 4C7.76084 4.00003 3.66136 6.6113 1.11178 11.5406L2.88822 12.4595ZM1.11178 12.4595C3.66137 17.3888 7.76085 20 12 20C16.2392 20 20.3386 17.3887 22.8882 12.4594L21.1118 11.5405C18.8339 15.9445 15.3471 18 12 18C8.65288 18 5.16609 15.9446 2.88822 11.5406L1.11178 12.4595ZM14 12C14 13.1046 13.1046 14 12 14V16C14.2091 16 16 14.2091 16 12H14ZM12 14C10.8954 14 10 13.1046 10 12H8C8 14.2091 9.79086 16 12 16V14ZM10 12C10 10.8954 10.8954 10 12 10V8C9.79086 8 8 9.79086 8 12H10ZM12 10C13.1046 10 14 10.8954 14 12H16C16 9.79086 14.2091 8 12 8V10Z"
+        fill="currentColor"
+      />
+    </Icon>
+  )
+}
+
+export function Rotate(props: {
+  size?: number
+  class?: string
+  stroke?: 2 | 1.5
+  onClick?: () => void
+  fill?: string
+}) {
+  return (
+    <Icon size={props.size} class={props.class} onClick={props.onClick}>
+      <path
+        d="M19.5174 14.6667C18.4192 17.7738 15.4559 20 11.9727 20C7.55438 20 3.97266 16.4183 3.97266 12C3.97266 7.58172 7.55438 4 11.9727 4C15.0686 4 17.001 5.5 19.001 8M19.001 8V4M19.001 8H15.001"
+        stroke="currentColor"
+        stroke-width={props.stroke || 1.5}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </Icon>
+  )
+}
+
+export function Trash(props: {
+  size?: number
+  class?: string
+  stroke?: 2 | 1.5
+  onClick?: () => void
+  fill?: string
+}) {
+  return (
+    <Icon size={props.size} class={props.class} onClick={props.onClick}>
+      <path
+        d="M6 21L5.00221 21.0665C5.03723 21.5918 5.47354 22 6 22V21ZM18 21V22C18.5265 22 18.9628 21.5918 18.9978 21.0665L18 21ZM3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7V5ZM21 7C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5V7ZM14.9056 6.24926C15.0432 6.78411 15.5884 7.1061 16.1233 6.96844C16.6581 6.83078 16.9801 6.28559 16.8424 5.75074L14.9056 6.24926ZM4.00221 6.06652L5.00221 21.0665L6.99779 20.9335L5.99779 5.93348L4.00221 6.06652ZM6 22H18V20H6V22ZM18.9978 21.0665L19.9978 6.06652L18.0022 5.93348L17.0022 20.9335L18.9978 21.0665ZM19 5H5V7H19V5ZM3 7H5V5H3V7ZM19 7H21V5H19V7ZM12 4C13.3965 4 14.5725 4.95512 14.9056 6.24926L16.8424 5.75074C16.2874 3.59442 14.3312 2 12 2V4ZM9.09447 6.24926C9.42756 4.95512 10.6035 4 12 4V2C9.66885 2 7.7126 3.59442 7.1576 5.75074L9.09447 6.24926Z"
+        fill="currentColor"
+      />
+    </Icon>
+  )
+}

design-system/experiments.css

@@ -0,0 +1,28 @@
+@keyframes blink {
+    0%, 100% {
+      opacity: 1;
+    }
+    25%, 75% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+  }
+
+  .custom-caret {
+    position: absolute;
+    width: 2px;
+    height: 1.25em;
+    background: #3b82f6;
+    border-radius: 1000px;
+    animation: blink 1s step-end infinite;
+    pointer-events: none;
+  }
+
+  .mirror-div {
+    visibility: hidden;
+    position: absolute;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }

design-system/global.css

@@ -145,6 +145,20 @@ h4, h5, h6 {
 	font-size: 15px;
 }
 
+.animate-svg path {
+	transition: stroke-dashoffset 0.3s ease-in-out;
+  }
+
+  .checked path {
+	stroke-dasharray: 20;
+	stroke-dashoffset: 0;
+  }
+
+  .unchecked path {
+	stroke-dasharray: 20;
+	stroke-dashoffset: 20; 
+  }
+
 @media (prefers-color-scheme: dark) {
 	body {
 		background-color: #000;

interface/components/Popup.tsx

@@ -79,7 +79,7 @@ export function Popup({ popup, isOpen, onClose, children }: PopupProps) {
             type="secondary"
             function={onClose}
             rounded
-            class="absolute top-4 right-5 w-10 h-10 flex items-center justify-center"
+            class="absolute z-20 top-4 right-5 w-10 h-10 flex items-center justify-center"
           >
             <Close class="w-6 h-6 flex-shrink-0" />
           </Button>

interface/sections/FileSystem.tsx

@@ -1,51 +1,44 @@
 import { JSX } from "preact/jsx-runtime"
 import { usePageContext } from "../../renderer/usePageContext"
-import Vectorfiles from "../../pages/archive/copyables/assets/vectorfiles.json"
 import { InlineLink } from "#components/Button"
 import * as m from "#lang/paraglide/messages"
 
-// TODO: Auto fill the amount of items in each tab
 export const tabs = [
   {
     name: "Projects",
     path: "/archive/projects",
     items: {
-      amount: 2,
       label: "projects",
     },
   },
   {
     name: "Short Projects",
     path: "/archive/short-projects",
     items: {
-      amount: 6,
       label: "projects",
     },
   },
-  {
-    name: "Copyables",
-    path: "/archive/copyables",
-    items: {
-      amount: Vectorfiles.length,
-      label: "copyables",
-    },
-  },
   {
     name: "Photos",
     path: "/archive/photos",
     items: {
-      amount: 10,
       label: "photos",
     },
   },
   {
     name: "Posts",
     path: "/archive/posts",
     items: {
-      amount: 13,
       label: "posts",
     },
   },
+  {
+    name: "Experiments",
+    path: "/archive/experiments",
+    items: {
+      label: "experiments",
+    },
+  },
 ]
 
 export default function FileSystem(props: {
@@ -93,13 +86,13 @@ export default function FileSystem(props: {
               <span class="group-hover:underline ">{m.archive_title()}</span>
               <span
                 class={
-                  "no-underline " +
+                  "no-underline font-mono font-medium " +
                   (urlPathname === "/archive"
                     ? "text-black dark:text-white"
                     : "text-neutral-300 dark:text-neutral-600")
                 }
               >
-                {tabs.length} {m.categories()}
+                /
               </span>
             </a>
           </li>
@@ -117,13 +110,13 @@ export default function FileSystem(props: {
                 <span class="group-hover:underline ">{tab.name}</span>
                 <span
                   class={
-                    "no-underline " +
+                    "no-underline font-mono font-medium " +
                     (urlPathname === tab.path
                       ? "text-black dark:text-white"
                       : "text-neutral-300 dark:text-neutral-600")
                   }
                 >
-                  {`${tab.items.amount} ${tab.items.label}`}
+                  {`/${tab.items.label}`}
                 </span>
               </a>
             </li>