iconified app menu tab UI

src/assets/icons/blocks.svelte

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="lucide lucide-blocks-icon lucide-blocks"
+  ><path
+    d="M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"
+  /><rect x="14" y="2" width="8" height="8" rx="1" /></svg
+>

src/assets/icons/settings.svelte

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="lucide lucide-settings-icon lucide-settings"
+  ><path
+    d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
+  /><circle cx="12" cy="12" r="3" /></svg
+>

src/assets/icons/users.svelte

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="lucide lucide-users-icon lucide-users"
+  ><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><path
+    d="M16 3.128a4 4 0 0 1 0 7.744"
+  /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><circle cx="9" cy="7" r="4" /></svg
+>

src/routes/app-menu/+page.svelte

@@ -5,6 +5,10 @@
   import YourDolls from "./tabs/your-dolls/index.svelte";
   import { events } from "$lib/bindings";
   import { onMount } from "svelte";
+  import PawPrint from "../../assets/icons/paw-print.svelte";
+  import Users from "../../assets/icons/users.svelte";
+  import Settings from "../../assets/icons/settings.svelte";
+  import Blocks from "../../assets/icons/blocks.svelte";
 
   let showInteractionOverlay = false;
 
@@ -38,46 +42,50 @@
   <div class="flex flex-col gap-2 h-full max-h-full">
     <div class="size-full flex flex-col max-h-full gap-2 h-full">
       <div class="tabs tabs-lift h-full flex-1">
-        <input
+        <label class="tab">
-          type="radio"
+          <input
-          name="app_menu_tabs"
+            type="radio"
-          class="tab"
+            name="app_menu_tabs"
-          aria-label="Your Nekos"
+            aria-label="Your Nekos"
-          checked
+            checked
-        />
+          />
+          <div class="*:size-4">
+            <PawPrint />
+          </div>
+        </label>
         <div class="tab-content bg-base-100 border-base-300 p-4">
           <YourDolls />
         </div>
 
-        <input
+        <label class="tab">
-          type="radio"
+          <input type="radio" name="app_menu_tabs" aria-label="Friends" />
-          name="app_menu_tabs"
+          <div class="*:size-4">
-          class="tab"
+            <Users />
-          aria-label="Friends"
+          </div>
-        />
+        </label>
         <div class="tab-content bg-base-100 border-base-300 p-4">
           <Friends />
         </div>
 
-        <input
+        <label class="tab">
-          type="radio"
+          <input type="radio" name="app_menu_tabs" aria-label="Modules" />
-          name="app_menu_tabs"
+          <div class="*:size-4">
-          class="tab"
+            <Blocks />
-          aria-label="Preferences"
+          </div>
-        />
+        </label>
-        <div class="tab-content bg-base-100 border-base-300 p-4">
-          <Preferences />
-        </div>
-
-        <input
-          type="radio"
-          name="app_menu_tabs"
-          class="tab"
-          aria-label="Modules"
-        />
         <div class="tab-content bg-base-100 border-base-300 p-4">
           <Modules />
         </div>
+
+        <label class="tab">
+          <input type="radio" name="app_menu_tabs" aria-label="Preferences" />
+          <div class="*:size-4">
+            <Settings />
+          </div>
+        </label>
+        <div class="tab-content bg-base-100 border-base-300 p-4">
+          <Preferences />
+        </div>
       </div>
     </div>
   </div>