refactor: enforce shared Modal component (#100)

* refactor: enforce shared Modal component in remaining custom modals

- ShareSessionModal: replaced custom modal markup with <Modal>
- CreateCategoryModal: replaced custom modal markup with <Modal>
- EditCategoryModal: replaced custom modal markup with <Modal>
- All now get focus trapping, Escape close, body scroll lock for free

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: adopt shared Button component in 18 modal components

Replace raw <button> elements with <Button> from ui/Button.tsx:
- Primary buttons (bg-gradient-brand) → <Button variant="primary">
- Secondary buttons (border-border) → <Button variant="secondary">
- Ghost buttons → <Button variant="ghost">
- Loading states use loading prop instead of manual Loader2 spinner

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: adopt shared Button component in 20 page/component files

Replace raw <button> elements with <Button> across pages and remaining
components. 38 total files now use the shared Button component consistently.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/common/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import { Component, type ReactNode } from 'react'
-import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/Button'
 
 interface Props {
   children: ReactNode
@@ -45,15 +45,9 @@ export class ErrorBoundary extends Component<Props, State> {
                 {this.state.error.message}
               </pre>
             )}
-            <button
-              onClick={() => window.location.reload()}
-              className={cn(
-                'rounded-xl bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                'hover:opacity-90'
-              )}
-            >
+            <Button onClick={() => window.location.reload()}>
               Refresh Page
-            </button>
+            </Button>
           </div>
         </div>
       )

frontend/src/components/common/RouteError.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { useRouteError, isRouteErrorResponse, useNavigate } from 'react-router-dom'
-import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/Button'
 
 function isChunkLoadError(error: unknown): boolean {
   if (!(error instanceof Error)) return false
@@ -55,24 +55,12 @@ export function RouteError() {
           <p className="mb-4 text-muted-foreground">{errorDetails}</p>
         )}
         <div className="flex justify-center gap-4">
-          <button
-            onClick={() => navigate(-1)}
-            className={cn(
-              'rounded-xl border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-              'hover:bg-accent hover:text-foreground'
-            )}
-          >
+          <Button variant="secondary" onClick={() => navigate(-1)}>
             Go Back
-          </button>
-          <button
-            onClick={() => navigate('/trees')}
-            className={cn(
-              'rounded-xl bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-              'hover:opacity-90'
-            )}
-          >
+          </Button>
+          <Button onClick={() => navigate('/trees')}>
             Go Home
-          </button>
+          </Button>
         </div>
       </div>
     </div>