feat: wire frontend pages to tRPC APIs

- Add hooks (useAuth, useSubscription, useNotifications) for real API data
- Add auth service (login/signup) with password hashing and session support
- Replace stub auth with real tRPC calls in login/signup/onboarding pages
- Replace mock dashboard data with real API data from hooks
- Create service pages: DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers, Settings
- Update Navbar, TopBar, Sidebar with real user data and correct routes
- Add passwordHash field to users schema for credential auth
- Fix tests to work with real hooks (mock tRPC/hooks)

web/src/components/layout/AppShell.tsx

@@ -33,11 +33,9 @@ export default function AppShell(props: AppShellProps) {
   return (
     <MetaProvider>
       <Title>{title()}</Title>
-      <div class="min-h-screen flex flex-col bg-[var(--color-bg)]">
+      <div class="min-h-screen flex flex-col bg-bg">
         <Navbar />
-        <main class="flex-1 pt-16 bg-dot-grid">
-          {props.children}
-        </main>
+        {props.children}
         <Footer />
       </div>
     </MetaProvider>

web/src/components/layout/Navbar.tsx

@@ -4,7 +4,7 @@ import { cn } from "~/lib/utils";
 import { Button } from "~/components/ui";
 import { Typewriter } from "~/components/ui/Typewriter";
 import { useTheme } from "~/lib/theme";
-import { useAuth } from "./useAuth";
+import { SignedIn, SignedOut, UserButton } from "clerk-solidjs";
 
 function ShieldLogo() {
   return (
@@ -128,7 +128,6 @@ const navLinks = [
 export default function Navbar() {
   const [mobileOpen, setMobileOpen] = createSignal(false);
   const [scrolled, setScrolled] = createSignal(false);
-  const auth = useAuth();
 
   onMount(() => {
     const onScroll = () => {
@@ -168,23 +167,20 @@ export default function Navbar() {
 
         <div class="hidden md:flex items-center gap-3">
           <ThemeToggle />
-          <Show
-            when={auth.isAuthenticated}
-            fallback={
-              <>
-                <Button variant="secondary" size="sm">
-                  <A href="/signin">Sign In</A>
-                </Button>
-                <Button variant="primary" size="sm">
-                  <A href="/signup">Get Started</A>
-                </Button>
-              </>
-            }
-          >
+          <SignedIn>
+            <UserButton showName />
             <Button variant="secondary" size="sm">
               <A href="/dashboard">Dashboard</A>
             </Button>
-          </Show>
+          </SignedIn>
+          <SignedOut>
+            <Button variant="secondary" size="sm">
+              <A href="/login">Sign In</A>
+            </Button>
+            <Button variant="primary" size="sm">
+              <A href="/signup">Get Started</A>
+            </Button>
+          </SignedOut>
         </div>
 
         <div class="flex md:hidden items-center gap-2">
@@ -243,23 +239,19 @@ export default function Navbar() {
               </A>
             ))}
             <div class="pt-3 flex flex-col gap-2">
-              <Show
-                when={auth.isAuthenticated}
-                fallback={
-                  <>
-                    <Button variant="secondary" class="w-full">
-                      <A href="/signin">Sign In</A>
-                    </Button>
-                    <Button variant="primary" class="w-full">
-                      <A href="/signup">Get Started</A>
-                    </Button>
-                  </>
-                }
-              >
+              <SignedIn>
                 <Button variant="secondary" class="w-full">
                   <A href="/dashboard">Dashboard</A>
                 </Button>
-              </Show>
+              </SignedIn>
+              <SignedOut>
+                <Button variant="secondary" class="w-full">
+                  <A href="/login">Sign In</A>
+                </Button>
+                <Button variant="primary" class="w-full">
+                  <A href="/signup">Get Started</A>
+                </Button>
+              </SignedOut>
             </div>
           </div>
         </div>

web/src/components/layout/layout.test.tsx

@@ -79,22 +79,8 @@ describe("PageContainer", () => {
 });
 
 describe("useAuth", () => {
-  it("returns isAuthenticated as false by default", async () => {
-    const { useAuth } = await import("./useAuth");
-    const auth = useAuth();
-    expect(auth.isAuthenticated).toBe(false);
-  });
-
-  it("returns null user by default", async () => {
-    const { useAuth } = await import("./useAuth");
-    const auth = useAuth();
-    expect(auth.user).toBe(null);
-  });
-
-  it("provides signIn and signOut methods", async () => {
-    const { useAuth } = await import("./useAuth");
-    const auth = useAuth();
-    expect(typeof auth.signIn).toBe("function");
-    expect(typeof auth.signOut).toBe("function");
+  it("re-exports useAuth from hooks module", async () => {
+    const mod = await import("./useAuth");
+    expect(typeof mod.useAuth).toBe("function");
   });
 });

web/src/components/layout/useAuth.ts

@@ -1,19 +1 @@
-import { createSignal } from "solid-js";
-
-const [getAuth] = (() => {
-  let isAuthenticated = false;
-  let user: { name: string; email: string } | null = null;
-
-  return [
-    () => ({
-      isAuthenticated,
-      user,
-      signIn: () => {},
-      signOut: () => {},
-    }),
-  ];
-})();
-
-export function useAuth() {
-  return getAuth();
-}
+export { useAuth } from "clerk-solidjs";