Add self-contained docker/ stack for the web UI

`docker/` now holds the whole web build — frontend (Vite + React + CanvasKit),
backend (Fastify + SQLite) and the compose file — so the folder can be moved to
another machine and run without the React Native project:

    cd docker && cp .env.example .env && docker compose up -d --build

Only `${WEB_PORT:-8090}` is published; nginx serves the SPA and proxies /api to
the `api` container over Docker's DNS. Photos never reach the server.

The shared render code is vendored into `docker/frontend/shared/` and aliased to
a CanvasKit shim, so the app's own frameUtils/toneShader/jpegDpi run unchanged.

Fix the all-black render on GPU surfaces: `MakeWebGLCanvasSurface` creates a
separate WebGL context per call, and a texture from one context cannot be
sampled by a surface on another — so any pass that drew a snapshot onto a second
surface (output sharpen, screen sharpen, polaroid/wallframe cards) came out
solid black, while the raster fallback was correct. Use one shared
GrDirectContext + MakeRenderTarget instead.

Verified in headless Chromium against the running stack: 12MP JPEG in, preview
mean=120.5 sd=60.5, export 2048x1536 mean=107.2 sd=62.1, JFIF density 300/300,
EXIF present, no console errors; health/signup/login/me/recipes all 2xx through
the nginx proxy.

docker/frontend/src/ui/ToolRail.tsx

@@ -0,0 +1,34 @@
+import type { MsgKey } from '../i18n/vi';
+import { useI18n } from '../i18n/I18nProvider';
+
+// The app's six tabs, in the same order as the phone rail. The rail is vertical
+// on desktop and becomes the bottom bar under 860px (see styles/app.css).
+export type TabId = 'presets' | 'favorited' | 'light' | 'wb' | 'fx' | 'frame';
+
+export const TABS: { id: TabId; label: MsgKey; glyph: string }[] = [
+  { id: 'presets', label: 'tab.presets', glyph: '◉' },
+  { id: 'favorited', label: 'tab.favorited', glyph: '★' },
+  { id: 'light', label: 'tab.light', glyph: '☀' },
+  { id: 'wb', label: 'tab.wb', glyph: '◐' },
+  { id: 'fx', label: 'tab.fx', glyph: '✦' },
+  { id: 'frame', label: 'tab.frame', glyph: '▣' },
+];
+
+export function ToolRail({ tab, onTab }: { tab: TabId; onTab: (tab: TabId) => void }) {
+  const { t } = useI18n();
+  return (
+    <nav className="rail" aria-label="tool tabs">
+      {TABS.map((entry) => (
+        <button
+          key={entry.id}
+          type="button"
+          aria-pressed={tab === entry.id}
+          onClick={() => onTab(entry.id)}
+        >
+          <span className="glyph" aria-hidden="true">{entry.glyph}</span>
+          {t(entry.label)}
+        </button>
+      ))}
+    </nav>
+  );
+}