feat: add Ketch design system for Compose Multiplatform#136
feat: add Ketch design system for Compose Multiplatform#136
Conversation
Ports the design system from the Ketch.html design package into the shared module: theme tokens (colors, typography, shapes, spacing, elevation, motion) plus icon set and core components (Button, IconButton, TextField, Card, Badge, ProgressBar, SidebarItem, SegmentBar, SegmentDetail, SpeedChart, DownloadRow). Compiles for Android, JVM, iOS-Simulator-Arm64, and WasmJs.
💡 Codex ReviewKetch/app/shared/src/commonMain/kotlin/com/linroid/ketch/app/theme/Theme.kt Lines 151 to 152 in 050540f  Remove unsafe shape casts in Material shape mapping
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
Replaces Material 3 primitives across the shared UI with KetchButton, KetchIconButton, KetchSidebarItem, KetchProgressBar, KetchBadge, KetchCard, and KetchIconImage so screens render in the design system's visual language (3dp accent rail on selected sidebar items, monospaced mono-styled metadata, neutral-tinted icon buttons). Touched: AppShell, SidebarNavigation, SpeedStatusBar, BatchActionBar, DownloadList + DownloadListItem + ProgressSection + TaskActionButtons, PriorityBadge, StatusIndicator, AddRemoteServerDialog, AddDownloadDialog, AiDiscoverDialog, EmbeddedServerControls. Compiles clean for Android, JVM, iOS-Simulator-Arm64, and WasmJs.
Restructures the desktop shell to match the design exploration: - DownloadListItem: chip + name + thin progress + mono metric + status pill + contextual action, all on one 56dp row. Click expands. - DownloadExpandedPanel: per-segment progress (KetchSegmentDetail driven by DownloadTask.segments), 30-sample speed sparkline (KetchSpeedChart), and metadata grid (URL, priority, destination, error). - KetchToolbar: title + bandwidth readout (live MB/s with cap meter) + search hint pill (⌘K) + AI button + batch actions + primary Add Download. Wired in for expanded layouts; TopAppBar still used on compact/medium. - SidebarNavigation: Ketch wordmark header with macOS traffic-light insets + clickable connection pill (local/remote, hostname, status dot) → instance selector. New Task moves to the toolbar to mirror the design. - KetchFileTypeChip: small accent-tinted file-extension tile. Compiles clean for Android, JVM, iOS-Simulator-Arm64, WasmJs.
1 participant
Summary
app/shared.KetchThemecomposable that extends Material 3.KetchIconenum, ~28 glyphs,PathParser-rendered) and core components:KetchButton/KetchIconButton,KetchTextField,KetchCard,KetchBadge,KetchProgressBar,KetchSidebarItem, plus the signature download primitivesKetchSegmentBar,KetchSegmentDetail,KetchSpeedChart,KetchDownloadRow.Test plan
./gradlew :app:shared:compileKotlinJvm./gradlew :app:shared:compileKotlinIosSimulatorArm64./gradlew :app:shared:compileKotlinWasmJs./gradlew :app:shared:compileAndroidMain