Conversation
Install carbon-components-svelte, carbon-icons-svelte, and carbon-preprocess-svelte. Configure CSS and import optimization. Set up automatic light/dark theme switching based on system preference. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace custom header and sidebar with Carbon Header, SideNav, and Content components. Use Breakpoint for responsive behavior (1056px). Sidebar now outputs SideNavLink/SideNavMenu items directly. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Convert TaskListView, TaskItem, TaskForm, AccountForm, DeleteListModal, SyncLogModal, AccountList, and SyncStatus to use Carbon components. Replace custom CSS with Carbon Checkbox, Tag, Button, Form, TextInput, DatePicker, Select, ComposedModal, DataTable, Tile, and InlineNotification. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add carbon-overrides.css for safe area insets, bottom sheet modals, and touch target improvements. Simplify app.css by removing old styles. Create ListFormModal for Carbon-idiomatic list management, replacing inline forms in Sidebar. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace inline task form on desktop with the same modal-based UX used on mobile. FAB button now appears on all screen sizes and opens a consistent modal dialog for adding/editing tasks. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR migrates the Potasko UI from custom CSS to Carbon Components Svelte, IBM's open-source design system.
Changes
Phase 1: Setup & Configuration
carbon-components-svelte,carbon-icons-svelte, andcarbon-preprocess-sveltedependenciesoptimizeCss()and Svelte withoptimizeImports()Phase 2: Component Migration (11 components)
+page.svelte→ Carbon Header, SideNav, Content, BreakpointSidebar.svelte→ SideNavLink, SideNavMenu, SideNavMenuItemTaskListView.svelte→ Accordion, AccordionItem, InlineLoadingTaskItem.svelte→ Checkbox, Tag, ButtonTaskForm.svelte→ Form, TextInput, TextArea, DatePicker, Select, ButtonSetAccountForm.svelte→ Form, TextInput, PasswordInput, InlineNotificationDeleteListModal.svelte→ ComposedModal, ModalHeader, ModalBody, ModalFooterSyncLogModal.svelte→ ComposedModal, DataTable, TagAccountList.svelte→ Tile, Button, InlineLoading, InlineNotificationSyncStatus.svelte→ Button, Tag, InlineLoadingPhase 3-6: Polish & Mobile Handling
carbon-overrides.cssfor safe area insets, bottom sheet modals, and touch targetsapp.cssby removing ~80 lines of now-unused custom CSSListFormModal.sveltefor Carbon-idiomatic list managementImpact
Remaining Work
Test plan
🤖 Generated with Claude Code