create-snapify-app 0.0.0-stage → 1.1.1

package/template/src/admin/pages/SettingsPage.tsx

@@ -0,0 +1,189 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { CheckCircle2, Database, Gauge, Globe2, Image as ImageIcon, Mail, Server, ShieldCheck, XCircle } from 'lucide-react';
+import { useSearchParams } from 'react-router-dom';
+import { api, type SystemMeta, type SystemView } from '../lib/api';
+import { useAsync, useEditable } from '../lib/hooks';
+import { useSite, useSiteData } from '../context/SiteContext';
+import { ErrorState, Field, Input, PageHeader, PageSkeleton, Section, Switch, Tabs } from '../ui/primitives';
+import { SaveBar } from '../ui/SaveBar';
+import { firstFormError, type SystemForm, type TabProps } from '../settings/controls';
+import { EmailTab } from '../settings/EmailTab';
+import { SecurityTab } from '../settings/SecurityTab';
+import { DataTab, LimitsTab, MediaTab, SystemTab } from '../settings/OtherTabs';
+
+interface SiteState {
+  publicUrl: string;
+  cookieBannerEnabled: boolean;
+  analyticsEnabled: boolean;
+}
+interface FormState {
+  site: SiteState;
+  system: SystemForm;
+}
+
+type TabId = 'general' | 'email' | 'security' | 'limits' | 'media' | 'data' | 'system';
+
+const TABS: { value: TabId; label: string; icon: typeof Globe2; keys: (keyof SystemForm | 'site')[] }[] = [
+  { value: 'general', label: 'Général', icon: Globe2, keys: ['site'] },
+  { value: 'email', label: 'E-mails', icon: Mail, keys: ['smtp', 'notifications'] },
+  { value: 'security', label: 'Sécurité', icon: ShieldCheck, keys: ['security'] },
+  { value: 'limits', label: 'Limites', icon: Gauge, keys: ['limits'] },
+  { value: 'media', label: 'Médias', icon: ImageIcon, keys: ['uploads'] },
+  { value: 'data', label: 'Données', icon: Database, keys: ['privacy'] },
+  { value: 'system', label: 'Système', icon: Server, keys: ['performance'] },
+];
+
+const toForm = (s: SystemView): SystemForm => ({ ...s, smtp: { ...s.smtp, password: '', clearPassword: false } });
+
+function validUrl(url: string) {
+  try {
+    return /^https?:$/.test(new URL(url).protocol);
+  } catch {
+    return false;
+  }
+}
+
+function GeneralTab({ s, patch, meta }: { s: SiteState; patch: (p: Partial<SiteState>) => void; meta: SystemMeta }) {
+  const { data: dash } = useAsync(() => api.dashboard(), []);
+  const services = [
+    { ok: meta.smtpSource !== 'none', label: 'Envoi d’e-mails (SMTP)', detail: meta.smtpSource === 'settings' ? 'Onglet E-mails' : meta.smtpSource === 'env' ? 'Fichier .env' : 'Non configuré' },
+    { ok: !!dash?.health?.googleOAuthConfigured, label: 'Connexion Google (Search Console)', detail: 'SEO › Google Search Console' },
+    { ok: !!dash?.health?.gemini, label: 'Assistant IA (Gemini)', detail: 'GEMINI_API_KEY' },
+    { ok: !!meta.dedicatedSecretKey, label: 'Clé de chiffrement dédiée', detail: 'SNAPIFY_SECRET_KEY' },
+  ];
+  return (
+    <div className="grid gap-6 xl:grid-cols-2">
+      <div className="space-y-6">
+        <Section title="Adresse du site">
+          <Field
+            label="URL publique"
+            hint="Utilisée pour le sitemap, les liens canoniques, les aperçus de partage et les liens des e-mails."
+            error={s.publicUrl && !validUrl(s.publicUrl) ? 'URL invalide (ex. https://www.snapify.fr)' : undefined}
+          >
+            <Input value={s.publicUrl} onChange={(e) => patch({ publicUrl: e.target.value })} placeholder="https://www.snapify.fr" />
+          </Field>
+        </Section>
+        <Section title="Confidentialité et mesure d’audience">
+          <Switch
+            checked={s.analyticsEnabled}
+            onChange={(analyticsEnabled) => patch({ analyticsEnabled })}
+            label="Statistiques de visite"
+            description="Mesure d’audience interne, anonyme et hébergée sur votre serveur (aucun cookie tiers)."
+          />
+          <Switch
+            checked={s.cookieBannerEnabled}
+            onChange={(cookieBannerEnabled) => patch({ cookieBannerEnabled })}
+            label="Bandeau de consentement aux cookies"
+            description="Affiche le bandeau d’information RGPD aux nouveaux visiteurs."
+          />
+        </Section>
+      </div>
+      <Section title="Services connectés" description="État des intégrations. Les clés techniques se règlent dans le fichier .env du serveur.">
+        <ul className="divide-y divide-slate-100">
+          {services.map((sv) => (
+            <li key={sv.label} className="flex items-start gap-3 py-3">
+              {sv.ok ? <CheckCircle2 className="mt-0.5 h-4 w-4 text-emerald-500" /> : <XCircle className="mt-0.5 h-4 w-4 text-slate-300" />}
+              <div className="flex-1">
+                <p className="text-sm font-medium text-slate-800">{sv.label}</p>
+                <p className="font-mono text-[11px] text-slate-400">{sv.detail}</p>
+              </div>
+              <span className={sv.ok ? 'text-xs font-medium text-emerald-600' : 'text-xs text-slate-400'}>{sv.ok ? 'Actif' : 'Inactif'}</span>
+            </li>
+          ))}
+        </ul>
+      </Section>
+    </div>
+  );
+}
+
+export default function SettingsPage() {
+  const site = useSiteData();
+  const { patchSite } = useSite();
+  const [params, setParams] = useSearchParams();
+  const tab = (TABS.some((t) => t.value === params.get('tab')) ? params.get('tab') : 'general') as TabId;
+  const setTab = (t: TabId) => setParams(t === 'general' ? {} : { tab: t }, { replace: true });
+
+  const sys = useAsync(() => api.system.get(), []);
+  const [meta, setMeta] = useState<SystemMeta | null>(null);
+  useEffect(() => {
+    if (sys.data) setMeta((m) => ({ ...m, ...sys.data!.meta }));
+  }, [sys.data]);
+
+  const initial = useMemo<FormState | null>(
+    () =>
+      sys.data
+        ? {
+            site: { publicUrl: site.settings.publicUrl, cookieBannerEnabled: site.settings.cookieBannerEnabled, analyticsEnabled: site.settings.analyticsEnabled },
+            system: toForm(sys.data.system),
+          }
+        : null,
+    [sys.data, site.settings]
+  );
+
+  const save = useCallback(
+    async (f: FormState) => {
+      const err = firstFormError(f.system);
+      if (err) throw new Error(err);
+      const publicUrl = f.site.publicUrl.trim().replace(/\/+$/, '');
+      if (publicUrl && !validUrl(publicUrl)) throw new Error('URL publique invalide (ex. https://www.snapify.fr)');
+      if (!initial) return f;
+
+      let system = f.system;
+      if (JSON.stringify(f.system) !== JSON.stringify(initial.system)) {
+        const { password, clearPassword, hasPassword: _h, ...smtp } = f.system.smtp;
+        const r = await api.system.save({ ...f.system, smtp: { ...smtp, password: password || undefined, clearPassword } });
+        system = toForm(r.system);
+        sys.setData({ system: r.system, meta: { ...(meta ?? r.meta), ...r.meta } });
+      }
+      const nextSite = { ...f.site, publicUrl };
+      if (JSON.stringify(nextSite) !== JSON.stringify(initial.site)) {
+        await api.saveSection('settings', nextSite);
+        patchSite('settings', { ...site.settings, ...nextSite });
+      }
+      return { site: nextSite, system };
+    },
+    [initial, meta, sys, patchSite, site.settings]
+  );
+  const ed = useEditable<FormState>(initial, save, { successMessage: 'Paramètres enregistrés' });
+
+  if (sys.error && !sys.data) return <ErrorState message={sys.error} onRetry={() => void sys.reload()} />;
+  if (!ed.value || !meta || !initial) return <PageSkeleton />;
+  const f = ed.value;
+
+  const set: TabProps['set'] = (key, p) => ed.setValue((cur) => (cur ? { ...cur, system: { ...cur.system, [key]: { ...cur.system[key], ...p } } } : cur));
+  const patchSiteState = (p: Partial<SiteState>) => ed.setValue((cur) => (cur ? { ...cur, site: { ...cur.site, ...p } } : cur));
+  const changed = (k: keyof SystemForm | 'site') =>
+    k === 'site' ? JSON.stringify(f.site) !== JSON.stringify(initial.site) : JSON.stringify(f.system[k]) !== JSON.stringify(initial.system[k]);
+
+  const props: TabProps = { v: f.system, set, meta };
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title="Paramètres" description="Réglages techniques du site et de l’administration : e-mails, sécurité, limites, médias et données." />
+      <Tabs<TabId>
+        value={tab}
+        onChange={setTab}
+        tabs={TABS.map((t) => ({
+          value: t.value,
+          label: t.label,
+          icon: t.icon,
+          badge: t.keys.some(changed) ? <span className="h-1.5 w-1.5 rounded-full bg-amber-500" title="Modifications non enregistrées" /> : undefined,
+        }))}
+      />
+      {tab === 'general' ? <GeneralTab s={f.site} patch={patchSiteState} meta={meta} /> : null}
+      {tab === 'email' ? <EmailTab {...props} /> : null}
+      {tab === 'security' ? <SecurityTab {...props} /> : null}
+      {tab === 'limits' ? <LimitsTab {...props} /> : null}
+      {tab === 'media' ? <MediaTab {...props} /> : null}
+      {tab === 'data' ? <DataTab {...props} dirty={ed.dirty} /> : null}
+      {tab === 'system' ? <SystemTab v={f.system} set={set} /> : null}
+      <SaveBar dirty={ed.dirty} saving={ed.saving} onSave={ed.commit} onReset={ed.reset} blocker={ed.blocker} />
+    </div>
+  );
+}

package/template/src/admin/pages/ThemeCustomizePage.tsx

@@ -0,0 +1,170 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import { useCallback, useMemo, useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { CheckCircle2, Eye, RotateCcw, ShieldAlert, SlidersHorizontal } from 'lucide-react';
+import { toast } from 'sonner';
+import type { SettingField } from '../../../sdk/index';
+import { useAuth } from '../context/AuthContext';
+import { useSiteData } from '../context/SiteContext';
+import { api, ApiError } from '../lib/api';
+import { errorMessage, useAsync, useEditable } from '../lib/hooks';
+import { Alert, Badge, Button, EmptyState, ErrorState, PageHeader, PageSkeleton, Select } from '../ui/primitives';
+import { SaveBar } from '../ui/SaveBar';
+import { DeviceSwitch, PreviewFrame, type Device } from '../editor/PreviewFrame';
+import { SettingsForm } from '../modules/SettingsForm';
+
+type Settings = Record<string, unknown>;
+
+const defaults = (schema: SettingField[]): Settings => Object.fromEntries(schema.map((f) => [f.key, f.default]));
+
+export default function ThemeCustomizePage() {
+  const [params, setParams] = useSearchParams();
+  const { can } = useAuth();
+  const isSuper = can('appearance.themes');
+  const site = useSiteData();
+  const list = useAsync(() => api.themes.list(), []);
+  const themes = list.data?.themes ?? [];
+  const themeId = params.get('theme') || themes.find((t) => t.active)?.id || '';
+  const detail = useAsync(() => (themeId ? api.themes.detail(themeId) : Promise.resolve(null)), [themeId]);
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
+  const [path, setPath] = useState('/');
+  const [device, setDevice] = useState<Device>('desktop');
+  const [activating, setActivating] = useState(false);
+
+  const initial = useMemo(() => detail.data?.settings ?? null, [detail.data?.settings]);
+  const save = useCallback(
+    async (value: Settings) => {
+      try {
+        const r = await api.themes.saveSettings(themeId, value);
+        setFieldErrors({});
+        return r.settings;
+      } catch (e) {
+        if (e instanceof ApiError && e.fields) setFieldErrors(e.fields);
+        throw e;
+      }
+    },
+    [themeId]
+  );
+  const ed = useEditable<Settings>(initial, save, { successMessage: 'Options du thème enregistrées' });
+
+  const t = detail.data;
+  const payload = useMemo(() => (t?.descriptor ? { theme: { descriptor: t.descriptor, settings: ed.value ?? t.settings } } : {}), [t?.descriptor, t?.settings, ed.value]);
+
+  const pages = site.pages
+    .filter((p) => p.status === 'published')
+    .sort((x, y) => x.path.localeCompare(y.path))
+    .map((p) => ({ value: p.path, label: p.path === '/' ? 'Accueil' : p.title }));
+
+  const activate = async () => {
+    if (!t) return;
+    setActivating(true);
+    try {
+      if (ed.dirty && !(await ed.commit())) return;
+      await api.themes.activate(t.id);
+      toast.success(`${t.name} est maintenant le thème du site`);
+      detail.reload();
+      list.reload();
+    } catch (e) {
+      toast.error(errorMessage(e));
+    } finally {
+      setActivating(false);
+    }
+  };
+
+  if ((list.loading && !list.data) || (detail.loading && !detail.data)) return <PageSkeleton />;
+  if (list.error && !list.data) return <ErrorState message={list.error} onRetry={list.reload} />;
+  if (!themeId) {
+    return <EmptyState icon={SlidersHorizontal} title="Aucun thème actif" description="Installez puis activez un thème depuis Apparence > Thèmes." />;
+  }
+  if (detail.error && !detail.data) return <ErrorState message={detail.error} onRetry={detail.reload} />;
+  if (!t) return null;
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        breadcrumb={
+          <Link to="/themes" className="hover:text-slate-800">
+            Thèmes
+          </Link>
+        }
+        title={
+          <span className="flex items-center gap-3">
+            Personnaliser « {t.name} »
+            {t.active ? (
+              <Badge tone="success" dot>
+                Actif
+              </Badge>
+            ) : (
+              <Badge tone="info">Aperçu</Badge>
+            )}
+          </span>
+        }
+        description={t.active ? 'Les options s’appliquent au site dès leur enregistrement.' : 'Ce thème n’est pas encore actif : les visiteurs voient toujours le thème actuel.'}
+        actions={
+          <>
+            {themes.length > 1 ? (
+              <div className="w-52">
+                <Select
+                  value={t.id}
+                  onChange={(id) => setParams({ theme: id })}
+                  options={themes.map((x) => ({ value: x.id, label: x.active ? `${x.name} (actif)` : x.name }))}
+                />
+              </div>
+            ) : null}
+            {!t.active && isSuper ? (
+              <Button variant="primary" icon={CheckCircle2} loading={activating} disabled={!t.descriptor} onClick={() => void activate()}>
+                {ed.dirty ? 'Enregistrer et activer' : 'Activer ce thème'}
+              </Button>
+            ) : null}
+          </>
+        }
+      />
+
+      {!t.descriptor ? (
+        <Alert tone="danger" icon={ShieldAlert} title="Aperçu indisponible">
+          {t.status.message}
+        </Alert>
+      ) : null}
+
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,0.8fr)_minmax(0,1.4fr)]">
+        <div className="min-w-0 space-y-4">
+          {t.settingsSchema.length && ed.value ? (
+            <>
+              <fieldset disabled={!can('appearance.customize')} className="min-w-0">
+                <SettingsForm fields={t.settingsSchema} value={ed.value} errors={fieldErrors} onChange={(p) => ed.patch(p)} />
+              </fieldset>
+              <Button size="sm" variant="ghost" icon={RotateCcw} onClick={() => ed.patch(defaults(t.settingsSchema))}>
+                Options par défaut du thème
+              </Button>
+            </>
+          ) : (
+            <EmptyState icon={SlidersHorizontal} title="Aucune option" description="Ce thème ne propose pas de réglage." />
+          )}
+        </div>
+        <div className="min-w-0 xl:sticky xl:top-20 xl:self-start">
+          <div className="flex h-[calc(100vh-7rem)] min-h-[520px] flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+            <div className="flex items-center gap-2 border-b border-slate-200 px-3 py-2">
+              <span className="flex items-center gap-1.5 text-xs font-semibold text-slate-600">
+                {t.active ? <span className="h-2 w-2 animate-pulse rounded-full bg-emerald-500" /> : <Eye className="h-3.5 w-3.5" />}
+                {t.active ? 'Aperçu en direct' : `Aperçu de ${t.name}`}
+              </span>
+              <div className="ml-auto w-48">
+                <Select value={path} onChange={setPath} options={pages.length ? pages : [{ value: '/', label: 'Accueil' }]} />
+              </div>
+              <DeviceSwitch value={device} onChange={setDevice} />
+            </div>
+            <div className="min-h-0 flex-1">
+              <PreviewFrame path={path} payload={payload} device={device} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <SaveBar dirty={ed.dirty} saving={ed.saving} onSave={ed.commit} onReset={ed.reset} blocker={ed.blocker} />
+    </div>
+  );
+}

package/template/src/admin/pages/ThemesPage.tsx

@@ -0,0 +1,292 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import { useMemo, useState, type ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowUpCircle, CheckCircle2, Download, Eye, FlaskConical, LayoutTemplate, Paintbrush, PackageSearch, RefreshCw, Search, ShieldAlert, ShieldCheck, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+import type { InstalledThemeInfo, MarketplaceListing, StagedPackageInfo } from '../../../server/modules/types';
+import { useAuth } from '../context/AuthContext';
+import { useSite } from '../context/SiteContext';
+import { api } from '../lib/api';
+import { errorMessage, useAsync } from '../lib/hooks';
+import { fmtBytes } from '../lib/format';
+import { Alert, Badge, Button, Card, EmptyState, ErrorState, Input, PageHeader, PageSkeleton, Tabs } from '../ui/primitives';
+import { useConfirm } from '../ui/overlays';
+import { ImportPackageButton, InstallDialog } from '../modules/InstallDialog';
+import { ModuleStatusBadge, PRICING_LABEL } from '../modules/labels';
+
+type Tab = 'installed' | 'add';
+type CatalogTheme = MarketplaceListing['modules'][number];
+
+function Screenshot({ src, name, children }: { src?: string; name: string; children?: ReactNode }) {
+  return (
+    <div className="relative aspect-[4/3] overflow-hidden rounded-t-xl border-b border-slate-200 bg-slate-100">
+      {src ? (
+        <img src={src} alt={`Aperçu du thème ${name}`} loading="lazy" className="h-full w-full object-cover object-top" />
+      ) : (
+        <div className="flex h-full items-center justify-center text-slate-300">
+          <LayoutTemplate className="h-12 w-12" />
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
+
+function SignatureNote({ signed }: { signed: boolean }) {
+  return signed ? (
+    <span className="inline-flex items-center gap-1 text-emerald-700">
+      <ShieldCheck className="h-3.5 w-3.5" /> Signé NOVALABS
+    </span>
+  ) : (
+    <span className="inline-flex items-center gap-1 text-amber-700">
+      <FlaskConical className="h-3.5 w-3.5" /> Non signé
+    </span>
+  );
+}
+
+function InstalledCard({ t, isSuper, busy, onActivate, onDelete }: { t: InstalledThemeInfo; isSuper: boolean; busy: boolean; onActivate: () => void; onDelete: () => void }) {
+  const blocked = t.status.code !== 'active' && t.status.code !== 'disabled';
+  return (
+    <Card padded={false} className={t.active ? 'ring-2 ring-brand-500' : undefined}>
+      <Screenshot src={t.screenshot} name={t.name}>
+        {t.active ? (
+          <span className="absolute left-3 top-3 inline-flex items-center gap-1.5 rounded-full bg-emerald-600 px-2.5 py-1 text-xs font-semibold text-white shadow">
+            <CheckCircle2 className="h-3.5 w-3.5" /> Thème actif
+          </span>
+        ) : null}
+      </Screenshot>
+      <div className="space-y-3 p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <p className="truncate text-[15px] font-semibold text-slate-900">{t.name}</p>
+            <p className="text-xs text-slate-500">
+              v{t.version} · {t.author.name}
+            </p>
+          </div>
+          {blocked ? <ModuleStatusBadge code={t.status.code} /> : <Badge tone={t.pricing === 'free' ? 'success' : 'brand'}>{PRICING_LABEL[t.pricing]}</Badge>}
+        </div>
+        <p className="line-clamp-2 text-sm text-slate-600">{t.description}</p>
+        {blocked ? (
+          <p className="flex items-start gap-1.5 text-xs text-rose-700">
+            <ShieldAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" /> {t.status.message}
+          </p>
+        ) : null}
+        <div className="flex flex-wrap items-center gap-2 border-t border-slate-100 pt-3">
+          {t.active ? (
+            <Link to={`/themes/customize?theme=${encodeURIComponent(t.id)}`}>
+              <Button size="sm" variant="primary" icon={Paintbrush}>
+                Personnaliser
+              </Button>
+            </Link>
+          ) : (
+            <>
+              <Link to={`/themes/customize?theme=${encodeURIComponent(t.id)}`}>
+                <Button size="sm" icon={Eye} disabled={blocked}>
+                  Aperçu
+                </Button>
+              </Link>
+              {isSuper ? (
+                <Button size="sm" variant="primary" loading={busy} disabled={blocked} onClick={onActivate}>
+                  Activer
+                </Button>
+              ) : null}
+              {isSuper ? (
+                <Button size="sm" variant="ghost" icon={Trash2} className="ml-auto text-rose-600 hover:bg-rose-50" onClick={onDelete}>
+                  <span className="sr-only">Supprimer</span>
+                </Button>
+              ) : null}
+            </>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+function CatalogCard({ t, busy, canInstall, onInstall }: { t: CatalogTheme; busy: boolean; canInstall: boolean; onInstall: () => void }) {
+  const installed = t.installedVersion !== null;
+  return (
+    <Card padded={false} className="flex flex-col">
+      <Screenshot src={t.screenshot} name={t.name} />
+      <div className="flex flex-1 flex-col p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <p className="truncate text-[15px] font-semibold text-slate-900">{t.name}</p>
+            <p className="text-xs text-slate-500">
+              v{t.version} · {t.author.name}
+            </p>
+          </div>
+          <Badge tone={t.pricing === 'free' ? 'success' : 'brand'}>{PRICING_LABEL[t.pricing]}</Badge>
+        </div>
+        <p className="mt-2 flex-1 text-sm text-slate-600">{t.description}</p>
+        <div className="mt-3 flex flex-wrap items-center gap-1.5 text-xs text-slate-500">
+          {t.category ? <Badge tone="neutral">{t.category}</Badge> : null}
+          <SignatureNote signed={t.signed} />
+          <span>· {fmtBytes(t.size)}</span>
+        </div>
+        <div className="mt-4 flex items-center justify-between gap-2 border-t border-slate-100 pt-3">
+          {installed ? (
+            <span className="inline-flex items-center gap-1.5 text-xs font-medium text-emerald-700">
+              <CheckCircle2 className="h-4 w-4" /> Installé (v{t.installedVersion})
+            </span>
+          ) : !t.compatible ? (
+            <span className="text-xs text-rose-700">Requiert Snapify {t.engines.snapify}</span>
+          ) : (
+            <span />
+          )}
+          {canInstall && (t.updateAvailable || !installed) ? (
+            <Button size="sm" variant="primary" icon={t.updateAvailable ? ArrowUpCircle : Download} loading={busy} disabled={!t.compatible} onClick={onInstall}>
+              {t.updateAvailable ? 'Mettre à jour' : 'Installer'}
+            </Button>
+          ) : null}
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export default function ThemesPage() {
+  const { can } = useAuth();
+  const { reload: reloadSite } = useSite();
+  const isSuper = can('appearance.themes');
+  const confirm = useConfirm();
+  const [tab, setTab] = useState<Tab>('installed');
+  const installed = useAsync(() => api.themes.list(), []);
+  const [refresh, setRefresh] = useState(0);
+  const catalog = useAsync(() => (tab === 'add' ? api.modules.marketplace(refresh > 0) : Promise.resolve(null)), [tab, refresh]);
+  const [query, setQuery] = useState('');
+  const [busy, setBusy] = useState<string | null>(null);
+  const [staged, setStaged] = useState<StagedPackageInfo | null>(null);
+
+  const themes = installed.data?.themes ?? [];
+  const catalogThemes = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const list = (catalog.data?.modules ?? []).filter((m) => m.kind === 'theme');
+    return q ? list.filter((m) => `${m.name} ${m.description} ${m.category ?? ''} ${m.author.name}`.toLowerCase().includes(q)) : list;
+  }, [catalog.data, query]);
+
+  const activate = async (t: InstalledThemeInfo) => {
+    setBusy(t.id);
+    try {
+      await api.themes.activate(t.id);
+      toast.success(`${t.name} est maintenant le thème du site`);
+      installed.reload();
+      void reloadSite();
+    } catch (e) {
+      toast.error(errorMessage(e));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const remove = async (t: InstalledThemeInfo) => {
+    const ok = await confirm({
+      title: `Supprimer « ${t.name} » ?`,
+      message: 'Le thème et ses options seront supprimés. Le contenu du site n’est pas touché. Vous pourrez le réinstaller depuis la marketplace.',
+      confirmLabel: 'Supprimer',
+      danger: true,
+    });
+    if (!ok) return;
+    try {
+      await api.themes.uninstall(t.id);
+      toast.success(`${t.name} supprimé`);
+      installed.reload();
+    } catch (e) {
+      toast.error(errorMessage(e));
+    }
+  };
+
+  const stage = async (id: string) => {
+    setBusy(id);
+    try {
+      setStaged(await api.modules.stage(id));
+    } catch (e) {
+      toast.error(errorMessage(e));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const afterInstall = () => {
+    installed.reload();
+    catalog.reload();
+    setTab('installed');
+  };
+
+  if (installed.loading && !installed.data) return <PageSkeleton />;
+  if (installed.error && !installed.data) return <ErrorState message={installed.error} onRetry={installed.reload} />;
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Thèmes"
+        description="Le thème définit l’apparence du site : en-tête, pied de page, mise en forme des blocs. Le contenu reste le même quel que soit le thème."
+        actions={isSuper ? <ImportPackageButton kind="theme" onInstalled={afterInstall} /> : null}
+      />
+
+      {installed.data?.devMode ? (
+        <Alert tone="warning" icon={FlaskConical} title="Mode développeur actif">
+          Les thèmes non signés peuvent être installés. Désactivez <code>SNAPIFY_MODULES_DEV_MODE</code> en production.
+        </Alert>
+      ) : null}
+
+      <Tabs<Tab>
+        value={tab}
+        onChange={setTab}
+        tabs={[
+          { value: 'installed', label: 'Installés', badge: <Badge tone="neutral">{themes.length}</Badge> },
+          ...(isSuper ? [{ value: 'add' as const, label: 'Ajouter un thème', icon: Download }] : []),
+        ]}
+      />
+
+      {tab === 'installed' ? (
+        themes.length === 0 ? (
+          <EmptyState icon={LayoutTemplate} title="Aucun thème installé" description="Installez un thème depuis l’onglet « Ajouter un thème »." />
+        ) : (
+          <div className="grid gap-5 md:grid-cols-2 2xl:grid-cols-3">
+            {themes.map((t) => (
+              <InstalledCard key={t.id} t={t} isSuper={isSuper} busy={busy === t.id} onActivate={() => void activate(t)} onDelete={() => void remove(t)} />
+            ))}
+          </div>
+        )
+      ) : !catalog.data && !catalog.error ? (
+        <PageSkeleton />
+      ) : catalog.error && !catalog.data ? (
+        <ErrorState message={catalog.error} onRetry={catalog.reload} />
+      ) : (
+        <div className="space-y-5">
+          {catalog.data?.error ? (
+            <Alert tone="warning" title="Catalogue distant indisponible">
+              {catalog.data.error} Le catalogue local est affiché à la place.
+            </Alert>
+          ) : null}
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div className="relative w-full sm:max-w-xs">
+              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+              <Input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Rechercher un thème" className="pl-9" />
+            </div>
+            <Button icon={RefreshCw} loading={catalog.loading} onClick={() => setRefresh((n) => n + 1)}>
+              Actualiser
+            </Button>
+          </div>
+          {catalogThemes.length === 0 ? (
+            <EmptyState icon={PackageSearch} title="Aucun thème trouvé" description={query ? 'Essayez un autre mot-clé.' : 'Le catalogue ne propose pas encore de thème.'} />
+          ) : (
+            <div className="grid gap-5 md:grid-cols-2 2xl:grid-cols-3">
+              {catalogThemes.map((t) => (
+                <CatalogCard key={t.id} t={t} busy={busy === t.id} canInstall={isSuper} onInstall={() => void stage(t.id)} />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      <InstallDialog staged={staged} onClose={() => setStaged(null)} onInstalled={afterInstall} />
+    </div>
+  );
+}