Sober (flat) popups + per-link Open Graph share previews

UI:
- Reworked all dialogs/toasts to a flat, sober style (variant 1): neutral
  surfaces, thin borders, no coloured glow, accent kept minimal. Softened the
  global look — flat primary buttons, neutral elevation, calmer wordmark, fainter
  background tint.
- Restyled the Remote-Upload page to the dark theme (FR) and note that fetched
  files land in the Remote-Upload folder.

Share link previews:
- /s/[token] is now a server wrapper that emits per-link Open Graph / Twitter
  metadata, so pasting a link into Discord/Slack/X shows a rich card. Public
  image shares preview the image itself; other files and folders get a generated
  branded OG card (/s/[token]/opengraph-image). Code/sign-in-protected links
  never leak their contents, and all share links are noindex.

Author: softpython2884

apps/web/src/app/(app)/drive/page.tsx

@@ -804,8 +804,11 @@ function ErrorLine({ msg }: { msg: string }) {
 
 function Modal({ children, onClose }: { children: React.ReactNode; onClose: () => void }) {
   return (
-    <div className="fixed inset-0 z-50 grid place-items-center bg-black/60 p-4 backdrop-blur-sm" onClick={onClose}>
-      <div className="card w-full max-w-md border-white/10 bg-ink-850" onClick={(e) => e.stopPropagation()}>
+    <div className="fixed inset-0 z-50 grid place-items-center bg-black/60 p-4" onClick={onClose}>
+      <div
+        className="w-full max-w-md rounded-xl border border-white/[0.08] bg-[#111118] p-[18px] shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
         {children}
       </div>
     </div>

apps/web/src/app/(app)/remote/page.tsx

@@ -45,48 +45,46 @@ export default function RemotePage() {
 
   return (
     <div className="space-y-6">
-      <div className="card space-y-3">
-        <div>
-          <h1 className="text-lg font-semibold">Remote-Upload</h1>
-          <p className="text-sm text-neutral-500">
-            Paste a link and the server downloads it directly — your own connection stays free.
-            Files are antivirus-scanned and encrypted at rest.
-          </p>
-        </div>
-        <form onSubmit={submit} className="flex gap-2">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight text-white">Remote-Upload</h1>
+        <p className="mt-1 text-sm text-zinc-500">
+          Collez un lien : le serveur le télécharge directement (votre connexion reste libre).
+          Les fichiers sont analysés et chiffrés au repos, puis rangés dans votre dossier{' '}
+          <span className="font-medium text-zinc-300">Remote-Upload</span>.
+        </p>
+      </div>
+
+      <div className="card">
+        <form onSubmit={submit} className="flex flex-col gap-2 sm:flex-row">
           <input
             className="input"
             type="url"
-            placeholder="https://example.com/large-file.zip"
+            placeholder="https://example.com/gros-fichier.zip"
             value={url}
             onChange={(e) => setUrl(e.target.value)}
             required
           />
           <button className="btn-primary whitespace-nowrap" disabled={busy}>
-            {busy ? 'Queuing…' : 'Fetch'}
+            {busy ? 'En file…' : 'Télécharger'}
           </button>
         </form>
-        {error && <p className="text-sm text-red-600">{error}</p>}
+        {error && <p className="mt-2 text-sm text-red-300">{error}</p>}
       </div>
 
-      <div className="card p-0">
-        <div className="border-b border-neutral-100 px-4 py-2 text-sm font-medium dark:border-neutral-800">
-          Jobs
-        </div>
+      <div>
+        <h2 className="mb-2 text-sm font-medium text-zinc-400">Tâches</h2>
         {jobs.length === 0 ? (
-          <p className="p-6 text-center text-sm text-neutral-400">No remote uploads yet.</p>
+          <div className="card py-10 text-center text-sm text-zinc-500">Aucun téléchargement distant pour l’instant.</div>
         ) : (
-          <div className="divide-y divide-neutral-100 dark:divide-neutral-800">
+          <div className="space-y-2">
             {jobs.map((job) => (
-              <div key={job.id} className="flex items-center justify-between gap-3 px-4 py-3">
+              <div key={job.id} className="row">
                 <div className="min-w-0">
-                  <p className="truncate text-sm">{job.sourceUrl}</p>
-                  {job.error && <p className="text-xs text-red-600">{job.error}</p>}
+                  <p className="truncate text-sm text-zinc-200">{job.sourceUrl}</p>
+                  {job.error && <p className="truncate text-xs text-red-300">{job.error}</p>}
                 </div>
-                <div className="flex items-center gap-3 whitespace-nowrap text-xs">
-                  {job.sizeBytes != null && (
-                    <span className="text-neutral-400">{formatBytes(job.sizeBytes)}</span>
-                  )}
+                <div className="flex shrink-0 items-center gap-3 whitespace-nowrap text-xs">
+                  {job.sizeBytes != null && <span className="text-zinc-500">{formatBytes(job.sizeBytes)}</span>}
                   <JobStatus status={job.status} />
                 </div>
               </div>
@@ -100,10 +98,16 @@ export default function RemotePage() {
 
 function JobStatus({ status }: { status: PublicRemoteJob['status'] }) {
   const map: Record<PublicRemoteJob['status'], string> = {
-    QUEUED: 'bg-neutral-100 text-neutral-600',
-    RUNNING: 'bg-amber-100 text-amber-700',
-    DONE: 'bg-green-100 text-green-700',
-    FAILED: 'bg-red-100 text-red-700',
+    QUEUED: 'bg-white/[0.06] text-zinc-400',
+    RUNNING: 'bg-amber-500/10 text-amber-300',
+    DONE: 'bg-emerald-500/10 text-emerald-300',
+    FAILED: 'bg-red-500/10 text-red-300',
+  };
+  const label: Record<PublicRemoteJob['status'], string> = {
+    QUEUED: 'En file',
+    RUNNING: 'En cours',
+    DONE: 'Terminé',
+    FAILED: 'Échec',
   };
-  return <span className={`rounded px-2 py-0.5 uppercase ${map[status]}`}>{status}</span>;
+  return <span className={`rounded px-2 py-0.5 font-medium uppercase tracking-wide ${map[status]}`}>{label[status]}</span>;
 }

apps/web/src/app/globals.css

@@ -13,10 +13,8 @@ body {
 
 body {
   @apply bg-ink-950 text-zinc-200 antialiased;
-  /* subtle violet radial glow in the corners for depth */
-  background-image:
-    radial-gradient(60rem 60rem at 100% -10%, rgba(139, 92, 246, 0.06), transparent 60%),
-    radial-gradient(50rem 50rem at -10% 110%, rgba(139, 92, 246, 0.05), transparent 60%);
+  /* very faint, single-corner tint — kept minimal for a sober feel */
+  background-image: radial-gradient(70rem 70rem at 100% -20%, rgba(139, 92, 246, 0.03), transparent 60%);
   background-attachment: fixed;
 }
 
@@ -39,7 +37,7 @@ body {
     @apply inline-flex items-center justify-center gap-2 rounded-lg px-3.5 py-2 text-sm font-medium transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50;
   }
   .btn-primary {
-    @apply btn bg-accent text-white shadow-sm hover:bg-accent-hover hover:shadow-glow;
+    @apply btn bg-accent text-white hover:bg-accent-hover;
   }
   .btn-ghost {
     @apply btn border border-white/10 bg-white/[0.03] text-zinc-200 hover:border-white/20 hover:bg-white/[0.06];

apps/web/src/app/s/[token]/ShareClient.tsx

@@ -6,7 +6,7 @@
  * shared folder, and respects the link's access mode (public / code / sign-in required),
  * expiry, and download-disabled flag.
  */
-import { use, useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import Link from 'next/link';
 import { Download } from 'lucide-react';
 import type { PublicShareView, ShareEntry } from '@opencoperlock/shared/client';
@@ -23,8 +23,7 @@ function fileUrl(token: string, fileId: string, opts: { inline?: boolean; code?:
   return `${API_URL}/s/${token}/file/${fileId}${qs ? `?${qs}` : ''}`;
 }
 
-export default function SharePage({ params }: { params: Promise<{ token: string }> }) {
-  const { token } = use(params);
+export default function ShareClient({ token }: { token: string }) {
   const [view, setView] = useState<PublicShareView | null>(null);
   const [code, setCode] = useState('');
   const [submittedCode, setSubmittedCode] = useState<string | undefined>(undefined);

apps/web/src/app/s/[token]/opengraph-image.tsx

@@ -0,0 +1,96 @@
+import { ImageResponse } from 'next/og';
+import { fetchShareView, kindLabel } from '@/lib/shareMeta';
+
+// Branded Open Graph card for a share link (folders + non-image files; public images use the
+// image itself, set in generateMetadata). 1200×630 PNG.
+export const runtime = 'edge';
+export const alt = 'Partage OpenCoperLock';
+export const size = { width: 1200, height: 630 };
+export const contentType = 'image/png';
+
+export default async function ShareOgImage({ params }: { params: Promise<{ token: string }> }) {
+  const { token } = await params;
+  const view = await fetchShareView(token);
+
+  let heading = 'Partage';
+  let title = 'Fichier partagé';
+  let subtitle = 'Partagé via OpenCoperLock';
+
+  if (!view || view.expired) {
+    heading = 'Lien de partage';
+    title = 'Lien indisponible';
+    subtitle = 'Ce lien est invalide ou a expiré';
+  } else if (view.requiresCode || view.requiresAuth) {
+    heading = 'Partage protégé';
+    title = view.requiresAuth ? 'Réservé aux comptes' : 'Protégé par un code';
+    subtitle = 'Ouvrez le lien pour y accéder';
+  } else if (view.file) {
+    heading = kindLabel(view.file.kind);
+    title = view.file.name;
+    subtitle = 'Partagé via OpenCoperLock';
+  } else if (view.entries) {
+    const n = view.entries.length;
+    heading = 'Dossier partagé';
+    title = `${n} fichier${n > 1 ? 's' : ''}`;
+    subtitle = 'Partagé via OpenCoperLock';
+  }
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          padding: '72px',
+          background: '#0a0a0f',
+          color: 'white',
+          fontFamily: 'sans-serif',
+        }}
+      >
+        {/* Brand */}
+        <div style={{ display: 'flex', fontSize: 30, fontWeight: 700, letterSpacing: -0.5 }}>
+          <span style={{ color: '#71717a' }}>Open</span>
+          <span style={{ color: 'white' }}>Coper</span>
+          <span style={{ color: '#a78bfa' }}>Lock</span>
+        </div>
+
+        {/* Main */}
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <div
+            style={{
+              alignSelf: 'flex-start',
+              fontSize: 22,
+              color: '#a78bfa',
+              border: '1px solid rgba(167,139,250,0.4)',
+              borderRadius: 8,
+              padding: '6px 14px',
+              marginBottom: 24,
+            }}
+          >
+            {heading}
+          </div>
+          <div
+            style={{
+              fontSize: 60,
+              fontWeight: 700,
+              letterSpacing: -1,
+              lineHeight: 1.1,
+              maxWidth: 1000,
+              overflow: 'hidden',
+            }}
+          >
+            {title.length > 70 ? `${title.slice(0, 70)}…` : title}
+          </div>
+          <div style={{ marginTop: 20, fontSize: 28, color: '#a1a1aa' }}>{subtitle}</div>
+        </div>
+
+        {/* Footer */}
+        <div style={{ fontSize: 22, color: '#52525b' }}>copper.forgenet.fr · par Forge Network</div>
+      </div>
+    ),
+    size,
+  );
+}

apps/web/src/app/s/[token]/page.tsx

@@ -0,0 +1,67 @@
+import type { Metadata } from 'next';
+import { formatBytes } from '@opencoperlock/shared/client';
+import { fetchShareView, kindLabel, shareInlineUrl } from '@/lib/shareMeta';
+import ShareClient from './ShareClient';
+
+/**
+ * Server wrapper for a share link. It exists so we can emit per-link Open Graph metadata —
+ * a rich preview card (and, for public images, the image itself) when the link is pasted
+ * into Discord/Slack/X — while the interactive recipient UI stays a client component.
+ *
+ * Share links are always `noindex`: previews are fine, search-engine indexing is not.
+ */
+export async function generateMetadata({ params }: { params: Promise<{ token: string }> }): Promise<Metadata> {
+  const { token } = await params;
+  const view = await fetchShareView(token);
+
+  const base: Metadata = { robots: { index: false, follow: false } };
+
+  if (!view || view.expired) {
+    return { ...base, title: 'Lien de partage', description: 'Ce lien de partage est invalide ou a expiré.' };
+  }
+
+  // Protected links never reveal their contents in a preview.
+  if (view.requiresCode || view.requiresAuth) {
+    const why = view.requiresAuth ? 'réservé aux comptes' : 'protégé par un code';
+    return {
+      ...base,
+      title: 'Partage protégé',
+      description: `Ce lien est ${why}. Ouvrez-le pour y accéder.`,
+      openGraph: {
+        title: 'Partage protégé · OpenCoperLock',
+        description: `Ce lien est ${why}.`,
+      },
+    };
+  }
+
+  // Single file.
+  if (view.file) {
+    const f = view.file;
+    const desc = `${kindLabel(f.kind)} · ${formatBytes(f.sizeBytes)} — partagé via OpenCoperLock`;
+    // For a public image, the image itself makes the best preview; otherwise a branded card.
+    const images = f.kind === 'image' ? [shareInlineUrl(token, f.fileId)] : [`/s/${token}/opengraph-image`];
+    return {
+      ...base,
+      title: f.name,
+      description: desc,
+      openGraph: { title: f.name, description: desc, images },
+      twitter: { card: 'summary_large_image', title: f.name, description: desc, images },
+    };
+  }
+
+  // Folder.
+  const n = view.entries?.length ?? 0;
+  const title = `Dossier partagé (${n} fichier${n > 1 ? 's' : ''})`;
+  return {
+    ...base,
+    title,
+    description: `${n} fichier${n > 1 ? 's' : ''} partagé${n > 1 ? 's' : ''} via OpenCoperLock.`,
+    openGraph: { title, description: `Partagé via OpenCoperLock.`, images: [`/s/${token}/opengraph-image`] },
+    twitter: { card: 'summary_large_image', title, images: [`/s/${token}/opengraph-image`] },
+  };
+}
+
+export default async function SharePage({ params }: { params: Promise<{ token: string }> }) {
+  const { token } = await params;
+  return <ShareClient token={token} />;
+}

apps/web/src/components/Wordmark.tsx

@@ -1,15 +1,13 @@
 /**
- * Stylised brand wordmark. "Open" in muted zinc, "Coper" in white, "Lock" in the violet
- * accent with a soft glow — distinctive without a separate logo glyph beside it.
+ * Stylised brand wordmark. "Open" in muted zinc, "Coper" in white, "Lock" in a restrained
+ * violet — distinctive without a separate logo glyph or glow, to keep the sober look.
  */
 export function Wordmark({ className = '' }: { className?: string }) {
   return (
     <span className={`select-none text-lg font-semibold tracking-tight ${className}`}>
-      <span className="text-zinc-400">Open</span>
+      <span className="text-zinc-500">Open</span>
       <span className="text-white">Coper</span>
-      <span className="bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent [text-shadow:0_0_18px_rgba(139,92,246,0.35)]">
-        Lock
-      </span>
+      <span className="text-violet-400">Lock</span>
     </span>
   );
 }