Something went wrong. Try again.
A local-first note taking app
Something went wrong. Try again.
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296/** * Shared SVG icons used across the app. * * All icons accept `className` for sizing/coloring via Tailwind and use * `currentColor` for stroke so they inherit the parent's text color. */
type IconProps = { className?: string };
/** Generic document icon (lucide file). */export function DocFileIcon({ className }: IconProps) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" /> <path d="M14 2v6h6" /> </svg> );}
/** Document with pencil (lucide-style), for "new document" actions. */export function NewDocumentIcon({ className }: IconProps) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5Z" /> <polyline points="14 2 14 8 20 8" /> <polygon points="14,11 16,13 12,17 9,18 10,15" /> <line x1="14.5" y1="14.5" x2="12.5" y2="12.5" /> </svg> );}
/** Plus icon for "add" actions. */export function PlusIcon({ className }: IconProps) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <path d="M12 5v14M5 12h14" /> </svg> );}
/** X icon for "remove" / "close" actions. */export function XIcon({ className }: IconProps) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <path d="M18 6 6 18M6 6l12 12" /> </svg> );}
/** Search / magnifying-glass icon. */export function SearchIcon({ className }: IconProps) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <circle cx="11" cy="11" r="8" /> <path d="m21 21-4.3-4.3" /> </svg> );}
/** Two stacked chevrons: up above down. Used for source/directory selectors. */export function StackedChevronsIcon({ className }: IconProps) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <path d="m8 10 4-4 4 4" /> <path d="m8 15 4 4 4-4" /> </svg> );}
/** Cloud icon for synced / Habitat-backed vaults. */export function CloudIcon({ className }: IconProps) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" /> </svg> );}
/** Cloud with a download arrow: a remote vault not yet synced locally. */export function CloudDownloadIcon({ className }: IconProps) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <path d="M12 13v8" /> <path d="m8 17 4 4 4-4" /> <path d="M4.5 14.5A4.5 4.5 0 0 1 6 6a6 6 0 0 1 11.33 1.5A4.5 4.5 0 0 1 18 16" /> </svg> );}
/** Laptop icon for local-only vaults. */export function LaptopIcon({ className }: IconProps) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <rect width="18" height="12" x="3" y="4" rx="2" ry="2" /> <line x1="2" x2="22" y1="20" y2="20" /> </svg> );}
/** Info circle icon for tooltips and hints. */export function InfoIcon({ className }: IconProps) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <circle cx="12" cy="12" r="10" /> <path d="M12 16v-4" /> <path d="M12 8h.01" /> </svg> );}
/** Folder with plus icon for creating new directories. */export function NewDirectoryIcon({ className }: IconProps) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" /> <line x1="12" y1="11" x2="12" y2="17" /> <line x1="9" y1="14" x2="15" y2="14" /> </svg> );}
/** Split the pane to the right: a frame divided by a vertical line. */export function SplitRightIcon({ className }: IconProps) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <rect x="3" y="4" width="18" height="16" rx="2" /> <line x1="12" y1="4" x2="12" y2="20" /> </svg> );}
/** Split the pane downward: a frame divided by a horizontal line. */export function SplitDownIcon({ className }: IconProps) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <rect x="3" y="4" width="18" height="16" rx="2" /> <line x1="3" y1="12" x2="21" y2="12" /> </svg> );}
/** Pencil on a square (lucide square-pen), for "Edit mode". */export function EditIcon({ className }: IconProps) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /> <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" /> </svg> );}
/** Eye (lucide eye), for "View mode". */export function ViewIcon({ className }: IconProps) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" /> <circle cx="12" cy="12" r="3" /> </svg> );}