forked from coracle/flotilla
Add claude context file and mock up recent activity
This commit is contained in:
Jon Staab
@@ -0,0 +1,121 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Project Overview
|
||||
|
||||
Flotilla is a Discord-like Nostr client that operates on the concept of "relays as groups/spaces." Built with SvelteKit 2.5 and Svelte 5, it provides messaging, threads, calendar events, and social features across Nostr relays.
|
||||
|
||||
## Development Commands
|
||||
|
||||
```bash
|
||||
# Development
|
||||
pnpm run dev # Start dev server on port 1847
|
||||
pnpm run check # TypeScript checking
|
||||
pnpm run check:watch # Watch mode TypeScript checking
|
||||
|
||||
# Production
|
||||
pnpm run build # Custom build with env processing
|
||||
./build.sh # Main build script with PWA assets
|
||||
pnpm run sourcemaps # Build with sourcemap upload
|
||||
|
||||
# Code Quality
|
||||
pnpm run lint # ESLint + Prettier checking
|
||||
pnpm run format # Auto-format with Prettier
|
||||
|
||||
# Mobile
|
||||
pnpm run release:android # Android APK build
|
||||
npx cap sync # Sync web assets to native
|
||||
```
|
||||
|
||||
## Architecture
|
||||
|
||||
### Core Technology Stack
|
||||
- **SvelteKit 2.5 + Svelte 5** - Reactive UI framework with runes
|
||||
- **Welshman Libraries** - Comprehensive Nostr toolkit (@welshman/app, @welshman/net, @welshman/signer, etc.)
|
||||
- **TailwindCSS + DaisyUI** - Utility-first styling with component library
|
||||
- **Capacitor 7** - Cross-platform mobile deployment
|
||||
- **TypeScript** - Full type safety throughout
|
||||
|
||||
### Key Directories
|
||||
- `/src/app/state.ts` - Global state management, stores, derived values
|
||||
- `/src/app/components/` - 80+ feature-specific Svelte components
|
||||
- `/src/lib/components/` - Shared/generic UI components
|
||||
- `/src/routes/` - SvelteKit file-based routing with dynamic relay/room routes
|
||||
- `/src/app/commands.ts` - User actions and business logic
|
||||
- `/src/assets/icons/` - 60+ custom SVG icons
|
||||
|
||||
### State Management Patterns
|
||||
- Svelte stores with Welshman reactive patterns
|
||||
- Repository pattern for Nostr event storage with 10k event limit
|
||||
- Derived stores for computed values and real-time updates
|
||||
- Event-based architecture with reactive data flow
|
||||
|
||||
### Nostr Integration Architecture
|
||||
- **NIP-29 support** - Group chat functionality via relays
|
||||
- **NIP-46 support** - Remote signing (Nostr Connect/Bunker)
|
||||
- **Event unwrapping** - Handles gift-wrapped messages for privacy
|
||||
- **Real-time relay management** - Automatic connection and authentication
|
||||
- **Web of trust calculations** - User reputation and content filtering
|
||||
|
||||
### Mobile & PWA Features
|
||||
- Responsive navigation (drawer on mobile, sidebar on desktop)
|
||||
- Capacitor integration for native mobile apps
|
||||
- PWA with offline support and auto-updating
|
||||
- Safe area handling for iOS/Android
|
||||
|
||||
## Environment Configuration
|
||||
|
||||
All environment variables are optional and enable platform customization:
|
||||
|
||||
```bash
|
||||
# Branding
|
||||
VITE_PLATFORM_NAME="Custom Name"
|
||||
VITE_PLATFORM_LOGO="/custom-logo.png"
|
||||
VITE_PLATFORM_DESCRIPTION="Custom description"
|
||||
|
||||
# Platform Mode (single-relay instance)
|
||||
VITE_PLATFORM_RELAYS="wss://relay.example.com"
|
||||
|
||||
# Bootstrap and Discovery
|
||||
VITE_DEFAULT_PUBKEYS="npub1...,npub2..." # Web of trust seed
|
||||
VITE_INDEXER_RELAYS="wss://indexer1.com,wss://indexer2.com"
|
||||
|
||||
# Monitoring
|
||||
VITE_GLITCHTIP_API_KEY="..." # Error reporting
|
||||
```
|
||||
|
||||
The `build.sh` script processes these variables and generates theme files.
|
||||
|
||||
## Important Patterns
|
||||
|
||||
### Component Organization
|
||||
- Components are organized by feature (Chat, Calendar, Profile, Space)
|
||||
- Use existing components from `/lib/components/` before creating new ones
|
||||
- Follow the established naming convention (PascalCase, descriptive names)
|
||||
|
||||
### Routing Structure
|
||||
- Dynamic routes: `/spaces/[relay]/[room]` for relay-based navigation
|
||||
- All routes use the `+layout.svelte` for app shell and initialization
|
||||
- Route helpers in `/src/app/routes.ts` for URL generation
|
||||
|
||||
### Nostr Event Handling
|
||||
- Events flow through the repository pattern in `state.ts`
|
||||
- Use Welshman utilities for event validation and parsing
|
||||
- Handle both plain and gift-wrapped events for privacy
|
||||
|
||||
### Styling Conventions
|
||||
- TailwindCSS with DaisyUI components
|
||||
- Dark/light theme support via CSS custom properties
|
||||
- Responsive design with mobile-first approach
|
||||
- Custom color scheme configurable via environment variables
|
||||
- When styling html, prefer flex/gap classes over margin or space-y classes.
|
||||
|
||||
## Testing Notes
|
||||
This project does not include formal testing infrastructure. Code quality is maintained through TypeScript strict mode, ESLint, Prettier, and Svelte compiler validation.
|
||||
|
||||
## Performance Considerations
|
||||
- Event storage is limited to 10k events with ranking system
|
||||
- Components use lazy loading patterns
|
||||
- Large lists should implement virtualization
|
||||
- Image proxy optimization for external content
|
||||
@@ -1,7 +1,9 @@
|
||||
<script lang="ts">
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import ChannelName from "@app/components/ChannelName.svelte"
|
||||
import {makeChannelId, channelsById, deriveUserRooms} from "@app/state"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import ProfileCircle from "@app/components/ProfileCircle.svelte"
|
||||
import ProfileCircles from "@app/components/ProfileCircles.svelte"
|
||||
import {formatTimestamp} from "@welshman/lib"
|
||||
|
||||
interface Props {
|
||||
url: string
|
||||
@@ -9,34 +11,116 @@
|
||||
|
||||
const {url}: Props = $props()
|
||||
|
||||
const userRooms = deriveUserRooms(url)
|
||||
// Mock conversation data similar to Slack's threads view
|
||||
const mockConversations = [
|
||||
{
|
||||
id: "conv1",
|
||||
starter: {
|
||||
pubkey: "npub1xyz123",
|
||||
content:
|
||||
"What's everyone's thoughts on the new relay implementation? I'm seeing some interesting performance improvements...",
|
||||
timestamp: Date.now() - 3600000, // 1 hour ago
|
||||
},
|
||||
room: "general",
|
||||
replyCount: 12,
|
||||
lastActivity: Date.now() - 900000, // 15 minutes ago
|
||||
participants: ["npub1abc", "npub1def", "npub1ghi", "npub1jkl"],
|
||||
latestReply: {
|
||||
pubkey: "npub1abc",
|
||||
content: "The latency improvements are definitely noticeable in my tests",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "conv2",
|
||||
starter: {
|
||||
pubkey: "npub2abc456",
|
||||
content:
|
||||
"Has anyone tried the new calendar integration? Looking for feedback before we roll it out to more spaces",
|
||||
timestamp: Date.now() - 7200000, // 2 hours ago
|
||||
},
|
||||
room: "development",
|
||||
replyCount: 8,
|
||||
lastActivity: Date.now() - 1800000, // 30 minutes ago
|
||||
participants: ["npub2def", "npub2ghi", "npub2jkl"],
|
||||
latestReply: {
|
||||
pubkey: "npub2def",
|
||||
content: "Works great on mobile, had one small sync issue but figured it out",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "conv3",
|
||||
starter: {
|
||||
pubkey: "npub3def789",
|
||||
content:
|
||||
"Quick question about zap splitting - should we implement this at the relay level or client level?",
|
||||
timestamp: Date.now() - 10800000, // 3 hours ago
|
||||
},
|
||||
room: "random",
|
||||
replyCount: 5,
|
||||
lastActivity: Date.now() - 3600000, // 1 hour ago
|
||||
participants: ["npub3abc", "npub3ghi"],
|
||||
latestReply: {
|
||||
pubkey: "npub3abc",
|
||||
content: "I think client level makes more sense for privacy",
|
||||
},
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<div class="card2 bg-alt">
|
||||
<h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
|
||||
<Icon icon="chat-round" />
|
||||
Recent Activity
|
||||
</h3>
|
||||
<div class="flex flex-col gap-3">
|
||||
{#if $userRooms.length > 0}
|
||||
{#each $userRooms.slice(0, 3) as room (room)}
|
||||
{@const channel = $channelsById.get(makeChannelId(url, room))}
|
||||
<div class="flex items-center gap-3 rounded bg-base-100">
|
||||
<div class="flex items-center gap-2">
|
||||
{#if channel?.closed || channel?.private}
|
||||
<Icon icon="lock" size={4} />
|
||||
{:else}
|
||||
<Icon icon="hashtag" />
|
||||
<div class="flex flex-col gap-4">
|
||||
<h3 class="flex items-center gap-2 text-lg font-semibold">
|
||||
<Icon icon="chat-round" />
|
||||
Recent Conversations
|
||||
</h3>
|
||||
<div class="flex flex-col gap-4">
|
||||
{#each mockConversations as conversation (conversation.id)}
|
||||
<div class="card2 bg-alt">
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<ProfileCircle pubkey={conversation.starter.pubkey} size={10} />
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2 text-sm opacity-70">
|
||||
<span class="font-medium text-blue-400">#{conversation.room}</span>
|
||||
<span class="opacity-50">•</span>
|
||||
<span>{formatTimestamp(conversation.starter.timestamp)}</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<p class="text-base leading-relaxed">{conversation.starter.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-13 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="flex items-center gap-2 text-sm opacity-70">
|
||||
<Icon icon="alt-arrow-left" size={4} />
|
||||
{conversation.replyCount} replies
|
||||
</span>
|
||||
<div class="flex -space-x-2">
|
||||
<ProfileCircles pubkeys={conversation.participants} size={6} />
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-sm opacity-50">
|
||||
{formatTimestamp(conversation.lastActivity)}
|
||||
</span>
|
||||
</div>
|
||||
{#if conversation.latestReply}
|
||||
<div class="card2 bg-alt">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2 text-sm opacity-70">
|
||||
<ProfileCircle pubkey={conversation.latestReply.pubkey} size={5} />
|
||||
<span class="font-medium">Latest reply:</span>
|
||||
</div>
|
||||
<p class="text-sm leading-relaxed opacity-90">
|
||||
{conversation.latestReply.content}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<span class="font-medium">
|
||||
<ChannelName {url} {room} />
|
||||
</span>
|
||||
</div>
|
||||
<span class="ml-auto text-sm opacity-60">Active conversations</span>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<p class="text-sm opacity-60">No recent activity</p>
|
||||
{/if}
|
||||
<Button class="btn btn-primary btn-sm">View all conversations →</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user