(feat): add reply box to messages

(feat): update methanium ui
(fix): user data caching
(fix): other random stuff
(qol): update todo

packages/settings/src/layout.tsx

@@ -1,5 +1,6 @@
 import { Outlet, useLocation, useNavigate } from "@tanstack/react-router";
 import { Button, ClearStorageButton, cn, useIsMobile } from "@methanium/ui";
+import { ArrowLeft } from "lucide-react";
 
 import { settingsNavigation } from "./manifest";
 
@@ -8,24 +9,41 @@ export default function SettingsLayout() {
   const location = useLocation();
 
   return (
-    <div className="flex h-full w-full">
-      {!isMobile && <SettingsSidebar />}
-      <div className="bg-background w-full h-full p-3 flex flex-col gap-3">
-        <h1 className="text-xl font-semibold">
-          {location.pathname
-            .split("/")
-            .pop()
-            ?.replace(/-/g, " ")
-            .replace(/\b\w/g, (letter) => letter.toUpperCase())}
-        </h1>
+    <div className="flex h-full min-h-0 w-full">
+      <SettingsSidebar className="hidden md:flex" />
+      <div className="bg-background flex h-full min-h-0 w-full flex-col gap-3 overflow-y-auto p-3">
+        <div className="flex items-center gap-2">
+          {isMobile && !/^\/settings\/?$/.test(location.pathname) && (
+            <Button
+              aria-label="Go back"
+              className="h-8 w-8 shrink-0 p-0"
+              variant="ghost"
+              onClick={() => window.history.back()}
+            >
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+          )}
+          <h1 className="text-xl font-semibold">
+            {location.pathname
+              .split("/")
+              .pop()
+              ?.replace(/-/g, " ")
+              .replace(/\b\w/g, (letter) => letter.toUpperCase())}
+          </h1>
+        </div>
         <Outlet />
       </div>
     </div>
   );
 }
 
-export function SettingsSidebar() {
-  const isMobile = useIsMobile();
+export function SettingsSidebar({
+  mobile = false,
+  className,
+}: {
+  mobile?: boolean;
+  className?: string;
+}) {
   const navigate = useNavigate();
   const categories = [
     ...new Set(settingsNavigation.map((page) => page.category)),
@@ -34,10 +52,11 @@ export function SettingsSidebar() {
   return (
     <div
       className={cn(
-        isMobile
+        mobile
           ? "w-full p-1"
           : "p-3 rounded-tl-2xl border-r bg-input/15 w-50",
         "flex flex-col gap-6",
+        className,
       )}
     >
       {categories.map((category) => (

packages/settings/src/manifest.ts

@@ -8,7 +8,6 @@ import Theme from "./pages/theme";
 
 export const settingsPages = [
   { path: "/", component: Index },
-  { category: "general", path: "chat", label: "Chat", component: Chat },
   {
     category: "account",
     path: "profile",
@@ -21,6 +20,7 @@ export const settingsPages = [
     label: "Security",
     component: Security,
   },
+  { category: "general", path: "chat", label: "Chat", component: Chat },
   { category: "application", path: "cache", label: "Cache", component: Cache },
   { category: "application", path: "theme", label: "Theme", component: Theme },
   {

packages/settings/src/pages/index.tsx

@@ -1,7 +1,9 @@
-import { useIsMobile } from "@methanium/ui";
 import { SettingsSidebar } from "../layout";
 
 export default function Page() {
-  const isMobile = useIsMobile();
-  return isMobile && <SettingsSidebar />;
+  return (
+    <div className="h-full md:hidden">
+      <SettingsSidebar mobile />
+    </div>
+  );
 }

packages/settings/src/pages/licenses.tsx

@@ -40,7 +40,7 @@ export default function Page() {
         <p>Package Count: {packageCount}</p>
       </div>
       <div className="min-h-0 flex-1 max-h-[calc(100vh-180px)] overflow-auto pr-2">
-        <div className="flex flex-col gap-5">
+        <div className="flex flex-col gap-5 p-px">
           {packages.map((licensePackage) => (
             <Card
               className="pb-0!"