init

2026-03-08 19:40:53 +09:00
commit 16bc00632d
67 changed files with 2476 additions and 0 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Support Tickets Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.2.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1"
+  }
+}
--- a/frontend/public/fonts/Geist.woff2
+++ b/frontend/public/fonts/Geist.woff2
--- a/frontend/public/fonts/OFL.txt
+++ b/frontend/public/fonts/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font.git)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
--- a/frontend/public/fonts/README.txt
+++ b/frontend/public/fonts/README.txt
@@ -0,0 +1,71 @@
+Geist Variable Font
+===================
+
+This download contains Geist as both a variable font and static fonts.
+
+Geist is a variable font with this axis:
+  wght
+
+This means all the styles are contained in a single file:
+  Geist-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Geist:
+  static/Geist-Thin.ttf
+  static/Geist-ExtraLight.ttf
+  static/Geist-Light.ttf
+  static/Geist-Regular.ttf
+  static/Geist-Medium.ttf
+  static/Geist-SemiBold.ttf
+  static/Geist-Bold.ttf
+  static/Geist-ExtraBold.ttf
+  static/Geist-Black.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.
--- a/frontend/public/fonts/static/Geist-Black.ttf
+++ b/frontend/public/fonts/static/Geist-Black.ttf
--- a/frontend/public/fonts/static/Geist-Bold.ttf
+++ b/frontend/public/fonts/static/Geist-Bold.ttf
--- a/frontend/public/fonts/static/Geist-ExtraBold.ttf
+++ b/frontend/public/fonts/static/Geist-ExtraBold.ttf
--- a/frontend/public/fonts/static/Geist-ExtraLight.ttf
+++ b/frontend/public/fonts/static/Geist-ExtraLight.ttf
--- a/frontend/public/fonts/static/Geist-Light.ttf
+++ b/frontend/public/fonts/static/Geist-Light.ttf
--- a/frontend/public/fonts/static/Geist-Medium.ttf
+++ b/frontend/public/fonts/static/Geist-Medium.ttf
--- a/frontend/public/fonts/static/Geist-Regular.ttf
+++ b/frontend/public/fonts/static/Geist-Regular.ttf
--- a/frontend/public/fonts/static/Geist-SemiBold.ttf
+++ b/frontend/public/fonts/static/Geist-SemiBold.ttf
--- a/frontend/public/fonts/static/Geist-Thin.ttf
+++ b/frontend/public/fonts/static/Geist-Thin.ttf
--- a/frontend/public/vite.svg
+++ b/frontend/public/vite.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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/frontend/src/App.tsx
+++ b/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} />
+}
--- a/frontend/src/assets/react.svg
+++ b/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>
--- a/frontend/src/components/icons/gitea.tsx
+++ b/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>
+);
--- a/frontend/src/components/icons/plus.tsx
+++ b/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>
+);
--- a/frontend/src/components/tickets/NewTicketForm.tsx
+++ b/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>
+  )
+}
--- a/frontend/src/components/tickets/TicketTable.tsx
+++ b/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>
+  )
+}
--- a/frontend/src/components/ui/Badge.tsx
+++ b/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>
+  )
+}
--- a/frontend/src/components/ui/Button.tsx
+++ b/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>
+  )
+}
--- a/frontend/src/components/ui/Layout.tsx
+++ b/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>
+  )
+}
--- a/frontend/src/components/ui/Modal.tsx
+++ b/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
+  )
+}
--- a/frontend/src/components/ui/Navbar.tsx
+++ b/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>
+    </>
+  )
+}
--- a/frontend/src/hooks/useModal.ts
+++ b/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),
+  }
+}
--- a/frontend/src/hooks/useStorageMode.ts
+++ b/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
+}
--- a/frontend/src/index.css
+++ b/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;
+}
--- a/frontend/src/lib/storage.ts
+++ b/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
+}
--- a/frontend/src/lib/types.ts
+++ b/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;
+}
--- a/frontend/src/main.tsx
+++ b/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>,
+)
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});
				`@@ -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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>