(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) => (