Files
smesh/CLAUDE.md
mleku 2aa0a8c460 feat: add QR scanner, improve UX, and simplify navigation
- Add live camera QR scanner for nsec/ncryptsec login
- Replace browser prompt() with proper password dialog for ncryptsec
- Add missing /notes/:id route for thread view navigation
- Remove explore section entirely (button, page, routes)
- Remove profile button from bottom nav, avatar now opens profile
- Remove "Notes" tab from feed, default to showing all posts/replies
- Add PasswordPromptProvider for secure password input
- Add SidebarDrawer for mobile navigation
- Add domain layer with value objects and adapters
- Various UI and navigation improvements

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-28 04:00:16 +02:00

106 lines
3.7 KiB
Markdown

# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Project Overview
Smesh is a React/TypeScript Nostr client for exploring relay feeds. It's a PWA built with Vite, using TailwindCSS for styling and Radix UI/shadcn components.
## Development Commands
```bash
npm install # Install dependencies
npm run dev # Start dev server (Vite, accessible on local network)
npm run dev:8080 # Start dev server on 0.0.0.0:8080 with hot-reload
./hotrefresh # Kill and restart the dev server on port 8080
npm run build # TypeScript check + Vite build
npm run lint # Run ESLint
npm run format # Run Prettier
npm run preview # Preview production build
```
Docker: `docker compose up --build -d` (serves on localhost:8089)
## Architecture
### Directory Structure
- `src/pages/primary/` - Main tab pages (home, explore, notifications, settings, etc.)
- `src/pages/secondary/` - Detail/modal pages (note view, user profile, relay details)
- `src/providers/` - React Context providers for state management
- `src/services/` - Business logic and external integrations
- `src/components/` - Reusable UI components (with `ui/` subdirectory for base components)
- `src/lib/` - Utility functions
- `src/hooks/` - Custom React hooks
- `src/routes/` - Route definitions (primary.tsx and secondary.tsx)
- `src/i18n/` - Internationalization with i18next
### State Management
Uses React Context API with 17+ nested providers in `App.tsx`. Key providers:
- `NostrProvider` - Core authentication and signing (supports nsec, NIP-07, NIP-46 bunker, ncryptsec, npub view-only)
- `FeedProvider` - Active feed state (following, relays, pinned)
- `FavoriteRelaysProvider` - User's relay sets
- `FollowListProvider`, `MuteListProvider` - Social graph
Provider pattern:
```typescript
const Context = createContext<TContext | undefined>(undefined)
export const useMyFeature = () => {
const context = useContext(Context)
if (!context) throw new Error('Must be within provider')
return context
}
```
### Routing
Custom stack-based navigation in `PageManager.tsx`:
- Primary pages: Main tabs rendered in left column (desktop) or full screen (mobile)
- Secondary pages: Detail views rendered in right column or as overlay stack
- Uses `path-to-regexp` for URL matching
- `usePrimaryPage()` and `useSecondaryPage()` hooks for navigation
### Nostr Integration
- `ClientService` (`src/services/client.service.ts`) - Singleton wrapping `nostr-tools` SimplePool
- Event caching with DataLoader and LRU cache
- User search with FlexSearch index
- IndexedDB storage for events (`indexed-db.service.ts`)
- localStorage for preferences (`local-storage.service.ts`)
Key types in `src/types/index.d.ts`:
- `TProfile`, `TRelayList`, `TDraftEvent`, `ISigner`
### UI Components
- Base components: Radix UI primitives in `src/components/ui/`
- Rich text editor: Tiptap in `src/components/PostEditor/`
- Note display: `src/components/Note/NoteCard.tsx`
## Key Patterns
### Path Alias
`@/` maps to `src/` (configured in tsconfig.json and vite.config.ts)
### Page Components
Pages use `forwardRef` to expose `scrollToTop` method:
```typescript
const MyPage = forwardRef<TPageRef>((props, ref) => {
useImperativeHandle(ref, () => ({ scrollToTop: (behavior) => ... }))
})
```
### Event Constants
Nostr event kinds in `src/constants.ts`:
- Standard kinds from `nostr-tools`
- Extended kinds in `ExtendedKind` (polls, pictures, voice notes, etc.)
- Regex patterns for content parsing (URLs, mentions, hashtags, etc.)
## Important Files
- `src/App.tsx` - Provider nesting order matters
- `src/PageManager.tsx` - Navigation and layout logic
- `src/constants.ts` - Global constants, relay URLs, storage keys
- `src/lib/event.ts` - Event parsing utilities