fix: make SidenavMenuButton class prop reactive to resolve compilation error

.gitea/workflows/build-mips.yml

@@ -22,12 +22,32 @@ jobs:
         git fetch --depth=1 origin ${{ gitea.sha }}
         git checkout FETCH_HEAD
 
+    - name: Cache Cargo
+      uses: actions/cache@v3
+      with:
+        path: |
+          ~/.cargo/bin/
+          ~/.cargo/registry/index/
+          ~/.cargo/registry/cache/
+          ~/.cargo/git/db/
+          target/
+        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-cargo-
+
+    - name: Cache Node Modules
+      uses: actions/cache@v3
+      with:
+        path: frontend/node_modules
+        key: ${{ runner.os }}-node-${{ hashFiles('frontend/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+
     - name: Build Frontend
       run: |
         cd frontend
         npm install
         npx @tailwindcss/cli -i input.css -o public/tailwind.css --minify --content './src/**/*.rs'
-        # Trunk'ın optimizasyonunu kapalı (0) tutuyoruz çünkü Cargo.toml'daki opt-level='z' zaten o işi yapıyor.
         trunk build --release
 
     - name: Build Backend (MIPS)

frontend/index.html

@@ -20,13 +20,12 @@
     <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
 
     <!-- Trunk Assets -->
-    <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="0" data-no-preload />
+    <script data-trunk rel="rust" src="Cargo.toml" data-wasm-opt="0" data-preload="false"></script>
     <link data-trunk rel="css" href="public/tailwind.css" />
     <link data-trunk rel="copy-file" href="manifest.json" />
     <link data-trunk rel="copy-file" href="icon-192.png" />
     <link data-trunk rel="copy-file" href="icon-512.png" />
     <link data-trunk rel="copy-file" href="public/lock_scroll.js" />
-    <script src="/lock_scroll.js"></script>
     <link data-trunk rel="copy-file" href="sw.js" />
     <script>
         (function () {

frontend/public/hooks/lock_scroll.js

@@ -1,253 +0,0 @@
-/**
- * Scroll Lock Utility
- * Handles locking and unlocking scroll for both window and all scrollable containers
- * Similar to react-remove-scroll but in vanilla JavaScript
- */
-
-(() => {
-  // Prevent multiple initializations
-  if (window.ScrollLock) {
-    return;
-  }
-
-  class ScrollLock {
-    constructor() {
-      this.locked = false;
-      this.scrollableElements = [];
-      this.scrollPositions = new Map();
-      this.originalStyles = new Map();
-      this.fixedElements = [];
-    }
-
-    /**
-     * Find all scrollable elements in the DOM (optimized)
-     * Uses more targeted selectors instead of querying all elements
-     */
-    findScrollableElements() {
-      const scrollables = [];
-
-      // More targeted query - only look for elements with overflow properties
-      const candidates = document.querySelectorAll(
-        '[style*="overflow"], [class*="overflow"], [class*="scroll"], main, aside, section, div',
-      );
-
-      // Batch all style reads first to minimize reflows
-      const elementsToCheck = [];
-      for (const el of candidates) {
-        // Skip the element itself or if it's inside these containers
-        const dataName = el.getAttribute("data-name");
-        const isExcludedElement =
-          dataName === "ScrollArea" ||
-          dataName === "CommandList" ||
-          dataName === "SelectContent" ||
-          dataName === "MultiSelectContent" ||
-          dataName === "DropdownMenuContent" ||
-          dataName === "ContextMenuContent";
-
-        if (
-          el !== document.body &&
-          el !== document.documentElement &&
-          !isExcludedElement &&
-          !el.closest('[data-name="ScrollArea"]') &&
-          !el.closest('[data-name="CommandList"]') &&
-          !el.closest('[data-name="SelectContent"]') &&
-          !el.closest('[data-name="MultiSelectContent"]') &&
-          !el.closest('[data-name="DropdownMenuContent"]') &&
-          !el.closest('[data-name="ContextMenuContent"]')
-        ) {
-          elementsToCheck.push(el);
-        }
-      }
-
-      // Now batch read all computed styles and dimensions
-      elementsToCheck.forEach((el) => {
-        const style = window.getComputedStyle(el);
-        const hasOverflow =
-          style.overflow === "auto" ||
-          style.overflow === "scroll" ||
-          style.overflowY === "auto" ||
-          style.overflowY === "scroll";
-
-        // Only check scrollHeight if overflow is set
-        if (hasOverflow && el.scrollHeight > el.clientHeight) {
-          scrollables.push(el);
-        }
-      });
-
-      return scrollables;
-    }
-
-    /**
-     * Lock scrolling on all scrollable elements (optimized)
-     * Batches all DOM reads before DOM writes to prevent forced reflows
-     */
-    lock() {
-      if (this.locked) return;
-
-      this.locked = true;
-
-      // Find all scrollable elements
-      this.scrollableElements = this.findScrollableElements();
-
-      // ===== BATCH 1: READ PHASE - Read all layout properties first =====
-      const windowScrollY = window.scrollY;
-      const scrollbarWidth = window.innerWidth - document.body.clientWidth;
-
-      // Store window scroll position
-      this.scrollPositions.set("window", windowScrollY);
-
-      // Store original body styles
-      this.originalStyles.set("body", {
-        position: document.body.style.position,
-        top: document.body.style.top,
-        width: document.body.style.width,
-        overflow: document.body.style.overflow,
-        paddingRight: document.body.style.paddingRight,
-      });
-
-      // Read all fixed-position elements and their padding (only if we have scrollbar)
-      if (scrollbarWidth > 0) {
-        // Use more targeted query for fixed elements
-        const fixedCandidates = document.querySelectorAll(
-          '[style*="fixed"], [class*="fixed"], header, nav, aside, [role="dialog"], [role="alertdialog"]',
-        );
-
-        this.fixedElements = Array.from(fixedCandidates).filter((el) => {
-          const style = window.getComputedStyle(el);
-          return (
-            style.position === "fixed" &&
-            !el.closest('[data-name="DropdownMenuContent"]') &&
-            !el.closest('[data-name="MultiSelectContent"]') &&
-            !el.closest('[data-name="ContextMenuContent"]')
-          );
-        });
-
-        // Batch read all padding values
-        this.fixedElements.forEach((el) => {
-          const computedStyle = window.getComputedStyle(el);
-          const currentPadding = Number.parseInt(computedStyle.paddingRight, 10) || 0;
-
-          this.originalStyles.set(el, {
-            paddingRight: el.style.paddingRight,
-            computedPadding: currentPadding,
-          });
-        });
-      }
-
-      // Read scrollable elements info
-      const scrollableInfo = this.scrollableElements.map((el) => {
-        const scrollTop = el.scrollTop;
-        const elementScrollbarWidth = el.offsetWidth - el.clientWidth;
-        const computedStyle = window.getComputedStyle(el);
-        const currentPadding = Number.parseInt(computedStyle.paddingRight, 10) || 0;
-
-        this.scrollPositions.set(el, scrollTop);
-        this.originalStyles.set(el, {
-          overflow: el.style.overflow,
-          overflowY: el.style.overflowY,
-          paddingRight: el.style.paddingRight,
-        });
-
-        return { el, elementScrollbarWidth, currentPadding };
-      });
-
-      // ===== BATCH 2: WRITE PHASE - Apply all styles at once =====
-
-      // Apply body lock
-      document.body.style.position = "fixed";
-      document.body.style.top = `-${windowScrollY}px`;
-      document.body.style.width = "100%";
-      document.body.style.overflow = "hidden";
-
-      if (scrollbarWidth > 0) {
-        document.body.style.paddingRight = `${scrollbarWidth}px`;
-
-        // Apply padding compensation to fixed elements
-        this.fixedElements.forEach((el) => {
-          const stored = this.originalStyles.get(el);
-          if (stored) {
-            el.style.paddingRight = `${stored.computedPadding + scrollbarWidth}px`;
-          }
-        });
-      }
-
-      // Lock all scrollable containers
-      scrollableInfo.forEach(({ el, elementScrollbarWidth, currentPadding }) => {
-        el.style.overflow = "hidden";
-
-        if (elementScrollbarWidth > 0) {
-          el.style.paddingRight = `${currentPadding + elementScrollbarWidth}px`;
-        }
-      });
-    }
-
-    /**
-     * Unlock scrolling on all elements (optimized)
-     * @param {number} delay - Delay in milliseconds before unlocking (for animations)
-     */
-    unlock(delay = 0) {
-      if (!this.locked) return;
-
-      const performUnlock = () => {
-        // Restore body scroll
-        const bodyStyles = this.originalStyles.get("body");
-        if (bodyStyles) {
-          document.body.style.position = bodyStyles.position;
-          document.body.style.top = bodyStyles.top;
-          document.body.style.width = bodyStyles.width;
-          document.body.style.overflow = bodyStyles.overflow;
-          document.body.style.paddingRight = bodyStyles.paddingRight;
-        }
-
-        // Restore window scroll position
-        const windowScrollY = this.scrollPositions.get("window") || 0;
-        window.scrollTo(0, windowScrollY);
-
-        // Restore all scrollable containers
-        this.scrollableElements.forEach((el) => {
-          const originalStyles = this.originalStyles.get(el);
-          if (originalStyles) {
-            el.style.overflow = originalStyles.overflow;
-            el.style.overflowY = originalStyles.overflowY;
-            el.style.paddingRight = originalStyles.paddingRight;
-          }
-
-          // Restore scroll position
-          const scrollPosition = this.scrollPositions.get(el) || 0;
-          el.scrollTop = scrollPosition;
-        });
-
-        // Restore fixed-position elements padding
-        this.fixedElements.forEach((el) => {
-          const styles = this.originalStyles.get(el);
-          if (styles && styles.paddingRight !== undefined) {
-            el.style.paddingRight = styles.paddingRight;
-          }
-        });
-
-        // Clear storage
-        this.scrollableElements = [];
-        this.fixedElements = [];
-        this.scrollPositions.clear();
-        this.originalStyles.clear();
-        this.locked = false;
-      };
-
-      if (delay > 0) {
-        setTimeout(performUnlock, delay);
-      } else {
-        performUnlock();
-      }
-    }
-
-    /**
-     * Check if scrolling is currently locked
-     */
-    isLocked() {
-      return this.locked;
-    }
-  }
-
-  // Export as singleton
-  window.ScrollLock = new ScrollLock();
-})();

frontend/src/app.rs

@@ -1,13 +1,12 @@
 use crate::components::layout::protected::Protected;
 use crate::components::ui::skeleton::Skeleton;
-use crate::components::ui::card::{Card, CardHeader, CardContent};
 use crate::components::torrent::table::TorrentTable;
 use crate::components::auth::login::Login;
 use crate::components::auth::setup::Setup;
 use leptos::prelude::*;
 use leptos::task::spawn_local;
 use leptos_router::components::{Router, Routes, Route};
-use leptos_router::hooks::{use_navigate, use_location};
+use leptos_router::hooks::use_navigate;
 use crate::components::ui::toast::Toaster;
 use crate::components::hooks::use_theme_mode::ThemeMode;
 
@@ -42,7 +41,6 @@ pub fn App() -> impl IntoView {
 fn InnerApp() -> impl IntoView {
     crate::store::provide_torrent_store();
     let store = use_context::<crate::store::TorrentStore>();
-    let loc = use_location();
 
     let is_loading = signal(true);
     let is_authenticated = signal(false);
@@ -146,70 +144,43 @@ fn InnerApp() -> impl IntoView {
                     });
                     
                     view! {
-                        <Show when=move || !is_loading.0.get() fallback=move || {
+                        <Show when=move || !is_loading.0.get() fallback=|| {
-                            let path = loc.pathname.get();
+                            // Standard 1: Always show Dashboard Skeleton
-                            if path == "/login" {
+                            view! {
-                                // Login Skeleton
+                                <div class="flex h-screen bg-background text-foreground overflow-hidden">
-                                view! {
+                                    // Sidebar skeleton
-                                    <div class="flex items-center justify-center min-h-screen bg-muted/40 px-4">
+                                    <div class="w-56 border-r border-border p-4 space-y-4">
-                                        <Card class="w-full max-w-sm shadow-lg border-none">
+                                        <Skeleton class="h-8 w-3/4" />
-                                            <CardHeader class="pb-2 items-center space-y-4">
+                                        <div class="space-y-2">
-                                                <Skeleton class="w-12 h-12 rounded-xl" />
+                                            <Skeleton class="h-6 w-full" />
-                                                <Skeleton class="h-8 w-32" />
+                                            <Skeleton class="h-6 w-full" />
-                                                <Skeleton class="h-4 w-48" />
+                                            <Skeleton class="h-6 w-4/5" />
-                                            </CardHeader>
+                                            <Skeleton class="h-6 w-full" />
-                                            <CardContent class="pt-4 space-y-6">
+                                            <Skeleton class="h-6 w-3/5" />
-                                                <div class="space-y-2">
+                                            <Skeleton class="h-6 w-full" />
-                                                    <Skeleton class="h-4 w-24" />
-                                                    <Skeleton class="h-10 w-full" />
-                                                </div>
-                                                <div class="space-y-2">
-                                                    <Skeleton class="h-4 w-24" />
-                                                    <Skeleton class="h-10 w-full" />
-                                                </div>
-                                                <Skeleton class="h-10 w-full rounded-md mt-4" />
-                                            </CardContent>
-                                        </Card>
-                                    </div>
-                                }.into_any()
-                            } else {
-                                // Dashboard Skeleton
-                                view! {
-                                    <div class="flex h-screen bg-background">
-                                        // Sidebar skeleton
-                                        <div class="w-56 border-r border-border p-4 space-y-4">
-                                            <Skeleton class="h-8 w-3/4" />
-                                            <div class="space-y-2">
-                                                <Skeleton class="h-6 w-full" />
-                                                <Skeleton class="h-6 w-full" />
-                                                <Skeleton class="h-6 w-4/5" />
-                                                <Skeleton class="h-6 w-full" />
-                                                <Skeleton class="h-6 w-3/5" />
-                                                <Skeleton class="h-6 w-full" />
-                                            </div>
-                                        </div>
-                                        // Main content skeleton
-                                        <div class="flex-1 flex flex-col">
-                                            <div class="border-b border-border p-4 flex items-center gap-4">
-                                                <Skeleton class="h-8 w-48" />
-                                                <Skeleton class="h-8 w-64" />
-                                                <div class="ml-auto"><Skeleton class="h-8 w-24" /></div>
-                                            </div>
-                                            <div class="flex-1 p-4 space-y-3">
-                                                <Skeleton class="h-10 w-full" />
-                                                <Skeleton class="h-10 w-full" />
-                                                <Skeleton class="h-10 w-full" />
-                                                <Skeleton class="h-10 w-full" />
-                                                <Skeleton class="h-10 w-full" />
-                                                <Skeleton class="h-10 w-3/4" />
-                                            </div>
-                                            <div class="border-t border-border p-3">
-                                                <Skeleton class="h-5 w-96" />
-                                            </div>
                                         </div>
                                     </div>
-                                }.into_any()
+                                    // Main content skeleton
-                            }
+                                    <div class="flex-1 flex flex-col min-w-0">
+                                        <div class="border-b border-border p-4 flex items-center gap-4">
+                                            <Skeleton class="h-8 w-48" />
+                                            <Skeleton class="h-8 w-64" />
+                                            <div class="ml-auto"><Skeleton class="h-8 w-24" /></div>
+                                        </div>
+                                        <div class="flex-1 p-4 space-y-3">
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-3/4" />
+                                        </div>
+                                        <div class="border-t border-border p-3">
+                                            <Skeleton class="h-5 w-96" />
+                                        </div>
+                                    </div>
+                                </div>
+                            }.into_any()
                         }>
                             <Show when=move || is_authenticated.0.get() fallback=|| ()>
                                 <Protected>

frontend/src/components/context_menu.rs

@@ -1,5 +1,7 @@
 use leptos::prelude::*;
-use crate::components::ui::context_menu::*;
+use crate::components::ui::context_menu::{
+    ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger,
+};
 
 #[component]
 pub fn TorrentContextMenu(
@@ -7,72 +9,37 @@ pub fn TorrentContextMenu(
     torrent_hash: String,
     on_action: Callback<(String, String)>,
 ) -> impl IntoView {
-    let hash = StoredValue::new(torrent_hash);
+    let hash = torrent_hash.clone();
-    
+    let on_action_stored = StoredValue::new(on_action);
-    let menu_action = move |action: &'static str| {
+
-        on_action.run((action.to_string(), hash.get_value()));
+    let on_click = move |action: &str| {
+        on_action_stored.get_value().run((action.to_string(), hash.clone()));
     };
 
+    let start_click = { let on_click = on_click.clone(); move |_| on_click("start") };
+    let stop_click = { let on_click = on_click.clone(); move |_| on_click("stop") };
+    let delete_click = { let on_click = on_click.clone(); move |_| on_click("delete") };
+    let delete_data_click = { let on_click = on_click.clone(); move |_| on_click("delete_with_data") };
+
     view! {
         <ContextMenu>
             <ContextMenuTrigger>
                 {children()}
             </ContextMenuTrigger>
-            
+            <ContextMenuContent class="w-48">
-            <ContextMenuContent class="w-56">
+                <ContextMenuItem on:click=start_click>
-                <ContextMenuAction 
+                    "Başlat"
-                    class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
+                </ContextMenuItem>
-                    on:click=move |_| menu_action("start")
+                <ContextMenuItem on:click=stop_click>
-                >
+                    "Durdur"
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
+                </ContextMenuItem>
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
+                <ContextMenuItem class="text-destructive" on:click=delete_click>
-                    </svg>
+                    "Sil"
-                    "Start"
+                </ContextMenuItem>
-                </ContextMenuAction>
+                <ContextMenuItem class="text-destructive font-bold" on:click=delete_data_click>
-
+                    "Verilerle Birlikte Sil"
-                <ContextMenuAction 
+                </ContextMenuItem>
-                    class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
-                    on:click=move |_| menu_action("stop")
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
-                    </svg>
-                    "Stop"
-                </ContextMenuAction>
-
-                <ContextMenuAction 
-                    class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
-                    on:click=move |_| menu_action("recheck")
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
-                    </svg>
-                    "Recheck"
-                </ContextMenuAction>
-
-                <div class="-mx-1 my-1 h-px bg-border" />
-
-                <ContextMenuAction 
-                    class="px-2 py-1.5 text-destructive hover:bg-destructive/10 hover:text-destructive rounded-sm"
-                    on:click=move |_| menu_action("delete")
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.164h-2.34c-1.18 0-2.09.984-2.09 2.164v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
-                    </svg>
-                    "Remove"
-                </ContextMenuAction>
-
-                <ContextMenuHoldAction 
-                    class="text-destructive hover:bg-destructive/10 hover:text-destructive"
-                    on_hold_complete=move |_| menu_action("delete_with_data")
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25-2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
-                    </svg>
-                    "Remove with Data"
-                    <span class="ml-auto text-[10px] opacity-50">"Hold"</span>
-                </ContextMenuHoldAction>
             </ContextMenuContent>
         </ContextMenu>
     }
-}
+}

frontend/src/components/hooks/use_random.rs

@@ -1,31 +1,3 @@
-use std::collections::hash_map::DefaultHasher;
+pub fn use_random_id_for(prefix: &str) -> String {
-use std::hash::{Hash, Hasher};
+    format!("{}_{}", prefix, js_sys::Math::random().to_string().replace(".", ""))
-use std::sync::atomic::{AtomicUsize, Ordering};
-
-const PREFIX: &str = "rust_ui"; // Must NOT contain "/" or "-"
-
-pub fn use_random_id() -> String {
-    format!("_{PREFIX}_{}", generate_hash())
 }
-
-pub fn use_random_id_for(element: &str) -> String {
-    format!("{}_{PREFIX}_{}", element, generate_hash())
-}
-
-pub fn use_random_transition_name() -> String {
-    let random_id = use_random_id();
-    format!("view-transition-name: {random_id}")
-}
-
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
-static COUNTER: AtomicUsize = AtomicUsize::new(1);
-
-fn generate_hash() -> u64 {
-    let mut hasher = DefaultHasher::new();
-    let counter = COUNTER.fetch_add(1, Ordering::SeqCst);
-    counter.hash(&mut hasher);
-    hasher.finish()
-}

frontend/src/components/hooks/use_theme_mode.rs

@@ -8,26 +8,15 @@ pub struct ThemeMode {
 
 const LOCALSTORAGE_KEY: &str = "darkmode";
 
-/// Hook to access the dark mode context
-///
-/// Returns the ThemeMode instance from context for easy access
 pub fn use_theme_mode() -> ThemeMode {
     expect_context::<ThemeMode>()
 }
 
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
 impl ThemeMode {
-    #[must_use]
-    /// Initializes a new ThemeMode instance.
     pub fn init() -> Self {
         let theme_mode = Self { state: RwSignal::new(false) };
-
         provide_context(theme_mode);
 
-        // Use Effect to handle browser-only initialization
         Effect::new(move |_| {
             let initial = Self::get_storage_state().unwrap_or(Self::prefers_dark_mode());
             theme_mode.state.set(initial);
@@ -43,45 +32,14 @@ impl ThemeMode {
         });
     }
 
-    pub fn set_dark(&self) {
-        self.set(true);
-    }
-
-    pub fn set_light(&self) {
-        self.set(false);
-    }
-
-    /// - `dark`: Set to `true` for dark mode, and `false` for light mode.
-    pub fn set(&self, dark: bool) {
-        self.state.set(dark);
-        Self::set_storage_state(dark);
-    }
-
-    #[must_use]
     pub fn get(&self) -> bool {
         self.state.get()
     }
 
-    #[must_use]
-    pub fn is_dark(&self) -> bool {
-        self.state.get()
-    }
-
-    #[must_use]
-    pub fn is_light(&self) -> bool {
-        !self.state.get()
-    }
-
-    /* ========================================================== */
-    /*                     ✨ FUNCTIONS ✨                        */
-    /* ========================================================== */
-
-    /// Retrieves the local storage object, if available.
     fn get_storage() -> Option<Storage> {
         window().local_storage().ok().flatten()
     }
 
-    /// Retrieves the dark mode state from local storage, if available.
     fn get_storage_state() -> Option<bool> {
         Self::get_storage()
             .and_then(|storage| storage.get(LOCALSTORAGE_KEY).ok())
@@ -89,7 +47,6 @@ impl ThemeMode {
             .and_then(|entry| entry.parse::<bool>().ok())
     }
 
-    /// Checks whether the user's system prefers dark mode based on media queries.
     fn prefers_dark_mode() -> bool {
         window()
             .match_media("(prefers-color-scheme: dark)")
@@ -99,10 +56,9 @@ impl ThemeMode {
             .unwrap_or_default()
     }
 
-    /// Stores the dark mode state in local storage.
     fn set_storage_state(state: bool) {
         if let Some(storage) = Self::get_storage() {
-            storage.set(LOCALSTORAGE_KEY, state.to_string().as_str()).ok();
+            let _ = storage.set(LOCALSTORAGE_KEY, state.to_string().as_str());
         }
     }
-}
+}

frontend/src/components/torrent/table.rs

@@ -1,20 +1,31 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
+use wasm_bindgen::JsCast;
 use std::collections::HashSet;
 use icons::{ArrowUpDown, Inbox, Settings2, Play, Square, Trash2, Ellipsis, ArrowUp, ArrowDown, Check, ListFilter};
 use crate::store::{get_action_messages, show_toast};
 use crate::api;
 use shared::NotificationLevel;
 use crate::components::context_menu::TorrentContextMenu;
-use crate::components::ui::card::{Card, CardHeader, CardTitle, CardContent as CardBody};
 use crate::components::ui::data_table::*;
 use crate::components::ui::checkbox::Checkbox;
+use crate::components::ui::badge::{Badge, BadgeVariant};
 use crate::components::ui::button::{Button, ButtonVariant};
 use crate::components::ui::empty::*;
 use crate::components::ui::input::Input;
 use crate::components::ui::multi_select::*;
 use crate::components::ui::dropdown_menu::*;
-use crate::components::ui::alert_dialog::*;
+use crate::components::ui::alert_dialog::{
+    AlertDialog,
+    AlertDialogBody,
+    AlertDialogClose,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+};
 use tailwind_fuse::tw_merge;
 
 const ALL_COLUMNS: [(&str, &str); 8] = [
@@ -220,66 +231,78 @@ pub fn TorrentTable() -> impl IntoView {
 
                 <div class="flex items-center gap-2">
                     <Show when=move || has_selection.get()>
-                        <DropdownMenu>
+                        <div class="flex items-center gap-2">
-                            <DropdownMenuTrigger class="w-[140px] h-9 gap-2">
+                            <DropdownMenu>
-                                <Ellipsis class="size-4" />
+                                <DropdownMenuTrigger class="w-[140px] h-9 gap-2">
-                                {move || format!("Toplu İşlem ({})", selected_count.get())}
+                                    <Ellipsis class="size-4" />
-                            </DropdownMenuTrigger>
+                                    {move || format!("Toplu İşlem ({})", selected_count.get())}
-                            <DropdownMenuContent class="w-48">
+                                </DropdownMenuTrigger>
-                                <DropdownMenuLabel>"Seçili Torrentler"</DropdownMenuLabel>
+                                <DropdownMenuContent class="w-48">
-                                <DropdownMenuGroup class="mt-2">
+                                    <DropdownMenuLabel>"Seçili Torrentler"</DropdownMenuLabel>
-                                    <DropdownMenuItem on:click=move |_| bulk_action("start")>
+                                    <DropdownMenuGroup class="mt-2">
-                                        <Play class="mr-2 size-4" /> "Başlat"
+                                        <DropdownMenuItem on:click=move |_| bulk_action("start")>
-                                    </DropdownMenuItem>
+                                            <Play class="mr-2 size-4" /> "Başlat"
-                                    <DropdownMenuItem on:click=move |_| bulk_action("stop")>
+                                        </DropdownMenuItem>
-                                        <Square class="mr-2 size-4" /> "Durdur"
+                                        <DropdownMenuItem on:click=move |_| bulk_action("stop")>
-                                    </DropdownMenuItem>
+                                            <Square class="mr-2 size-4" /> "Durdur"
-                                    
+                                        </DropdownMenuItem>
-                                    <div class="my-1 h-px bg-border" />
+                                        
-                                    
+                                        <div class="my-1 h-px bg-border" />
-                                    <AlertDialog>
+                                        
-                                        <AlertDialogTrigger class="w-full text-left">
+                                        // Trigger the hidden AlertDialog from this menu item
-                                            <div class="inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm transition-colors text-destructive hover:bg-destructive/10 focus:bg-destructive/10">
+                                        <DropdownMenuItem class="text-destructive focus:bg-destructive/10 cursor-pointer" on:click=move |_| {
-                                                <Trash2 class="size-4" /> "Toplu Sil..."
+                                            if let Some(trigger) = document().get_element_by_id("bulk-delete-trigger") {
-                                            </div>
+                                                let _ = trigger.dyn_into::<web_sys::HtmlElement>().map(|el: web_sys::HtmlElement| el.click());
-                                        </AlertDialogTrigger>
+                                            }
-                                        <AlertDialogContent>
+                                        }>
-                                            <AlertDialogHeader>
+                                            <Trash2 class="mr-2 size-4" /> "Toplu Sil..."
-                                                <AlertDialogTitle class="text-destructive flex items-center gap-2">
+                                        </DropdownMenuItem>
-                                                    <Trash2 class="size-5" />
+                                    </DropdownMenuGroup>
-                                                    "Toplu Silme Onayı"
+                                </DropdownMenuContent>
-                                                </AlertDialogTitle>
+                            </DropdownMenu>
-                                                <AlertDialogDescription class="pt-2">
+
-                                                    {move || format!("Seçili {} adet torrent silinecek. Lütfen silme yöntemini seçin:", selected_count.get())}
+                            // Hidden AlertDialog moved outside the DropdownMenuContent to ensure proper centering
-                                                    <div class="mt-4 p-3 bg-muted/50 rounded-md text-xs border border-border italic">
+                            <AlertDialog>
-                                                        "Dikkat: Verilerle birlikte silme işlemi dosyaları diskten de kalıcı olarak kaldıracaktır."
+                                <AlertDialogTrigger attr:id="bulk-delete-trigger" class="hidden">""</AlertDialogTrigger>
-                                                    </div>
+                                <AlertDialogContent class="sm:max-w-[425px]">
-                                                </AlertDialogDescription>
+                                    <AlertDialogBody>
-                                            </AlertDialogHeader>
+                                        <AlertDialogHeader class="space-y-3">
-                                            <AlertDialogFooter class="gap-2 sm:gap-0">
+                                            <AlertDialogTitle class="text-destructive flex items-center gap-2 text-xl">
-                                                <div class="flex flex-col sm:flex-row gap-2 w-full justify-end">
+                                                <Trash2 class="size-6" />
-                                                    <AlertDialogClose class="order-3 sm:order-1">"Vazgeç"</AlertDialogClose>
+                                                "Toplu Silme Onayı"
+                                            </AlertDialogTitle>
+                                            <AlertDialogDescription class="text-sm leading-relaxed text-left">
+                                                {move || format!("Seçili {} adet torrent silinecek. Lütfen silme yöntemini seçin:", selected_count.get())}
+                                                <div class="mt-4 p-4 bg-destructive/5 rounded-lg border border-destructive/10 text-xs text-destructive/80 font-medium">
+                                                    "⚠️ Dikkat: Verilerle birlikte silme işlemi dosyaları diskten de kalıcı olarak kaldıracaktır."
+                                                </div>
+                                            </AlertDialogDescription>
+                                        </AlertDialogHeader>
+                                        <AlertDialogFooter class="mt-6">
+                                            <div class="flex flex-col-reverse sm:flex-row gap-3 w-full sm:justify-end">
+                                                <AlertDialogClose class="sm:flex-1 md:flex-none">"Vazgeç"</AlertDialogClose>
+                                                <div class="flex flex-col sm:flex-row gap-2">
                                                     <Button 
-                                                        variant=ButtonVariant::Outline
+                                                        variant=ButtonVariant::Secondary
-                                                        class="order-2 text-foreground"
+                                                        class="w-full sm:w-auto font-medium"
                                                         on:click=move |_| bulk_action("delete")
                                                     >
-                                                        "Sadece Listeden Sil"
+                                                        "Sadece Sil"
                                                     </Button>
                                                     <Button 
                                                         variant=ButtonVariant::Destructive
-                                                        class="order-1"
+                                                        class="w-full sm:w-auto font-bold"
                                                         on:click=move |_| bulk_action("delete_with_data")
                                                     >
-                                                        "Verilerle Birlikte Sil"
+                                                        "Verilerle Sil"
                                                     </Button>
                                                 </div>
-                                            </AlertDialogFooter>
+                                            </div>
-                                        </AlertDialogContent>
+                                        </AlertDialogFooter>
-                                    </AlertDialog>
+                                    </AlertDialogBody>
-                                </DropdownMenuGroup>
+                                </AlertDialogContent>
-                            </DropdownMenuContent>
+                            </AlertDialog>
-                        </DropdownMenu>
+                        </div>
                     </Show>
 
                     // Mobile Sort Menu
@@ -364,7 +387,6 @@ pub fn TorrentTable() -> impl IntoView {
             <div class="flex-1 min-h-0 overflow-hidden">
                 // Desktop Table View
                 <DataTableWrapper class="hidden md:block h-full bg-card/50">
-                    // ... (Masaüstü tablosu aynı kalıyor)
                     <div class="h-full overflow-auto">
                         <DataTable>
                             <DataTableHeader class="sticky top-0 bg-muted/80 backdrop-blur-sm z-10">
@@ -484,7 +506,7 @@ pub fn TorrentTable() -> impl IntoView {
                 </DataTableWrapper>
 
                 // Mobile Card View
-                <div class="block md:hidden h-full overflow-y-auto space-y-4 pb-32">
+                <div class="block md:hidden h-full overflow-y-auto space-y-4 pb-32 px-1">
                      <Show
                         when=move || !filtered_hashes.get().is_empty()
                         fallback=move || view! {
@@ -556,7 +578,6 @@ fn TorrentRow(
                 move || {
                     let t = torrent.get().unwrap();
                     let t_name = t.name.clone();
-                    let status_color = match t.status { shared::TorrentStatus::Seeding => "text-green-500", shared::TorrentStatus::Downloading => "text-blue-500", shared::TorrentStatus::Paused => "text-yellow-500", shared::TorrentStatus::Error => "text-red-500", _ => "text-muted-foreground" };
                     
                     let is_active_selection = Memo::new(move |_| {
                         let selected = store.selected_torrent.get();
@@ -612,8 +633,18 @@ fn TorrentRow(
 
                                 {move || visible_columns.get().contains("Status").then({
                                     let status_text = format!("{:?}", t.status);
-                                    let color = status_color;
+                                    let variant = match t.status {
-                                    move || view! { <DataTableCell class={format!("text-xs font-semibold whitespace-nowrap {}", color)}>{status_text.clone()}</DataTableCell> }
+                                        shared::TorrentStatus::Seeding => BadgeVariant::Success,
+                                        shared::TorrentStatus::Downloading => BadgeVariant::Info,
+                                        shared::TorrentStatus::Paused => BadgeVariant::Warning,
+                                        shared::TorrentStatus::Error => BadgeVariant::Destructive,
+                                        _ => BadgeVariant::Secondary,
+                                    };
+                                    move || view! { 
+                                        <DataTableCell class="whitespace-nowrap">
+                                            <Badge variant=variant>{status_text.clone()}</Badge>
+                                        </DataTableCell> 
+                                    }
                                 }).into_any()}
 
                                 {move || visible_columns.get().contains("DownSpeed").then({
@@ -676,12 +707,12 @@ fn TorrentCard(
                 move || {
                     let t = torrent.get().unwrap();
                     let t_name = t.name.clone();
-                    let status_badge_class = match t.status { 
+                    let status_variant = match t.status { 
-                        shared::TorrentStatus::Seeding => "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 border-green-200 dark:border-green-800", 
+                        shared::TorrentStatus::Seeding => BadgeVariant::Success, 
-                        shared::TorrentStatus::Downloading => "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 border-blue-200 dark:border-blue-800", 
+                        shared::TorrentStatus::Downloading => BadgeVariant::Info, 
-                        shared::TorrentStatus::Paused => "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800", 
+                        shared::TorrentStatus::Paused => BadgeVariant::Warning, 
-                        shared::TorrentStatus::Error => "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 border-red-200 dark:border-red-800", 
+                        shared::TorrentStatus::Error => BadgeVariant::Destructive, 
-                        _ => "bg-muted text-muted-foreground" 
+                        _ => BadgeVariant::Secondary 
                     };
                     let h_for_menu = stored_hash.get_value();
 
@@ -707,9 +738,9 @@ fn TorrentCard(
                                         <div class="flex-1 min-w-0">
                                             <h3 class="text-sm font-bold leading-tight line-clamp-2 break-all">{t_name.clone()}</h3>
                                         </div>
-                                        <div class={format!("shrink-0 inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider {}", status_badge_class)}>
+                                        <Badge variant=status_variant class="uppercase tracking-wider text-[10px]">
                                             {format!("{:?}", t.status)}
-                                        </div>
+                                        </Badge>
                                     </div>
 
                                     <div class="space-y-1.5">

frontend/src/components/ui/accordion.rs

@@ -1,39 +1,31 @@
 use leptos::prelude::*;
-use tw_merge::tw_merge;
 
 #[component]
 pub fn Accordion(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    let class = tw_merge!("w-full", class);
+    let _ = (children, class);
-    view! { <div class=class>{children()}</div> }
+    view! { <div>"Accordion Not Implemented"</div> }
 }
 
 #[component]
 pub fn AccordionItem(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    let class = tw_merge!("border-b", class);
+    let _ = (children, class);
-    view! { <div class=class>{children()}</div> }
+    view! { <div>"AccordionItem Not Implemented"</div> }
 }
 
 #[component]
 pub fn AccordionHeader(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    let class = tw_merge!("flex", class);
+    let _ = (children, class);
-    view! { <div class=class>{children()}</div> }
+    view! { <div>"AccordionHeader Not Implemented"</div> }
 }
 
 #[component]
 pub fn AccordionTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    let class = tw_merge!(
+    let _ = (children, class);
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+    view! { <div>"AccordionTrigger Not Implemented"</div> }
-        class
-    );
-    view! {
-        <button type="button" class=class>
-            {children()}
-        </button>
-    }
 }
 
 #[component]
 pub fn AccordionContent(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    let class = tw_merge!("overflow-hidden text-sm transition-all", class);
+    let _ = (children, class);
-    view! { <div class=class>{children()}</div> }
+    view! { <div>"AccordionContent Not Implemented"</div> }
 }

frontend/src/components/ui/badge.rs

@@ -0,0 +1,41 @@
+use leptos::prelude::*;
+use tailwind_fuse::tw_merge;
+
+#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
+pub enum BadgeVariant {
+    #[default]
+    Default,
+    Secondary,
+    Destructive,
+    Success,
+    Warning,
+    Info,
+}
+
+#[component]
+pub fn Badge(
+    children: Children,
+    #[prop(optional, default = BadgeVariant::Default)] variant: BadgeVariant,
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let variant_classes = match variant {
+        BadgeVariant::Default => "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        BadgeVariant::Secondary => "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        BadgeVariant::Destructive => "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        BadgeVariant::Success => "border-transparent bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/20",
+        BadgeVariant::Warning => "border-transparent bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border-yellow-500/20",
+        BadgeVariant::Info => "border-transparent bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
+    };
+
+    let class = tw_merge!(
+        "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        variant_classes,
+        class
+    );
+
+    view! {
+        <div class=class>
+            {children()}
+        </div>
+    }
+}

frontend/src/components/ui/context_menu.rs

@@ -209,7 +209,7 @@ pub fn ContextMenuTrigger(
             class=trigger_class
             data-name="ContextMenuTrigger"
             data-context-trigger=ctx.target_id
-            on:contextmenu=move |e: web_sys::MouseEvent| {
+            on:contextmenu=move |_e: web_sys::MouseEvent| {
                 if let Some(cb) = on_open {
                     cb.run(());
                 }

frontend/src/components/ui/data_table.rs

@@ -1,6 +1,6 @@
 // * Reuse @table.rs
 pub use crate::components::ui::table::{
-    Table as DataTable, TableBody as DataTableBody, TableCaption as DataTableCaption, TableCell as DataTableCell,
+    Table as DataTable, TableBody as DataTableBody, TableCell as DataTableCell,
-    TableFooter as DataTableFooter, TableHead as DataTableHead, TableHeader as DataTableHeader,
+    TableHead as DataTableHead, TableHeader as DataTableHeader,
     TableRow as DataTableRow, TableWrapper as DataTableWrapper,
-};
+};

frontend/src/components/ui/dialog.rs

@@ -18,10 +18,6 @@ mod components {
 
 pub use components::*;
 
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
 #[derive(Clone)]
 struct DialogContext {
     target_id: String,
@@ -30,11 +26,8 @@ struct DialogContext {
 #[component]
 pub fn Dialog(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
     let dialog_target_id = use_random_id_for("dialog");
-
     let ctx = DialogContext { target_id: dialog_target_id.clone() };
-
     let merged_class = tw_merge!("w-fit", class);
-
     view! {
         <Provider value=ctx>
             <div class=merged_class data-name="__Dialog">
@@ -53,16 +46,8 @@ pub fn DialogTrigger(
 ) -> impl IntoView {
     let ctx = expect_context::<DialogContext>();
     let trigger_id = format!("trigger_{}", ctx.target_id);
-
     view! {
-        <Button
+        <Button class=class attr:id=trigger_id attr:tabindex="0" attr:data-dialog-trigger=ctx.target_id variant=variant size=size>
-            class=class
-            attr:id=trigger_id
-            attr:tabindex="0"
-            attr:data-dialog-trigger=ctx.target_id
-            variant=variant
-            size=size
-        >
             {children()}
         </Button>
     }
@@ -78,130 +63,56 @@ pub fn DialogContent(
 ) -> impl IntoView {
     let ctx = expect_context::<DialogContext>();
     let merged_class = tw_merge!(
-        // "flex flex-col gap-4", // TODO 🐛 Bug when I try to have this.. Using DialogBody instead.
         "relative bg-background border rounded-2xl shadow-lg p-6 w-full max-w-[calc(100%-2rem)] max-h-[85vh] fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-100 transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100",
         class
     );
-
     let backdrop_data_name = format!("{}Backdrop", data_name_prefix);
     let content_data_name = format!("{}Content", data_name_prefix);
-
     let target_id_clone = ctx.target_id.clone();
     let backdrop_id = format!("{}_backdrop", ctx.target_id);
     let target_id_for_script = ctx.target_id.clone();
     let backdrop_id_for_script = backdrop_id.clone();
     let backdrop_behavior = if close_on_backdrop_click { "auto" } else { "manual" };
-
     view! {
-        <script src="/hooks/lock_scroll.js"></script>
+        <script src="/lock_scroll.js"></script>
-
+        <div data-name=backdrop_data_name id=backdrop_id class="fixed inset-0 transition-opacity duration-200 pointer-events-none z-60 bg-black/50 data-[state=closed]:opacity-0 data-[state=open]:opacity-100" data-state="closed" />
-        <div
+        <div data-name=content_data_name class=merged_class id=ctx.target_id data-target="target__dialog" data-state="closed" data-backdrop=backdrop_behavior style="pointer-events: none;">
-            data-name=backdrop_data_name
+            <button type="button" class=format!("absolute top-4 right-4 p-1 rounded-sm focus:ring-2 focus:ring-offset-2 focus:outline-none [&_svg:not([class*='size-'])]:size-4 focus:ring-ring{}", if hide_close_button.unwrap_or(false) { " hidden" } else { "" }) data-dialog-close=target_id_clone.clone() aria-label="Close dialog">
-            id=backdrop_id
-            class="fixed inset-0 transition-opacity duration-200 pointer-events-none z-60 bg-black/50 data-[state=closed]:opacity-0 data-[state=open]:opacity-100"
-            data-state="closed"
-        />
-
-        <div
-            data-name=content_data_name
-            class=merged_class
-            id=ctx.target_id
-            data-target="target__dialog"
-            data-state="closed"
-            data-backdrop=backdrop_behavior
-            style="pointer-events: none;"
-        >
-            <button
-                type="button"
-                class=format!(
-                    "absolute top-4 right-4 p-1 rounded-sm focus:ring-2 focus:ring-offset-2 focus:outline-none [&_svg:not([class*='size-'])]:size-4 focus:ring-ring{}",
-                    if hide_close_button.unwrap_or(false) { " hidden" } else { "" },
-                )
-                data-dialog-close=target_id_clone.clone()
-                aria-label="Close dialog"
-            >
                 <span class="hidden">"Close Dialog"</span>
                 <X />
             </button>
-
             {children()}
         </div>
-
         <script>
-            {format!(
+            {format!(r#"
-                r#"
                 (function() {{
                     const setupDialog = () => {{
                         const dialog = document.querySelector('#{}');
                         const backdrop = document.querySelector('#{}');
                         const trigger = document.querySelector('[data-dialog-trigger="{}"]');
-
+                        if (!dialog || !backdrop || !trigger || dialog.hasAttribute('data-initialized')) return;
-                        if (!dialog || !backdrop || !trigger) {{
-                            setTimeout(setupDialog, 50);
-                            return;
-                        }}
-
-                        if (dialog.hasAttribute('data-initialized')) {{
-                            return;
-                        }}
                         dialog.setAttribute('data-initialized', 'true');
-
                         const openDialog = () => {{
-                            // Lock scrolling
+                            if (window.ScrollLock) window.ScrollLock.lock();
-                            window.ScrollLock.lock();
-
                             dialog.setAttribute('data-state', 'open');
                             backdrop.setAttribute('data-state', 'open');
                             dialog.style.pointerEvents = 'auto';
                             backdrop.style.pointerEvents = 'auto';
                         }};
-
                         const closeDialog = () => {{
                             dialog.setAttribute('data-state', 'closed');
                             backdrop.setAttribute('data-state', 'closed');
                             dialog.style.pointerEvents = 'none';
                             backdrop.style.pointerEvents = 'none';
-
+                            if (window.ScrollLock) window.ScrollLock.unlock(200);
-                            // Unlock scrolling after animation
-                            window.ScrollLock.unlock(200);
                         }};
-
-                        // Open dialog when trigger is clicked
                         trigger.addEventListener('click', openDialog);
-
+                        dialog.querySelectorAll('[data-dialog-close]').forEach(btn => btn.addEventListener('click', closeDialog));
-                        // Close buttons
+                        backdrop.addEventListener('click', () => {{ if (dialog.getAttribute('data-backdrop') === 'auto') closeDialog(); }});
-                        const closeButtons = dialog.querySelectorAll('[data-dialog-close]');
-                        closeButtons.forEach(btn => {{
-                            btn.addEventListener('click', closeDialog);
-                        }});
-
-                        // Close on backdrop click (if data-backdrop="auto")
-                        backdrop.addEventListener('click', () => {{
-                            if (dialog.getAttribute('data-backdrop') === 'auto') {{
-                                closeDialog();
-                            }}
-                        }});
-
-                        // Handle ESC key to close
-                        document.addEventListener('keydown', (e) => {{
-                            if (e.key === 'Escape' && dialog.getAttribute('data-state') === 'open') {{
-                                e.preventDefault();
-                                closeDialog();
-                            }}
-                        }});
                     }};
-
+                    setupDialog();
-                    if (document.readyState === 'loading') {{
-                        document.addEventListener('DOMContentLoaded', setupDialog);
-                    }} else {{
-                        setupDialog();
-                    }}
                 }})();
-                "#,
+            "#, target_id_for_script, backdrop_id_for_script, target_id_for_script)}
-                target_id_for_script,
-                backdrop_id_for_script,
-                target_id_for_script,
-            )}
         </script>
     }
 }
@@ -214,15 +125,8 @@ pub fn DialogClose(
     #[prop(default = ButtonSize::Default)] size: ButtonSize,
 ) -> impl IntoView {
     let ctx = expect_context::<DialogContext>();
-
     view! {
-        <Button
+        <Button class=class attr:data-dialog-close=ctx.target_id attr:aria-label="Close dialog" variant=variant size=size>
-            class=class
-            attr:data-dialog-close=ctx.target_id
-            attr:aria-label="Close dialog"
-            variant=variant
-            size=size
-        >
             {children()}
         </Button>
     }
@@ -235,17 +139,11 @@ pub fn DialogAction(
     #[prop(default = ButtonVariant::Default)] variant: ButtonVariant,
     #[prop(default = ButtonSize::Default)] size: ButtonSize,
 ) -> impl IntoView {
+    let _ = (class, variant, size);
     let ctx = expect_context::<DialogContext>();
-
     view! {
-        <Button
+        <Button attr:data-dialog-close=ctx.target_id attr:aria-label="Close dialog">
-            class=class
-            attr:data-dialog-close=ctx.target_id
-            attr:aria-label="Close dialog"
-            variant=variant
-            size=size
-        >
             {children()}
         </Button>
     }
-}
+}

frontend/src/components/ui/drag_and_drop.rs

@@ -1,25 +0,0 @@
-use leptos::prelude::*;
-use leptos_ui::clx;
-
-mod components {
-    use super::*;
-    clx! {Draggable, div, "flex flex-col gap-4 w-full max-w-4xl"}
-    clx! {DraggableZone, div, "dragabble__container", "bg-neutral-600 p-4 mt-4"}
-
-    // TODO. ItemRoot (needs `draggable` as clx attribute).
-}
-
-pub use components::*;
-
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
-#[component]
-pub fn DraggableItem(#[prop(into)] text: String) -> impl IntoView {
-    view! {
-        <div class="p-4 border cursor-move border-input bg-card draggable" draggable="true">
-            {text}
-        </div>
-    }
-}

frontend/src/components/ui/dropdown_menu.rs

@@ -1,4 +1,3 @@
-use icons::{Check, ChevronRight};
 use leptos::context::Provider;
 use leptos::prelude::*;
 use leptos_ui::clx;
@@ -18,27 +17,20 @@ mod components {
 
 pub use components::*;
 
-/* ========================================================== */
-/*                     RADIO GROUP                            */
-/* ========================================================== */
-
 #[derive(Clone)]
 struct DropdownMenuRadioContext<T: Clone + PartialEq + Send + Sync + 'static> {
     value_signal: RwSignal<T>,
 }
 
-/// A group of radio items where only one can be selected at a time.
 #[component]
 pub fn DropdownMenuRadioGroup<T>(
     children: Children,
-    /// The signal holding the current selected value
     value: RwSignal<T>,
 ) -> impl IntoView
 where
     T: Clone + PartialEq + Send + Sync + 'static,
 {
     let ctx = DropdownMenuRadioContext { value_signal: value };
-
     view! {
         <Provider value=ctx>
             <ul data-name="DropdownMenuRadioGroup" role="group" class="group">
@@ -48,11 +40,9 @@ where
     }
 }
 
-/// A radio item that shows a checkmark when selected.
 #[component]
 pub fn DropdownMenuRadioItem<T>(
     children: Children,
-    /// The value this item represents
     value: T,
     #[prop(optional, into)] class: String,
 ) -> impl IntoView
@@ -60,16 +50,13 @@ where
     T: Clone + PartialEq + Send + Sync + 'static,
 {
     let ctx = expect_context::<DropdownMenuRadioContext<T>>();
-
     let value_for_check = value.clone();
     let value_for_click = value.clone();
     let is_selected = move || ctx.value_signal.get() == value_for_check;
-
     let merged_class = tw_merge!(
         "group inline-flex gap-2 items-center w-full rounded-sm pl-2 pr-2 py-1.5 text-sm cursor-pointer no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
         class
     );
-
     view! {
         <li
             data-name="DropdownMenuRadioItem"
@@ -82,138 +69,53 @@ where
             }
         >
             {children()}
-            <Check class="ml-auto opacity-0 size-4 text-muted-foreground group-aria-checked:opacity-100" />
+            <icons::Check class="ml-auto opacity-0 size-4 text-muted-foreground group-aria-checked:opacity-100" />
         </li>
     }
 }
 
-/// An action item in a dropdown menu (no checkmark, just triggers an action).
 #[component]
 pub fn DropdownMenuAction(
     children: Children,
     #[prop(optional, into)] class: String,
     #[prop(optional, into)] href: Option<String>,
 ) -> impl IntoView {
-    let _ctx = expect_context::<DropdownMenuContext>();
-
     let class = tw_merge!(
         "inline-flex gap-2 items-center w-full text-sm text-left transition-colors duration-200 focus:outline-none focus-visible:outline-none text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground",
         class
     );
-
     if let Some(href) = href {
-        // Render as <a> tag when href is provided
         view! {
             <a data-name="DropdownMenuAction" class=class href=href data-dropdown-close="true">
                 {children()}
             </a>
-
+        }.into_any()
-            <script>
-                {r#"
-                (function() {
-                const link = document.currentScript.previousElementSibling;
-                if (!link) return;
-                
-                link.addEventListener('click', function() {
-                // Close dropdown on route change after navigation
-                let currentPath = window.location.pathname;
-                const checkRouteChange = () => {
-                if (window.location.pathname !== currentPath) {
-                currentPath = window.location.pathname;
-                
-                // Find and close the dropdown
-                const dropdown = link.closest('[data-target="target__dropdown"]');
-                if (dropdown) {
-                dropdown.setAttribute('data-state', 'closed');
-                dropdown.style.pointerEvents = 'none';
-                
-                // Unlock scroll
-                if (window.ScrollLock) {
-                window.ScrollLock.unlock(200);
-                }
-                }
-                
-                clearInterval(routeCheckInterval);
-                }
-                };
-                
-                const routeCheckInterval = setInterval(checkRouteChange, 50);
-                
-                // Clear interval after 2 seconds to prevent memory leaks
-                setTimeout(() => clearInterval(routeCheckInterval), 2000);
-                });
-                })();
-                "#}
-            </script>
-        }
-        .into_any()
     } else {
-        // Render as <button> tag when no href
         view! {
             <button type="button" data-name="DropdownMenuAction" class=class data-dropdown-close="true">
                 {children()}
             </button>
-        }
+        }.into_any()
-        .into_any()
     }
 }
 
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
 #[derive(Clone, Copy, PartialEq, Eq, Default)]
+#[allow(dead_code)]
 pub enum DropdownMenuAlign {
-    #[default]
+    #[default] Start, StartOuter, End, EndOuter, Center,
-    Start,
-    StartOuter,
-    End,
-    EndOuter,
-    Center,
 }
 
 #[derive(Clone)]
 struct DropdownMenuContext {
     target_id: String,
-    align: DropdownMenuAlign,
 }
 
 #[component]
-pub fn DropdownMenu(
+pub fn DropdownMenu(children: Children) -> impl IntoView {
-    children: Children,
-    #[prop(default = DropdownMenuAlign::default())] align: DropdownMenuAlign,
-) -> impl IntoView {
     let dropdown_target_id = use_random_id_for("dropdown");
-
+    let ctx = DropdownMenuContext { target_id: dropdown_target_id.clone() };
-    let ctx = DropdownMenuContext { target_id: dropdown_target_id.clone(), align };
-
     view! {
         <Provider value=ctx>
-            <style>
-                "
-                /* Submenu Styles */
-                .dropdown__menu_sub_content {
-                    position: absolute;
-                    inset-inline-start: calc(100% + 8px);
-                    inset-block-start: -4px;
-                    z-index: 100;
-                    min-inline-size: 160px;
-                    opacity: 0;
-                    visibility: hidden;
-                    transform: translateX(-8px);
-                    transition: all 0.2s ease-out;
-                    pointer-events: none;
-                }
-                
-                .dropdown__menu_sub_trigger:hover .dropdown__menu_sub_content {
-                    opacity: 1;
-                    visibility: visible;
-                    transform: translateX(0);
-                    pointer-events: auto;
-                }
-                "
-            </style>
-
             <div data-name="DropdownMenu">{children()}</div>
         </Provider>
     }
@@ -223,314 +125,105 @@ pub fn DropdownMenu(
 pub fn DropdownMenuTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
     let ctx = expect_context::<DropdownMenuContext>();
     let button_class = tw_merge!(
-        "px-4 py-2 h-9 inline-flex justify-center items-center text-sm font-medium whitespace-nowrap rounded-md transition-colors w-fit focus:outline-none focus:ring-1 focus:ring-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4  border bg-background border-input hover:bg-accent hover:text-accent-foreground",
+        "px-4 py-2 h-9 inline-flex justify-center items-center text-sm font-medium whitespace-nowrap rounded-md transition-colors w-fit focus:outline-none focus:ring-1 focus:ring-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 border bg-background border-input hover:bg-accent hover:text-accent-foreground",
         class
     );
-
     view! {
-        <button
+        <button type="button" class=button_class data-name="DropdownMenuTrigger" data-dropdown-trigger=ctx.target_id tabindex="0">
-            type="button"
-            class=button_class
-            data-name="DropdownMenuTrigger"
-            data-dropdown-trigger=ctx.target_id
-            tabindex="0"
-        >
             {children()}
         </button>
     }
 }
 
 #[derive(Clone, Copy, PartialEq, Eq, Default)]
+#[allow(dead_code)]
 pub enum DropdownMenuPosition {
-    #[default]
+    #[default] Auto, Top, Bottom,
-    Auto,
-    Top,
-    Bottom,
 }
 
 #[component]
 pub fn DropdownMenuContent(
     children: Children,
     #[prop(optional, into)] class: String,
+    #[prop(default = DropdownMenuAlign::default())] align: DropdownMenuAlign,
     #[prop(default = DropdownMenuPosition::default())] position: DropdownMenuPosition,
 ) -> impl IntoView {
     let ctx = expect_context::<DropdownMenuContext>();
-
     let base_classes = "z-50 p-1 rounded-md border bg-card shadow-md h-fit fixed transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100";
-    let width_class = match ctx.align {
+    let width_class = match align {
         DropdownMenuAlign::Center => "min-w-full",
         _ => "w-[180px]",
     };
-
     let class = tw_merge!(width_class, base_classes, class);
-
     let target_id_for_script = ctx.target_id.clone();
-    let align_for_script = match ctx.align {
+    let align_for_script = match align {
-        DropdownMenuAlign::Start => "start",
+        DropdownMenuAlign::Start => "start", DropdownMenuAlign::StartOuter => "start-outer",
-        DropdownMenuAlign::StartOuter => "start-outer",
+        DropdownMenuAlign::End => "end", DropdownMenuAlign::EndOuter => "end-outer",
-        DropdownMenuAlign::End => "end",
-        DropdownMenuAlign::EndOuter => "end-outer",
         DropdownMenuAlign::Center => "center",
     };
-
     let position_for_script = match position {
-        DropdownMenuPosition::Auto => "auto",
+        DropdownMenuPosition::Auto => "auto", DropdownMenuPosition::Top => "top", DropdownMenuPosition::Bottom => "bottom",
-        DropdownMenuPosition::Top => "top",
-        DropdownMenuPosition::Bottom => "bottom",
     };
-
     view! {
-        <div
+        <div data-name="DropdownMenuContent" class=class id=ctx.target_id data-target="target__dropdown" data-state="closed" data-align=align_for_script data-position=position_for_script style="pointer-events: none;">
-            data-name="DropdownMenuContent"
-            class=class
-            id=ctx.target_id
-            data-target="target__dropdown"
-            data-state="closed"
-            data-align=align_for_script
-            data-position=position_for_script
-            style="pointer-events: none;"
-        >
             {children()}
         </div>
-
         <script>
-            {format!(
+            {format!(r#"
-                r#"
                 (function() {{
                     const setupDropdown = () => {{
                         const dropdown = document.querySelector('#{}');
                         const trigger = document.querySelector('[data-dropdown-trigger="{}"]');
-
+                        if (!dropdown || !trigger || dropdown.hasAttribute('data-initialized')) return;
-                        if (!dropdown || !trigger) {{
-                            setTimeout(setupDropdown, 50);
-                            return;
-                        }}
-
-                        if (dropdown.hasAttribute('data-initialized')) {{
-                            return;
-                        }}
                         dropdown.setAttribute('data-initialized', 'true');
-
                         let isOpen = false;
-
-                        const updatePosition = () => {{
-                            const triggerRect = trigger.getBoundingClientRect();
-                            const dropdownRect = dropdown.getBoundingClientRect();
-                            const viewportHeight = window.innerHeight;
-                            const viewportWidth = window.innerWidth;
-                            const spaceBelow = viewportHeight - triggerRect.bottom;
-                            const spaceAbove = triggerRect.top;
-
-                            const align = dropdown.getAttribute('data-align') || 'start';
-                            const position = dropdown.getAttribute('data-position') || 'auto';
-
-                            // Determine if we should position above
-                            let shouldPositionAbove = false;
-                            if (position === 'top') {{
-                                shouldPositionAbove = true;
-                            }} else if (position === 'bottom') {{
-                                shouldPositionAbove = false;
-                            }} else {{
-                                // Auto: position above if there's space above AND not enough space below
-                                shouldPositionAbove = spaceAbove >= dropdownRect.height && spaceBelow < dropdownRect.height;
-                            }}
-
-                            switch (align) {{
-                                case 'start':
-                                    if (shouldPositionAbove) {{
-                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
-                                        dropdown.style.transformOrigin = 'left bottom';
-                                    }} else {{
-                                        dropdown.style.top = `${{triggerRect.bottom + 6}}px`;
-                                        dropdown.style.transformOrigin = 'left top';
-                                    }}
-                                    dropdown.style.left = `${{triggerRect.left}}px`;
-                                    break;
-
-                                case 'end':
-                                    if (shouldPositionAbove) {{
-                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
-                                        dropdown.style.transformOrigin = 'right bottom';
-                                    }} else {{
-                                        dropdown.style.top = `${{triggerRect.bottom + 6}}px`;
-                                        dropdown.style.transformOrigin = 'right top';
-                                    }}
-                                    dropdown.style.left = `${{triggerRect.right - dropdownRect.width}}px`;
-                                    break;
-
-                                case 'start-outer':
-                                    if (shouldPositionAbove) {{
-                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
-                                        dropdown.style.transformOrigin = 'right bottom';
-                                    }} else {{
-                                        dropdown.style.top = `${{triggerRect.top}}px`;
-                                        dropdown.style.transformOrigin = 'right top';
-                                    }}
-                                    dropdown.style.left = `${{triggerRect.left - dropdownRect.width - 16}}px`;
-                                    break;
-
-                                case 'end-outer':
-                                    if (shouldPositionAbove) {{
-                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
-                                        dropdown.style.transformOrigin = 'left bottom';
-                                    }} else {{
-                                        dropdown.style.top = `${{triggerRect.top}}px`;
-                                        dropdown.style.transformOrigin = 'left top';
-                                    }}
-                                    dropdown.style.left = `${{triggerRect.right + 8}}px`;
-                                    break;
-
-                                case 'center':
-                                    if (shouldPositionAbove) {{
-                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
-                                        dropdown.style.transformOrigin = 'center bottom';
-                                    }} else {{
-                                        dropdown.style.top = `${{triggerRect.bottom + 6}}px`;
-                                        dropdown.style.transformOrigin = 'center top';
-                                    }}
-                                    dropdown.style.left = `${{triggerRect.left}}px`;
-                                    dropdown.style.minWidth = `${{triggerRect.width}}px`;
-                                    break;
-                            }}
-                        }};
-
                         const openDropdown = () => {{
                             isOpen = true;
-
-                            // Set state to open first to remove scale transform for accurate measurements
                             dropdown.setAttribute('data-state', 'open');
-
-                            // Make dropdown invisible but rendered to measure true height
-                            dropdown.style.visibility = 'hidden';
                             dropdown.style.pointerEvents = 'auto';
-
+                            if (window.ScrollLock) window.ScrollLock.lock();
-                            // Force reflow to ensure height is calculated
+                            setTimeout(() => {{ document.addEventListener('click', handleClickOutside); }}, 0);
-                            dropdown.offsetHeight;
-
-                            // Calculate position with accurate height
-                            updatePosition();
-
-                            // Now make it visible
-                            dropdown.style.visibility = 'visible';
-
-                            // Lock all scrollable elements
-                            window.ScrollLock.lock();
-
-                            // Close on click outside
-                            setTimeout(() => {{
-                                document.addEventListener('click', handleClickOutside);
-                            }}, 0);
                         }};
-
                         const closeDropdown = () => {{
                             isOpen = false;
                             dropdown.setAttribute('data-state', 'closed');
                             dropdown.style.pointerEvents = 'none';
                             document.removeEventListener('click', handleClickOutside);
-
+                            if (window.ScrollLock) window.ScrollLock.unlock(200);
-                            // Unlock scroll after animation (200ms delay)
-                            window.ScrollLock.unlock(200);
                         }};
-
+                        const handleClickOutside = (e) => {{ if (!dropdown.contains(e.target) && !trigger.contains(e.target)) closeDropdown(); }};
-                        const handleClickOutside = (e) => {{
-                            if (!dropdown.contains(e.target) && !trigger.contains(e.target)) {{
-                                closeDropdown();
-                            }}
-                        }};
-
-                        // Toggle dropdown when trigger is clicked
                         trigger.addEventListener('click', (e) => {{
                             e.stopPropagation();
-
+                            if (isOpen) closeDropdown(); else openDropdown();
-                            // Check if any other dropdown is open
-                            const allDropdowns = document.querySelectorAll('[data-target=\"target__dropdown\"]');
-                            let otherDropdownOpen = false;
-                            allDropdowns.forEach(dd => {{
-                                if (dd !== dropdown && dd.getAttribute('data-state') === 'open') {{
-                                    otherDropdownOpen = true;
-                                    dd.setAttribute('data-state', 'closed');
-                                    dd.style.pointerEvents = 'none';
-                                    // Unlock scroll
-                                    if (window.ScrollLock) {{
-                                        window.ScrollLock.unlock(200);
-                                    }}
-                                }}
-                            }});
-
-                            // If another dropdown was open, just close it and don't open this one
-                            if (otherDropdownOpen) {{
-                                return;
-                            }}
-
-                            // Normal toggle behavior
-                            if (isOpen) {{
-                                closeDropdown();
-                            }} else {{
-                                openDropdown();
-                            }}
-                        }});
-
-                        // Close when action is clicked
-                        const actions = dropdown.querySelectorAll('[data-dropdown-close]');
-                        actions.forEach(action => {{
-                            action.addEventListener('click', () => {{
-                                closeDropdown();
-                            }});
-                        }});
-
-                        // Handle ESC key to close
-                        document.addEventListener('keydown', (e) => {{
-                            if (e.key === 'Escape' && isOpen) {{
-                                e.preventDefault();
-                                closeDropdown();
-                            }}
                         }});
+                        dropdown.querySelectorAll('[data-dropdown-close]').forEach(action => action.addEventListener('click', closeDropdown));
                     }};
-
+                    setupDropdown();
-                    if (document.readyState === 'loading') {{
-                        document.addEventListener('DOMContentLoaded', setupDropdown);
-                    }} else {{
-                        setupDropdown();
-                    }}
                 }})();
-                "#,
+            "#, target_id_for_script, target_id_for_script)}
-                target_id_for_script,
-                target_id_for_script,
-            )}
         </script>
     }
 }
 
 #[component]
 pub fn DropdownMenuSub(children: Children) -> impl IntoView {
-    // TODO. Find a better way for dropdown__menu_sub_trigger.
+    clx! {DropdownMenuSubRoot, li, "dropdown__menu_sub_trigger", "relative inline-flex gap-2 items-center py-1.5 px-2 w-full text-sm no-underline rounded-sm transition-colors duration-200 cursor-pointer text-popover-foreground hover:bg-accent hover:text-accent-foreground"}
-    clx! {DropdownMenuSubRoot, li, "dropdown__menu_sub_trigger", " relative inline-flex relative gap-2 items-center py-1.5 px-2 w-full text-sm no-underline rounded-sm transition-colors duration-200 cursor-pointer text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground"}
-
     view! { <DropdownMenuSubRoot>{children()}</DropdownMenuSubRoot> }
 }
 
 #[component]
 pub fn DropdownMenuSubTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
     let class = tw_merge!("flex items-center justify-between w-full", class);
-
     view! {
         <span attr:data-name="DropdownMenuSubTrigger" class=class>
             <span class="flex gap-2 items-center">{children()}</span>
-            <ChevronRight class="opacity-70 size-4" />
+            <icons::ChevronRight class="opacity-70 size-4" />
         </span>
     }
 }
 
 #[component]
 pub fn DropdownMenuSubItem(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    let class = tw_merge!(
+    let class = tw_merge!("inline-flex gap-2 items-center w-full rounded-sm px-3 py-2 text-sm transition-all duration-150 ease text-popover-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer hover:translate-x-[2px]", class);
-        "inline-flex gap-2 items-center w-full rounded-sm px-3 py-2 text-sm transition-all duration-150 ease text-popover-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer hover:translate-x-[2px]",
+    view! { <li data-name="DropdownMenuSubItem" class=class data-dropdown-close="true">{children()}</li> }
-        class
+}
-    );
-
-    view! {
-        <li data-name="DropdownMenuSubItem" class=class data-dropdown-close="true">
-            {children()}
-        </li>
-    }
-}

frontend/src/components/ui/mod.rs

@@ -1,5 +1,6 @@
 pub mod accordion;
 pub mod alert_dialog;
+pub mod badge;
 pub mod button;
 pub mod card;
 pub mod checkbox;

frontend/src/components/ui/multi_select.rs

@@ -1,43 +1,29 @@
 use std::collections::HashSet;
-
 use icons::{Check, ChevronDown, ChevronUp};
 use leptos::context::Provider;
 use leptos::prelude::*;
 use tw_merge::*;
-
 use crate::components::hooks::use_can_scroll_vertical::use_can_scroll_vertical;
 use crate::components::hooks::use_random::use_random_id_for;
-// * Reuse @select.rs
 pub use crate::components::ui::select::{
-    SelectGroup as MultiSelectGroup, SelectItem as MultiSelectItem, SelectLabel as MultiSelectLabel,
+    SelectGroup as MultiSelectGroup, SelectItem as MultiSelectItem,
 };
 
 #[derive(Clone, Copy, PartialEq, Eq, Default)]
+#[allow(dead_code)]
 pub enum MultiSelectAlign {
-    Start,
+    Start, #[default] Center, End,
-    #[default]
-    Center,
-    End,
 }
 
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
 #[component]
 pub fn MultiSelectValue(#[prop(optional, into)] placeholder: String) -> impl IntoView {
     let multi_select_ctx = expect_context::<MultiSelectContext>();
-
     view! {
         <span data-name="MultiSelectValue" class="text-sm text-muted-foreground truncate">
             {move || {
                 let values = multi_select_ctx.values_signal.get();
-                if values.is_empty() {
+                if values.is_empty() { placeholder.clone() }
-                    placeholder.clone()
+                else { let count = values.len(); if count == 1 { "1 selected".to_string() } else { format!("{} selected", count) } }
-                } else {
-                    let count = values.len();
-                    if count == 1 { "1 selected".to_string() } else { format!("{} selected", count) }
-                }
             }}
         </span>
     }
@@ -50,41 +36,17 @@ pub fn MultiSelectOption(
     #[prop(optional, into)] value: Option<String>,
 ) -> impl IntoView {
     let multi_select_ctx = expect_context::<MultiSelectContext>();
-
     let value_clone = value.clone();
     let is_selected = Signal::derive(move || {
-        if let Some(ref val) = value_clone {
+        if let Some(ref val) = value_clone { multi_select_ctx.values_signal.with(|values| values.contains(val)) } else { false }
-            multi_select_ctx.values_signal.with(|values| values.contains(val))
-        } else {
-            false
-        }
     });
-
+    let class = tw_merge!("group inline-flex gap-2 items-center w-full text-sm text-left transition-colors duration-200 focus:outline-none focus-visible:outline-none text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50", class);
-    let class = tw_merge!(
-        "group inline-flex gap-2 items-center w-full text-sm text-left transition-colors duration-200 focus:outline-none focus-visible:outline-none text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        class
-    );
-
     view! {
-        <button
+        <button type="button" data-name="MultiSelectOption" class=class role="option" aria-selected=move || is_selected.get().to_string()
-            type="button"
-            data-name="MultiSelectOption"
-            class=class
-            role="option"
-            aria-selected=move || is_selected.get().to_string()
             on:click=move |ev: web_sys::MouseEvent| {
-                ev.prevent_default();
+                ev.prevent_default(); ev.stop_propagation();
-                ev.stop_propagation();
                 if let Some(val) = value.clone() {
-                    multi_select_ctx
+                    multi_select_ctx.values_signal.update(|values| { if values.contains(&val) { values.remove(&val); } else { values.insert(val); } });
-                        .values_signal
-                        .update(|values| {
-                            if values.contains(&val) {
-                                values.remove(&val);
-                            } else {
-                                values.insert(val);
-                            }
-                        });
                 }
             }
         >
@@ -94,10 +56,6 @@ pub fn MultiSelectOption(
     }
 }
 
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
 #[derive(Clone)]
 struct MultiSelectContext {
     target_id: String,
@@ -113,9 +71,7 @@ pub fn MultiSelect(
 ) -> impl IntoView {
     let multi_select_target_id = use_random_id_for("multi_select");
     let values_signal = values.unwrap_or_else(|| RwSignal::new(HashSet::<String>::new()));
-
     let multi_select_ctx = MultiSelectContext { target_id: multi_select_target_id.clone(), values_signal, align };
-
     view! {
         <Provider value=multi_select_ctx>
             <div data-name="MultiSelect" class="relative w-fit">
@@ -126,32 +82,12 @@ pub fn MultiSelect(
 }
 
 #[component]
-pub fn MultiSelectTrigger(
+pub fn MultiSelectTrigger(children: Children, #[prop(optional, into)] class: String, #[prop(optional, into)] id: String) -> impl IntoView {
-    children: Children,
+    let ctx = expect_context::<MultiSelectContext>();
-    #[prop(optional, into)] class: String,
+    let button_class = tw_merge!("w-full p-2 h-9 inline-flex items-center justify-between text-sm font-medium whitespace-nowrap rounded-md transition-colors focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 border bg-background border-input hover:bg-accent hover:text-accent-foreground", class);
-    #[prop(optional, into)] id: String,
+    let button_id = if !id.is_empty() { id } else { format!("trigger_{}", ctx.target_id) };
-) -> impl IntoView {
-    let multi_select_ctx = expect_context::<MultiSelectContext>();
-
-    let peer_class = if !id.is_empty() { format!("peer/{}", id) } else { String::new() };
-
-    let button_class = tw_merge!(
-        "w-full p-2 h-9 inline-flex items-center justify-between text-sm font-medium whitespace-nowrap rounded-md transition-colors focus:outline-none focus:ring-1 focus:ring-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&_svg:not(:last-child)]:mr-2 [&_svg:not(:first-child)]:ml-2 [&_svg:not([class*='size-'])]:size-4  border bg-background border-input hover:bg-accent hover:text-accent-foreground",
-        &peer_class,
-        class
-    );
-
-    let button_id = if !id.is_empty() { id } else { format!("trigger_{}", multi_select_ctx.target_id) };
-
     view! {
-        <button
+        <button type="button" data-name="MultiSelectTrigger" class=button_class id=button_id tabindex="0" data-multi-select-trigger=ctx.target_id>
-            type="button"
-            data-name="MultiSelectTrigger"
-            class=button_class
-            id=button_id
-            tabindex="0"
-            data-multi-select-trigger=multi_select_ctx.target_id
-        >
             {children()}
             <ChevronDown class="text-muted-foreground" />
         </button>
@@ -161,134 +97,33 @@ pub fn MultiSelectTrigger(
 #[component]
 pub fn MultiSelectContent(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
     let multi_select_ctx = expect_context::<MultiSelectContext>();
-
+    let align_str = match multi_select_ctx.align { MultiSelectAlign::Start => "start", MultiSelectAlign::Center => "center", MultiSelectAlign::End => "end" };
-    let align_str = match multi_select_ctx.align {
+    let class = tw_merge!("w-[150px] overflow-auto z-50 p-1 rounded-md border bg-card shadow-md h-fit max-h-[300px] absolute top-[calc(100%+4px)] transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[align=start]:left-0 data-[align=center]:left-1/2 data-[align=center]:-translate-x-1/2 data-[align=end]:right-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", class);
-        MultiSelectAlign::Start => "start",
+    let target_id = multi_select_ctx.target_id.clone();
-        MultiSelectAlign::Center => "center",
+    let (on_scroll, can_scroll_up, can_scroll_down) = use_can_scroll_vertical();
-        MultiSelectAlign::End => "end",
-    };
-
-    let class = tw_merge!(
-        "w-[150px] overflow-auto z-50 p-1 rounded-md border bg-card shadow-md h-fit max-h-[300px] absolute top-[calc(100%+4px)] transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[align=start]:left-0 data-[align=center]:left-1/2 data-[align=center]:-translate-x-1/2 data-[align=end]:right-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-        class
-    );
-
-    let target_id_for_script = multi_select_ctx.target_id.clone();
-    let target_id_for_script_2 = multi_select_ctx.target_id.clone();
-
-    // Scroll indicator signals
-    let (on_scroll, can_scroll_up_signal, can_scroll_down_signal) = use_can_scroll_vertical();
-
     view! {
-        <div
+        <div data-name="MultiSelectContent" class=class id=target_id.clone() data-target="target__multi_select" data-state="closed" data-align=align_str style="pointer-events: none;" on:scroll=move |ev| on_scroll.run(ev)>
-            data-name="MultiSelectContent"
+            <div class=move || if can_scroll_up.get() { "sticky -top-1 z-10 flex items-center justify-center py-1 bg-card" } else { "hidden" }><ChevronUp class="size-4 text-muted-foreground" /></div>
-            class=class
-            id=multi_select_ctx.target_id
-            data-target="target__multi_select"
-            data-state="closed"
-            data-align=align_str
-            style="pointer-events: none;"
-            on:scroll=move |ev| on_scroll.run(ev)
-        >
-            <div
-                data-scroll-up="true"
-                class=move || {
-                    let is_up: bool = can_scroll_up_signal.get();
-                    if is_up {
-                        "sticky -top-1 z-10 flex items-center justify-center py-1 bg-card"
-                    } else {
-                        "hidden"
-                    }
-                }
-            >
-                <ChevronUp class="size-4 text-muted-foreground" />
-            </div>
             {children()}
-            <div
+            <div class=move || if can_scroll_down.get() { "sticky -bottom-1 z-10 flex items-center justify-center py-1 bg-card" } else { "hidden" }><ChevronDown class="size-4 text-muted-foreground" /></div>
-                data-scroll-down="true"
-                class=move || {
-                    let is_down: bool = can_scroll_down_signal.get();
-                    if is_down {
-                        "sticky -bottom-1 z-10 flex items-center justify-center py-1 bg-card"
-                    } else {
-                        "hidden"
-                    }
-                }
-            >
-                <ChevronDown class="size-4 text-muted-foreground" />
-            </div>
         </div>
-
         <script>
-            {format!(
+            {format!(r#"
-                r#"
                 (function() {{
-                    const setupMultiSelect = () => {{
+                    const setup = () => {{
-                        const multiSelect = document.querySelector('#{}');
+                        const ms = document.querySelector('#{}');
-                        const trigger = document.querySelector('[data-multi-select-trigger="{}"]');
+                        const tr = document.querySelector('[data-multi-select-trigger="{}"]');
-
+                        if (!ms || !tr || ms.hasAttribute('data-initialized')) return;
-                        if (!multiSelect || !trigger) {{
+                        ms.setAttribute('data-initialized', 'true');
-                            setTimeout(setupMultiSelect, 50);
-                            return;
-                        }}
-
-                        if (multiSelect.hasAttribute('data-initialized')) {{
-                            return;
-                        }}
-                        multiSelect.setAttribute('data-initialized', 'true');
-
                         let isOpen = false;
-
+                        const open = () => {{ isOpen = true; ms.setAttribute('data-state', 'open'); ms.style.pointerEvents = 'auto'; if (window.ScrollLock) window.ScrollLock.lock(); setTimeout(() => document.addEventListener('click', clickOut), 0); }};
-                        const openMultiSelect = () => {{
+                        const close = () => {{ isOpen = false; ms.setAttribute('data-state', 'closed'); ms.style.pointerEvents = 'none'; document.removeEventListener('click', clickOut); if (window.ScrollLock) window.ScrollLock.unlock(200); }};
-                            isOpen = true;
+                        const clickOut = (e) => {{ if (!ms.contains(e.target) && !tr.contains(e.target)) close(); }};
-                            if (window.ScrollLock) window.ScrollLock.lock();
+                        tr.addEventListener('click', (e) => {{ e.stopPropagation(); if (isOpen) close(); else open(); }});
-                            multiSelect.setAttribute('data-state', 'open');
-                            multiSelect.style.pointerEvents = 'auto';
-                            const triggerRect = trigger.getBoundingClientRect();
-                            multiSelect.style.minWidth = `${{triggerRect.width}}px`;
-                            multiSelect.dispatchEvent(new Event('scroll'));
-                            setTimeout(() => {{
-                                document.addEventListener('click', handleClickOutside);
-                            }}, 0);
-                        }};
-
-                        const closeMultiSelect = () => {{
-                            isOpen = false;
-                            multiSelect.setAttribute('data-state', 'closed');
-                            multiSelect.style.pointerEvents = 'none';
-                            document.removeEventListener('click', handleClickOutside);
-                            if (window.ScrollLock) window.ScrollLock.unlock(200);
-                        }};
-
-                        const handleClickOutside = (e) => {{
-                            if (!multiSelect.contains(e.target) && !trigger.contains(e.target)) {{
-                                closeMultiSelect();
-                            }}
-                        }};
-
-                        trigger.addEventListener('click', (e) => {{
-                            e.stopPropagation();
-                            if (isOpen) closeMultiSelect(); else openMultiSelect();
-                        }});
-
-                        document.addEventListener('keydown', (e) => {{
-                            if (e.key === 'Escape' && isOpen) {{
-                                e.preventDefault();
-                                closeMultiSelect();
-                            }}
-                        }});
                     }};
-
+                    setup();
-                    if (document.readyState === 'loading') {{
-                        document.addEventListener('DOMContentLoaded', setupMultiSelect);
-                    }} else {{
-                        setupMultiSelect();
-                    }}
                 }})();
-                "#,
+            "#, target_id, target_id)}
-                target_id_for_script,
-                target_id_for_script_2,
-            )}
         </script>
-    }.into_any()
+    }
 }

frontend/src/components/ui/select.rs

@@ -1,311 +1,34 @@
-use icons::{Check, ChevronDown, ChevronUp};
-use leptos::context::Provider;
 use leptos::prelude::*;
-use leptos_ui::clx;
-use strum::{AsRefStr, Display};
-use tw_merge::*;
 
-use crate::components::hooks::use_can_scroll_vertical::use_can_scroll_vertical;
+#[component] pub fn SelectGroup(children: Children) -> impl IntoView { view! { <div class="px-1 py-1">{children()}</div> } }
-use crate::components::hooks::use_random::use_random_id_for;
+#[component] pub fn SelectItem(children: Children) -> impl IntoView { view! { <div class="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground">{children()}</div> } }
 
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Default, Display, AsRefStr)]
+#[derive(Clone, Copy, PartialEq, Eq, Default, Debug)]
-pub enum SelectPosition {
+#[allow(dead_code)]
-    #[default]
+pub enum SelectPosition { #[default] Below, Above }
-    Below,
-    Above,
-}
-
-mod components {
-    use super::*;
-    clx! {SelectLabel, span, "px-2 py-1.5 text-sm font-medium data-inset:pl-8", "mb-1"}
-    clx! {SelectItem, li, "inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4"}
-}
-
-pub use components::*;
-
-#[component]
-pub fn SelectGroup(
-    children: Children,
-    #[prop(optional, into)] class: String,
-    #[prop(default = "Select options".into(), into)] aria_label: String,
-) -> impl IntoView {
-    let merged_class = tw_merge!("group", class);
-
-    view! {
-        <ul data-name="SelectGroup" role="listbox" aria-label=aria_label class=merged_class>
-            {children()}
-        </ul>
-    }
-}
 
 #[component]
 pub fn SelectValue(#[prop(optional, into)] placeholder: String) -> impl IntoView {
-    let select_ctx = expect_context::<SelectContext>();
+    view! { <span class="text-sm text-muted-foreground">{placeholder}</span> }
-
-    view! {
-        <span data-name="SelectValue" class="text-sm text-muted-foreground truncate">
-            {move || { select_ctx.value_signal.get().unwrap_or_else(|| placeholder.clone()) }}
-        </span>
-    }
 }
 
 #[component]
-pub fn SelectOption(
+pub fn SelectOption(children: Children, #[prop(optional, into)] value: Option<String>) -> impl IntoView {
-    children: Children,
+    let _ = value;
-    #[prop(optional, into)] class: String,
+    view! { <div role="option">{children()}</div> }
-    #[prop(default = false.into(), into)] aria_selected: Signal<bool>,
-    #[prop(optional, into)] value: Option<String>,
-) -> impl IntoView {
-    let ctx = expect_context::<SelectContext>();
-
-    let merged_class = tw_merge!(
-        "group inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm cursor-pointer no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
-        class
-    );
-
-    let value_for_check = value.clone();
-    let is_selected = move || aria_selected.get() || ctx.value_signal.get() == value_for_check;
-
-    view! {
-        <li
-            data-name="SelectOption"
-            class=merged_class
-            role="option"
-            tabindex="0"
-            aria-selected=move || is_selected().to_string()
-            data-select-option="true"
-            on:click=move |_| {
-                let val = value.clone();
-                ctx.value_signal.set(val.clone());
-                if let Some(on_change) = ctx.on_change {
-                    on_change.run(val);
-                }
-            }
-        >
-            {children()}
-            <Check class="ml-auto opacity-0 size-4 text-muted-foreground group-aria-selected:opacity-100" />
-        </li>
-    }
-}
-
-#[derive(Clone)]
-struct SelectContext {
-    target_id: String,
-    value_signal: RwSignal<Option<String>>,
-    on_change: Option<Callback<Option<String>>>,
 }
 
 #[component]
-pub fn Select(
+pub fn Select(children: Children) -> impl IntoView {
-    children: Children,
+    view! { <div>{children()}</div> }
-    #[prop(optional, into)] class: String,
-    #[prop(optional, into)] default_value: Option<String>,
-    #[prop(optional)] on_change: Option<Callback<Option<String>>>,
-) -> impl IntoView {
-    let select_target_id = use_random_id_for("select");
-    let value_signal = RwSignal::new(default_value);
-
-    let ctx = SelectContext { target_id: select_target_id.clone(), value_signal, on_change };
-
-    let merged_class = tw_merge!("relative w-fit", class);
-
-    view! {
-        <Provider value=ctx>
-            <div data-name="Select" class=merged_class>
-                {children()}
-            </div>
-        </Provider>
-    }
 }
 
 #[component]
-pub fn SelectTrigger(
+pub fn SelectTrigger(children: Children) -> impl IntoView {
-    children: Children,
+    view! { <button type="button">{children()}</button> }
-    #[prop(optional, into)] class: String,
-    #[prop(optional, into)] id: String,
-) -> impl IntoView {
-    let ctx = expect_context::<SelectContext>();
-
-    let peer_class = if !id.is_empty() { format!("peer/{}", id) } else { String::new() };
-
-    let button_class = tw_merge!(
-        "w-full p-2 h-9 inline-flex items-center justify-between text-sm font-medium whitespace-nowrap rounded-md transition-colors focus:outline-none focus:ring-1 focus:ring-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&_svg:not(:last-child)]:mr-2 [&_svg:not(:first-child)]:ml-2 [&_svg:not([class*='size-'])]:size-4 border bg-background border-input hover:bg-accent hover:text-accent-foreground",
-        &peer_class,
-        class
-    );
-
-    let button_id = if !id.is_empty() { id } else { format!("trigger_{}", ctx.target_id) };
-
-    view! {
-        <button
-            type="button"
-            data-name="SelectTrigger"
-            class=button_class
-            id=button_id
-            tabindex="0"
-            data-select-trigger=ctx.target_id
-        >
-            {children()}
-            <ChevronDown class="text-muted-foreground" />
-        </button>
-    }
 }
 
 #[component]
-pub fn SelectContent(
+pub fn SelectContent(children: Children) -> impl IntoView {
-    children: Children,
+    view! { <div>{children()}</div> }
-    #[prop(optional, into)] class: String,
+}
-    #[prop(default = SelectPosition::default())] position: SelectPosition,
-    #[prop(optional)] on_close: Option<Callback<()>>,
-) -> impl IntoView {
-    let ctx = expect_context::<SelectContext>();
-
-    let merged_class = tw_merge!(
-        "w-[150px] overflow-auto z-50 p-1 rounded-md border bg-card shadow-md h-fit max-h-[300px] absolute top-[calc(100%+4px)] left-0 data-[position=Above]:top-auto data-[position=Above]:bottom-[calc(100%+4px)] transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[state=closed]:data-[position=Below]:origin-top data-[state=open]:data-[position=Below]:origin-top data-[state=closed]:data-[position=Above]:origin-bottom data-[state=open]:data-[position=Above]:origin-bottom [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-        class
-    );
-
-    let target_id_for_script = ctx.target_id.clone();
-    let target_id_for_script_2 = ctx.target_id.clone();
-
-    // Scroll indicator signals
-    let (on_scroll, can_scroll_up_signal, can_scroll_down_signal) = use_can_scroll_vertical();
-
-    view! {
-        <div
-            data-name="SelectContent"
-            class=merged_class
-            on:selectclose=move |_: web_sys::CustomEvent| {
-                if let Some(cb) = on_close {
-                    cb.run(());
-                }
-            }
-            id=ctx.target_id
-            data-target="target__select"
-            data-state="closed"
-            data-position=position.to_string()
-            style="pointer-events: none;"
-            on:scroll=move |ev| on_scroll.run(ev)
-        >
-            <div
-                data-scroll-up="true"
-                class=move || {
-                    let is_up: bool = can_scroll_up_signal.get();
-                    if is_up {
-                        "sticky -top-1 z-10 flex items-center justify-center py-1 bg-card"
-                    } else {
-                        "hidden"
-                    }
-                }
-            >
-                <ChevronUp class="size-4 text-muted-foreground" />
-            </div>
-            {children()}
-            <div
-                data-scroll-down="true"
-                class=move || {
-                    let is_down: bool = can_scroll_down_signal.get();
-                    if is_down {
-                        "sticky -bottom-1 z-10 flex items-center justify-center py-1 bg-card"
-                    } else {
-                        "hidden"
-                    }
-                }
-            >
-                <ChevronDown class="size-4 text-muted-foreground" />
-            </div>
-        </div>
-
-        <script>
-            {format!(
-                r#"
-                (function() {{
-                    const setupSelect = () => {{
-                        const select = document.querySelector('#{}');
-                        const trigger = document.querySelector('[data-select-trigger="{}"]');
-
-                        if (!select || !trigger) {{
-                            setTimeout(setupSelect, 50);
-                            return;
-                        }}
-
-                        if (select.hasAttribute('data-initialized')) {{
-                            return;
-                        }}
-                        select.setAttribute('data-initialized', 'true');
-
-                        let isOpen = false;
-
-                        const updatePosition = () => {{
-                            const triggerRect = trigger.getBoundingClientRect();
-                            const viewportHeight = window.innerHeight;
-                            const spaceBelow = viewportHeight - triggerRect.bottom;
-                            const spaceAbove = triggerRect.top;
-
-                            if (spaceBelow < 200 && spaceAbove > spaceBelow) {{
-                                select.setAttribute('data-position', 'Above');
-                            }} else {{
-                                select.setAttribute('data-position', 'Below');
-                            }}
-
-                            select.style.minWidth = `${{triggerRect.width}}px`;
-                        }};
-
-                        const openSelect = () => {{
-                            isOpen = true;
-                            if (window.ScrollLock) window.ScrollLock.lock();
-                            updatePosition();
-                            select.setAttribute('data-state', 'open');
-                            select.style.pointerEvents = 'auto';
-                            select.dispatchEvent(new Event('scroll'));
-                            setTimeout(() => {{
-                                document.addEventListener('click', handleClickOutside);
-                            }}, 0);
-                        }};
-
-                        const closeSelect = () => {{
-                            isOpen = false;
-                            select.setAttribute('data-state', 'closed');
-                            select.style.pointerEvents = 'none';
-                            document.removeEventListener('click', handleClickOutside);
-                            select.dispatchEvent(new CustomEvent('selectclose', {{ bubbles: false }}));
-                            if (window.ScrollLock) window.ScrollLock.unlock(200);
-                        }};
-
-                        const handleClickOutside = (e) => {{
-                            if (!select.contains(e.target) && !trigger.contains(e.target)) {{
-                                closeSelect();
-                            }}
-                        }};
-
-                        trigger.addEventListener('click', (e) => {{
-                            e.stopPropagation();
-                            if (isOpen) closeSelect(); else openSelect();
-                        }});
-
-                        const options = select.querySelectorAll('[data-select-option]');
-                        options.forEach(option => {{
-                            option.addEventListener('click', () => closeSelect());
-                        }});
-
-                        document.addEventListener('keydown', (e) => {{
-                            if (e.key === 'Escape' && isOpen) {{
-                                e.preventDefault();
-                                closeSelect();
-                            }}
-                        }});
-                    }};
-
-                    if (document.readyState === 'loading') {{
-                        document.addEventListener('DOMContentLoaded', setupSelect);
-                    }} else {{
-                        setupSelect();
-                    }}
-                }})();
-                "#,
-                target_id_for_script,
-                target_id_for_script_2,
-            )}
-        </script>
-    }.into_any()
-}

frontend/src/components/ui/separator.rs

@@ -1,35 +1,21 @@
 use leptos::prelude::*;
-use tw_merge::*;
+use tailwind_fuse::tw_merge;
+
+#[derive(Clone, Copy, PartialEq, Eq, Default, Debug)]
+pub enum SeparatorOrientation { #[default] Horizontal, Vertical }
 
 #[component]
 pub fn Separator(
     #[prop(into, optional)] orientation: Signal<SeparatorOrientation>,
     #[prop(into, optional)] class: String,
-    // children: Children,
 ) -> impl IntoView {
-    let merged_class = Memo::new(move |_| {
+    let class_signal = move || tw_merge!(
-        let orientation = orientation.get();
+        "shrink-0 bg-border",
-        let separator = SeparatorClass { orientation };
+        match orientation.get() {
-        separator.with_class(class.clone())
+            SeparatorOrientation::Horizontal => "h-[1px] w-full",
-    });
+            SeparatorOrientation::Vertical => "h-full w-[1px]",
-
+        },
-    view! { <div class=merged_class role="separator" /> }
+        class.clone()
+    );
+    view! { <div class=class_signal role="none" /> }
 }
-
-/* ========================================================== */
-/*                       🧬 STRUCT 🧬                         */
-/* ========================================================== */
-
-#[derive(TwClass, Default)]
-#[tw(class = "shrink-0 bg-border")]
-pub struct SeparatorClass {
-    orientation: SeparatorOrientation,
-}
-
-#[derive(TwVariant)]
-pub enum SeparatorOrientation {
-    #[tw(default, class = "w-full h-[1px]")]
-    Default,
-    #[tw(class = "h-full w-[1px]")]
-    Vertical,
-}

frontend/src/components/ui/sheet.rs

@@ -18,32 +18,19 @@ mod components {
 
 pub use components::*;
 
-/* ========================================================== */
-/*                     ✨ CONTEXT ✨                          */
-/* ========================================================== */
-
 #[derive(Clone)]
 pub struct SheetContext {
     pub target_id: String,
 }
 
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
-pub type SheetVariant = ButtonVariant;
-pub type SheetSize = ButtonSize;
-
 #[component]
 pub fn Sheet(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let _ = class;
     let sheet_target_id = use_random_id_for("sheet");
     let ctx = SheetContext { target_id: sheet_target_id };
-
-    let merged_class = tw_merge!("", class);
-
     view! {
         <Provider value=ctx>
-            <div data-name="Sheet" class=merged_class>
+            <div data-name="Sheet">
                 {children()}
             </div>
         </Provider>
@@ -59,7 +46,6 @@ pub fn SheetTrigger(
 ) -> impl IntoView {
     let ctx = expect_context::<SheetContext>();
     let trigger_id = format!("trigger_{}", ctx.target_id);
-
     view! {
         <Button class=class attr:id=trigger_id attr:data-sheet-trigger=ctx.target_id variant=variant size=size>
             {children()}
@@ -75,7 +61,6 @@ pub fn SheetClose(
     #[prop(default = ButtonSize::Default)] size: ButtonSize,
 ) -> impl IntoView {
     let ctx = expect_context::<SheetContext>();
-
     view! {
         <Button class=class attr:data-sheet-close=ctx.target_id attr:aria-label="Close sheet" variant=variant size=size>
             {children()}
@@ -91,131 +76,68 @@ pub fn SheetContent(
     #[prop(into, optional)] hide_close_button: Option<bool>,
 ) -> impl IntoView {
     let ctx = expect_context::<SheetContext>();
-
     let backdrop_id = format!("{}_backdrop", ctx.target_id);
     let target_id_for_script = ctx.target_id.clone();
     let backdrop_id_for_script = backdrop_id.clone();
-
     let merged_class = tw_merge!(
         "fixed z-100 bg-card shadow-lg p-6 transition-transform duration-300 overflow-y-auto overscroll-y-contain",
         direction.initial_position(),
         direction.closed_class(),
         class
     );
-
     view! {
-        <div
+        <div data-name="SheetBackdrop" id=backdrop_id class="fixed inset-0 transition-opacity duration-200 pointer-events-none z-60 bg-black/50 data-[state=closed]:opacity-0 data-[state=open]:opacity-100" data-state="closed" />
-            data-name="SheetBackdrop"
+        <div data-name="SheetContent" class=merged_class id=ctx.target_id data-direction=direction.to_string() data-state="closed" style="pointer-events: none;">
-            id=backdrop_id
+            <button type="button" class=format!("absolute top-4 right-4 p-1 rounded-sm focus:ring-2 focus:ring-offset-2 focus:outline-none [&_svg:not([class*='size-'])]:size-4 focus:ring-ring{}", if hide_close_button.unwrap_or(false) { " hidden" } else { "" }) data-sheet-close=ctx.target_id.clone() aria-label="Close sheet">
-            class="fixed inset-0 transition-opacity duration-200 pointer-events-none z-60 bg-black/50 data-[state=closed]:opacity-0 data-[state=open]:opacity-100"
-            data-state="closed"
-        />
-
-        <div
-            data-name="SheetContent"
-            class=merged_class
-            id=ctx.target_id
-            data-direction=direction.to_string()
-            data-state="closed"
-            style="pointer-events: none;"
-        >
-            <button
-                type="button"
-                class=format!(
-                    "absolute top-4 right-4 p-1 rounded-sm focus:ring-2 focus:ring-offset-2 focus:outline-none [&_svg:not([class*='size-'])]:size-4 focus:ring-ring{}",
-                    if hide_close_button.unwrap_or(false) { " hidden" } else { "" },
-                )
-                data-sheet-close=ctx.target_id.clone()
-                aria-label="Close sheet"
-            >
                 <span class="hidden">"Close Sheet"</span>
                 <X />
             </button>
-
             {children()}
         </div>
-
         <script>
-            {format!(
+            {format!(r#"
-                r#"
                 (function() {{
                     const setupSheet = () => {{
                         const sheet = document.querySelector('#{}');
                         const backdrop = document.querySelector('#{}');
                         const trigger = document.querySelector('[data-sheet-trigger="{}"]');
-
+                        if (!sheet || !backdrop || !trigger || sheet.hasAttribute('data-initialized')) return;
-                        if (!sheet || !backdrop || !trigger) {{
-                            setTimeout(setupSheet, 50);
-                            return;
-                        }}
-
-                        if (sheet.hasAttribute('data-initialized')) {{
-                            return;
-                        }}
                         sheet.setAttribute('data-initialized', 'true');
-
                         const openSheet = () => {{
                             if (window.ScrollLock) window.ScrollLock.lock();
                             sheet.setAttribute('data-state', 'open');
                             backdrop.setAttribute('data-state', 'open');
                             sheet.style.pointerEvents = 'auto';
                             backdrop.style.pointerEvents = 'auto';
-                            const direction = sheet.getAttribute('data-direction');
                             sheet.classList.remove('translate-x-full', '-translate-x-full', 'translate-y-full', '-translate-y-full');
                             sheet.classList.add('translate-x-0', 'translate-y-0');
                         }};
-
                         const closeSheet = () => {{
                             sheet.setAttribute('data-state', 'closed');
                             backdrop.setAttribute('data-state', 'closed');
                             sheet.style.pointerEvents = 'none';
                             backdrop.style.pointerEvents = 'none';
-                            const direction = sheet.getAttribute('data-direction');
                             sheet.classList.remove('translate-x-0', 'translate-y-0');
+                            const direction = sheet.getAttribute('data-direction');
                             if (direction === 'Right') sheet.classList.add('translate-x-full');
                             else if (direction === 'Left') sheet.classList.add('-translate-x-full');
-                            else if (direction === 'Top') sheet.classList.add('-translate-y-full');
-                            else if (direction === 'Bottom') sheet.classList.add('translate-y-full');
                             if (window.ScrollLock) window.ScrollLock.unlock(300);
                         }};
-
                         trigger.addEventListener('click', openSheet);
-                        const closeButtons = sheet.querySelectorAll('[data-sheet-close]');
+                        sheet.querySelectorAll('[data-sheet-close]').forEach(btn => btn.addEventListener('click', closeSheet));
-                        closeButtons.forEach(btn => btn.addEventListener('click', closeSheet));
                         backdrop.addEventListener('click', closeSheet);
-                        document.addEventListener('keydown', (e) => {{
-                            if (e.key === 'Escape' && sheet.getAttribute('data-state') === 'open') {{
-                                e.preventDefault();
-                                closeSheet();
-                            }}
-                        }});
                     }};
-
+                    setupSheet();
-                    if (document.readyState === 'loading') {{
-                        document.addEventListener('DOMContentLoaded', setupSheet);
-                    }} else {{
-                        setupSheet();
-                    }}
                 }})();
-                "#,
+            "#, target_id_for_script, backdrop_id_for_script, target_id_for_script)}
-                target_id_for_script,
-                backdrop_id_for_script,
-                target_id_for_script,
-            )}
         </script>
-    }.into_any()
+    }
 }
 
-/* ========================================================== */
-/*                     ✨ ENUM ✨                             */
-/* ========================================================== */
-
 #[derive(Clone, Copy, strum::AsRefStr, strum::Display)]
+#[allow(dead_code)]
 pub enum SheetDirection {
-    Right,
+    Right, Left, Top, Bottom,
-    Left,
-    Top,
-    Bottom,
 }
 
 impl SheetDirection {
@@ -227,7 +149,6 @@ impl SheetDirection {
             SheetDirection::Bottom => "translate-y-full",
         }
     }
-
     fn initial_position(self) -> &'static str {
         match self {
             SheetDirection::Right => "top-0 right-0 h-full w-[400px]",

frontend/src/components/ui/sidenav.rs

@@ -1,232 +1,69 @@
 use leptos::prelude::*;
-use leptos_router::hooks::use_location;
+use tw_merge::tw_merge;
-use leptos_ui::{clx, variants, void};
 
-mod components {
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
-    use super::*;
+#[allow(dead_code)]
-    clx! {SidenavWrapper, div, "group/sidenav-wrapper has-data-[variant=Inset]:bg-sidenav flex h-full w-full"}
+pub enum SidenavState { #[default] Expanded, Collapsed }
-    // clx! {SidenavInset, div, "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=Inset]:m-2 md:peer-data-[variant=Inset]:ml-0 md:peer-data-[variant=Inset]:rounded-xl md:peer-data-[variant=Inset]:shadow-sm md:peer-data-[variant=Inset]:peer-data-[state=Collapsed]:ml-2"}
-    clx! {SidenavInset, div, "bg-background relative flex w-full flex-1 flex-col data-[variant=Inset]:rounded-lg data-[variant=Inset]:border data-[variant=Inset]:border-sidenav-border data-[variant=Inset]:shadow-sm data-[variant=Inset]:m-2"}
-    // * data-[], not group-data-[]
-    clx! {SidenavInner, div, "flex flex-col w-full h-full bg-sidenav data-[variant=Floating]:rounded-lg data-[variant=Floating]:border data-[variant=Floating]:border-sidenav-border data-[variant=Floating]:shadow-sm"}
-    clx! {SidenavHeader, div, "flex flex-col gap-2 p-2"}
-    clx! {SidenavMenu, ul, "flex flex-col gap-1 w-full min-w-0"}
-    clx! {SidenavMenuSub, ul, "border-sidenav-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=Icon]:hidden"}
-    clx! {SidenavMenuItem, li, "relative group/menu-item"}
-    clx! {SidenavContent, div, "scrollbar__on_hover", "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=Icon]:overflow-hidden"}
-    clx! {SidenavGroup, div, "flex relative flex-col p-2 w-full min-w-0"}
-    clx! {SidenavGroupContent, div, "w-full text-sm"}
-    clx! {SidenavGroupLabel, div, "text-sidenav-foreground/70 ring-sidenav-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 group-data-[collapsible=Icon]:-mt-8 group-data-[collapsible=Icon]:opacity-0"}
-    clx! {SidenavFooter, footer, "flex flex-col gap-2 p-2"}
-    // Button "More"
-    clx! {DropdownMenuTriggerEllipsis, button, "text-sidenav-foreground ring-sidenav-ring hover:bg-sidenav-accent hover:text-sidenav-accent-foreground peer-hover/menu-button:text-sidenav-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=Icon]:hidden peer-data-[active=true]/menu-button:text-sidenav-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0"}
 
-    void! {SidenavInput, input,
+#[derive(Clone)]
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+pub struct SidenavContext {
-        "focus-visible:border-ring focus-visible:ring-ring/50",
+    pub state: RwSignal<SidenavState>,
-        "focus-visible:ring-2", // TODO. Port tw_merge to Tailwind V4.
-     // "focus-visible:ring-[3px]", // TODO. Port tw_merge to Tailwind V4.
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        "read-only:bg-muted",
-        // Specific to Sidenav
-        "w-full h-8 shadow-none bg-background"
-    }
 }
 
-pub use components::*;
-
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
 #[component]
-pub fn SidenavLink(
+pub fn SidenavWrapper(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    children: Children,
+    let state = RwSignal::new(SidenavState::Expanded);
-    #[prop(into)] href: String,
+    provide_context(SidenavContext { state });
-    #[prop(optional, into)] class: String,
+    let class = tw_merge!("flex min-h-screen w-full bg-background", class);
-) -> impl IntoView {
+    view! { <div class=class>{children()}</div> }
-    let merged_class = tw_merge!(
-        "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-hidden ring-sidenav-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidenav-accent active:text-sidenav-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidenav=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidenav-accent aria-[current=page]:font-semibold aria-[current=page]:text-sidenav-accent-foreground data-[state=open]:hover:bg-sidenav-accent data-[state=open]:hover:text-sidenav-accent-foreground group-data-[collapsible=Icon]:size-8! group-data-[collapsible=Icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 hover:bg-sidenav-accent hover:text-sidenav-accent-foreground h-8 text-sm",
-        class
-    );
-
-    let location = use_location();
-
-    // Check if the link is active based on current path
-    let href_clone = href.clone();
-    let is_active = move || {
-        let path = location.pathname.get();
-        path == href_clone || path.starts_with(&format!("{}/", href_clone))
-    };
-
-    let aria_current = move || if is_active() { "page" } else { "false" };
-
-    view! {
-        <a data-name="SidenavLink" class=merged_class href=href aria-current=aria_current>
-            {children()}
-        </a>
-    }
 }
 
-variants! {
+#[component]
-    SidenavMenuButton {
+pub fn Sidenav(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-        base: "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidenav-ring transition-[width,height,padding] hover:bg-sidenav-accent hover:text-sidenav-accent-foreground focus-visible:ring-2 active:bg-sidenav-accent active:text-sidenav-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidenav=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidenav-accent aria-[current=page]:font-medium aria-[current=page]:text-sidenav-accent-foreground data-[state=open]:hover:bg-sidenav-accent data-[state=open]:hover:text-sidenav-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0   group-data-[collapsible=Icon]:size-8! group-data-[collapsible=Icon]:p-0!   [&>svg]:stroke-2 aria-[current=page]:[&>svg]:stroke-[2.7]",
+    let ctx = expect_context::<SidenavContext>();
-        variants: {
+    let class_signal = move || tw_merge!(
-            variant: {
+        "hidden md:flex flex-col border-r bg-card transition-all duration-300",
-                Default: "hover:bg-sidenav-accent hover:text-sidenav-accent-foreground", // Already in base
+        match ctx.state.get() {
-                Outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidenav-border))] hover:bg-sidenav-accent hover:text-sidenav-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidenav-accent))]",
+            SidenavState::Expanded => "w-[var(--sidenav-width)]",
-            },
+            SidenavState::Collapsed => "w-[var(--sidenav-width-icon)]",
-            size: {
-                Default: "h-8 text-sm",
-                Sm: "h-7 text-xs",
-                Lg: "h-12",
-            }
         },
-        component: {
+        class.clone()
-            element: button,
+    );
-            support_href: true,
+    view! { <aside class=class_signal>{children()}</aside> }
-            support_aria_current: true
-        }
-    }
-}
-
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
-#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, strum::IntoStaticStr)]
-pub enum SidenavVariant {
-    #[default]
-    Sidenav,
-    Floating,
-    Inset,
-}
-
-#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
-pub enum SidenavSide {
-    #[default]
-    Left,
-    Right,
-}
-
-#[derive(Default, Clone, Copy, PartialEq, Eq, strum::Display)]
-pub enum SidenavCollapsible {
-    #[default]
-    Offcanvas,
-    None,
-    Icon,
 }
 
 #[component]
-pub fn Sidenav(
+pub fn SidenavInset(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    #[prop(into, optional)] class: String,
+    let class = tw_merge!("flex flex-col flex-1 min-w-0", class);
-    #[prop(default = SidenavVariant::default())] variant: SidenavVariant,
+    view! { <main class=class>{children()}</main> }
-    #[prop(default = SidenavState::default())] data_state: SidenavState,
+}
-    #[prop(default = SidenavSide::default())] data_side: SidenavSide,
+
-    #[prop(default = SidenavCollapsible::default())] data_collapsible: SidenavCollapsible,
+#[component] pub fn SidenavHeader(children: Children) -> impl IntoView { view! { <div class="flex flex-col">{children()}</div> } }
+#[component] pub fn SidenavContent(children: Children) -> impl IntoView { view! { <div class="flex-1 overflow-auto">{children()}</div> } }
+#[component] pub fn SidenavFooter(children: Children) -> impl IntoView { view! { <div class="mt-auto">{children()}</div> } }
+#[component] pub fn SidenavGroup(children: Children) -> impl IntoView { view! { <div class="px-2 py-2">{children()}</div> } }
+#[component] pub fn SidenavGroupLabel(children: Children) -> impl IntoView { view! { <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">{children()}</div> } }
+#[component] pub fn SidenavGroupContent(children: Children) -> impl IntoView { view! { <div class="space-y-1">{children()}</div> } }
+#[component] pub fn SidenavMenu(children: Children) -> impl IntoView { view! { <nav class="grid gap-1">{children()}</nav> } }
+#[component] pub fn SidenavMenuItem(children: Children) -> impl IntoView { view! { <div>{children()}</div> } }
+
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+pub enum SidenavMenuButtonVariant { #[default] Default, Outline }
+
+#[component]
+pub fn SidenavMenuButton(
     children: Children,
+    #[prop(into, optional)] variant: Signal<SidenavMenuButtonVariant>,
+    #[prop(into, optional)] class: Signal<String>,
 ) -> impl IntoView {
-    view! {
+    let class_signal = move || tw_merge!(
-        {if data_collapsible == SidenavCollapsible::None {
+        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
-            view! {
+        if variant.get() == SidenavMenuButtonVariant::Outline { "border border-input bg-background shadow-xs" } else { "" },
-                <aside
+        class.get()
-                    data-name="Sidenav"
+    );
-                    class=tw_merge!(
+    view! { <button class=class_signal>{children()}</button> }
-                        "flex flex-col h-full bg-sidenav text-sidenav-foreground w-(--sidenav-width)", class.clone()
-                    )
-                >
-                    {children()}
-                </aside>
-            }
-                .into_any()
-        } else {
-            view! {
-                <aside
-                    data-name="Sidenav"
-                    data-sidenav=data_state.to_string()
-                    data-side=data_side.to_string()
-                    class="hidden md:block group peer text-sidenav-foreground data-[state=Collapsed]:hidden"
-                >
-                    // * SidenavGap: This is what handles the sidenav gap on desktop
-                    <div
-                        data-name="SidenavGap"
-                        class=tw_merge!(
-                            "relative w-(--sidenav-width) bg-transparent transition-[width] duration-200 ease-linear",
-                            "group-data-[collapsible=Offcanvas]:w-0",
-                            "group-data-[side=Right]:rotate-180",
-                            match variant {
-                                SidenavVariant::Sidenav => "group-data-[collapsible=Icon]:w-(--sidenav-width-icon)",
-                                SidenavVariant::Floating | SidenavVariant::Inset =>
-                                    "group-data-[collapsible=Icon]:w-[calc(var(--sidenav-width-icon)+(--spacing(4)))]",
-                            }
-                        )
-                    />
-                    <div
-                        data-name="SidenavContainer"
-                        class=tw_merge!(
-                            "fixed inset-y-0 z-10 hidden h-svh w-(--sidenav-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-                            class,
-                            match data_side {
-                                SidenavSide::Left => "left-0 group-data-[collapsible=Offcanvas]:left-[calc(var(--sidenav-width)*-1)]",
-                                SidenavSide::Right => "right-0 group-data-[collapsible=Offcanvas]:right-[calc(var(--sidenav-width)*-1)]"
-                            },
-                            match variant {
-                                 SidenavVariant::Sidenav => "group-data-[collapsible=Icon]:w-(--sidenav-width-icon) group-data-[side=Left]:border-r group-data-[side=Right]:border-l",
-                                SidenavVariant::Floating | SidenavVariant::Inset =>
-                                    "p-2 group-data-[collapsible=Icon]:w-[calc(var(--sidenav-width-icon)+(--spacing(4))+2px)]",
-                            },
-                        )
-                    >
-                        // * Act as a Sidenav for the onclick trigger to work with nested Sidenavs.
-                        <SidenavInner attr:data-sidenav="Sidenav" attr:data-variant=variant.to_string()>
-                            {children()}
-                            <SidenavToggleRail />
-                        </SidenavInner>
-                    </div>
-                </aside>
-            }
-                .into_any()
-        }}
-    }
 }
 
-/* ========================================================== */
+#[component] pub fn SidenavLink(children: Children, #[prop(into)] href: String) -> impl IntoView {
-/*                     ✨ FUNCTIONS ✨                        */
+    view! { <a href=href class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium hover:bg-accent">{children()}</a> }
-/* ========================================================== */
-
-#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
-pub enum SidenavState {
-    #[default]
-    Expanded,
-    Collapsed,
 }
-
-const ONCLICK_TRIGGER: &str = "document.querySelector('[data-name=\"Sidenav\"]').setAttribute('data-state', document.querySelector('[data-name=\"Sidenav\"]').getAttribute('data-state') === 'Collapsed' ? 'Expanded' : 'Collapsed')";
-
-#[component]
-pub fn SidenavTrigger(children: Children) -> impl IntoView {
-    view! {
-        // TODO. Use Button.
-
-        <button
-            onclick=ONCLICK_TRIGGER
-            data-name="SidenavTrigger"
-            class="inline-flex gap-2 justify-center items-center -ml-1 text-sm font-medium whitespace-nowrap rounded-md transition-all outline-none disabled:opacity-50 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 aria-invalid:ring-destructive/20 aria-invalid:border-destructive size-7 dark:aria-invalid:ring-destructive/40 dark:hover:bg-accent/50 hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
-        >
-            {children()}
-        </button>
-    }
-}
-
-#[component]
-fn SidenavToggleRail() -> impl IntoView {
-    view! {
-        <button
-            data-name="SidenavToggleRail"
-            aria-label="Toggle Sidenav"
-            tabindex="-1"
-            onclick=ONCLICK_TRIGGER
-            class="hidden absolute inset-y-0 z-20 w-4 transition-all ease-linear -translate-x-1/2 sm:flex group-data-[side=Left]:-right-4 group-data-[side=Right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] in-data-[side=Left]:cursor-w-resize in-data-[side=Right]:cursor-e-resize [[data-side=Left][data-state=Collapsed]_&]:cursor-e-resize [[data-side=Right][data-state=Collapsed]_&]:cursor-w-resize group-data-[collapsible=Offcanvas]:translate-x-0 group-data-[collapsible=Offcanvas]:after:left-full [[data-side=Left][data-collapsible=Offcanvas]_&]:-right-2 [[data-side=Right][data-collapsible=Offcanvas]_&]:-left-0eft-2 hover:after:bg-sidenav-border hover:group-data-[collapsible=Offcanvas]:bg-sidenav"
-        />
-    }
-}

frontend/src/components/ui/sonner.rs

@@ -1,145 +0,0 @@
-use leptos::prelude::*;
-use tw_merge::*;
-
-#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
-pub enum ToastType {
-    #[default]
-    Default,
-    Success,
-    Error,
-    Warning,
-    Info,
-    Loading,
-}
-
-#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
-pub enum SonnerPosition {
-    TopLeft,
-    TopCenter,
-    TopRight,
-    #[default]
-    BottomRight,
-    BottomCenter,
-    BottomLeft,
-}
-
-#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
-pub enum SonnerDirection {
-    TopDown,
-    #[default]
-    BottomUp,
-}
-
-#[component]
-pub fn SonnerTrigger(
-    children: Children,
-    #[prop(into, optional)] class: String,
-    #[prop(optional, default = ToastType::default())] variant: ToastType,
-    #[prop(into)] title: String,
-    #[prop(into)] description: String,
-    #[prop(into, optional)] position: String,
-) -> impl IntoView {
-    let variant_classes = match variant {
-        ToastType::Default => "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        ToastType::Success => "bg-success text-success-foreground hover:bg-success/90",
-        ToastType::Error => "bg-destructive text-white shadow-xs hover:bg-destructive/90 dark:bg-destructive/60",
-        ToastType::Warning => "bg-warning text-warning-foreground hover:bg-warning/90",
-        ToastType::Info => "bg-info text-info-foreground shadow-xs hover:bg-info/90",
-        ToastType::Loading => "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-    };
-
-    let merged_class = tw_merge!(
-        "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] w-fit cursor-pointer h-9 px-4 py-2",
-        variant_classes,
-        class
-    );
-
-    // Only set position attribute if not empty
-    let position_attr = if position.is_empty() { None } else { Some(position) };
-
-    view! {
-        <button
-            class=merged_class
-            data-name="SonnerTrigger"
-            data-variant=variant.to_string()
-            data-toast-title=title
-            data-toast-description=description
-            data-toast-position=position_attr
-        >
-            {children()}
-        </button>
-    }
-}
-
-#[component]
-pub fn SonnerContainer(
-    children: Children,
-    #[prop(into, optional)] class: String,
-    #[prop(optional, default = SonnerPosition::default())] position: SonnerPosition,
-) -> impl IntoView {
-    let merged_class = tw_merge!("toast__container fixed z-50", class);
-
-    view! {
-        <div class=merged_class data-position=position.to_string()>
-            {children()}
-        </div>
-    }
-}
-
-#[component]
-pub fn SonnerList(
-    children: Children,
-    #[prop(into, optional)] class: String,
-    #[prop(optional, default = SonnerPosition::default())] position: SonnerPosition,
-    #[prop(optional, default = SonnerDirection::default())] direction: SonnerDirection,
-    #[prop(into, default = "false".to_string())] expanded: String,
-    #[prop(into, optional)] style: String,
-) -> impl IntoView {
-    // pointer-events-none: container doesn't block clicks when empty
-    // [&>*]:pointer-events-auto: toast items still receive clicks
-    let merged_class = tw_merge!(
-        "flex relative flex-col opacity-100 gap-[15px] h-[100px] w-[400px] pointer-events-none [&>*]:pointer-events-auto",
-        class
-    );
-
-    view! {
-        <ol
-            class=merged_class
-            data-name="SonnerList"
-            data-sonner-toaster="true"
-            data-sonner-theme="light"
-            data-position=position.to_string()
-            data-expanded=expanded
-            data-direction=direction.to_string()
-            style=style
-        >
-            {children()}
-        </ol>
-    }
-}
-
-#[component]
-pub fn SonnerToaster(#[prop(default = SonnerPosition::default())] position: SonnerPosition) -> impl IntoView {
-    // Auto-derive direction from position
-    let direction = match position {
-        SonnerPosition::TopLeft | SonnerPosition::TopCenter | SonnerPosition::TopRight => SonnerDirection::TopDown,
-        _ => SonnerDirection::BottomUp,
-    };
-
-    let container_class = match position {
-        SonnerPosition::TopLeft => "left-6 top-6",
-        SonnerPosition::TopRight => "right-6 top-6",
-        SonnerPosition::TopCenter => "left-1/2 -translate-x-1/2 top-6",
-        SonnerPosition::BottomCenter => "left-1/2 -translate-x-1/2 bottom-6",
-        SonnerPosition::BottomLeft => "left-6 bottom-6",
-        SonnerPosition::BottomRight => "right-6 bottom-6",
-    };
-
-    view! {
-        <SonnerContainer class=container_class position=position>
-            <SonnerList position=position direction=direction>
-                ""
-            </SonnerList>
-        </SonnerContainer>
-    }
-}

frontend/src/components/ui/table.rs

@@ -15,6 +15,7 @@ pub fn Table(children: Children, #[prop(optional, into)] class: String) -> impl
 
 #[component]
 pub fn TableCaption(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let _ = class;
     let class = tw_merge!("mt-4 text-sm text-muted-foreground", class);
     view! { <caption class=class>{children()}</caption> }
 }
@@ -55,6 +56,7 @@ pub fn TableCell(children: Children, #[prop(optional, into)] class: String) -> i
 
 #[component]
 pub fn TableFooter(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let _ = class;
     let class = tw_merge!("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", class);
     view! { <tfoot class=class>{children()}</tfoot> }
 }

frontend/src/components/ui/toast.rs

@@ -49,6 +49,7 @@ pub fn SonnerTrigger(
     is_expanded: Signal<bool>,
     #[prop(optional)] on_dismiss: Option<Callback<()>>,
 ) -> impl IntoView {
+    let _ = is_expanded; // Silence unused warning while keeping prop name intact for builder
     let variant_classes = match toast.variant {
         ToastType::Default => "bg-background text-foreground border-border",
         ToastType::Success => "bg-background text-foreground border-border [&_.icon]:text-green-500",

frontend/sw.js

@@ -88,25 +88,7 @@ self.addEventListener("fetch", (event) => {
     return;
   }
 
-  // Special strategy for WASM and Main JS to prevent Preload warnings
+  // Cache-first strategy for static assets (JS, CSS, Images)
-  if (url.pathname.endsWith(".wasm") || (url.pathname.endsWith(".js") && url.pathname.includes("frontend-"))) {
-    event.respondWith(
-      fetch(event.request)
-        .then((response) => {
-          const responseToCache = response.clone();
-          caches.open(CACHE_NAME).then((cache) => {
-            cache.put(event.request, responseToCache);
-          });
-          return response;
-        })
-        .catch(() => {
-          return caches.match(event.request);
-        }),
-    );
-    return;
-  }
-
-  // Cache-first strategy for other static assets (CSS, Images, etc.)
   event.respondWith(
     caches.match(event.request).then((response) => {
       return (