add:planned feats

frontend/src/pages/UserPage.tsx

@@ -0,0 +1,65 @@
+import { useState, useEffect } from 'react'
+import { Modal } from '../components/ui/Modal.tsx'
+import { Button } from '../components/ui/Button.tsx'
+import { TicketTable } from '../components/tickets/TicketTable.tsx'
+import { NewTicketForm } from '../components/tickets/NewTicketForm.tsx'
+import { useModal } from '../hooks/useModal.ts'
+import { getStorage } from '../lib/storage.ts'
+import type { Ticket } from '../lib/types.ts'
+
+interface UserPageProps {
+  storageMode: 'local' | 'remote'
+}
+
+export function UserPage({ storageMode }: UserPageProps) {
+  const storage = getStorage(storageMode)
+  const [tickets, setTickets] = useState<Ticket[]>([])
+  const newTicketModal = useModal()
+
+  useEffect(() => {
+    const result = storage.getTickets()
+    if (result instanceof Promise) {
+      result.then(setTickets)
+    } else {
+      setTickets(result)
+    }
+  }, [storageMode])
+
+  const handleCreate = async (form: Pick<Ticket, 'subject' | 'description' | 'type'>) => {
+    const result = storage.createTicket(form)
+    const ticket = result instanceof Promise ? await result : result
+    setTickets(prev => [ticket, ...prev])
+    newTicketModal.close()
+  }
+
+  const handleDelete = async (id: string) => {
+    const result = storage.deleteTicket(id)
+    if (result instanceof Promise) await result
+    setTickets(prev => prev.filter(t => t.id !== id))
+  }
+
+  return (
+    <>
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-lg font-semibold text-fg-100">My Tickets</h1>
+          <p className="mt-0.5 text-sm text-fg-300">
+            {tickets.length} {tickets.length === 1 ? 'ticket' : 'tickets'}
+          </p>
+        </div>
+        <Button onClick={newTicketModal.open}>
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+            <path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+          </svg>
+          New Ticket
+        </Button>
+      </div>
+
+      <TicketTable tickets={tickets} onDelete={handleDelete} />
+
+      <Modal isOpen={newTicketModal.isOpen} onClose={newTicketModal.close} title="New Ticket">
+        <NewTicketForm onSubmit={handleCreate} />
+      </Modal>
+    </>
+  )
+}