fix: replace settings mobile tabs with 2-col grid and remove fab

src/app/globals.css

@@ -725,7 +725,7 @@
 }
 :where(html[data-nav="bottom"]) .scroll-area,
 :where(html[data-nav="fab"]) .scroll-area {
-  padding: 12px 14px 88px;
+  padding: 12px 14px 74px;
 }
 
 .scroll-area::-webkit-scrollbar {
@@ -1507,7 +1507,4 @@ select {
   :where(html[data-nav="bottom"]) .scroll-area {
     padding-bottom: 52px;
   }
-  .fab {
-    bottom: 50px !important;
-  }
 }

src/components/app-shell.tsx

@@ -4,7 +4,6 @@ import type { DashboardMeta } from "@/app/d/actions";
 import { Sidebar } from "@/components/sidebar";
 import { Topbar } from "@/components/topbar";
 import { BottomNav } from "@/components/bottom-nav";
-import { Fab } from "@/components/fab";
 import { NavModeProvider } from "@/components/nav-mode-provider";
 
 const BARE_PREFIXES = ["/s/", "/login"];
@@ -38,7 +37,6 @@ export async function AppShell({ signedIn, navStyle, children }: Props) {
         <div className="scroll-area">{children}</div>
       </main>
       <BottomNav />
-      <Fab />
       <NavModeProvider navStyle={navStyle} />
     </div>
   );

src/components/settings-section.tsx

@@ -81,20 +81,26 @@ function SectionHashSync({ pathname }: { pathname: string | null }) {
 export function SettingsTabsMobile({ active }: { active: SectionId }) {
   const router = useRouter();
   return (
-    <div className="seg w-full overflow-x-auto" style={{ display: "flex" }}>
+    <div className="grid grid-cols-2 gap-1.5 mb-1">
       {SECTIONS.map((s) => (
         <button
           key={s.id}
           type="button"
-          role="tab"
+          aria-current={active === s.id ? "page" : undefined}
-          aria-selected={active === s.id}
+          className={cn(
+            "flex items-center gap-2.5 px-3 py-2.5 rounded-[var(--r-md)] border-[0.5px] text-left text-[13px] font-medium transition-colors",
+            active === s.id
+              ? "bg-[var(--card)] border-[var(--hair-2)] text-[var(--ink)] shadow-[var(--shadow-1)]"
+              : "border-transparent text-[var(--ink-soft)] hover:bg-[var(--shade)]",
+          )}
           onClick={() => {
             const url = new URL(window.location.href);
             url.searchParams.set("s", s.id);
             router.replace(url.pathname + "?" + url.searchParams.toString(), { scroll: false });
           }}
         >
-          {s.label.split(" ")[0]}
+          <NavIcon name={s.icon} className="size-4 shrink-0" />
+          <span>{s.label.split(" ")[0]}</span>
         </button>
       ))}
     </div>