refactor: add migration, seed permissions, update permissions API

feat(notes): add XLSX import island and admin route

feat(upload): add drag‑and‑drop upload, template download, UI tweaks

compose.test.yml

@@ -7,9 +7,6 @@ services:
       POSTGRES_USER: postgres
       POSTGRES_DB: polympr_test
     volumes:
-      # Init script strips drizzle-kit markers and applies migrations on first start
-      - ./databases/docker-init.sh:/docker-entrypoint-initdb.d/01-migrate.sh:ro
-      - ./databases/migrations:/migrations:ro
       - db_data_test:/var/lib/postgresql/data
     healthcheck:
       test: ["CMD-SHELL", "pg_isready -U postgres"]
@@ -17,6 +14,23 @@ services:
       timeout: 5s
       retries: 10
 
+  migrate:
+    image: node:alpine
+    working_dir: /app
+    restart: "no"
+    volumes:
+      - .:/app
+    command: node_modules/.bin/drizzle-kit migrate
+    environment:
+      POSTGRES_HOST: db
+      POSTGRES_PORT: "5432"
+      POSTGRES_USER: postgres
+      POSTGRES_PASS: testpass
+      POSTGRES_DB: polympr_test
+    depends_on:
+      db:
+        condition: service_healthy
+
   app:
     image: denoland/deno:alpine
     working_dir: /app
@@ -34,8 +48,8 @@ services:
       POSTGRES_DB: polympr_test
       LOCAL: "true"
     depends_on:
-      db:
+      migrate:
-        condition: service_healthy
+        condition: service_completed_successfully
 
 volumes:
   db_data_test:

databases/migrations/0001_seed_permissions.sql

@@ -0,0 +1,10 @@
+--> statement-breakpoint
+INSERT INTO "permissions" ("id", "nom") VALUES
+  ('note_read',    'Consulter les notes des étudiants'),
+  ('note_write',   'Saisir et modifier les notes'),
+  ('student_read', 'Consulter la liste des étudiants'),
+  ('student_write','Gérer les étudiants (ajout, modification, suppression)'),
+  ('module_read',  'Consulter les modules et enseignements'),
+  ('module_write', 'Gérer les modules et enseignements'),
+  ('user_read',    'Consulter les utilisateurs et leurs rôles'),
+  ('user_write',   'Gérer les utilisateurs et leurs rôles');

databases/migrations/0002_update_permission_names.sql

@@ -0,0 +1,13 @@
+-- Update permission names to French
+-- This migration inserts or updates the permission labels used by the API.
+--> statement-breakpoint
+INSERT INTO "permissions" ("id", "nom") VALUES
+  ('note_read',    'Consulter les notes des étudiants'),
+  ('note_write',   'Saisir et modifier les notes'),
+  ('student_read', 'Consulter la liste des étudiants'),
+  ('student_write','Gérer les étudiants (ajout, modification, suppression)'),
+  ('module_read',  'Consulter les modules et enseignements'),
+  ('module_write', 'Gérer les modules et enseignements'),
+  ('user_read',    'Consulter les utilisateurs et leurs rôles'),
+  ('user_write',   'Gérer les utilisateurs et leurs rôles')
+ON CONFLICT ("id") DO UPDATE SET "nom" = EXCLUDED."nom";

databases/migrations/meta/_journal.json

@@ -8,6 +8,20 @@
       "when": 1777155028708,
       "tag": "0000_square_jetstream",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "7",
+      "when": 1777155028709,
+      "tag": "0001_seed_permissions",
+      "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "7",
+      "when": 1777155028710,
+      "tag": "0002_update_permission_names",
+      "breakpoints": true
     }
   ]
 }

fresh.gen.ts

@@ -36,6 +36,7 @@ import * as $_apps_notes_api_ues from "./routes/(apps)/notes/api/ues.ts";
 import * as $_apps_notes_api_ues_idUE_ from "./routes/(apps)/notes/api/ues/[idUE].ts";
 import * as $_apps_notes_index from "./routes/(apps)/notes/index.tsx";
 import * as $_apps_notes_partials_admin_courses from "./routes/(apps)/notes/partials/(admin)/courses.tsx";
+import * as $_apps_notes_partials_admin_import from "./routes/(apps)/notes/partials/(admin)/import.tsx";
 import * as $_apps_notes_partials_admin_ues from "./routes/(apps)/notes/partials/(admin)/ues.tsx";
 import * as $_apps_notes_partials_index from "./routes/(apps)/notes/partials/index.tsx";
 import * as $_apps_notes_partials_notes from "./routes/(apps)/notes/partials/notes.tsx";
@@ -72,6 +73,7 @@ import * as $_apps_mobility_islands_EditMobility from "./routes/(apps)/mobility/
 import * as $_apps_mobility_islands_ImportFile from "./routes/(apps)/mobility/(_islands)/ImportFile.tsx";
 import * as $_apps_notes_islands_AdminConsultNotes from "./routes/(apps)/notes/(_islands)/AdminConsultNotes.tsx";
 import * as $_apps_notes_islands_AdminUEs from "./routes/(apps)/notes/(_islands)/AdminUEs.tsx";
+import * as $_apps_notes_islands_ImportNotes from "./routes/(apps)/notes/(_islands)/ImportNotes.tsx";
 import * as $_apps_notes_islands_NotesView from "./routes/(apps)/notes/(_islands)/NotesView.tsx";
 import * as $_apps_students_islands_AdminPromotions from "./routes/(apps)/students/(_islands)/AdminPromotions.tsx";
 import * as $_apps_students_islands_ConsultStudents from "./routes/(apps)/students/(_islands)/ConsultStudents.tsx";
@@ -129,6 +131,8 @@ const manifest = {
     "./routes/(apps)/notes/index.tsx": $_apps_notes_index,
     "./routes/(apps)/notes/partials/(admin)/courses.tsx":
       $_apps_notes_partials_admin_courses,
+    "./routes/(apps)/notes/partials/(admin)/import.tsx":
+      $_apps_notes_partials_admin_import,
     "./routes/(apps)/notes/partials/(admin)/ues.tsx":
       $_apps_notes_partials_admin_ues,
     "./routes/(apps)/notes/partials/index.tsx": $_apps_notes_partials_index,
@@ -187,6 +191,8 @@ const manifest = {
       $_apps_notes_islands_AdminConsultNotes,
     "./routes/(apps)/notes/(_islands)/AdminUEs.tsx":
       $_apps_notes_islands_AdminUEs,
+    "./routes/(apps)/notes/(_islands)/ImportNotes.tsx":
+      $_apps_notes_islands_ImportNotes,
     "./routes/(apps)/notes/(_islands)/NotesView.tsx":
       $_apps_notes_islands_NotesView,
     "./routes/(apps)/students/(_islands)/AdminPromotions.tsx":

routes/(apps)/admin/(_islands)/AdminRoles.tsx

@@ -171,21 +171,19 @@ export default function AdminRoles() {
               <label
                 key={p.id}
                 class={`perm-toggle-card${active ? " active" : ""}`}
-                onClick={() => togglePerm(p.id)}
               >
                 <div class="perm-toggle-label">
                   <span class="perm-toggle-id">{p.id}</span>
                   <span class="perm-toggle-nom">{p.nom}</span>
                 </div>
-                <label class="toggle-switch">
+                <span class="toggle-switch">
                   <input
                     type="checkbox"
                     checked={active}
                     onChange={() => togglePerm(p.id)}
-                    onClick={(e) => e.stopPropagation()}
                   />
                   <span class="toggle-slider" />
-                </label>
+                </span>
               </label>
             );
           })}

routes/(apps)/admin/api/permissions.ts

@@ -1,21 +1,15 @@
-import { Handlers } from "$fresh/server.ts";
+import { FreshContext, Handlers } from "$fresh/server.ts";
+import { db } from "$root/databases/db.ts";
+import { permissions } from "$root/databases/schema.ts";
 import { AuthenticatedState } from "$root/defaults/interfaces.ts";
 
-const PERMISSIONS = [
-  { id: "student_read", nom: "Consulter les élèves" },
-  { id: "student_write", nom: "Gérer les élèves" },
-  { id: "note_read", nom: "Consulter les notes" },
-  { id: "note_write", nom: "Gérer les notes" },
-  { id: "module_read", nom: "Consulter les modules" },
-  { id: "module_write", nom: "Gérer les modules" },
-  { id: "user_read", nom: "Consulter les utilisateurs" },
-  { id: "user_write", nom: "Gérer les utilisateurs" },
-  { id: "role_write", nom: "Gérer les rôles" },
-] as const;
-
 export const handler: Handlers<null, AuthenticatedState> = {
-  GET(_request, _context): Response {
+  async GET(
-    return new Response(JSON.stringify(PERMISSIONS), {
+    _request: Request,
+    _context: FreshContext<AuthenticatedState>,
+  ): Promise<Response> {
+    const result = await db.select().from(permissions);
+    return new Response(JSON.stringify(result), {
       headers: { "content-type": "application/json" },
     });
   },

routes/(apps)/notes/(_islands)/ImportNotes.tsx

@@ -0,0 +1,153 @@
+// @deno-types="https://cdn.sheetjs.com/xlsx-0.20.3/package/types/index.d.ts"
+import * as XLSX from "https://cdn.sheetjs.com/xlsx-0.20.3/package/xlsx.mjs";
+import { useRef } from "preact/hooks";
+import { useSignal } from "@preact/signals";
+
+export default function ImportNotes() {
+  const file = useSignal<File | null>(null);
+  const dragging = useSignal(false);
+  const uploading = useSignal(false);
+  const error = useSignal<string | null>(null);
+  const success = useSignal<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  function pickFile(f: File) {
+    if (!f.name.match(/\.xlsx?$/i)) {
+      error.value = "Fichier invalide — format attendu : .xlsx";
+      return;
+    }
+    file.value = f;
+    error.value = null;
+    success.value = null;
+  }
+
+  function onDragOver(e: DragEvent) {
+    e.preventDefault();
+    dragging.value = true;
+  }
+
+  function onDragLeave() {
+    dragging.value = false;
+  }
+
+  function onDrop(e: DragEvent) {
+    e.preventDefault();
+    dragging.value = false;
+    const f = e.dataTransfer?.files?.[0];
+    if (f) pickFile(f);
+  }
+
+  function onInputChange(e: Event) {
+    const f = (e.target as HTMLInputElement).files?.[0];
+    if (f) pickFile(f);
+  }
+
+  async function doImport() {
+    if (!file.value) return;
+    uploading.value = true;
+    error.value = null;
+    success.value = null;
+
+    try {
+      const arrayBuffer = await file.value.arrayBuffer();
+      const workbook = XLSX.read(arrayBuffer, { type: "array" });
+      let imported = 0;
+      let failed = 0;
+
+      for (const sheetName of workbook.SheetNames) {
+        const sheet = workbook.Sheets[sheetName];
+        const rows = XLSX.utils.sheet_to_json<{
+          numEtud: number;
+          idModule: string;
+          note: number;
+        }>(sheet, { header: ["numEtud", "idModule", "note"], range: 1 });
+
+        for (const row of rows) {
+          const res = await fetch("/notes/api/notes", {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify(row),
+          });
+          if (res.ok) imported++;
+          else failed++;
+        }
+      }
+
+      success.value =
+        `Import terminé — ${imported} ajouté${imported !== 1 ? "s" : ""}${
+          failed > 0 ? `, ${failed} erreur${failed !== 1 ? "s" : ""}` : ""
+        }`;
+    } catch {
+      error.value = "Erreur lors de la lecture du fichier.";
+    } finally {
+      uploading.value = false;
+    }
+  }
+
+  function downloadTemplate() {
+    const wb = XLSX.utils.book_new();
+    const ws = XLSX.utils.aoa_to_sheet([["numEtud", "idModule", "note"]]);
+    XLSX.utils.book_append_sheet(wb, ws, "Notes");
+    XLSX.writeFile(wb, "modele_notes.xlsx");
+  }
+
+  return (
+    <div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept=".xlsx,.xls"
+        style="display:none"
+        onChange={onInputChange}
+      />
+
+      <div
+        class={`drop-zone${dragging.value ? " dragging" : ""}`}
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+        onClick={() => inputRef.current?.click()}
+      >
+        <span class="drop-zone-icon">⬇</span>
+        {file.value
+          ? <span class="drop-zone-file">{file.value.name}</span>
+          : (
+            <>
+              <span class="drop-zone-text">Glisser le fichier .xlsx ici</span>
+              <span class="drop-zone-hint">ou cliquer pour parcourir</span>
+            </>
+          )}
+      </div>
+
+      {error.value && <p class="state-error">{error.value}</p>}
+      {success.value && (
+        <p style="font-size:0.82rem; color: light-dark(var(--light-accent-color), var(--dark-accent-color)); margin-bottom: 0.75rem">
+          {success.value}
+        </p>
+      )}
+
+      <div class="upload-actions">
+        <button
+          type="button"
+          class="btn btn-primary"
+          onClick={doImport}
+          disabled={!file.value || uploading.value}
+        >
+          {uploading.value ? "…" : "⊕ Importer"}
+        </button>
+        <button
+          type="button"
+          class="btn btn-secondary"
+          onClick={downloadTemplate}
+        >
+          ⊕ Télécharger Modèle
+        </button>
+      </div>
+
+      <p class="upload-format">
+        Format : <strong>numEtud</strong> | <strong>idModule</strong> |{" "}
+        <strong>note</strong>
+      </p>
+    </div>
+  );
+}

routes/(apps)/notes/(_props)/props.ts

@@ -8,8 +8,9 @@ const properties: AppProperties = {
     notes: "Mes notes",
     courses: "Consulter",
     ues: "UEs",
+    import: "Import xlsx",
   },
-  adminOnly: ["courses", "ues"],
+  adminOnly: ["courses", "ues", "import"],
   hint: "Student grading management",
 };
 

routes/(apps)/notes/partials/(admin)/import.tsx

@@ -0,0 +1,29 @@
+import {
+  getPartialsConfig,
+  makePartials,
+} from "$root/defaults/makePartials.tsx";
+import { FreshContext } from "$fresh/server.ts";
+import { State } from "$root/defaults/interfaces.ts";
+import ImportNotes from "../../(_islands)/ImportNotes.tsx";
+
+// deno-lint-ignore require-await
+async function ImportNotesPage(
+  _request: Request,
+  _context: FreshContext<State>,
+) {
+  return (
+    <div class="page-content">
+      <h2 class="page-title">Importer des Notes</h2>
+      <p
+        class="upload-format"
+        style="margin-bottom: 1.25rem"
+      >
+        POST /notes/api/notes
+      </p>
+      <ImportNotes />
+    </div>
+  );
+}
+
+export const config = getPartialsConfig();
+export default makePartials(ImportNotesPage);

routes/(apps)/students/(_islands)/UploadStudents.tsx

@@ -1,111 +1,154 @@
 // @deno-types="https://cdn.sheetjs.com/xlsx-0.20.3/package/types/index.d.ts"
 import * as XLSX from "https://cdn.sheetjs.com/xlsx-0.20.3/package/xlsx.mjs";
-import { Signal, useSignal } from "@preact/signals";
+import { useRef } from "preact/hooks";
+import { useSignal } from "@preact/signals";
 
-/**
+export default function UploadStudents() {
- * Create a new handler for file change that displays
+  const file = useSignal<File | null>(null);
- * messages in statusMessage and gets file data in fileData.
+  const dragging = useSignal(false);
- * @param statusMessage The status message signal.
+  const uploading = useSignal(false);
- * @param fileData The file data signal.
+  const error = useSignal<string | null>(null);
- * @returns The file change handler.
+  const success = useSignal<string | null>(null);
- */
+  const inputRef = useRef<HTMLInputElement>(null);
-function getFileChangeHandler(
-  statusMessage: Signal<string>,
-  fileData: Signal<File | null>,
-): (event: Event) => void {
-  /**
-   * Handle file change.
-   * @param event The file change event.
-   */
-  return (event: Event) => {
-    const input = event.target as HTMLInputElement;
-    if (input.files && input.files.length > 0) {
-      fileData.value = input.files[0];
-      statusMessage.value = `File selected: ${input.files[0].name}`;
-    } else {
-      fileData.value = null;
-      statusMessage.value = "No file selected";
-    }
-  };
-}
 
-/**
+  function pickFile(f: File) {
- * Create a new handler that sends data file to server.
+    if (!f.name.match(/\.xlsx?$/i)) {
- * @param statusMessage The status message signal.
+      error.value = "Fichier invalide — format attendu : .xlsx";
- * @param fileData The file data signal.
- * @returns The file confirmation handler.
- */
-function getUploadConfirmationFunction(
-  statusMessage: Signal<string>,
-  fileData: Signal<File | null>,
-): () => void {
-  /**
-   * Add students to database.
-   * @returns Confirm upload of students.
-   */
-  return () => {
-    if (!fileData.value) {
-      statusMessage.value = "Please select a file before confirming upload.";
       return;
     }
+    file.value = f;
+    error.value = null;
+    success.value = null;
+  }
 
-    const reader = new FileReader();
+  function onDragOver(e: DragEvent) {
+    e.preventDefault();
+    dragging.value = true;
+  }
 
-    /**
+  function onDragLeave() {
-     * Send all data to the server.
+    dragging.value = false;
-     * @param event The finished progress event.
+  }
-     */
+
-    reader.onload = async (event: ProgressEvent<FileReader>) => {
+  function onDrop(e: DragEvent) {
-      const arrayBuffer = event.target!.result as ArrayBuffer;
+    e.preventDefault();
+    dragging.value = false;
+    const f = e.dataTransfer?.files?.[0];
+    if (f) pickFile(f);
+  }
+
+  function onInputChange(e: Event) {
+    const f = (e.target as HTMLInputElement).files?.[0];
+    if (f) pickFile(f);
+  }
+
+  async function doImport() {
+    if (!file.value) return;
+    uploading.value = true;
+    error.value = null;
+    success.value = null;
+
+    try {
+      const arrayBuffer = await file.value.arrayBuffer();
       const workbook = XLSX.read(arrayBuffer, { type: "array" });
-      let allOK = true;
+      let imported = 0;
+      let failed = 0;
 
       for (const sheetName of workbook.SheetNames) {
         const sheet = workbook.Sheets[sheetName];
-        const data = XLSX.utils.sheet_to_json(sheet, {
+        const rows = XLSX.utils.sheet_to_json<{
-          header: ["userId", "lastName", "firstName", "mail"],
+          numEtud: number;
-          range: 1,
+          nom: string;
-        });
+          prenom: string;
+        }>(sheet, { header: ["numEtud", "nom", "prenom"], range: 1 });
 
-        const response = await fetch("/students/api/students", {
+        for (const row of rows) {
-          method: "POST",
+          const res = await fetch("/students/api/students", {
-          headers: { "Content-Type": "application/json" },
+            method: "POST",
-          body: JSON.stringify({ promoName: sheetName, data }),
+            headers: { "content-type": "application/json" },
-        });
+            body: JSON.stringify({ ...row, idPromo: sheetName }),
-
+          });
-        if (!response.ok) {
+          if (res.ok) imported++;
-          allOK = false;
+          else failed++;
         }
       }
 
-      statusMessage.value = allOK
+      success.value =
-        ? "Failed to insert all data."
+        `Import terminé — ${imported} ajouté${imported !== 1 ? "s" : ""}${
-        : "Data uploaded and inserted successfully!";
+          failed > 0 ? `, ${failed} erreur${failed !== 1 ? "s" : ""}` : ""
-    };
+        }`;
+    } catch {
+      error.value = "Erreur lors de la lecture du fichier.";
+    } finally {
+      uploading.value = false;
+    }
+  }
 
-    /**
+  function downloadTemplate() {
-     * Display error message if any.
+    const wb = XLSX.utils.book_new();
-     */
+    const ws = XLSX.utils.aoa_to_sheet([["numEtud", "nom", "prenom"]]);
-    reader.onerror = () => {
+    XLSX.utils.book_append_sheet(wb, ws, "4A22");
-      statusMessage.value = "Error reading the file.";
+    XLSX.writeFile(wb, "modele_etudiants.xlsx");
-    };
+  }
-
-    reader.readAsArrayBuffer(fileData.value);
-  };
-}
-
-export default function UploadStudents() {
-  const statusMessage = useSignal<string>("");
-  const fileData = useSignal<File | null>(null);
-
-  const handleFileChange = getFileChangeHandler(statusMessage, fileData);
-  const confirmUpload = getUploadConfirmationFunction(statusMessage, fileData);
 
   return (
-    <>
+    <div>
-      <input type="file" accept=".xlsx, .xls" onChange={handleFileChange} />
+      <input
-      <button type="button" onClick={confirmUpload}>Confirm Upload</button>
+        ref={inputRef}
-      <p>{statusMessage.value}</p>
+        type="file"
-    </>
+        accept=".xlsx,.xls"
+        style="display:none"
+        onChange={onInputChange}
+      />
+
+      <div
+        class={`drop-zone${dragging.value ? " dragging" : ""}`}
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+        onClick={() => inputRef.current?.click()}
+      >
+        <span class="drop-zone-icon">⬇</span>
+        {file.value
+          ? <span class="drop-zone-file">{file.value.name}</span>
+          : (
+            <>
+              <span class="drop-zone-text">Glisser le fichier .xlsx ici</span>
+              <span class="drop-zone-hint">ou cliquer pour parcourir</span>
+            </>
+          )}
+      </div>
+
+      {error.value && <p class="state-error">{error.value}</p>}
+      {success.value && (
+        <p style="font-size:0.82rem; color: light-dark(var(--light-accent-color), var(--dark-accent-color)); margin-bottom: 0.75rem">
+          {success.value}
+        </p>
+      )}
+
+      <div class="upload-actions">
+        <button
+          type="button"
+          class="btn btn-primary"
+          onClick={doImport}
+          disabled={!file.value || uploading.value}
+        >
+          {uploading.value ? "…" : "⊕ Importer"}
+        </button>
+        <button
+          type="button"
+          class="btn btn-secondary"
+          onClick={downloadTemplate}
+        >
+          ⊕ Télécharger Modèle
+        </button>
+      </div>
+
+      <p class="upload-format">
+        Format : <strong>promo</strong> (nom de la feuille) |{" "}
+        <strong>numEtud</strong> | <strong>nom</strong> |{" "}
+        <strong>prénom</strong>
+      </p>
+    </div>
   );
 }

routes/(apps)/students/partials/(admin)/upload.tsx

@@ -9,10 +9,16 @@ import { State } from "$root/defaults/interfaces.ts";
 // deno-lint-ignore require-await
 async function Students(_request: Request, _context: FreshContext<State>) {
   return (
-    <>
+    <div class="page-content">
-      <h2>Upload Students</h2>
+      <h2 class="page-title">Importer des Élèves</h2>
+      <p
+        class="upload-format"
+        style="margin-bottom: 1.25rem"
+      >
+        POST /students/api/students/import-csv
+      </p>
       <UploadStudents />
-    </>
+    </div>
   );
 }
 

static/styles/main.css

@@ -29,6 +29,10 @@
   font-family: var(--font-family-text);
 }
 
+html {
+  font-size: 130%; /* scale up from browser default 16px → ~20.8px */
+}
+
 html, body {
   margin: 0;
   padding: 0;

static/styles/ui.css

@@ -6,7 +6,6 @@
 
 .page-content {
   padding: 1.5rem;
-  max-width: 960px;
 }
 
 .page-title {
@@ -783,6 +782,70 @@
   text-decoration: underline;
 }
 
+/* -------------------------------------------------------
+   File drop zone (import pages)
+------------------------------------------------------- */
+
+.drop-zone {
+  border: 2px dashed
+    light-dark(var(--light-foreground-dimmer), var(--dark-foreground-dimmer));
+  border-radius: 6px;
+  background: light-dark(white, #141228);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
+  padding: 3rem 2rem;
+  cursor: pointer;
+  transition: border-color 150ms, background 150ms;
+  margin-bottom: 1.25rem;
+  text-align: center;
+}
+
+.drop-zone:hover,
+.drop-zone.dragging {
+  border-color: light-dark(var(--light-accent-color), var(--dark-accent-color));
+  background: light-dark(#f0fff4, #0a1a10);
+}
+
+.drop-zone-icon {
+  font-size: 2.4rem;
+  line-height: 1;
+  opacity: 0.8;
+}
+
+.drop-zone-text {
+  font-size: 0.88rem;
+  font-weight: var(--font-weight-bold);
+}
+
+.drop-zone-hint {
+  font-size: 0.75rem;
+  font-family: monospace;
+  color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
+}
+
+.drop-zone-file {
+  font-size: 0.78rem;
+  font-family: monospace;
+  color: light-dark(var(--light-accent-color), var(--dark-accent-color));
+  font-weight: var(--font-weight-bold);
+}
+
+.upload-actions {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.upload-format {
+  font-size: 0.72rem;
+  font-family: monospace;
+  color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
+}
+
 /* Info note box */
 .info-note {
   padding: 0.75rem 1rem;