Initial Commit

2026-05-26 16:04:14 +08:00
commit 5d6f228224
62 changed files with 10152 additions and 0 deletions
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -0,0 +1,23 @@
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { isAuthenticated } from './api';
+import Login from './pages/Login';
+import Apps from './pages/Apps';
+import Catalog from './pages/Catalog';
+import Viewer from './pages/Viewer';
+
+function ProtectedRoute({ children }) {
+  return isAuthenticated() ? children : <Navigate to="/login" replace />;
+}
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/" element={<ProtectedRoute><Catalog /></ProtectedRoute>} />
+        <Route path="/apps" element={<ProtectedRoute><Apps /></ProtectedRoute>} />
+        <Route path="/viewer/:id" element={<ProtectedRoute><Viewer /></ProtectedRoute>} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
--- a/client/src/api.js
+++ b/client/src/api.js
@@ -0,0 +1,145 @@
+const ADS_BASE = '/api/ads';
+const APPS_BASE = '/api/apps';
+
+function authHeaders(extra = {}) {
+  const token = localStorage.getItem('showcase_token');
+  return token ? { Authorization: `Bearer ${token}`, ...extra } : { ...extra };
+}
+
+async function apiFetch(url, options = {}) {
+  const res = await fetch(url, {
+    ...options,
+    headers: { ...authHeaders(), ...options.headers },
+  });
+  if (res.status === 401) {
+    localStorage.removeItem('showcase_token');
+    window.location.href = '/login';
+    throw new Error('Unauthorized');
+  }
+  return res;
+}
+
+// ── auth ─────────────────────────────────────────────────────────────────────
+
+export async function login(password) {
+  const res = await fetch('/api/auth/login', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ password }),
+  });
+  if (!res.ok) throw new Error('Invalid password');
+  const { token } = await res.json();
+  localStorage.setItem('showcase_token', token);
+}
+
+export function logout() {
+  localStorage.removeItem('showcase_token');
+}
+
+export function isAuthenticated() {
+  return !!localStorage.getItem('showcase_token');
+}
+
+// ── ads ──────────────────────────────────────────────────────────────────────
+
+export async function listAds(appId) {
+  const url = appId ? `${ADS_BASE}?appId=${encodeURIComponent(appId)}` : ADS_BASE;
+  const res = await apiFetch(url);
+  if (!res.ok) throw new Error('Failed to fetch ads');
+  return res.json();
+}
+
+export async function getAd(id) {
+  const res = await apiFetch(`${ADS_BASE}/${id}`);
+  if (!res.ok) throw new Error('Ad not found');
+  return res.json();
+}
+
+export async function uploadAd(file) {
+  const form = new FormData();
+  form.append('file', file);
+  const res = await apiFetch(ADS_BASE, { method: 'POST', body: form });
+  if (!res.ok) throw new Error('Upload failed');
+  return res.json();
+}
+
+export async function updateAd(id, data) {
+  const res = await apiFetch(`${ADS_BASE}/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) throw new Error('Update failed');
+  return res.json();
+}
+
+export async function updateAdFile(id, file) {
+  const form = new FormData();
+  form.append('file', file);
+  const res = await apiFetch(`${ADS_BASE}/${id}/file`, { method: 'POST', body: form });
+  if (!res.ok) throw new Error('File update failed');
+  return res.json();
+}
+
+export async function deleteAd(id) {
+  const res = await apiFetch(`${ADS_BASE}/${id}`, { method: 'DELETE' });
+  if (!res.ok) throw new Error('Delete failed');
+}
+
+export async function requestScreenshot(id) {
+  const res = await apiFetch(`${ADS_BASE}/${id}/screenshot`, { method: 'POST' });
+  if (!res.ok) throw new Error('Screenshot failed');
+  return res.json();
+}
+
+export async function saveThumbnail(id, dataUrl) {
+  const res = await apiFetch(`${ADS_BASE}/${id}/thumbnail`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ dataUrl }),
+  });
+  if (!res.ok) throw new Error('Thumbnail save failed');
+  return res.json();
+}
+
+// ── apps ─────────────────────────────────────────────────────────────────────
+
+export async function lookupApp(url) {
+  const res = await apiFetch(`${APPS_BASE}/lookup?url=${encodeURIComponent(url)}`);
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error || 'Lookup failed');
+  }
+  return res.json();
+}
+
+export async function listApps() {
+  const res = await apiFetch(APPS_BASE);
+  if (!res.ok) throw new Error('Failed to fetch apps');
+  return res.json();
+}
+
+export async function createApp(data) {
+  const res = await apiFetch(APPS_BASE, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) throw new Error('Create app failed');
+  return res.json();
+}
+
+export async function updateApp(id, data) {
+  const res = await apiFetch(`${APPS_BASE}/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) throw new Error('Update app failed');
+  return res.json();
+}
+
+export async function deleteApp(id) {
+  const res = await apiFetch(`${APPS_BASE}/${id}`, { method: 'DELETE' });
+  if (!res.ok) throw new Error('Delete app failed');
+}
--- a/client/src/assets/hero.png
+++ b/client/src/assets/hero.png
--- a/client/src/assets/react.svg
+++ b/client/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/client/src/assets/vite.svg
+++ b/client/src/assets/vite.svg
--- a/client/src/components/AdCard.css
+++ b/client/src/components/AdCard.css
@@ -0,0 +1,153 @@
+.ad-card {
+  background: #1e1e1e;
+  border-radius: 12px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #2e2e2e;
+  transition: border-color 0.2s, transform 0.15s;
+}
+
+.ad-card:hover {
+  border-color: #7c6af7;
+  transform: translateY(-2px);
+}
+
+.ad-card__thumb {
+  aspect-ratio: 9 / 19.5;
+  background: #111;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+}
+
+.ad-card__thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.ad-card__thumb-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px;
+  text-align: center;
+}
+
+.ad-card__thumb-name {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: #aaa;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ad-card__thumb-hint {
+  font-size: 0.7rem;
+  color: #555;
+}
+
+.ad-card__body {
+  padding: 10px 12px 6px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ad-card__top-row {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.ad-card__app-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 7px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.ad-card__top-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.ad-card__title {
+  font-size: 0.88rem;
+  font-weight: 600;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #e8e8e8;
+}
+
+.ad-card__app {
+  font-size: 0.75rem;
+  color: #9d8ef7;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ad-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.ad-card__meta {
+  font-size: 0.7rem;
+  color: #555;
+  font-family: monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ad-card__actions {
+  display: flex;
+  border-top: 1px solid #2e2e2e;
+}
+
+.ad-card__actions button {
+  flex: 1;
+  background: none;
+  border: none;
+  border-right: 1px solid #2e2e2e;
+  color: #aaa;
+  padding: 8px 0;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background 0.15s, color 0.15s;
+}
+
+.ad-card__actions button:last-child {
+  border-right: none;
+}
+
+.ad-card__actions button:hover {
+  background: #2a2a2a;
+  color: #fff;
+}
+
+.ad-card__actions .ad-card__delete:hover {
+  background: #3a1a1a;
+  color: #f77;
+}
--- a/client/src/components/AdCard.jsx
+++ b/client/src/components/AdCard.jsx
@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import './AdCard.css';
+
+export default function AdCard({ ad, app, onEdit, onDelete }) {
+  const navigate = useNavigate();
+  const [thumbError, setThumbError] = useState(false);
+  const [iconError, setIconError] = useState(false);
+  const showThumb = ad.thumbnail && !thumbError;
+  const showIcon = app?.icon_url && !iconError;
+
+  return (
+    <div className="ad-card">
+      <div className="ad-card__thumb" onClick={() => navigate(`/viewer/${ad.id}`)}>
+        {showThumb ? (
+          <img
+            src={`/uploads/${ad.thumbnail}`}
+            alt={ad.title}
+            className="ad-card__thumb-img"
+            onError={() => setThumbError(true)}
+          />
+        ) : (
+          <div className="ad-card__thumb-placeholder">
+            <span className="ad-card__thumb-name">{ad.title}</span>
+            <span className="ad-card__thumb-hint">Open to screenshot</span>
+          </div>
+        )}
+      </div>
+      <div className="ad-card__body">
+        <div className="ad-card__top-row">
+          {showIcon && (
+            <img
+              src={app.icon_url}
+              className="ad-card__app-icon"
+              alt=""
+              onError={() => setIconError(true)}
+            />
+          )}
+          <div className="ad-card__top-text">
+            <h3 className="ad-card__title" title={ad.title}>{ad.title}</h3>
+            {app && <span className="ad-card__app">{app.name}</span>}
+          </div>
+        </div>
+      </div>
+      <div className="ad-card__actions">
+        <button onClick={() => navigate(`/viewer/${ad.id}`)} title="Open viewer">▶</button>
+        <button onClick={() => onEdit(ad)} title="Edit metadata">✎</button>
+        <button onClick={() => onDelete(ad)} title="Delete" className="ad-card__delete">✕</button>
+      </div>
+    </div>
+  );
+}
--- a/client/src/components/AppLayout.css
+++ b/client/src/components/AppLayout.css
@@ -0,0 +1,178 @@
+.app-layout {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+  background: #0e0e0e;
+}
+
+.app-sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  background: #141414;
+  border-right: 1px solid #222;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.app-layout__main {
+  flex: 1;
+  overflow: auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Hamburger — hidden on desktop */
+.app-layout__hamburger {
+  display: none;
+}
+
+/* Overlay — only used on mobile */
+.app-layout__overlay {
+  display: none;
+}
+
+/* ── Shared sidebar building blocks ─────────────────────────────────────── */
+
+.sb-brand {
+  padding: 20px 16px 14px;
+  font-size: 0.88rem;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  background: linear-gradient(135deg, #7c6af7, #b89bf7);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  flex-shrink: 0;
+}
+
+.sb-divider {
+  height: 1px;
+  background: #222;
+  margin: 4px 0;
+  flex-shrink: 0;
+}
+
+.sb-section-label {
+  padding: 10px 14px 4px;
+  font-size: 0.68rem;
+  font-weight: 700;
+  color: #444;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  flex-shrink: 0;
+}
+
+.sb-nav {
+  padding: 6px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sb-btn {
+  background: none;
+  border: none;
+  border-radius: 8px;
+  color: #888;
+  padding: 8px 10px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.15s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sb-btn:hover {
+  background: #1e1e1e;
+  color: #e8e8e8;
+}
+
+.sb-btn--active {
+  background: #2a2440;
+  color: #9d8ef7;
+}
+
+.sb-btn--primary {
+  background: #2a2440;
+  color: #9d8ef7;
+  border: 1px solid #3d3060;
+  font-weight: 600;
+}
+
+.sb-btn--primary:hover {
+  background: #352d55;
+  color: #b8aaf9;
+}
+
+.sb-app-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.sb-app-icon-placeholder {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  background: #2a2a2a;
+  flex-shrink: 0;
+}
+
+/* ── Mobile ──────────────────────────────────────────────────────────────── */
+
+@media (max-width: 680px) {
+  .app-sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 200;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+  }
+
+  .app-sidebar.is-open {
+    transform: translateX(0);
+    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.7);
+  }
+
+  .app-layout__overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.55);
+    backdrop-filter: blur(2px);
+    z-index: 199;
+  }
+
+  .app-layout__hamburger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    z-index: 198;
+    width: 36px;
+    height: 36px;
+    background: #1a1a1a;
+    border: 1px solid #2a2a2a;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #888;
+    font-size: 1.1rem;
+    line-height: 1;
+  }
+
+  .app-layout__main {
+    padding-top: 56px;
+  }
+}
--- a/client/src/components/AppLayout.jsx
+++ b/client/src/components/AppLayout.jsx
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import './AppLayout.css';
+
+export default function AppLayout({ sidebar, children }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="app-layout">
+      <aside className={`app-sidebar${open ? ' is-open' : ''}`}>
+        {sidebar}
+      </aside>
+
+      {open && (
+        <div className="app-layout__overlay" onClick={() => setOpen(false)} />
+      )}
+
+      <button
+        className="app-layout__hamburger"
+        onClick={() => setOpen(o => !o)}
+        aria-label="Toggle menu"
+      >
+        ☰
+      </button>
+
+      <div className="app-layout__main">{children}</div>
+    </div>
+  );
+}
--- a/client/src/components/AppModal.jsx
+++ b/client/src/components/AppModal.jsx
@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState } from 'react';
+import { lookupApp } from '../api';
+import '../pages/Apps.css';
+
+export default function AppModal({ app, onSave, onClose }) {
+  const dialogRef = useRef();
+  const [name, setName] = useState(app?.name || '');
+  const [iosUrl, setIosUrl] = useState(app?.ios_url || '');
+  const [androidUrl, setAndroidUrl] = useState(app?.android_url || '');
+  const [iconUrl, setIconUrl] = useState(app?.icon_url || '');
+  const [fetching, setFetching] = useState(false);
+  const [fetchError, setFetchError] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    dialogRef.current?.showModal();
+    return () => dialogRef.current?.close();
+  }, []);
+
+  async function handleUrlBlur(url) {
+    const trimmed = url.trim();
+    if (!trimmed || (!trimmed.includes('apps.apple.com') && !trimmed.includes('play.google.com'))) return;
+    setFetching(true);
+    setFetchError('');
+    try {
+      const data = await lookupApp(trimmed);
+      if (!name) setName(data.name);
+      if (data.icon_url) setIconUrl(data.icon_url);
+    } catch (err) {
+      setFetchError(err.message);
+    } finally {
+      setFetching(false);
+    }
+  }
+
+  async function handleSave() {
+    if (!name.trim()) return;
+    setSaving(true);
+    try {
+      await onSave({ name: name.trim(), ios_url: iosUrl.trim(), android_url: androidUrl.trim(), icon_url: iconUrl });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <dialog ref={dialogRef} className="app-modal" onClose={onClose}>
+      <h2>{app ? 'Edit Application' : 'New Application'}</h2>
+
+      <label>
+        iOS App Store URL
+        <input
+          value={iosUrl}
+          onChange={e => setIosUrl(e.target.value)}
+          onBlur={e => handleUrlBlur(e.target.value)}
+          placeholder="https://apps.apple.com/app/..."
+        />
+      </label>
+
+      <label>
+        Android Play Store URL
+        <input
+          value={androidUrl}
+          onChange={e => setAndroidUrl(e.target.value)}
+          onBlur={e => handleUrlBlur(e.target.value)}
+          placeholder="https://play.google.com/store/apps/..."
+        />
+      </label>
+
+      <div className="app-modal__name-row">
+        {iconUrl && (
+          <img src={iconUrl} alt="" className="app-modal__icon-preview" onError={() => setIconUrl('')} />
+        )}
+        <label style={{ flex: 1 }}>
+          Name
+          <div className="app-modal__name-input-wrap">
+            <input
+              value={name}
+              onChange={e => setName(e.target.value)}
+              placeholder={fetching ? 'Fetching…' : 'App name'}
+              autoFocus={!iosUrl && !androidUrl}
+            />
+            {fetching && <span className="app-modal__spinner" />}
+          </div>
+        </label>
+      </div>
+
+      {fetchError && <p className="app-modal__fetch-error">Could not auto-fill: {fetchError}</p>}
+
+      <div className="app-modal__footer">
+        <button type="button" onClick={onClose} className="btn-secondary">Cancel</button>
+        <button
+          type="button"
+          onClick={handleSave}
+          disabled={saving || !name.trim() || fetching}
+          className="btn-primary"
+        >
+          {saving ? 'Saving…' : 'Save'}
+        </button>
+      </div>
+    </dialog>
+  );
+}
--- a/client/src/components/DeviceFrame.css
+++ b/client/src/components/DeviceFrame.css
@@ -0,0 +1,46 @@
+.device-frame {
+  position: relative;
+  background: #1a1a1a;
+  box-shadow:
+    0 0 0 2px #444,
+    0 0 0 6px #222,
+    0 20px 60px rgba(0,0,0,0.6);
+  flex-shrink: 0;
+}
+
+.device-frame--phone {
+  border-radius: 40px;
+}
+
+.device-frame--tablet {
+  border-radius: 28px;
+}
+
+.device-frame__notch {
+  position: absolute;
+  background: #111;
+  border-radius: 12px;
+  z-index: 1;
+}
+
+.device-frame--tablet .device-frame__notch {
+  border-radius: 50%;
+}
+
+.device-frame__screen {
+  position: absolute;
+  overflow: hidden;
+  background: #000;
+  border-radius: 4px;
+}
+
+.device-frame__screen iframe {
+  border: none;
+  display: block;
+}
+
+.device-frame__home {
+  position: absolute;
+  background: #444;
+  border-radius: 3px;
+}
--- a/client/src/components/DeviceFrame.jsx
+++ b/client/src/components/DeviceFrame.jsx
@@ -0,0 +1,83 @@
+import './DeviceFrame.css';
+
+// Screen resolution (inner display area)
+// Phone: 390×844 → 9:19.5 (iPhone 14)
+// Tablet: 744×1133 → iPad mini 6th gen (≈ 2:3)
+const SCREEN = {
+  phone:  { portrait: { w: 390, h: 844 }, landscape: { w: 844, h: 390 } },
+  tablet: { portrait: { w: 744, h: 1133 }, landscape: { w: 1133, h: 744 } },
+};
+
+// Bezel padding [top, right, bottom, left] sized so outer frame matches target ratio:
+//   Phone outer:  410×888  → 9:19.5  ✓
+//   Tablet outer: 768×1152 → 2:3     ✓
+const BEZEL = {
+  phone:  { portrait: [28, 10, 16, 10], landscape: [10, 28, 10, 16] },
+  tablet: { portrait: [13, 12,  6, 12], landscape: [ 6, 13, 12, 12] },
+};
+
+export const FRAMES = {
+  phone:  { label: 'Phone' },
+  tablet: { label: 'Tablet' },
+};
+
+export function getFrameSize(frame, rotated) {
+  const o = rotated ? 'landscape' : 'portrait';
+  const { w, h } = SCREEN[frame][o];
+  const [pt, pr, pb, pl] = BEZEL[frame][o];
+  return { width: w + pl + pr, height: h + pt + pb };
+}
+
+export default function DeviceFrame({ frame = 'phone', filename, rotated = false, iframeRef, onIframeLoad }) {
+  const o = rotated ? 'landscape' : 'portrait';
+  const { w: sw, h: sh } = SCREEN[frame][o];
+  const [pt, pr, pb, pl] = BEZEL[frame][o];
+  const outerW = sw + pl + pr;
+  const outerH = sh + pt + pb;
+  const isPhone = frame === 'phone';
+
+  // Notch
+  const notchW = isPhone ? 90 : 14;
+  const notchH = isPhone ? 24 : 14;
+  const notchStyle = rotated
+    ? { width: notchH, height: notchW, top: (outerH - notchW) / 2, left: (pl - notchH) / 2 }
+    : { width: notchW, height: notchH, top: (pt - notchH) / 2, left: (outerW - notchW) / 2 };
+
+  // Home bar (phone only)
+  const homeStyle = isPhone
+    ? rotated
+      ? { width: 6, height: 40, top: (outerH - 40) / 2, right: (pr - 6) / 2 }
+      : { width: 40, height: 6, bottom: (pb - 6) / 2, left: (outerW - 40) / 2 }
+    : null;
+
+  return (
+    <div
+      className={`device-frame device-frame--${frame}`}
+      style={{ width: outerW, height: outerH }}
+    >
+      {/* Notch / camera dot */}
+      <div className="device-frame__notch" style={notchStyle} />
+
+      {/* Screen — exactly the device resolution.
+          Corner radius = outer bezel radius − side bezel width, so the
+          screen edge follows the body curve instead of looking pasted on. */}
+      <div className="device-frame__screen" style={{
+        top: pt, left: pl, width: sw, height: sh,
+        borderRadius: isPhone ? 30 : 16,
+      }}>
+        <iframe
+          ref={iframeRef}
+          key={`${filename}-${frame}-${o}`}
+          src={`/uploads/${filename}`}
+          title="Playable ad"
+          sandbox="allow-scripts allow-same-origin allow-forms"
+          onLoad={onIframeLoad}
+          style={{ width: sw, height: sh }}
+        />
+      </div>
+
+      {/* Home indicator */}
+      {homeStyle && <div className="device-frame__home" style={homeStyle} />}
+    </div>
+  );
+}
--- a/client/src/components/DropZone.css
+++ b/client/src/components/DropZone.css
@@ -0,0 +1,31 @@
+.dropzone {
+  border: 2px dashed #555;
+  border-radius: 12px;
+  padding: 40px 24px;
+  text-align: center;
+  cursor: pointer;
+  color: #aaa;
+  transition: border-color 0.2s, background 0.2s;
+  background: #1a1a1a;
+  user-select: none;
+}
+
+.dropzone:hover,
+.dropzone--active {
+  border-color: #7c6af7;
+  background: #1e1b2e;
+  color: #ccc;
+}
+
+.dropzone__icon {
+  display: block;
+  font-size: 2.5rem;
+  line-height: 1;
+  margin-bottom: 8px;
+  color: #7c6af7;
+}
+
+.dropzone p {
+  margin: 0;
+  font-size: 0.95rem;
+}
--- a/client/src/components/DropZone.jsx
+++ b/client/src/components/DropZone.jsx
@@ -0,0 +1,41 @@
+import { useRef, useState } from 'react';
+import './DropZone.css';
+
+export default function DropZone({ onFiles }) {
+  const [dragging, setDragging] = useState(false);
+  const inputRef = useRef();
+
+  function handleDrop(e) {
+    e.preventDefault();
+    setDragging(false);
+    const files = [...e.dataTransfer.files].filter(f => f.name.endsWith('.html'));
+    if (files.length) onFiles(files);
+  }
+
+  function handleChange(e) {
+    const files = [...e.target.files];
+    if (files.length) onFiles(files);
+    e.target.value = '';
+  }
+
+  return (
+    <div
+      className={`dropzone${dragging ? ' dropzone--active' : ''}`}
+      onDragOver={e => { e.preventDefault(); setDragging(true); }}
+      onDragLeave={() => setDragging(false)}
+      onDrop={handleDrop}
+      onClick={() => inputRef.current.click()}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept=".html"
+        multiple
+        style={{ display: 'none' }}
+        onChange={handleChange}
+      />
+      <span className="dropzone__icon">+</span>
+      <p>Drop <strong>.html</strong> files here or click to browse</p>
+    </div>
+  );
+}
--- a/client/src/components/MetadataModal.css
+++ b/client/src/components/MetadataModal.css
@@ -0,0 +1,244 @@
+.meta-modal {
+  background: #1e1e1e;
+  color: #e8e8e8;
+  border: 1px solid #333;
+  border-radius: 16px;
+  padding: 28px 32px;
+  width: 480px;
+  max-width: 94vw;
+  max-height: 90dvh;
+  overflow-y: auto;
+  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
+}
+
+.meta-modal::backdrop {
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(3px);
+}
+
+.meta-modal h2 {
+  margin: 0 0 20px;
+  font-size: 1.15rem;
+  font-weight: 700;
+}
+
+.meta-modal label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 0.82rem;
+  color: #999;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 16px;
+}
+
+.meta-modal__required {
+  color: #f77;
+  text-transform: none;
+}
+
+.meta-modal input,
+.meta-modal textarea,
+.meta-modal__select {
+  background: #111;
+  border: 1px solid #333;
+  border-radius: 8px;
+  color: #e8e8e8;
+  padding: 8px 12px;
+  font-size: 0.95rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.meta-modal input:focus,
+.meta-modal textarea:focus,
+.meta-modal__select:focus {
+  border-color: #7c6af7;
+}
+
+.meta-modal textarea {
+  resize: vertical;
+}
+
+.meta-modal__select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 32px;
+}
+
+.meta-modal__tag-row {
+  display: flex;
+  gap: 8px;
+}
+
+.meta-modal__tag-row input {
+  flex: 1;
+}
+
+.meta-modal__tag-row button {
+  background: #2a2440;
+  color: #9d8ef7;
+  border: 1px solid #3d3060;
+  border-radius: 8px;
+  padding: 6px 14px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.meta-modal__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 24px;
+  margin-top: 4px;
+}
+
+.meta-modal__tags .tag {
+  background: #2a2440;
+  color: #9d8ef7;
+  font-size: 0.78rem;
+  padding: 3px 8px;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.meta-modal__tags .tag button {
+  background: none;
+  border: none;
+  color: #9d8ef7;
+  cursor: pointer;
+  font-size: 0.9rem;
+  padding: 0;
+  line-height: 1;
+}
+
+.meta-modal__row2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+@media (max-width: 480px) {
+  .meta-modal {
+    padding: 20px 18px;
+  }
+
+  .meta-modal__row2 {
+    grid-template-columns: 1fr;
+  }
+}
+
+.meta-modal__replace {
+  margin-bottom: 16px;
+}
+
+.meta-modal__replace-label {
+  display: block;
+  font-size: 0.82rem;
+  color: #999;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 8px;
+}
+
+.meta-modal__replace-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.meta-modal__file-input {
+  display: none;
+}
+
+.meta-modal__file-btn {
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.meta-modal__file-name {
+  font-size: 0.88rem;
+  color: #9d8ef7;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.meta-modal__file-clear {
+  background: none;
+  border: none;
+  color: #9d8ef7;
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.meta-modal__file-hint {
+  font-size: 0.85rem;
+  color: #555;
+}
+
+.meta-modal__error {
+  font-size: 0.85rem;
+  color: #f77;
+  margin: -8px 0 12px;
+}
+
+.meta-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 24px;
+}
+
+.btn-primary {
+  background: #7c6af7;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 9px 22px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #6a58e0;
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.btn-secondary {
+  background: #2a2a2a;
+  color: #ccc;
+  border: 1px solid #3a3a3a;
+  border-radius: 8px;
+  padding: 9px 22px;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-secondary:hover {
+  background: #333;
+}
--- a/client/src/components/MetadataModal.jsx
+++ b/client/src/components/MetadataModal.jsx
@@ -0,0 +1,149 @@
+import { useEffect, useRef, useState } from 'react';
+import './MetadataModal.css';
+
+export default function MetadataModal({ ad, apps = [], onSave, onClose }) {
+  const dialogRef = useRef();
+  const fileInputRef = useRef();
+  const [title, setTitle] = useState(ad.title);
+  const [appId, setAppId] = useState(ad.appId || '');
+  const [tagInput, setTagInput] = useState('');
+  const [tags, setTags] = useState(ad.tags || []);
+  const [repo, setRepo] = useState(ad.repo || '');
+  const [branch, setBranch] = useState(ad.branch || 'main');
+  const [developer, setDeveloper] = useState(ad.developer || '');
+  const [notes, setNotes] = useState(ad.notes || '');
+  const [newFile, setNewFile] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    dialogRef.current?.showModal();
+    return () => dialogRef.current?.close();
+  }, []);
+
+  function addTag() {
+    const t = tagInput.trim().toLowerCase();
+    if (t && !tags.includes(t)) setTags([...tags, t]);
+    setTagInput('');
+  }
+
+  function removeTag(t) {
+    setTags(tags.filter(x => x !== t));
+  }
+
+  function handleFileChange(e) {
+    setNewFile(e.target.files[0] || null);
+  }
+
+  function clearFile() {
+    setNewFile(null);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  }
+
+  async function handleSave() {
+    if (!appId) { setError('Application is required.'); return; }
+    setError('');
+    setSaving(true);
+    try {
+      await onSave({ title, appId, tags, developer: developer.trim(), repo: repo.trim(), branch: branch.trim(), notes, newFile });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <dialog ref={dialogRef} className="meta-modal" onClose={onClose}>
+      <h2>Edit Metadata</h2>
+
+      <label>
+        Title
+        <input value={title} onChange={e => setTitle(e.target.value)} />
+      </label>
+
+      <label>
+        Application <span className="meta-modal__required">*</span>
+        <select value={appId} onChange={e => setAppId(e.target.value)} className="meta-modal__select">
+          <option value="">— select application —</option>
+          {apps.map(a => (
+            <option key={a.id} value={a.id}>{a.name}</option>
+          ))}
+        </select>
+      </label>
+
+      <label>
+        Tags
+        <div className="meta-modal__tag-row">
+          <input
+            value={tagInput}
+            onChange={e => setTagInput(e.target.value)}
+            onKeyDown={e => (e.key === 'Enter' || e.key === ',') && (e.preventDefault(), addTag())}
+            placeholder="Add tag, press Enter"
+          />
+          <button type="button" onClick={addTag}>Add</button>
+        </div>
+        <div className="meta-modal__tags">
+          {tags.map(t => (
+            <span key={t} className="tag">
+              {t} <button type="button" onClick={() => removeTag(t)}>×</button>
+            </span>
+          ))}
+        </div>
+      </label>
+
+      <label>
+        Developer
+        <input value={developer} onChange={e => setDeveloper(e.target.value)} placeholder="Developer or team name" />
+      </label>
+
+      <div className="meta-modal__row2">
+        <label>
+          Repo
+          <input value={repo} onChange={e => setRepo(e.target.value)} placeholder="owner/repo" />
+        </label>
+        <label>
+          Branch
+          <input value={branch} onChange={e => setBranch(e.target.value)} placeholder="main" />
+        </label>
+      </div>
+
+      <label>
+        Notes
+        <textarea value={notes} onChange={e => setNotes(e.target.value)} rows={3} />
+      </label>
+
+      <div className="meta-modal__replace">
+        <span className="meta-modal__replace-label">Replace HTML</span>
+        <div className="meta-modal__replace-row">
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".html,text/html"
+            id="replace-file"
+            className="meta-modal__file-input"
+            onChange={handleFileChange}
+          />
+          <label htmlFor="replace-file" className="btn-secondary meta-modal__file-btn">
+            Choose file
+          </label>
+          {newFile ? (
+            <span className="meta-modal__file-name">
+              {newFile.name}
+              <button type="button" onClick={clearFile} className="meta-modal__file-clear">×</button>
+            </span>
+          ) : (
+            <span className="meta-modal__file-hint">No file selected</span>
+          )}
+        </div>
+      </div>
+
+      {error && <p className="meta-modal__error">{error}</p>}
+
+      <div className="meta-modal__footer">
+        <button type="button" onClick={onClose} className="btn-secondary">Cancel</button>
+        <button type="button" onClick={handleSave} disabled={saving} className="btn-primary">
+          {saving ? 'Saving…' : 'Save'}
+        </button>
+      </div>
+    </dialog>
+  );
+}
--- a/client/src/components/UploadPreviewModal.css
+++ b/client/src/components/UploadPreviewModal.css
@@ -0,0 +1,236 @@
+.upm {
+  background: #1a1a1a;
+  border: 1px solid #2a2a2a;
+  border-radius: 20px;
+  padding: 0;
+  width: min(920px, 96vw);
+  max-height: 92vh;
+  overflow: hidden;
+  box-shadow: 0 32px 100px rgba(0,0,0,0.85);
+}
+
+.upm::backdrop {
+  background: rgba(0,0,0,0.75);
+  backdrop-filter: blur(4px);
+}
+
+.upm__layout {
+  display: grid;
+  grid-template-columns: 320px 1fr;
+  height: 92vh;
+  max-height: 92vh;
+}
+
+/* ── Left: preview ─────────────────────────────────────────────────────── */
+
+.upm__preview {
+  background: #111;
+  border-right: 1px solid #222;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  padding: 24px 20px;
+}
+
+.upm__frame {
+  width: 220px;
+  aspect-ratio: 9 / 19.5;
+  border-radius: 22px;
+  overflow: hidden;
+  border: 2px solid #2e2e2e;
+  background: #000;
+  flex-shrink: 0;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
+}
+
+.upm__iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+.upm__shot-hint {
+  font-size: 0.75rem;
+  color: #555;
+  margin: 0;
+}
+
+/* ── Right: form ───────────────────────────────────────────────────────── */
+
+.upm__form {
+  padding: 28px 28px 20px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  color: #e8e8e8;
+}
+
+.upm__form h2 {
+  margin: 0 0 20px;
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
+.upm__form label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 0.8rem;
+  color: #888;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 14px;
+}
+
+.upm__form input,
+.upm__form textarea,
+.upm__select {
+  background: #111;
+  border: 1px solid #2e2e2e;
+  border-radius: 8px;
+  color: #e8e8e8;
+  padding: 8px 12px;
+  font-size: 0.92rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.upm__form input:focus,
+.upm__form textarea:focus,
+.upm__select:focus {
+  border-color: #7c6af7;
+}
+
+.upm__form textarea { resize: vertical; }
+
+.upm__select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 32px;
+}
+
+.upm__app-row {
+  display: flex;
+  gap: 8px;
+}
+
+.upm__app-row .upm__select {
+  flex: 1;
+}
+
+.upm__new-app-btn {
+  background: #2a2440;
+  color: #9d8ef7;
+  border: 1px solid #3d3060;
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s;
+  flex-shrink: 0;
+}
+
+.upm__new-app-btn:hover {
+  background: #352d55;
+}
+
+.upm__req {
+  color: #f77;
+  text-transform: none;
+}
+
+.upm__row2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.upm__tag-row {
+  display: flex;
+  gap: 8px;
+}
+
+.upm__tag-row input { flex: 1; }
+
+.upm__tag-add {
+  background: #2a2440;
+  color: #9d8ef7;
+  border: 1px solid #3d3060;
+  border-radius: 8px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.upm__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 20px;
+  margin-top: 4px;
+}
+
+.upm__tags .tag button {
+  background: none;
+  border: none;
+  color: #9d8ef7;
+  cursor: pointer;
+  font-size: 0.9rem;
+  padding: 0 0 0 4px;
+  line-height: 1;
+}
+
+.upm__error {
+  font-size: 0.83rem;
+  color: #f77;
+  margin: -6px 0 10px;
+}
+
+.upm__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: auto;
+  padding-top: 16px;
+}
+
+@media (max-width: 680px) {
+  .upm {
+    width: 100vw;
+    max-height: 100dvh;
+    border-radius: 0;
+    border: none;
+    margin: 0;
+  }
+
+  .upm__layout {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    height: 100dvh;
+    max-height: 100dvh;
+  }
+
+  .upm__preview {
+    padding: 16px;
+    gap: 10px;
+  }
+
+  .upm__frame {
+    width: 140px;
+    aspect-ratio: 9 / 19.5;
+  }
+
+  .upm__shot-hint {
+    display: none;
+  }
+}
--- a/client/src/components/UploadPreviewModal.jsx
+++ b/client/src/components/UploadPreviewModal.jsx
@@ -0,0 +1,184 @@
+import { useEffect, useRef, useState } from 'react';
+import { createApp, requestScreenshot } from '../api';
+import AppModal from './AppModal';
+import './UploadPreviewModal.css';
+
+export default function UploadPreviewModal({ ad, apps: appsProp = [], onSave, onClose }) {
+  const dialogRef = useRef();
+  const initialScreenshotStarted = useRef(false);
+
+  const [title, setTitle] = useState(ad.title);
+  const [appId, setAppId] = useState(ad.appId || '');
+  const [tagInput, setTagInput] = useState('');
+  const [tags, setTags] = useState(ad.tags || []);
+  const [developer, setDeveloper] = useState(ad.developer || '');
+  const [repo, setRepo] = useState(ad.repo || '');
+  const [branch, setBranch] = useState(ad.branch || 'main');
+  const [notes, setNotes] = useState(ad.notes || '');
+
+  const [localApps, setLocalApps] = useState(appsProp);
+  const [creatingApp, setCreatingApp] = useState(false);
+  const [screenshotTaken, setScreenshotTaken] = useState(false);
+  const [screenshotStatus, setScreenshotStatus] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    dialogRef.current?.showModal();
+    return () => dialogRef.current?.close();
+  }, []);
+
+  useEffect(() => {
+    if (initialScreenshotStarted.current) return;
+    initialScreenshotStarted.current = true;
+    handleScreenshot();
+  }, []);
+
+  function addTag() {
+    const t = tagInput.trim().toLowerCase();
+    if (t && !tags.includes(t)) setTags([...tags, t]);
+    setTagInput('');
+  }
+
+  function removeTag(t) { setTags(tags.filter(x => x !== t)); }
+
+  async function handleScreenshot() {
+    setScreenshotStatus('saving');
+    try {
+      await requestScreenshot(ad.id);
+      setScreenshotTaken(true);
+      setScreenshotStatus('done');
+    } catch {
+      setScreenshotStatus('error');
+      setTimeout(() => setScreenshotStatus(null), 2500);
+    }
+  }
+
+  async function handleCreateApp(data) {
+    const created = await createApp(data);
+    setLocalApps(prev => [...prev, created].sort((a, b) => a.name.localeCompare(b.name)));
+    setAppId(created.id);
+    setCreatingApp(false);
+  }
+
+  async function handleSave() {
+    if (!appId) { setError('Application is required.'); return; }
+    setError('');
+    setSaving(true);
+    try {
+      await onSave({ title, appId, tags, developer: developer.trim(), repo: repo.trim(), branch: branch.trim(), notes });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <dialog ref={dialogRef} className="upm" onClose={onClose}>
+      <div className="upm__layout">
+
+        {/* ── Left: live preview ── */}
+        <div className="upm__preview">
+          <div className="upm__frame">
+            <iframe
+
+              src={`/uploads/${ad.filename}`}
+              title="Playable preview"
+              sandbox="allow-scripts allow-same-origin allow-forms"
+              className="upm__iframe"
+            />
+          </div>
+          {!screenshotTaken && (
+            <p className="upm__shot-hint">
+              {screenshotStatus === 'saving' ? 'Capturing initial thumbnail…' : 'Required before saving'}
+            </p>
+          )}
+        </div>
+
+        {/* ── Right: metadata form ── */}
+        <div className="upm__form">
+          <h2>New Playable</h2>
+
+          <label>
+            Title
+            <input value={title} onChange={e => setTitle(e.target.value)} />
+          </label>
+
+          <label>
+            Application <span className="upm__req">*</span>
+            <div className="upm__app-row">
+              <select value={appId} onChange={e => setAppId(e.target.value)} className="upm__select">
+                <option value="">— select application —</option>
+                {localApps.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
+              </select>
+              <button type="button" className="upm__new-app-btn" onClick={() => setCreatingApp(true)}>+ New</button>
+            </div>
+          </label>
+
+          <label>
+            Tags
+            <div className="upm__tag-row">
+              <input
+                value={tagInput}
+                onChange={e => setTagInput(e.target.value)}
+                onKeyDown={e => (e.key === 'Enter' || e.key === ',') && (e.preventDefault(), addTag())}
+                placeholder="Add tag, press Enter"
+              />
+              <button type="button" onClick={addTag} className="upm__tag-add">Add</button>
+            </div>
+            <div className="upm__tags">
+              {tags.map(t => (
+                <span key={t} className="tag">
+                  {t} <button type="button" onClick={() => removeTag(t)}>×</button>
+                </span>
+              ))}
+            </div>
+          </label>
+
+          <label>
+            Developer
+            <input value={developer} onChange={e => setDeveloper(e.target.value)} placeholder="Developer or team name" />
+          </label>
+
+          <div className="upm__row2">
+            <label>
+              Repo
+              <input value={repo} onChange={e => setRepo(e.target.value)} placeholder="owner/repo" />
+            </label>
+            <label>
+              Branch
+              <input value={branch} onChange={e => setBranch(e.target.value)} placeholder="main" />
+            </label>
+          </div>
+
+          <label>
+            Notes
+            <textarea value={notes} onChange={e => setNotes(e.target.value)} rows={3} />
+          </label>
+
+          {error && <p className="upm__error">{error}</p>}
+
+          <div className="upm__footer">
+            <button type="button" onClick={onClose} className="btn-secondary">Cancel</button>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={saving || !screenshotTaken}
+              className="btn-primary"
+              title={!screenshotTaken ? 'Take a screenshot first' : ''}
+            >
+              {saving ? 'Saving…' : 'Save'}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {creatingApp && (
+        <AppModal
+          app={null}
+          onSave={handleCreateApp}
+          onClose={() => setCreatingApp(false)}
+        />
+      )}
+    </dialog>
+  );
+}
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -0,0 +1,65 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: #0e0e0e;
+  color: #e8e8e8;
+  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+h1, h2, h3 {
+  margin: 0;
+}
+
+button {
+  font-family: inherit;
+}
+
+a {
+  color: #9d8ef7;
+  text-decoration: none;
+}
+
+.tag {
+  background: #2a2440;
+  color: #9d8ef7;
+  font-size: 0.72rem;
+  padding: 2px 8px;
+  border-radius: 999px;
+  display: inline-block;
+}
+
+.btn-primary {
+  background: #7c6af7;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 9px 22px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-primary:hover:not(:disabled) { background: #6a58e0; }
+.btn-primary:disabled { opacity: 0.6; cursor: default; }
+
+.btn-secondary {
+  background: #2a2a2a;
+  color: #ccc;
+  border: 1px solid #3a3a3a;
+  border-radius: 8px;
+  padding: 9px 22px;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-secondary:hover { background: #333; }
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/client/src/pages/Apps.css
+++ b/client/src/pages/Apps.css
@@ -0,0 +1,251 @@
+.apps-page {
+  max-width: 800px;
+  padding: 28px 24px;
+}
+
+.apps-page__title {
+  font-size: 1.4rem;
+  font-weight: 800;
+  margin: 0 0 24px;
+  background: linear-gradient(135deg, #7c6af7 0%, #b89bf7 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@media (max-width: 480px) {
+  .apps-page {
+    padding: 16px 12px;
+  }
+}
+
+.apps-page__empty {
+  text-align: center;
+  color: #555;
+  margin-top: 48px;
+  font-size: 0.95rem;
+}
+
+.apps-page__list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.app-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  background: #1e1e1e;
+  border: 1px solid #2e2e2e;
+  border-radius: 12px;
+  padding: 14px 20px;
+  transition: border-color 0.2s;
+}
+
+.app-row__icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.app-row__icon-placeholder {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: #2a2a2a;
+  flex-shrink: 0;
+}
+
+.app-row:hover {
+  border-color: #3e3e3e;
+}
+
+.app-row__info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.app-row__name {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #e8e8e8;
+}
+
+.app-row__links {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.app-row__store {
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 999px;
+  text-decoration: none;
+}
+
+.app-row__store--ios {
+  background: #1a2535;
+  color: #60a5fa;
+  border: 1px solid #2a4060;
+}
+
+.app-row__store--ios:hover {
+  background: #1e2e45;
+}
+
+.app-row__store--android {
+  background: #1a2a1a;
+  color: #6fcf6f;
+  border: 1px solid #2a4a2a;
+}
+
+.app-row__store--android:hover {
+  background: #1e341e;
+}
+
+.app-row__store--missing {
+  color: #444;
+  border: 1px solid #2e2e2e;
+  background: #161616;
+}
+
+.app-row__actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.app-row__actions button {
+  background: #2a2a2a;
+  border: 1px solid #3a3a3a;
+  border-radius: 8px;
+  color: #aaa;
+  padding: 6px 12px;
+  font-size: 0.83rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.app-row__actions button:hover {
+  background: #333;
+  color: #fff;
+}
+
+.app-row__delete:hover {
+  background: #3a1a1a !important;
+  color: #f77 !important;
+  border-color: #5e2e2e !important;
+}
+
+/* App Modal ─────────────────────────────────────────────────────────────── */
+.app-modal {
+  background: #1e1e1e;
+  color: #e8e8e8;
+  border: 1px solid #333;
+  border-radius: 16px;
+  padding: 28px 32px;
+  width: 460px;
+  max-width: 90vw;
+  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
+}
+
+.app-modal::backdrop {
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(3px);
+}
+
+.app-modal h2 {
+  margin: 0 0 20px;
+  font-size: 1.15rem;
+  font-weight: 700;
+}
+
+.app-modal label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 0.82rem;
+  color: #999;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 16px;
+}
+
+.app-modal input {
+  background: #111;
+  border: 1px solid #333;
+  border-radius: 8px;
+  color: #e8e8e8;
+  padding: 8px 12px;
+  font-size: 0.95rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.app-modal input:focus {
+  border-color: #7c6af7;
+}
+
+.app-modal__name-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.app-modal__icon-preview {
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  object-fit: cover;
+  flex-shrink: 0;
+  border: 1px solid #333;
+}
+
+.app-modal__name-input-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.app-modal__name-input-wrap input {
+  width: 100%;
+}
+
+.app-modal__spinner {
+  position: absolute;
+  right: 10px;
+  width: 14px;
+  height: 14px;
+  border: 2px solid #333;
+  border-top-color: #7c6af7;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.app-modal__fetch-error {
+  font-size: 0.8rem;
+  color: #f97;
+  margin: -8px 0 14px;
+}
+
+.app-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 24px;
+}
--- a/client/src/pages/Apps.jsx
+++ b/client/src/pages/Apps.jsx
@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import AppLayout from '../components/AppLayout';
+import AppModal from '../components/AppModal';
+import { createApp, deleteApp, listApps, updateApp } from '../api';
+import './Apps.css';
+
+export default function Apps() {
+  const navigate = useNavigate();
+  const [apps, setApps] = useState([]);
+  const [editingApp, setEditingApp] = useState(null);
+
+  useEffect(() => { load(); }, []);
+
+  function sortByName(list) {
+    return [...list].sort((a, b) => a.name.localeCompare(b.name));
+  }
+
+  async function load() {
+    setApps(sortByName(await listApps()));
+  }
+
+  async function handleSave(data) {
+    if (editingApp === 'new') {
+      const created = await createApp(data);
+      setApps(prev => sortByName([created, ...prev]));
+    } else {
+      const updated = await updateApp(editingApp.id, data);
+      setApps(prev => sortByName(prev.map(a => a.id === updated.id ? updated : a)));
+    }
+    setEditingApp(null);
+  }
+
+  async function handleDelete(app) {
+    if (!confirm(`Delete "${app.name}"? Playables linked to it will become unlinked.`)) return;
+    await deleteApp(app.id);
+    setApps(prev => prev.filter(a => a.id !== app.id));
+  }
+
+  const sidebar = (
+    <>
+      <div className="sb-brand">Playable Showcase</div>
+      <div className="sb-nav">
+        <button className="sb-btn sb-btn--primary" onClick={() => setEditingApp('new')}>+ New Application</button>
+        <button className="sb-btn" onClick={() => navigate('/')}>← Catalog</button>
+      </div>
+    </>
+  );
+
+  return (
+    <AppLayout sidebar={sidebar}>
+      <div className="apps-page">
+        <h1 className="apps-page__title">Applications</h1>
+
+        {apps.length === 0 && (
+          <p className="apps-page__empty">No applications yet. Create one to start organizing playables.</p>
+        )}
+
+        <div className="apps-page__list">
+          {apps.map(app => (
+            <div key={app.id} className="app-row">
+              {app.icon_url
+                ? <img src={app.icon_url} alt={app.name} className="app-row__icon" onError={e => { e.target.style.display = 'none'; }} />
+                : <div className="app-row__icon-placeholder" />
+              }
+              <div className="app-row__info">
+                <span className="app-row__name">{app.name}</span>
+                <div className="app-row__links">
+                  {app.ios_url
+                    ? <a href={app.ios_url} target="_blank" rel="noopener noreferrer" className="app-row__store app-row__store--ios">iOS</a>
+                    : <span className="app-row__store app-row__store--missing">No iOS link</span>
+                  }
+                  {app.android_url
+                    ? <a href={app.android_url} target="_blank" rel="noopener noreferrer" className="app-row__store app-row__store--android">Android</a>
+                    : <span className="app-row__store app-row__store--missing">No Android link</span>
+                  }
+                </div>
+              </div>
+              <div className="app-row__actions">
+                <button onClick={() => setEditingApp(app)}>✎ Edit</button>
+                <button onClick={() => handleDelete(app)} className="app-row__delete">✕</button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {editingApp && (
+        <AppModal
+          app={editingApp === 'new' ? null : editingApp}
+          onSave={handleSave}
+          onClose={() => setEditingApp(null)}
+        />
+      )}
+    </AppLayout>
+  );
+}
--- a/client/src/pages/Catalog.css
+++ b/client/src/pages/Catalog.css
@@ -0,0 +1,49 @@
+.catalog {
+  padding: 24px 20px;
+}
+
+.catalog__search-wrap {
+  padding: 4px 8px;
+}
+
+.catalog__search {
+  width: 100%;
+  background: #111;
+  border: 1px solid #2e2e2e;
+  border-radius: 8px;
+  color: #e8e8e8;
+  padding: 7px 10px;
+  font-size: 0.85rem;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.15s;
+}
+
+.catalog__search:focus {
+  border-color: #7c6af7;
+}
+
+.catalog__search::placeholder {
+  color: #555;
+}
+
+.catalog__empty {
+  text-align: center;
+  color: #555;
+  margin-top: 48px;
+  font-size: 0.95rem;
+}
+
+.catalog__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 16px;
+}
+
+@media (max-width: 480px) {
+  .catalog__grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+}
--- a/client/src/pages/Catalog.jsx
+++ b/client/src/pages/Catalog.jsx
@@ -0,0 +1,190 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import AdCard from '../components/AdCard';
+import AppLayout from '../components/AppLayout';
+import MetadataModal from '../components/MetadataModal';
+import UploadPreviewModal from '../components/UploadPreviewModal';
+import { deleteAd, listAds, listApps, updateAd, updateAdFile, uploadAd } from '../api';
+import './Catalog.css';
+
+export default function Catalog() {
+  const navigate = useNavigate();
+  const fileInputRef = useRef();
+  const uploadQueueRef = useRef([]);
+
+  const [ads, setAds] = useState([]);
+  const [apps, setApps] = useState([]);
+  const [activeAppId, setActiveAppId] = useState(null);
+  const [search, setSearch] = useState('');
+  const [editingAd, setEditingAd] = useState(null);
+  const [pendingAd, setPendingAd] = useState(null);
+
+  useEffect(() => {
+    listApps()
+      .then(list => setApps([...list].sort((a, b) => a.name.localeCompare(b.name))))
+      .catch(() => {});
+  }, []);
+  useEffect(() => { listAds(activeAppId).then(setAds).catch(() => {}); }, [activeAppId]);
+
+  // ── upload flow ──────────────────────────────────────────────────────────
+
+  function openFilePicker() { fileInputRef.current.click(); }
+
+  async function handleFileSelect(e) {
+    const files = [...e.target.files];
+    e.target.value = '';
+    if (!files.length) return;
+    uploadQueueRef.current = files;
+    processNext();
+  }
+
+  async function processNext() {
+    const file = uploadQueueRef.current.shift();
+    if (!file) return;
+    try {
+      const ad = await uploadAd(file);
+      setPendingAd({ ...ad, _next: processNext });
+    } catch (err) {
+      console.error('Upload failed', err);
+      processNext();
+    }
+  }
+
+  async function handleUploadSave(data) {
+    const updated = await updateAd(pendingAd.id, data);
+    setAds(prev => [updated, ...prev.filter(a => a.id !== updated.id)]);
+    const next = pendingAd._next;
+    setPendingAd(null);
+    if (next) next();
+  }
+
+  async function handleUploadCancel() {
+    deleteAd(pendingAd.id).catch(() => {});
+    uploadQueueRef.current = [];
+    setPendingAd(null);
+  }
+
+  // ── edit existing ────────────────────────────────────────────────────────
+
+  async function handleSave({ newFile, ...data }) {
+    if (newFile) await updateAdFile(editingAd.id, newFile);
+    const updated = await updateAd(editingAd.id, data);
+    setAds(prev => prev.map(a => a.id === updated.id ? updated : a));
+    setEditingAd(null);
+  }
+
+  async function handleDelete(ad) {
+    if (!confirm(`Delete "${ad.title}"?`)) return;
+    await deleteAd(ad.id);
+    setAds(prev => prev.filter(a => a.id !== ad.id));
+  }
+
+  const appsById = Object.fromEntries(apps.map(a => [a.id, a]));
+
+  // ── search filter ────────────────────────────────────────────────────────
+
+  const query = search.trim().toLowerCase();
+  const visibleAds = query
+    ? ads.filter(ad => {
+        const appName = appsById[ad.appId]?.name?.toLowerCase() || '';
+        return (
+          ad.title.toLowerCase().includes(query) ||
+          (ad.developer || '').toLowerCase().includes(query) ||
+          appName.includes(query) ||
+          (ad.tags || []).some(t => t.includes(query))
+        );
+      })
+    : ads;
+
+  const sidebar = (
+    <>
+      <div className="sb-brand">Playable Showcase</div>
+
+      <div className="sb-nav">
+        <input ref={fileInputRef} type="file" accept=".html" multiple style={{ display: 'none' }} onChange={handleFileSelect} />
+        <button className="sb-btn sb-btn--primary" onClick={openFilePicker}>+ Upload</button>
+        <button className="sb-btn" onClick={() => navigate('/apps')}>Applications</button>
+      </div>
+
+      <div className="sb-divider" />
+      <div className="catalog__search-wrap">
+        <input
+          className="catalog__search"
+          type="search"
+          placeholder="Search…"
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+        />
+      </div>
+
+      {apps.length > 0 && (
+        <>
+          <div className="sb-divider" />
+          <span className="sb-section-label">Filter by App</span>
+          <div className="sb-nav" style={{ paddingTop: 0 }}>
+            <button
+              className={`sb-btn${activeAppId === null ? ' sb-btn--active' : ''}`}
+              onClick={() => setActiveAppId(null)}
+            >
+              All
+            </button>
+            {apps.map(a => (
+              <button
+                key={a.id}
+                className={`sb-btn${activeAppId === a.id ? ' sb-btn--active' : ''}`}
+                onClick={() => setActiveAppId(a.id)}
+              >
+                {a.icon_url
+                  ? <img src={a.icon_url} className="sb-app-icon" alt="" onError={e => { e.target.style.display = 'none'; }} />
+                  : <div className="sb-app-icon-placeholder" />
+                }
+                {a.name}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </>
+  );
+
+  return (
+    <AppLayout sidebar={sidebar}>
+      <div className="catalog">
+        {visibleAds.length === 0 && (
+          <p className="catalog__empty">
+            {query ? 'No results.' : 'No playables yet. Click + Upload to add one.'}
+          </p>
+        )}
+        <div className="catalog__grid">
+          {visibleAds.map(ad => (
+            <AdCard
+              key={ad.id}
+              ad={ad}
+              app={appsById[ad.appId]}
+              onEdit={setEditingAd}
+              onDelete={handleDelete}
+            />
+          ))}
+        </div>
+      </div>
+
+      {pendingAd && (
+        <UploadPreviewModal
+          ad={pendingAd}
+          apps={apps}
+          onSave={handleUploadSave}
+          onClose={handleUploadCancel}
+        />
+      )}
+
+      {editingAd && (
+        <MetadataModal
+          ad={editingAd}
+          apps={apps}
+          onSave={handleSave}
+          onClose={() => setEditingAd(null)}
+        />
+      )}
+    </AppLayout>
+  );
+}
--- a/client/src/pages/Login.css
+++ b/client/src/pages/Login.css
@@ -0,0 +1,68 @@
+.login-wrapper {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #0e0e0e;
+}
+
+.login-card {
+  background: #181818;
+  border: 1px solid #2a2a2a;
+  border-radius: 16px;
+  padding: 48px 40px 40px;
+  width: 100%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.login-logo img {
+  width: 56px;
+  height: 56px;
+}
+
+.login-card h1 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #e8e8e8;
+  text-align: center;
+}
+
+.login-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.login-form input[type='password'] {
+  width: 100%;
+  background: #111;
+  border: 1px solid #333;
+  border-radius: 8px;
+  padding: 10px 14px;
+  color: #e8e8e8;
+  font-size: 1rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+  box-sizing: border-box;
+}
+
+.login-form input[type='password']:focus {
+  border-color: #7c6af7;
+}
+
+.login-form .btn-primary {
+  width: 100%;
+}
+
+.login-error {
+  margin: 0;
+  font-size: 0.85rem;
+  color: #f87171;
+  text-align: center;
+}
--- a/client/src/pages/Login.jsx
+++ b/client/src/pages/Login.jsx
@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { login } from '../api';
+import './Login.css';
+
+export default function Login() {
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      await login(password);
+      navigate('/', { replace: true });
+    } catch {
+      setError('Incorrect password');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="login-wrapper">
+      <div className="login-card">
+        <div className="login-logo">
+          <img src="/favicon.svg" alt="Logo" />
+        </div>
+        <h1>Playable Showcase</h1>
+        <form onSubmit={handleSubmit} className="login-form">
+          <input
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            autoFocus
+            autoComplete="current-password"
+          />
+          {error && <p className="login-error">{error}</p>}
+          <button type="submit" className="btn-primary" disabled={loading || !password}>
+            {loading ? 'Signing in…' : 'Sign in'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
--- a/client/src/pages/Upload.css
+++ b/client/src/pages/Upload.css
@@ -0,0 +1,92 @@
+.upload-page {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 32px 24px;
+}
+
+.upload-page__header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.upload-page__header h1 {
+  flex: 1;
+  font-size: 1.8rem;
+  font-weight: 800;
+  margin: 0;
+  background: linear-gradient(135deg, #7c6af7 0%, #b89bf7 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.upload-page__back {
+  background: none;
+  border: none;
+  color: #9d8ef7;
+  cursor: pointer;
+  font-size: 0.9rem;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.upload-page__back:hover {
+  color: #b8aaf9;
+}
+
+.upload-page__zone {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.upload-page__warning {
+  text-align: center;
+  color: #888;
+  font-size: 0.88rem;
+  margin: 0;
+}
+
+.upload-page__link {
+  background: none;
+  border: none;
+  color: #9d8ef7;
+  cursor: pointer;
+  font-size: inherit;
+  padding: 0;
+  text-decoration: underline;
+}
+
+.upload-page__status {
+  text-align: center;
+  color: #9d8ef7;
+  font-size: 0.9rem;
+  margin-top: 48px;
+  animation: pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.upload-page__done {
+  text-align: center;
+  margin-top: 64px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.upload-page__done-msg {
+  font-size: 1.1rem;
+  color: #6fcf6f;
+  margin: 0;
+}
+
+.upload-page__done-actions {
+  display: flex;
+  gap: 12px;
+}
--- a/client/src/pages/Upload.jsx
+++ b/client/src/pages/Upload.jsx
@@ -0,0 +1,105 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import DropZone from '../components/DropZone';
+import MetadataModal from '../components/MetadataModal';
+import { deleteAd, listApps, updateAd, updateAdFile, uploadAd } from '../api';
+import './Upload.css';
+
+export default function Upload() {
+  const navigate = useNavigate();
+  const [apps, setApps] = useState([]);
+  const [uploading, setUploading] = useState(false);
+  const [editingAd, setEditingAd] = useState(null);
+  const [doneCount, setDoneCount] = useState(0);
+  const uploadQueueRef = useRef([]);
+
+  useEffect(() => {
+    listApps().then(setApps).catch(() => {});
+  }, []);
+
+  async function handleFiles(files) {
+    setUploading(true);
+    setDoneCount(0);
+    uploadQueueRef.current = [...files];
+    processNext();
+  }
+
+  async function processNext() {
+    const file = uploadQueueRef.current.shift();
+    if (!file) { setUploading(false); return; }
+    try {
+      const ad = await uploadAd(file);
+      setEditingAd({ ...ad, _afterSave: processNext });
+    } catch (err) {
+      console.error('Upload failed', err);
+      processNext();
+    }
+  }
+
+  async function handleSave({ newFile, ...data }) {
+    if (newFile) await updateAdFile(editingAd.id, newFile);
+    await updateAd(editingAd.id, data);
+    setDoneCount(c => c + 1);
+    const after = editingAd._afterSave;
+    setEditingAd(null);
+    if (after) after();
+  }
+
+  function handleClose() {
+    // The file was already uploaded — delete it since the user cancelled
+    if (editingAd) deleteAd(editingAd.id).catch(() => {});
+    // Discard any remaining queued files
+    uploadQueueRef.current = [];
+    setEditingAd(null);
+    setUploading(false);
+  }
+
+  return (
+    <div className="upload-page">
+      <header className="upload-page__header">
+        <button className="upload-page__back" onClick={() => navigate('/')}>← Catalog</button>
+        <h1>Upload Playables</h1>
+      </header>
+
+      {!uploading && doneCount === 0 && (
+        <div className="upload-page__zone">
+          <DropZone onFiles={handleFiles} />
+          {apps.length === 0 && (
+            <p className="upload-page__warning">
+              No applications configured yet.{' '}
+              <button className="upload-page__link" onClick={() => navigate('/apps')}>
+                Create one first
+              </button>{' '}
+              so you can link playables.
+            </p>
+          )}
+        </div>
+      )}
+
+      {uploading && !editingAd && (
+        <p className="upload-page__status">Uploading…</p>
+      )}
+
+      {!uploading && doneCount > 0 && (
+        <div className="upload-page__done">
+          <p className="upload-page__done-msg">
+            {doneCount} playable{doneCount !== 1 ? 's' : ''} uploaded successfully.
+          </p>
+          <div className="upload-page__done-actions">
+            <button className="btn-secondary" onClick={() => { setDoneCount(0); }}>Upload more</button>
+            <button className="btn-primary" onClick={() => navigate('/')}>View in Catalog</button>
+          </div>
+        </div>
+      )}
+
+      {editingAd && (
+        <MetadataModal
+          ad={editingAd}
+          apps={apps}
+          onSave={handleSave}
+          onClose={handleClose}
+        />
+      )}
+    </div>
+  );
+}
--- a/client/src/pages/Viewer.css
+++ b/client/src/pages/Viewer.css
@@ -0,0 +1,190 @@
+.viewer__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  color: #666;
+}
+
+/* Stage fills the main content area (flex: 1 since parent is flex column) */
+.viewer__stage {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.viewer__frame-wrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: center center;
+}
+
+/* ── Sidebar content ──────────────────────────────────────────────────────── */
+
+.viewer__sb-info {
+  padding: 4px 14px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.viewer__sb-title {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: #e8e8e8;
+  word-break: break-word;
+}
+
+.viewer__sb-developer {
+  font-size: 0.78rem;
+  color: #666;
+}
+
+.viewer__app-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.viewer__app-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.viewer__app-icon--placeholder {
+  background: #2a2a2a;
+}
+
+.viewer__app-name {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #e8e8e8;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.viewer__store-links {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-top: 2px;
+}
+
+.viewer__store-link {
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 6px;
+  text-decoration: none;
+  text-align: center;
+  transition: opacity 0.15s;
+}
+
+.viewer__store-link:hover { opacity: 0.8; }
+
+.viewer__store-link--ios {
+  background: #1c1c2e;
+  color: #a78bfa;
+  border: 1px solid #3730a3;
+}
+
+.viewer__store-link--android {
+  background: #0f2310;
+  color: #6fcf6f;
+  border: 1px solid #1a4a1a;
+}
+
+.viewer__sb-mono {
+  font-size: 0.78rem;
+  color: #888;
+  font-family: monospace;
+  word-break: break-all;
+}
+
+.viewer__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.viewer__spacer {
+  flex: 1;
+}
+
+/* ── Controls section (bottom of sidebar) ─────────────────────────────────── */
+
+.viewer__controls {
+  padding: 12px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.viewer__frame-btns {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.viewer__frame-btn {
+  flex: 1;
+  background: #252525;
+  border: 1px solid #333;
+  color: #aaa;
+  border-radius: 6px;
+  padding: 5px 6px;
+  font-size: 0.78rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.viewer__frame-btn.active,
+.viewer__frame-btn:hover {
+  background: #2a2440;
+  color: #9d8ef7;
+  border-color: #5a4ea8;
+}
+
+.viewer__ctrl-row {
+  display: flex;
+  gap: 5px;
+}
+
+.viewer__ctrl-btn {
+  flex: 1;
+  background: #252525;
+  border: 1px solid #333;
+  color: #aaa;
+  border-radius: 6px;
+  padding: 6px 4px;
+  font-size: 0.78rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.viewer__ctrl-btn:hover,
+.viewer__ctrl-btn.active {
+  background: #2a2440;
+  color: #9d8ef7;
+  border-color: #5a4ea8;
+}
+
+.viewer__edit-btn {
+  width: 100%;
+  padding: 8px;
+  font-size: 0.85rem;
+}
+
+@media (max-width: 680px) {
+  .viewer__stage {
+    min-height: 100dvh;
+  }
+}
--- a/client/src/pages/Viewer.jsx
+++ b/client/src/pages/Viewer.jsx
@@ -0,0 +1,206 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { getAd, listApps, updateAd, updateAdFile } from '../api';
+import AppLayout from '../components/AppLayout';
+import DeviceFrame, { FRAMES, getFrameSize } from '../components/DeviceFrame';
+import MetadataModal from '../components/MetadataModal';
+import './Viewer.css';
+
+const VIEWER_LAYOUT = {
+  sidebarWidth: 220,
+  mobileBreakpoint: 680,
+  desktopFrameMargin: 32,
+  mobileFrameMargin: 8,
+  fallbackScale: 0.8,
+  scaleTransitionMs: 180,
+};
+
+export default function Viewer() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [ad, setAd] = useState(null);
+  const [apps, setApps] = useState([]);
+  const [frame, setFrame] = useState('phone');
+  const [rotated, setRotated] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const stageRef = useRef();
+  const [stageDims, setStageDims] = useState(() => ({
+    width: window.innerWidth - VIEWER_LAYOUT.sidebarWidth,
+    height: window.innerHeight,
+  }));
+
+  useEffect(() => {
+    getAd(id).then(setAd).catch(() => navigate('/'));
+    listApps().then(setApps).catch(() => {});
+  }, [id, navigate]);
+
+  useEffect(() => {
+    if (!stageRef.current) return undefined;
+
+    let rafId = null;
+    const measure = () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const rect = stageRef.current?.getBoundingClientRect();
+        if (!rect) return;
+        setStageDims({ width: rect.width, height: rect.height });
+      });
+    };
+
+    const ro = new ResizeObserver(measure);
+    ro.observe(stageRef.current);
+    window.addEventListener('resize', measure);
+    window.addEventListener('orientationchange', measure);
+    measure();
+
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      ro.disconnect();
+      window.removeEventListener('resize', measure);
+      window.removeEventListener('orientationchange', measure);
+    };
+  }, []);
+
+  const scale = useMemo(() => {
+    const { width: fw, height: fh } = getFrameSize(frame, rotated);
+    const { width: sw, height: sh } = stageDims;
+    if (!sw || !sh) return VIEWER_LAYOUT.fallbackScale;
+
+    const margin = sw <= VIEWER_LAYOUT.mobileBreakpoint
+      ? VIEWER_LAYOUT.mobileFrameMargin
+      : VIEWER_LAYOUT.desktopFrameMargin;
+
+    return Math.min(1, (sw - margin) / fw, (sh - margin) / fh);
+  }, [stageDims, frame, rotated]);
+
+  async function handleSave({ newFile, ...data }) {
+    if (newFile) await updateAdFile(id, newFile);
+    const updated = await updateAd(id, data);
+    setAd(updated);
+    setEditing(false);
+  }
+
+  if (!ad) return <div className="viewer__loading">Loading...</div>;
+
+  const app = apps.find(a => a.id === ad.appId);
+
+  const sidebar = (
+    <>
+      <div className="sb-brand">Playable Showcase</div>
+      <div className="sb-nav">
+        <button className="sb-btn" onClick={() => navigate('/')}>Back</button>
+      </div>
+
+      <div className="sb-divider" />
+      <span className="sb-section-label">Playable</span>
+      <div className="viewer__sb-info">
+        <span className="viewer__sb-title">{ad.title}</span>
+        {ad.developer && <span className="viewer__sb-developer">{ad.developer}</span>}
+      </div>
+
+      {app && (
+        <>
+          <div className="sb-divider" />
+          <span className="sb-section-label">Application</span>
+          <div className="viewer__sb-info">
+            <div className="viewer__app-row">
+              {app.icon_url
+                ? <img src={app.icon_url} className="viewer__app-icon" alt="" onError={e => { e.target.style.display = 'none'; }} />
+                : <div className="viewer__app-icon viewer__app-icon--placeholder" />
+              }
+              <span className="viewer__app-name">{app.name}</span>
+            </div>
+            {(app.ios_url || app.android_url) && (
+              <div className="viewer__store-links">
+                {app.ios_url && (
+                  <a href={app.ios_url} target="_blank" rel="noreferrer" className="viewer__store-link viewer__store-link--ios">
+                    App Store
+                  </a>
+                )}
+                {app.android_url && (
+                  <a href={app.android_url} target="_blank" rel="noreferrer" className="viewer__store-link viewer__store-link--android">
+                    Google Play
+                  </a>
+                )}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+
+      {ad.repo && (
+        <>
+          <div className="sb-divider" />
+          <span className="sb-section-label">Repo</span>
+          <div className="viewer__sb-info">
+            <span className="viewer__sb-mono">{ad.repo}@{ad.branch || 'main'}</span>
+          </div>
+        </>
+      )}
+
+      {ad.tags?.length > 0 && (
+        <>
+          <div className="sb-divider" />
+          <span className="sb-section-label">Tags</span>
+          <div className="viewer__sb-info">
+            <div className="viewer__tags">
+              {ad.tags.map(t => <span key={t} className="tag">{t}</span>)}
+            </div>
+          </div>
+        </>
+      )}
+
+      <div className="viewer__spacer" />
+      <div className="sb-divider" />
+
+      <div className="viewer__controls">
+        <span className="sb-section-label" style={{ padding: '8px 14px 4px' }}>Frame</span>
+        <div className="viewer__frame-btns">
+          {Object.entries(FRAMES).map(([key, { label }]) => (
+            <button
+              key={key}
+              className={`viewer__frame-btn${frame === key ? ' active' : ''}`}
+              onClick={() => { setFrame(key); setRotated(false); }}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        <div className="viewer__ctrl-row">
+          <button
+            className={`viewer__ctrl-btn${rotated ? ' active' : ''}`}
+            onClick={() => setRotated(r => !r)}
+            title="Rotate"
+          >
+            Rotate
+          </button>
+        </div>
+        <button className="btn-primary viewer__edit-btn" onClick={() => setEditing(true)}>Edit</button>
+      </div>
+    </>
+  );
+
+  return (
+    <AppLayout sidebar={sidebar}>
+      <div className="viewer__stage" ref={stageRef}>
+        <div
+          className="viewer__frame-wrapper"
+          style={{
+            transform: `translate(-50%, -50%) scale(${scale})`,
+            transition: `transform ${VIEWER_LAYOUT.scaleTransitionMs}ms ease`,
+          }}
+        >
+          <DeviceFrame
+            frame={frame}
+            filename={ad.filename}
+            rotated={rotated}
+          />
+        </div>
+      </div>
+
+      {editing && (
+        <MetadataModal ad={ad} apps={apps} onSave={handleSave} onClose={() => setEditing(false)} />
+      )}
+    </AppLayout>
+  );
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>