Improve component logic and enhance user experience (#331)

Author: Starefossen

.gitignore

@@ -36,6 +36,10 @@ next-env.d.ts
 .sanity
 dist/
 
+# lint/format caches
+.eslintcache
+node_modules/.cache/prettier/.prettier-cache
+
 # backups
 *.tar.gz
 storybook-static/*

AGENTS.md

@@ -208,6 +208,7 @@ The project uses Chromatic for visual regression testing. PRs automatically trig
 - Prefer working code over lengthy examples.
 - Do not provide lengthy summaries.
 - Always run `pnpm run check` before committing changes.
+- A pre-commit hook runs `pnpm run check && pnpm run test` automatically. After cloning, run `pnpm exec simple-git-hooks` to activate it.
 
 ### Date and Time Handling
 

README.md

@@ -72,6 +72,32 @@ To run TypeScript type checking:
 pnpm run typecheck
 ```
 
+To run all checks at once (typecheck, lint, knip, format — runs in parallel):
+
+```bash
+pnpm run check
+```
+
+ESLint and Prettier use `--cache` flags so subsequent runs only process changed files. First run after a clean clone takes ~40s; warm runs take ~5s.
+
+## Git Hooks
+
+This project uses [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks) to run `pnpm run check` and `pnpm run test` before every commit.
+
+After cloning the repo and installing dependencies, activate the hooks:
+
+```bash
+pnpm exec simple-git-hooks
+```
+
+To skip the hook for a one-off commit:
+
+```bash
+SKIP_SIMPLE_GIT_HOOKS=1 git commit -m "wip"
+```
+
+If the hook configuration in `package.json` changes, re-run `pnpm exec simple-git-hooks` to update.
+
 ## Sanity
 
 Install the Sanity CLI:

examples/SponsorManagementExample.tsx

@@ -6,6 +6,7 @@
 'use client'
 
 import { api } from '@/lib/trpc/client'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
 import { useState } from 'react'
 import type { SponsorTierExisting, SponsorInput } from '@/lib/sponsor/types'
 
@@ -86,7 +87,7 @@ export function SponsorManagement() {
       {/* Loading State */}
       {loadingSponsors && (
         <div className="py-8 text-center">
-          <div className="mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
+          <LoadingSpinner color="blue" />
           <p className="mt-2 text-gray-600">Loading sponsors...</p>
         </div>
       )}

package.json

@@ -8,17 +8,17 @@
     "build": "next build",
     "build:clean": "rm -rf .next && pnpm run build",
     "start": "next start",
-    "check": "pnpm run typecheck && pnpm run lint && pnpm run knip && pnpm run format",
+    "check": "concurrently -n typecheck,lint,knip,format -c blue,green,yellow,magenta --kill-others-on-fail \"pnpm run typecheck\" \"pnpm run lint\" \"pnpm run knip\" \"pnpm run format\"",
     "knip": "knip",
     "knip:fix": "knip --fix",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
+    "lint": "eslint --cache .",
+    "lint:fix": "eslint --cache --fix .",
     "test": "jest --silent",
     "test:debug": "NODE_OPTIONS='--experimental-vm-modules' jest",
     "test:watch": "NODE_OPTIONS='--experimental-vm-modules' jest --watch",
     "test:badges": "jest --silent __tests__/lib/badge/",
-    "format:check": "prettier --check .",
-    "format": "prettier --write --list-different .",
+    "format:check": "prettier --cache --check .",
+    "format": "prettier --cache --write --list-different .",
     "typecheck": "tsc --noEmit",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -122,6 +122,7 @@
     "playwright": "^1.58.2",
     "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
+    "simple-git-hooks": "^2.13.1",
     "storybook": "^10.2.8",
     "ts-jest": "^29.4.6",
     "ts-node": "^10.9.2",
@@ -133,5 +134,8 @@
     "workerDirectory": [
       "public"
     ]
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm run check && pnpm run test"
   }
 }

pnpm-lock.yaml

@@ -5,12 +5,12 @@ import { getConferenceForCurrentDomain } from '@/lib/conference/sanity'
 import {
   ProposalDetail,
   ErrorDisplay,
-  BackToProposalsButton,
   ProposalReviewPanel,
   AdminActionBar,
   ProposalPublishedContent,
   AudienceFeedbackPanel,
 } from '@/components/admin'
+import { BackLink } from '@/components/BackButton'
 import { getAuthSession } from '@/lib/auth'
 import { getProposalVideoUrl } from '@/lib/proposal/video'
 
@@ -59,7 +59,9 @@ export default async function ProposalDetailPage({
           <div className="mx-auto max-w-4xl p-4 lg:p-0">
             <div className="mb-8">
               <div className="mb-4 flex items-center justify-between">
-                <BackToProposalsButton />
+                <BackLink fallbackUrl="/admin/proposals">
+                  Back to Proposals
+                </BackLink>
 
                 <div className="flex items-center space-x-3">
                   <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">

src/app/(admin)/admin/proposals/[id]/page.tsx

@@ -6,6 +6,7 @@ import {
   WorkshopRegistrationSettings,
   AdminPageHeader,
 } from '@/components/admin'
+import { StatusBadge } from '@/components/StatusBadge'
 import {
   CalendarIcon,
   GlobeAltIcon,
@@ -33,31 +34,6 @@ function isValidFormat(key: string): key is Format {
   return Object.values(Format).includes(key as Format)
 }
 
-function Badge({
-  children,
-  variant = 'default',
-}: {
-  children: React.ReactNode
-  variant?: 'default' | 'success' | 'warning' | 'error'
-}) {
-  const variants = {
-    default: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
-    success:
-      'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400',
-    warning:
-      'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400',
-    error: 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400',
-  }
-
-  return (
-    <span
-      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${variants[variant]}`}
-    >
-      {children}
-    </span>
-  )
-}
-
 function InfoCard({
   title,
   children,
@@ -147,7 +123,7 @@ function FieldRow({
                   : (item as NamedItem)?.title ||
                     (item as NamedItem)?.name ||
                     JSON.stringify(item)
-              return <Badge key={idx}>{displayText}</Badge>
+              return <StatusBadge key={idx} label={displayText} color="gray" />
             })}
           </div>
         ) : (
@@ -189,7 +165,7 @@ function FieldRow({
                 formatKey && isValidFormat(formatKey)
                   ? formats.get(formatKey) || formatKey
                   : formatKey || 'Unknown Format'
-              return <Badge key={idx}>{displayText}</Badge>
+              return <StatusBadge key={idx} label={displayText} color="gray" />
             })}
           </div>
         ) : (
@@ -422,9 +398,11 @@ export default async function AdminSettings() {
                     {tier.title}
                   </span>
                   <div className="flex items-center space-x-2">
-                    {tier.soldOut && <Badge variant="error">Sold Out</Badge>}
+                    {tier.soldOut && (
+                      <StatusBadge label="Sold Out" color="red" />
+                    )}
                     {tier.mostPopular && (
-                      <Badge variant="success">Popular</Badge>
+                      <StatusBadge label="Popular" color="green" />
                     )}
                   </div>
                 </div>

src/app/(admin)/admin/settings/page.tsx

@@ -9,6 +9,7 @@ import {
   HomeIcon,
 } from '@heroicons/react/24/outline'
 import Link from 'next/link'
+import { EmptyState } from '@/components/EmptyState'
 
 async function getTicketData(
   customerId: number,
@@ -302,15 +303,12 @@ export default async function CompaniesAdminPage() {
 
       <div>
         {companyBreakdown.length === 0 ? (
-          <div className="rounded-lg bg-white p-12 text-center shadow dark:bg-gray-900">
-            <BuildingOfficeIcon className="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
-            <h3 className="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
-              No companies found
-            </h3>
-            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-              No company information available in ticket orders.
-            </p>
-          </div>
+          <EmptyState
+            icon={BuildingOfficeIcon}
+            title="No companies found"
+            description="No company information available in ticket orders."
+            className="rounded-lg bg-white p-12 shadow dark:bg-gray-900"
+          />
         ) : (
           <div className="overflow-hidden rounded-lg bg-white shadow dark:bg-gray-900">
             <div className="overflow-x-auto">

src/app/(admin)/admin/tickets/companies/page.tsx

@@ -11,6 +11,7 @@ import {
   BuildingOfficeIcon,
 } from '@heroicons/react/24/outline'
 import Link from 'next/link'
+import { EmptyState } from '@/components/EmptyState'
 
 async function getTicketData(
   customerId: number,
@@ -91,15 +92,12 @@ export default async function OrdersAdminPage() {
         </div>
 
         {orders.length === 0 ? (
-          <div className="py-12 text-center">
-            <ShoppingBagIcon className="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
-            <h3 className="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
-              No orders found
-            </h3>
-            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-              No tickets have been sold for this event yet.
-            </p>
-          </div>
+          <EmptyState
+            icon={ShoppingBagIcon}
+            title="No orders found"
+            description="No tickets have been sold for this event yet."
+            className="py-12"
+          />
         ) : (
           <OrdersTableWithSearch
             orders={orders}