paper-crate — Copilot Instructions

This project is a Nostr client application built with React 18.x, TailwindCSS 3.x, Vite, shadcn/ui, and Nostrify.

• React 18.x: Stable version of React with hooks, concurrent rendering, and improved performance • TailwindCSS 3.x: Utility-first CSS framework for styling • Vite: Fast build tool and development server • shadcn/ui: Unstyled, accessible UI components built with Radix UI and Tailwind • Nostrify: Nostr protocol framework for Deno and web • React Router: For client-side routing with BrowserRouter and ScrollToTop functionality • TanStack Query: For data fetching, caching, and state management • TypeScript: For type-safe JavaScript development

• /src/components/: UI components including NostrProvider for Nostr integration • /src/components/ui/: shadcn/ui components (48+ components available) • /src/components/auth/: Authentication-related components (LoginArea, LoginDialog, etc.) • /src/hooks/: Custom hooks including: • useNostr: Core Nostr protocol integration • useAuthor: Fetch user profile data by pubkey • useCurrentUser: Get currently logged-in user • useNostrPublish: Publish events to Nostr • useUploadFile: Upload files via Blossom servers • useAppContext: Access global app configuration • useTheme: Theme management • useToast: Toast notifications • useLocalStorage: Persistent local storage • useLoggedInAccounts: Manage multiple accounts • useLoginActions: Authentication actions • useIsMobile: Responsive design helper • /src/pages/: Page components used by React Router (Index, NotFound) • /src/lib/: Utility functions and shared logic • /src/contexts/: React context providers (AppContext) • /src/test/: Testing utilities including TestApp component • /public/: Static assets • App.tsx: Main app component with provider setup • AppRouter.tsx: React Router configuration

The project uses shadcn/ui components located in @/components/ui. These are unstyled, accessible components built with Radix UI and styled with Tailwind CSS. Available components include: • Accordion: Vertically collapsing content panels • Alert: Displays important messages to users • AlertDialog: Modal dialog for critical actions requiring confirmation • AspectRatio: Maintains consistent width-to-height ratio • Avatar: User profile pictures with fallback support • Badge: Small status descriptors for UI elements • Breadcrumb: Navigation aid showing current location in hierarchy • Button: Customizable button with multiple variants and sizes • Calendar: Date picker component • Card: Container with header, content, and footer sections • Carousel: Slideshow for cycling through elements • Chart: Data visualization component • Checkbox: Selectable input element • Collapsible: Toggle for showing/hiding content • Command: Command palette for keyboard-first interfaces • ContextMenu: Right-click menu component • Dialog: Modal window overlay • Drawer: Side-sliding panel (using vaul) • DropdownMenu: Menu that appears from a trigger element • Form: Form validation and submission handling • HoverCard: Card that appears when hovering over an element • InputOTP: One-time password input field • Input: Text input field • Label: Accessible form labels • Menubar: Horizontal menu with dropdowns • NavigationMenu: Accessible navigation component • Pagination: Controls for navigating between pages • Popover: Floating content triggered by a button • Progress: Progress indicator • RadioGroup: Group of radio inputs • Resizable: Resizable panels and interfaces • ScrollArea: Scrollable container with custom scrollbars • Select: Dropdown selection component • Separator: Visual divider between content • Sheet: Side-anchored dialog component • Sidebar: Navigation sidebar component • Skeleton: Loading placeholder • Slider: Input for selecting a value from a range • Sonner: Toast notification manager • Switch: Toggle switch control • Table: Data table with headers and rows • Tabs: Tabbed interface component • Textarea: Multi-line text input • Toast: Toast notification component • ToggleGroup: Group of toggle buttons • Toggle: Two-state button • Tooltip: Informational text that appears on hover These components follow a consistent pattern using React's forwardRef and use the cn() utility for class name merging. Many are built on Radix UI primitives for accessibility and customized with Tailwind CSS.