🧩 Frontend Components
This section documents the reusable UI components in LibreFolio, organized by functional area.
📚 Component Library
| Category | Components | Details |
|---|---|---|
| UI Base | ModalBase, ConfirmModal, Tooltip, ToastContainer, DateRangePicker, DataEditor, and more | Generic building blocks used by all composite components |
| DataTable | DataTable, Pagination, Toolbar, ColumnFilter, ModalBase, ConfirmModal | Advanced data grid with sorting, filtering, column management |
| Authentication | LoginCard, RegisterCard, ForgotPasswordCard, PasswordStrengthMeter | Card-style auth forms with validation |
| Settings | SettingsLayout, PreferencesTab, ProfileTab, GlobalSettingsTab, AboutTab | Two-column settings with categories |
| File Upload & Media | FileUploader, ImageCropper, ImageEditModal, FileEditModal, AssetPickerModal, LazyImage | Upload, crop, edit, and pick media files |
| Select & Dropdowns | BaseDropdown, SimpleSelect, SearchSelect, CurrencySearchSelect, FxProviderSelect, BrokerSearchSelect | Keyboard-navigable dropdowns with search |
| Brokers | BrokerCard, BrokerForm, BrokerIcon, BrokerModal, BrokerSharingModal, CashBalanceCard | Broker CRUD, sharing, cash management |
📏 Component Guidelines
- ModalBase: ALL modals extend
ModalBase.sveltewith configurable z-index - Svelte 5 Runes: Use
$state,$derived,$effect,$props - Event handling: Use
onclickinstead ofon:click(Svelte 5 syntax) - Styling: Tailwind CSS utilities + dark mode with
dark:prefix - Accessibility: Keyboard navigation, ARIA labels, focus management
- i18n: All user-facing text via
$t('key')translation function