diff --git a/docker/frontend/src/App.tsx b/docker/frontend/src/App.tsx index d73361a..cda119c 100644 --- a/docker/frontend/src/App.tsx +++ b/docker/frontend/src/App.tsx @@ -12,7 +12,7 @@ import { useI18n } from './i18n/I18nProvider'; import { loadEngine } from './engine/assets'; import { renderPhoto, type RenderAssets } from './engine/exportEngine'; import { download, fileToBytes, readGps, readIso, resizedJpeg } from './engine/imageOps'; -import { loadPhoto, loadState, savePhoto, saveState } from './engine/session'; +import { clearSession, loadPhoto, loadState, savePhoto, saveState } from './engine/session'; import { api, type Photo, type SavedRecipe, type User } from './api'; import { TIERS } from './config/tiers'; import { DEFAULT_ADJUSTMENTS, DEFAULT_RECIPES, FILM_SIMS, filmSimToRecipe } from '../shared/utils/defaultRecipes'; @@ -1740,7 +1740,10 @@ export function Workspace() { onSignup={() => setAuthMode('signup')} onLogout={async () => { await api.logout().catch(() => undefined); - setUser(null); + await clearSession(); + // the stage still holds the old photo in memory; a reload is the one + // line that empties it and every knob with it. + window.location.reload(); }} /> diff --git a/docker/frontend/src/Landing.tsx b/docker/frontend/src/Landing.tsx index 174044b..cd1a3f4 100644 --- a/docker/frontend/src/Landing.tsx +++ b/docker/frontend/src/Landing.tsx @@ -1,5 +1,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { api, type Photo, type PhotoSlot, type Rating, type User } from './api'; +import { clearSession } from './engine/session'; import { useI18n } from './i18n/I18nProvider'; import { ACCENTS, FONT_SETS, useTheme, type FontSetId } from './theme/ThemeProvider'; import { AuthModal } from './ui/AuthModal'; @@ -308,6 +309,7 @@ export function Landing() { const signOut = useCallback(async () => { await api.logout().catch(() => undefined); + void clearSession(); setUser(null); setAccountMenu(false); }, []); diff --git a/docker/frontend/src/ProfilePage.tsx b/docker/frontend/src/ProfilePage.tsx index 2db4dad..5324857 100644 --- a/docker/frontend/src/ProfilePage.tsx +++ b/docker/frontend/src/ProfilePage.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react'; import { api, type User } from './api'; +import { clearSession } from './engine/session'; import { useI18n } from './i18n/I18nProvider'; import { Profile } from './ui/Profile'; import { Avatar } from './ui/Avatar'; @@ -36,6 +37,7 @@ export function ProfilePage() { data-key="profile-logout" onClick={async () => { await api.logout().catch(() => undefined); + await clearSession(); window.location.assign('/'); }} > diff --git a/docker/frontend/src/engine/session.ts b/docker/frontend/src/engine/session.ts index 7cd1d10..94d4a88 100644 --- a/docker/frontend/src/engine/session.ts +++ b/docker/frontend/src/engine/session.ts @@ -88,3 +88,31 @@ export async function loadPhoto(): Promise<{ name: string; bytes: Uint8Array } | return null; } } + +// Signing out ends the session: drop the knobs and the working photo, so the +// next visit — guest or another account — opens the studio empty. The account's +// own photos stay in MY PHOTOS, ready to reopen. +// +// Async on purpose: the caller reloads the moment this returns, and a reload +// aborts a delete still in flight. Resolve on the transaction's completion, not +// on the request's success, or the bytes outlive the logout. +export async function clearSession(): Promise { + try { + localStorage.removeItem(STATE_KEY); + } catch { + // Nothing to clear. + } + try { + const db = await openDb(); + await new Promise((resolve, reject) => { + const tx = db.transaction(STORE, 'readwrite'); + tx.objectStore(STORE).delete(PHOTO_KEY); + tx.oncomplete = () => resolve(); + tx.onerror = () => reject(tx.error); + tx.onabort = () => reject(tx.error); + }); + db.close(); + } catch { + // Private mode / no IndexedDB: there is nothing stored to forget. + } +}