(feat): big methanium/ui migration

(feat): update message state icons
(qol): update todo
(qol): formatted

apps/web/src/components/navbar.tsx

@@ -10,7 +10,12 @@ import { useLocation, useNavigate, useSearch } from "@tanstack/react-router";
 import { joinCall, useCall } from "@tensamin/call/store";
 import Wrapper from "@tensamin/user/wrapper";
 import { Skeleton } from "@methanium/ui";
-import { Select, SelectContent, SelectItem, SelectTrigger } from "@methanium/ui";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "@methanium/ui";
 import { displayCallId } from "@tensamin/call/utils";
 import { useState } from "react";
 import { SidebarTrigger, useSidebar } from "@methanium/ui";
@@ -43,7 +48,7 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
       <div className="flex items-center justify-center gap-2">
         {forMobile ? (
           <SidebarTrigger
-            className="w-9 h-9 aspect-square rounded-lg ml-2"
+            className="w-9 h-9! aspect-square rounded-lg ml-2 bg-(--input)/35!"
             variant="outline"
           >
             <ArrowLeft className="size-4.5" />
@@ -52,14 +57,14 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
           <>
             <Button
               onClick={() => navigate({ to: "/" })}
-              className="w-9 h-9 aspect-square rounded-lg"
+              className="w-9 h-9! aspect-square rounded-lg bg-(--input)/35!"
               variant="outline"
             >
               <House className="size-4.5" />
             </Button>
             <Button
               onClick={() => navigate({ to: "/settings" })}
-              className="w-9 h-9 aspect-square rounded-lg"
+              className="w-9 h-9! aspect-square rounded-lg bg-(--input)/35!"
               variant="outline"
             >
               <Settings className="size-4.5" />
@@ -109,7 +114,7 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
                 onClick={() => {
                   void joinCall(id);
                 }}
-                className="w-9 h-9 aspect-square rounded-lg"
+                className="w-9 h-9! aspect-square rounded-lg bg-(--input)/35!"
                 variant="outline"
               >
                 <Phone />
@@ -124,7 +129,7 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
                     currentCalls[0].CallId,
                   );
                 }}
-                className="w-9 h-9 aspect-square rounded-lg"
+                className="w-9 h-9! aspect-square rounded-lg bg-(--input)/35!"
               >
                 <Phone />
               </Button>
@@ -175,7 +180,7 @@ export function MobileNavbar() {
     <div className="z-51 w-full shrink-0 pb-[env(safe-area-inset-bottom)] bg-card border-t">
       <div className="z-51 w-full h-15 grid grid-cols-3 items-center place-items-center px-5">
         <SidebarTrigger
-          className="text-foreground w-12! h-12! aspect-square rounded-xl flex flex-col gap-1"
+          className="text-foreground w-12! h-12! aspect-square rounded-xl flex flex-col gap-1 border-0!"
           variant="link"
         >
           <User className="size-4.5" />
@@ -186,7 +191,7 @@ export function MobileNavbar() {
             navigate({ to: "/" });
             setOpenMobile(false);
           }}
-          className="text-foreground w-12 h-12 aspect-square rounded-xl flex flex-col gap-1"
+          className="text-foreground w-12 h-12 aspect-square rounded-xl flex flex-col gap-1 border-0! hover:bg-transparent!"
           variant="link"
         >
           <House className="size-4.5" />
@@ -197,7 +202,7 @@ export function MobileNavbar() {
             navigate({ to: "/settings" });
             setOpenMobile(false);
           }}
-          className="text-foreground w-12 h-12 aspect-square rounded-xl flex flex-col gap-1"
+          className="text-foreground w-12 h-12 aspect-square rounded-xl flex flex-col gap-1 border-0! hover:bg-transparent!"
           variant="link"
         >
           <Settings className="size-4.5" />

apps/web/src/index.tsx

@@ -131,6 +131,11 @@ function ThemeStorageBridge() {
     setThemeBorderRadius,
     themeCustomCss,
     setThemeCustomCss,
+    parentThemeId,
+    setParentThemeId,
+    applyThemePreset,
+    themeDesign,
+    setThemeDesign,
   } = useTheme();
   const loadedRef = useRef(false);
 
@@ -145,6 +150,8 @@ function ThemeStorageBridge() {
       load("theme_tint"),
       load("theme_border_radius"),
       load("theme_custom_css"),
+      load("theme_parent"),
+      load("theme_design"),
     ]).then(
       ([
         color,
@@ -154,18 +161,23 @@ function ThemeStorageBridge() {
         tint,
         borderRadius,
         customCss,
+        parent,
+        design,
       ]) => {
         if (!active) {
           return;
         }
 
+        if (customCss === "" && parent) applyThemePreset(parent);
+        else setParentThemeId(parent || null);
         setThemeColor(color);
         setThemePalette(palette);
         setThemePrimaryColor(primaryColor);
         setThemePolarity(polarity);
         setThemeTint(tint);
         setThemeBorderRadius(borderRadius);
-        setThemeCustomCss(customCss);
+        if (customCss !== "") setThemeCustomCss(customCss);
+        setThemeDesign(design);
         loadedRef.current = true;
       },
     );
@@ -175,9 +187,12 @@ function ThemeStorageBridge() {
     };
   }, [
     load,
+    applyThemePreset,
     setThemeBorderRadius,
     setThemeColor,
     setThemeCustomCss,
+    setParentThemeId,
+    setThemeDesign,
     setThemePalette,
     setThemePolarity,
     setThemePrimaryColor,
@@ -212,6 +227,14 @@ function ThemeStorageBridge() {
     if (loadedRef.current) save("theme_custom_css", themeCustomCss);
   }, [save, themeCustomCss]);
 
+  useEffect(() => {
+    if (loadedRef.current) save("theme_parent", parentThemeId ?? "");
+  }, [parentThemeId, save]);
+
+  useEffect(() => {
+    if (loadedRef.current) save("theme_design", themeDesign);
+  }, [save, themeDesign]);
+
   return null;
 }
 
@@ -228,6 +251,8 @@ function RootShell() {
         tintStorageKey={null}
         borderRadiusStorageKey={null}
         customCssStorageKey={null}
+        parentThemeStorageKey={null}
+        designStorageKey={null}
       >
         <div className="w-screen h-dvh overflow-hidden">
           <Toaster

apps/web/src/routes/app/home.tsx

@@ -131,7 +131,11 @@ function AddConversationButton() {
         setOpen(value);
       }}
     >
-      <DialogTrigger render={<Button>Add Conversation</Button>} />
+      <DialogTrigger
+        render={({ onClick }) => (
+          <Button onClick={onClick}>Add Conversation</Button>
+        )}
+      />
       <DialogContent>
         <DialogHeader>
           <DialogTitle>New Conversation</DialogTitle>