feat(ui): migrates to daisyUI + Kobalte with visual/UX improvements (#15)

* feat(actions): redesigns to workflow summary cards with failure emphasis

* feat(shared): adds SortDropdown component for toolbar sort controls

* feat(dashboard): constrains content area to max-w-6xl for readability

* feat(issues): collapse-with-summary repo groups and sort dropdown

* feat(pull-requests): collapse-with-summary repo groups and sort dropdown

* fix(dashboard): address review findings for a11y and consistency

* fix(dashboard): removes double px-4 padding and aligns ActionsTab summary

* style: adds dark-mode scrollbar colors

* fix(layout): cleanup padding and alignment

* feat(ui): installs daisyUI and Kobalte, configures theme infrastructure

* feat(settings): refactors settings page with daisyUI, theme picker, and extracted components

* feat(layout): migrate header, tabs, filter bar to daisyUI

* feat(shared): migrates display components to daisyUI styling

* feat(onboarding): migrate onboarding and login pages to daisyUI

* feat(shared): migrates interactive components to Kobalte Select and daisyUI

* feat(notifications): migrate toast and drawer to Kobalte and corvu

* feat(dashboard): migrates row components and popover to daisyUI and Kobalte

* feat(dashboard): migrates dashboard pages and tabs to daisyUI tokens

* chore(ui): removes legacy dark mode system and unused components

* fix(ui): addresses review findings for semantic color consistency

* fix(ui): improves daisyUI visual integration with proper component styling

* fix(ui): adds visual depth with shadows and borders

* fix(test): updates Header rate limit tests for daisyUI class tokens

* refactor(ui): moves rate limit from header to footer

* feat(theme): adds auto system detection, reorders theme picker

* refactor(ui): moves rate limit to footer with daisyUI tooltip

* fix(e2e): updates tests for Kobalte Tabs and ThemePicker buttons

* fix(settings): links org access to authorized apps page

* feat(ui): adds slow pulse animation for in-progress status dot

* feat(ui): adds merge conflict detection and visible badge

* feat(ui): shows conflict badge in collapsed repo summary

* feat(ui): links status dot to checks tab, +/- to files tab

* fix: maps all mergeStateStatus values, restores per-app org URL

* feat(dashboard): auto-syncs orgs on dashboard load

* feat(dashboard): auto-discovers repos for newly synced orgs

* fix(dashboard): auto-syncs orgs only, not repos

* fix(api): stops mapping BLOCKED mergeStateStatus as conflict

* chore: adds debug logging to notification dispatch

Author: wgordon17

e2e/settings.spec.ts

@@ -87,18 +87,18 @@ test("back link navigates to dashboard", async ({ page }) => {
 
 // ── Theme change ─────────────────────────────────────────────────────────────
 
-test("changing theme to dark adds dark class to html element", async ({
+test("changing theme to dark applies data-theme attribute", async ({
   page,
 }) => {
   await setupAuth(page);
   await page.goto("/settings");
 
-  // Locate the Theme setting row by its label text, then find its <select> child.
-  const themeSelect = page.getByRole("combobox").filter({ has: page.locator('option[value="dark"]') });
-  await themeSelect.selectOption("dark");
+  // ThemePicker uses buttons with aria-label "Theme: <name>"
+  const darkBtn = page.getByRole("button", { name: "Theme: dark" });
+  await darkBtn.click();
 
   const htmlElement = page.locator("html");
-  await expect(htmlElement).toHaveClass(/dark/);
+  await expect(htmlElement).toHaveAttribute("data-theme", "dark");
 });
 
 // ── Sign out ─────────────────────────────────────────────────────────────────

e2e/smoke.spec.ts

@@ -134,35 +134,35 @@ test("dashboard loads with tab bar visible", async ({ page }) => {
   await setupAuth(page);
   await page.goto("/dashboard");
 
-  const nav = page.getByRole("navigation", { name: /dashboard tabs/i });
-  await expect(nav).toBeVisible();
+  const tablist = page.getByRole("tablist");
+  await expect(tablist).toBeVisible();
 
-  await expect(page.getByRole("button", { name: /^issues/i })).toBeVisible();
+  await expect(page.getByRole("tab", { name: /^issues/i })).toBeVisible();
   await expect(
-    page.getByRole("button", { name: /^pull requests/i })
+    page.getByRole("tab", { name: /^pull requests/i })
   ).toBeVisible();
-  await expect(page.getByRole("button", { name: /^actions/i })).toBeVisible();
+  await expect(page.getByRole("tab", { name: /^actions/i })).toBeVisible();
 });
 
 test("switching tabs changes active tab indicator", async ({ page }) => {
   await setupAuth(page);
   await page.goto("/dashboard");
 
-  const issuesBtn = page.getByRole("button", { name: /^issues/i });
-  const prBtn = page.getByRole("button", { name: /^pull requests/i });
-  const actionsBtn = page.getByRole("button", { name: /^actions/i });
+  const issuesTab = page.getByRole("tab", { name: /^issues/i });
+  const prTab = page.getByRole("tab", { name: /^pull requests/i });
+  const actionsTab = page.getByRole("tab", { name: /^actions/i });
 
   // Default tab should be issues (or whatever config says; we didn't set defaultTab)
-  await expect(issuesBtn).toBeVisible();
+  await expect(issuesTab).toBeVisible();
 
   // Click Pull Requests tab
-  await prBtn.click();
-  await expect(prBtn).toHaveAttribute("aria-current", "page");
-  await expect(issuesBtn).not.toHaveAttribute("aria-current", "page");
+  await prTab.click();
+  await expect(prTab).toHaveAttribute("aria-selected", "true");
+  await expect(issuesTab).not.toHaveAttribute("aria-selected", "true");
 
   // Click Actions tab
-  await actionsBtn.click();
-  await expect(actionsBtn).toHaveAttribute("aria-current", "page");
+  await actionsTab.click();
+  await expect(actionsTab).toHaveAttribute("aria-selected", "true");
 });
 
 test("dashboard shows empty state with no data", async ({ page }) => {
@@ -171,8 +171,8 @@ test("dashboard shows empty state with no data", async ({ page }) => {
 
   // With empty mocked responses the dashboard should not show a loading spinner
   // indefinitely — wait for the tab bar to appear then confirm no data rows
-  const nav = page.getByRole("navigation", { name: /dashboard tabs/i });
-  await expect(nav).toBeVisible();
+  const tablist = page.getByRole("tablist");
+  await expect(tablist).toBeVisible();
 
   // The issues tab content area should render (even if empty)
   await expect(page.getByRole("main")).toBeVisible();

package.json

@@ -15,11 +15,13 @@
     "test:e2e": "E2E_PORT=$(node -e \"const s=require('net').createServer();s.listen(0,()=>{console.log(s.address().port);s.close()})\") playwright test"
   },
   "dependencies": {
+    "@kobalte/core": "^0.13.11",
     "@octokit/core": "^7.0.6",
     "@octokit/plugin-paginate-rest": "^14.0.0",
     "@octokit/plugin-retry": "^8.1.0",
     "@octokit/plugin-throttling": "^11.0.3",
     "@solidjs/router": "^0.16.1",
+    "corvu": "^0.7.2",
     "idb": "^8.0.3",
     "solid-js": "^1.9.11",
     "zod": "^4.3.6"
@@ -31,6 +33,7 @@
     "@solidjs/testing-library": "^0.8.10",
     "@tailwindcss/vite": "^4.2.2",
     "@testing-library/user-event": "^14.6.1",
+    "daisyui": "^5.5.19",
     "fake-indexeddb": "^6.2.5",
     "happy-dom": "^20.8.4",
     "tailwindcss": "^4.2.2",