Merge pull request 'chore: replace hand-rolled layout() with @fastify/view + EJS' (#20) from chore/ejs-view-templates into main

Convert all src/views/*.ts template-literal modules to .ejs templates
under views/. Register @fastify/view plugin in server.ts with EJS
engine and _layout.ejs as the layout file. Update route handlers to
use reply.view() instead of reply.send(layout(...)). Delete the old
TypeScript view modules and layout.ts.

Closes #19

Dockerfile

@@ -1,7 +1,7 @@
-FROM node:22-alpine
+FROM node:24-alpine
 
-# Install native build tools for bcrypt
-RUN apk add --no-cache python3 make g++
+# Install native build tools for bcrypt/better-sqlite3 + git for npm git-URL deps
+RUN apk add --no-cache python3 make g++ git
 
 WORKDIR /app
 

package.json

@@ -9,7 +9,10 @@
     "dev": "tsx src/index.ts",
     "test": "vitest run",
     "test:watch": "vitest",
-    "register-user": "tsx src/cli/register-user.ts"
+    "register-user": "tsx src/cli/register-user.ts",
+    "db:migrate": "tsx src/scripts/db-migrate.ts",
+    "db:status": "tsx src/scripts/db-status.ts",
+    "db:stamp": "tsx src/scripts/db-stamp.ts"
   },
   "author": "",
   "license": "ISC",
@@ -20,14 +23,18 @@
     "@fastify/multipart": "^9.4.0",
     "@fastify/rate-limit": "^10.3.0",
     "@fastify/static": "^9.0.0",
+    "@fastify/view": "^11.1.1",
+    "bchen-sqlite-migrate": "git+https://gitea.bchen.dev/brendan/sqlite-migrate.git#v0.1.0",
     "bcrypt": "^6.0.0",
     "better-sqlite3": "^12.6.2",
+    "ejs": "^5.0.2",
     "fastify": "^5.7.4",
     "nanoid": "^5.1.6"
   },
   "devDependencies": {
     "@types/bcrypt": "^6.0.0",
     "@types/better-sqlite3": "^7.6.13",
+    "@types/ejs": "^3.1.5",
     "@types/node": "^25.3.3",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",

src/db/migrations/0001_init.sql

@@ -0,0 +1,26 @@
+CREATE TABLE IF NOT EXISTS users (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  username TEXT NOT NULL UNIQUE,
+  password_hash TEXT NOT NULL,
+  created_at TEXT DEFAULT (datetime('now'))
+);
+
+CREATE TABLE IF NOT EXISTS files (
+  id TEXT PRIMARY KEY,
+  user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  original_name TEXT NOT NULL,
+  mime_type TEXT NOT NULL,
+  size INTEGER NOT NULL,
+  stored_name TEXT NOT NULL,
+  created_at TEXT DEFAULT (datetime('now'))
+);
+
+CREATE TABLE IF NOT EXISTS login_attempts (
+  username TEXT PRIMARY KEY,
+  failed_count INTEGER NOT NULL DEFAULT 0,
+  last_failed_at TEXT,
+  locked_until TEXT
+);
+
+CREATE INDEX IF NOT EXISTS idx_login_attempts_locked_until
+  ON login_attempts(locked_until);

src/db/schema.ts

@@ -1,38 +1,27 @@
+import path from 'node:path';
 import Database from 'better-sqlite3';
+import { applyMigrations } from 'bchen-sqlite-migrate';
+
+export const MIGRATIONS_DIR = path.resolve(import.meta.dirname, 'migrations');
+
+export function applySchema(db: Database.Database): void {
+  applyMigrations(db, MIGRATIONS_DIR, { genesisProbeTable: 'users' });
+}
 
 export function initDb(dbPath: string): Database.Database {
   const db = new Database(dbPath);
   db.pragma('journal_mode = WAL');
   db.pragma('foreign_keys = ON');
 
-  db.exec(`
-    CREATE TABLE IF NOT EXISTS users (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      username TEXT NOT NULL UNIQUE,
-      password_hash TEXT NOT NULL,
-      created_at TEXT DEFAULT (datetime('now'))
+  const stampGenesis = process.env.DB_MIGRATIONS_STAMP_GENESIS === '1';
+  const summary = applyMigrations(db, MIGRATIONS_DIR, {
+    stampGenesis,
+    genesisProbeTable: 'users',
+    logger: (msg) => process.stdout.write(`${msg}\n`),
+  });
+  process.stdout.write(
+    `migrations: ${summary.applied + summary.alreadyApplied} applied, ${summary.pending} pending\n`,
   );
 
-    CREATE TABLE IF NOT EXISTS files (
-      id TEXT PRIMARY KEY,
-      user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
-      original_name TEXT NOT NULL,
-      mime_type TEXT NOT NULL,
-      size INTEGER NOT NULL,
-      stored_name TEXT NOT NULL,
-      created_at TEXT DEFAULT (datetime('now'))
-    );
-
-    CREATE TABLE IF NOT EXISTS login_attempts (
-      username TEXT PRIMARY KEY,
-      failed_count INTEGER NOT NULL DEFAULT 0,
-      last_failed_at TEXT,
-      locked_until TEXT
-    );
-
-    CREATE INDEX IF NOT EXISTS idx_login_attempts_locked_until
-      ON login_attempts(locked_until);
-  `);
-
   return db;
 }

src/routes/pages.ts

@@ -12,11 +12,12 @@ import { saveFile, deleteStoredFile, getFilePath } from '../services/storage.ts'
 import { attemptLogin } from '../services/login-handler.ts';
 import { makeRequireAuth, issueSessionCookie } from '../middleware/auth.ts';
 import { SESSION_COOKIE_NAME } from '../constants.ts';
-import { loginPage } from '../views/login.ts';
-import { uploadPage, uploadResultPage } from '../views/upload.ts';
-import { fileListPage } from '../views/file-list.ts';
-import { fileViewPage } from '../views/file-view.ts';
-import { notFoundPage } from '../views/not-found.ts';
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
 
 interface Deps {
   db: Database.Database;
@@ -65,7 +66,7 @@ export const pageRoutes: FastifyPluginAsync<{ deps: Deps }> = async (app, { deps
       await request.jwtVerify();
       return reply.redirect('/upload');
     } catch {
-      return reply.type('text/html').send(loginPage());
+      return reply.view('login.ejs', { title: 'Login', error: null });
     }
   });
 
@@ -85,13 +86,12 @@ export const pageRoutes: FastifyPluginAsync<{ deps: Deps }> = async (app, { deps
 
       if (result.kind === 'locked') {
         return reply
-          .type('text/html')
           .header('Retry-After', String(result.retryAfterSeconds))
-          .send(loginPage({ error: 'Invalid username or password' }));
+          .view('login.ejs', { title: 'Login', error: 'Invalid username or password' });
       }
 
       if (result.kind !== 'success') {
-        return reply.type('text/html').send(loginPage({ error: 'Invalid username or password' }));
+        return reply.view('login.ejs', { title: 'Login', error: 'Invalid username or password' });
       }
 
       issueSessionCookie(
@@ -111,7 +111,7 @@ export const pageRoutes: FastifyPluginAsync<{ deps: Deps }> = async (app, { deps
 
   // GET /upload
   app.get('/upload', { preHandler: requireAuth }, async (_request, reply) => {
-    reply.type('text/html').send(uploadPage());
+    return reply.view('upload.ejs', { title: 'Upload', authed: true, error: null });
   });
 
   // POST /upload
@@ -120,7 +120,7 @@ export const pageRoutes: FastifyPluginAsync<{ deps: Deps }> = async (app, { deps
 
     const data = await request.file();
     if (!data) {
-      return reply.type('text/html').send(uploadPage({ error: 'No file selected' }));
+      return reply.view('upload.ejs', { title: 'Upload', authed: true, error: 'No file selected' });
     }
 
     const fileBuffer = await data.toBuffer();
@@ -141,14 +141,15 @@ export const pageRoutes: FastifyPluginAsync<{ deps: Deps }> = async (app, { deps
     });
 
     const shareUrl = `${config.baseUrl}/f/${id}`;
-    reply.type('text/html').send(uploadResultPage(shareUrl, data.filename));
+    return reply.view('upload-result.ejs', { title: 'File uploaded', authed: true, shareUrl, filename: data.filename });
   });
 
   // GET /files
   app.get('/files', { preHandler: requireAuth }, async (request, reply) => {
     const { sub: userId } = request.user as JwtPayload;
     const files = getFilesByUserId(db, userId);
-    reply.type('text/html').send(fileListPage(files, config.baseUrl));
+    const filesWithSize = files.map((f) => ({ ...f, sizeFormatted: formatBytes(f.size) }));
+    return reply.view('file-list.ejs', { title: 'My files', authed: true, files: filesWithSize, baseUrl: config.baseUrl });
   });
 
   // POST /files/:id/delete
@@ -182,11 +183,17 @@ export const pageRoutes: FastifyPluginAsync<{ deps: Deps }> = async (app, { deps
 
     if (!file) {
       await logger.fileNotFound({ ip: request.ip, userAgent: request.headers['user-agent'] ?? '', fileId: id });
-      return reply.status(404).type('text/html').send(notFoundPage());
+      return reply.status(404).view('not-found.ejs', { title: 'Not found' });
     }
 
     const isOwner = userId !== null && userId === file.user_id;
-    reply.type('text/html').send(fileViewPage(file, isOwner));
+    return reply.view('file-view.ejs', {
+      title: file.original_name,
+      authed: isOwner,
+      hideHeader: !isOwner,
+      file,
+      isOwner,
+    });
   });
 
   // GET /f/:id/raw — serve raw file with range request support
@@ -235,6 +242,6 @@ export const pageRoutes: FastifyPluginAsync<{ deps: Deps }> = async (app, { deps
 
   // 404 handler
   app.setNotFoundHandler((_request, reply) => {
-    reply.status(404).type('text/html').send(notFoundPage());
+    return reply.status(404).view('not-found.ejs', { title: 'Not found' });
   });
 };

src/scripts/_db-cli.ts

@@ -0,0 +1,21 @@
+import { mkdirSync } from 'node:fs';
+import { dirname } from 'node:path';
+import Database from 'better-sqlite3';
+import { loadConfig } from '../config.ts';
+import { MIGRATIONS_DIR } from '../db/schema.ts';
+
+export interface DbCliContext {
+  db: Database.Database;
+  migrationsDir: string;
+}
+
+export function openDbFromConfig(): DbCliContext {
+  const config = loadConfig();
+  mkdirSync(dirname(config.dbPath), { recursive: true });
+
+  const db = new Database(config.dbPath);
+  db.pragma('journal_mode = WAL');
+  db.pragma('foreign_keys = ON');
+
+  return { db, migrationsDir: MIGRATIONS_DIR };
+}

src/scripts/db-migrate.ts

@@ -0,0 +1,26 @@
+import { applyMigrations } from 'bchen-sqlite-migrate';
+import { openDbFromConfig } from './_db-cli.ts';
+
+const { db, migrationsDir } = openDbFromConfig();
+
+const stampGenesis = process.env.DB_MIGRATIONS_STAMP_GENESIS === '1';
+const summary = applyMigrations(db, migrationsDir, {
+  stampGenesis,
+  genesisProbeTable: 'users',
+  logger: (msg) => process.stdout.write(`${msg}\n`),
+});
+
+if (summary.stamped.length > 0) {
+  process.stdout.write(`stamped:${summary.stamped.join(',')}\n`);
+}
+if (summary.applied === 0 && summary.stamped.length === 0) {
+  process.stdout.write(`pending:none\n`);
+} else if (summary.applied > 0) {
+  process.stdout.write(`applied:${summary.applied}\n`);
+}
+process.stdout.write(
+  `migrations: ${summary.applied + summary.alreadyApplied} applied, ${summary.pending} pending\n`,
+);
+
+db.close();
+process.exit(0);

src/scripts/db-stamp.ts

@@ -0,0 +1,22 @@
+import { stampMigration } from 'bchen-sqlite-migrate';
+import { openDbFromConfig } from './_db-cli.ts';
+
+const version = process.argv[2];
+if (!version) {
+  process.stderr.write('Usage: npm run db:stamp -- <version>\n');
+  process.exit(1);
+}
+
+const { db, migrationsDir } = openDbFromConfig();
+
+try {
+  const file = stampMigration(db, migrationsDir, version);
+  process.stdout.write(`stamped:${file.version}\n`);
+  db.close();
+  process.exit(0);
+} catch (err) {
+  const msg = err instanceof Error ? err.message : String(err);
+  process.stderr.write(`error: ${msg}\n`);
+  db.close();
+  process.exit(1);
+}

src/scripts/db-status.ts

@@ -0,0 +1,34 @@
+import { listMigrations, readAppliedRows } from 'bchen-sqlite-migrate';
+import { openDbFromConfig } from './_db-cli.ts';
+
+const { db, migrationsDir } = openDbFromConfig();
+
+const files = listMigrations(migrationsDir);
+const appliedByVersion = new Map(readAppliedRows(db).map((r) => [r.version, r]));
+
+let exitCode = 0;
+const pending: string[] = [];
+const mismatched: string[] = [];
+
+for (const file of files) {
+  const applied = appliedByVersion.get(file.version);
+  if (!applied) {
+    pending.push(file.version);
+    process.stdout.write(`pending:${file.version}\n`);
+    continue;
+  }
+  if (applied.checksum !== file.checksum) {
+    mismatched.push(file.version);
+    process.stdout.write(`checksum-mismatch:${file.version}\n`);
+    exitCode = 2;
+    continue;
+  }
+  process.stdout.write(`applied:${file.version}\n`);
+}
+
+if (pending.length === 0 && mismatched.length === 0) {
+  process.stdout.write(`pending:none\n`);
+}
+
+db.close();
+process.exit(exitCode);

src/server.ts

@@ -5,6 +5,8 @@ import fastifyMultipart from '@fastify/multipart';
 import fastifyFormbody from '@fastify/formbody';
 import fastifyStatic from '@fastify/static';
 import fastifyRateLimit from '@fastify/rate-limit';
+import fastifyView from '@fastify/view';
+import ejs from 'ejs';
 import { join } from 'path';
 import { fileURLToPath } from 'url';
 import type Database from 'better-sqlite3';
@@ -39,6 +41,12 @@ export function createServer({ config, db }: ServerDeps) {
     root: join(__dirname, '..', 'public'),
     prefix: '/public/',
   });
+  app.register(fastifyView, {
+    engine: { ejs },
+    root: join(__dirname, '..', 'views'),
+    layout: '_layout.ejs',
+    defaultContext: { authed: false, hideHeader: false },
+  });
   app.register(fastifyRateLimit, {
     global: false,
     keyGenerator: (req) => req.ip,

src/views/file-list.ts

@@ -1,44 +0,0 @@
-import { layout, escHtml } from './layout.ts';
-import type { FileRow } from '../db/files.ts';
-
-export function fileListPage(files: FileRow[], baseUrl: string): string {
-  const rows = files.length === 0
-    ? '<tr><td colspan="5">No files yet. <a href="/upload">Upload one.</a></td></tr>'
-    : files.map((f) => {
-        const shareUrl = `${baseUrl}/f/${escHtml(f.id)}`;
-        return `
-        <tr>
-          <td><a href="/f/${escHtml(f.id)}">${escHtml(f.original_name)}</a></td>
-          <td>${escHtml(f.mime_type)}</td>
-          <td>${formatBytes(f.size)}</td>
-          <td>${escHtml(f.created_at)}</td>
-          <td>
-            <button class="copy-link" onclick="navigator.clipboard.writeText('${shareUrl}')">Copy link</button>
-            <form method="POST" action="/files/${escHtml(f.id)}/delete" style="display:inline">
-              <button type="submit" class="danger">Delete</button>
-            </form>
-          </td>
-        </tr>`;
-      }).join('');
-
-  return layout('My files', `
-    <h1>My files</h1>
-    <p><a href="/upload">Upload new file</a></p>
-    <div class="table-wrap">
-      <table>
-        <thead>
-          <tr>
-            <th>Name</th><th>Type</th><th>Size</th><th>Uploaded</th><th></th>
-          </tr>
-        </thead>
-        <tbody>${rows}</tbody>
-      </table>
-    </div>
-  `, { authed: true });
-}
-
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}

src/views/file-view.ts

@@ -1,38 +0,0 @@
-import { layout, escHtml } from './layout.ts';
-import type { FileRow } from '../db/files.ts';
-
-export function fileViewPage(file: FileRow, isOwner: boolean): string {
-  const rawUrl = escHtml(`/f/${file.id}/raw`);
-  const safeName = escHtml(file.original_name);
-  const actions = `
-    <div class="file-actions">
-      <a href="${rawUrl}" download="${safeName}" class="btn">Download</a>
-      <a href="${rawUrl}" target="_blank" class="btn">Open</a>
-    </div>`;
-
-  const deleteForm = isOwner
-    ? `<form method="POST" action="/files/${escHtml(file.id)}/delete">
-      <button type="submit" class="danger">Delete</button>
-    </form>`
-    : '';
-
-  let media = '';
-  if (file.mime_type.startsWith('image/')) {
-    media = `<img src="${rawUrl}" alt="${safeName}">`;
-  } else if (file.mime_type.startsWith('video/')) {
-    media = `<video controls src="${rawUrl}" preload="metadata"></video>`;
-  } else if (file.mime_type.startsWith('audio/')) {
-    media = `<audio controls src="${rawUrl}" preload="metadata"></audio>`;
-  }
-
-  const layoutOpts = isOwner ? { authed: true } : { hideHeader: true };
-
-  return layout(file.original_name, `
-    <div class="file-view">
-      <h1>${safeName}</h1>
-      ${media}
-      ${actions}
-      ${deleteForm}
-    </div>
-  `, layoutOpts);
-}

src/views/layout.ts

@@ -1,45 +0,0 @@
-export function layout(title: string, body: string, opts: { authed?: boolean; hideHeader?: boolean } = {}): string {
-  const { authed = false, hideHeader = false } = opts;
-  const nav = authed
-    ? `<nav>
-        <a href="/upload">Upload</a>
-        <a href="/files">My Files</a>
-        <form method="POST" action="/logout" style="display:inline">
-          <button type="submit">Logout</button>
-        </form>
-       </nav>`
-    : '';
-
-  const header = hideHeader
-    ? ''
-    : `  <header>
-    <a href="/" class="logo">Nanodrop</a>
-    ${nav}
-  </header>`;
-
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="color-scheme" content="light dark">
-  <title>${escHtml(title)} — Nanodrop</title>
-  <link rel="stylesheet" href="/public/style.css">
-</head>
-<body>
-${header}
-  <main>
-    ${body}
-  </main>
-</body>
-</html>`;
-}
-
-export function escHtml(str: string): string {
-  return str
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
-}

src/views/login.ts

@@ -1,25 +0,0 @@
-import { layout } from './layout.ts';
-
-export function loginPage(opts: { error?: string } = {}): string {
-  const errorHtml = opts.error
-    ? `<p class="error">${opts.error}</p>`
-    : '';
-
-  return layout('Login', `
-    <div class="form-container">
-      <h1>Sign in</h1>
-      ${errorHtml}
-      <form method="POST" action="/login">
-        <label>
-          Username
-          <input type="text" name="username" required autofocus>
-        </label>
-        <label>
-          Password
-          <input type="password" name="password" required>
-        </label>
-        <button type="submit">Login</button>
-      </form>
-    </div>
-  `);
-}

src/views/not-found.ts

@@ -1,11 +0,0 @@
-import { layout } from './layout.ts';
-
-export function notFoundPage(): string {
-  return layout('Not found', `
-    <div class="form-container">
-      <h1>404 — Not found</h1>
-      <p>The page or file you requested does not exist.</p>
-      <p><a href="/">Go home</a></p>
-    </div>
-  `);
-}

src/views/upload.ts

@@ -1,36 +0,0 @@
-import { layout, escHtml } from './layout.ts';
-
-export function uploadPage(opts: { error?: string } = {}): string {
-  const errorHtml = opts.error ? `<p class="error">${opts.error}</p>` : '';
-
-  return layout('Upload', `
-    <div class="form-container">
-      <h1>Upload a file</h1>
-      ${errorHtml}
-      <form method="POST" action="/upload" enctype="multipart/form-data">
-        <label>
-          File
-          <input type="file" name="file" required>
-        </label>
-        <button type="submit">Upload</button>
-      </form>
-    </div>
-  `, { authed: true });
-}
-
-export function uploadResultPage(shareUrl: string, filename: string): string {
-  const safeUrl = escHtml(shareUrl);
-  const safeName = escHtml(filename);
-
-  return layout('File uploaded', `
-    <div class="form-container">
-      <h1>File uploaded</h1>
-      <p><strong>${safeName}</strong> is ready to share.</p>
-      <div class="share-box">
-        <input type="text" id="share-url" value="${safeUrl}" readonly>
-        <button onclick="navigator.clipboard.writeText(document.getElementById('share-url').value)">Copy link</button>
-      </div>
-      <p><a href="/upload">Upload another</a> &middot; <a href="/files">My files</a></p>
-    </div>
-  `, { authed: true });
-}

tests/unit/migrations-byte-stable.test.ts

@@ -0,0 +1,18 @@
+import { readFileSync } from 'node:fs';
+import { createHash } from 'node:crypto';
+import { resolve } from 'node:path';
+import { describe, it, expect } from 'vitest';
+
+const EXPECTED_0001_SHA256 =
+  '34f092b4bb8544a48acfee0fad08d51b1b75fedf4ffdfbcb790d2656d0f1d57a';
+
+describe('migrations byte stability', () => {
+  it('0001_init.sql sha256 is frozen — edit means new migration, not edit-in-place', () => {
+    const body = readFileSync(
+      resolve(import.meta.dirname, '..', '..', 'src', 'db', 'migrations', '0001_init.sql'),
+      'utf8',
+    );
+    const actual = createHash('sha256').update(body).digest('hex');
+    expect(actual).toBe(EXPECTED_0001_SHA256);
+  });
+});

views/_layout.ejs

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
+  <title><%= title %> — Nanodrop</title>
+  <link rel="stylesheet" href="/public/style.css">
+</head>
+<body>
+<% if (!hideHeader) { %>
+  <header>
+    <a href="/" class="logo">Nanodrop</a>
+    <% if (authed) { %>
+    <nav>
+      <a href="/upload">Upload</a>
+      <a href="/files">My Files</a>
+      <form method="POST" action="/logout" style="display:inline">
+        <button type="submit">Logout</button>
+      </form>
+    </nav>
+    <% } %>
+  </header>
+<% } %>
+  <main>
+    <%- body %>
+  </main>
+</body>
+</html>

views/file-list.ejs

@@ -0,0 +1,31 @@
+<h1>My files</h1>
+<p><a href="/upload">Upload new file</a></p>
+<div class="table-wrap">
+  <table>
+    <thead>
+      <tr>
+        <th>Name</th><th>Type</th><th>Size</th><th>Uploaded</th><th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <% if (files.length === 0) { %>
+      <tr><td colspan="5">No files yet. <a href="/upload">Upload one.</a></td></tr>
+      <% } else { %>
+      <% files.forEach(function(f) { %>
+      <tr>
+        <td><a href="/f/<%= f.id %>"><%= f.original_name %></a></td>
+        <td><%= f.mime_type %></td>
+        <td><%= f.sizeFormatted %></td>
+        <td><%= f.created_at %></td>
+        <td>
+          <button class="copy-link" onclick="navigator.clipboard.writeText('<%= baseUrl %>/f/<%= f.id %>')">Copy link</button>
+          <form method="POST" action="/files/<%= f.id %>/delete" style="display:inline">
+            <button type="submit" class="danger">Delete</button>
+          </form>
+        </td>
+      </tr>
+      <% }); %>
+      <% } %>
+    </tbody>
+  </table>
+</div>

views/file-view.ejs

@@ -0,0 +1,19 @@
+<div class="file-view">
+  <h1><%= file.original_name %></h1>
+  <% if (file.mime_type.startsWith('image/')) { %>
+  <img src="/f/<%= file.id %>/raw" alt="<%= file.original_name %>">
+  <% } else if (file.mime_type.startsWith('video/')) { %>
+  <video controls src="/f/<%= file.id %>/raw" preload="metadata"></video>
+  <% } else if (file.mime_type.startsWith('audio/')) { %>
+  <audio controls src="/f/<%= file.id %>/raw" preload="metadata"></audio>
+  <% } %>
+  <div class="file-actions">
+    <a href="/f/<%= file.id %>/raw" download="<%= file.original_name %>" class="btn">Download</a>
+    <a href="/f/<%= file.id %>/raw" target="_blank" class="btn">Open</a>
+  </div>
+  <% if (isOwner) { %>
+  <form method="POST" action="/files/<%= file.id %>/delete">
+    <button type="submit" class="danger">Delete</button>
+  </form>
+  <% } %>
+</div>

views/login.ejs

@@ -0,0 +1,17 @@
+<div class="form-container">
+  <h1>Sign in</h1>
+  <% if (error) { %>
+  <p class="error"><%= error %></p>
+  <% } %>
+  <form method="POST" action="/login">
+    <label>
+      Username
+      <input type="text" name="username" required autofocus>
+    </label>
+    <label>
+      Password
+      <input type="password" name="password" required>
+    </label>
+    <button type="submit">Login</button>
+  </form>
+</div>

views/not-found.ejs

@@ -0,0 +1,5 @@
+<div class="form-container">
+  <h1>404 — Not found</h1>
+  <p>The page or file you requested does not exist.</p>
+  <p><a href="/">Go home</a></p>
+</div>

views/upload-result.ejs

@@ -0,0 +1,9 @@
+<div class="form-container">
+  <h1>File uploaded</h1>
+  <p><strong><%= filename %></strong> is ready to share.</p>
+  <div class="share-box">
+    <input type="text" id="share-url" value="<%= shareUrl %>" readonly>
+    <button onclick="navigator.clipboard.writeText(document.getElementById('share-url').value)">Copy link</button>
+  </div>
+  <p><a href="/upload">Upload another</a> &middot; <a href="/files">My files</a></p>
+</div>

views/upload.ejs

@@ -0,0 +1,13 @@
+<div class="form-container">
+  <h1>Upload a file</h1>
+  <% if (error) { %>
+  <p class="error"><%= error %></p>
+  <% } %>
+  <form method="POST" action="/upload" enctype="multipart/form-data">
+    <label>
+      File
+      <input type="file" name="file" required>
+    </label>
+    <button type="submit">Upload</button>
+  </form>
+</div>