update guestbook

CRUSH.md

···
-# CRUSH.md
-
-## Project Overview
-
-This is a personal portfolio website built with Bun, React, TypeScript, and Tailwind CSS. It uses the shadcn/ui component library and serves as both a portfolio and development environment for AT Protocol-related projects. The project demonstrates modern web development practices with a focus on decentralized technologies.
-
-## Development Commands
-
-### Core Commands
-- `bun install` - Install dependencies
-- `bun dev` - Start development server with hot reload and HMR
-- `bun start` - Run production server
-- `bun run build.ts` - Build for production (outputs to `dist/`)
-- `bun run build.ts --help` - Show all build options
-
-### Build System
-The custom build script (`build.ts`) supports various options:
-- `--outdir <path>` - Output directory (default: "dist")
-- `--minify` - Enable minification
-- `--sourcemap <type>` - Sourcemap type (none|linked|inline|external)
-- `--external <list>` - External packages (comma separated)
-
-The build automatically:
-- Processes all HTML files in `src/` as entrypoints
-- Copies `public/` folder to dist
-- Uses Tailwind plugin for CSS processing
-- Includes linked sourcemaps by default
-
-## Architecture
-
-### Project Structure
-```
-src/
-├── components/
-│   ├── ui/           # shadcn/ui components (Button, Card, Input, etc.)
-│   ├── sections/     # Main page sections (Header, Work, Connect)
-│   └── ...           # Other React components
-├── data/
-│   └── portfolio.ts  # Portfolio content and metadata
-├── hooks/            # Custom React hooks
-├── lib/              # Utility functions
-└── styles/           # Global CSS and Tailwind config
-```
-
-### Server Architecture
-- Uses Bun's built-in server (`src/index.ts`)
-- Serves React SPA with API routes
-- API routes use pattern matching (`/api/hello/:name`)
-- CORS headers configured for cross-origin requests
-- Development mode includes HMR and browser console echoing
-
-### Key Files
-- `src/index.ts` - Server entry point with API routes
-- `src/App.tsx` - Main React component with intersection observer animations
-- `src/data/portfolio.ts` - All portfolio content (personal info, work experience, skills)
-- `build.ts` - Custom build script with extensive CLI options
-- `styles/globals.css` - Tailwind imports, CSS variables, and custom animations
-
-## Code Conventions
-
-### TypeScript Configuration
-- Strict mode enabled with `noUncheckedIndexedAccess`
-- Path aliases: `@/*` maps to `./src/*`
-- JSX: `react-jsx` transform
-- Module resolution: `bundler` mode
-- Target: `ESNext` with DOM libraries
-
-### Component Patterns
-- Uses shadcn/ui component library with `class-variance-authority`
-- Utility function `cn()` combines `clsx` and `tailwind-merge`
-- Components follow Radix UI patterns for accessibility
-- File exports: Named exports for components, default for main App
-
-### Styling
-- Tailwind CSS v4 with custom CSS variables
-- Dark theme by default with light mode support
-- Glassmorphism effects with custom utilities
-- Custom animations: `fade-in-up`, `bounce-slow`
-- Fira Code monospace font throughout
-
-### Import Aliases (from components.json)
-```typescript
-"@/components" → "./src/components"
-"@/lib/utils" → "./src/lib/utils"  
-"@/components/ui" → "./src/components/ui"
-"@/lib" → "./src/lib"
-"@/hooks" → "./src/hooks"
-```
-
-## UI Components
-
-### shadcn/ui Integration
-The project uses shadcn/ui with:
-- Style variant: "new-york"
-- Base color: "neutral"
-- Icon library: Lucide React
-- CSS variables enabled
-- Custom CSS location: `styles/globals.css`
-
-### Available UI Components
-- Button (multiple variants: default, destructive, outline, secondary, ghost, link)
-- Card
-- Input
-- Label
-- Select
-- Textarea
-
-### Custom Components
-- ThemeToggle (dark/light mode switching)
-- SectionNav (navigation between portfolio sections)
-- ProjectCard/WorkExperienceCard (portfolio item displays)
-- SocialLink (social media links with icons)
-
-## Content Management
-
-Portfolio data is centralized in `src/data/portfolio.ts`:
-- `personalInfo` - Name, title, description, availability, contact
-- `currentRole` - Current employment status
-- `skills` - Array of technical skills
-- `workExperience` - Array of work history with projects
-- `socialLinks` - Social media profiles
-- `sections` - Page section identifiers
-
-The description format supports rich text with bold styling and URLs:
-```typescript
-type DescriptionPart = {
-  text: string
-  bold?: boolean
-  url?: string
-}
-```
-
-## Deployment
-
-### Netlify Configuration
-- Static site hosting
-- CORS headers configured in `public/netlify.toml`
-- AT Protocol DID file at `public/.well-known/atproto-did`
-
-### Build Output
-- Production builds output to `dist/`
-- All HTML files in `src/` become entrypoints
-- Public assets copied automatically
-- Source maps linked for debugging
-
-## Development Notes
-
-### Hot Module Replacement
-- Development server includes HMR
-- Browser console logs echoed to server
-- Automatic reloading on file changes
-
-### Performance Features
-- Intersection Observer for scroll-triggered animations
-- Code splitting support in build configuration
-- Minification enabled by default in production
-- Lazy loading with `react` imports
-
-### AT Protocol Integration
-- Project showcases AT Protocol-related work
-- Uses `atproto-ui` component library
-- Bluesky and Tangled integration in portfolio
-
-## Gotchas
-
-### Build System
-- Custom build script requires Bun runtime (not Node.js)
-- HTML files in `src/` automatically become entrypoints
-- Must use `--external` flag for libraries that shouldn't be bundled
-
-### Styling
-- Dark mode is default styling approach
-- CSS variables are used extensively for theming
-- Custom glassmorphism effects require SVG filters (defined in CSS)
-
-### Server Routes
-- API routes use Bun's pattern matching syntax
-- All unmatched routes serve the main SPA (catch-all route)
-- CORS headers pre-configured for API access
-
-### Content Structure
-- Portfolio content is TypeScript data, not markdown
-- Rich text descriptions use specific object structure
-- Projects support multiple links (live demo, GitHub, etc.)

src/components/GuestbookEntries.tsx

···
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
-  const fetchEntries = async () => {
+  const fetchEntries = async (signal: AbortSignal) => {
     setLoading(true)
     setError(null)
 
···
       url.searchParams.set('source', 'pet.nkp.guestbook.sign:subject')
       url.searchParams.set('limit', limit.toString())
 
-      const response = await fetch(url.toString())
+      const response = await fetch(url.toString(), { signal })
       if (!response.ok) throw new Error('Failed to fetch signatures')
 
       const data = await response.json()
-      
+
       if (!data.records || !Array.isArray(data.records)) {
         setEntries([])
         setLoading(false)
         return
       }
 
-      const fetchedEntries: GuestbookEntry[] = []
-      const recordMap = new Map<string, any>()
-      const authorDids: string[] = []
-
-      // First pass: fetch all records and collect author DIDs
-      for (const record of data.records as ConstellationRecord[]) {
+      // Collect all entries first, then render once
+      const entryPromises = (data.records as ConstellationRecord[]).map(async (record) => {
         try {
           const recordUrl = new URL('/xrpc/com.atproto.repo.getRecord', 'https://slingshot.wisp.place')
           recordUrl.searchParams.set('repo', record.did)
           recordUrl.searchParams.set('collection', record.collection)
           recordUrl.searchParams.set('rkey', record.rkey)
 
-          const recordResponse = await fetch(recordUrl.toString())
-          if (!recordResponse.ok) continue
+          const recordResponse = await fetch(recordUrl.toString(), { signal })
+          if (!recordResponse.ok) return null
 
           const recordData = await recordResponse.json()
 
···
             recordData.value.$type === 'pet.nkp.guestbook.sign' &&
             typeof recordData.value.message === 'string'
           ) {
-            recordMap.set(record.did, recordData)
-            authorDids.push(record.did)
+            return {
+              uri: recordData.uri,
+              author: record.did,
+              authorHandle: undefined,
+              message: recordData.value.message,
+              createdAt: recordData.value.createdAt,
+            } as GuestbookEntry
           }
-        } catch {}
-      }
+        } catch (err) {
+          if (err instanceof Error && err.name === 'AbortError') throw err
+        }
+        return null
+      })
 
-      // Second pass: batch fetch all profiles at once
-      const authorHandles = new Map<string, string>()
-      if (authorDids.length > 0) {
-        try {
-          // Batch fetch profiles up to 25 at a time (API limit)
-          for (let i = 0; i < authorDids.length; i += 25) {
-            const batch = authorDids.slice(i, i + 25)
-            const profileUrl = new URL('/xrpc/app.bsky.actor.getProfiles', 'https://public.api.bsky.app')
-            batch.forEach(did => profileUrl.searchParams.append('actors', did))
+      const results = await Promise.all(entryPromises)
+      const validEntries = results.filter((e): e is GuestbookEntry => e !== null)
 
-            const profileResponse = await fetch(profileUrl.toString())
-            if (profileResponse.ok) {
-              const profilesData = await profileResponse.json()
-              if (profilesData.profiles && Array.isArray(profilesData.profiles)) {
-                profilesData.profiles.forEach((profile: any) => {
-                  if (profile.handle) {
-                    authorHandles.set(profile.did, profile.handle)
-                  }
-                })
-              }
-            }
-          }
-        } catch {}
-      }
-
-      // Third pass: create entries with fetched profile data
-      for (const [did, recordData] of recordMap) {
-        const authorHandle = authorHandles.get(did)
-        fetchedEntries.push({
-          uri: recordData.uri,
-          author: did,
-          authorHandle,
-          message: recordData.value.message,
-          createdAt: recordData.value.createdAt,
-        })
-      }
-
-      // Sort by date, newest first
-      fetchedEntries.sort((a, b) => 
+      // Sort once and set all entries at once
+      validEntries.sort((a, b) =>
         new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
       )
 
-      setEntries(fetchedEntries)
+      setEntries(validEntries)
+      setLoading(false)
+
+      // Batch fetch profiles asynchronously
+      if (validEntries.length > 0) {
+        const uniqueDids = Array.from(new Set(validEntries.map(e => e.author)))
+
+        // Batch fetch profiles up to 25 at a time (API limit)
+        const profilePromises = []
+        for (let i = 0; i < uniqueDids.length; i += 25) {
+          const batch = uniqueDids.slice(i, i + 25)
+
+          const profileUrl = new URL('/xrpc/app.bsky.actor.getProfiles', 'https://public.api.bsky.app')
+          batch.forEach(d => profileUrl.searchParams.append('actors', d))
+
+          profilePromises.push(
+            fetch(profileUrl.toString(), { signal })
+              .then(profileResponse => profileResponse.ok ? profileResponse.json() : null)
+              .then(profilesData => {
+                if (profilesData?.profiles && Array.isArray(profilesData.profiles)) {
+                  const handles = new Map<string, string>()
+                  profilesData.profiles.forEach((profile: any) => {
+                    if (profile.handle) {
+                      handles.set(profile.did, profile.handle)
+                    }
+                  })
+                  return handles
+                }
+                return new Map<string, string>()
+              })
+              .catch((err) => {
+                if (err instanceof Error && err.name === 'AbortError') throw err
+                return new Map<string, string>()
+              })
+          )
+        }
+
+        // Wait for all profile batches, then update once
+        const handleMaps = await Promise.all(profilePromises)
+        const allHandles = new Map<string, string>()
+        handleMaps.forEach(map => {
+          map.forEach((handle, did) => allHandles.set(did, handle))
+        })
+
+        if (allHandles.size > 0) {
+          setEntries(prev => prev.map(entry => {
+            const handle = allHandles.get(entry.author)
+            return handle ? { ...entry, authorHandle: handle } : entry
+          }))
+        }
+      }
     } catch (err) {
+      if (err instanceof Error && err.name === 'AbortError') return
       setError(err instanceof Error ? err.message : 'Failed to load entries')
-    } finally {
       setLoading(false)
     }
   }
 
   useEffect(() => {
-    fetchEntries()
-    onRefresh?.(() => fetchEntries())
+    const abortController = new AbortController()
+    fetchEntries(abortController.signal)
+    onRefresh?.(() => {
+      abortController.abort()
+      const newController = new AbortController()
+      fetchEntries(newController.signal)
+    })
+
+    return () => abortController.abort()
   }, [did, limit])
 
   const formatDate = (isoString: string) => {
···
   }
 
   const shortenDid = (did: string) => {
-    if (did.startsWith('did:plc:')) {
-      return `${did.slice(0, 12)}...`
+    if (did.startsWith('did:')) {
+      const afterPrefix = did.indexOf(':', 4)
+      if (afterPrefix !== -1) {
+        return `${did.slice(0, afterPrefix + 9)}...`
+      }
     }
     return did
   }
···
       {entries.map((entry, index) => (
         <div
           key={entry.uri}
-          className="bg-gray-100 dark:bg-gray-800/50 rounded-lg p-4 border-l-4 transition-colors"
+          className="bg-gray-100 rounded-lg p-4 border-l-4 transition-colors"
           style={{ borderLeftColor: getColorForIndex(index) }}
         >
           <div className="flex justify-between items-start mb-1">
···
               href={`https://bsky.app/profile/${entry.authorHandle || entry.author}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="font-semibold text-gray-900 dark:text-gray-100 hover:underline"
+              className="font-semibold text-gray-900 hover:underline"
             >
               {entry.authorHandle || shortenDid(entry.author)}
             </a>
···
               href={`https://bsky.app/profile/${entry.authorHandle || entry.author}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              className="text-gray-400 hover:text-gray-600"
               style={{ color: getColorForIndex(index) }}
             >
               <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
···
               </svg>
             </a>
           </div>
-          <p className="text-gray-800 dark:text-gray-200 mb-2">
+          <p className="text-gray-800 mb-2">
             {entry.message}
           </p>
-          <span className="text-sm text-gray-500 dark:text-gray-400">
+          <span className="text-sm text-gray-500">
             {formatDate(entry.createdAt)}
           </span>
         </div>

src/components/sections/GuestbookPage.tsx

···
   }, [])
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 dark:from-background dark:to-background py-12 px-6">
+    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 py-12 px-6">
       <div className="max-w-xl mx-auto">
         {/* Header */}
         <header className="mb-12 text-center">
           <div className="inline-block mb-4">
             <span className="text-5xl">📖</span>
           </div>
-          <h1 className="text-3xl font-light tracking-tight text-gray-900 dark:text-gray-100 mb-3">
+          <h1 className="text-3xl font-light tracking-tight text-gray-900 mb-3">
             Ana's Guestbook
           </h1>
-          <p className="text-gray-500 dark:text-gray-400 font-mono text-sm">
+          <p className="text-gray-500 font-mono text-sm">
             Leave a message, say hello
           </p>
         </header>
 
         {/* Sign Form */}
-        <div className="mb-12 bg-white dark:bg-gray-900/50 rounded-2xl shadow-sm border border-gray-200/50 dark:border-gray-800 p-6">
+        <div className="mb-12 bg-white rounded-2xl shadow-sm border border-gray-200/50 p-6">
           <guestbook-sign did="did:plc:ttdrpj45ibqunmfhdsb4zdwq"></guestbook-sign>
         </div>
 
         {/* Entries Header */}
         <div className="flex items-center gap-3 mb-6">
-          <div className="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 dark:via-gray-700 to-transparent"></div>
-          <span className="text-xs font-mono text-gray-400 dark:text-gray-500 uppercase tracking-widest">
+          <div className="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
+          <span className="text-xs font-mono text-gray-400 uppercase tracking-widest">
             Messages
           </span>
-          <div className="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 dark:via-gray-700 to-transparent"></div>
+          <div className="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
         </div>
 
-        <GuestbookEntries 
-          did="did:plc:ttdrpj45ibqunmfhdsb4zdwq" 
+        <GuestbookEntries
+          did="did:plc:ttdrpj45ibqunmfhdsb4zdwq"
           limit={50}
           onRefresh={(refresh) => { refreshRef.current = refresh }}
         />