init

frontend/src/App.tsx

@@ -0,0 +1,76 @@
+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 { useStorageMode } from './hooks/useStorageMode.ts'
+import { getStorage } from './lib/storage.ts'
+import type { Ticket } from './lib/types.ts'
+import { Layout } from './components/ui/Layout.tsx'
+import { PlusIcon } from './components/icons/plus.tsx'
+
+function TicketApp({ storageMode }: { storageMode: 'local' | 'remote' }) {
+  const storage = getStorage(storageMode)
+  const [tickets, setTickets] = useState<Ticket[]>([])
+  const newTicketModal = useModal()
+
+  // load tickets — handles both sync (local) and async (remote)
+  useEffect(() => {
+    const result = storage.getTickets()
+    if (result instanceof Promise) {
+      result.then(setTickets)
+    } else {
+      setTickets(result)
+    }
+  }, [storageMode])
+
+  const handleCreateTicket = 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 handleDeleteTicket = async (id: string) => {
+    const result = storage.deleteTicket(id)
+    if (result instanceof Promise) await result
+    setTickets(prev => prev.filter(t => t.id !== id))
+  }
+
+  return (
+    <Layout>
+      <div className="mb-8 flex items-center justify-between">
+        <div>
+          <h1 className="text-lg font-semibold text-fg-100">Support Tickets</h1>
+          <p className="mt-0.5 text-sm text-fg-300">
+            {tickets.length} {tickets.length === 1 ? 'ticket' : 'tickets'} total
+          </p>
+        </div>
+        <Button onClick={newTicketModal.open}>
+          <PlusIcon className="size-3" />
+          New Ticket
+        </Button>
+      </div>
+
+      <TicketTable tickets={tickets} onDelete={handleDeleteTicket} />
+
+      <Modal isOpen={newTicketModal.isOpen} onClose={newTicketModal.close} title="New Ticket">
+        <NewTicketForm onSubmit={handleCreateTicket} />
+      </Modal>
+    </Layout>
+  )
+}
+
+export default function App() {
+  const storageMode = useStorageMode()
+
+  if (storageMode === 'pending') {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p className="text-sm text-fg-300">Loading...</p>
+      </div>
+    )
+  }
+
+  return <TicketApp storageMode={storageMode} />
+}

frontend/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

frontend/src/components/icons/gitea.tsx

@@ -0,0 +1,9 @@
+import type { IconProps } from "../../lib/types.ts";
+
+export const GiteaIcon = ({ className }: IconProps) => (
+  <svg viewBox="0 0 32 32" fill="currentColor" className={className}>
+    <path
+      d="M16 0C7.163 0 0 7.163 0 16c0 8.836 7.163 16 16 16 8.836 0 16-7.163 16-16C32 7.163 24.837 0 16 0zm7.68 21.155a1.06 1.06 0 01-1.458.387l-4.514-2.607a1.842 1.842 0 01-.638.223v4.017a1.06 1.06 0 01-2.12 0v-4.017a1.842 1.842 0 01-1.3-1.787 1.843 1.843 0 011.842-1.842c.347 0 .671.097.948.264l4.418-2.551a1.06 1.06 0 011.457.387 1.06 1.06 0 01-.387 1.457l-4.418 2.551c.01.09.016.181.016.274 0 .093-.006.184-.016.274l4.514 2.607a1.06 1.06 0 01.387 1.457l-.731-.695zm-13.512-8.24a1.06 1.06 0 011.457-.387l4.418 2.551c.277-.167.601-.264.948-.264.347 0 .671.097.948.264l4.418-2.551a1.06 1.06 0 011.457.387 1.06 1.06 0 01-.387 1.457l-4.418 2.551c.01.09.016.181.016.274a1.843 1.843 0 01-1.842 1.842 1.843 1.843 0 01-1.842-1.842c0-.093.006-.184.016-.274l-4.418-2.551a1.06 1.06 0 01-.387-1.457h.616z"
+    ></path>
+  </svg>
+);

frontend/src/components/icons/plus.tsx

@@ -0,0 +1,7 @@
+import type { IconProps } from "../../lib/types.ts";
+
+export const PlusIcon = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 14 14" fill="none">
+    <path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+);

frontend/src/components/tickets/NewTicketForm.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react'
+import { Button } from '../ui/Button.tsx'
+import type { Ticket, TicketType } from '../../lib/types.ts'
+
+const TICKET_TYPES: { value: TicketType; label: string }[] = [
+  { value: 'bug',             label: 'Bug' },
+  { value: 'billing',         label: 'Billing' },
+  { value: 'account',         label: 'Account' },
+  { value: 'feature-request', label: 'Feature Request' },
+  { value: 'feedback',     label: 'Feedback' },
+  { value: 'other',           label: 'Other' },
+]
+
+const inputClass = `
+  w-full rounded-md border border-border-100 bg-bg-300 px-3 py-2 text-sm text-fg-100
+  placeholder:text-fg-300 outline-none transition-colors
+  focus:border-border-200 focus:ring-1 focus:ring-ring-100
+`
+
+type FormData = Pick<Ticket, 'subject' | 'description' | 'type'>
+
+interface NewTicketFormProps {
+  onSubmit: (data: FormData) => void
+}
+
+export function NewTicketForm({ onSubmit }: NewTicketFormProps) {
+  const [form, setForm] = useState<FormData>({ subject: '', description: '', type: 'other' })
+
+  const set = (field: keyof FormData) =>
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+      setForm(f => ({ ...f, [field]: e.target.value }))
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!form.subject.trim()) return
+    onSubmit(form)
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1.5">
+        <label className="text-xs font-medium text-fg-200">Subject</label>
+        <input
+          className={inputClass}
+          placeholder="Brief summary of the issue"
+          value={form.subject}
+          onChange={set('subject')}
+          autoFocus
+          required
+        />
+      </div>
+      <div className="flex flex-col gap-1.5">
+        <label className="text-xs font-medium text-fg-200">Description</label>
+        <textarea
+          className={`${inputClass} min-h-24 resize-y`}
+          placeholder="Describe the issue in detail..."
+          value={form.description}
+          onChange={set('description')}
+          rows={4}
+        />
+      </div>
+      <div className="flex justify-end gap-2 pt-1">
+        <Button type="submit">Create Ticket</Button>
+      </div>
+    </form>
+  )
+}

frontend/src/components/tickets/TicketTable.tsx

@@ -0,0 +1,57 @@
+import { Badge } from '../ui/Badge.tsx'
+import { Button } from '../ui/Button.tsx'
+import type { Ticket } from '../../lib/types.ts'
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString('en-US', {
+    month: 'short', day: 'numeric', year: 'numeric'
+  })
+}
+
+interface TicketTableProps {
+  tickets: Ticket[]
+  onDelete: (id: string) => void
+}
+
+export function TicketTable({ tickets, onDelete }: TicketTableProps) {
+  if (tickets.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center rounded-lg border border-border-100 bg-bg-200 py-16 text-center">
+        <p className="text-sm text-fg-300">No tickets yet.</p>
+        <p className="mt-1 text-xs text-fg-300">Create one to get started.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-border-100">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-border-100 bg-bg-200">
+            <th className="px-4 py-3 text-left text-xs font-medium text-fg-300 uppercase tracking-wider">Subject</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-fg-300 uppercase tracking-wider">Status</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-fg-300 uppercase tracking-wider">Created</th>
+            <th className="px-4 py-3" />
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-border-100 bg-bg-100">
+          {tickets.map((ticket) => (
+            <tr key={ticket.id} className="transition-colors hover:bg-bg-200">
+              <td className="px-4 py-3 text-fg-100">{ticket.subject}</td>
+              <td className="px-4 py-3"><Badge status={ticket.status} /></td>
+              <td className="px-4 py-3 text-xs text-fg-300">{formatDate(ticket.createdAt)}</td>
+              <td className="px-4 py-3 text-right">
+                <Button
+                  variant="danger"
+                  onClick={() => onDelete(ticket.id)}
+                >
+                  Delete
+                </Button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

frontend/src/components/ui/Badge.tsx

@@ -0,0 +1,23 @@
+import type { Ticket } from '../../lib/types.ts'
+
+const variants: Record<Ticket['status'], string> = {
+  'open':        'bg-blue-950/60 text-blue-400 border-blue-900/60',
+  'in-progress': 'bg-amber-950/60 text-amber-400 border-amber-900/60',
+  'resolved':    'bg-green-950/60 text-green-400 border-green-900/60',
+  'closed':      'bg-bg-300 text-fg-300 border-border-100',
+}
+
+interface BadgeProps {
+  status: Ticket['status']
+}
+
+export function Badge({ status }: BadgeProps) {
+  return (
+    <span className={`
+      inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium capitalize
+      ${variants[status]}
+    `}>
+      {status}
+    </span>
+  )
+}

frontend/src/components/ui/Button.tsx

@@ -0,0 +1,28 @@
+import type { ButtonHTMLAttributes } from 'react'
+
+type Variant = 'primary' | 'ghost' | 'danger'
+
+const variants: Record<Variant, string> = {
+  primary: 'bg-fg-100 text-bg-100 hover:bg-fg-200 font-medium',
+  ghost:   'text-fg-200 hover:bg-bg-300 hover:text-fg-100',
+  danger:  'bg-red-900/40 text-red-400 hover:bg-red-900/60',
+}
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant
+}
+
+export function Button({ children, variant = 'primary', className = '', ...props }: ButtonProps) {
+  return (
+    <button
+      className={`
+        inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm
+        transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed
+        ${variants[variant]} ${className}
+      `}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}

frontend/src/components/ui/Layout.tsx

@@ -0,0 +1,16 @@
+import { Navbar } from './Navbar.tsx'
+
+interface LayoutProps {
+  children: React.ReactNode
+}
+
+export function Layout({ children }: LayoutProps) {
+  return (
+    <div className="min-h-screen bg-bg-100">
+      <Navbar />
+      <main className="mx-auto max-w-4xl px-6 py-10">
+        {children}
+      </main>
+    </div>
+  )
+}

frontend/src/components/ui/Modal.tsx

@@ -0,0 +1,52 @@
+import { useEffect } from 'react'
+import { createPortal } from 'react-dom'
+
+interface ModalProps {
+  isOpen: boolean
+  onClose: () => void
+  title: string
+  children: React.ReactNode
+}
+
+export function Modal({ isOpen, onClose, title, children }: ModalProps) {
+  useEffect(() => {
+    if (!isOpen) return
+    const handler = (e: KeyboardEvent) => e.key === 'Escape' && onClose()
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [isOpen, onClose])
+
+  useEffect(() => {
+    document.body.style.overflow = isOpen ? 'hidden' : ''
+    return () => { document.body.style.overflow = '' }
+  }, [isOpen])
+
+  if (!isOpen) return null
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      aria-modal="true"
+      role="dialog"
+      aria-labelledby="modal-title"
+    >
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="relative z-10 w-full max-w-md rounded-lg border border-border-100 bg-bg-200 shadow-2xl">
+        <div className="flex items-center justify-between border-b border-border-100 px-5 py-4">
+          <h2 id="modal-title" className="text-sm font-semibold text-fg-100">{title}</h2>
+          <button
+            onClick={onClose}
+            className="rounded-md p-1 text-fg-300 transition-colors hover:bg-bg-300 hover:text-fg-100 cursor-pointer"
+            aria-label="Close"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+            </svg>
+          </button>
+        </div>
+        <div className="px-5 py-4">{children}</div>
+      </div>
+    </div>,
+    document.body
+  )
+}

frontend/src/components/ui/Navbar.tsx

@@ -0,0 +1,23 @@
+import { GiteaIcon } from "../icons/gitea";
+
+export function Navbar() {
+  return (
+    <>
+      <header className="sticky top-0 z-50 w-full border-b border-border-100 bg-bg-100/80 backdrop-blur-sm">
+        <div className="mx-auto flex h-12 max-w-4xl items-center justify-between px-6">
+          <a href="https://derrickgee.dev"
+            className="font-mono text-xs uppercase tracking-widest text-fg-200 transition-colors duration-150 hover:text-fg-100"
+          >
+              derrickgee.dev
+          </a>
+          <nav className="flex items-center gap-5">
+            <a href="https://git.kokopi.dev/kokopi/personal-support-ticket-system" className="text-xs text-fg-300 transition-colors duration-150 hover:text-fg-100">
+              <GiteaIcon className="size-4" />
+              gitea
+            </a>
+          </nav>
+        </div>
+      </header>
+    </>
+  )
+}

frontend/src/hooks/useModal.ts

@@ -0,0 +1,10 @@
+import { useState } from 'react'
+
+export function useModal() {
+  const [isOpen, setIsOpen] = useState(false)
+  return {
+    isOpen,
+    open: () => setIsOpen(true),
+    close: () => setIsOpen(false),
+  }
+}

frontend/src/hooks/useStorageMode.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react'
+import type { StorageMode } from '../lib/storage.ts'
+
+export type StorageResolution = StorageMode | 'pending'
+
+export function useStorageMode(): StorageResolution {
+  const [mode, setMode] = useState<StorageResolution>('pending')
+
+  useEffect(() => {
+    fetch('/api/storage-mode')
+      .then(res => res.json())
+      .then(data => setMode(data.storageMode as StorageMode))
+      .catch(() => setMode('local')) // fallback: backend unreachable → local
+  }, [])
+
+  return mode
+}

frontend/src/index.css

@@ -0,0 +1,41 @@
+@import "tailwindcss";
+@font-face {
+  font-family: "Geist";
+  font-style: normal;
+  font-weight: 100 900; /* Variable font supports full range */
+  font-display: swap;
+  src: url("/fonts/Geist.woff2") format("woff2");
+}
+
+@theme {
+  --font-sans: "Geist", system-ui, sans-serif;
+  --color-bg-100: oklch(0.09 0 0);
+  --color-bg-200: oklch(0.12 0 0);
+  --color-bg-300: oklch(0.15 0 0);
+  --color-bg-400: oklch(0.18 0 0);
+
+  --color-fg-100: oklch(0.92 0 0);
+  --color-fg-200: oklch(0.6 0 0);
+  --color-fg-300: oklch(0.4 0 0);
+
+  --color-border-100: oklch(1 0 0 / 9%);
+  --color-border-200: oklch(1 0 0 / 30%);
+
+  --color-ring-100: oklch(0.55 0 0);
+
+  --font-sans: "Inter", sans-serif;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--color-bg-100);
+  color: var(--color-fg-100);
+  font-family: var(--font-sans);
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+}

frontend/src/lib/storage.ts

@@ -0,0 +1,76 @@
+import type { Ticket } from './types.ts'
+
+export type StorageMode = 'local' | 'remote'
+
+// ─── Local (browser localStorage) ────────────────────────────
+
+const KEY = 'support_tickets'
+
+function load(): Ticket[] {
+  try {
+    return JSON.parse(localStorage.getItem(KEY) ?? '[]')
+  } catch {
+    return []
+  }
+}
+
+function save(tickets: Ticket[]): void {
+  localStorage.setItem(KEY, JSON.stringify(tickets))
+}
+
+const local = {
+  getTickets: (): Ticket[] => load(),
+
+  createTicket: (data: Pick<Ticket, 'subject' | 'description' | 'type'>): Ticket => {
+    const ticket: Ticket = {
+      id: crypto.randomUUID(),
+      subject: data.subject,
+      description: data.description,
+      status: 'open',
+      type: 'other',
+      createdAt: new Date().toISOString(),
+    }
+    save([ticket, ...load()])
+    return ticket
+  },
+
+  updateTicket: (id: string, patch: Partial<Ticket>): Ticket | null => {
+    const tickets = load().map(t => t.id === id ? { ...t, ...patch } : t)
+    save(tickets)
+    return tickets.find(t => t.id === id) ?? null
+  },
+
+  deleteTicket: (id: string): void => {
+    save(load().filter(t => t.id !== id))
+  },
+}
+
+// ─── Remote (backend API) ─────────────────────────────────────
+
+const remote = {
+  getTickets: (): Promise<Ticket[]> =>
+    fetch('/api/tickets').then(r => r.json()),
+
+  createTicket: (data: Pick<Ticket, 'subject' | 'description' | 'type'>): Promise<Ticket> =>
+    fetch('/api/tickets', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    }).then(r => r.json()),
+
+  updateTicket: (id: string, patch: Partial<Ticket>): Promise<Ticket> =>
+    fetch(`/api/tickets/${id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(patch),
+    }).then(r => r.json()),
+
+  deleteTicket: (id: string): Promise<void> =>
+    fetch(`/api/tickets/${id}`, { method: 'DELETE' }).then(() => undefined),
+}
+
+// ─── Resolver ─────────────────────────────────────────────────
+
+export function getStorage(mode: StorageMode) {
+  return mode === 'remote' ? remote : local
+}

frontend/src/lib/types.ts

@@ -0,0 +1,20 @@
+export type TicketType =
+  | "bug"
+  | "billing"
+  | "account"
+  | "feature-request"
+  | "feedback"
+  | "other";
+
+export interface Ticket {
+  id: string;
+  subject: string;
+  description: string;
+  type: TicketType;
+  status: "open" | "in-progress" | "resolved" | "closed";
+  createdAt: string;
+}
+
+export interface IconProps {
+  className?: string;
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)