feat(ui): hooks / code highlighting refactor

Redesigned homepage hero with integrated search, terminal component, and partner
marquee. Added system status page for API health monitoring. Migrated code
highlighting from sugar-high to Shiki for better syntax highlighting across all
code blocks. Enhanced search system with unified provider, saved presets, and
homepage integration. Improved hook infrastructure with localStorage/sessionStorage
utilities and multiple intersection observer. Set up Supabase migration infrastructure
for GitHub branch management.

Author: JSONbored

.gitignore

@@ -146,3 +146,5 @@ SEARCH_OPTIMIZATION_ANALYSIS.md
 SEARCH_SYSTEM_ARCHITECTURE.md
 SEARCH_UNIFICATION_TODO.md
 VERIFY_INNGEST_DEPLOYMENT.md
+apps/web/src/components/features/home/HERO_IMPLEMENTATION_SUMMARY.md
+apps/web/src/components/features/home/HERO_REDESIGN.md

.zed/settings.json

@@ -24,7 +24,7 @@
       "language_servers": ["deno", "!typescript-language-server", "!vtsls"]
     },
     "TypeScript": {
-      "language_servers": ["vtsls", "typescript-language-server", "!deno"],
+      "language_servers": ["vtsls", "typescript-language-server", "ast-grep", "!deno"],
       "formatter": [
         {
           "code_action": "source.fixAll.eslint"
@@ -38,7 +38,7 @@
       ]
     },
     "JavaScript": {
-      "language_servers": ["vtsls", "typescript-language-server", "!deno"],
+      "language_servers": ["vtsls", "typescript-language-server", "ast-grep", "!deno"],
       "formatter": [
         {
           "code_action": "source.fixAll.eslint"
@@ -52,7 +52,7 @@
       ]
     },
     "TypeScript React": {
-      "language_servers": ["vtsls", "typescript-language-server", "!deno"],
+      "language_servers": ["vtsls", "typescript-language-server", "ast-grep", "!deno"],
       "formatter": [
         {
           "code_action": "source.fixAll.eslint"
@@ -66,7 +66,7 @@
       ]
     },
     "JavaScript React": {
-      "language_servers": ["vtsls", "typescript-language-server", "!deno"],
+      "language_servers": ["vtsls", "typescript-language-server", "ast-grep", "!deno"],
       "formatter": [
         {
           "code_action": "source.fixAll.eslint"
@@ -222,6 +222,77 @@
           "typescriptreact": "javascriptreact"
         }
       }
+    },
+    "ast-grep": {
+      "binary": {
+        "path": "ast-grep",
+        "arguments": ["lsp"]
+      }
+    },
+    "discord_presence": {
+      "initialization_options": {
+        "application_id": "1263505205522337886",
+        "base_icons_url": "https://raw.githubusercontent.com/xhyrom/zed-discord-presence/main/assets/icons/",
+        "state": "Building heyclau.de: {folder_and_file}",
+        "details": "Claude Pro Directory • {workspace}",
+        "large_image": "{base_icons_url}/{language:lo}.png",
+        "large_text": "{language:u}",
+        "small_image": "{base_icons_url}/zed.png",
+        "small_text": "Zed",
+        "idle": {
+          "timeout": 300,
+          "action": "change_activity",
+          "state": "Taking a break from heyclau.de",
+          "details": "Claude Pro Directory • Idling",
+          "large_image": "{base_icons_url}/zed.png",
+          "large_text": "Zed",
+          "small_image": "{base_icons_url}/idle.png",
+          "small_text": "Coffee break ☕"
+        },
+        "git_integration": true,
+        "languages": {
+          "typescript": {
+            "state": "TypeScript wizardry: {folder_and_file}",
+            "details": "Building Claude Pro Directory",
+            "large_text": "TypeScript"
+          },
+          "javascript": {
+            "state": "JS magic: {folder_and_file}",
+            "details": "Claude Pro Directory",
+            "large_text": "JavaScript"
+          },
+          "typescriptreact": {
+            "state": "React + TS: {folder_and_file}",
+            "details": "Claude Pro Directory UI",
+            "large_text": "React + TypeScript"
+          },
+          "javascriptreact": {
+            "state": "React component: {folder_and_file}",
+            "details": "Claude Pro Directory",
+            "large_text": "React"
+          },
+          "markdown": {
+            "state": "Documenting: {filename}",
+            "details": "Claude Pro Directory docs",
+            "large_text": "Documentation"
+          },
+          "yaml": {
+            "state": "Config: {filename}",
+            "details": "Claude Pro Directory setup",
+            "large_text": "Configuration"
+          },
+          "json": {
+            "state": "Config: {filename}",
+            "details": "Claude Pro Directory",
+            "large_text": "JSON"
+          },
+          "css": {
+            "state": "Styling: {filename}",
+            "details": "Claude Pro Directory",
+            "large_text": "CSS"
+          }
+        }
+      }
     }
   }
 }

apps/edge/supabase/deno-imports.d.ts

@@ -45,12 +45,6 @@ declare module 'npm:@react-email/components@*' {
   export * from '@react-email/components';
 }
 
-declare module 'npm:sugar-high@*' {
-  const content: any;
-  export default content;
-  export * from 'sugar-high';
-}
-
 // HTTPS imports - declare as any to allow imports
 // Supports both default and named exports
 // Note: TypeScript doesn't support index signatures in module declarations,

apps/web/package.json

@@ -68,7 +68,6 @@
     "server-only": "^0.0.1",
     "shiki": "^3.20.0",
     "sonner": "^2.0.7",
-    "sugar-high": "^0.9.5",
     "tailwind-merge": "^3.4.0",
     "zod": "^4.1.13",
     "zustand": "^5.0.9"

apps/web/public/partners/README.md

@@ -0,0 +1,30 @@
+# Partner Logos
+
+This directory contains partner logos for the "Trusted by" marquee in the homepage hero section.
+
+## Current Partners
+
+- **Neon** - 1-year partnership (logo needed: `neon.svg`)
+
+## Logo Requirements
+
+- **Format:** SVG preferred (scalable, crisp at any size)
+- **Size:** Will be displayed at max-height 48px (h-12)
+- **Naming:** Use kebab-case (e.g., `neon.svg`, `company-name.svg`)
+- **Styling:** Logos will be grayscale by default, color on hover
+
+## Adding New Partner Logos
+
+1. Add the logo file to this directory
+2. Update `apps/web/src/components/features/home/hero-partners.tsx`:
+   ```typescript
+   const PARTNERS: Partner[] = [
+     // ... existing partners
+     {
+       name: 'Company Name',
+       logo: '/partners/company-name.svg',
+       href: 'https://company.com',
+       alt: 'Company Name - Description',
+     },
+   ];
+   ```

apps/web/src/app/(auth)/auth/link/[provider]/callback/page.tsx

@@ -7,7 +7,7 @@
 
 import { normalizeError } from '@heyclaude/shared-runtime';
 import { isValidProvider, validateNextParameter } from '@heyclaude/web-runtime';
-import { useAuthenticatedUser } from '@heyclaude/web-runtime/hooks';
+import { useAuthenticatedUser, useBoolean, useTimeout } from '@heyclaude/web-runtime/hooks';
 import { AlertCircle, Loader2 } from '@heyclaude/web-runtime/icons';
 import { logClientError, logClientWarn } from '@heyclaude/web-runtime/logging/client';
 import {
@@ -49,6 +49,8 @@ export default function OAuthLinkCallbackPage({
   const [status, setStatus] = useState<'error' | 'loading'>('loading');
   const [errorMessage, setErrorMessage] = useState<null | string>(null);
   const [provider, setProvider] = useState<null | string>(null);
+  const { setTrue: setShouldRedirectTrue, value: shouldRedirect } = useBoolean();
+  const [redirectProvider, setRedirectProvider] = useState<null | string>(null);
   const hasAttempted = useRef<boolean>(false);
   const {
     isAuthenticated,
@@ -57,9 +59,24 @@ export default function OAuthLinkCallbackPage({
     user,
   } = useAuthenticatedUser({ context: 'OAuthLinkCallback' });
 
+  // Use useTimeout for redirect when user is not authenticated
+  useTimeout(
+    () => {
+      if (shouldRedirect && redirectProvider) {
+        const next = validateNextParameter(
+          searchParameters.get('next'),
+          '/account/connected-accounts'
+        );
+        router.push(
+          `/login?redirect=${encodeURIComponent(`/auth/link/${redirectProvider}?next=${encodeURIComponent(next)}`)}`
+        );
+      }
+    },
+    shouldRedirect ? 2000 : null
+  );
+
   useEffect(() => {
     let mounted = true;
-    let redirectTimeoutId: null | ReturnType<typeof setTimeout> = null;
 
     // Use shared validation utility to prevent open redirects
     /**
@@ -125,17 +142,11 @@ export default function OAuthLinkCallbackPage({
             provider: rawProvider,
             route,
           });
-          // Guard redirect with mounted check and store timeout ID for cleanup
-          redirectTimeoutId = setTimeout(() => {
-            if (!mounted) return; // Don't redirect if component unmounted
-            const next = validateNextParameter(
-              searchParameters.get('next'),
-              '/account/connected-accounts'
-            );
-            router.push(
-              `/login?redirect=${encodeURIComponent(`/auth/link/${rawProvider}?next=${encodeURIComponent(next)}`)}`
-            );
-          }, 2000);
+          // Set state to trigger useTimeout redirect
+          if (mounted) {
+            setRedirectProvider(rawProvider);
+            setShouldRedirectTrue();
+          }
           return;
         }
 
@@ -207,11 +218,6 @@ export default function OAuthLinkCallbackPage({
 
     return () => {
       mounted = false;
-      // Clear any pending redirect timeout on unmount
-      if (redirectTimeoutId) {
-        clearTimeout(redirectTimeoutId);
-        redirectTimeoutId = null;
-      }
     };
   }, [
     resolvedParameters.provider,
@@ -255,7 +261,7 @@ export default function OAuthLinkCallbackPage({
           </CardDescription>
         </CardHeader>
         <CardContent className={UI_CLASSES.FLEX_COL_GAP_2}>
-          <Button type="button" onClick={() => router.push('/account/connected-accounts')}>
+          <Button onClick={() => router.push('/account/connected-accounts')} type="button">
             Return to Connected Accounts
           </Button>
         </CardContent>

apps/web/src/app/(auth)/login/login-panel-client.tsx

@@ -2,6 +2,7 @@
 
 import { VALID_PROVIDERS } from '@heyclaude/web-runtime';
 import { ensureString } from '@heyclaude/web-runtime/data/utils';
+import { useBoolean } from '@heyclaude/web-runtime/hooks';
 import { logClientWarn, normalizeError } from '@heyclaude/web-runtime/logging/client';
 import { useEffect, useMemo, useState } from 'react';
 
@@ -33,7 +34,7 @@ interface LoginPanelClientProperties {
  * @see useNewsletterCount
  */
 export function LoginPanelClient({ redirectTo }: LoginPanelClientProperties) {
-  const [newsletterOptIn, setNewsletterOptIn] = useState(false);
+  const { setValue: setNewsletterOptIn, value: newsletterOptIn } = useBoolean();
   const [newsletterConfig, setNewsletterConfig] = useState<Record<string, unknown>>({});
   const { count, isLoading } = useNewsletterCount();
   const subscriberCountLabel = useMemo(() => formatSubscriberCount(count), [count]);
@@ -98,9 +99,9 @@ export function LoginPanelClient({ redirectTo }: LoginPanelClientProperties) {
           checked={newsletterOptIn}
           headline={tileProperties.tileHeadline}
           isLoadingCount={isLoading}
+          onChange={setNewsletterOptIn}
           safetyCopy={tileProperties.tileSafety}
           subscriberCountLabel={subscriberCountLabel}
-          onChange={setNewsletterOptIn}
         />
       }
       description="Choose your preferred sign-in method"

apps/web/src/app/account/settings/mfa/mfa-factors-list-client.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useBoolean } from '@heyclaude/web-runtime/hooks';
 import { Shield } from '@heyclaude/web-runtime/icons';
 import { Button, UI_CLASSES } from '@heyclaude/web-runtime/ui';
 import { useState } from 'react';
@@ -8,7 +9,11 @@ import { EnrollMFADialog } from '@/src/components/features/account/mfa/enroll-mf
 import { MFAFactorsList } from '@/src/components/features/account/mfa/mfa-factors-list';
 
 export function MFAFactorsListClient() {
-  const [enrollDialogOpen, setEnrollDialogOpen] = useState(false);
+  const {
+    setTrue: setEnrollDialogOpenTrue,
+    setValue: setEnrollDialogOpen,
+    value: enrollDialogOpen,
+  } = useBoolean();
   const [refreshKey, setRefreshKey] = useState(0);
 
   const handleEnrolled = () => {
@@ -18,7 +23,7 @@ export function MFAFactorsListClient() {
   return (
     <div className="space-y-4">
       <div className="flex justify-end">
-        <Button onClick={() => setEnrollDialogOpen(true)}>
+        <Button onClick={setEnrollDialogOpenTrue}>
           <Shield className={UI_CLASSES.ICON_SM_LEADING} />
           Add Authenticator
         </Button>

apps/web/src/app/account/sponsorships/page.tsx

@@ -78,6 +78,11 @@ export async function generateMetadata(): Promise<Metadata> {
  * @param {{ active: boolean | null; end_date: string; start_date: string }} sponsorship Parameter description
  * @param {{ active: boolean | null; end_date: string; start_date: string }} sponsorship Parameter description
  * @param {{ active: boolean | null; end_date: string; start_date: string }} sponsorship Parameter description
+ * @param {{ active: boolean | null; end_date: string; start_date: string }} sponsorship Parameter description
+ * @param {{ active: boolean | null; end_date: string; start_date: string }} sponsorship Parameter description
+ * @param {{ active: boolean | null; end_date: string; start_date: string }} sponsorship Parameter description
+ * @param {{ active: boolean | null; end_date: string; start_date: string }} sponsorship Parameter description
+ * @param {{ active: boolean | null; end_date: string; start_date: string }} sponsorship Parameter description
  * @param {{ active: boolean | null; end_date: string; start_date: string }} sponsorship Parameter description
   * @param {{ active: boolean | null; end_date: string; start_date: string }} sponsorship Parameter description
 */