feat: rewrite all dashboard views with editorial design

Translate page: editorial dropzone (rounded-[40px]), config panel,
progress stepper, download button, Momento promo banner.
Profile page: pill tabs, dark subscription card, usage bars, language grid.
Context page: preset grid (rounded-[32px]), instruction/glossary textareas.
API keys page: editorial-card with production key display.
Glossaries page: editorial-card grid with hover lift.
Pricing page: 5-column grid, colored headers, plan badges.

All pages use editorial design system: accent-pill, editorial-card,
premium-button, brand colors, dark mode support.

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

frontend/src/app/dashboard/glossaries/page.tsx

@@ -1,12 +1,9 @@
 'use client';
 
 import { useState } from 'react';
-import { BookText, Plus } from 'lucide-react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
+import { BookText, Plus, Library, Calendar, Hash } from 'lucide-react';
 import { useUser } from '@/app/dashboard/useUser';
-import { useI18n } from '@/lib/i18n';
+import { useI18n, formatDate } from '@/lib/i18n';
 import { useGlossaries, useGlossary } from './useGlossaries';
 import type { Glossary, GlossaryTermInput, GlossaryListItem } from './types';
 import { ProUpgradePrompt } from './ProUpgradePrompt';
@@ -15,6 +12,7 @@ import { CreateGlossaryDialog } from './CreateGlossaryDialog';
 import { EditGlossaryDialog } from './EditGlossaryDialog';
 import { DeleteGlossaryDialog } from './DeleteGlossaryDialog';
 import { useToast } from '@/components/ui/toast';
+import { cn } from '@/lib/utils';
 
 export default function GlossariesPage() {
   const { t } = useI18n();
@@ -141,8 +139,8 @@ export default function GlossariesPage() {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
         <div className="text-center space-y-4">
-          <div className="animate-spin rounded-full h-8 w-8 border-4 border-muted border-t-foreground mx-auto"></div>
-          <p className="text-sm text-muted-foreground">Loading...</p>
+          <div className="animate-spin rounded-full h-8 w-8 border-4 border-brand-muted border-t-brand-accent mx-auto"></div>
+          <p className="text-[9px] font-black text-brand-dark/40 dark:text-white/40 uppercase tracking-widest">Loading...</p>
         </div>
       </div>
     );
@@ -153,77 +151,93 @@ export default function GlossariesPage() {
   }
 
   return (
-    <div className="space-y-6 p-6">
-      <div>
-        <h1 className="text-2xl font-semibold tracking-tight">{t('glossaries.title')}</h1>
-        <p className="text-muted-foreground">{t('glossaries.description')}</p>
+    <div className="max-w-6xl mx-auto w-full p-6 lg:p-8">
+      {/* ── Editorial Header ───────────────────────────────────── */}
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end mb-12 gap-6">
+        <div>
+          <span className="accent-pill mb-4 block w-fit">{t('glossaries.yourGlossaries')}</span>
+          <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark dark:text-white">
+            {t('glossaries.title')}
+          </h1>
+          <p className="text-brand-dark/40 dark:text-white/40 font-medium">{t('glossaries.description')}</p>
+        </div>
+        <button
+          onClick={() => setCreateDialogOpen(true)}
+          disabled={isCreating}
+          className="premium-button px-10 py-4 text-[11px] uppercase tracking-widest !rounded-2xl flex items-center gap-2 disabled:opacity-50 shrink-0"
+        >
+          <Plus size={14} />
+          {t('glossaries.createNew')}
+        </button>
       </div>
 
-      <Card>
-        <CardHeader>
-          <div className="flex items-center gap-2">
-            <div className="flex size-8 items-center justify-center rounded-lg bg-accent/10">
-              <BookText className="size-4 text-accent" />
-            </div>
-            <div>
-              <CardTitle className="text-base">{t('glossaries.yourGlossaries')}</CardTitle>
-              <CardDescription>{t('glossaries.yourGlossariesDesc')}</CardDescription>
-            </div>
+      {/* ── Glossary Grid ──────────────────────────────────────── */}
+      {glossaries.length === 0 ? (
+        <div className="editorial-card p-16 bg-white dark:bg-[#141414] border-none shadow-editorial text-center">
+          <div className="w-16 h-16 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent mx-auto mb-6">
+            <Library size={32} />
           </div>
-        </CardHeader>
+          <p className="text-xl font-black uppercase tracking-tight text-brand-dark dark:text-white mb-2">{t('glossaries.empty')}</p>
+          <p className="text-[10px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest">{t('glossaries.emptyDesc')}</p>
+        </div>
+      ) : (
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {glossaries.map((glossary: GlossaryListItem) => {
+            const termCount = glossary.terms_count ?? 0;
+            return (
+              <div
+                key={glossary.id}
+                className="editorial-card p-8 bg-white dark:bg-[#141414] border-none shadow-editorial group hover:-translate-y-2 transition-all cursor-pointer"
+                onClick={() => handleEditClick(glossary.id)}
+              >
+                <div className="flex justify-between items-start mb-10">
+                  <div className="w-12 h-12 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent group-hover:bg-brand-dark group-hover:text-white transition-all">
+                    <Library size={24} />
+                  </div>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDeleteClick(glossary.id, glossary.name);
+                    }}
+                    className="text-[8px] bg-red-500/10 text-red-500 px-3 py-1 rounded-full font-black uppercase tracking-widest hover:bg-red-500 hover:text-white transition-all"
+                  >
+                    Delete
+                  </button>
+                </div>
+                <h3 className="text-2xl font-black uppercase tracking-tight mb-2 text-brand-dark dark:text-white truncate">
+                  {glossary.name}
+                </h3>
+                <div className="flex justify-between items-center pt-8 border-t border-black/5 dark:border-white/10">
+                  <span className="text-[9px] text-brand-dark/30 dark:text-white/30 font-black uppercase tracking-widest flex items-center gap-1.5">
+                    <Hash size={10} />
+                    {termCount} {t('glossaries.defineTerms')}
+                  </span>
+                  <span className="text-[9px] text-brand-dark/30 dark:text-white/30 font-black uppercase tracking-widest flex items-center gap-1.5">
+                    <Calendar size={10} />
+                    {new Date(glossary.created_at).toLocaleDateString()}
+                  </span>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
 
-        <CardContent className="space-y-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium">
-                {t(total !== 1 ? 'glossaries.count_other' : 'glossaries.count_one', { count: String(total) })}
-              </p>
-              <p className="text-xs text-muted-foreground">{t('glossaries.defineTerms')}</p>
-            </div>
-            <Button
-              onClick={() => setCreateDialogOpen(true)}
-              disabled={isCreating}
-              className="gap-1.5"
-            >
-              <Plus className="size-3.5" />
-              {t('glossaries.createNew')}
-            </Button>
-          </div>
-
-          {glossaries.length === 0 ? (
-            <div className="text-center py-8">
-              <BookText className="size-12 mx-auto text-muted-foreground/50 mb-4" />
-              <p className="text-muted-foreground">{t('glossaries.empty')}</p>
-              <p className="text-sm text-muted-foreground/80">{t('glossaries.emptyDesc')}</p>
-            </div>
-          ) : (
-            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-              {glossaries.map((glossary: GlossaryListItem) => (
-                <GlossaryCard
-                  key={glossary.id}
-                  glossary={glossary}
-                  onEdit={handleEditClick}
-                  onDelete={handleDeleteClick}
-                  isDeleting={isDeleting && glossaryToDelete?.id === glossary.id}
-                />
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      <Separator />
-
-      <Card className="border-border/50">
-        <CardHeader>
-          <CardTitle className="text-sm">{t('glossaries.aboutTitle')}</CardTitle>
-        </CardHeader>
-        <CardContent className="text-sm text-muted-foreground space-y-2">
-          <p>{t('glossaries.aboutDesc')}</p>
-          <p><strong>{t('glossaries.aboutFormat')}</strong></p>
-        </CardContent>
-      </Card>
+      {/* ── About section ──────────────────────────────────────── */}
+      <div className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial mt-12">
+        <div className="flex items-center gap-4 text-brand-accent mb-8">
+          <BookText size={20} />
+          <span className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
+            {t('glossaries.aboutTitle')}
+          </span>
+        </div>
+        <p className="text-sm text-brand-dark/40 dark:text-white/40 font-medium mb-4">{t('glossaries.aboutDesc')}</p>
+        <p className="text-[10px] font-bold uppercase tracking-tight text-brand-dark/60 dark:text-white/60">
+          {t('glossaries.aboutFormat')}
+        </p>
+      </div>
 
+      {/* Dialogs */}
       <CreateGlossaryDialog
         open={createDialogOpen}
         onOpenChange={setCreateDialogOpen}