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

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",