refactor(ui): replaces corvu Drawer with Kobalte Dialog (#44)

* refactor(ui): replaces corvu Drawer with Kobalte Dialog

* fix(a11y): adds Dialog.Description and idiomatic test query

* fix(test): tightens NotificationDrawer assertions and adds coverage

Author: wgordon17

package.json

@@ -23,7 +23,6 @@
     "@octokit/plugin-throttling": "11.0.3",
     "@sentry/solid": "10.46.0",
     "@solidjs/router": "0.16.1",
-    "corvu": "0.7.2",
     "idb": "8.0.3",
     "solid-js": "1.9.11",
     "zod": "4.3.6"

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 import { createMemo, For, Show } from "solid-js";
-import Drawer from "corvu/drawer";
+import { Dialog } from "@kobalte/core/dialog";
 import {
   getNotifications,
   markAllAsRead,
@@ -25,15 +25,16 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
   }
 
   return (
-    <Drawer open={props.open} onOpenChange={(open) => !open && props.onClose()} side="right">
-      <Drawer.Portal>
-        <Drawer.Overlay class="fixed inset-0 bg-black/50 z-[70]" />
-        <Drawer.Content class="fixed top-0 right-0 h-full w-80 sm:w-96 bg-base-100 shadow-xl z-[71] flex flex-col">
+    <Dialog open={props.open} onOpenChange={(open) => !open && props.onClose()} modal>
+      <Dialog.Portal>
+        <Dialog.Overlay class="drawer-overlay fixed inset-0 bg-black/50 z-[70]" data-testid="notification-overlay" />
+        <Dialog.Content class="drawer-content fixed top-0 right-0 h-full w-80 sm:w-96 bg-base-100 shadow-xl z-[71] flex flex-col">
+          <Dialog.Description class="sr-only">Recent system notifications and errors</Dialog.Description>
           {/* Header */}
           <div class="flex items-center gap-2 px-4 py-3 border-b border-base-300 shrink-0">
-            <Drawer.Label class="text-lg font-semibold text-base-content flex-1">
+            <Dialog.Title class="text-lg font-semibold text-base-content flex-1">
               Notifications
-            </Drawer.Label>
+            </Dialog.Title>
             <button
               type="button"
               onClick={markAllAsRead}
@@ -48,7 +49,7 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
             >
               Dismiss all
             </button>
-            <Drawer.Close
+            <Dialog.CloseButton
               class="btn btn-ghost btn-sm btn-circle ml-1"
               aria-label="Close notifications"
             >
@@ -59,7 +60,7 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
                   clip-rule="evenodd"
                 />
               </svg>
-            </Drawer.Close>
+            </Dialog.CloseButton>
           </div>
 
           {/* Notification list */}
@@ -129,8 +130,8 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
               </ul>
             </Show>
           </div>
-        </Drawer.Content>
-      </Drawer.Portal>
-    </Drawer>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog>
   );
 }