Phase 4: power UX (palette, shortcuts, mentions, mobile, PWA)

Command palette (cmd+K) with fuzzy nav, ticket search, people lookup
and action entries (new ticket, logout, show shortcuts). Opens from
keyboard or user dropdown.

Global keyboard shortcuts via a small useShortcut/useLeaderShortcut
hook: `?` help overlay, `c` new ticket, `g d|t|m|n|s` leader nav.
Tickets list: j/k cursor, Enter open, x toggle select. TicketDetail:
`e` edit, `r` focus comment composer. All guarded against firing
inside text fields.

@mention autocomplete in the comment composer (MentionTextarea) with
arrow-key nav and Tab/Enter insert. Rendered comments and audit log
rewrite @username tokens to links pointing at that user's assignee
filter; unknown usernames left as plain text.

Mobile sweep: TicketDetail sidebar stacks below content on <md,
Settings profile grid collapses to one column, admin tables get
horizontal scroll with a 640px min width, CTI 3-column grid stacks
vertically on <md, New ticket severity/assignee grid same.

PWA: manifest.webmanifest, SVG icon, minimal network-first service
worker for the app shell (never caches /api/*), registered in
production builds only. Theme-color meta + manifest link in index.

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

This commit is contained in:

Josh Wright

2026-04-18 16:36:28 -04:00

parent 4bade22410

commit ef22e92ac8

21 changed files with 976 additions and 28 deletions

									
										client/index.html
									
		+4
		
												View File
												
				@@ -3,6 +3,10 @@

				  <head>

				    <meta charset="UTF-8" />

				    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

				    <meta name="theme-color" content="#2563eb" />

				    <link rel="manifest" href="/manifest.webmanifest" />

				    <link rel="icon" type="image/svg+xml" href="/icon.svg" />

				    <link rel="apple-touch-icon" href="/icon.svg" />

				    <title>Ticketing System</title>

				  </head>

				  <body>