(SP: 1) [Shop UI] Improve semantics + styles across shop; add admin h…

.hintrc

@@ -8,6 +8,13 @@
       {
         "aria-valid-attr-value": "off"
       }
-    ]
+    ],
+    "axe/structure": [
+      "default",
+      {
+        "list": "off"
+      }
+    ],
+    "no-inline-styles": "off"
   }
 }

frontend/.env.example

@@ -1,40 +1,68 @@
+# --- Core / Environment
+APP_ENV=
+APP_URL=
+NEXT_PUBLIC_SITE_URL=
+
+# --- Database
 DATABASE_URL=
+
+# --- Auth (app)
 AUTH_SECRET=
 
-CLOUDINARY_CLOUD_NAME=
+# --- OAuth: Google
+GOOGLE_CLIENT_ID_DEVELOP=
+GOOGLE_CLIENT_ID_LOCAL=
+GOOGLE_CLIENT_ID_PROD=
+GOOGLE_CLIENT_REDIRECT_URI_DEVELOP=
+GOOGLE_CLIENT_REDIRECT_URI_LOCAL=
+GOOGLE_CLIENT_REDIRECT_URI_PROD=
+GOOGLE_CLIENT_SECRET_DEVELOP=
+GOOGLE_CLIENT_SECRET_LOCAL=
+GOOGLE_CLIENT_SECRET_PROD=
+
+# --- OAuth: GitHub
+GITHUB_CLIENT_ID_DEVELOP=
+GITHUB_CLIENT_ID_LOCAL=
+GITHUB_CLIENT_ID_PROD=
+GITHUB_CLIENT_REDIRECT_URI_DEVELOP=
+GITHUB_CLIENT_REDIRECT_URI_LOCAL=
+GITHUB_CLIENT_REDIRECT_URI_PROD=
+GITHUB_CLIENT_SECRET_DEVELOP=
+GITHUB_CLIENT_SECRET_LOCAL=
+GITHUB_CLIENT_SECRET_PROD=
+
+# --- Cloudinary
 CLOUDINARY_API_KEY=
 CLOUDINARY_API_SECRET=
+CLOUDINARY_CLOUD_NAME=
 CLOUDINARY_UPLOAD_FOLDER=
-
 CLOUDINARY_URL=
-ENABLE_ADMIN_API=
 
+# --- Payments (Stripe)
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
 PAYMENTS_ENABLED=
-NEXT_PUBLIC_PAYMENTS_ENABLED=
+# Options: test, live (defaults to test in development, live in production)
+STRIPE_MODE=
 STRIPE_SECRET_KEY=
 STRIPE_WEBHOOK_SECRET=
 
-STRIPE_MODE=
-NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
+# --- Admin / Internal ops
+ENABLE_ADMIN_API=
+INTERNAL_JANITOR_MIN_INTERVAL_SECONDS=
+INTERNAL_JANITOR_SECRET=
+JANITOR_URL=
 
-NEXT_PUBLIC_SITE_URL=
-NEXT_PUBLIC_SITE_URL=
+# --- Quiz
+QUIZ_ENCRYPTION_KEY=
 
+# --- Telegram
 TELEGRAM_BOT_TOKEN=
 TELEGRAM_CHAT_ID=
 
-GOOGLE_CLIENT_ID=
-GOOGLE_CLIENT_SECRET=
-GOOGLE_CLIENT_REDIRECT_URI_LOCAL=
-GOOGLE_CLIENT_REDIRECT_URI_DEVELOP=
-GOOGLE_CLIENT_REDIRECT_URI_PROD=
-
-GITHUB_CLIENT_ID_DEVELOP=
-GITHUB_CLIENT_SECRET_DEVELOP=
-GITHUB_CLIENT_REDIRECT_URI_DEVELOP=
-
-APP_ENV=
+# --- Email (Gmail SMTP)
+EMAIL_FROM=
+GMAIL_APP_PASSWORD=
+GMAIL_USER=
 
-INTERNAL_JANITOR_SECRET=
-INTERNAL_JANITOR_MIN_INTERVAL_SECONDS=60
-JANITOR_URL=
+# --- Security
+CSRF_SECRET=

frontend/app/[locale]/layout.tsx

@@ -31,7 +31,15 @@ export default async function LocaleLayout({
   const user = await getCurrentUser();
 
   const userExists = Boolean(user);
-  const showAdminNavLink = process.env.NEXT_PUBLIC_ENABLE_ADMIN === 'true';
+  const enableAdmin =
+    (
+      process.env.ENABLE_ADMIN_API ??
+      process.env.NEXT_PUBLIC_ENABLE_ADMIN ??
+      ''
+    ).toLowerCase() === 'true';
+
+  const isAdmin = user?.role === 'admin';
+  const showAdminNavLink = Boolean(user) && isAdmin && enableAdmin;
 
   return (
     <NextIntlClientProvider messages={messages}>

frontend/app/[locale]/shop/admin/orders/[id]/RefundButton.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import { useState, useTransition } from 'react';
+import { useId, useState, useTransition } from 'react';
 
 type Props = {
   orderId: string;
@@ -12,6 +12,7 @@ export function RefundButton({ orderId, disabled }: Props) {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const [error, setError] = useState<string | null>(null);
+  const errorId = useId();
 
   async function onRefund() {
     setError(null);
@@ -47,12 +48,16 @@ export function RefundButton({ orderId, disabled }: Props) {
     });
   }
 
+  const isDisabled = disabled || isPending;
+
   return (
     <div className="flex items-center gap-2">
       <button
         type="button"
         onClick={onRefund}
-        disabled={disabled || isPending}
+        disabled={isDisabled}
+        aria-busy={isPending}
+        aria-describedby={error ? errorId : undefined}
         className="rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50"
         title={
           disabled
@@ -63,7 +68,11 @@ export function RefundButton({ orderId, disabled }: Props) {
         {isPending ? 'Refunding…' : 'Refund'}
       </button>
 
-      {error ? <span className="text-xs text-destructive">{error}</span> : null}
+      {error ? (
+        <span id={errorId} role="alert" className="text-xs text-destructive">
+          {error}
+        </span>
+      ) : null}
     </div>
   );
 }