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/pages/TreeNavigationPage.tsx

@@ -21,6 +21,7 @@ import { StepFeedback } from '@/components/session/StepFeedback'
 import { buildSessionShareUrl, getLatestActiveShareForSession } from '@/lib/sessionShare'
 import { CopilotPanel } from '@/components/copilot/CopilotPanel'
 import { CopilotToggle } from '@/components/copilot/CopilotToggle'
+import { Button } from '@/components/ui/Button'
 
 interface LocationState {
   sessionId?: string
@@ -601,15 +602,9 @@ export function TreeNavigationPage() {
             />
           </div>
 
-          <button
-            onClick={startSession}
-            className={cn(
-              'w-full rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-              'hover:opacity-90'
-            )}
-          >
+          <Button onClick={startSession} className="w-full">
             Start Troubleshooting
-          </button>
+          </Button>
         </div>
       </div>
     )
@@ -940,17 +935,14 @@ export function TreeNavigationPage() {
               const targetLabel = targetNode?.question || targetNode?.title || 'next step'
               return (
                 <div className="mt-6 border-t border-primary/30 pt-4">
-                  <button
-                    type="button"
+                  <Button
                     onClick={handleCustomContinueToDescendant}
-                    className={cn(
-                      'flex w-full items-center justify-between rounded-md bg-gradient-brand px-4 py-3 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                      'hover:opacity-90'
-                    )}
+                    className="w-full justify-between"
+                    size="lg"
                   >
                     <span>Continue to: {targetLabel.length > 50 ? `${targetLabel.slice(0, 50)}...` : targetLabel}</span>
                     <ArrowRight className="h-4 w-4 shrink-0" />
-                  </button>
+                  </Button>
                 </div>
               )
             })()}
@@ -1063,15 +1055,9 @@ export function TreeNavigationPage() {
               </p>
             )}
             {currentNode.next_node_id && (
-              <button
-                onClick={() => handleContinue()}
-                className={cn(
-                  'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                  'hover:opacity-90'
-                )}
-              >
+              <Button onClick={() => handleContinue()}>
                 Continue
-              </button>
+              </Button>
             )}
           </>
         )}