chore: bump backend version to 1.1.2

.gitea/workflows/mirror-to-github.yml

@@ -1,10 +1,7 @@
 name: Mirror to GitHub
 
 on:
-  push:
-    branches:
-      - main
-  workflow_dispatch:  # Allow manual triggering
+  workflow_dispatch:  # Allow manual triggering only
 
 jobs:
   mirror:
@@ -131,4 +128,5 @@ jobs:
         run: |
           echo "✅ Mirror to GitHub workflow completed successfully!"
           echo "📊 Repository mirrored to: https://github.com/the-luap/picpeak"
-          echo "🔒 Sensitive files have been removed from the mirror"
+          echo "🔒 Sensitive files have been removed from the mirror"
+

.gitea/workflows/version-and-release.yml

@@ -1,12 +1,7 @@
 name: Version and Release
 
 on:
-  push:
-    branches: [ main ]
-    paths-ignore:
-      - '**.md'
-      - '.gitea/**'
-      - '.drone.yml'
+  workflow_dispatch:
 
 jobs:
   version-bump:
@@ -72,8 +67,8 @@ jobs:
           echo "Root files changed: $ROOT_CHANGED"
           
           # Get current versions
-          BACKEND_VERSION=$(node -p "require('./backend/package.json').version" 2>/dev/null || echo "1.0.0")
-          FRONTEND_VERSION=$(node -p "require('./frontend/package.json').version" 2>/dev/null || echo "1.0.0")
+          BACKEND_VERSION=$(node -p "require('./backend/package.json').version" 2>/dev/null || echo "1.1.0")
+          FRONTEND_VERSION=$(node -p "require('./frontend/package.json').version" 2>/dev/null || echo "1.1.0")
           
           echo "Current backend version: $BACKEND_VERSION"
           echo "Current frontend version: $FRONTEND_VERSION"
@@ -133,10 +128,17 @@ jobs:
           MINOR="${version_parts[1]}"
           PATCH="${version_parts[2]}"
           
-          # Increment patch version
+          # Increment patch version and ensure tag uniqueness
+          git fetch --tags --quiet || true
           NEW_PATCH=$((PATCH + 1))
           NEW_VERSION="$MAJOR.$MINOR.$NEW_PATCH"
           
+          while git rev-parse "v${NEW_VERSION}" >/dev/null 2>&1; do
+            echo "Tag v${NEW_VERSION} already exists, bumping patch version again"
+            NEW_PATCH=$((NEW_PATCH + 1))
+            NEW_VERSION="$MAJOR.$MINOR.$NEW_PATCH"
+          done
+          
           echo "New version: $NEW_VERSION"
           echo "new_version=$NEW_VERSION" >> $GITHUB_OUTPUT
           echo "component_changed=$COMPONENT_CHANGED" >> $GITHUB_OUTPUT
@@ -264,4 +266,4 @@ jobs:
           echo "Version bumped to ${{ needs.version-bump.outputs.new_version }}"
           echo "Component(s) changed: ${{ needs.version-bump.outputs.component_changed }}"
           echo "Drone will automatically trigger on the new tag"
-          # Drone CI will automatically trigger on the tag push event
+          # Drone CI will automatically trigger on the tag push event

DEPLOYMENT_GUIDE.md

@@ -201,6 +201,15 @@ openssl rand -base64 32 | tr -d '$'
 - Escape `$` as `$$` (e.g., `Pass$$word` instead of `Pass$word`)
 - Quote the entire value: `DB_PASSWORD='Pass$word'` (less reliable)
 
+### Public Landing Page
+
+- `npm run migrate` now seeds three general settings: `general_public_site_enabled`, `general_public_site_html`, and `general_public_site_custom_css` so existing installs stay disabled by default.
+- Configure the feature from **Admin → CMS Pages**. The landing page panel exposes the toggle, HTML editor, optional CSS overrides, preview, and a reset-to-default action.
+- All HTML and CSS submitted through the UI is sanitized server-side. Scripts, inline event handlers, disallowed attributes, `@import` rules, and `javascript:` URLs are stripped before content is cached or rendered.
+- Resetting via the UI (or calling `POST /api/admin/settings/public-site/reset`) restores the bundled template and clears custom CSS.
+- The landing page response is cached in-memory. Override the default 60s cache window by setting `PUBLIC_SITE_CACHE_TTL_MS` (milliseconds) in your environment if you need faster cache busting.
+- When the toggle is off PicPeak continues to serve the SPA/login redirect at `/`, preserving legacy behaviour until you explicitly enable the feature.
+
 ### Backend Configuration (.env)
 Update `.env` with:
 - `JWT_SECRET` - Authentication secret (REQUIRED - generate a secure random value)

README.md

@@ -34,6 +34,7 @@ Unlike expensive SaaS solutions, PicPeak gives you:
 - 📧 **Automated Emails** - Creation confirmations and expiration warnings
 - 📊 **Analytics Dashboard** - Track views, downloads, and engagement
 - 🎨 **Custom Themes** - Match your brand perfectly
+- 🌐 **Public Landing Page** - Publish a curated marketing page when guests visit your root URL
 
 ### For Clients
 - 🖼️ **Beautiful Galleries** - Clean, modern interface
@@ -89,6 +90,18 @@ Note on Docker file permissions (PUID/PGID)
 - 🔒 [**Security**](SECURITY.md) - Security policies
 - 📋 [**Code of Conduct**](CODE_OF_CONDUCT.md) - Community guidelines
 
+## 🌐 Public Landing Page
+
+Spotlight your studio with a customizable marketing page at `/`:
+
+- Head to **Admin → CMS Pages** to enable the public landing page toggle.
+- Edit the provided HTML template (rich sections, hero, testimonials) and optional CSS overrides.
+- The preview renders in a sandboxed iframe so you can iterate safely before publishing.
+- PicPeak sanitizes stored HTML and CSS server-side—scripts, iframes, and unsafe attributes are stripped automatically.
+- Use **Reset to default** anytime to restore the bundled template.
+- The backend caches the rendered landing page for 60 seconds by default; override with `PUBLIC_SITE_CACHE_TTL_MS` if you need a different TTL.
+- When the landing page is disabled PicPeak continues to serve the admin SPA/login exactly as before.
+
 ## 🎯 Use Cases
 
 Perfect for:
@@ -209,6 +222,7 @@ These features are currently in beta testing and may have limited functionality
 | **Gallery Feedback** | Allow guests to like, rate, and comment on photos with admin notifications and moderation | Medium | ✅ Implemented |
 | **Video Support** | Upload and display videos alongside photos in galleries with streaming support | Low | 🔄 Open |
 | **Multiple Administrators** | Support for multiple admin accounts with role-based permissions and activity tracking | Low | 📋 Planned |
+| **Filtering & Export Options** | Add filters to show only rated, liked, or marked photos and export filtered selections for Capture One or Lightroom workflows | Low | 🔄 Open |
 
 **Status Legend:** ✅ Implemented | 🚧 In Progress | 🔄 Open | 📋 Planned
 

SIMPLE_SETUP.md

@@ -292,6 +292,7 @@ sudo systemctl stop picpeak-backend picpeak-workers
 sudo systemctl restart picpeak-backend picpeak-workers
 
 # Update PicPeak
+# (reruns migrations to pick up schema fixes for native installs)
 sudo ./setup.sh --update
 ```
 

backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine AS builder
+FROM node:20-alpine AS builder
 
 # Add build arguments
 ARG CACHEBUST=1
@@ -23,7 +23,7 @@ RUN npm ci --only=production
 COPY . .
 
 # Production stage
-FROM node:18-alpine
+FROM node:20-alpine
 
 WORKDIR /app
 

backend/__tests__/integration/backup-s3.test.js

@@ -1,4 +1,4 @@
-const { describe, it, expect, jest, beforeAll, afterAll, beforeEach, afterEach } = require('@jest/globals');
+const { describe, it, expect, beforeAll, afterAll, beforeEach, afterEach } = require('@jest/globals');
 const { S3Client, CreateBucketCommand, DeleteBucketCommand, ListObjectsV2Command, DeleteObjectsCommand } = require('@aws-sdk/client-s3');
 const path = require('path');
 const fs = require('fs').promises;
@@ -503,4 +503,4 @@ describe('S3 Backup Integration Tests', () => {
       console.error('Failed to cleanup S3 objects:', error);
     }
   }
-});
+});

backend/__tests__/services/backupService.enhanced.test.js

@@ -1,4 +1,4 @@
-const { describe, it, expect, jest, beforeEach, afterEach } = require('@jest/globals');
+const { describe, it, expect, beforeEach, afterEach } = require('@jest/globals');
 const mockFs = require('mock-fs');
 const path = require('path');
 const crypto = require('crypto');
@@ -748,4 +748,4 @@ describe('Enhanced Backup Service Tests', () => {
       );
     });
   });
-});
+});

backend/jest.setup.js

@@ -1,4 +1,10 @@
 beforeAll(() => {
   process.env.NODE_ENV = 'test';
   process.env.JWT_SECRET = 'test-secret';
+  if (!process.env.SKIP_S3_TESTS) {
+    process.env.SKIP_S3_TESTS = 'true';
+  }
+  if (!process.env.STORAGE_PATH) {
+    process.env.STORAGE_PATH = '/storage';
+  }
 });

backend/knexfile.js

@@ -3,6 +3,54 @@ require('dotenv').config();
 const path = require('path');
 
 // Database configuration for different environments
+const resolveSqliteFilename = (filenameEnv) => {
+  const fallback = path.join(__dirname, './data/photo_sharing.db');
+
+  if (!filenameEnv) {
+    return fallback;
+  }
+
+  const trimmed = String(filenameEnv).trim();
+  if (!trimmed) {
+    return fallback;
+  }
+
+  let resolved;
+  if (path.isAbsolute(trimmed)) {
+    resolved = trimmed;
+  } else if (trimmed.startsWith('./') || trimmed.startsWith('../')) {
+    resolved = path.resolve(__dirname, trimmed);
+  } else {
+    resolved = path.join(__dirname, trimmed);
+  }
+
+  const normalized = path.normalize(resolved);
+  const baseSuffix = path.relative(path.parse(__dirname).root, path.normalize(__dirname));
+  const duplicatePattern = `${path.sep}${baseSuffix}${path.sep}${baseSuffix}`;
+
+  if (normalized.includes(duplicatePattern)) {
+    return normalized.replace(duplicatePattern, `${path.sep}${baseSuffix}`);
+  }
+
+  return normalized;
+};
+
+const sqliteConnection = (filenameEnv) => ({
+  filename: resolveSqliteFilename(filenameEnv)
+});
+
+const baseSqliteConfig = {
+  client: 'sqlite3',
+  connection: sqliteConnection(),
+  useNullAsDefault: true,
+  migrations: {
+    directory: './migrations'
+  },
+  seeds: {
+    directory: './seeds'
+  }
+};
+
 const config = {
   development: {
     client: process.env.DATABASE_CLIENT || 'sqlite3',
@@ -13,7 +61,7 @@ const config = {
       password: process.env.DB_PASSWORD || 'postgres',
       database: process.env.DB_NAME || 'photo_sharing'
     } : {
-      filename: path.join(__dirname, process.env.DATABASE_PATH || './data/photo_sharing.db')
+      filename: resolveSqliteFilename(process.env.DATABASE_PATH || './data/photo_sharing.db')
     },
     useNullAsDefault: process.env.DATABASE_CLIENT !== 'pg',
     migrations: {
@@ -24,6 +72,26 @@ const config = {
     }
   },
 
+  test: (() => {
+    const client = process.env.DATABASE_CLIENT || 'sqlite3';
+    const isPostgres = client === 'pg';
+
+    return {
+      ...baseSqliteConfig,
+      client,
+      useNullAsDefault: !isPostgres,
+      connection: isPostgres
+        ? {
+            host: process.env.DB_HOST || 'localhost',
+            port: process.env.DB_PORT || 5432,
+            user: process.env.DB_USER || 'postgres',
+            password: process.env.DB_PASSWORD || 'postgres',
+            database: process.env.DB_NAME || 'photo_sharing_test'
+          }
+        : sqliteConnection(process.env.TEST_DATABASE_PATH || './data/photo_sharing_test.db')
+    };
+  })(),
+
   production: {
     client: process.env.DATABASE_CLIENT || 'pg',
     // Support both Postgres and SQLite in production based on DATABASE_CLIENT
@@ -42,7 +110,7 @@ const config = {
           keepAliveInitialDelayMillis: 0
         }
       : {
-          filename: path.join(__dirname, process.env.DATABASE_PATH || './data/photo_sharing.db')
+          filename: resolveSqliteFilename(process.env.DATABASE_PATH || './data/photo_sharing.db')
         },
     useNullAsDefault: (process.env.DATABASE_CLIENT || 'pg') !== 'pg',
     pool: (process.env.DATABASE_CLIENT || 'pg') === 'pg'
@@ -63,5 +131,6 @@ const config = {
     acquireConnectionTimeout: 60000
   }
 };
+const env = process.env.NODE_ENV || 'development';
 
-module.exports = config[process.env.NODE_ENV || 'development'];
+module.exports = config[env] || config.development;

backend/migrations/core/042_backfill_event_upload_columns.js

@@ -0,0 +1,51 @@
+const logger = require('../../src/utils/logger');
+
+async function ensureColumn(knex, tableName, columnName, alterFn) {
+  const exists = await knex.schema.hasColumn(tableName, columnName);
+  if (!exists) {
+    logger.info(`Adding column ${tableName}.${columnName}`);
+    await knex.schema.table(tableName, alterFn);
+  }
+}
+
+exports.up = async function(knex) {
+  await ensureColumn(knex, 'events', 'host_name', (table) => {
+    table.string('host_name');
+  });
+
+  await ensureColumn(knex, 'events', 'allow_user_uploads', (table) => {
+    table.boolean('allow_user_uploads').defaultTo(false);
+  });
+
+  await ensureColumn(knex, 'events', 'upload_category_id', (table) => {
+    table.integer('upload_category_id');
+  });
+
+  await ensureColumn(knex, 'events', 'allow_downloads', (table) => {
+    table.boolean('allow_downloads').defaultTo(true);
+  });
+
+  await ensureColumn(knex, 'events', 'disable_right_click', (table) => {
+    table.boolean('disable_right_click').defaultTo(false);
+  });
+
+  await ensureColumn(knex, 'events', 'watermark_downloads', (table) => {
+    table.boolean('watermark_downloads').defaultTo(false);
+  });
+
+  await ensureColumn(knex, 'events', 'watermark_text', (table) => {
+    table.text('watermark_text');
+  });
+
+  await ensureColumn(knex, 'events', 'hero_photo_id', (table) => {
+    table.integer('hero_photo_id').references('id').inTable('photos').onDelete('SET NULL');
+  });
+
+  await ensureColumn(knex, 'photos', 'uploaded_by', (table) => {
+    table.string('uploaded_by').defaultTo('admin');
+  });
+};
+
+exports.down = async function() {
+  // Non destructive migration; no rollback
+};

backend/migrations/core/043_add_public_site_settings.js

@@ -0,0 +1,46 @@
+const {
+  DEFAULT_PUBLIC_SITE_HTML,
+} = require('../../src/constants/publicSiteDefaults');
+
+exports.up = async function(knex) {
+  const defaults = [
+    {
+      setting_key: 'general_public_site_enabled',
+      setting_value: JSON.stringify(false),
+      setting_type: 'general'
+    },
+    {
+      setting_key: 'general_public_site_html',
+      setting_value: JSON.stringify(DEFAULT_PUBLIC_SITE_HTML.trim()),
+      setting_type: 'general'
+    },
+    {
+      setting_key: 'general_public_site_custom_css',
+      setting_value: JSON.stringify(''),
+      setting_type: 'general'
+    }
+  ];
+
+  for (const setting of defaults) {
+    const exists = await knex('app_settings')
+      .where('setting_key', setting.setting_key)
+      .first();
+
+    if (!exists) {
+      await knex('app_settings').insert({
+        ...setting,
+        updated_at: knex.fn.now()
+      });
+    }
+  }
+};
+
+exports.down = async function(knex) {
+  await knex('app_settings')
+    .whereIn('setting_key', [
+      'general_public_site_enabled',
+      'general_public_site_html',
+      'general_public_site_custom_css'
+    ])
+    .del();
+};

backend/migrations/run-migrations-safe.js

@@ -120,7 +120,9 @@ async function runMigrations() {
     
     // Check if this is a new deployment
     // It's new if no essential tables exist OR no migrations have been applied
-    const isNewDeployment = (!hasEventsTable || !hasPhotosTable || !hasAdminTable || !hasActivityLogsTable) || appliedFilenames.length === 0;
+    const hasEssentialTables = hasEventsTable && hasPhotosTable && hasAdminTable && hasActivityLogsTable;
+    const isDatabaseEmpty = !hasEventsTable && !hasPhotosTable && !hasAdminTable && !hasActivityLogsTable;
+    const isNewDeployment = isDatabaseEmpty || (appliedFilenames.length === 0 && !hasEssentialTables);
     
     // Only detect existing schema for truly existing deployments
     if (!isNewDeployment) {
@@ -227,4 +229,4 @@ if (require.main === module) {
   waitAndRun();
 }
 
-module.exports = { runMigrations };
+module.exports = { runMigrations };

backend/package-lock.json

@@ -1,21 +1,22 @@
 {
   "name": "picpeak-backend",
-  "version": "1.0.124",
+  "version": "1.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "picpeak-backend",
-      "version": "1.0.124",
+      "version": "1.1.2",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.850.0",
         "@aws-sdk/lib-storage": "^3.850.0",
         "@aws-sdk/s3-request-presigner": "^3.850.0",
         "adm-zip": "^0.5.16",
         "archiver": "^5.3.1",
-        "axios": "^1.10.0",
+        "axios": "^1.12.2",
         "bcrypt": "6.0.0",
         "chokidar": "4.0.3",
+        "cookie-parser": "^1.4.7",
         "cors": "^2.8.5",
         "dotenv": "^16.0.3",
         "express": "^4.18.2",
@@ -37,6 +38,7 @@
         "nodemailer": "7.0.5",
         "pg": "^8.16.3",
         "react-i18next": "^15.6.0",
+        "sanitize-html": "^2.17.0",
         "sharp": "0.34.3",
         "sqlite3": "^5.1.6",
         "uuid": "^11.1.0",
@@ -46,6 +48,7 @@
       "devDependencies": {
         "eslint": "^8.40.0",
         "jest": "^29.5.0",
+        "mock-fs": "^5.5.0",
         "nodemon": "^3.1.10",
         "supertest": "^6.3.3"
       }
@@ -3889,13 +3892,13 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
-      "integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
         "proxy-from-env": "^1.1.0"
       }
     },
@@ -4727,6 +4730,28 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/cookie-parser": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.7.tgz",
+      "integrity": "sha512-nGUvgXnotP3BsjiLX2ypbQnWoGUPIIfHQNZkkC668ntrzGWEZVW70HDEB1qnNGMicPje6EttlIgzo51YSwNQGw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "0.7.2",
+        "cookie-signature": "1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/cookie-parser/node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/cookie-signature": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
@@ -4898,7 +4923,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
       "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4992,6 +5016,61 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.6.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
@@ -5107,6 +5186,18 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/env-paths": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
@@ -5198,7 +5289,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -6146,6 +6236,25 @@
         "void-elements": "3.1.0"
       }
     },
+    "node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
@@ -6540,6 +6649,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -7991,6 +8109,16 @@
       "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
       "license": "MIT"
     },
+    "node_modules/mock-fs": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/mock-fs/-/mock-fs-5.5.0.tgz",
+      "integrity": "sha512-d/P1M/RacgM3dB0sJ8rjeRNXxtapkPCUnMGmIN0ixJ16F/E4GUZCvWcSGfWGz8eaXYvn1s9baUwNjI4LOPEjiA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -8015,6 +8143,24 @@
         "node": ">= 10.16.0"
       }
     },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/napi-build-utils": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
@@ -8520,6 +8666,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
+      "license": "MIT"
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -8669,7 +8821,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -8764,6 +8915,34 @@
         "node": ">=8"
       }
     },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/postgres-array": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
@@ -9355,6 +9534,20 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/sanitize-html": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.17.0.tgz",
+      "integrity": "sha512-dLAADUSS8rBwhaevT12yCezvioCA+bmUTPH/u57xKPT8d++voeYE6HeluA/bPbQ15TwDBG2ii+QZIEmYx8VdxA==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^8.0.0",
+        "is-plain-object": "^5.0.0",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.3.11"
+      }
+    },
     "node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -9727,6 +9920,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picpeak-backend",
-  "version": "1.0.124",
+  "version": "1.1.2",
   "description": "Backend for PicPeak event photo sharing platform",
   "main": "server.js",
   "scripts": {
@@ -17,9 +17,10 @@
     "@aws-sdk/s3-request-presigner": "^3.850.0",
     "adm-zip": "^0.5.16",
     "archiver": "^5.3.1",
-    "axios": "^1.10.0",
+    "axios": "^1.12.2",
     "bcrypt": "6.0.0",
     "chokidar": "4.0.3",
+    "cookie-parser": "^1.4.7",
     "cors": "^2.8.5",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
@@ -41,6 +42,7 @@
     "nodemailer": "7.0.5",
     "pg": "^8.16.3",
     "react-i18next": "^15.6.0",
+    "sanitize-html": "^2.17.0",
     "sharp": "0.34.3",
     "sqlite3": "^5.1.6",
     "uuid": "^11.1.0",
@@ -50,6 +52,7 @@
   "devDependencies": {
     "eslint": "^8.40.0",
     "jest": "^29.5.0",
+    "mock-fs": "^5.5.0",
     "nodemon": "^3.1.10",
     "supertest": "^6.3.3"
   }

backend/server.js

@@ -26,6 +26,12 @@ const { startScheduledBackups } = require('./src/services/databaseBackup');
 const { maintenanceMiddleware } = require('./src/middleware/maintenance');
 const { sessionTimeoutMiddleware } = require('./src/middleware/sessionTimeout');
 const { createRateLimiter, createAuthRateLimiter } = require('./src/services/rateLimitService');
+const { getPublicSitePayload } = require('./src/services/publicSiteService');
+const cookieParser = require('cookie-parser');
+const {
+  getAdminTokenFromRequest,
+  getGalleryTokenFromRequest,
+} = require('./src/utils/tokenUtils');
 
 // Import routes
 const authRoutes = require('./src/routes/auth-enhanced');
@@ -47,14 +53,18 @@ app.set('trust proxy', 'loopback, linklocal, uniquelocal');
 const enableHsts = process.env.ENABLE_HSTS === 'true';
 const cspDirectives = {
   defaultSrc: ["'self'"],
-  scriptSrc: ["'self'", "'unsafe-inline'"], // Required for React
+  scriptSrc: [
+    "'self'",
+    'https://www.google.com',
+    'https://www.gstatic.com'
+  ],
   styleSrc: ["'self'", "'unsafe-inline'", "https:"], // Required for styled components
   imgSrc: ["'self'", "data:", "https:", "blob:"], // Allow data URLs and external images
-  connectSrc: ["'self'"], // API connections
+  connectSrc: ["'self'", 'https://www.google.com', 'https://www.gstatic.com'], // API connections
   fontSrc: ["'self'", "https:", "data:"], // Web fonts
   objectSrc: ["'none'"], // Disable plugins
   mediaSrc: ["'self'"], // Audio/video
-  frameSrc: ["'none'"], // Disable iframes
+  frameSrc: ["'self'", 'https://www.google.com'],
 };
 // Only upgrade insecure requests when HSTS explicitly enabled (HTTPS deployment)
 if (enableHsts) {
@@ -62,6 +72,45 @@ if (enableHsts) {
   cspDirectives.upgradeInsecureRequests = [];
 }
 
+app.use(cookieParser());
+
+app.use((req, res, next) => {
+  if (req.headers.authorization) {
+    return next();
+  }
+
+  const path = req.path || '';
+  const slugMatch = path.match(/\/api\/(?:gallery|secure-images)\/([^\/]+)/);
+  const slug = slugMatch ? slugMatch[1] : req.requestedSlug;
+  const adminToken = getAdminTokenFromRequest(req);
+  const galleryToken = getGalleryTokenFromRequest(req, slug);
+
+  const isAdminRequest = path.startsWith('/api/admin') || path.startsWith('/admin');
+  const isGalleryRequest = Boolean(slugMatch)
+    || path.startsWith('/api/gallery')
+    || path.startsWith('/gallery')
+    || path.startsWith('/api/secure-images');
+
+  // Prefer admin credentials on admin routes so gallery sessions cannot override them.
+  if (isAdminRequest) {
+    if (adminToken) {
+      req.headers.authorization = `Bearer ${adminToken}`;
+    }
+  } else if (isGalleryRequest) {
+    if (galleryToken) {
+      req.headers.authorization = `Bearer ${galleryToken}`;
+    } else if (adminToken) {
+      req.headers.authorization = `Bearer ${adminToken}`;
+    }
+  } else if (adminToken) {
+    req.headers.authorization = `Bearer ${adminToken}`;
+  } else if (galleryToken) {
+    req.headers.authorization = `Bearer ${galleryToken}`;
+  }
+
+  next();
+});
+
 app.use(helmet({
   contentSecurityPolicy: {
     // Avoid helmet adding defaults like upgrade-insecure-requests when not desired
@@ -122,6 +171,145 @@ app.options('/api/*', cors(corsOptions));
 let generalRateLimiter;
 let authRateLimiter;
 
+function composeInlineStyles(payload) {
+  const { branding } = payload;
+  const cssSegments = [];
+
+  cssSegments.push(`:root {
+  --brand-primary: ${branding.colors.primary};
+  --brand-accent: ${branding.colors.accent};
+  --brand-background: ${branding.colors.background};
+  --brand-text: ${branding.colors.text};
+}`);
+
+  if (payload.baseCss) {
+    cssSegments.push(payload.baseCss);
+  }
+
+  if (payload.css) {
+    cssSegments.push(`/* Custom styles */\n${payload.css}`);
+  }
+
+  return cssSegments.join('\n\n');
+}
+
+function renderBrandHeader(branding) {
+  const displayName = branding.companyName || 'PicPeak';
+  const logoSrc = branding.logoUrl || '/picpeak-logo-transparent.png';
+  const logo = `<img src="${logoSrc}" alt="${displayName}" class="brand-logo" loading="lazy" decoding="async" />`;
+
+  const tagline = branding.companyTagline
+    ? `<p class="brand-tagline">${branding.companyTagline}</p>`
+    : '';
+
+  return `<header class="site-header">
+  <div class="header-inner">
+    <div class="brand">
+      ${logo}
+      <div class="brand-copy">
+        <p class="brand-label">${displayName}</p>
+        ${tagline}
+      </div>
+    </div>
+    <nav class="site-nav">
+      <a href="#features">${'Features'}</a>
+      <a href="#workflow">${'Workflow'}</a>
+      <a href="#collections">${'Collections'}</a>
+      <a href="#stories">${'Stories'}</a>
+      <a href="#contact">${'Contact'}</a>
+    </nav>
+  </div>
+</header>`;
+}
+
+function renderBrandFooter(branding) {
+  const displayName = branding.companyName || 'PicPeak';
+  const footerNote = branding.footerText
+    ? `<p>${branding.footerText}</p>`
+    : '<p>Powered by PicPeak to keep every celebration beautifully organised.</p>';
+
+  const supportLink = branding.supportEmail
+    ? `<a href="mailto:${branding.supportEmail}">Support</a>`
+    : '';
+
+  const legalLinks = `
+    <a href="/datenschutz">Privacy Policy</a>
+    <a href="/impressum">Impressum</a>
+    ${supportLink}
+  `;
+
+  return `<footer class="site-footer" id="contact">
+  <div class="footer-inner">
+    <div>
+      <h2>${displayName}</h2>
+      ${footerNote}
+    </div>
+    <div class="footer-links">
+      ${legalLinks}
+    </div>
+  </div>
+</footer>`;
+}
+
+function buildPublicSiteDocument(payload) {
+  const inlineStyles = composeInlineStyles(payload);
+  const header = renderBrandHeader(payload.branding);
+  const footer = renderBrandFooter(payload.branding);
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${payload.title}</title>
+  <meta name="description" content="Curated photo galleries and stories from unforgettable celebrations." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <style>${inlineStyles}</style>
+</head>
+<body>
+  <div class="site-shell">
+    ${header}
+    <main class="site-main">
+      ${payload.html}
+    </main>
+    ${footer}
+  </div>
+</body>
+</html>`;
+}
+
+async function handlePublicSiteRequest(req, res, next) {
+  try {
+    const payload = await getPublicSitePayload();
+
+    if (!payload.enabled) {
+      res.redirect(302, '/admin/login');
+      return;
+    }
+
+    if (payload.etag && req.headers['if-none-match'] === payload.etag) {
+      res.status(304).end();
+      return;
+    }
+
+    const document = buildPublicSiteDocument(payload);
+
+    res.setHeader('Content-Type', 'text/html; charset=utf-8');
+    res.setHeader('Cache-Control', 'public, max-age=30, must-revalidate');
+    res.setHeader('ETag', payload.etag);
+    res.setHeader('Vary', 'Accept-Encoding');
+    res.setHeader('Content-Security-Policy', "default-src 'self'; frame-ancestors 'none'; img-src 'self' data: https:; style-src 'self' 'unsafe-inline' https:; font-src 'self' https: data:; object-src 'none'; script-src 'self'; form-action 'self'");
+
+    res.status(200).send(document);
+  } catch (error) {
+    logger.error('Failed to render public site', { error: error.message });
+    next();
+  }
+}
+
 // Function to initialize rate limiters
 async function initializeRateLimiters() {
   generalRateLimiter = await createRateLimiter();
@@ -260,13 +448,23 @@ try {
   const shouldServe = (serveFrontendEnv === 'true') || ((serveFrontendEnv === undefined || serveFrontendEnv === 'auto') && fs.existsSync(indexPath));
   if (shouldServe) {
     logger.info(`Serving frontend from ${frontendDir}`);
+    // Serve pre-built assets
     app.use(express.static(frontendDir));
-    // SPA fallback for non-API routes
-    app.get([ '/', '/admin', '/admin/*', '/gallery/*' ], (req, res) => {
+
+    // Landing page handler or SPA fallback
+    app.get('/', handlePublicSiteRequest, (req, res) => {
+      res.sendFile(indexPath);
+    });
+
+    // SPA fallback for admin + gallery routes
+    app.get(['/admin', '/admin/*', '/gallery/*'], (req, res) => {
       res.sendFile(indexPath);
     });
   } else {
     logger.info('Frontend static serving disabled or dist not found', { serveFrontendEnv, frontendDir });
+    app.get('/', handlePublicSiteRequest, (req, res) => {
+      res.status(503).send('Frontend bundle not available. Build frontend or enable public site.');
+    });
   }
 } catch (e) {
   logger.warn('Failed to enable frontend static serving', { error: e.message });

backend/src/__tests__/publicSiteService.test.js

@@ -0,0 +1,107 @@
+jest.mock('../database/db', () => {
+  const mockDb = jest.fn();
+  return {
+    db: mockDb,
+    logActivity: jest.fn(),
+  };
+});
+
+jest.mock('../utils/logger', () => ({
+  info: jest.fn(),
+  warn: jest.fn(),
+  error: jest.fn(),
+}));
+
+const { db } = require('../database/db');
+const { getPublicSitePayload, clearPublicSiteCache } = require('../services/publicSiteService');
+const { sanitizeCss } = require('../utils/cssSanitizer');
+
+const buildPublicSiteRows = (overrides = {}) => ([
+  { setting_key: 'general_public_site_enabled', setting_value: JSON.stringify(overrides.enabled ?? true) },
+  { setting_key: 'general_public_site_html', setting_value: JSON.stringify(overrides.html ?? '<h1>{{company_name}}</h1>') },
+  { setting_key: 'general_public_site_custom_css', setting_value: JSON.stringify(overrides.css ?? "body { color: red; }") }
+]);
+
+const buildBrandingRows = (overrides = {}) => ([
+  { setting_key: 'branding_company_name', setting_value: JSON.stringify(overrides.companyName ?? 'Willow & Pine Studio') },
+  { setting_key: 'branding_company_tagline', setting_value: JSON.stringify(overrides.companyTagline ?? 'Stories told in colour and light.') },
+  { setting_key: 'branding_support_email', setting_value: JSON.stringify(overrides.supportEmail ?? 'hello@example.com') },
+  { setting_key: 'branding_logo_url', setting_value: JSON.stringify(overrides.logoUrl ?? '/uploads/logos/logo.png') },
+  { setting_key: 'branding_footer_text', setting_value: JSON.stringify(overrides.footerText ?? 'Crafted with care for every celebration.') },
+  { setting_key: 'theme_config', setting_value: JSON.stringify(overrides.themeConfig ?? {
+    primaryColor: '#2563eb',
+    accentColor: '#1d4ed8',
+    backgroundColor: '#f8fafc',
+    textColor: '#0f172a'
+  }) }
+]);
+
+describe('publicSiteService', () => {
+  beforeEach(() => {
+    clearPublicSiteCache();
+    jest.clearAllMocks();
+  });
+
+  it('sanitizes stored HTML by stripping script tags', async () => {
+    const publicSiteRows = buildPublicSiteRows({ html: '<h1>{{company_name}}</h1><script>alert(1)</script>' });
+    const brandingRows = buildBrandingRows();
+
+    db.mockImplementationOnce(() => ({ whereIn: () => Promise.resolve(publicSiteRows) }));
+    db.mockImplementationOnce(() => ({ whereIn: () => Promise.resolve(brandingRows) }));
+
+    const payload = await getPublicSitePayload({ bypassCache: true });
+
+    expect(payload.enabled).toBe(true);
+    expect(payload.html).toContain('<h1>Willow & Pine Studio</h1>');
+    expect(payload.html).not.toContain('<script');
+    expect(payload.baseCss.length).toBeGreaterThan(0);
+    expect(payload.branding.companyName).toBe('Willow & Pine Studio');
+  });
+
+  it('sanitizes custom CSS and removes dangerous patterns', async () => {
+    const publicSiteRows = buildPublicSiteRows({
+      css: "body { color: blue; } @import url('https://malicious.example/style.css'); div { background: url(\"javascript:alert(1)\"); }"
+    });
+    const brandingRows = buildBrandingRows();
+
+    db.mockImplementationOnce(() => ({ whereIn: () => Promise.resolve(publicSiteRows) }));
+    db.mockImplementationOnce(() => ({ whereIn: () => Promise.resolve(brandingRows) }));
+
+    const payload = await getPublicSitePayload({ bypassCache: true });
+
+    expect(payload.css).toContain('body { color: blue; }');
+    expect(payload.css).not.toContain('@import');
+    expect(payload.css).not.toContain('javascript:');
+    // Client-side util should match server sanitization expectations
+    const clientSanitized = sanitizeCss(publicSiteRows[2].setting_value ? JSON.parse(publicSiteRows[2].setting_value) : '');
+    expect(clientSanitized).not.toContain('@import');
+    expect(clientSanitized).not.toContain('javascript:');
+  });
+
+  it('injects branding tokens into the rendered payload', async () => {
+    const publicSiteRows = buildPublicSiteRows({ html: '<section><h1>{{company_name}}</h1><p>{{company_tagline}}</p><a href="mailto:{{support_email}}">Get in touch</a></section>' });
+    const brandingRows = buildBrandingRows({
+      companyName: 'Aurora Collective',
+      companyTagline: 'Modern photography for timeless celebrations.',
+      supportEmail: 'studio@aurora.co',
+      logoUrl: '/uploads/logos/aurora.png',
+      themeConfig: {
+        primaryColor: '#5C8762',
+        accentColor: '#1d4ed8',
+        backgroundColor: '#fafafa',
+        textColor: '#171717'
+      }
+    });
+
+    db.mockImplementationOnce(() => ({ whereIn: () => Promise.resolve(publicSiteRows) }));
+    db.mockImplementationOnce(() => ({ whereIn: () => Promise.resolve(brandingRows) }));
+
+    const payload = await getPublicSitePayload({ bypassCache: true });
+
+    expect(payload.html).toContain('Aurora Collective');
+    expect(payload.html).toContain('Modern photography for timeless celebrations.');
+    expect(payload.html).toContain('studio@aurora.co');
+    expect(payload.branding.logoUrl).toBe('/uploads/logos/aurora.png');
+    expect(payload.branding.colors.primary).toBe('#5C8762');
+  });
+});

backend/src/constants/publicSiteDefaults.js

@@ -0,0 +1,690 @@
+const DEFAULT_PUBLIC_SITE_TITLE = 'PicPeak — Curated Galleries, Effortless Sharing';
+
+const DEFAULT_PUBLIC_SITE_HTML = `
+<section class="hero" id="welcome">
+  <div class="hero__inner">
+    <span class="hero__badge">PicPeak Showcase</span>
+    <h1>Share the story of {{company_name}}</h1>
+    <p class="hero__lead">{{company_tagline}}</p>
+    <div class="hero__cta">
+      <a href="#features" class="button button--primary">Explore Features</a>
+      <a href="#collections" class="button button--ghost">View Sample Galleries</a>
+    </div>
+    <dl class="hero__stats">
+      <div>
+        <dt>Private invites</dt>
+        <dd>Secure links for every guest</dd>
+      </div>
+      <div>
+        <dt>Curated delivery</dt>
+        <dd>Highlight every favourite instantly</dd>
+      </div>
+      <div>
+        <dt>Fully branded</dt>
+        <dd>Colours, typography, and logo that match you</dd>
+      </div>
+    </dl>
+  </div>
+  <div class="hero__visual">
+    <article class="deck deck--primary">
+      <header class="deck__header">
+        <img src="{{brand_logo_url}}" alt="{{company_name}} logo" class="deck__logo" loading="lazy" decoding="async" />
+        <span class="deck__title">PicPeak Gallery</span>
+      </header>
+      <ul class="deck__list">
+        <li>Guided cover stories</li>
+        <li>Guest uploads with approvals</li>
+        <li>Protected high-res downloads</li>
+      </ul>
+    </article>
+    <article class="deck deck--secondary">
+      <p class="deck__quote">“PicPeak makes delivery feel like part of the celebration. Our couples relive the day the moment they open the link.”</p>
+      <p class="deck__author">— Studio Miraval</p>
+    </article>
+  </div>
+</section>
+
+<section class="features" id="features">
+  <div class="section-head">
+    <span class="section-badge">Why teams pick PicPeak</span>
+    <h2>Design-first galleries with the workflow you already love</h2>
+    <p>Bring the PicPeak admin experience to your clients with branded, secure, and responsive public pages.</p>
+  </div>
+  <div class="feature-grid">
+    <article>
+      <h3>Beautiful by default</h3>
+      <p>Every gallery inherits your PicPeak theme, typography, and colour palette automatically.</p>
+    </article>
+    <article>
+      <h3>Guided storytelling</h3>
+      <p>Create anchored sections, spotlight favourite collections, and embed testimonials that build trust.</p>
+    </article>
+    <article>
+      <h3>Secure sharing</h3>
+      <p>Password gates, expiring links, and download protection keep every celebration personal.</p>
+    </article>
+  </div>
+</section>
+
+<section class="workflow" id="workflow">
+  <div class="workflow__content">
+    <h2>Launch in minutes</h2>
+    <ol class="workflow__steps">
+      <li>
+        <h4>Brand it once</h4>
+        <p>PicPeak automatically applies your logo, colours, and support details.</p>
+      </li>
+      <li>
+        <h4>Curate sections</h4>
+        <p>Highlight hero stories, featured galleries, and timeline moments with simple HTML blocks.</p>
+      </li>
+      <li>
+        <h4>Share confidently</h4>
+        <p>Send a single link that greets guests before they enter their private gallery.</p>
+      </li>
+    </ol>
+  </div>
+  <div class="workflow__media">
+    <figure class="workflow__browser">
+      <img src="/picpeak-logo-transparent.png" alt="PicPeak interface" loading="lazy" decoding="async" />
+      <figcaption>PicPeak dashboard &mdash; trusted by studios worldwide.</figcaption>
+    </figure>
+  </div>
+</section>
+
+<section class="collections" id="collections">
+  <div class="section-head">
+    <span class="section-badge">Showcase highlights</span>
+    <h2>Curated sample galleries that mirror your client experience</h2>
+    <p>Drop in featured stories, welcome messages, and callouts that prepare guests for what comes next.</p>
+  </div>
+  <div class="collection-showcase">
+    <article>
+      <h3>Signature Galleries</h3>
+      <p>Use responsive cards to preview your most loved collections or vendor partnerships.</p>
+    </article>
+    <article>
+      <h3>Welcome timelines</h3>
+      <p>Guide guests from arrival to download with steps that feel effortless and on-brand.</p>
+    </article>
+  </div>
+</section>
+
+<section class="stories" id="stories">
+  <div class="section-head section-head--center">
+    <span class="section-badge">Client notes</span>
+    <h2>Experiences that keep guests coming back</h2>
+  </div>
+  <div class="story-grid">
+    <figure>
+      <blockquote>“From the welcome page to the final download, everything felt like us. PicPeak turned our gallery into part of the celebration.”</blockquote>
+      <figcaption>— Harper &amp; Elias</figcaption>
+    </figure>
+    <figure>
+      <blockquote>“The public landing page gives every collection a narrative. Our couples feel the care we put into every image.”</blockquote>
+      <figcaption>— Jordan Rivera, Photographer</figcaption>
+    </figure>
+  </div>
+</section>
+
+<section class="cta" id="contact">
+  <div class="cta__inner">
+    <div>
+      <h2>Ready to welcome your guests?</h2>
+      <p>Create a PicPeak landing page that matches your studio and introduces every celebration with confidence.</p>
+    </div>
+    <div class="cta__actions">
+      <a href="mailto:{{support_email}}" class="button button--primary">Contact us</a>
+      <a href="#features" class="button button--ghost">Review features</a>
+    </div>
+  </div>
+</section>
+
+<footer class="site-footer" id="legal">
+  <div class="footer-inner">
+    <div>
+      <h2>{{company_name}}</h2>
+      <p>Powered by PicPeak to keep every celebration beautifully organised.</p>
+    </div>
+    <div class="footer-links">
+      <a href="/datenschutz">Privacy Policy</a>
+      <a href="/impressum">Impressum</a>
+      <a href="mailto:{{support_email}}">Support</a>
+    </div>
+  </div>
+</footer>
+`;
+
+const DEFAULT_PUBLIC_SITE_CSS = `
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  background: linear-gradient(180deg, var(--brand-background), #ffffff 55%);
+  color: var(--brand-text);
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+.site-shell {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(180deg, rgba(15, 23, 42, 0.03), transparent 65%);
+}
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(18px);
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+.header-inner {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 1rem 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.brand-logo {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  object-fit: contain;
+  background: rgba(148, 163, 184, 0.12);
+  padding: 6px;
+}
+
+.brand-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.brand-label {
+  margin: 0;
+  font-weight: 600;
+  font-size: 1rem;
+  letter-spacing: -0.01em;
+  color: var(--brand-text);
+}
+
+.brand-tagline {
+  margin: 0;
+  font-size: 0.85rem;
+  color: rgba(15, 23, 42, 0.65);
+}
+
+.site-nav {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.95rem;
+  color: rgba(15, 23, 42, 0.65);
+}
+
+.site-nav a {
+  position: relative;
+  padding: 0.25rem 0;
+}
+
+.site-nav a::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -6px;
+  width: 100%;
+  height: 2px;
+  background: transparent;
+  transition: background 0.2s ease;
+}
+
+.site-nav a:hover::after {
+  background: var(--brand-primary);
+}
+
+.site-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+  padding: 2.5rem 1.5rem 4rem;
+}
+
+@media (min-width: 960px) {
+  .site-main {
+    padding: 3rem 0 5rem;
+    gap: 5rem;
+  }
+
+  .hero,
+  .features,
+  .workflow,
+  .collections,
+  .stories,
+  .cta {
+    max-width: 1100px;
+    margin: 0 auto;
+  }
+}
+
+.hero {
+  display: grid;
+  gap: 2.5rem;
+  align-items: center;
+}
+
+@media (min-width: 960px) {
+  .hero {
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+  }
+}
+
+.hero__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+}
+
+.hero__badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.55rem 0.9rem;
+  border-radius: 999px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: rgba(34, 197, 94, 0.18);
+  color: var(--brand-primary);
+}
+
+.hero h1 {
+  margin: 0;
+  font-size: clamp(2.65rem, 4.8vw, 3.6rem);
+  letter-spacing: -0.02em;
+  line-height: 1.08;
+}
+
+.hero__lead {
+  margin: 0;
+  max-width: 32rem;
+  color: rgba(15, 23, 42, 0.72);
+  font-size: 1.05rem;
+  line-height: 1.6;
+}
+
+.hero__cta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.85rem;
+}
+
+.hero__stats {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  margin: 0;
+  padding: 0;
+}
+
+.hero__stats dt {
+  font-weight: 600;
+  color: var(--brand-text);
+}
+
+.hero__stats dd {
+  margin: 0.35rem 0 0;
+  color: rgba(15, 23, 42, 0.6);
+  font-size: 0.95rem;
+}
+
+.hero__visual {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.deck {
+  border-radius: 20px;
+  padding: 1.75rem;
+  background: #fff;
+  box-shadow: 0 35px 60px -35px rgba(15, 23, 42, 0.35);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  display: grid;
+  gap: 1.35rem;
+}
+
+.deck--primary {
+  border-color: rgba(34, 197, 94, 0.2);
+}
+
+.deck--secondary {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(15, 23, 42, 0.03));
+}
+
+.deck__header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.deck__logo {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: rgba(34, 197, 94, 0.12);
+  padding: 6px;
+}
+
+.deck__title {
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.deck__list {
+  margin: 0;
+  padding-left: 1.1rem;
+  display: grid;
+  gap: 0.65rem;
+  color: rgba(15, 23, 42, 0.68);
+}
+
+.deck__quote {
+  margin: 0;
+  font-size: 1.05rem;
+  line-height: 1.7;
+  color: rgba(15, 23, 42, 0.78);
+}
+
+.deck__author {
+  margin: 0;
+  font-weight: 600;
+  color: var(--brand-text);
+}
+
+.section-head {
+  display: grid;
+  gap: 1rem;
+  max-width: 640px;
+}
+
+.section-head--center {
+  text-align: center;
+  margin: 0 auto;
+}
+
+.section-badge {
+  display: inline-flex;
+  padding: 0.45rem 0.9rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: rgba(34, 197, 94, 0.14);
+  color: var(--brand-primary);
+}
+
+.section-head h2 {
+  margin: 0;
+  font-size: clamp(2rem, 3vw, 2.6rem);
+  letter-spacing: -0.018em;
+}
+
+.section-head p {
+  margin: 0;
+  color: rgba(15, 23, 42, 0.65);
+}
+
+.feature-grid {
+  display: grid;
+  gap: 1.5rem;
+  margin-top: 2.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.feature-grid article {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 16px;
+  padding: 1.75rem;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.28);
+}
+
+.workflow {
+  display: grid;
+  gap: 2rem;
+  align-items: center;
+}
+
+@media (min-width: 960px) {
+  .workflow {
+    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  }
+}
+
+.workflow__steps {
+  margin: 1.75rem 0 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 1.5rem;
+}
+
+.workflow__steps h4 {
+  margin: 0 0 0.35rem;
+  font-size: 1.05rem;
+  color: var(--brand-text);
+}
+
+.workflow__steps p {
+  margin: 0;
+  color: rgba(15, 23, 42, 0.65);
+}
+
+.workflow__browser {
+  margin: 0;
+  background: rgba(15, 23, 42, 0.05);
+  border-radius: 20px;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  padding: 2rem;
+  text-align: center;
+  color: rgba(15, 23, 42, 0.55);
+  font-size: 0.85rem;
+}
+
+.collection-showcase {
+  margin-top: 2.5rem;
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+
+.collection-showcase article {
+  background: rgba(255, 255, 255, 0.92);
+  border-radius: 18px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  padding: 1.5rem;
+  box-shadow: 0 18px 45px -32px rgba(15, 23, 42, 0.3);
+}
+
+.story-grid {
+  margin-top: 2.5rem;
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.story-grid figure {
+  margin: 0;
+  padding: 1.75rem;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow: 0 18px 42px -32px rgba(15, 23, 42, 0.28);
+}
+
+.story-grid blockquote {
+  margin: 0 0 1.2rem;
+  font-size: 1.05rem;
+  line-height: 1.7;
+  color: rgba(15, 23, 42, 0.8);
+}
+
+.story-grid figcaption {
+  font-weight: 600;
+  color: rgba(15, 23, 42, 0.7);
+}
+
+.cta {
+  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
+  color: #fff;
+  border-radius: 28px;
+  padding: clamp(2.5rem, 5vw, 3.5rem);
+}
+
+.cta__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+  max-width: 720px;
+}
+
+.cta__inner h2 {
+  margin: 0;
+  font-size: clamp(2rem, 3vw, 2.5rem);
+}
+
+.cta__inner p {
+  margin: 0;
+  font-size: 1.05rem;
+  opacity: 0.95;
+}
+
+.cta__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.85rem 1.75rem;
+  border-radius: 999px;
+  font-weight: 600;
+  transition: transform 160ms ease, box-shadow 200ms ease, background 200ms ease, color 200ms ease;
+  border: 1px solid transparent;
+}
+
+.button:hover {
+  transform: translateY(-2px);
+}
+
+.button--primary {
+  background: var(--brand-primary);
+  color: #fff;
+  box-shadow: 0 25px 45px -25px rgba(15, 23, 42, 0.55);
+}
+
+.button--primary:hover {
+  background: var(--brand-accent);
+}
+
+.button--ghost {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.45);
+  color: inherit;
+}
+
+.site-footer {
+  padding: 3rem 1.5rem;
+  background: rgba(15, 23, 42, 0.05);
+  border-top: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+.footer-inner {
+  max-width: 1100px;
+  margin: 0 auto;
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+
+.footer-inner h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.1rem;
+}
+
+.footer-inner p {
+  margin: 0;
+  color: rgba(15, 23, 42, 0.65);
+  line-height: 1.6;
+}
+
+.footer-links {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  font-weight: 600;
+  color: var(--brand-primary);
+}
+
+.footer-links a {
+  color: inherit;
+}
+
+.footer-links a:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 960px) {
+  .site-nav {
+    display: none;
+  }
+
+  .hero__visual {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .workflow {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .cta__inner {
+    gap: 1.5rem;
+  }
+}
+`;
+
+module.exports = {
+  DEFAULT_PUBLIC_SITE_TITLE,
+  DEFAULT_PUBLIC_SITE_HTML,
+  DEFAULT_PUBLIC_SITE_CSS,
+};

backend/src/database/db.js

@@ -75,6 +75,13 @@ async function initializeDatabase() {
       table.boolean('is_archived').defaultTo(false);
       table.string('archive_path');
       table.datetime('archived_at');
+      table.boolean('allow_user_uploads').defaultTo(false);
+      table.integer('upload_category_id');
+      table.boolean('allow_downloads').defaultTo(true);
+      table.boolean('disable_right_click').defaultTo(false);
+      table.boolean('watermark_downloads').defaultTo(false);
+      table.text('watermark_text');
+      table.integer('hero_photo_id').references('id').inTable('photos').onDelete('SET NULL');
     });
   } else {
     // Check if color_theme needs to be updated to TEXT type
@@ -104,11 +111,39 @@ async function initializeDatabase() {
             archive_path TEXT,
             archived_at DATETIME,
             allow_user_uploads BOOLEAN DEFAULT 0,
-            upload_category_id INTEGER
+            upload_category_id INTEGER,
+            allow_downloads BOOLEAN DEFAULT 1,
+            disable_right_click BOOLEAN DEFAULT 0,
+            watermark_downloads BOOLEAN DEFAULT 0,
+            watermark_text TEXT,
+            hero_photo_id INTEGER
           )
         `);
         
-        await db.raw('INSERT INTO events_new SELECT * FROM events');
+        const pragmaRows = await db.raw("PRAGMA table_info('events')");
+        const existingColumns = pragmaRows.map(row => row.name);
+        const selectColumns = existingColumns.map((col) => {
+          switch (col) {
+            case 'allow_user_uploads':
+              return "COALESCE(allow_user_uploads, 0) as allow_user_uploads";
+            case 'upload_category_id':
+              return "upload_category_id";
+            case 'allow_downloads':
+              return "COALESCE(allow_downloads, 1) as allow_downloads";
+            case 'disable_right_click':
+              return "COALESCE(disable_right_click, 0) as disable_right_click";
+            case 'watermark_downloads':
+              return "COALESCE(watermark_downloads, 0) as watermark_downloads";
+            case 'watermark_text':
+              return 'watermark_text';
+            case 'hero_photo_id':
+              return 'hero_photo_id';
+            default:
+              return col;
+          }
+        });
+
+        await db.raw(`INSERT INTO events_new (${existingColumns.join(', ')}) SELECT ${selectColumns.join(', ')} FROM events`);
         await db.raw('DROP TABLE events');
         await db.raw('ALTER TABLE events_new RENAME TO events');
       } catch (error) {
@@ -129,6 +164,7 @@ async function initializeDatabase() {
       table.string('thumbnail_path');
       table.string('type').notNullable(); // 'collage' or 'individual'
       table.integer('size_bytes');
+      table.string('uploaded_by').defaultTo('admin');
       table.datetime('uploaded_at').defaultTo(db.fn.now());
       table.integer('view_count').defaultTo(0);
       table.integer('download_count').defaultTo(0);
@@ -159,11 +195,24 @@ async function initializeDatabase() {
       table.string('email_type').notNullable(); // 'creation', 'warning', 'expiration', 'archive_complete'
       table.json('email_data');
       table.string('status').defaultTo('pending'); // 'pending', 'sent', 'failed'
+      table.datetime('created_at').defaultTo(db.fn.now());
       table.datetime('scheduled_at').defaultTo(db.fn.now());
       table.datetime('sent_at');
       table.text('error_message');
       table.integer('retry_count').defaultTo(0);
     });
+  } else {
+    const hasCreatedAt = await db.schema.hasColumn('email_queue', 'created_at');
+    if (!hasCreatedAt) {
+      await db.schema.alterTable('email_queue', (table) => {
+        table.datetime('created_at').defaultTo(db.fn.now());
+      });
+      try {
+        await db('email_queue').whereNull('created_at').update({ created_at: db.fn.now() });
+      } catch (updateError) {
+        logger.debug('Email queue created_at backfill skipped', { error: updateError.message });
+      }
+    }
   }
 
   // Admin users table
@@ -181,6 +230,7 @@ async function initializeDatabase() {
       table.datetime('updated_at').defaultTo(db.fn.now());
       table.datetime('last_login');
       table.string('last_login_ip');
+      table.string('language', 2).defaultTo('en');
     });
   } else {
     // Check if updated_at column exists
@@ -216,6 +266,13 @@ async function initializeDatabase() {
         table.string('last_login_ip');
       });
     }
+
+    const hasLanguage = await db.schema.hasColumn('admin_users', 'language');
+    if (!hasLanguage) {
+      await db.schema.table('admin_users', (table) => {
+        table.string('language', 2).defaultTo('en');
+      });
+    }
   }
 
   // Token revocation tables
@@ -291,6 +348,18 @@ async function initializeDatabase() {
       table.datetime('updated_at').defaultTo(db.fn.now());
     });
   }
+  
+  const defaultLanguageSetting = await db('app_settings')
+    .where('setting_key', 'default_language')
+    .first();
+  if (!defaultLanguageSetting) {
+    await db('app_settings').insert({
+      setting_key: 'default_language',
+      setting_value: JSON.stringify('en'),
+      setting_type: 'general',
+      updated_at: new Date(),
+    });
+  }
 
   // Activity logs table
   const hasActivityLogsTable = await db.schema.hasTable('activity_logs');
@@ -315,6 +384,86 @@ async function initializeDatabase() {
       });
     }
   }
+
+  await ensureGlobalCategories();
+}
+
+// Ensure photo categories exist for new deployments
+async function ensureGlobalCategories() {
+  const hasPhotoCategoriesTable = await db.schema.hasTable('photo_categories');
+  if (!hasPhotoCategoriesTable) {
+    await db.schema.createTable('photo_categories', (table) => {
+      table.increments('id').primary();
+      table.string('name', 100).notNullable();
+      table.string('slug', 100).notNullable();
+      table.boolean('is_global').defaultTo(true);
+      table.integer('event_id').references('id').inTable('events').onDelete('CASCADE');
+      table.timestamp('created_at').defaultTo(db.fn.now());
+      table.unique(['slug', 'event_id']);
+    });
+  }
+
+  const hasCategoryIdColumn = await db.schema.hasColumn('photos', 'category_id');
+  if (!hasCategoryIdColumn) {
+    await db.schema.alterTable('photos', (table) => {
+      table.integer('category_id').references('id').inTable('photo_categories');
+    });
+  }
+
+  const hasCmsPagesTable = await db.schema.hasTable('cms_pages');
+  if (!hasCmsPagesTable) {
+    await db.schema.createTable('cms_pages', (table) => {
+      table.increments('id').primary();
+      table.string('slug', 100).unique().notNullable();
+      table.text('title_en');
+      table.text('title_de');
+      table.text('content_en');
+      table.text('content_de');
+      table.timestamp('updated_at').defaultTo(db.fn.now());
+    });
+  }
+
+  const categoryCountRow = await db('photo_categories').count({ count: 'id' }).first();
+  const categoryCount = categoryCountRow ? Number(categoryCountRow.count) : 0;
+  if (categoryCount === 0) {
+    const defaultCategories = [
+      { name: 'Ceremony', slug: 'ceremony', is_global: true },
+      { name: 'Reception', slug: 'reception', is_global: true },
+      { name: 'Portraits', slug: 'portraits', is_global: true },
+      { name: 'Group Photos', slug: 'group-photos', is_global: true },
+      { name: 'Details', slug: 'details', is_global: true },
+      { name: 'Party', slug: 'party', is_global: true },
+    ];
+
+    await db('photo_categories').insert(defaultCategories);
+  }
+
+  const cmsPages = await db('cms_pages').select('slug');
+  const existingSlugs = cmsPages.map((page) => page.slug);
+  const defaultPages = [
+    {
+      slug: 'impressum',
+      title_en: 'Legal Notice',
+      title_de: 'Impressum',
+      content_en: '<h2>Legal Notice</h2><p>Please edit this content in the admin panel.</p>',
+      content_de: '<h2>Impressum</h2><p>Bitte bearbeiten Sie diesen Inhalt im Admin-Panel.</p>',
+      updated_at: new Date(),
+    },
+    {
+      slug: 'datenschutz',
+      title_en: 'Privacy Policy',
+      title_de: 'Datenschutzerklärung',
+      content_en: '<h2>Privacy Policy</h2><p>Please edit this content in the admin panel.</p>',
+      content_de: '<h2>Datenschutzerklärung</h2><p>Bitte bearbeiten Sie diesen Inhalt im Admin-Panel.</p>',
+      updated_at: new Date(),
+    },
+  ];
+
+  for (const page of defaultPages) {
+    if (!existingSlugs.includes(page.slug)) {
+      await db('cms_pages').insert(page);
+    }
+  }
 }
 
 // Helper function to log activities

backend/src/middleware/auth-enhanced-v2.js

@@ -3,13 +3,14 @@ const { db } = require('../database/db');
 const { formatBoolean } = require('../utils/dbCompat');
 const { isTokenRevoked } = require('../utils/tokenRevocation');
 const logger = require('../utils/logger');
+const { getAdminTokenFromRequest, getGalleryTokenFromRequest } = require('../utils/tokenUtils');
 
 /**
  * Enhanced admin authentication middleware with revocation checking
  */
 async function adminAuth(req, res, next) {
   try {
-    const token = req.headers.authorization?.split(' ')[1];
+    const token = getAdminTokenFromRequest(req);
     if (!token) {
       return res.status(401).json({ error: 'No token provided' });
     }
@@ -97,7 +98,8 @@ async function adminAuth(req, res, next) {
  */
 async function galleryAuth(req, res, next) {
   try {
-    const token = req.headers.authorization?.split(' ')[1];
+    const slug = req.params?.slug || req.requestedSlug;
+    const token = getGalleryTokenFromRequest(req, slug);
     if (!token) {
       return res.status(401).json({ error: 'No token provided' });
     }
@@ -164,4 +166,4 @@ module.exports = {
   adminAuth, 
   galleryAuth,
   // ... other exports
-};
+};

backend/src/middleware/auth-enhanced.js

@@ -2,6 +2,7 @@ const jwt = require('jsonwebtoken');
 const { db } = require('../database/db');
 const { formatBoolean } = require('../utils/dbCompat');
 const logger = require('../utils/logger');
+const { getAdminTokenFromRequest, getGalleryTokenFromRequest } = require('../utils/tokenUtils');
 
 /**
  * Enhanced admin authentication middleware
@@ -9,7 +10,7 @@ const logger = require('../utils/logger');
  */
 async function adminAuth(req, res, next) {
   try {
-    const token = req.headers.authorization?.split(' ')[1];
+    const token = getAdminTokenFromRequest(req);
     if (!token) {
       return res.status(401).json({ error: 'No token provided' });
     }
@@ -89,7 +90,8 @@ async function adminAuth(req, res, next) {
  */
 async function galleryAuth(req, res, next) {
   try {
-    const token = req.headers.authorization?.split(' ')[1];
+    const slug = req.params?.slug || req.requestedSlug;
+    const token = getGalleryTokenFromRequest(req, slug);
     if (!token) {
       return res.status(401).json({ error: 'No token provided' });
     }
@@ -151,7 +153,8 @@ async function galleryAuth(req, res, next) {
  */
 async function photoAuth(req, res, next) {
   try {
-    const token = req.headers.authorization?.split(' ')[1];
+    const slug = req.params?.slug || req.requestedSlug;
+    const token = getAdminTokenFromRequest(req) || getGalleryTokenFromRequest(req, slug);
     if (!token) {
       return res.status(401).json({ error: 'Authentication required' });
     }
@@ -235,4 +238,4 @@ module.exports = {
   galleryAuth,
   photoAuth,
   verifyGalleryAccess
-};
+};

backend/src/middleware/auth.js

@@ -2,10 +2,11 @@ const jwt = require('jsonwebtoken');
 const { db } = require('../database/db');
 const { formatBoolean } = require('../utils/dbCompat');
 const logger = require('../utils/logger');
+const { getAdminTokenFromRequest } = require('../utils/tokenUtils');
 
 async function adminAuth(req, res, next) {
   try {
-    const token = req.headers.authorization?.split(' ')[1];
+    const token = getAdminTokenFromRequest(req);
     if (!token) {
       const clientIp = req.headers['x-forwarded-for']?.split(',')[0]?.trim() || 
                      req.headers['x-real-ip'] || 

backend/src/middleware/gallery.js

@@ -1,17 +1,17 @@
 const jwt = require('jsonwebtoken');
 const { db, withRetry } = require('../database/db');
 const { formatBoolean } = require('../utils/dbCompat');
+const { getGalleryTokenFromRequest } = require('../utils/tokenUtils');
 
 // Middleware to verify gallery access
 async function verifyGalleryAccess(req, res, next) {
   try {
-    const authHeader = req.headers.authorization;
-    const token = authHeader?.split(' ')[1];
+    const requestedSlug = req.params.slug || req.requestedSlug;
+    const token = getGalleryTokenFromRequest(req, requestedSlug);
     if (!token) {
       return res.status(401).json({ error: 'No token provided' });
     }
     
-    
     // Try to verify with issuer first, fallback to no issuer for backward compatibility
     let decoded;
     try {
@@ -29,8 +29,6 @@ async function verifyGalleryAccess(req, res, next) {
     console.log('[verifyGalleryAccess] Token decoded successfully, eventId:', decoded.eventId);
     
     // If we have a slug in the URL params or from pre-middleware, verify it matches
-    const requestedSlug = req.params.slug || req.requestedSlug;
-    
     let event;
     if (requestedSlug) {
       // Verify by slug and ensure it matches the token's event
@@ -84,10 +82,10 @@ async function verifyGalleryAccess(req, res, next) {
     next();
   } catch (error) {
     console.error('Error verifying gallery access:', error);
-    res.status(401).json({ error: 'Invalid token', details: error.message });
+    res.status(401).json({ error: 'Invalid token' });
   }
 }
 
 module.exports = {
   verifyGalleryAccess
-};
+};

backend/src/middleware/photoAuth.js

@@ -2,6 +2,7 @@ const bcrypt = require('bcrypt');
 const jwt = require('jsonwebtoken');
 const { db } = require('../database/db');
 const { formatBoolean } = require('../utils/dbCompat');
+const { getGalleryTokenFromRequest } = require('../utils/tokenUtils');
 
 async function photoAuth(req, res, next) {
   try {
@@ -20,9 +21,9 @@ async function photoAuth(req, res, next) {
     }
     
     // First check for JWT token (from gallery access)
-    const authHeader = req.headers.authorization;
-    if (authHeader && authHeader.startsWith('Bearer ')) {
-      const token = authHeader.replace('Bearer ', '');
+    const tokenFromRequest = getGalleryTokenFromRequest(req, eventSlug);
+    if (tokenFromRequest) {
+      const token = tokenFromRequest;
       try {
         // Try to verify with issuer first, fallback to no issuer for backward compatibility
         let decoded;
@@ -88,7 +89,7 @@ async function photoAuth(req, res, next) {
     // Check for password header (legacy support)
     const password = req.headers['x-gallery-password'];
     
-    if (!password && !authHeader) {
+    if (!password && !tokenFromRequest) {
       return res.status(401).json({ error: 'Authentication required' });
     }
     

backend/src/middleware/sessionTimeout.js

@@ -1,5 +1,6 @@
 const jwt = require('jsonwebtoken');
 const { db } = require('../database/db');
+const { getAdminTokenFromRequest } = require('../utils/tokenUtils');
 
 // In-memory session tracking (in production, use Redis)
 const sessions = new Map();
@@ -67,11 +68,7 @@ async function getSessionTimeout() {
 
 async function sessionTimeoutMiddleware(req, res, next) {
   // Skip for non-authenticated routes
-  if (!req.headers.authorization) {
-    return next();
-  }
-  
-  const token = req.headers.authorization.split(' ')[1];
+  const token = getAdminTokenFromRequest(req);
   if (!token) {
     return next();
   }
@@ -150,4 +147,4 @@ module.exports = {
   sessionTimeoutMiddleware, 
   endSession,
   getActiveSessions 
-};
+};

backend/src/routes/adminBackup.js

@@ -221,7 +221,11 @@ router.post('/test-connection', adminAuth, async (req, res) => {
           await fs.access(config.path, fs.constants.W_OK);
           res.json({ success: true, message: 'Local path is writable' });
         } catch (error) {
-          res.json({ success: false, message: 'Cannot write to local path: ' + error.message });
+          logger.warn('Local backup path not writable', {
+            path: config.path,
+            error: error.message
+          });
+          res.json({ success: false, message: 'Cannot write to local path. Check server logs for details.' });
         }
         break;
         
@@ -243,7 +247,11 @@ router.post('/test-connection', adminAuth, async (req, res) => {
           const { stdout } = await execAsync(testCommand);
           res.json({ success: true, message: 'Rsync connection successful' });
         } catch (error) {
-          res.json({ success: false, message: 'Rsync connection failed: ' + error.message });
+          logger.warn('Rsync connection test failed', {
+            destination: config.host || config.destination,
+            error: error.message
+          });
+          res.json({ success: false, message: 'Rsync connection failed. Check server logs for details.' });
         }
         break;
         
@@ -274,7 +282,7 @@ router.get('/manifest/:backupRunId', adminAuth, async (req, res) => {
     });
   } catch (error) {
     logger.error('Failed to get backup manifest:', error);
-    res.status(404).json({ error: error.message || 'Backup manifest not found' });
+    res.status(404).json({ error: 'Backup manifest not found' });
   }
 });
 
@@ -327,7 +335,7 @@ router.get('/manifest/:backupRunId/download', adminAuth, async (req, res) => {
     }
   } catch (error) {
     logger.error('Failed to download backup manifest:', error);
-    res.status(404).json({ error: error.message || 'Backup manifest not found' });
+    res.status(404).json({ error: 'Backup manifest not found' });
   }
 });
 
@@ -344,7 +352,7 @@ router.get('/manifests/:backupId', adminAuth, async (req, res) => {
     });
   } catch (error) {
     logger.error('Failed to get backup manifest:', error);
-    res.status(404).json({ error: error.message || 'Backup manifest not found' });
+    res.status(404).json({ error: 'Backup manifest not found' });
   }
 });
 
@@ -375,7 +383,7 @@ router.get('/manifests/:backupId/download', adminAuth, async (req, res) => {
     }
   } catch (error) {
     logger.error('Failed to download backup manifest:', error);
-    res.status(404).json({ error: error.message || 'Backup manifest not found' });
+    res.status(404).json({ error: 'Backup manifest not found' });
   }
 });
 
@@ -436,7 +444,7 @@ router.get('/s3/buckets', adminAuth, async (req, res) => {
     });
   } catch (error) {
     logger.error('Failed to list S3 buckets:', error);
-    res.status(500).json({ error: 'Failed to list S3 buckets: ' + error.message });
+    res.status(500).json({ error: 'Failed to list S3 buckets' });
   }
 });
 
@@ -473,7 +481,7 @@ router.get('/s3/files', adminAuth, async (req, res) => {
     });
   } catch (error) {
     logger.error('Failed to list S3 files:', error);
-    res.status(500).json({ error: 'Failed to list S3 files: ' + error.message });
+    res.status(500).json({ error: 'Failed to list S3 files' });
   }
 });
 
@@ -535,7 +543,7 @@ router.delete('/s3/cleanup', adminAuth, async (req, res) => {
     });
   } catch (error) {
     logger.error('Failed to cleanup S3 backups:', error);
-    res.status(500).json({ error: 'Failed to cleanup S3 backups: ' + error.message });
+    res.status(500).json({ error: 'Failed to cleanup S3 backups' });
   }
 });
 
@@ -587,7 +595,7 @@ router.post('/s3/test-upload', adminAuth, async (req, res) => {
     });
   } catch (error) {
     logger.error('S3 upload test failed:', error);
-    res.status(500).json({ error: 'S3 upload test failed: ' + error.message });
+    res.status(500).json({ error: 'S3 upload test failed' });
   }
 });
 
@@ -675,7 +683,7 @@ router.get('/download/:backupId', adminAuth, async (req, res) => {
     }
   } catch (error) {
     logger.error('Failed to download backup:', error);
-    res.status(500).json({ error: 'Failed to download backup: ' + error.message });
+    res.status(500).json({ error: 'Failed to download backup' });
   }
 });
 
@@ -744,7 +752,7 @@ router.get('/checksums', adminAuth, async (req, res) => {
     });
   } catch (error) {
     logger.error('Failed to get file checksums:', error);
-    res.status(500).json({ error: 'Failed to get file checksums: ' + error.message });
+    res.status(500).json({ error: 'Failed to get file checksums' });
   }
 });
 
@@ -847,7 +855,7 @@ router.post('/estimate', adminAuth, async (req, res) => {
     });
   } catch (error) {
     logger.error('Failed to estimate backup size:', error);
-    res.status(500).json({ error: 'Failed to estimate backup size: ' + error.message });
+    res.status(500).json({ error: 'Failed to estimate backup size' });
   }
 });
 
@@ -945,12 +953,13 @@ async function validateManifestData(manifestData) {
       }
     };
   } catch (error) {
+    logger.error('Manifest validation error', { error: error.message });
     return {
       valid: false,
-      error: `Validation error: ${error.message}`,
-      details: { error: error.message }
+      error: 'Validation error encountered while processing manifest',
+      details: { hint: 'See server logs for diagnostic details.' }
     };
   }
 }
 
-module.exports = router;
+module.exports = router;

backend/src/routes/adminEvents.js

@@ -396,7 +396,9 @@ router.put('/:id', adminAuth, [
   body('allow_downloads').optional().isBoolean(),
   body('disable_right_click').optional().isBoolean(),
   body('watermark_downloads').optional().isBoolean(),
-  body('watermark_text').optional().trim()
+  body('watermark_text').optional().trim(),
+  body('source_mode').optional().isIn(['managed', 'reference']),
+  body('external_path').optional({ nullable: true }).isString().trim()
 ], async (req, res) => {
   try {
     const errors = validationResult(req);
@@ -407,7 +409,24 @@ router.put('/:id', adminAuth, [
     }
 
     const { id } = req.params;
-    const updates = req.body;
+    const updates = { ...req.body };
+
+    if (Object.prototype.hasOwnProperty.call(updates, 'source_mode')) {
+      updates.source_mode = updates.source_mode === 'reference' ? 'reference' : 'managed';
+    }
+
+    if (Object.prototype.hasOwnProperty.call(updates, 'external_path')) {
+      const trimmedPath = updates.external_path ? String(updates.external_path).trim() : '';
+      updates.external_path = trimmedPath || null;
+    }
+
+    if (updates.source_mode === 'managed') {
+      updates.external_path = null;
+    }
+
+    if (updates.source_mode === 'reference' && (updates.external_path === null || updates.external_path === undefined)) {
+      return res.status(400).json({ error: 'external_path is required when source_mode is reference' });
+    }
 
     // Log the update request for debugging
     console.log('Update event request:', {
@@ -515,13 +534,11 @@ router.delete('/:id', adminAuth, async (req, res) => {
     // Provide more specific error messages
     if (error.message && error.message.includes('foreign key constraint')) {
       res.status(500).json({ 
-        error: 'Cannot delete event due to existing references. Please contact support.',
-        details: error.message 
+        error: 'Cannot delete event due to existing references. Please contact support.'
       });
     } else {
       res.status(500).json({ 
-        error: 'Failed to delete event',
-        details: process.env.NODE_ENV === 'development' ? error.message : undefined
+        error: 'Failed to delete event'
       });
     }
   }
@@ -780,7 +797,7 @@ router.post('/bulk-archive', adminAuth, [
         results.failed.push({
           id: event.id,
           name: event.event_name,
-          error: error.message
+          error: 'Failed to archive event. Check server logs for details.'
         });
       }
     }
@@ -806,4 +823,4 @@ router.post('/bulk-archive', adminAuth, [
   }
 });
 
-module.exports = router;
+module.exports = router;

backend/src/routes/adminExternalMedia.js

@@ -4,6 +4,7 @@ const fs = require('fs').promises;
 const { adminAuth } = require('../middleware/auth');
 const { list, resolveExternalPath, getExternalMediaRoot } = require('../services/externalMediaService');
 const { db, logActivity } = require('../database/db');
+const logger = require('../utils/logger');
 
 const router = express.Router();
 
@@ -14,7 +15,11 @@ router.get('/list', adminAuth, async (req, res) => {
     const result = await list(relPath);
     res.json(result);
   } catch (error) {
-    res.status(400).json({ error: 'Invalid path', details: error.message });
+    logger.warn('Invalid external media path requested', {
+      path: req.query.path,
+      error: error.message
+    });
+    res.status(400).json({ error: 'Invalid external media path' });
   }
 });
 
@@ -104,9 +109,13 @@ router.post('/events/:id/import-external', adminAuth, async (req, res) => {
 
     res.json({ imported, skipped, thumbnailsQueued: 0 });
   } catch (error) {
-    res.status(500).json({ error: 'Failed to import external media', details: error.message });
+    logger.error('External media import failed', {
+      eventId: req.params.id,
+      externalPath: req.body?.external_path,
+      error: error.message
+    });
+    res.status(500).json({ error: 'Failed to import external media' });
   }
 });
 
 module.exports = router;
-

backend/src/routes/adminFeedback.js

@@ -368,7 +368,7 @@ router.post('/word-filters',
       res.json({ success: true });
     } catch (error) {
       if (error.message === 'Word filter already exists') {
-        return res.status(409).json({ error: error.message });
+        return res.status(409).json({ error: 'Word filter already exists' });
       }
       logger.error('Error adding word filter:', error);
       res.status(500).json({ error: 'Failed to add word filter' });
@@ -430,4 +430,4 @@ function convertToCSV(data) {
   return [csvHeaders, ...csvRows].join('\n');
 }
 
-module.exports = router;
+module.exports = router;

backend/src/routes/adminPhotos.js

@@ -802,7 +802,8 @@ router.get('/:eventId/debug', adminAuth, async (req, res) => {
       storagePath: getStoragePath()
     });
   } catch (error) {
-    res.status(500).json({ error: error.message });
+    console.error('Error fetching admin photo debug data:', error);
+    res.status(500).json({ error: 'Failed to fetch photo debug data' });
   }
 });
 

backend/src/routes/adminRestore.js

@@ -82,7 +82,7 @@ router.post('/validate', [
     logger.error('Restore validation failed:', error);
     res.status(400).json({
       success: false,
-      error: error.message,
+      error: 'Restore validation failed',
       logs: restoreService.restoreLog
     });
   }
@@ -162,7 +162,7 @@ router.post('/start', [
     logger.error('Failed to start restore:', error);
     res.status(500).json({
       success: false,
-      error: error.message
+      error: 'Failed to start restore operation'
     });
   }
 });
@@ -458,4 +458,4 @@ async function getBackupConfig() {
   return config;
 }
 
-module.exports = router;
+module.exports = router;

backend/src/routes/adminSettings.js

@@ -8,6 +8,16 @@ const { formatBoolean } = require('../utils/dbCompat');
 const { adminAuth } = require('../middleware/auth');
 const { clearMaintenanceCache } = require('../middleware/maintenance');
 const { clearSettingsCache } = require('../services/rateLimitService');
+const {
+  DEFAULT_PUBLIC_SITE_HTML,
+  DEFAULT_PUBLIC_SITE_CSS,
+} = require('../constants/publicSiteDefaults');
+const {
+  clearPublicSiteCache,
+  getDefaultPublicSitePayload,
+  getRawPublicSiteSettings,
+} = require('../services/publicSiteService');
+const { sanitizeCss } = require('../utils/cssSanitizer');
 const router = express.Router();
 
 // Configure multer for logo uploads
@@ -284,6 +294,8 @@ router.put('/branding', adminAuth, async (req, res) => {
       metadata: JSON.stringify({ company_name })
     });
 
+    clearPublicSiteCache();
+
     res.json({ message: 'Branding settings updated successfully' });
   } catch (error) {
     console.error('Branding update error:', error);
@@ -443,6 +455,8 @@ router.put('/theme', adminAuth, async (req, res) => {
       metadata: JSON.stringify({ theme_name: themeSettings.name || 'custom' })
     });
 
+    clearPublicSiteCache();
+
     res.json({ message: 'Theme settings updated successfully' });
   } catch (error) {
     console.error('Theme update error:', error);
@@ -453,7 +467,39 @@ router.put('/theme', adminAuth, async (req, res) => {
 // Update general settings
 router.put('/general', adminAuth, async (req, res) => {
   try {
-    const settings = req.body;
+    const settings = { ...req.body };
+
+    const publicSiteKeysTouched = Object.keys(settings).some((key) => key.startsWith('general_public_site_'));
+
+    if (publicSiteKeysTouched) {
+      if (Object.prototype.hasOwnProperty.call(settings, 'general_public_site_custom_css')) {
+        settings.general_public_site_custom_css = sanitizeCss(settings.general_public_site_custom_css || '');
+      }
+
+      if (Object.prototype.hasOwnProperty.call(settings, 'general_public_site_html') && typeof settings.general_public_site_html === 'string') {
+        settings.general_public_site_html = settings.general_public_site_html.trim();
+      }
+
+      if (Object.prototype.hasOwnProperty.call(settings, 'general_public_site_enabled')) {
+        settings.general_public_site_enabled = formatBoolean(settings.general_public_site_enabled);
+      }
+
+      const enableToggle = settings.general_public_site_enabled;
+      if (enableToggle === true) {
+        let htmlValue = settings.general_public_site_html;
+
+        if (htmlValue === undefined) {
+          const currentSettings = await getRawPublicSiteSettings();
+          htmlValue = currentSettings.general_public_site_html;
+        }
+
+        if (!htmlValue || !String(htmlValue).trim()) {
+          return res.status(400).json({
+            error: 'Public site HTML must be provided before enabling the public landing page.'
+          });
+        }
+      }
+    }
 
     // Update or insert each setting
     for (const [key, value] of Object.entries(settings)) {
@@ -476,6 +522,10 @@ router.put('/general', adminAuth, async (req, res) => {
       clearMaintenanceCache();
     }
 
+    if (publicSiteKeysTouched) {
+      clearPublicSiteCache();
+    }
+
     // Log activity
     await db('activity_logs').insert({
       activity_type: 'general_settings_updated',
@@ -603,11 +653,190 @@ router.get('/storage/info', adminAuth, async (req, res) => {
       }
     }
 
+    const DEFAULT_SOFT_LIMIT_BYTES = 10 * 1024 * 1024 * 1024; // 10GB fallback
+    const storagePath = process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
+
+    let diskStats = null;
+    let rawDiskTotal = null;
+    let rawDiskFree = null;
+    let rawDiskAvailable = null;
+    try {
+      diskStats = await fs.statfs(storagePath);
+      rawDiskTotal = Number(diskStats.bsize) * Number(diskStats.blocks);
+      rawDiskFree = Number(diskStats.bsize) * Number(diskStats.bfree);
+      rawDiskAvailable = Number(diskStats.bsize) * Number(diskStats.bavail);
+    } catch (diskError) {
+      console.error('Disk stats error:', diskError.message);
+    }
+
+    const clampDiskValue = (value) => {
+      if (!Number.isFinite(value) || value <= 0) {
+        return null;
+      }
+
+      // Treat unusually large virtualised values as unreliable (>50TB)
+      const MAX_REASONABLE_BYTES = 50 * 1024 * 1024 * 1024 * 1024;
+      if (value > MAX_REASONABLE_BYTES) {
+        return null;
+      }
+
+      return value;
+    };
+
+    let diskTotal = null;
+    let diskFree = null;
+    let diskAvailable = null;
+
+    if (diskStats) {
+      diskTotal = clampDiskValue(rawDiskTotal);
+      diskFree = clampDiskValue(rawDiskFree);
+      diskAvailable = clampDiskValue(rawDiskAvailable);
+
+      if (diskTotal && diskAvailable && diskAvailable > diskTotal) {
+        diskAvailable = null;
+      }
+      if (diskTotal && diskFree && diskFree > diskTotal) {
+        diskFree = null;
+      }
+    }
+
+    const totalUsed = totalStorage?.total || 0;
+
+    const parseBytesValue = (value) => {
+      const numeric = Number(value);
+      if (!Number.isFinite(numeric) || numeric <= 0) {
+        return null;
+      }
+      return Math.floor(numeric);
+    };
+
+    const parseEnvOverride = (bytesVar, gbVar) => {
+      if (process.env[bytesVar]) {
+        return parseBytesValue(process.env[bytesVar]);
+      }
+      if (process.env[gbVar]) {
+        const value = parseBytesValue(process.env[gbVar]);
+        return value ? value * 1024 * 1024 * 1024 : null;
+      }
+      return null;
+    };
+
+    let configuredSoftLimit = null;
+    let capacityOverrideDb = null;
+    let availableOverrideDb = null;
+
+    try {
+      const storageSettings = await db('app_settings')
+        .whereIn('setting_key', [
+          'general_storage_soft_limit_bytes',
+          'general_storage_capacity_override_bytes',
+          'general_storage_available_override_bytes'
+        ])
+        .select('setting_key', 'setting_value');
+
+      storageSettings.forEach((setting) => {
+        let parsedValue = null;
+        if (setting.setting_value) {
+          try {
+            parsedValue = JSON.parse(setting.setting_value);
+          } catch (error) {
+            parsedValue = setting.setting_value;
+          }
+        }
+
+        switch (setting.setting_key) {
+          case 'general_storage_soft_limit_bytes':
+            if (typeof parsedValue === 'number' && !Number.isNaN(parsedValue)) {
+              configuredSoftLimit = parsedValue;
+            }
+            break;
+          case 'general_storage_capacity_override_bytes':
+            if (typeof parsedValue === 'number' && !Number.isNaN(parsedValue)) {
+              capacityOverrideDb = parsedValue;
+            }
+            break;
+          case 'general_storage_available_override_bytes':
+            if (typeof parsedValue === 'number' && !Number.isNaN(parsedValue)) {
+              availableOverrideDb = parsedValue;
+            }
+            break;
+          default:
+            break;
+        }
+      });
+    } catch (error) {
+      console.error('Storage settings read error:', error.message);
+    }
+
+    const capacityOverrideEnv = parseEnvOverride('STORAGE_CAPACITY_OVERRIDE_BYTES', 'STORAGE_CAPACITY_OVERRIDE_GB');
+    const availableOverrideEnv = parseEnvOverride('STORAGE_AVAILABLE_OVERRIDE_BYTES', 'STORAGE_AVAILABLE_OVERRIDE_GB');
+
+    let capacityOverrideBytes = null;
+    let availableOverrideBytes = null;
+    let overrideSource = null;
+
+    if (capacityOverrideEnv != null || availableOverrideEnv != null) {
+      capacityOverrideBytes = capacityOverrideEnv;
+      availableOverrideBytes = availableOverrideEnv;
+      overrideSource = 'env';
+    } else if (capacityOverrideDb != null || availableOverrideDb != null) {
+      capacityOverrideBytes = capacityOverrideDb;
+      availableOverrideBytes = availableOverrideDb;
+      overrideSource = 'settings';
+    }
+
+    if (capacityOverrideBytes != null) {
+      diskTotal = capacityOverrideBytes;
+      if (availableOverrideBytes == null) {
+        diskAvailable = Math.max(capacityOverrideBytes - totalUsed, 0);
+      } else {
+        diskAvailable = Math.min(Math.max(availableOverrideBytes, 0), capacityOverrideBytes);
+      }
+      diskFree = diskAvailable;
+    } else if (availableOverrideBytes != null) {
+      diskAvailable = Math.max(availableOverrideBytes, 0);
+      diskFree = diskAvailable;
+    }
+
+    let recommendedSoftLimit = null;
+    if (diskTotal && diskAvailable) {
+      const projected = totalUsed + Math.floor(diskAvailable * 0.8);
+      recommendedSoftLimit = Math.min(diskTotal, Math.max(projected, Math.floor(diskTotal * 0.5)));
+    } else if (diskTotal) {
+      recommendedSoftLimit = Math.floor(diskTotal * 0.8);
+    } else if (diskAvailable) {
+      recommendedSoftLimit = Math.max(totalUsed, totalUsed + Math.floor(diskAvailable * 0.8));
+    }
+
+    if (recommendedSoftLimit && totalUsed > 0 && recommendedSoftLimit < totalUsed) {
+      recommendedSoftLimit = totalUsed;
+    }
+
+    const fallbackSoftLimit = recommendedSoftLimit || diskTotal || DEFAULT_SOFT_LIMIT_BYTES;
+    if (!recommendedSoftLimit && fallbackSoftLimit) {
+      recommendedSoftLimit = fallbackSoftLimit;
+    }
+    const effectiveSoftLimit = configuredSoftLimit || fallbackSoftLimit || DEFAULT_SOFT_LIMIT_BYTES;
+
+    const diskMetricsReliable = Boolean(diskTotal);
+
     res.json({
-      total_used: totalStorage.total || 0,
+      total_used: totalUsed,
       archive_storage: archiveStorage,
       storage_by_event: storageByEvent,
-      storage_limit: 10 * 1024 * 1024 * 1024 // 10GB default
+      storage_limit: effectiveSoftLimit,
+      storage_soft_limit: effectiveSoftLimit,
+      configured_soft_limit: configuredSoftLimit,
+      recommended_soft_limit: recommendedSoftLimit,
+      soft_limit_configured: Boolean(configuredSoftLimit),
+      disk_total: diskTotal,
+      disk_free: diskFree,
+      disk_available: diskAvailable,
+      disk_total_raw: rawDiskTotal,
+      disk_free_raw: rawDiskFree,
+      disk_available_raw: rawDiskAvailable,
+      disk_metrics_reliable: diskMetricsReliable,
+      disk_override_source: overrideSource
     });
   } catch (error) {
     console.error('Storage info error:', error);
@@ -717,4 +946,79 @@ router.put('/security/rate-limit', adminAuth, [
   }
 });
 
-module.exports = router;
+// Get default public site template
+router.get('/public-site/default', adminAuth, async (req, res) => {
+  try {
+    const defaults = await getDefaultPublicSitePayload();
+
+    res.json({
+      enabled: false,
+      html: DEFAULT_PUBLIC_SITE_HTML.trim(),
+      css: '',
+      baseCss: DEFAULT_PUBLIC_SITE_CSS.trim(),
+      branding: defaults.branding,
+      meta: {
+        title: defaults.title,
+      }
+    });
+  } catch (error) {
+    console.error('Failed to load public site defaults:', error);
+    res.status(500).json({ error: 'Failed to load defaults' });
+  }
+});
+
+// Reset public site template to defaults
+router.post('/public-site/reset', adminAuth, async (req, res) => {
+  try {
+    const entries = [
+      {
+        key: 'general_public_site_html',
+        value: DEFAULT_PUBLIC_SITE_HTML.trim()
+      },
+      {
+        key: 'general_public_site_custom_css',
+        value: ''
+      }
+    ];
+
+    for (const { key, value } of entries) {
+      await db('app_settings')
+        .insert({
+          setting_key: key,
+          setting_value: JSON.stringify(value),
+          setting_type: 'general',
+          updated_at: new Date()
+        })
+        .onConflict('setting_key')
+        .merge({
+          setting_value: JSON.stringify(value),
+          updated_at: new Date()
+        });
+    }
+
+    clearPublicSiteCache();
+
+    const defaults = await getDefaultPublicSitePayload();
+
+    await logActivity('public_site_reset_to_default',
+      {
+        template_length: DEFAULT_PUBLIC_SITE_HTML.length,
+      },
+      null,
+      { type: 'admin', id: req.admin.id, name: req.admin.username }
+    );
+
+    res.json({
+      message: 'Public site template reset to defaults',
+      html: DEFAULT_PUBLIC_SITE_HTML.trim(),
+      css: '',
+      baseCss: DEFAULT_PUBLIC_SITE_CSS.trim(),
+      branding: defaults.branding
+    });
+  } catch (error) {
+    console.error('Failed to reset public site template:', error);
+    res.status(500).json({ error: 'Failed to reset template' });
+  }
+});
+
+module.exports = router;

backend/src/routes/adminSystem.js

@@ -5,6 +5,7 @@ const fs = require('fs').promises;
 const path = require('path');
 const os = require('os');
 const { formatBoolean } = require('../utils/dbCompat');
+const logger = require('../utils/logger');
 const router = express.Router();
 
 // Get system version
@@ -208,10 +209,14 @@ router.get('/database', adminAuth, async (req, res) => {
         });
       } catch (error) {
         // Table might not exist
+        logger.warn('Failed to retrieve table info', {
+          table,
+          error: error.message
+        });
         tableInfo.push({
           name: table,
           rows: 0,
-          error: error.message
+          error: 'Unable to retrieve table details'
         });
       }
     }
@@ -226,4 +231,4 @@ router.get('/database', adminAuth, async (req, res) => {
   }
 });
 
-module.exports = router;
+module.exports = router;

backend/src/routes/auth-enhanced.js

@@ -14,6 +14,14 @@ const {
 } = require('../utils/authSecurity');
 const { endSession } = require('../middleware/sessionTimeout');
 const logger = require('../utils/logger');
+const {
+  setAdminAuthCookie,
+  clearAdminAuthCookie,
+  setGalleryAuthCookies,
+  clearGalleryAuthCookies,
+  getAdminTokenFromRequest,
+  getGalleryTokenFromRequest,
+} = require('../utils/tokenUtils');
 const router = express.Router();
 
 // Admin login with enhanced security
@@ -91,6 +99,8 @@ router.post('/admin/login', [
       expiresIn: '24h',
       issuer: 'picpeak-auth'
     });
+
+    setAdminAuthCookie(res, token);
     
     res.json({
       token,
@@ -110,13 +120,14 @@ router.post('/admin/login', [
 // Logout endpoint
 router.post('/logout', async (req, res) => {
   try {
-    const token = req.headers.authorization?.split(' ')[1];
-    
+    const adminToken = getAdminTokenFromRequest(req);
+    const galleryToken = getGalleryTokenFromRequest(req);
+    const token = adminToken || galleryToken;
+
     if (token) {
       // End the session
       endSession(token);
-      
-      // Log the logout
+
       try {
         const decoded = jwt.verify(token, process.env.JWT_SECRET);
         logger.info('User logged out', { 
@@ -124,11 +135,23 @@ router.post('/logout', async (req, res) => {
           username: decoded.username,
           type: decoded.type
         });
+
+        if (decoded.type === 'admin') {
+          clearAdminAuthCookie(res);
+        } else if (decoded.type === 'gallery') {
+          clearGalleryAuthCookies(res, decoded.eventSlug);
+        }
       } catch (err) {
-        // Token might be invalid, but still process logout
+        // Token might be invalid, but still process logout and clear cookies
+        clearAdminAuthCookie(res);
+        clearGalleryAuthCookies(res);
       }
+    } else {
+      // No token found, but ensure cookies are cleared
+      clearAdminAuthCookie(res);
+      clearGalleryAuthCookies(res);
     }
-    
+
     res.json({ message: 'Logged out successfully' });
   } catch (error) {
     logger.error('Logout error:', error);
@@ -209,6 +232,8 @@ router.post('/gallery/verify', [
       expiresIn: '24h',
       issuer: 'picpeak-auth'
     });
+
+    setGalleryAuthCookies(res, token, event.slug);
     
     res.json({
       token,
@@ -230,15 +255,94 @@ router.post('/gallery/verify', [
   }
 });
 
+// Share link authentication (token-based)
+router.post('/gallery/share-login', [
+  body('slug').notEmpty().trim(),
+  body('token').notEmpty()
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { slug, token } = req.body;
+    const ipAddress = req.ip || req.connection.remoteAddress;
+    const userAgent = req.headers['user-agent'] || '';
+
+    const event = await db('events')
+      .where({ slug, is_active: formatBoolean(true), is_archived: formatBoolean(false) })
+      .first();
+
+    if (!event) {
+      return res.status(404).json({ error: 'Gallery not found' });
+    }
+
+    let expectedToken = event.share_link;
+    if (expectedToken && expectedToken.includes('/')) {
+      expectedToken = expectedToken.split('/').pop();
+    }
+
+    if (!expectedToken || token !== expectedToken) {
+      return res.status(401).json({ error: 'Invalid or expired share link' });
+    }
+
+    const jwtToken = jwt.sign({
+      eventId: event.id,
+      eventSlug: event.slug,
+      type: 'gallery',
+      ip: ipAddress,
+      loginTime: Date.now()
+    }, process.env.JWT_SECRET, {
+      expiresIn: '24h',
+      issuer: 'picpeak-auth'
+    });
+
+    await trackSuccessfulLogin(`gallery:${slug}:share`, ipAddress, userAgent);
+    setGalleryAuthCookies(res, jwtToken, event.slug);
+
+    res.json({
+      token: jwtToken,
+      event: {
+        id: event.id,
+        event_name: event.event_name,
+        event_type: event.event_type,
+        event_date: event.event_date,
+        welcome_message: event.welcome_message,
+        color_theme: event.color_theme,
+        expires_at: event.expires_at,
+        allow_user_uploads: event.allow_user_uploads,
+        upload_category_id: event.upload_category_id
+      }
+    });
+  } catch (error) {
+    logger.error('Share link authentication error:', error);
+    res.status(500).json({ error: 'Share link login failed' });
+  }
+});
+
+// Gallery logout to clear cookies
+router.post('/gallery/logout', async (req, res) => {
+  try {
+    const { slug } = req.body || {};
+    clearGalleryAuthCookies(res, slug);
+    res.json({ message: 'Logged out successfully' });
+  } catch (error) {
+    logger.error('Gallery logout error:', error);
+    res.status(500).json({ error: 'Logout failed' });
+  }
+});
+
 // Get current session info
 router.get('/session', async (req, res) => {
   try {
-    const token = req.headers.authorization?.split(' ')[1];
+    const { slug } = req.query;
+    const token = getAdminTokenFromRequest(req) || getGalleryTokenFromRequest(req, slug);
     
     if (!token) {
       return res.status(401).json({ error: 'No token provided' });
     }
-    
+
     try {
       const decoded = jwt.verify(token, process.env.JWT_SECRET);
       
@@ -250,7 +354,9 @@ router.get('/session', async (req, res) => {
         valid: true,
         type: decoded.type,
         expiresIn: Math.floor(remainingTime),
-        user: decoded.username || decoded.eventSlug
+        user: decoded.username || decoded.eventSlug,
+        eventSlug: decoded.eventSlug,
+        adminUsername: decoded.username
       });
     } catch (err) {
       res.json({
@@ -263,4 +369,4 @@ router.get('/session', async (req, res) => {
   }
 });
 
-module.exports = router;
+module.exports = router;

backend/src/routes/gallery.js

@@ -37,7 +37,7 @@ router.get('/:slug/verify-token/:token', async (req, res) => {
     res.json({ valid: true });
   } catch (error) {
     console.error('Error verifying token:', error);
-    res.status(500).json({ error: 'Failed to verify token', details: error.message });
+    res.status(500).json({ error: 'Failed to verify token' });
   }
 });
 
@@ -90,7 +90,7 @@ router.get('/:slug/info', async (req, res) => {
     });
   } catch (error) {
     console.error('Error fetching gallery info:', error);
-    res.status(500).json({ error: 'Failed to fetch gallery info', details: error.message });
+    res.status(500).json({ error: 'Failed to fetch gallery info' });
   }
 });
 
@@ -107,38 +107,82 @@ router.get('/:slug/photos', verifyGalleryAccess, async (req, res) => {
       .select('photos.*')
       .orderBy('photos.uploaded_at', 'desc');
     
-    // Apply filtering if requested (global, based on aggregate counts)
+    // Apply filtering if requested (supports global stats + per-guest interactions)
     if (filter) {
-      const f = String(filter).toLowerCase();
-      const parts = f.split(',').map(s => s.trim());
-      const include = new Set();
+      const filterTokens = new Set(
+        String(filter)
+          .toLowerCase()
+          .split(',')
+          .map(token => token.trim())
+          .filter(Boolean)
+      );
 
-      // Helper to include IDs for a predicate
-      const includeBy = (predicate) => {
-        photos.forEach(p => { if (predicate(p)) include.add(p.id); });
-      };
+      if (filterTokens.size > 0) {
+        // Treat "saved" / "favorite" synonyms as favorites
+        if (filterTokens.has('saved')) {
+          filterTokens.add('favorited');
+        }
+        if (filterTokens.has('favorite')) {
+          filterTokens.add('favorited');
+        }
 
-      if (parts.includes('liked')) {
-        includeBy(p => (p.like_count || 0) > 0);
-      }
-      if (parts.includes('favorited')) {
-        includeBy(p => (p.favorite_count || 0) > 0);
-      }
-      if (parts.includes('rated')) {
-        includeBy(p => (p.average_rating || 0) > 0);
-      }
-      if (parts.includes('commented')) {
-        // Query commented photo IDs
-        const commented = await db('photo_feedback')
-          .where({ event_id: req.event.id, feedback_type: 'comment', is_approved: true, is_hidden: false })
-          .groupBy('photo_id')
-          .select('photo_id');
-        const commentedIds = new Set(commented.map(c => c.photo_id));
-        includeBy(p => commentedIds.has(p.id));
-      }
+        const include = new Set();
 
-      if (include.size > 0) {
-        photos = photos.filter(p => include.has(p.id));
+        const includeBy = (predicate) => {
+          photos.forEach(photo => {
+            if (predicate(photo)) {
+              include.add(photo.id);
+            }
+          });
+        };
+
+        let guestFeedbackByType = null;
+        if (guest_id) {
+          const guestFeedbackRows = await db('photo_feedback')
+            .where({ event_id: req.event.id, guest_identifier: guest_id })
+            .select('photo_id', 'feedback_type');
+
+          guestFeedbackByType = guestFeedbackRows.reduce((acc, row) => {
+            if (!acc[row.feedback_type]) {
+              acc[row.feedback_type] = new Set();
+            }
+            acc[row.feedback_type].add(row.photo_id);
+            return acc;
+          }, {});
+        }
+
+        const includeGuestMatches = (type) => {
+          const ids = guestFeedbackByType?.[type];
+          if (ids && ids.size > 0) {
+            ids.forEach(id => include.add(id));
+          }
+        };
+
+        if (filterTokens.has('liked')) {
+          includeGuestMatches('like');
+          includeBy(photo => (photo.like_count || 0) > 0);
+        }
+
+        if (filterTokens.has('favorited')) {
+          includeGuestMatches('favorite');
+          includeBy(photo => (photo.favorite_count || 0) > 0);
+        }
+
+        if (filterTokens.has('rated')) {
+          includeGuestMatches('rating');
+          includeBy(photo => (photo.average_rating || 0) > 0);
+        }
+
+        if (filterTokens.has('commented')) {
+          includeGuestMatches('comment');
+          const commentedRows = await db('photo_feedback')
+            .where({ event_id: req.event.id, feedback_type: 'comment', is_approved: true, is_hidden: false })
+            .groupBy('photo_id')
+            .select('photo_id');
+          commentedRows.forEach(row => include.add(row.photo_id));
+        }
+
+        photos = photos.filter(photo => include.has(photo.id));
       }
     }
     
@@ -239,7 +283,7 @@ router.get('/:slug/photos', verifyGalleryAccess, async (req, res) => {
     });
   } catch (error) {
     console.error('Error fetching photos:', error);
-    res.status(500).json({ error: 'Failed to fetch photos', details: error.message });
+    res.status(500).json({ error: 'Failed to fetch photos' });
   }
 });
 
@@ -547,7 +591,7 @@ router.get('/:slug/photo/:photoId',
         photoId: req.params.photoId,
         eventId: req.event?.id
       });
-      res.status(500).json({ error: 'Failed to serve photo', details: error.message });
+      res.status(500).json({ error: 'Failed to serve photo' });
     }
   }
 );
@@ -713,12 +757,6 @@ router.post('/:eventId/upload', verifyGalleryAccess, async (req, res) => {
         // Process uploaded photos
         const results = await processUploadedPhotos(req.files, eventId, 'user', categoryId);
         
-        // Clean up temp files
-        const fs = require('fs').promises;
-        for (const file of req.files) {
-          await fs.unlink(file.path).catch(console.error);
-        }
-        
         res.json({ 
           message: 'Photos uploaded successfully',
           count: results.length,

backend/src/services/photoProcessor.js

@@ -7,9 +7,32 @@ const { generatePhotoFilename } = require('../utils/filenameSanitizer');
 // Get storage path from environment or default
 const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
 
+function normalizeFiles(files) {
+  if (!files) return [];
+  if (Array.isArray(files)) return files.filter(Boolean);
+
+  // Multer may expose files as an iterable object
+  if (typeof files[Symbol.iterator] === 'function') {
+    return Array.from(files).filter(Boolean);
+  }
+
+  if (typeof files === 'object') {
+    return Object.values(files)
+      .flatMap((value) => (Array.isArray(value) ? value : [value]))
+      .filter(Boolean);
+  }
+
+  return [];
+}
+
 async function processUploadedPhotos(files, eventId, uploadedBy = 'admin', categoryId = null) {
   const uploadedPhotos = [];
-  
+  const fileList = normalizeFiles(files);
+
+  if (fileList.length === 0) {
+    return uploadedPhotos;
+  }
+
   // Get event details
   const event = await db('events').where({ id: eventId }).first();
   if (!event) {
@@ -17,7 +40,7 @@ async function processUploadedPhotos(files, eventId, uploadedBy = 'admin', categ
   }
   
   // Process each file
-  for (const file of files) {
+  for (const file of fileList) {
     const trx = await db.transaction();
     
     try {
@@ -35,8 +58,9 @@ async function processUploadedPhotos(files, eventId, uploadedBy = 'admin', categ
         .where({ event_id: eventId, type: photoType })
         .count('id as count')
         .first();
-      
-      counter = (existingCount.count || 0) + 1;
+
+      const existingCountValue = Number(existingCount?.count ?? 0);
+      counter = existingCountValue + 1;
       
       // Generate new filename
       const extension = path.extname(file.originalname);
@@ -53,9 +77,24 @@ async function processUploadedPhotos(files, eventId, uploadedBy = 'admin', categ
       await fs.mkdir(destPath, { recursive: true });
       
       const newPath = path.join(destPath, newFilename);
+      const tempPath = file?.path || file?.filepath || file?.tempFilePath;
+
+      if (!tempPath) {
+        throw new Error('Uploaded file is missing a temporary path');
+      }
+
       // Use copyFile and unlink instead of rename to avoid cross-device issues
-      await fs.copyFile(file.path, newPath);
-      await fs.unlink(file.path);
+      try {
+        await fs.copyFile(tempPath, newPath);
+      } finally {
+        try {
+          await fs.unlink(tempPath);
+        } catch (unlinkErr) {
+          if (unlinkErr?.code !== 'ENOENT') {
+            console.warn(`Failed to clean up temp upload ${tempPath}:`, unlinkErr);
+          }
+        }
+      }
       
       // Generate thumbnail
       const thumbnailPath = await generateThumbnail(newPath);
@@ -66,15 +105,46 @@ async function processUploadedPhotos(files, eventId, uploadedBy = 'admin', categ
       const relativeThumbPath = thumbnailPath; // thumbnailPath is already relative to storage root
       
       // Add to database with uploaded_by field
-      const [photoId] = await trx('photos').insert({
-        event_id: eventId,
-        filename: newFilename,
-        path: relativePath,
-        thumbnail_path: relativeThumbPath,
-        type: photoType,
-        size_bytes: file.size
-      });
-      
+      let insertResult;
+      const clientName = trx?.client?.config?.client;
+      const supportsReturning = ['pg', 'postgres', 'postgresql'].includes(clientName);
+
+      if (supportsReturning) {
+        insertResult = await trx('photos')
+          .insert({
+            event_id: eventId,
+            filename: newFilename,
+            path: relativePath,
+            thumbnail_path: relativeThumbPath,
+            type: photoType,
+            size_bytes: file.size,
+            uploaded_by: uploadedBy,
+            source_origin: 'managed'
+          })
+          .returning('id');
+      } else {
+        insertResult = await trx('photos').insert({
+          event_id: eventId,
+          filename: newFilename,
+          path: relativePath,
+          thumbnail_path: relativeThumbPath,
+          type: photoType,
+          size_bytes: file.size,
+          uploaded_by: uploadedBy,
+          source_origin: 'managed'
+        });
+      }
+
+      const insertedId = Array.isArray(insertResult)
+        ? (insertResult[0]?.id ?? insertResult[0])
+        : insertResult;
+
+      const photoId = typeof insertedId === 'object' ? insertedId.id : insertedId;
+
+      if (photoId === undefined || photoId === null) {
+        throw new Error('Failed to determine inserted photo ID');
+      }
+
       // Commit transaction
       await trx.commit();
       
@@ -96,4 +166,4 @@ async function processUploadedPhotos(files, eventId, uploadedBy = 'admin', categ
 
 module.exports = {
   processUploadedPhotos
-};
+};

backend/src/services/photoResolver.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const { resolveExternalPath } = require('./externalMediaService');
+const { safePathJoin } = require('../utils/fileSecurityUtils');
 
 const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
 
@@ -33,10 +34,15 @@ function resolvePhotoFilePath(event, photo) {
   }
 
   const storagePath = getStoragePath();
+  const eventsRoot = path.join(storagePath, 'events/active');
+
   if (photo.path && photo.path.startsWith('events/active/')) {
-    return path.join(storagePath, photo.path);
+    // Legacy paths already include prefix; normalize via safe join
+    return safePathJoin(storagePath, photo.path.replace(/^events\/active\/?/, 'events/active/'));
   }
-  return path.join(storagePath, 'events/active', photo.path || '');
+
+  const relativeSegment = photo.path ? photo.path.replace(/^\/+/, '') : '';
+  return safePathJoin(eventsRoot, relativeSegment);
 }
 
 module.exports = {

backend/src/services/publicSiteService.js

@@ -0,0 +1,262 @@
+const crypto = require('crypto');
+const sanitizeHtml = require('sanitize-html');
+const { db } = require('../database/db');
+const logger = require('../utils/logger');
+const { sanitizeCss } = require('../utils/cssSanitizer');
+const {
+  DEFAULT_PUBLIC_SITE_TITLE,
+  DEFAULT_PUBLIC_SITE_HTML,
+  DEFAULT_PUBLIC_SITE_CSS,
+} = require('../constants/publicSiteDefaults');
+
+const CACHE_TTL_MS = Number(process.env.PUBLIC_SITE_CACHE_TTL_MS || 60_000);
+
+let cachedPayload = null;
+let cacheExpiresAt = 0;
+
+const ALLOWED_HTML_TAGS = [
+  'a', 'article', 'aside', 'blockquote', 'br', 'button', 'caption', 'div',
+  'em', 'figure', 'figcaption', 'footer', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'header', 'hr', 'img', 'li', 'main', 'nav', 'ol', 'p', 'section', 'span',
+  'strong', 'sup', 'sub', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr',
+  'ul'
+];
+
+const COMMON_ATTRIBUTES = ['class', 'id', 'role', 'aria-label', 'aria-hidden'];
+
+function parseSettingValue(value) {
+  if (value === null || value === undefined) {
+    return null;
+  }
+  try {
+    return JSON.parse(value);
+  } catch (error) {
+    return value;
+  }
+}
+
+async function fetchPublicSiteSettings() {
+  const rows = await db('app_settings')
+    .whereIn('setting_key', [
+      'general_public_site_enabled',
+      'general_public_site_html',
+      'general_public_site_custom_css'
+    ]);
+
+  const map = {
+    general_public_site_enabled: false,
+    general_public_site_html: DEFAULT_PUBLIC_SITE_HTML,
+    general_public_site_custom_css: ''
+  };
+
+  rows.forEach((row) => {
+    const parsed = parseSettingValue(row.setting_value);
+    map[row.setting_key] = parsed == null ? map[row.setting_key] : parsed;
+  });
+
+  return map;
+}
+
+function sanitizeBrandUrl(url) {
+  if (typeof url !== 'string' || !url.trim()) {
+    return null;
+  }
+
+  const trimmed = url.trim();
+  if (trimmed.startsWith('javascript:')) {
+    return null;
+  }
+
+  return trimmed;
+}
+
+async function fetchBrandingContext() {
+  const rows = await db('app_settings')
+    .whereIn('setting_key', [
+      'branding_company_name',
+      'branding_company_tagline',
+      'branding_support_email',
+      'branding_logo_url',
+      'branding_footer_text',
+      'theme_config'
+    ]);
+
+  const context = {
+    companyName: null,
+    companyTagline: null,
+    supportEmail: null,
+    logoUrl: null,
+    footerText: null,
+    colors: {
+      primary: '#16a34a',
+      accent: '#0f766e',
+      background: '#f4fbf6',
+      text: '#0f172a'
+    }
+  };
+
+  rows.forEach((row) => {
+    const parsed = parseSettingValue(row.setting_value);
+    switch (row.setting_key) {
+    case 'branding_company_name':
+      context.companyName = parsed || context.companyName;
+      break;
+    case 'branding_company_tagline':
+      context.companyTagline = parsed || context.companyTagline;
+      break;
+    case 'branding_support_email':
+      context.supportEmail = parsed || context.supportEmail;
+      break;
+    case 'branding_logo_url':
+      context.logoUrl = sanitizeBrandUrl(parsed);
+      break;
+    case 'branding_footer_text':
+      context.footerText = parsed || context.footerText;
+      break;
+    case 'theme_config': {
+      try {
+        const themeConfig = typeof parsed === 'string' ? JSON.parse(parsed) : parsed;
+        if (themeConfig && typeof themeConfig === 'object') {
+          context.colors.primary = themeConfig.primaryColor || context.colors.primary;
+          context.colors.accent = themeConfig.accentColor || context.colors.accent;
+          context.colors.background = themeConfig.backgroundColor || context.colors.background;
+          context.colors.text = themeConfig.textColor || context.colors.text;
+        }
+      } catch (error) {
+        logger.warn('Failed to parse theme configuration for public site', { error: error.message });
+      }
+      break;
+    }
+    default:
+      break;
+    }
+  });
+
+  return context;
+}
+
+function sanitizeHtmlPayload(html) {
+  const sanitized = sanitizeHtml(html || '', {
+    allowedTags: ALLOWED_HTML_TAGS,
+    allowedAttributes: {
+      '*': COMMON_ATTRIBUTES,
+      a: ['href', 'target', 'rel', ...COMMON_ATTRIBUTES],
+      img: ['src', 'alt', 'title', 'width', 'height', 'loading', 'decoding', ...COMMON_ATTRIBUTES],
+      button: ['type', ...COMMON_ATTRIBUTES]
+    },
+    allowedSchemes: ['http', 'https', 'mailto', 'tel'],
+    allowedSchemesByTag: { img: ['http', 'https', 'data'] },
+    transformTags: {
+      a: (tagName, attribs) => {
+        const transformed = { ...attribs };
+        if (transformed.href && !/^https?:|^mailto:|^tel:/i.test(transformed.href)) {
+          // sanitize-html will remove disallowed schemes, but we guard as well
+          delete transformed.href;
+        }
+
+        if (transformed.target === '_blank') {
+          transformed.rel = transformed.rel ? `${transformed.rel} noopener noreferrer`.trim() : 'noopener noreferrer';
+        }
+
+        return { tagName, attribs: transformed };
+      }
+    },
+    nonBooleanAttributes: ['target'],
+    parser: {
+      lowerCaseAttributeNames: true
+    }
+  });
+
+  return sanitized;
+}
+
+function buildCachedPayload(raw) {
+  const sanitizedHtml = sanitizeHtmlPayload(raw.publicSite.general_public_site_html || DEFAULT_PUBLIC_SITE_HTML);
+  const sanitizedCss = sanitizeCss(raw.publicSite.general_public_site_custom_css || '');
+  const enabled = Boolean(raw.publicSite.general_public_site_enabled);
+  const title = raw.branding.companyName || DEFAULT_PUBLIC_SITE_TITLE;
+  const baseCss = sanitizeCss(DEFAULT_PUBLIC_SITE_CSS);
+
+  const substitutedHtml = applyBrandTokens(sanitizedHtml, raw.branding);
+
+  const hash = crypto
+    .createHash('sha1')
+    .update(`${enabled}|${substitutedHtml}|${sanitizedCss}|${baseCss}|${JSON.stringify(raw.branding)}`)
+    .digest('hex');
+
+  return {
+    enabled,
+    html: substitutedHtml,
+    css: sanitizedCss,
+    baseCss,
+    title,
+    branding: raw.branding,
+    etag: `W/"${hash}"`
+  };
+}
+
+async function getPublicSitePayload({ bypassCache = false } = {}) {
+  if (!bypassCache && cachedPayload && Date.now() < cacheExpiresAt) {
+    return cachedPayload;
+  }
+
+  const [publicSite, branding] = await Promise.all([
+    fetchPublicSiteSettings(),
+    fetchBrandingContext()
+  ]);
+
+  const payload = buildCachedPayload({ publicSite, branding });
+
+  cachedPayload = payload;
+  cacheExpiresAt = Date.now() + CACHE_TTL_MS;
+
+  return payload;
+}
+
+function clearPublicSiteCache() {
+  cachedPayload = null;
+  cacheExpiresAt = 0;
+}
+
+async function getDefaultPublicSitePayload() {
+  const branding = await fetchBrandingContext();
+  return buildCachedPayload({
+    publicSite: {
+      general_public_site_enabled: false,
+      general_public_site_html: DEFAULT_PUBLIC_SITE_HTML,
+      general_public_site_custom_css: ''
+    },
+    branding
+  });
+}
+
+async function getRawPublicSiteSettings() {
+  return fetchPublicSiteSettings();
+}
+
+function applyBrandTokens(html, branding) {
+  if (!html) {
+    return html;
+  }
+
+  const tokens = {
+    company_name: branding.companyName || '',
+    company_tagline: branding.companyTagline || '',
+    support_email: branding.supportEmail || '',
+    brand_logo_url: branding.logoUrl || '/picpeak-logo-transparent.png',
+    brand_primary_hex: branding.colors?.primary || '#2563eb',
+    brand_accent_hex: branding.colors?.accent || '#1d4ed8',
+    brand_background_hex: branding.colors?.background || '#f8fafc',
+    brand_text_hex: branding.colors?.text || '#0f172a'
+  };
+
+  return html.replace(/\{\{\s*(company_name|company_tagline|support_email|brand_logo_url|brand_primary_hex|brand_accent_hex|brand_background_hex|brand_text_hex)\s*\}\}/gi,
+    (_, key) => tokens[key] || '');
+}
+
+module.exports = {
+  getPublicSitePayload,
+  clearPublicSiteCache,
+  getDefaultPublicSitePayload,
+  getRawPublicSiteSettings
+};

backend/src/services/rateLimitService.js

@@ -2,6 +2,7 @@ const rateLimit = require('express-rate-limit');
 const jwt = require('jsonwebtoken');
 const { db } = require('../database/db');
 const logger = require('../utils/logger');
+const { getAdminTokenFromRequest, getGalleryTokenFromRequest } = require('../utils/tokenUtils');
 
 // Cache for rate limit settings
 let settingsCache = null;
@@ -95,12 +96,9 @@ function clearSettingsCache() {
  */
 function isAuthenticated(req) {
   try {
-    const authHeader = req.headers.authorization;
-    if (!authHeader || !authHeader.startsWith('Bearer ')) {
-      return false;
-    }
-
-    const token = authHeader.substring(7);
+    const slugMatch = req.path.match(/\/api\/(?:gallery|secure-images)\/([^\/]+)/);
+    const slug = slugMatch ? slugMatch[1] : req.requestedSlug;
+    const token = getAdminTokenFromRequest(req) || getGalleryTokenFromRequest(req, slug);
     const decoded = jwt.verify(token, process.env.JWT_SECRET);
     
     // Check if token is valid
@@ -280,4 +278,4 @@ module.exports = {
   createAuthRateLimiter,
   isAuthenticated,
   shouldSkipRateLimit
-};
+};

backend/src/services/storage/__tests__/s3Storage.test.js

@@ -1,5 +1,5 @@
 const S3StorageAdapter = require('../s3Storage');
-const { S3Client } = require('@aws-sdk/client-s3');
+const { S3Client, HeadBucketCommand, HeadObjectCommand, ListObjectsV2Command } = require('@aws-sdk/client-s3');
 const { Upload } = require('@aws-sdk/lib-storage');
 const fs = require('fs');
 const stream = require('stream');
@@ -24,6 +24,10 @@ describe('S3StorageAdapter', () => {
       send: mockSend
     };
     S3Client.mockImplementation(() => mockS3Client);
+
+    HeadBucketCommand.mockImplementation((input) => ({ input }));
+    HeadObjectCommand.mockImplementation((input) => ({ input }));
+    ListObjectsV2Command.mockImplementation((input) => ({ input }));
     
     // Create adapter instance
     s3Storage = new S3StorageAdapter({
@@ -70,11 +74,7 @@ describe('S3StorageAdapter', () => {
       const result = await s3Storage.testConnection();
       
       expect(result).toBe(true);
-      expect(mockSend).toHaveBeenCalledWith(
-        expect.objectContaining({
-          input: { Bucket: 'test-bucket' }
-        })
-      );
+      expect(HeadBucketCommand).toHaveBeenCalledWith({ Bucket: 'test-bucket' });
     });
     
     it('should throw error on connection failure', async () => {
@@ -132,24 +132,25 @@ describe('S3StorageAdapter', () => {
     
     it('should track upload progress', async () => {
       const onProgress = jest.fn();
-      let progressCallback;
-      
-      mockUpload.on.mockImplementation((event, callback) => {
-        if (event === 'httpUploadProgress') {
-          progressCallback = callback;
-        }
-        return mockUpload;
+      Upload.mockImplementation(() => {
+        const uploadInstance = {
+          on: jest.fn((event, handler) => {
+            if (event === 'httpUploadProgress') {
+              handler({ loaded: 512, total: 1024 });
+            }
+            return uploadInstance;
+          }),
+          done: mockDone
+        };
+        return uploadInstance;
       });
-      
+
       const uploadPromise = s3Storage.upload('/path/to/file.jpg', 'test-key', {
         onProgress
       });
-      
-      // Simulate progress
-      progressCallback({ loaded: 512, total: 1024 });
-      
+
       await uploadPromise;
-      
+
       expect(onProgress).toHaveBeenCalledWith(512, 1024);
     });
     
@@ -177,11 +178,10 @@ describe('S3StorageAdapter', () => {
       const result = await s3Storage.exists('test-key');
       
       expect(result).toBe(true);
-      expect(mockSend).toHaveBeenCalledWith(
-        expect.objectContaining({
-          input: { Bucket: 'test-bucket', Key: 'test-key' }
-        })
-      );
+      expect(HeadObjectCommand).toHaveBeenCalledWith({
+        Bucket: 'test-bucket',
+        Key: 'test-key'
+      });
     });
     
     it('should return false if object does not exist', async () => {
@@ -220,58 +220,51 @@ describe('S3StorageAdapter', () => {
     it('should retry on retryable errors', async () => {
       const retryableError = new Error('Connection reset');
       retryableError.code = 'ECONNRESET';
-      
-      // First attempt fails, second succeeds
-      mockSend
+
+      const operation = jest.fn()
         .mockRejectedValueOnce(retryableError)
-        .mockResolvedValueOnce({});
-      
-      // Mock setTimeout to speed up test
-      jest.useFakeTimers();
-      
-      const promise = s3Storage.exists('test-key');
-      
-      // Advance timers
-      jest.runAllTimers();
-      
-      const result = await promise;
-      
-      expect(result).toBe(true);
-      expect(mockSend).toHaveBeenCalledTimes(2);
-      
-      jest.useRealTimers();
+        .mockResolvedValueOnce('success');
+
+      const originalRandom = Math.random;
+      const originalDelay = s3Storage.config.retryDelay;
+      Math.random = jest.fn(() => 0);
+      s3Storage.config.retryDelay = 0;
+
+      const result = await s3Storage._retryOperation(operation);
+
+      expect(result).toBe('success');
+      expect(operation).toHaveBeenCalledTimes(2);
+
+      Math.random = originalRandom;
+      s3Storage.config.retryDelay = originalDelay;
     });
     
     it('should not retry on non-retryable errors', async () => {
       const nonRetryableError = new Error('Invalid credentials');
       nonRetryableError.code = 'InvalidCredentials';
       
-      mockSend.mockRejectedValueOnce(nonRetryableError);
-      
-      await expect(s3Storage.exists('test-key')).rejects.toThrow('Invalid credentials');
-      expect(mockSend).toHaveBeenCalledTimes(1);
+      const operation = jest.fn().mockRejectedValueOnce(nonRetryableError);
+
+      await expect(s3Storage._retryOperation(operation)).rejects.toThrow('Invalid credentials');
+      expect(operation).toHaveBeenCalledTimes(1);
     });
     
     it('should stop retrying after max attempts', async () => {
       const retryableError = new Error('Service unavailable');
       retryableError.code = 'ServiceUnavailable';
       
-      mockSend.mockRejectedValue(retryableError);
-      
-      // Mock setTimeout to speed up test
-      jest.useFakeTimers();
-      
-      const promise = s3Storage.exists('test-key');
-      
-      // Advance timers for all retries
-      for (let i = 0; i < 4; i++) {
-        jest.runAllTimers();
-      }
-      
-      await expect(promise).rejects.toThrow('Service unavailable');
-      expect(mockSend).toHaveBeenCalledTimes(4); // Initial + 3 retries
-      
-      jest.useRealTimers();
+      const operation = jest.fn().mockRejectedValue(retryableError);
+
+      const originalRandom = Math.random;
+      const originalDelay = s3Storage.config.retryDelay;
+      Math.random = jest.fn(() => 0);
+      s3Storage.config.retryDelay = 0;
+
+      await expect(s3Storage._retryOperation(operation)).rejects.toThrow('Service unavailable');
+      expect(operation).toHaveBeenCalledTimes(4); // initial + 3 retries
+
+      Math.random = originalRandom;
+      s3Storage.config.retryDelay = originalDelay;
     });
   });
   
@@ -308,4 +301,4 @@ describe('S3StorageAdapter', () => {
       expect(s3Storage._formatBytes(1536, 1)).toBe('1.5 KB');
     });
   });
-});
+});

backend/src/utils/cssSanitizer.js

@@ -0,0 +1,32 @@
+function sanitizeCss(css) {
+  if (!css || typeof css !== 'string') {
+    return '';
+  }
+
+  let sanitized = css;
+
+  const disallowedPatterns = [
+    /@import[^;]+;?/gi,
+    /@charset[^;]+;?/gi,
+    /expression\s*\([^)]*\)/gi,
+    /url\s*\(\s*(['"])\s*javascript:[^)]*\)/gi,
+    /url\s*\(\s*(['"])\s*data:text\/javascript[^)]*\)/gi
+  ];
+
+  disallowedPatterns.forEach((pattern) => {
+    sanitized = sanitized.replace(pattern, '');
+  });
+
+  sanitized = sanitized.replace(/[\u0000-\u001F\u007F]/g, '');
+
+  const MAX_LENGTH = 100 * 1024;
+  if (sanitized.length > MAX_LENGTH) {
+    sanitized = sanitized.slice(0, MAX_LENGTH);
+  }
+
+  return sanitized.trim();
+}
+
+module.exports = {
+  sanitizeCss,
+};

backend/src/utils/tokenUtils.js

@@ -0,0 +1,129 @@
+const ADMIN_COOKIE_NAME = 'admin_token';
+const GALLERY_COOKIE_NAME = 'gallery_token';
+const GALLERY_COOKIE_PREFIX = 'gallery_token_';
+
+const DEFAULT_MAX_AGE_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+const secureCookie = (() => {
+  if (typeof process.env.COOKIE_SECURE === 'string') {
+    return process.env.COOKIE_SECURE.toLowerCase() === 'true';
+  }
+  // Default to false so native HTTP installs stay functional. Operators can
+  // opt-in via COOKIE_SECURE=true when serving behind HTTPS.
+  return false;
+})();
+const sameSiteDefault = process.env.COOKIE_SAMESITE || 'Lax';
+const cookieDomain = process.env.COOKIE_DOMAIN;
+
+function buildCookieBaseOptions() {
+  const options = {
+    httpOnly: true,
+    secure: secureCookie,
+    sameSite: sameSiteDefault,
+    path: '/',
+  };
+
+  if (cookieDomain) {
+    options.domain = cookieDomain;
+  }
+
+  return options;
+}
+
+function buildCookieOptionsWithExpiry(maxAgeMs = DEFAULT_MAX_AGE_MS) {
+  return {
+    ...buildCookieBaseOptions(),
+    maxAge: maxAgeMs,
+  };
+}
+
+function sanitizeSlugForCookie(slug = '') {
+  return String(slug).replace(/[^A-Za-z0-9_-]/g, '_');
+}
+
+function setAdminAuthCookie(res, token) {
+  if (!token) return;
+  res.cookie(ADMIN_COOKIE_NAME, token, buildCookieOptionsWithExpiry());
+}
+
+function clearAdminAuthCookie(res) {
+  res.clearCookie(ADMIN_COOKIE_NAME, buildCookieBaseOptions());
+}
+
+function setGalleryAuthCookies(res, token, slug) {
+  if (!token) return;
+  const options = buildCookieOptionsWithExpiry();
+  res.cookie(GALLERY_COOKIE_NAME, token, options);
+  if (slug) {
+    const cookieName = `${GALLERY_COOKIE_PREFIX}${sanitizeSlugForCookie(slug)}`;
+    res.cookie(cookieName, token, options);
+  }
+}
+
+function clearGalleryAuthCookies(res, slug) {
+  const baseOptions = buildCookieBaseOptions();
+  res.clearCookie(GALLERY_COOKIE_NAME, baseOptions);
+
+  const cookies = res.req?.cookies || {};
+
+  if (slug) {
+    const cookieName = `${GALLERY_COOKIE_PREFIX}${sanitizeSlugForCookie(slug)}`;
+    res.clearCookie(cookieName, baseOptions);
+  } else {
+    Object.keys(cookies).forEach((name) => {
+      if (name.startsWith(GALLERY_COOKIE_PREFIX)) {
+        res.clearCookie(name, baseOptions);
+      }
+    });
+  }
+}
+
+function getAdminTokenFromRequest(req) {
+  const header = req.headers?.authorization;
+  if (header && header.startsWith('Bearer ')) {
+    return header.substring(7);
+  }
+  return req.cookies?.[ADMIN_COOKIE_NAME] || null;
+}
+
+function getGalleryTokenFromRequest(req, slug) {
+  const header = req.headers?.authorization;
+  if (header && header.startsWith('Bearer ')) {
+    return header.substring(7);
+  }
+
+  if (!req.cookies) {
+    return null;
+  }
+
+  if (slug) {
+    const cookieName = `${GALLERY_COOKIE_PREFIX}${sanitizeSlugForCookie(slug)}`;
+    if (req.cookies[cookieName]) {
+      return req.cookies[cookieName];
+    }
+  }
+
+  if (req.cookies[GALLERY_COOKIE_NAME]) {
+    return req.cookies[GALLERY_COOKIE_NAME];
+  }
+
+  const prefixed = Object.keys(req.cookies).find((name) => name.startsWith(GALLERY_COOKIE_PREFIX));
+  if (prefixed) {
+    return req.cookies[prefixed];
+  }
+
+  return null;
+}
+
+module.exports = {
+  ADMIN_COOKIE_NAME,
+  GALLERY_COOKIE_NAME,
+  GALLERY_COOKIE_PREFIX,
+  sanitizeSlugForCookie,
+  setAdminAuthCookie,
+  clearAdminAuthCookie,
+  setGalleryAuthCookies,
+  clearGalleryAuthCookies,
+  getAdminTokenFromRequest,
+  getGalleryTokenFromRequest,
+};

frontend/nginx.conf

@@ -101,6 +101,19 @@ server {
         proxy_cache_valid 404 1m;
     }
 
+    # Delegate root requests to backend for public landing page handling
+    location = / {
+        proxy_pass http://backend:3001/;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_read_timeout 60s;
+    }
+
     # SPA fallback
     location / {
         try_files $uri $uri/ /index.html;
@@ -110,4 +123,4 @@ server {
     location ~ /\. {
         deny all;
     }
-}
+}

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "picpeak-frontend",
-  "version": "1.0.126",
+  "version": "1.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "picpeak-frontend",
-      "version": "1.0.126",
+      "version": "1.1.1",
       "dependencies": {
         "@tanstack/react-query": "^5.0.0",
         "@tiptap/extension-character-count": "^2.26.1",
@@ -20,14 +20,14 @@
         "@types/dompurify": "^3.0.5",
         "@types/lodash": "^4.17.20",
         "@types/react-google-recaptcha": "^2.1.9",
-        "axios": "^1.3.2",
+        "axios": "^1.12.2",
         "clsx": "^2.0.0",
         "date-fns": "4.1.0",
         "dompurify": "^3.2.6",
         "i18next": "^25.3.1",
         "i18next-browser-languagedetector": "^8.2.0",
         "i18next-http-backend": "^3.0.2",
-        "js-cookie": "^3.0.5",
+        "linkifyjs": "^4.3.2",
         "lodash": "^4.17.21",
         "lowlight": "^2.9.0",
         "lucide-react": "0.525.0",
@@ -44,7 +44,6 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.29.0",
-        "@types/js-cookie": "^3.0.6",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^4.5.2",
@@ -57,7 +56,7 @@
         "tailwindcss": "^3.3.0",
         "typescript": "~5.8.3",
         "typescript-eslint": "^8.34.1",
-        "vite": "^7.0.0"
+        "vite": "^7.1.6"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -2014,13 +2013,6 @@
         "@types/unist": "^2"
       }
     },
-    "node_modules/@types/js-cookie": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
-      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -2549,13 +2541,13 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
-      "integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
         "proxy-from-env": "^1.1.0"
       }
     },
@@ -3903,15 +3895,6 @@
         "jiti": "bin/jiti.js"
       }
     },
-    "node_modules/js-cookie": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
-      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4032,9 +4015,9 @@
       }
     },
     "node_modules/linkifyjs": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.1.tgz",
-      "integrity": "sha512-DRSlB9DKVW04c4SUdGvKK5FR6be45lTU9M76JnngqPeeGDqPwYc0zdUErtsNVMtxPXgUWV4HbXbnC4sNyBxkYg==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.2.tgz",
+      "integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==",
       "license": "MIT"
     },
     "node_modules/locate-path": {
@@ -5524,14 +5507,14 @@
       }
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
-      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.4",
-        "picomatch": "^4.0.2"
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -5541,11 +5524,14 @@
       }
     },
     "node_modules/tinyglobby/node_modules/fdir": {
-      "version": "6.4.6",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
-      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
       "dev": true,
       "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
       "peerDependencies": {
         "picomatch": "^3 || ^4"
       },
@@ -5731,18 +5717,18 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.5.tgz",
-      "integrity": "sha512-1mncVwJxy2C9ThLwz0+2GKZyEXuC3MyWtAAlNftlZZXZDP3AJt5FmwcMit/IGGaNZ8ZOB2BNO/HFUB+CpN0NQw==",
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.6.tgz",
+      "integrity": "sha512-SRYIB8t/isTwNn8vMB3MR6E+EQZM/WG1aKmmIUCfDXfVvKfc20ZpamngWHKzAmmu9ppsgxsg4b2I7c90JZudIQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
-        "fdir": "^6.4.6",
-        "picomatch": "^4.0.2",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
         "postcss": "^8.5.6",
-        "rollup": "^4.40.0",
-        "tinyglobby": "^0.2.14"
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -5806,11 +5792,14 @@
       }
     },
     "node_modules/vite/node_modules/fdir": {
-      "version": "6.4.6",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
-      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
       "dev": true,
       "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
       "peerDependencies": {
         "picomatch": "^3 || ^4"
       },

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "picpeak-frontend",
   "private": true,
-  "version": "1.0.126",
+  "version": "1.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -23,14 +23,14 @@
     "@types/dompurify": "^3.0.5",
     "@types/lodash": "^4.17.20",
     "@types/react-google-recaptcha": "^2.1.9",
-    "axios": "^1.3.2",
+    "axios": "^1.12.2",
     "clsx": "^2.0.0",
     "date-fns": "4.1.0",
     "dompurify": "^3.2.6",
     "i18next": "^25.3.1",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
-    "js-cookie": "^3.0.5",
+    "linkifyjs": "^4.3.2",
     "lodash": "^4.17.21",
     "lowlight": "^2.9.0",
     "lucide-react": "0.525.0",
@@ -47,7 +47,6 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.29.0",
-    "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.5.2",
@@ -60,6 +59,6 @@
     "tailwindcss": "^3.3.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.34.1",
-    "vite": "^7.0.0"
+    "vite": "^7.1.6"
   }
 }

frontend/src/App.tsx

@@ -22,7 +22,6 @@ import {
   AnalyticsPage,
   BrandingPage,
   SettingsPage,
-  CMSPage,
   BackupManagement
 } from './pages/admin';
 import { CMSPageEnhanced } from './pages/admin/CMSPageEnhanced';

frontend/src/components/MaintenanceWrapper.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { MaintenanceMode } from './MaintenanceMode';
 import { useMaintenanceMode } from '../contexts/MaintenanceContext';
-import { setMaintenanceModeCallback, api, getAuthToken } from '../config/api';
+import { setMaintenanceModeCallback, api } from '../config/api';
 
 interface MaintenanceWrapperProps {
   children: React.ReactNode;
@@ -12,10 +12,38 @@ interface MaintenanceWrapperProps {
 export const MaintenanceWrapper: React.FC<MaintenanceWrapperProps> = ({ children }) => {
   const location = useLocation();
   const { isMaintenanceMode, setMaintenanceMode } = useMaintenanceMode();
+  const [hasAdminSession, setHasAdminSession] = useState(false);
   
   // Check if current route is admin route
   const isAdminRoute = location.pathname.startsWith('/admin');
-  const hasAdminAuth = !!getAuthToken(true);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const checkAdminSession = async () => {
+      if (!isAdminRoute) {
+        setHasAdminSession(false);
+        return;
+      }
+
+      try {
+        const response = await api.get<{ valid: boolean; type: string }>('/auth/session');
+        if (isMounted) {
+          setHasAdminSession(Boolean(response.data?.valid && response.data.type === 'admin'));
+        }
+      } catch (error) {
+        if (isMounted) {
+          setHasAdminSession(false);
+        }
+      }
+    };
+
+    checkAdminSession();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [isAdminRoute]);
 
   // Register the maintenance mode callback
   useEffect(() => {
@@ -37,7 +65,7 @@ export const MaintenanceWrapper: React.FC<MaintenanceWrapperProps> = ({ children
       } catch (error: any) {
         if (error.response?.status === 503) {
           // Only set maintenance mode for non-admin routes or unauthenticated admin routes
-          if (!isAdminRoute || !hasAdminAuth) {
+          if (!isAdminRoute || !hasAdminSession) {
             setMaintenanceMode(true);
             return { maintenance: true };
           }
@@ -47,13 +75,13 @@ export const MaintenanceWrapper: React.FC<MaintenanceWrapperProps> = ({ children
     },
     staleTime: 30000, // Check every 30 seconds
     retry: false, // Don't retry on failure
-    enabled: (!isAdminRoute || !hasAdminAuth) && !isMaintenanceMode, // Don't check if already in maintenance
+    enabled: (!isAdminRoute || !hasAdminSession) && !isMaintenanceMode, // Don't check if already in maintenance
   });
 
   // Show maintenance page if in maintenance mode and not on admin route with auth
-  if (isMaintenanceMode && (!isAdminRoute || !hasAdminAuth)) {
+  if (isMaintenanceMode && (!isAdminRoute || !hasAdminSession)) {
     return <MaintenanceMode />;
   }
 
   return <>{children}</>;
-};
+};

frontend/src/components/admin/AdminPhotoGrid.tsx

@@ -167,6 +167,9 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
       <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
         {photos.map((photo, index) => {
           const isDeleting = deletingPhotos.has(photo.id);
+          const commentCount = photo.comment_count ?? 0;
+          const averageRating = photo.average_rating ?? 0;
+          const likeCount = photo.like_count ?? 0;
           return (
             <div
               key={photo.id}
@@ -258,18 +261,18 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
             )}
             
             {/* Feedback Indicators (moved to bottom-right to avoid covering category) */}
-            {(photo.comment_count > 0 || photo.average_rating > 0 || photo.like_count > 0) && (
+            {(commentCount > 0 || averageRating > 0 || likeCount > 0) && (
               <div className="absolute bottom-2 right-2 flex items-center gap-1 z-10">
-                {photo.average_rating > 0 && (
-                  <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`Rating: ${Number(photo.average_rating).toFixed(1)}`}>
+                {averageRating > 0 && (
+                  <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`Rating: ${Number(averageRating).toFixed(1)}`}>
                     <Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
-                    <span className="text-xs font-medium text-neutral-700">{Number(photo.average_rating).toFixed(1)}</span>
+                    <span className="text-xs font-medium text-neutral-700">{Number(averageRating).toFixed(1)}</span>
                   </div>
                 )}
-                {photo.comment_count > 0 && (
-                  <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.comment_count} comments`}>
+                {commentCount > 0 && (
+                  <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${commentCount} comments`}>
                     <MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" />
-                    <span className="text-xs font-medium text-neutral-700">{photo.comment_count}</span>
+                    <span className="text-xs font-medium text-neutral-700">{commentCount}</span>
                   </div>
                 )}
               </div>

frontend/src/components/admin/AdminPhotoViewer.tsx

@@ -1,15 +1,20 @@
 import React, { useState } from 'react';
-import { X, ChevronLeft, ChevronRight, Download, Trash2, Tag, Calendar, HardDrive, Eye, MousePointer, MessageSquare, Star, Heart, ThumbsUp, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
+import { X, ChevronLeft, ChevronRight, Download, Trash2, Tag, Calendar, HardDrive, Eye, MousePointer, MessageSquare, Star, Heart, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
 import { format } from 'date-fns';
 import { toast } from 'react-toastify';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { AdminPhoto } from '../../services/photos.service';
 import { photosService } from '../../services/photos.service';
-import { feedbackService } from '../../services/feedback.service';
+import { feedbackService, type PhotoFeedback, type FeedbackSummary } from '../../services/feedback.service';
 import { Button } from '../common';
 import { AdminAuthenticatedImage } from './AdminAuthenticatedImage';
 
+type AdminFeedbackResponse = {
+  feedback: PhotoFeedback[];
+  summary?: FeedbackSummary;
+};
+
 interface AdminPhotoViewerProps {
   photos: AdminPhoto[];
   initialIndex: number;
@@ -34,9 +39,16 @@ export const AdminPhotoViewer: React.FC<AdminPhotoViewerProps> = ({
   const queryClient = useQueryClient();
   
   const currentPhoto = photos[currentIndex];
+  const averageRating = currentPhoto?.average_rating ?? 0;
+  const likeCount = currentPhoto?.like_count ?? 0;
+  const favoriteCount = currentPhoto?.favorite_count ?? 0;
+
+  if (!currentPhoto) {
+    return null;
+  }
 
   // Fetch feedback for current photo
-  const { data: feedbackData } = useQuery({
+  const { data: feedbackData } = useQuery<AdminFeedbackResponse>({
     queryKey: ['admin-photo-feedback', eventId, currentPhoto?.id],
     queryFn: () => feedbackService.getEventFeedback(eventId.toString(), {
       photoId: currentPhoto?.id.toString(),
@@ -45,6 +57,8 @@ export const AdminPhotoViewer: React.FC<AdminPhotoViewerProps> = ({
     enabled: !!currentPhoto
   });
 
+  const comments = (feedbackData?.feedback ?? []).filter((item): item is PhotoFeedback => item.feedback_type === 'comment');
+
   const goToPrevious = () => {
     setCurrentIndex((prev) => (prev > 0 ? prev - 1 : photos.length - 1));
   };
@@ -304,41 +318,41 @@ export const AdminPhotoViewer: React.FC<AdminPhotoViewerProps> = ({
               
               {/* Feedback Stats */}
               <div className="grid grid-cols-2 gap-3 mb-4">
-                {currentPhoto.average_rating > 0 && (
+                {averageRating > 0 && (
                   <div className="bg-neutral-800 rounded-lg p-3">
                     <div className="flex items-center gap-1 text-yellow-400 mb-1">
                       <Star className="w-4 h-4" fill="currentColor" />
-                      <span className="text-white font-medium">{Number(currentPhoto.average_rating).toFixed(1)}</span>
+                      <span className="text-white font-medium">{Number(averageRating).toFixed(1)}</span>
                     </div>
                     <p className="text-xs text-neutral-400">Avg Rating</p>
                   </div>
                 )}
                 
-                {currentPhoto.like_count > 0 && (
+                {likeCount > 0 && (
                   <div className="bg-neutral-800 rounded-lg p-3">
                     <div className="flex items-center gap-1 text-red-400 mb-1">
                       <Heart className="w-4 h-4" fill="currentColor" />
-                      <span className="text-white font-medium">{currentPhoto.like_count}</span>
+                      <span className="text-white font-medium">{likeCount}</span>
                     </div>
                     <p className="text-xs text-neutral-400">Likes</p>
                   </div>
                 )}
                 
-                {currentPhoto.favorite_count > 0 && (
+                {favoriteCount > 0 && (
                   <div className="bg-neutral-800 rounded-lg p-3">
                     <div className="flex items-center gap-1 text-blue-400 mb-1">
                       <Star className="w-4 h-4" />
-                      <span className="text-white font-medium">{currentPhoto.favorite_count}</span>
+                      <span className="text-white font-medium">{favoriteCount}</span>
                     </div>
                     <p className="text-xs text-neutral-400">Favorites</p>
                   </div>
                 )}
                 
-                {feedbackData.feedback && (
+                {comments.length > 0 && (
                   <div className="bg-neutral-800 rounded-lg p-3">
                     <div className="flex items-center gap-1 text-green-400 mb-1">
                       <MessageSquare className="w-4 h-4" />
-                      <span className="text-white font-medium">{feedbackData.feedback.filter(f => f.feedback_type === 'comment').length}</span>
+                      <span className="text-white font-medium">{comments.length}</span>
                     </div>
                     <p className="text-xs text-neutral-400">Comments</p>
                   </div>
@@ -346,20 +360,18 @@ export const AdminPhotoViewer: React.FC<AdminPhotoViewerProps> = ({
               </div>
               
               {/* Comments List */}
-              {feedbackData.feedback && feedbackData.feedback.filter(f => f.feedback_type === 'comment').length > 0 && (
+              {comments.length > 0 && (
                 <div className="space-y-2">
                   <button
                     onClick={() => setExpandedComments(!expandedComments)}
                     className="text-xs text-primary-400 hover:text-primary-300 mb-2"
                   >
-                    {expandedComments ? 'Hide' : 'Show'} Comments ({feedbackData.feedback.filter(f => f.feedback_type === 'comment').length})
+                    {expandedComments ? 'Hide' : 'Show'} Comments ({comments.length})
                   </button>
                   
                   {expandedComments && (
                     <div className="space-y-3 max-h-64 overflow-y-auto">
-                      {feedbackData.feedback
-                        .filter(f => f.feedback_type === 'comment')
-                        .map((comment) => (
+                      {comments.map((comment) => (
                           <div key={comment.id} className="bg-neutral-800 rounded-lg p-3">
                             <div className="flex items-start justify-between mb-2">
                               <div className="flex-1">
@@ -459,7 +471,7 @@ export const AdminPhotoViewer: React.FC<AdminPhotoViewerProps> = ({
               )}
               
               {/* No feedback message */}
-              {(!feedbackData.feedback || feedbackData.feedback.length === 0) && (
+              {comments.length === 0 && (
                 <p className="text-neutral-400 text-sm">No feedback for this photo yet.</p>
               )}
             </div>
@@ -475,4 +487,4 @@ export const AdminPhotoViewer: React.FC<AdminPhotoViewerProps> = ({
       </div>
     </div>
   );
-};
+};

frontend/src/components/admin/AdminSidebar.tsx

@@ -121,11 +121,20 @@ const StorageInfo: React.FC = () => {
     );
   }
 
-  const usagePercent = Math.round((storageInfo.total_used / storageInfo.storage_limit) * 100);
+  const limitInUse = storageInfo.storage_soft_limit || storageInfo.storage_limit || 1;
+  const usagePercent = limitInUse
+    ? Math.round((storageInfo.total_used / limitInUse) * 100)
+    : 0;
+  const isOverSoftLimit = limitInUse && storageInfo.total_used >= limitInUse;
+  const progressBarClass = isOverSoftLimit ? 'bg-red-600' : 'bg-primary-600';
+  const containerClass = isOverSoftLimit
+    ? 'bg-red-50 border border-red-200'
+    : 'bg-neutral-100';
+  const softLimitDisplay = settingsService.formatBytes(limitInUse);
 
   return (
     <div className="p-4 border-t border-neutral-200">
-      <div className="bg-neutral-100 rounded-lg p-3">
+      <div className={`${containerClass} rounded-lg p-3 transition-colors duration-300`}>
         <div className="flex items-center justify-between text-sm">
           <span className="text-neutral-700">{t('admin.storageUsed')}</span>
           <span className="font-medium text-neutral-900">
@@ -134,14 +143,14 @@ const StorageInfo: React.FC = () => {
         </div>
         <div className="mt-2 w-full bg-neutral-200 rounded-full h-2">
           <div 
-            className="bg-primary-600 h-2 rounded-full transition-all duration-300"
+            className={`${progressBarClass} h-2 rounded-full transition-all duration-300`}
             style={{ width: `${Math.min(usagePercent, 100)}%` }}
           />
         </div>
         <p className="text-xs text-neutral-600 mt-1">
-          {t('admin.storagePercent', { percent: usagePercent, limit: settingsService.formatBytes(storageInfo.storage_limit) })}
+          {t('admin.storagePercent', { percent: usagePercent, limit: softLimitDisplay })}
         </p>
       </div>
     </div>
   );
-};
+};

frontend/src/components/admin/BackupConfiguration.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentType } from 'react';
+
+export const BackupConfiguration: ComponentType<any>;

frontend/src/components/admin/BackupDashboard.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentType } from 'react';
+
+export const BackupDashboard: ComponentType<any>;

frontend/src/components/admin/BackupHistory.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentType } from 'react';
+
+export const BackupHistory: ComponentType<any>;

frontend/src/components/admin/CMSEditor.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { useEditor, EditorContent } from '@tiptap/react';
+import { useEditor, EditorContent, type Editor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import Link from '@tiptap/extension-link';
 import HardBreak from '@tiptap/extension-hard-break';
@@ -107,10 +107,11 @@ export const CMSEditor: React.FC<CMSEditorProps> = ({ content, onChange, onSave,
     },
   });
 
-  const updateCounts = useCallback((editor: any) => {
-    const text = editor.state.doc.textContent;
-    setCharCount(editor.storage.characterCount.characters());
-    setWordCount(text.trim().split(/\s+/).filter(word => word.length > 0).length);
+  const updateCounts = useCallback((editorInstance: Editor) => {
+    const textContent = editorInstance.state.doc.textContent;
+    setCharCount(editorInstance.storage.characterCount.characters());
+    const words = textContent.trim().split(/\s+/).filter((word: string) => word.length > 0);
+    setWordCount(words.length);
   }, []);
 
   // Update editor content when prop changes
@@ -568,4 +569,4 @@ export const CMSEditor: React.FC<CMSEditorProps> = ({ content, onChange, onSave,
   );
 };
 
-CMSEditor.displayName = 'CMSEditor';
+CMSEditor.displayName = 'CMSEditor';

frontend/src/components/admin/FeedbackModerationPanel.tsx

@@ -1,14 +1,11 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import { 
-  MessageSquare, 
-  Eye, 
-  EyeOff, 
-  Trash2, 
-  AlertCircle,
+import {
+  MessageSquare,
+  EyeOff,
+  Trash2,
   CheckCircle,
-  Clock,
   User
 } from 'lucide-react';
 import { parseISO } from 'date-fns';
@@ -16,7 +13,7 @@ import { toast } from 'react-toastify';
 
 import { Card, Loading, Button } from '../common';
 import { AdminAuthenticatedImage } from './AdminAuthenticatedImage';
-import { feedbackService } from '../../services/feedback.service';
+import { feedbackService, type FeedbackResponse, type PhotoFeedback } from '../../services/feedback.service';
 import { useLocalizedDate } from '../../hooks/useLocalizedDate';
 
 interface FeedbackModerationPanelProps {
@@ -38,7 +35,7 @@ export const FeedbackModerationPanel: React.FC<FeedbackModerationPanelProps> = (
   const [showAll, setShowAll] = useState(false);
 
   // Fetch pending feedback
-  const { data: feedbackData, isLoading } = useQuery({
+  const { data: feedbackData, isLoading } = useQuery<FeedbackResponse>({
     queryKey: ['event-feedback-moderation', eventId],
     queryFn: () => feedbackService.getEventFeedback(eventId.toString(), {
       type: 'comment',
@@ -77,12 +74,12 @@ export const FeedbackModerationPanel: React.FC<FeedbackModerationPanelProps> = (
     );
   }
 
-  const pendingComments = feedbackData?.feedback || [];
+  const pendingComments: PhotoFeedback[] = feedbackData?.feedback || [];
   const hasPending = pendingComments.length > 0;
 
   return (
     <Card className={className}>
-      <div className="p-6">
+      <div className={compact ? 'p-4' : 'p-6'}>
         <div className="flex items-center justify-between mb-4">
           <h2 className="text-lg font-semibold text-neutral-900">
             {t('feedback.pendingModeration', 'Pending Moderation')}

frontend/src/components/admin/GalleryPreview.tsx

@@ -1,9 +1,19 @@
 import React, { useMemo } from 'react';
 import { Camera } from 'lucide-react';
 import { ThemeConfig, GalleryLayoutType } from '../../types/theme.types';
+import { buildResourceUrl } from '../../utils/url';
+
+interface GalleryPreviewBranding {
+  company_name?: string;
+  company_tagline?: string;
+  logo_url?: string;
+  logo_display_mode?: 'logo_only' | 'text_only' | 'logo_and_text';
+  logo_position?: 'left' | 'center' | 'right';
+}
 
 interface GalleryPreviewProps {
   theme: ThemeConfig;
+  branding?: GalleryPreviewBranding;
   layoutType?: GalleryLayoutType;
   className?: string;
 }
@@ -56,6 +66,7 @@ const PreviewPhoto: React.FC<{
 
 export const GalleryPreview: React.FC<GalleryPreviewProps> = ({ 
   theme, 
+  branding,
   layoutType,
   className = '' 
 }) => {
@@ -63,6 +74,23 @@ export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
   
   // Use the provided layoutType or fallback to theme's gallery layout
   const activeLayout = layoutType || theme.galleryLayout || 'grid';
+
+  const displayMode = branding?.logo_display_mode || 'logo_and_text';
+  const showLogo = displayMode === 'logo_only' || displayMode === 'logo_and_text';
+  const showText = displayMode === 'text_only' || displayMode === 'logo_and_text';
+  const brandName = branding?.company_name?.trim() || 'Your Studio';
+  const brandTagline = branding?.company_tagline?.trim() || '';
+  const resolvedLogoUrl = showLogo && branding?.logo_url
+    ? (branding.logo_url.startsWith('http')
+        ? branding.logo_url
+        : buildResourceUrl(branding.logo_url))
+    : null;
+  const logoPosition = branding?.logo_position || 'left';
+  const brandFlexClass = logoPosition === 'center'
+    ? 'justify-center text-center'
+    : logoPosition === 'right'
+      ? 'justify-end text-right flex-row-reverse'
+      : 'justify-start text-left';
   
   const renderLayout = () => {
     const spacing = theme.gallerySettings?.spacing || 'normal';
@@ -163,14 +191,41 @@ export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
     >
       {/* Preview Header */}
       <div 
-        className="px-4 py-3 border-b"
+        className="px-4 py-3 border-b space-y-2"
         style={{
           borderColor: theme.primaryColor ? `${theme.primaryColor}20` : '#e5e7eb',
         }}
       >
-        <h3 className="text-sm font-medium">
-          Gallery Preview - <span className="capitalize">{activeLayout}</span> Layout
-        </h3>
+        <div className={`flex items-center gap-3 ${brandFlexClass}`}>
+          {showLogo && (
+            resolvedLogoUrl ? (
+              <img
+                src={resolvedLogoUrl}
+                alt={brandName}
+                className="h-8 w-auto object-contain"
+              />
+            ) : (
+              <div className="h-8 w-8 rounded-full bg-neutral-200 flex items-center justify-center">
+                <Camera className="w-4 h-4 text-neutral-500" />
+              </div>
+            )
+          )}
+          {showText && (
+            <div>
+              <p className="text-sm font-semibold leading-tight">{brandName}</p>
+              {brandTagline && (
+                <p className="text-xs text-neutral-500 leading-tight">{brandTagline}</p>
+              )}
+            </div>
+          )}
+          {!showLogo && !showText && (
+            <p className="text-sm font-semibold">{brandName}</p>
+          )}
+        </div>
+        <div className="text-xs text-neutral-500 flex justify-between">
+          <span>Gallery preview</span>
+          <span className="capitalize">{activeLayout} layout</span>
+        </div>
       </div>
       
       {/* Preview Content */}
@@ -181,4 +236,4 @@ export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
   );
 };
 
-GalleryPreview.displayName = 'GalleryPreview';
+GalleryPreview.displayName = 'GalleryPreview';

frontend/src/components/admin/ImageProtectionSettings.tsx

@@ -1,341 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Shield, Eye, Lock, AlertTriangle, Info } from 'lucide-react';
-import { Button, Card, Toggle, Select, Input, Textarea } from '../common';
-import { settingsService } from '../../services/settings.service';
-import { toast } from 'react-toastify';
-
-interface ProtectionSettings {
-  default_protection_level: 'basic' | 'standard' | 'enhanced' | 'maximum';
-  default_image_quality: number;
-  enable_devtools_protection: boolean;
-  max_image_requests_per_minute: number;
-  suspicious_activity_threshold: number;
-  enable_canvas_rendering: boolean;
-  default_fragmentation_level: number;
-  enable_overlay_protection: boolean;
-  protection_warning_message: string;
-}
-
-export const ImageProtectionSettings: React.FC = () => {
-  const { t } = useTranslation();
-  const [settings, setSettings] = useState<ProtectionSettings>({
-    default_protection_level: 'standard',
-    default_image_quality: 85,
-    enable_devtools_protection: true,
-    max_image_requests_per_minute: 30,
-    suspicious_activity_threshold: 10,
-    enable_canvas_rendering: false,
-    default_fragmentation_level: 3,
-    enable_overlay_protection: true,
-    protection_warning_message: 'Images in this gallery are protected from unauthorized download.'
-  });
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSaving, setIsSaving] = useState(false);
-
-  useEffect(() => {
-    loadSettings();
-  }, []);
-
-  const loadSettings = async () => {
-    try {
-      setIsLoading(true);
-      const response = await settingsService.getSettings();
-      
-      // Map settings from API response
-      const protectionSettings: ProtectionSettings = {
-        default_protection_level: response.default_protection_level || 'standard',
-        default_image_quality: parseInt(response.default_image_quality) || 85,
-        enable_devtools_protection: response.enable_devtools_protection !== false,
-        max_image_requests_per_minute: parseInt(response.max_image_requests_per_minute) || 30,
-        suspicious_activity_threshold: parseInt(response.suspicious_activity_threshold) || 10,
-        enable_canvas_rendering: response.enable_canvas_rendering === true,
-        default_fragmentation_level: parseInt(response.default_fragmentation_level) || 3,
-        enable_overlay_protection: response.enable_overlay_protection !== false,
-        protection_warning_message: response.protection_warning_message || settings.protection_warning_message
-      };
-      
-      setSettings(protectionSettings);
-    } catch (error) {
-      console.error('Failed to load protection settings:', error);
-      toast.error('Failed to load protection settings');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const saveSettings = async () => {
-    try {
-      setIsSaving(true);
-      
-      // Convert settings to API format
-      const apiSettings = Object.entries(settings).reduce((acc, [key, value]) => {
-        acc[key] = typeof value === 'boolean' ? value : value.toString();
-        return acc;
-      }, {} as Record<string, string | boolean>);
-      
-      await settingsService.updateSettings(apiSettings);
-      toast.success('Protection settings saved successfully');
-    } catch (error) {
-      console.error('Failed to save protection settings:', error);
-      toast.error('Failed to save protection settings');
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const updateSetting = (key: keyof ProtectionSettings, value: any) => {
-    setSettings(prev => ({ ...prev, [key]: value }));
-  };
-
-  const protectionLevels = [
-    { value: 'basic', label: 'Basic - Minimal protection, best performance' },
-    { value: 'standard', label: 'Standard - Balanced protection and performance' },
-    { value: 'enhanced', label: 'Enhanced - Strong protection with good performance' },
-    { value: 'maximum', label: 'Maximum - Strongest protection, may impact performance' }
-  ];
-
-  const getProtectionLevelIcon = (level: string) => {
-    switch (level) {
-      case 'basic': return <Eye className="w-4 h-4 text-green-500" />;
-      case 'standard': return <Shield className="w-4 h-4 text-blue-500" />;
-      case 'enhanced': return <Lock className="w-4 h-4 text-orange-500" />;
-      case 'maximum': return <AlertTriangle className="w-4 h-4 text-red-500" />;
-      default: return <Shield className="w-4 h-4 text-gray-500" />;
-    }
-  };
-
-  const getProtectionLevelDescription = (level: string) => {
-    switch (level) {
-      case 'basic':
-        return 'Prevents drag/drop and basic right-click. Good for public galleries.';
-      case 'standard':
-        return 'Adds keyboard shortcut blocking and user selection prevention.';
-      case 'enhanced':
-        return 'Includes DevTools detection, rate limiting, and overlay protection.';
-      case 'maximum':
-        return 'Canvas rendering, image fragmentation, and comprehensive monitoring.';
-      default:
-        return '';
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <Card className="p-6">
-        <div className="animate-pulse space-y-4">
-          <div className="h-8 bg-gray-200 rounded"></div>
-          <div className="space-y-3">
-            <div className="h-4 bg-gray-200 rounded"></div>
-            <div className="h-4 bg-gray-200 rounded w-3/4"></div>
-          </div>
-        </div>
-      </Card>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      <Card className="p-6">
-        <div className="flex items-center gap-3 mb-6">
-          <Shield className="w-6 h-6 text-blue-500" />
-          <div>
-            <h2 className="text-xl font-semibold text-gray-900">Image Protection Settings</h2>
-            <p className="text-sm text-gray-600">Configure security measures for photo galleries</p>
-          </div>
-        </div>
-
-        <div className="space-y-6">
-          {/* Protection Level */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Default Protection Level
-            </label>
-            <Select
-              value={settings.default_protection_level}
-              onChange={(value) => updateSetting('default_protection_level', value as any)}
-              options={protectionLevels}
-              className="w-full"
-            />
-            <div className="mt-2 p-3 bg-gray-50 rounded-lg border border-gray-200">
-              <div className="flex items-center gap-2 mb-1">
-                {getProtectionLevelIcon(settings.default_protection_level)}
-                <span className="font-medium text-sm capitalize">
-                  {settings.default_protection_level} Protection
-                </span>
-              </div>
-              <p className="text-sm text-gray-600">
-                {getProtectionLevelDescription(settings.default_protection_level)}
-              </p>
-            </div>
-          </div>
-
-          {/* Image Quality */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Default Image Quality ({settings.default_image_quality}%)
-            </label>
-            <input
-              type="range"
-              min="30"
-              max="100"
-              step="5"
-              value={settings.default_image_quality}
-              onChange={(e) => updateSetting('default_image_quality', parseInt(e.target.value))}
-              className="w-full"
-            />
-            <div className="flex justify-between text-xs text-gray-500 mt-1">
-              <span>Lower quality = Better protection</span>
-              <span>Higher quality = Better image</span>
-            </div>
-          </div>
-
-          {/* DevTools Protection */}
-          <div className="flex items-center justify-between">
-            <div>
-              <label className="block text-sm font-medium text-gray-700">
-                DevTools Protection
-              </label>
-              <p className="text-xs text-gray-500">
-                Detect and respond to browser developer tools
-              </p>
-            </div>
-            <Toggle
-              checked={settings.enable_devtools_protection}
-              onChange={(checked) => updateSetting('enable_devtools_protection', checked)}
-            />
-          </div>
-
-          {/* Canvas Rendering */}
-          <div className="flex items-center justify-between">
-            <div>
-              <label className="block text-sm font-medium text-gray-700">
-                Canvas Rendering
-              </label>
-              <p className="text-xs text-gray-500">
-                Render images on canvas instead of img tags (stronger protection)
-              </p>
-            </div>
-            <Toggle
-              checked={settings.enable_canvas_rendering}
-              onChange={(checked) => updateSetting('enable_canvas_rendering', checked)}
-            />
-          </div>
-
-          {/* Fragmentation Level */}
-          {settings.enable_canvas_rendering && (
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Image Fragmentation Level ({settings.default_fragmentation_level})
-              </label>
-              <input
-                type="range"
-                min="1"
-                max="5"
-                step="1"
-                value={settings.default_fragmentation_level}
-                onChange={(e) => updateSetting('default_fragmentation_level', parseInt(e.target.value))}
-                className="w-full"
-              />
-              <div className="flex justify-between text-xs text-gray-500 mt-1">
-                <span>Low fragmentation</span>
-                <span>High fragmentation</span>
-              </div>
-            </div>
-          )}
-
-          {/* Rate Limiting */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Max Requests Per Minute
-              </label>
-              <Input
-                type="number"
-                min="5"
-                max="100"
-                value={settings.max_image_requests_per_minute}
-                onChange={(e) => updateSetting('max_image_requests_per_minute', parseInt(e.target.value))}
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Suspicious Activity Threshold
-              </label>
-              <Input
-                type="number"
-                min="3"
-                max="50"
-                value={settings.suspicious_activity_threshold}
-                onChange={(e) => updateSetting('suspicious_activity_threshold', parseInt(e.target.value))}
-              />
-            </div>
-          </div>
-
-          {/* Overlay Protection */}
-          <div className="flex items-center justify-between">
-            <div>
-              <label className="block text-sm font-medium text-gray-700">
-                Overlay Protection
-              </label>
-              <p className="text-xs text-gray-500">
-                Add transparent overlays to prevent easy screenshot extraction
-              </p>
-            </div>
-            <Toggle
-              checked={settings.enable_overlay_protection}
-              onChange={(checked) => updateSetting('enable_overlay_protection', checked)}
-            />
-          </div>
-
-          {/* Warning Message */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Protection Warning Message
-            </label>
-            <Textarea
-              value={settings.protection_warning_message}
-              onChange={(e) => updateSetting('protection_warning_message', e.target.value)}
-              placeholder="Message shown when protection is triggered"
-              rows={3}
-            />
-          </div>
-        </div>
-
-        {/* Warning Box */}
-        <div className="mt-6 p-4 bg-amber-50 border border-amber-200 rounded-lg">
-          <div className="flex items-start gap-3">
-            <Info className="w-5 h-5 text-amber-600 mt-0.5" />
-            <div>
-              <h4 className="font-medium text-amber-800 mb-1">Important Notes</h4>
-              <ul className="text-sm text-amber-700 space-y-1">
-                <li>• Higher protection levels may impact page performance</li>
-                <li>• Canvas rendering disables browser image caching</li>
-                <li>• Maximum protection may cause accessibility issues</li>
-                <li>• Test thoroughly with your target browsers</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-
-        {/* Action Buttons */}
-        <div className="mt-6 flex justify-end gap-3">
-          <Button
-            variant="outline"
-            onClick={loadSettings}
-            disabled={isSaving}
-          >
-            Reset
-          </Button>
-          <Button
-            variant="primary"
-            onClick={saveSettings}
-            loading={isSaving}
-          >
-            Save Settings
-          </Button>
-        </div>
-      </Card>
-    </div>
-  );
-};

frontend/src/components/admin/PhotoUpload.tsx

@@ -94,7 +94,7 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
         }
 
         try {
-          const response = await api.post(`/admin/events/${eventId}/upload`, formData, {
+          await api.post(`/admin/events/${eventId}/upload`, formData, {
             onUploadProgress: (progressEvent) => {
               if (progressEvent.total) {
                 // Calculate overall progress across all chunks
@@ -276,4 +276,4 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
   );
 };
 
-PhotoUpload.displayName = 'PhotoUpload';
+PhotoUpload.displayName = 'PhotoUpload';

frontend/src/components/admin/RestoreWizard.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentType } from 'react';
+
+export const RestoreWizard: ComponentType<any>;

frontend/src/components/admin/WelcomeMessageEditor.tsx

@@ -37,8 +37,8 @@ export const WelcomeMessageEditor: React.FC<WelcomeMessageEditorProps> = ({
           rows={rows}
           className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors resize-none font-mono text-sm"
         />
-        <div className="absolute top-2 right-2 text-neutral-400">
-          <HelpCircle className="w-4 h-4" title="Line breaks will be preserved in emails" />
+        <div className="absolute top-2 right-2 text-neutral-400" title="Line breaks will be preserved in emails">
+          <HelpCircle className="w-4 h-4" aria-hidden="true" />
         </div>
       </div>
       
@@ -61,4 +61,4 @@ export const WelcomeMessageEditor: React.FC<WelcomeMessageEditorProps> = ({
   );
 };
 
-WelcomeMessageEditor.displayName = 'WelcomeMessageEditor';
+WelcomeMessageEditor.displayName = 'WelcomeMessageEditor';

frontend/src/components/common/AuthenticatedImage.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { getAuthToken } from '../../config/api';
 import { buildResourceUrl } from '../../utils/url';
 
 interface AuthenticatedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
@@ -7,6 +6,23 @@ interface AuthenticatedImageProps extends React.ImgHTMLAttributes<HTMLImageEleme
   fallbackSrc?: string;
   useWatermark?: boolean;
   isGallery?: boolean;
+  protectFromDownload?: boolean;
+  slug?: string;
+  photoId?: number;
+  requiresToken?: boolean;
+  secureUrlTemplate?: string;
+  downloadUrlTemplate?: string;
+  onProtectionViolation?: (violationType: string) => void;
+  watermarkText?: string;
+  overlayProtection?: boolean;
+  fragmentGrid?: boolean;
+  scrambleFragments?: boolean;
+  useCanvasRendering?: boolean;
+  blockKeyboardShortcuts?: boolean;
+  detectPrintScreen?: boolean;
+  detectDevTools?: boolean;
+  protectionLevel?: 'basic' | 'standard' | 'enhanced' | 'maximum';
+  useEnhancedProtection?: boolean;
 }
 
 export const AuthenticatedImage: React.FC<AuthenticatedImageProps> = ({
@@ -15,8 +31,46 @@ export const AuthenticatedImage: React.FC<AuthenticatedImageProps> = ({
   alt,
   useWatermark = false,
   isGallery = false,
+  protectFromDownload,
+  slug,
+  photoId,
+  requiresToken,
+  secureUrlTemplate,
+  downloadUrlTemplate,
+  onProtectionViolation,
+  watermarkText,
+  overlayProtection,
+  fragmentGrid,
+  scrambleFragments,
+  useCanvasRendering,
+  blockKeyboardShortcuts,
+  detectPrintScreen,
+  detectDevTools,
+  protectionLevel,
+  useEnhancedProtection,
   ...props
 }) => {
+  const unusedProps = {
+    protectFromDownload,
+    slug,
+    photoId,
+    requiresToken,
+    secureUrlTemplate,
+    downloadUrlTemplate,
+    onProtectionViolation,
+    watermarkText,
+    overlayProtection,
+    fragmentGrid,
+    scrambleFragments,
+    useCanvasRendering,
+    blockKeyboardShortcuts,
+    detectPrintScreen,
+    detectDevTools,
+    protectionLevel,
+    useEnhancedProtection
+  };
+  void unusedProps;
+
   const [imageSrc, setImageSrc] = useState<string>('');
   const [error, setError] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
@@ -25,33 +79,12 @@ export const AuthenticatedImage: React.FC<AuthenticatedImageProps> = ({
     let objectUrl: string | null = null;
 
     // Determine which token to use based on context
-    let token: string | undefined;
-    
-    if (isGallery) {
-      // For gallery images, get the gallery-specific token
-      const pathParts = window.location.pathname.split('/');
-      if (pathParts[1] === 'gallery' && pathParts[2]) {
-        const gallerySlug = pathParts[2];
-        token = localStorage.getItem(`gallery_token_${gallerySlug}`) || undefined;
-      }
-    } else {
-      // For admin images, use the admin token
-      token = getAuthToken(true);
-    }
-    
     if (!src) {
       setImageSrc(fallbackSrc || '');
       setIsLoading(false);
       return;
     }
 
-    if (!token) {
-      // No auth token - use fallback
-      setImageSrc(fallbackSrc || '');
-      setIsLoading(false);
-      return;
-    }
-
     setIsLoading(true);
     setError(false);
 
@@ -71,9 +104,7 @@ export const AuthenticatedImage: React.FC<AuthenticatedImageProps> = ({
         
         // Fetch authenticated image
         const response = await fetch(fullImageUrl, {
-          headers: {
-            'Authorization': `Bearer ${token}`
-          }
+          credentials: 'include'
         });
 
         if (!response.ok) {
@@ -119,4 +150,4 @@ export const AuthenticatedImage: React.FC<AuthenticatedImageProps> = ({
   }
 
   return <img src={imageSrc} alt={alt} {...props} />;
-};
+};

frontend/src/components/common/PasswordGenerator.tsx

@@ -183,7 +183,7 @@ export const PasswordGenerator: React.FC<PasswordGeneratorProps> = ({
                       <Button
                         type="button"
                         variant="outline"
-                        size="xs"
+                        size="sm"
                         onClick={() => selectPassword(password)}
                       >
                         {t('passwordGenerator.use')}
@@ -206,4 +206,4 @@ export const PasswordGenerator: React.FC<PasswordGeneratorProps> = ({
   );
 };
 
-export default PasswordGenerator;
+export default PasswordGenerator;

frontend/src/components/common/ProtectedImage.tsx

@@ -1,6 +1,12 @@
 import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { ProtectionLevel } from '../../hooks/useImageProtection';
 
+type VendorStyle = CSSStyleDeclaration & {
+  webkitUserSelect?: string;
+  webkitTouchCallout?: string;
+  webkitUserDrag?: string;
+};
+
 interface ProtectedImageProps extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
   src: string;
   alt: string;
@@ -31,7 +37,6 @@ export const ProtectedImage: React.FC<ProtectedImageProps> = ({
 }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const imageRef = useRef<HTMLImageElement | null>(null);
-  const overlayCanvasRef = useRef<HTMLCanvasElement | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(false);
 
@@ -201,9 +206,6 @@ export const ProtectedImage: React.FC<ProtectedImageProps> = ({
         // Render normal image - ensure image is valid before drawing
         if (img.naturalWidth > 0 && img.naturalHeight > 0) {
           ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-          
-          // Verify the image was drawn by checking a pixel
-          const pixelData = ctx.getImageData(10, 10, 1, 1).data;
         }
       }
       
@@ -288,11 +290,12 @@ export const ProtectedImage: React.FC<ProtectedImageProps> = ({
     }
     
     // Apply CSS protection
-    canvas.style.userSelect = 'none';
-    canvas.style.webkitUserSelect = 'none';
-    canvas.style.webkitTouchCallout = 'none';
-    canvas.style.webkitUserDrag = 'none';
-    canvas.style.pointerEvents = protectionLevel === 'maximum' ? 'none' : 'auto';
+    const canvasStyle = canvas.style as VendorStyle;
+    canvasStyle.userSelect = 'none';
+    canvasStyle.webkitUserSelect = 'none';
+    canvasStyle.webkitTouchCallout = 'none';
+    canvasStyle.webkitUserDrag = 'none';
+    canvasStyle.pointerEvents = protectionLevel === 'maximum' ? 'none' : 'auto';
     
     return () => {
       canvas.removeEventListener('contextmenu', handleContextMenu);
@@ -402,4 +405,4 @@ export const ProtectedImage: React.FC<ProtectedImageProps> = ({
       }}
     />
   );
-};
+};

frontend/src/components/common/ProtectionWarning.tsx

@@ -102,7 +102,7 @@ export const ProtectionWarning: React.FC<ProtectionWarningProps> = ({
         />
       )}
       
-      <style jsx>{`
+      <style>{`
         @keyframes shrink {
           from { width: 100%; }
           to { width: 0%; }
@@ -110,4 +110,4 @@ export const ProtectionWarning: React.FC<ProtectionWarningProps> = ({
       `}</style>
     </div>
   );
-};
+};

frontend/src/components/gallery/GalleryFilter.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import { Heart, Star, MessageSquare } from 'lucide-react';
+import { Heart, Star, MessageSquare, Bookmark } from 'lucide-react';
 import { Button } from '../common';
 import { useTranslation } from 'react-i18next';
 
-export type FilterType = 'all' | 'liked' | 'rated' | 'commented';
+export type FilterType = 'all' | 'liked' | 'favorited' | 'rated' | 'commented';
 
 interface GalleryFilterProps {
   currentFilter: FilterType;
   onFilterChange: (filter: FilterType) => void;
   feedbackEnabled: boolean;
   likeCount?: number;
+  favoriteCount?: number;
   ratedCount?: number;
   className?: string;
   isMobile?: boolean;
@@ -21,6 +22,7 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
   onFilterChange,
   feedbackEnabled,
   likeCount = 0,
+  favoriteCount = 0,
   ratedCount = 0,
   className = '',
   isMobile = false,
@@ -59,6 +61,15 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
             >
               <Heart className="w-3.5 h-3.5" />
             </Button>
+            <Button
+              variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('favorited')}
+              className="p-1 w-8 h-8 flex items-center justify-center"
+              aria-label={t('gallery.favorited', 'Saved')}
+            >
+              <Bookmark className="w-3.5 h-3.5" />
+            </Button>
             <Button
               variant={currentFilter === 'rated' ? 'primary' : 'outline'}
               size="sm"
@@ -110,6 +121,16 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
               <Heart className="w-3 h-3" />
               <span>{likeCount > 0 ? likeCount : t('gallery.liked', 'Liked')}</span>
             </Button>
+
+            <Button
+              variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('favorited')}
+              className="text-xs flex-1 min-w-[80px] flex items-center justify-center gap-1"
+            >
+              <Bookmark className="w-3 h-3" />
+              <span>{favoriteCount > 0 ? favoriteCount : t('gallery.favorited', 'Saved')}</span>
+            </Button>
             
             <Button
               variant={currentFilter === 'rated' ? 'primary' : 'outline'}
@@ -152,6 +173,21 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
                 </span>
               )}
             </Button>
+
+            <Button
+              variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('favorited')}
+              className="text-xs sm:text-sm flex items-center gap-1"
+            >
+              <Bookmark className="w-3 h-3 sm:w-4 sm:h-4" />
+              <span className="hidden sm:inline">{t('gallery.favorited', 'Saved')}</span>
+              {favoriteCount > 0 && (
+                <span className="bg-primary-100 text-primary-700 px-1.5 rounded">
+                  {favoriteCount}
+                </span>
+              )}
+            </Button>
             
             <Button
               variant={currentFilter === 'rated' ? 'primary' : 'outline'}

frontend/src/components/gallery/GalleryLayout.tsx

@@ -35,7 +35,6 @@ interface GalleryLayoutProps {
   showDownloadAll?: boolean;
   onDownloadAll?: () => void;
   isDownloading?: boolean;
-  isExpired?: boolean;
   headerExtra?: React.ReactNode;
   menuButton?: React.ReactNode;
   children: React.ReactNode;
@@ -49,7 +48,6 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
   showDownloadAll = false,
   onDownloadAll,
   isDownloading = false,
-  isExpired = false,
   headerExtra,
   menuButton,
   children,
@@ -63,22 +61,28 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
   const headingFontFamily = theme.headingFontFamily || fontFamily;
   
   // Calculate logo size classes based on settings
-  const getLogoSizeClass = (context: 'header' | 'hero') => {
+  const getLogoDimensions = (context: 'header' | 'hero'): { className: string; style?: React.CSSProperties } => {
     const size = brandingSettings?.logo_size || 'medium';
     const maxHeight = brandingSettings?.logo_max_height || 48;
-    
+
     if (size === 'custom') {
-      return { maxHeight: `${maxHeight}px`, height: 'auto' };
+      return {
+        className: '',
+        style: { maxHeight: `${maxHeight}px`, height: 'auto' }
+      };
     }
-    
-    const sizeMap = {
+
+    const sizeMap: Record<'small' | 'medium' | 'large' | 'xlarge', string> = {
       small: context === 'header' ? 'h-6 sm:h-8' : 'h-12 sm:h-14 lg:h-16',
       medium: context === 'header' ? 'h-8 sm:h-10 lg:h-12' : 'h-16 sm:h-20 lg:h-24',
       large: context === 'header' ? 'h-10 sm:h-12 lg:h-16' : 'h-20 sm:h-24 lg:h-32',
       xlarge: context === 'header' ? 'h-12 sm:h-16 lg:h-20' : 'h-24 sm:h-32 lg:h-40'
     };
-    
-    return sizeMap[size] || sizeMap.medium;
+
+    return {
+      className: sizeMap[size as keyof typeof sizeMap] || sizeMap.medium,
+      style: undefined
+    };
   };
   
   // Determine logo position classes
@@ -108,6 +112,9 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
     const displayMode = brandingSettings?.logo_display_mode || 'logo_and_text';
     return displayMode !== 'logo_only';
   };
+
+  const headerLogoSize = getLogoDimensions('header');
+  const heroLogoSize = getLogoDimensions('hero');
   
   return (
     <div className="min-h-screen bg-neutral-50">
@@ -183,8 +190,8 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
                         '/picpeak-logo-transparent.png'
                       } 
                       alt={brandingSettings?.company_name || 'PicPeak'}
-                      className={`${typeof getLogoSizeClass('header') === 'string' ? getLogoSizeClass('header') : ''} w-auto object-contain`}
-                      style={typeof getLogoSizeClass('header') === 'object' ? getLogoSizeClass('header') : undefined}
+                      className={`${headerLogoSize.className} w-auto object-contain`}
+                      style={headerLogoSize.style}
                     />
                     {shouldShowCompanyName() && brandingSettings?.company_name && (
                       <span className="hidden sm:inline text-lg font-semibold text-neutral-900">
@@ -353,11 +360,11 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
                       '/picpeak-logo-transparent.png'
                     } 
                     alt={brandingSettings?.company_name || 'PicPeak'}
-                    className={`${typeof getLogoSizeClass('hero') === 'string' ? getLogoSizeClass('hero') : ''} w-auto object-contain mx-auto`}
-                    style={typeof getLogoSizeClass('hero') === 'object' ? 
-                      { ...getLogoSizeClass('hero'), filter: 'brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))' } : 
-                      { filter: 'brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))' }
-                    }
+                    className={`${heroLogoSize.className} w-auto object-contain mx-auto`}
+                    style={{
+                      ...(heroLogoSize.style || {}),
+                      filter: 'brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))'
+                    }}
                   />
                   {shouldShowCompanyName() && brandingSettings?.company_name && (
                     <div className="mt-3 text-xl sm:text-2xl font-semibold text-white/90" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)' }}>
@@ -460,4 +467,4 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
   );
 };
 
-GalleryLayout.displayName = 'GalleryLayout';
+GalleryLayout.displayName = 'GalleryLayout';

frontend/src/components/gallery/GallerySidebar.tsx

@@ -21,7 +21,6 @@ interface GallerySidebarProps {
   onDownloadAll: () => void;
   onDownloadSelected: () => void;
   isDownloading: boolean;
-  isExpired?: boolean;
   allowDownloads?: boolean;
   photoCounts?: Record<number, number>;
   totalPhotos: number;
@@ -33,6 +32,7 @@ interface GallerySidebarProps {
   filterType?: FilterType;
   onFilterChange?: (filter: FilterType) => void;
   likeCount?: number;
+  favoriteCount?: number;
   ratedCount?: number;
 }
 
@@ -52,7 +52,6 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
   onDownloadAll,
   onDownloadSelected,
   isDownloading,
-  isExpired = false,
   allowDownloads = true,
   photoCounts = {},
   totalPhotos,
@@ -64,6 +63,7 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
   filterType = 'all',
   onFilterChange,
   likeCount = 0,
+  favoriteCount = 0,
   ratedCount = 0
 }) => {
   const { t } = useTranslation();
@@ -223,6 +223,7 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
                 }}
                 feedbackEnabled={feedbackEnabled}
                 likeCount={likeCount}
+                favoriteCount={favoriteCount}
                 ratedCount={ratedCount}
                 className="w-full"
                 variant="compact"

frontend/src/components/gallery/GalleryView.tsx

@@ -20,7 +20,6 @@ import { GALLERY_THEME_PRESETS } from '../../types/theme.types';
 import { api } from '../../config/api';
 import { Upload, Menu } from 'lucide-react';
 import { galleryService } from '../../services/gallery.service';
-import { feedbackService } from '../../services/feedback.service';
 import { useWatermarkSettings } from '../../hooks/useWatermarkSettings';
 import type { Photo } from '../../types';
 
@@ -271,6 +270,9 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
       case 'liked':
         photos = photos.filter(photo => (photo.like_count || 0) > 0);
         break;
+      case 'favorited':
+        photos = photos.filter(photo => (photo.favorite_count || 0) > 0);
+        break;
       case 'rated':
         photos = photos.filter(photo => (photo.average_rating || 0) > 0 || (photo.total_ratings || 0) > 0);
         break;
@@ -315,6 +317,21 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
     return photos;
   }, [data?.photos, selectedCategoryId, searchTerm, sortBy, watermarkEnabled, slug, filterType]);
 
+  const likeCount = useMemo(
+    () => data?.photos?.filter(p => (p.like_count ?? 0) > 0).length || 0,
+    [data?.photos]
+  );
+
+  const favoriteCount = useMemo(
+    () => data?.photos?.filter(p => (p.favorite_count ?? 0) > 0).length || 0,
+    [data?.photos]
+  );
+
+  const ratedCount = useMemo(
+    () => data?.photos?.filter(p => (p.total_ratings || 0) > 0 || (p.average_rating || 0) > 0).length || 0,
+    [data?.photos]
+  );
+
   // Check if downloads are allowed (both event setting and not expired)
   const allowDownloads = !isExpired && (data?.event?.allow_downloads === true);
 
@@ -462,7 +479,6 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
           onDownloadAll={handleDownloadAll}
           onDownloadSelected={handleDownloadSelected}
           isDownloading={downloadAllMutation.isPending}
-          isExpired={isExpired}
           allowDownloads={allowDownloads}
           photoCounts={photoCounts}
           totalPhotos={data?.photos.length || 0}
@@ -473,8 +489,9 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
           feedbackEnabled={feedbackEnabled}
           filterType={filterType}
           onFilterChange={setFilterType}
-          likeCount={data?.photos?.filter(p => p.like_count > 0).length || 0}
-          ratedCount={data?.photos?.filter(p => (p.total_ratings || 0) > 0).length || 0}
+          likeCount={likeCount}
+          favoriteCount={favoriteCount}
+          ratedCount={ratedCount}
         />
       ) : null}
 
@@ -486,7 +503,6 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
         showDownloadAll={!showSidebar && allowDownloads}
         onDownloadAll={handleDownloadAll}
         isDownloading={downloadAllMutation.isPending}
-        isExpired={isExpired}
         menuButton={showSidebar ? (
           <Button
             variant="ghost"

frontend/src/components/gallery/PhotoComments.tsx

@@ -147,7 +147,6 @@ export const PhotoComments: React.FC<PhotoCommentsProps> = ({
                 value={guestName}
                 onChange={(e) => setGuestName(e.target.value)}
                 error={errors.guest_name}
-                size="sm"
               />
               <Input
                 type="email"
@@ -155,7 +154,6 @@ export const PhotoComments: React.FC<PhotoCommentsProps> = ({
                 value={guestEmail}
                 onChange={(e) => setGuestEmail(e.target.value)}
                 error={errors.guest_email}
-                size="sm"
               />
             </div>
           )}
@@ -247,4 +245,4 @@ export const PhotoComments: React.FC<PhotoCommentsProps> = ({
       )}
     </div>
   );
-};
+};

frontend/src/components/gallery/PhotoFavorites.tsx

@@ -73,7 +73,10 @@ export const PhotoFavorites: React.FC<PhotoFavoritesProps> = ({
     if (requireNameEmail && !savedIdentity) {
       setShowIdentityModal(true);
     } else {
-      submitFavoriteMutation.mutate(savedIdentity || {});
+      const identityPayload = savedIdentity
+        ? { guest_name: savedIdentity.name, guest_email: savedIdentity.email }
+        : {};
+      submitFavoriteMutation.mutate(identityPayload);
     }
   };
 
@@ -116,4 +119,4 @@ export const PhotoFavorites: React.FC<PhotoFavoritesProps> = ({
       />
     </>
   );
-};
+};

frontend/src/components/gallery/PhotoFeedback.tsx

@@ -3,9 +3,9 @@ import { useQuery } from '@tanstack/react-query';
 import { feedbackService } from '../../services/feedback.service';
 import { PhotoRating } from './PhotoRating';
 import { PhotoLikes } from './PhotoLikes';
+import { PhotoFavorites } from './PhotoFavorites';
 import { PhotoComments } from './PhotoComments';
 import { Skeleton } from '../common';
-import type { FeedbackSettings } from '../../services/feedback.service';
 
 interface PhotoFeedbackProps {
   photoId: string;
@@ -33,7 +33,7 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
   });
 
   // Fetch feedback data for the photo
-  const { data: feedbackData, isLoading: feedbackLoading } = useQuery({
+  const { data: feedbackData } = useQuery({
     queryKey: ['photo-feedback', gallerySlug, photoId],
     queryFn: () => feedbackService.getPhotoFeedback(gallerySlug, photoId),
     enabled: !!settings?.feedback_enabled,
@@ -43,13 +43,17 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
   const [currentRating, setCurrentRating] = useState(0);
   const [isLiked, setIsLiked] = useState(false);
   const [likeCount, setLikeCount] = useState(0);
+  const [isFavorited, setIsFavorited] = useState(false);
+  const [favoriteCount, setFavoriteCount] = useState(0);
 
   // Update local state when data loads
   useEffect(() => {
     if (feedbackData) {
       setCurrentRating(feedbackData.my_feedback.rating || 0);
-      setIsLiked(feedbackData.my_feedback.liked);
-      setLikeCount(feedbackData.summary.like_count);
+      setIsLiked(Boolean(feedbackData.my_feedback.liked));
+      setLikeCount(Number(feedbackData.summary.like_count) || 0);
+      setIsFavorited(Boolean(feedbackData.my_feedback.favorited));
+      setFavoriteCount(Number(feedbackData.summary.favorite_count) || 0);
     }
   }, [feedbackData]);
 
@@ -65,6 +69,12 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
     if (onFeedbackUpdate) onFeedbackUpdate();
   };
 
+  const handleFavoriteChange = (favorited: boolean) => {
+    setIsFavorited(favorited);
+    setFavoriteCount(prev => favorited ? prev + 1 : Math.max(0, prev - 1));
+    if (onFeedbackUpdate) onFeedbackUpdate();
+  };
+
   if (settingsLoading) {
     return (
       <div className={`space-y-3 ${className}`}>
@@ -78,8 +88,8 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
     return null;
   }
 
-  const hasAnyFeedbackType = settings.allow_ratings || settings.allow_likes || 
-                            settings.allow_comments;
+  const hasAnyFeedbackType = settings.allow_ratings || settings.allow_likes ||
+                            settings.allow_comments || settings.allow_favorites;
 
   if (!hasAnyFeedbackType) {
     return null;
@@ -102,8 +112,8 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
       )}
 
       {/* Action Buttons */}
-      {settings.allow_likes && (
-        <div className="flex items-center gap-2">
+      {(settings.allow_likes || settings.allow_favorites) && (
+        <div className="flex flex-wrap items-center gap-2">
           {settings.allow_likes && (
             <PhotoLikes
               photoId={photoId}
@@ -115,6 +125,18 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
               onLikeChange={handleLikeChange}
             />
           )}
+
+          {settings.allow_favorites && (
+            <PhotoFavorites
+              photoId={photoId}
+              gallerySlug={gallerySlug}
+              isFavorited={isFavorited}
+              favoriteCount={favoriteCount}
+              isEnabled={true}
+              requireNameEmail={settings.require_name_email || false}
+              onFavoriteChange={handleFavoriteChange}
+            />
+          )}
         </div>
       )}
 

frontend/src/components/gallery/PhotoFilterBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Search, SortAsc, Grid, Heart, Star, MessageSquare } from 'lucide-react';
+import { Search, SortAsc, Grid, Heart, Star, MessageSquare, Bookmark } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button, Input } from '../common';
 import type { FilterType } from './GalleryFilter';
@@ -50,7 +50,6 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
 }) => {
   const { t } = useTranslation();
   const [showSortMenu, setShowSortMenu] = useState(false);
-
   return (
     <div className="space-y-4">
       {/* Search and Sort */}
@@ -195,6 +194,15 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
                   >
                     <Heart className="w-3.5 h-3.5" />
                   </Button>
+                  <Button
+                    variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+                    size="sm"
+                    onClick={() => onFilterChange('favorited')}
+                    className="p-1 w-8 h-8 flex items-center justify-center"
+                    aria-label={t('gallery.favorited', 'Saved')}
+                  >
+                    <Bookmark className="w-3.5 h-3.5" />
+                  </Button>
                   <Button
                     variant={currentFilter === 'rated' ? 'primary' : 'outline'}
                     size="sm"
@@ -248,6 +256,15 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
               >
                 <Heart className="w-3.5 h-3.5" />
               </Button>
+              <Button
+                variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+                size="sm"
+                onClick={() => onFilterChange('favorited')}
+                className="p-1 w-8 h-8 flex items-center justify-center"
+                aria-label={t('gallery.favorited', 'Saved')}
+              >
+                <Bookmark className="w-3.5 h-3.5" />
+              </Button>
               <Button
                 variant={currentFilter === 'rated' ? 'primary' : 'outline'}
                 size="sm"

frontend/src/components/gallery/PhotoGrid.tsx

@@ -100,7 +100,7 @@ export const PhotoGrid: React.FC<PhotoGridProps> = ({
 
     try {
       await galleryService.downloadSelectedPhotos(slug, ids);
-      analyticsService.trackGalleryEvent('bulk_download_selected', { gallery: slug, photo_count: ids.length });
+      analyticsService.trackGalleryEvent('bulk_download', { gallery: slug, photo_count: ids.length });
     } catch (error) {
       toastify.error(t('gallery.downloadError'));
     } finally {
@@ -191,6 +191,7 @@ export const PhotoGrid: React.FC<PhotoGridProps> = ({
             protectionLevel={protectionLevel}
             useEnhancedProtection={useEnhancedProtection}
             slug={slug}
+            feedbackEnabled={feedbackEnabled}
           />
         ))}
       </div>
@@ -222,6 +223,7 @@ interface PhotoThumbnailProps {
   protectionLevel?: 'basic' | 'standard' | 'enhanced' | 'maximum';
   useEnhancedProtection?: boolean;
   slug: string; // Add slug as required prop
+  feedbackEnabled?: boolean;
 }
 
 const PhotoThumbnail: React.FC<PhotoThumbnailProps> = ({
@@ -233,7 +235,8 @@ const PhotoThumbnail: React.FC<PhotoThumbnailProps> = ({
   allowDownloads = true,
   protectionLevel = 'standard',
   useEnhancedProtection = false,
-  slug
+  slug,
+  feedbackEnabled = false
 }) => {
   const { ref, inView } = useInView({
     triggerOnce: true,
@@ -280,18 +283,18 @@ const PhotoThumbnail: React.FC<PhotoThumbnailProps> = ({
           />
           
           {/* Feedback Indicators */}
-          {feedbackEnabled && (photo.has_feedback || photo.average_rating > 0 || photo.comment_count > 0) && (
+          {feedbackEnabled && (photo.has_feedback || (photo.average_rating ?? 0) > 0 || (photo.comment_count ?? 0) > 0) && (
             <div className="absolute top-2 left-2 flex gap-1 z-10">
-              {photo.comment_count > 0 && (
-                <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.comment_count} comments`}>
+              {(photo.comment_count ?? 0) > 0 && (
+                <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.comment_count ?? 0} comments`}>
                   <MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" />
-                  <span className="text-xs font-medium text-neutral-700">{photo.comment_count}</span>
+                  <span className="text-xs font-medium text-neutral-700">{photo.comment_count ?? 0}</span>
                 </div>
               )}
-              {photo.average_rating > 0 && (
-                <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`Rating: ${Number(photo.average_rating).toFixed(1)}`}>
+              {(photo.average_rating ?? 0) > 0 && (
+                <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`Rating: ${Number(photo.average_rating ?? 0).toFixed(1)}`}>
                   <Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
-                  <span className="text-xs font-medium text-neutral-700">{Number(photo.average_rating).toFixed(1)}</span>
+                  <span className="text-xs font-medium text-neutral-700">{Number(photo.average_rating ?? 0).toFixed(1)}</span>
                 </div>
               )}
             </div>

frontend/src/components/gallery/PhotoGridWithLayouts.tsx

@@ -148,7 +148,7 @@ export const PhotoGridWithLayouts: React.FC<PhotoGridWithLayoutsProps> = ({
 
     try {
       await galleryService.downloadSelectedPhotos(slug, ids);
-      analyticsService.trackGalleryEvent('bulk_download_selected', { gallery: slug, photo_count: ids.length });
+      analyticsService.trackGalleryEvent('bulk_download', { gallery: slug, photo_count: ids.length });
     } catch (error) {
       toastify.error(t('gallery.downloadError'));
     } finally {

frontend/src/components/gallery/PhotoLightbox.tsx

@@ -311,13 +311,17 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
     `fixed inset-0 bg-black z-50 flex items-center justify-center protected-image protection-${protectionLevel}` :
     'fixed inset-0 bg-black z-50 flex items-center justify-center';
 
+  const desktopFeedbackWidth = 416; // 26rem; keep in sync with panel width
+  const isDesktopFeedback = showFeedback && !isSmallScreen;
+
   return (
     <div className={lightboxClass}>
       {/* Close button */}
       <button
         onClick={onClose}
-        className="absolute top-4 right-4 p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors z-20"
+        className="absolute top-4 p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors z-30"
         aria-label="Close"
+        style={{ right: isDesktopFeedback ? `${desktopFeedbackWidth + 16}px` : '1rem' }}
       >
         <X className="w-6 h-6 text-white" />
       </button>
@@ -336,14 +340,17 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
           onClick={goToNext}
           className="absolute top-1/2 -translate-y-1/2 p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors z-30"
           aria-label="Next photo"
-          style={{ right: showFeedback && !isSmallScreen ? '26rem' : '1rem' }}
+          style={{ right: isDesktopFeedback ? `${desktopFeedbackWidth + 16}px` : '1rem' }}
         >
           <ChevronRight className="w-6 h-6 text-white" />
         </button>
       ) : null}
 
       {/* Bottom toolbar */}
-      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 z-20">
+      <div
+        className="absolute bottom-0 left-0 bg-gradient-to-t from-black/80 to-transparent p-4 z-20"
+        style={{ right: isDesktopFeedback ? `${desktopFeedbackWidth}px` : 0 }}
+      >
         <div className="max-w-4xl mx-auto flex items-center justify-between">
           <div className="text-white">
             <p className="text-sm opacity-75">
@@ -425,12 +432,12 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
                 }}
                 className="relative p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors"
                 aria-label="Toggle feedback"
-                title={`Photo feedback${currentPhoto.comment_count > 0 ? ` (${currentPhoto.comment_count} comments)` : ''}`}
+                title={`Photo feedback${(currentPhoto.comment_count ?? 0) > 0 ? ` (${currentPhoto.comment_count ?? 0} comments)` : ''}`}
               >
                 <MessageSquare className="w-5 h-5 text-white" />
-                {(currentPhoto.comment_count > 0 || currentPhoto.average_rating > 0) && (
+                {((currentPhoto.comment_count ?? 0) > 0 || (currentPhoto.average_rating ?? 0) > 0) && (
                   <span className="absolute -top-1 -right-1 bg-primary-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
-                    {currentPhoto.comment_count > 0 ? currentPhoto.comment_count : '★'}
+                    {(currentPhoto.comment_count ?? 0) > 0 ? currentPhoto.comment_count ?? 0 : '★'}
                   </span>
                 )}
               </button>
@@ -441,7 +448,7 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
 
       {/* Image container */}
       <div
-        className="absolute inset-0 flex items-center justify-center z-0"
+        className="absolute top-0 left-0 bottom-0 flex items-center justify-center z-0"
         onClick={handleImageClick}
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
@@ -450,7 +457,10 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
         onTouchStart={handleTouchStart}
         onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}
-        style={{ cursor: zoom > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default' }}
+        style={{
+          cursor: zoom > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default',
+          right: isDesktopFeedback ? `${desktopFeedbackWidth}px` : 0,
+        }}
       >
         <AuthenticatedImage
           src={currentPhoto.url}
@@ -506,7 +516,7 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
 
       {/* Feedback Panel */}
       {showFeedback && (
-        <div className="absolute right-0 top-0 bottom-0 w-full sm:w-96 lg:w-[28rem] bg-white shadow-xl z-20 overflow-y-auto">
+        <div className="absolute right-0 top-0 bottom-0 w-full sm:w-[26rem] bg-white shadow-xl z-20 overflow-y-auto flex flex-col border-l border-neutral-200">
           <div className="sticky top-0 bg-white border-b px-4 py-3 flex items-center justify-between">
             <h3 className="font-semibold text-neutral-900">Photo Feedback</h3>
             <button
@@ -517,9 +527,9 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
               <X className="w-5 h-5" />
             </button>
           </div>
-          <div className="p-4">
+          <div className="p-4 flex-1 overflow-y-auto">
             <PhotoFeedback
-              photoId={currentPhoto.id}
+              photoId={String(currentPhoto.id)}
               gallerySlug={slug}
               showComments={true}
               className="space-y-4"

frontend/src/components/gallery/PhotoLikes.tsx

@@ -73,7 +73,10 @@ export const PhotoLikes: React.FC<PhotoLikesProps> = ({
     if (requireNameEmail && !savedIdentity) {
       setShowIdentityModal(true);
     } else {
-      submitLikeMutation.mutate(savedIdentity || {});
+      const identityPayload = savedIdentity
+        ? { guest_name: savedIdentity.name, guest_email: savedIdentity.email }
+        : {};
+      submitLikeMutation.mutate(identityPayload);
     }
   };
 
@@ -116,4 +119,4 @@ export const PhotoLikes: React.FC<PhotoLikesProps> = ({
       />
     </>
   );
-};
+};

frontend/src/components/gallery/layouts/GridGalleryLayout.tsx

@@ -68,6 +68,10 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
     : animationType === 'fade'
     ? 'transition-opacity duration-300'
     : '';
+  const likeCount = photo.like_count ?? 0;
+  const averageRating = photo.average_rating ?? 0;
+  const commentCount = photo.comment_count ?? 0;
+  const showFeedbackActions = feedbackEnabled && Boolean(feedbackOptions);
 
   return (
     <div
@@ -99,7 +103,7 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
             detectPrintScreen={useEnhancedProtection}
             detectDevTools={protectionLevel === 'maximum'}
             watermarkText={useEnhancedProtection ? 'Protected' : undefined}
-            onProtectionViolation={(violationType) => {
+            onProtectionViolation={(violationType: string) => {
               console.warn(`Protection violation on grid photo ${photo.id}: ${violationType}`);
             }}
           />
@@ -126,7 +130,7 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
                     <Download className="w-5 h-5 text-neutral-800" />
                   </button>
                 )}
-                {onQuickComment && (
+                {showFeedbackActions && onQuickComment && (
                   <button
                     className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
                     onClick={(e) => { e.stopPropagation(); onQuickComment(); }}
@@ -137,7 +141,7 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
                   </button>
                 )}
                 {/* Quick feedback actions */}
-                {feedbackOptions?.allowLikes && (
+                {showFeedbackActions && feedbackOptions?.allowLikes && (
                   <button
                     className={`p-2 rounded-full transition-colors ${liked ? 'bg-red-500/90 hover:bg-red-500' : 'bg-white/90 hover:bg-white'}`}
                     onClick={async (e) => {
@@ -189,19 +193,19 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
           </button>
 
           {/* Feedback Indicators (always visible, bottom-left). Show like immediately when user liked */}
-          {(photo.comment_count > 0 || photo.average_rating > 0 || photo.like_count > 0 || liked) && (
+          {(commentCount > 0 || averageRating > 0 || likeCount > 0 || liked) && (
             <div className={`absolute ${photo.type === 'collage' ? 'bottom-8' : 'bottom-2'} left-2 flex items-center gap-1 z-10`}>
-              {(photo.like_count > 0 || liked) && (
+              {(likeCount > 0 || liked) && (
                 <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Liked">
                   <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
                 </span>
               )}
-              {photo.average_rating > 0 && (
+              {averageRating > 0 && (
                 <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Rated">
                   <Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
                 </span>
               )}
-              {photo.comment_count > 0 && (
+              {commentCount > 0 && (
                 <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Commented">
                   <MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" />
                 </span>

frontend/src/components/gallery/layouts/HeroGalleryLayout.tsx

@@ -269,19 +269,19 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
               </button>
 
               {/* Feedback indicators (always visible, bottom-left). Show like immediately when liked */}
-              {(photo.like_count > 0 || likedIds.has(photo.id) || (photo.average_rating || 0) > 0 || (photo.comment_count || 0) > 0) && (
+              {((photo.like_count ?? 0) > 0 || likedIds.has(photo.id) || (photo.average_rating ?? 0) > 0 || (photo.comment_count ?? 0) > 0) && (
                 <div className={`absolute ${photo.type === 'collage' ? 'bottom-8' : 'bottom-2'} left-2 flex items-center gap-1 z-20`}>
-                  {(photo.like_count > 0 || likedIds.has(photo.id)) && (
+                  {((photo.like_count ?? 0) > 0 || likedIds.has(photo.id)) && (
                     <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Liked">
                       <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
                     </span>
                   )}
-                  {(photo.average_rating || 0) > 0 && (
+                  {(photo.average_rating ?? 0) > 0 && (
                     <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Rated">
                       <svg viewBox="0 0 24 24" className="w-3.5 h-3.5 text-yellow-500 fill-current"><path d="M12 .587l3.668 7.431 8.2 1.193-5.934 5.787 1.402 8.168L12 18.897l-7.336 3.869 1.402-8.168L.132 9.211l8.2-1.193z"/></svg>
                     </span>
                   )}
-                  {(photo.comment_count || 0) > 0 && (
+                  {(photo.comment_count ?? 0) > 0 && (
                     <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Commented">
                       <svg viewBox="0 0 24 24" className="w-3.5 h-3.5 text-blue-600 fill-current"><path d="M20 2H4a2 2 0 00-2 2v18l4-4h14a2 2 0 002-2V4a2 2 0 00-2-2z"/></svg>
                     </span>

frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx

@@ -72,24 +72,24 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
       />
       
       {/* Feedback Indicators */}
-      {feedbackEnabled && (photo.comment_count > 0 || photo.average_rating > 0 || photo.like_count > 0) && (
+      {feedbackEnabled && ((photo.comment_count ?? 0) > 0 || (photo.average_rating ?? 0) > 0 || (photo.like_count ?? 0) > 0) && (
         <div className="absolute top-2 left-2 flex gap-1 z-10">
-          {photo.comment_count > 0 && (
-            <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.comment_count} comments`}>
+          {(photo.comment_count ?? 0) > 0 && (
+            <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.comment_count ?? 0} comments`}>
               <MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" />
-              <span className="text-xs font-medium text-neutral-700">{photo.comment_count}</span>
+              <span className="text-xs font-medium text-neutral-700">{photo.comment_count ?? 0}</span>
             </div>
           )}
-          {photo.average_rating > 0 && (
-            <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`Rating: ${Number(photo.average_rating).toFixed(1)}`}>
+          {(photo.average_rating ?? 0) > 0 && (
+            <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`Rating: ${Number(photo.average_rating ?? 0).toFixed(1)}`}>
               <Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
-              <span className="text-xs font-medium text-neutral-700">{Number(photo.average_rating).toFixed(1)}</span>
+              <span className="text-xs font-medium text-neutral-700">{Number(photo.average_rating ?? 0).toFixed(1)}</span>
             </div>
           )}
-          {photo.like_count > 0 && (
-            <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.like_count} likes`}>
+          {(photo.like_count ?? 0) > 0 && (
+            <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.like_count ?? 0} likes`}>
               <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
-              <span className="text-xs font-medium text-neutral-700">{photo.like_count}</span>
+              <span className="text-xs font-medium text-neutral-700">{photo.like_count ?? 0}</span>
             </div>
           )}
         </div>

frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx

@@ -129,7 +129,7 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
       </div>
 
       {/* Feedback Indicators (bottom-left) */}
-      {(photo.like_count > 0 || likedLocal) && (
+      {((photo.like_count ?? 0) > 0 || likedLocal) && (
         <div className={`absolute ${photo.type === 'collage' ? 'bottom-8' : 'bottom-2'} left-2 z-10`}>
           <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Liked">
             <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
@@ -298,6 +298,7 @@ export const MosaicGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                   isSelectionMode={isSelectionMode}
                   onClick={() => handlePhotoClick(currentIndex, photo.id)}
                   onDownload={(e) => onDownload(photo, e)}
+                  onToggleSelect={() => onPhotoSelect && onPhotoSelect(photo.id)}
                   className=""
                   allowDownloads={allowDownloads}
                   slug={slug}

frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx

@@ -182,7 +182,7 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                       )}
                     </div>
 
-                    {(photo.like_count > 0 || likedIds.has(photo.id)) && (
+                    {((photo.like_count ?? 0) > 0 || likedIds.has(photo.id)) && (
                       <div className={`absolute ${photo.type === 'collage' ? 'bottom-8' : 'bottom-2'} left-2 z-10`}>
                         <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Liked">
                           <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />

frontend/src/config/api.ts

@@ -1,9 +1,10 @@
 import axios, { AxiosHeaders } from 'axios';
-import Cookies from 'js-cookie';
-
-// Cookie keys
-export const ADMIN_TOKEN_KEY = 'admin_token';
-export const GALLERY_TOKEN_KEY = 'gallery_token';
+import {
+  getActiveGallerySlug,
+  getGalleryToken,
+  inferGallerySlugFromLocation,
+  resolveSlugFromRequestUrl,
+} from '../utils/galleryAuthStorage';
 
 // Maintenance mode callback
 let maintenanceModeCallback: ((enabled: boolean) => void) | null = null;
@@ -18,84 +19,70 @@ export const api = axios.create({
   headers: {
     'Content-Type': 'application/json',
   },
-  withCredentials: false, // Ensure we're not relying on cookies
+  withCredentials: true,
 });
 
-// Request interceptor to add auth token
+// Request interceptor: drop Content-Type for FormData payloads so the browser can set boundaries
 api.interceptors.request.use(
   (config) => {
-    // Don't process if headers are already set by the component
-    const existingAuth = config.headers?.['Authorization'] || config.headers?.get?.('Authorization');
-    
-    // If authorization is already set by the component, don't override it
-    if (existingAuth) {
-      return config;
-    }
-    
-    // Check if it's an admin route or gallery route
-    const isAdminRoute = config.url?.includes('/admin');
-    
-    if (isAdminRoute) {
-      const token = Cookies.get(ADMIN_TOKEN_KEY);
-      if (token) {
-        if (!config.headers) {
-          config.headers = {};
-        }
-        config.headers['Authorization'] = `Bearer ${token}`;
-      }
-    } else {
-      // For gallery routes, try to extract slug from the request URL first
-      const galleryMatch = config.url?.match(/gallery\/([^\/]+)/);
-      
-      if (galleryMatch && galleryMatch[1]) {
-        const galleryIdOrSlug = galleryMatch[1];
-        // Remove any query parameters from the slug
-        const cleanIdOrSlug = galleryIdOrSlug.split('?')[0];
-        
-        // Check if it's a numeric ID (for upload endpoints)
-        let token = null;
-        if (/^\d+$/.test(cleanIdOrSlug)) {
-          // It's an event ID - try to find the token from current page slug
-          const pathParts = window.location.pathname.split('/');
-          if (pathParts[1] === 'gallery' && pathParts[2]) {
-            const gallerySlug = pathParts[2];
-            const cleanSlug = gallerySlug.split('?')[0];
-            token = localStorage.getItem(`gallery_token_${cleanSlug}`);
-          }
-        } else {
-          // It's a slug - use it directly
-          token = localStorage.getItem(`gallery_token_${cleanIdOrSlug}`);
-        }
-        
-        if (token) {
-          if (!config.headers) {
-            config.headers = {};
-          }
-          config.headers['Authorization'] = `Bearer ${token}`;
-        }
-      } else {
-        // Fallback to getting slug from the current page URL
-        const pathParts = window.location.pathname.split('/');
-        if (pathParts[1] === 'gallery' && pathParts[2]) {
-          const gallerySlug = pathParts[2];
-          // Remove any query parameters from the slug
-          const cleanSlug = gallerySlug.split('?')[0];
-          const token = localStorage.getItem(`gallery_token_${cleanSlug}`);
-          if (token) {
-            if (!config.headers) {
-              config.headers = {};
-            }
-            config.headers['Authorization'] = `Bearer ${token}`;
-          }
-        }
-      }
-    }
-
-    // Don't set Content-Type for FormData - let browser set it with boundary
     if (config.data instanceof FormData) {
       delete config.headers?.['Content-Type'];
     }
 
+    if (typeof window !== 'undefined') {
+      const pathSlug = resolveSlugFromRequestUrl(config.url || '');
+      const params = config.params as Record<string, unknown> | undefined;
+      const paramSlug = typeof params?.slug === 'string' ? (params.slug as string) : null;
+
+      const rawPath = (() => {
+        if (!config.url) return '';
+        try {
+          if (config.url.startsWith('http://') || config.url.startsWith('https://')) {
+            return new URL(config.url).pathname;
+          }
+        } catch (error) {
+          return config.url;
+        }
+        return config.url;
+      })();
+
+      const pathname = rawPath.startsWith('/') ? rawPath : `/${rawPath}`;
+
+      const isGalleryEndpoint = /^\/gallery\//.test(pathname)
+        || /^\/secure-images\//.test(pathname)
+        || /^\/auth\/gallery\//.test(pathname);
+
+      const isGallerySessionCheck = pathname === '/auth/session'
+        && (!!paramSlug || window.location.pathname.startsWith('/gallery/'));
+
+      if (isGalleryEndpoint || isGallerySessionCheck) {
+        const fallbackSlug = getActiveGallerySlug()
+          || inferGallerySlugFromLocation();
+        const slug = pathSlug || paramSlug || fallbackSlug;
+
+        if (slug) {
+          const token = getGalleryToken(slug);
+          if (token) {
+            if (!config.headers) {
+              config.headers = new AxiosHeaders();
+            }
+
+            if (config.headers instanceof AxiosHeaders) {
+              const existing = config.headers.get('Authorization');
+              if (!existing) {
+                config.headers.set('Authorization', `Bearer ${token}`);
+              }
+            } else {
+              const headersRecord = config.headers as Record<string, string | undefined>;
+              if (!headersRecord.Authorization) {
+                headersRecord.Authorization = `Bearer ${token}`;
+              }
+            }
+          }
+        }
+      }
+    }
+
     return config;
   },
   (error) => {
@@ -110,10 +97,9 @@ api.interceptors.response.use(
     // Handle maintenance mode (503)
     if (error.response?.status === 503) {
       const isAdminRoute = error.config?.url?.includes('/admin');
-      const hasAdminAuth = error.config?.headers?.Authorization?.startsWith('Bearer ');
       
       // Only trigger maintenance mode for non-admin routes or unauthenticated admin routes
-      if (!isAdminRoute || !hasAdminAuth) {
+      if (!isAdminRoute) {
         if (maintenanceModeCallback) {
           maintenanceModeCallback(true);
         }
@@ -126,8 +112,6 @@ api.interceptors.response.use(
       const currentPath = window.location.pathname;
       
       if (isAdminRoute) {
-        // Clear admin token on unauthorized
-        Cookies.remove(ADMIN_TOKEN_KEY);
         // Only redirect if we're not already on the admin login page
         if (!currentPath.includes('/admin/login')) {
           window.location.href = '/admin/login';
@@ -144,8 +128,7 @@ api.interceptors.response.use(
           // Don't clear tokens for image requests - they might just need a retry
           if (!isImageRequest && galleryMatch && galleryMatch[1]) {
             const gallerySlug = galleryMatch[1];
-            localStorage.removeItem(`gallery_token_${gallerySlug}`);
-            localStorage.removeItem(`gallery_event_${gallerySlug}`);
+            sessionStorage.removeItem(`gallery_event_${gallerySlug}`);
           }
           // Don't redirect - let the component handle the auth state
         } else if (galleryMatch) {
@@ -159,21 +142,3 @@ api.interceptors.response.use(
     return Promise.reject(error);
   }
 );
-
-// Helper to set auth tokens
-export const setAuthToken = (token: string, isAdmin: boolean = false) => {
-  const key = isAdmin ? ADMIN_TOKEN_KEY : GALLERY_TOKEN_KEY;
-  Cookies.set(key, token, { expires: 1 }); // 1 day expiry
-};
-
-// Helper to clear auth tokens
-export const clearAuthToken = (isAdmin: boolean = false) => {
-  const key = isAdmin ? ADMIN_TOKEN_KEY : GALLERY_TOKEN_KEY;
-  Cookies.remove(key);
-};
-
-// Helper to get auth tokens
-export const getAuthToken = (isAdmin: boolean = false) => {
-  const key = isAdmin ? ADMIN_TOKEN_KEY : GALLERY_TOKEN_KEY;
-  return Cookies.get(key);
-};

frontend/src/contexts/AdminAuthContext.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState, useEffect } from 'react';
 import type { ReactNode } from 'react';
-import { getAuthToken } from '../config/api';
+import { api } from '../config/api';
 import { authService } from '../services';
 import type { AdminUser } from '../types';
 
@@ -40,15 +40,31 @@ export const AdminAuthProvider: React.FC<AdminAuthProviderProps> = ({ children }
     // Check if user has a valid token on mount
     const checkAuth = async () => {
       try {
-        const token = getAuthToken(true);
-        if (token) {
-          // For now, just assume the token is valid
-          // TODO: Validate token with backend and get user info
+        const storedUser = sessionStorage.getItem('admin_user');
+        if (storedUser) {
+          try {
+            setUser(JSON.parse(storedUser));
+          } catch (err) {
+            sessionStorage.removeItem('admin_user');
+          }
+        }
+
+        const response = await api.get<{ valid: boolean; type: string; adminUsername?: string; user?: string }>(
+          '/auth/session'
+        );
+
+        if (response.data?.valid && response.data.type === 'admin') {
           setIsAuthenticated(true);
+        } else {
+          sessionStorage.removeItem('admin_user');
+          setIsAuthenticated(false);
+          setUser(null);
         }
       } catch (error) {
         // Auth check failed - user needs to login
-        setError('Failed to check authentication');
+        sessionStorage.removeItem('admin_user');
+        setIsAuthenticated(false);
+        setUser(null);
       } finally {
         setIsLoading(false);
       }
@@ -63,9 +79,11 @@ export const AdminAuthProvider: React.FC<AdminAuthProviderProps> = ({ children }
     setError(null);
     setIsAuthenticated(true);
     setMustChangePassword(user.mustChangePassword || false);
+    sessionStorage.setItem('admin_user', JSON.stringify(user));
   };
 
   const logout = () => {
+    sessionStorage.removeItem('admin_user');
     authService.adminLogout();
     setIsAuthenticated(false);
     setUser(null);
@@ -79,6 +97,10 @@ export const AdminAuthProvider: React.FC<AdminAuthProviderProps> = ({ children }
         ...user,
         mustChangePassword: false
       });
+      sessionStorage.setItem('admin_user', JSON.stringify({
+        ...user,
+        mustChangePassword: false
+      }));
     }
   };
 
@@ -98,4 +120,4 @@ export const AdminAuthProvider: React.FC<AdminAuthProviderProps> = ({ children }
       {children}
     </AdminAuthContext.Provider>
   );
-};
+};

frontend/src/contexts/GalleryAuthContext.tsx

@@ -1,7 +1,14 @@
 import React, { createContext, useContext, useState, useEffect } from 'react';
 import type { ReactNode } from 'react';
+import { api } from '../config/api';
 import { authService, galleryService } from '../services';
 import { cleanupOldGalleryAuth } from '../utils/cleanupGalleryAuth';
+import {
+  clearActiveGallerySlug,
+  clearGalleryToken,
+  setActiveGallerySlug,
+  storeGalleryToken,
+} from '../utils/galleryAuthStorage';
 
 interface GalleryEvent {
   id: number;
@@ -52,65 +59,99 @@ export const GalleryAuthProvider: React.FC<GalleryAuthProviderProps> = ({ childr
   };
 
   useEffect(() => {
-    // Clean up old authentication data on mount
     cleanupOldGalleryAuth();
-    
-    // Check if user has a valid token on mount
-    const currentSlug = getCurrentGallerySlug();
-    if (currentSlug) {
-      // Try to restore event data from localStorage with slug-specific key
-      const storedEvent = localStorage.getItem(`gallery_event_${currentSlug}`);
-      const storedToken = localStorage.getItem(`gallery_token_${currentSlug}`);
-      
-      if (storedEvent && storedToken) {
+
+    const slugAtMount = getCurrentGallerySlug();
+    if (slugAtMount) {
+      setActiveGallerySlug(slugAtMount);
+    } else {
+      clearActiveGallerySlug();
+    }
+
+    const initialise = async () => {
+      const currentSlug = getCurrentGallerySlug();
+
+      if (!currentSlug) {
+        setIsLoading(false);
+        return;
+      }
+
+      setActiveGallerySlug(currentSlug);
+
+      const storedEvent = sessionStorage.getItem(`gallery_event_${currentSlug}`);
+      if (storedEvent) {
         try {
-          const eventData = JSON.parse(storedEvent);
-          // Verify the stored event matches the current gallery slug
-          if (eventData && eventData.id) {
-            setEvent(eventData);
-            setIsAuthenticated(true);
-          } else {
-            // Clear invalid data
-            localStorage.removeItem(`gallery_event_${currentSlug}`);
-            localStorage.removeItem(`gallery_token_${currentSlug}`);
+          const parsed = JSON.parse(storedEvent);
+          if (parsed && parsed.id) {
+            setEvent(parsed);
           }
-        } catch (error) {
-          // Invalid stored data - clear it
-          localStorage.removeItem(`gallery_event_${currentSlug}`);
-          localStorage.removeItem(`gallery_token_${currentSlug}`);
-        }
-      } else {
-        // No stored auth; check for token in URL and auto-authenticate
-        const parts = window.location.pathname.split('/');
-        const urlToken = parts.length >= 5 ? parts[4] : (parts.length >= 4 ? parts[3] : undefined);
-        if (urlToken) {
-          (async () => {
-            try {
-              setIsLoading(true);
-              // Verify token against backend
-              const verify = await galleryService.verifyToken(currentSlug, urlToken);
-              if (verify?.valid) {
-                // Store token and fetch event via photos endpoint to get full event object
-                localStorage.setItem(`gallery_token_${currentSlug}`, urlToken);
-                const data = await galleryService.getGalleryPhotos(currentSlug);
-                if (data?.event) {
-                  setEvent(data.event);
-                  setIsAuthenticated(true);
-                  localStorage.setItem(`gallery_event_${currentSlug}`, JSON.stringify(data.event));
-                }
-              }
-            } catch (e) {
-              // Invalid token; ensure any residual storage is cleared
-              localStorage.removeItem(`gallery_token_${currentSlug}`);
-              localStorage.removeItem(`gallery_event_${currentSlug}`);
-            } finally {
-              setIsLoading(false);
-            }
-          })();
+        } catch (err) {
+          sessionStorage.removeItem(`gallery_event_${currentSlug}`);
         }
       }
-    }
-    setIsLoading(false);
+
+      try {
+        setIsLoading(true);
+        const sessionResponse = await api.get<{ valid: boolean; type: string; eventSlug?: string }>(
+          '/auth/session',
+          { params: { slug: currentSlug } }
+        );
+
+        if (sessionResponse.data?.valid && sessionResponse.data.type === 'gallery' && sessionResponse.data.eventSlug === currentSlug) {
+          setIsAuthenticated(true);
+
+          if (!storedEvent) {
+            // Fetch gallery details to hydrate context
+            const galleryData = await galleryService.getGalleryPhotos(currentSlug);
+            if (galleryData?.event) {
+              setEvent(galleryData.event);
+              sessionStorage.setItem(`gallery_event_${currentSlug}`, JSON.stringify(galleryData.event));
+            }
+          }
+
+          return;
+        }
+
+        // If no active session, check for share token in URL
+        const parts = window.location.pathname.split('/');
+        const urlToken = parts.length >= 5 ? parts[4] : (parts.length >= 4 ? parts[3] : undefined);
+
+        if (urlToken) {
+          const verify = await galleryService.verifyToken(currentSlug, urlToken);
+          if (verify?.valid) {
+            const response = await authService.shareLinkLogin(currentSlug, urlToken);
+            if (response?.event) {
+              setEvent(response.event);
+              setIsAuthenticated(true);
+              sessionStorage.setItem(`gallery_event_${currentSlug}`, JSON.stringify(response.event));
+              if (response.token) {
+                storeGalleryToken(currentSlug, response.token);
+              }
+              setActiveGallerySlug(currentSlug);
+              return;
+            }
+          }
+        }
+
+        // No valid session found
+        setIsAuthenticated(false);
+        sessionStorage.removeItem(`gallery_event_${currentSlug}`);
+        setEvent(null);
+        clearGalleryToken(currentSlug);
+      } catch (error) {
+        setIsAuthenticated(false);
+        sessionStorage.removeItem(`gallery_event_${currentSlug}`);
+        setEvent(null);
+        clearGalleryToken(currentSlug);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    initialise();
+    return () => {
+      clearActiveGallerySlug();
+    };
   }, []);
 
   const login = async (slug: string, password: string, recaptchaToken?: string | null) => {
@@ -120,10 +161,13 @@ export const GalleryAuthProvider: React.FC<GalleryAuthProviderProps> = ({ childr
       const response = await authService.verifyGalleryPassword(slug, password, recaptchaToken);
       setEvent(response.event);
       setIsAuthenticated(true);
-      
-      // Store event data and token in localStorage with slug-specific key
-      localStorage.setItem(`gallery_event_${slug}`, JSON.stringify(response.event));
-      localStorage.setItem(`gallery_token_${slug}`, response.token);
+      if (response.token) {
+        storeGalleryToken(slug, response.token);
+      }
+      setActiveGallerySlug(slug);
+
+      // Store event data for quick reloads (non-sensitive)
+      sessionStorage.setItem(`gallery_event_${slug}`, JSON.stringify(response.event));
     } catch (err: any) {
       setError(err.response?.data?.error || 'Invalid password');
       throw err;
@@ -135,12 +179,13 @@ export const GalleryAuthProvider: React.FC<GalleryAuthProviderProps> = ({ childr
   const logout = () => {
     const currentSlug = getCurrentGallerySlug();
     if (currentSlug) {
-      localStorage.removeItem(`gallery_event_${currentSlug}`);
-      localStorage.removeItem(`gallery_token_${currentSlug}`);
+      sessionStorage.removeItem(`gallery_event_${currentSlug}`);
+      clearGalleryToken(currentSlug);
     }
-    authService.galleryLogout();
+    authService.galleryLogout(currentSlug || undefined);
     setIsAuthenticated(false);
     setEvent(null);
+    clearActiveGallerySlug();
   };
 
   return (

frontend/src/hooks/useCSSProtection.ts

@@ -1,6 +1,12 @@
 import { useEffect, useRef } from 'react';
 import { ProtectionLevel } from './useImageProtection';
 
+type VendorStyle = CSSStyleDeclaration & {
+  webkitUserSelect?: string;
+  webkitTouchCallout?: string;
+  webkitUserDrag?: string;
+};
+
 interface UseCSSProtectionOptions {
   enabled: boolean;
   protectionLevel: ProtectionLevel;
@@ -63,19 +69,22 @@ export const useCSSProtection = (options: UseCSSProtectionOptions) => {
     // Apply inline styles for enhanced protection
     if (options.protectionLevel === 'enhanced' || options.protectionLevel === 'maximum') {
       // Disable various browser features
-      container.style.userSelect = 'none';
-      container.style.webkitUserSelect = 'none';
-      container.style.webkitTouchCallout = 'none';
-      container.style.webkitUserDrag = 'none';
+      const containerStyle = container.style as VendorStyle;
+      containerStyle.userSelect = 'none';
+      containerStyle.webkitUserSelect = 'none';
+      containerStyle.webkitTouchCallout = 'none';
+      containerStyle.webkitUserDrag = 'none';
       
       // Find all img and canvas elements and protect them
       const mediaElements = container.querySelectorAll('img, canvas');
       mediaElements.forEach(element => {
-        (element as HTMLElement).draggable = false;
-        (element as HTMLElement).style.userSelect = 'none';
-        (element as HTMLElement).style.webkitUserSelect = 'none';
-        (element as HTMLElement).style.webkitUserDrag = 'none';
-        (element as HTMLElement).style.webkitTouchCallout = 'none';
+        const el = element as HTMLElement;
+        const elStyle = el.style as VendorStyle;
+        el.draggable = false;
+        elStyle.userSelect = 'none';
+        elStyle.webkitUserSelect = 'none';
+        elStyle.webkitUserDrag = 'none';
+        elStyle.webkitTouchCallout = 'none';
         
         if (options.protectionLevel === 'maximum') {
           (element as HTMLElement).style.pointerEvents = 'none';
@@ -101,19 +110,22 @@ export const useCSSProtection = (options: UseCSSProtectionOptions) => {
       }
       
       // Reset inline styles
-      container.style.userSelect = '';
-      container.style.webkitUserSelect = '';
-      container.style.webkitTouchCallout = '';
-      container.style.webkitUserDrag = '';
+      const containerStyle = container.style as VendorStyle;
+      containerStyle.userSelect = '';
+      containerStyle.webkitUserSelect = '';
+      containerStyle.webkitTouchCallout = '';
+      containerStyle.webkitUserDrag = '';
       
       // Reset media element styles
       const mediaElements = container.querySelectorAll('img, canvas');
       mediaElements.forEach(element => {
-        (element as HTMLElement).style.userSelect = '';
-        (element as HTMLElement).style.webkitUserSelect = '';
-        (element as HTMLElement).style.webkitUserDrag = '';
-        (element as HTMLElement).style.webkitTouchCallout = '';
-        (element as HTMLElement).style.pointerEvents = '';
+        const el = element as HTMLElement;
+        const elStyle = el.style as VendorStyle;
+        elStyle.userSelect = '';
+        elStyle.webkitUserSelect = '';
+        elStyle.webkitUserDrag = '';
+        elStyle.webkitTouchCallout = '';
+        elStyle.pointerEvents = '';
       });
     };
   }, [
@@ -125,4 +137,4 @@ export const useCSSProtection = (options: UseCSSProtectionOptions) => {
   ]);
 
   return containerRef;
-};
+};

frontend/src/hooks/useDevToolsProtection.ts

@@ -11,7 +11,6 @@ interface UseDevToolsProtectionOptions {
 export const useDevToolsProtection = (options: UseDevToolsProtectionOptions) => {
   const detectionTimerRef = useRef<NodeJS.Timeout | null>(null);
   const lastConsoleCountRef = useRef(0);
-  const startTimeRef = useRef<number>(Date.now());
   const isDetectedRef = useRef(false);
 
   const handleDevToolsDetected = useCallback(() => {
@@ -246,4 +245,4 @@ export const useDevToolsProtection = (options: UseDevToolsProtectionOptions) =>
       isDetectedRef.current = false;
     }
   };
-};
+};

frontend/src/hooks/useGallery.ts

@@ -13,7 +13,7 @@ export const useGalleryInfo = (slug: string, token?: string) => {
 
 export const useGalleryPhotos = (
   slug: string,
-  filter?: 'liked' | 'commented' | 'rated' | 'all',
+  filter?: 'liked' | 'favorited' | 'commented' | 'rated' | 'all',
   guestId?: string,
   enabled: boolean = true
 ) => {

frontend/src/hooks/useImageProtection.ts

@@ -1,5 +1,13 @@
 import { useEffect, useRef, useCallback } from 'react';
 
+type VendorStyle = CSSStyleDeclaration & {
+  webkitUserSelect?: string;
+  webkitTouchCallout?: string;
+  webkitUserDrag?: string;
+  MozAppearance?: string;
+  webkitAppearance?: string;
+};
+
 export type ProtectionLevel = 'basic' | 'standard' | 'enhanced' | 'maximum';
 
 interface UseImageProtectionOptions {
@@ -16,9 +24,9 @@ interface UseImageProtectionOptions {
 }
 
 export const useImageProtection = (options: UseImageProtectionOptions) => {
-  const elementRef = useRef<HTMLImageElement>(null);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const overlayRef = useRef<HTMLDivElement>(null);
+  const elementRef = useRef<HTMLImageElement | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const overlayRef = useRef<HTMLDivElement | null>(null);
   const printScreenDetectorRef = useRef<HTMLCanvasElement | null>(null);
   const printScreenIntervalRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -195,25 +203,26 @@ export const useImageProtection = (options: UseImageProtectionOptions) => {
     }
 
     // CSS protection
-    element.style.userSelect = 'none';
-    element.style.webkitUserSelect = 'none';
-    element.style.webkitTouchCallout = 'none';
-    element.style.pointerEvents = 'auto';
-    element.style.webkitUserDrag = 'none';
-    element.style.webkitTouchCallout = 'none';
+    const elementStyle = element.style as VendorStyle;
+    elementStyle.userSelect = 'none';
+    elementStyle.webkitUserSelect = 'none';
+    elementStyle.webkitTouchCallout = 'none';
+    elementStyle.pointerEvents = 'auto';
+    elementStyle.webkitUserDrag = 'none';
     element.draggable = false;
 
     // Enhanced CSS protection
     if (protectionLevel !== 'basic') {
-      element.style.outline = 'none';
-      element.style.webkitAppearance = 'none';
-      element.style.MozAppearance = 'none';
+      elementStyle.outline = 'none';
+      elementStyle.webkitAppearance = 'none';
+      elementStyle.MozAppearance = 'none';
       
       // Disable text selection on parent elements
       let parent = element.parentElement;
       while (parent) {
-        parent.style.userSelect = 'none';
-        parent.style.webkitUserSelect = 'none';
+        const parentStyle = parent.style as VendorStyle;
+        parentStyle.userSelect = 'none';
+        parentStyle.webkitUserSelect = 'none';
         parent = parent.parentElement;
       }
     }
@@ -287,4 +296,4 @@ export const useImageProtection = (options: UseImageProtectionOptions) => {
     canvasRef,
     overlayRef
   };
-};
+};

frontend/src/i18n/locales/de.json

@@ -478,8 +478,14 @@
     "sortByDate": "Nach Datum sortieren",
     "sortByName": "Nach Name sortieren",
     "sortBySize": "Nach Größe sortieren",
-    "allPhotos": "Alle Fotos",
-    "shareGallery": "Galerie teilen",
+  "allPhotos": "Alle Fotos",
+  "feedbackFilter": "Feedback-Filter",
+  "all": "Alle",
+  "liked": "Gefallen",
+  "favorited": "Favorisiert",
+  "rated": "Bewertet",
+  "commented": "Kommentiert",
+  "shareGallery": "Galerie teilen",
     "needHelp": "Hilfe benötigt? Kontaktieren Sie uns unter",
     "noPhotosFound": "Keine Fotos gefunden",
     "failedToLoad": "Fotos konnten nicht geladen werden",
@@ -588,6 +594,13 @@
     "photos": "Fotos",
     "categories": "Kategorien",
     "eventInformation": "Veranstaltungsinformationen",
+    "sourceMode": "Quellenmodus",
+    "sourceModeManaged": "Verwaltet (Upload nach PicPeak)",
+    "sourceModeReference": "Externen Ordner referenzieren",
+    "sourceModeHelp": "Nutzen Sie den verwalteten Modus für direkte Uploads oder verweisen Sie auf einen gemounteten /external-media Ordner.",
+    "externalFolder": "Externer Ordner",
+    "externalFolderHint": "Diese Ordner stammen aus dem /external-media Mount innerhalb des Containers oder Hosts.",
+    "externalFolderRequired": "Bitte wählen Sie vor dem Speichern einen externen Ordner aus.",
     "welcomeMessage": "Willkommensnachricht",
     "noWelcomeMessage": "Keine Willkommensnachricht festgelegt",
     "noWelcomeMessageSet": "Keine Willkommensnachricht festgelegt",
@@ -770,12 +783,66 @@
       "dateFormat": "Datumsformat",
       "dateFormatHelp": "Wie Daten in E-Mails und in der gesamten Anwendung angezeigt werden"
     },
+    "publicSite": {
+      "tabLabel": "Öffentliche Seite",
+      "badge": "Öffentliche Landingpage",
+      "title": "Öffentliche Landingpage",
+      "subtitle": "Veröffentlichen Sie eine anpassbare Landingpage für Gäste, die Ihre Domain besuchen.",
+      "loading": "Öffentliche Seite wird geladen...",
+      "enabled": "Aktiv",
+      "disabled": "Inaktiv",
+      "htmlLabel": "Landingpage-HTML",
+      "htmlPlaceholder": "HTML-Markup für Hero, Abschnitte und Handlungsaufrufe einfügen.",
+      "htmlHelp": "Rohes HTML wird beim Speichern bereinigt. Unsichere Skripte und Attribute werden automatisch entfernt. Platzhalter wie {{company_name}}, {{company_tagline}} und {{support_email}} werden mit den Werten aus den Branding-Einstellungen ersetzt.",
+      "cssLabel": "Benutzerdefiniertes CSS",
+      "cssPlaceholder": "Optionale CSS-Anpassungen für Layout, Farben oder Typografie.",
+      "cssHelp": "Import-Anweisungen und JavaScript-URLs werden entfernt. Verwenden Sie Standard-CSS-Selektoren.",
+      "saveCta": "Öffentliche Seite speichern",
+      "saving": "Speichern...",
+      "saveSuccess": "Öffentliche Seite gespeichert.",
+      "saveError": "Öffentliche Seite konnte nicht gespeichert werden.",
+      "resetCta": "Auf Standard zurücksetzen",
+      "resetting": "Setze zurück...",
+      "resetSuccess": "Landingpage wurde auf die Standardvorlage zurückgesetzt.",
+      "resetError": "Zurücksetzen auf Standard fehlgeschlagen.",
+      "previewTitle": "Live-Vorschau",
+      "previewSandboxed": "Sandbox-Vorschau",
+      "previewDisabled": "Aktivieren Sie die öffentliche Seite, um die Live-Vorschau zu sehen.",
+      "sanitizationNotice": "Skripte, iframes und unsichere Attribute werden vor der Veröffentlichung entfernt. Erlaubt sind sichere HTML-Elemente, Links und Bilder.",
+      "htmlRequired": "Legen Sie HTML-Inhalt fest, bevor die öffentliche Seite aktiviert wird."
+    },
     "storage": {
       "title": "Speicher",
       "overview": "Speicherübersicht",
       "totalUsed": "Gesamt verwendet",
       "archiveStorage": "Archivspeicher",
       "storageLimit": "Speicherlimit",
+      "storageLimitHelper": "Definieren Sie ein Limit für die Speichernutzung. Dieses Limit dient als Hinweis und wird hervorgehoben, sobald es erreicht ist.",
+      "softLimitInputLabel": "Limit (GB)",
+      "softLimitHelper": "Geben Sie das gewünschte maximale Speicherlimit in Gigabyte ein.",
+      "recommendedSoftLimit": "Empfohlenes Limit",
+      "diskCapacity": "Festplattenkapazität",
+      "diskCapacityReported": "Festplattenkapazität (gemeldet)",
+      "diskAvailable": "Verfügbar",
+      "diskAvailableReported": "Verfügbar (gemeldet)",
+      "diskFree": "Frei",
+      "diskFreeReported": "Frei (gemeldet)",
+      "diskMetricsUnavailable": "Speicherinformationen sind in Docker Desktop oder virtuellen Umgebungen nicht verfügbar.",
+      "applyRecommended": "Empfehlung nutzen",
+      "applyAvailable": "An verfügbaren Speicher anpassen",
+      "invalidSoftLimit": "Bitte geben Sie eine gültige Zahl für das Limit ein.",
+      "saveSoftLimit": "Limit speichern",
+      "limitNotEnforced": "Dieses Limit dient nur als Hinweis und wird nicht automatisch durchgesetzt.",
+      "overrideTitle": "Manuelle Kapazitätsüberschreibung",
+      "diskOverrideEnvNote": "Die Speicherkapazität wird über Umgebungsvariablen gesteuert und kann hier nicht geändert werden.",
+      "diskOverrideSettingsHelp": "Setzen Sie eigene Werte, wenn Docker unrealistische Zahlen meldet.",
+      "overrideCapacityLabel": "Gesamtkapazität (GB)",
+      "overrideCapacityHelper": "Leer lassen, um die automatische Erkennung zu verwenden.",
+      "overrideAvailableLabel": "Verfügbarer Speicher (GB)",
+      "overrideAvailableHelper": "Optional. Leer lassen, um aus Gesamtkapazität minus belegtem Speicher zu berechnen.",
+      "saveOverride": "Kapazität speichern",
+      "capacityRequiredForAvailable": "Geben Sie zuerst eine Gesamtkapazität an, bevor Sie verfügbaren Speicher setzen.",
+      "availableExceedsCapacity": "Der verfügbare Speicher darf die Gesamtkapazität nicht überschreiten.",
       "storageUsage": "Speichernutzung",
       "storageByEvent": "Speicher nach Veranstaltung",
       "storageManagement": "Speicherverwaltung",
@@ -988,7 +1055,9 @@
     "activeGalleries": "Aktive Galerien",
     "storageUsed": "Speicher verwendet",
     "totalPhotos": "Gesamte Fotos",
-    "storagePercent": "{{percent}}% von {{limit}}",
+    "storagePercent": "{{percent}}% des Limits {{limit}}",
+    "storageSoftLimitConfigured": "Konfiguriertes Limit: {{limit}}",
+    "storageSoftLimitRecommended": "Empfohlenes Limit: {{limit}}",
     "version": "Version",
     "archivedEvents": "Archivierte Veranstaltungen",
     "systemHealth": "Systemstatus",

frontend/src/i18n/locales/en.json

@@ -278,6 +278,13 @@
     "photos": "Photos",
     "categories": "Categories",
     "eventInformation": "Event Information",
+    "sourceMode": "Source Mode",
+    "sourceModeManaged": "Managed (upload to PicPeak)",
+    "sourceModeReference": "Reference external folder",
+    "sourceModeHelp": "Use managed mode for direct uploads or point to a mounted /external-media folder when using local storage.",
+    "externalFolder": "External Folder",
+    "externalFolderHint": "These folders are read from the /external-media mount inside your container or host.",
+    "externalFolderRequired": "Please select an external folder before saving.",
     "welcomeMessage": "Welcome Message",
     "noWelcomeMessage": "No welcome message set",
     "created": "Created",
@@ -456,12 +463,66 @@
       "dateFormat": "Date Format",
       "dateFormatHelp": "How dates are displayed in emails and throughout the application"
     },
+    "publicSite": {
+      "tabLabel": "Public Site",
+      "badge": "Public Landing",
+      "title": "Public Landing Page",
+      "subtitle": "Publish a customized landing page for guests when they visit your domain.",
+      "loading": "Loading public site settings...",
+      "enabled": "Enabled",
+      "disabled": "Disabled",
+      "htmlLabel": "Landing Page HTML",
+      "htmlPlaceholder": "Provide the HTML markup for your landing page hero, sections, and calls to action.",
+      "htmlHelp": "Raw HTML is sanitized on save. Unsafe tags, inline scripts, and disallowed attributes are removed automatically. Tokens such as {{company_name}}, {{company_tagline}}, and {{support_email}} will be substituted with values from Branding settings.",
+      "cssLabel": "Custom CSS",
+      "cssPlaceholder": "Optional CSS overrides to adjust layout, colors, or typography.",
+      "cssHelp": "Imports and JavaScript URLs are stripped. Use standard CSS selectors to override the default styling.",
+      "saveCta": "Save public site",
+      "saving": "Saving...",
+      "saveSuccess": "Public site settings saved.",
+      "saveError": "Failed to save public site settings.",
+      "resetCta": "Reset to default",
+      "resetting": "Resetting...",
+      "resetSuccess": "Public site template reset to defaults.",
+      "resetError": "Failed to reset public site template.",
+      "previewTitle": "Live Preview",
+      "previewSandboxed": "Sandboxed preview",
+      "previewDisabled": "Enable the public site to see the live preview.",
+      "sanitizationNotice": "Scripts, embedded frames, and unsafe attributes are removed before publishing. Only safe HTML, links, and images are allowed.",
+      "htmlRequired": "Provide HTML content before enabling the public site."
+    },
     "storage": {
       "title": "Storage",
       "overview": "Storage Overview",
       "totalUsed": "Total Used",
       "archiveStorage": "Archive Storage",
       "storageLimit": "Storage Limit",
+      "storageLimitHelper": "Set a limit for photo storage usage. This limit is advisory and will highlight when reached.",
+      "softLimitInputLabel": "Limit (GB)",
+      "softLimitHelper": "Enter the preferred maximum storage usage in gigabytes.",
+      "recommendedSoftLimit": "Suggested Limit",
+      "diskCapacity": "Disk Capacity",
+      "diskCapacityReported": "Disk Capacity (reported)",
+      "diskAvailable": "Available",
+      "diskAvailableReported": "Available (reported)",
+      "diskFree": "Free",
+      "diskFreeReported": "Free (reported)",
+      "diskMetricsUnavailable": "Disk metrics are not available in Docker Desktop or virtualized environments.",
+      "applyRecommended": "Use recommended",
+      "applyAvailable": "Match available",
+      "invalidSoftLimit": "Enter a valid number for the limit.",
+      "saveSoftLimit": "Save limit",
+      "limitNotEnforced": "This limit is advisory only and is not enforced automatically.",
+      "overrideTitle": "Manual capacity override",
+      "diskOverrideEnvNote": "Disk capacity is controlled by environment variables and cannot be edited here.",
+      "diskOverrideSettingsHelp": "Set custom capacity values when Docker reports unrealistic figures.",
+      "overrideCapacityLabel": "Total capacity (GB)",
+      "overrideCapacityHelper": "Leave blank to use the automatic reading.",
+      "overrideAvailableLabel": "Available space (GB)",
+      "overrideAvailableHelper": "Optional. Leave blank to calculate from total capacity minus used storage.",
+      "saveOverride": "Save capacity override",
+      "capacityRequiredForAvailable": "Enter a total capacity before setting available space.",
+      "availableExceedsCapacity": "Available space cannot exceed the total capacity.",
       "storageUsage": "Storage Usage",
       "storageByEvent": "Storage by Event",
       "storageManagement": "Storage Management",
@@ -732,7 +793,9 @@
     "activeGalleries": "Active Galleries",
     "storageUsed": "Storage Used",
     "totalPhotos": "Total Photos",
-    "storagePercent": "{{percent}}% of {{limit}}",
+    "storagePercent": "{{percent}}% of limit {{limit}}",
+    "storageSoftLimitConfigured": "Configured limit: {{limit}}",
+    "storageSoftLimitRecommended": "Suggested limit: {{limit}}",
     "version": "Version",
     "archivedEvents": "Archived Events",
     "systemHealth": "System Health",

frontend/src/pages/admin/AdminLoginPage.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Input, Card, ReCaptcha } from '../../components/common';
 import { useAdminAuth } from '../../contexts';
 import { authService } from '../../services/auth.service';
-import { getAuthToken, api } from '../../config/api';
+import { api } from '../../config/api';
 
 export const AdminLoginPage: React.FC = () => {
   const { t } = useTranslation();
@@ -84,17 +84,20 @@ export const AdminLoginPage: React.FC = () => {
       login(response.token, response.user);
       toast.success(t('adminLogin.loginSuccess'));
       setLoginSuccess(true);
-    } catch (error: any) {
-      // Login error handled by UI notification
-      
-      // Handle network errors gracefully
-      if (error.code === 'ERR_NETWORK' || error.code === 'ERR_CONNECTION_RESET') {
+      } catch (error: any) {
+        // Login error handled by UI notification
+        
+        // Handle network errors gracefully
+        if (error.code === 'ERR_NETWORK' || error.code === 'ERR_CONNECTION_RESET') {
         // Check if we actually got logged in despite the error
-        const token = getAuthToken(true);
-        if (token) {
-          // Login was successful, just had a connection issue
-          setLoginSuccess(true);
-          return;
+        try {
+          const sessionResponse = await api.get<{ valid: boolean; type: string }>('/auth/session');
+          if (sessionResponse.data?.valid && sessionResponse.data.type === 'admin') {
+            setLoginSuccess(true);
+            return;
+          }
+        } catch (sessionError) {
+          // Ignore secondary failure, we'll surface the original network error
         }
         toast.error(t('adminLogin.networkError'));
       } else if (error.response?.status === 429) {
@@ -259,4 +262,4 @@ export const AdminLoginPage: React.FC = () => {
   );
 };
 
-AdminLoginPage.displayName = 'AdminLoginPage';
+AdminLoginPage.displayName = 'AdminLoginPage';

frontend/src/pages/admin/AnalyticsPage.tsx

@@ -16,6 +16,7 @@ import { format, parseISO } from 'date-fns';
 import { Button, Card, Loading } from '../../components/common';
 import { useQuery } from '@tanstack/react-query';
 import { adminService } from '../../services/admin.service';
+import { settingsService } from '../../services/settings.service';
 import { useTranslation } from 'react-i18next';
 import { api } from '../../config/api';
 
@@ -72,6 +73,11 @@ export const AnalyticsPage: React.FC = () => {
     queryFn: () => adminService.getDashboardStats(),
   });
 
+  const { data: storageInfo } = useQuery({
+    queryKey: ['storage-info'],
+    queryFn: () => settingsService.getStorageInfo(),
+  });
+
   // Fetch Umami config from admin settings since we're in admin panel
   useEffect(() => {
     const fetchUmamiConfig = async () => {
@@ -154,12 +160,12 @@ export const AnalyticsPage: React.FC = () => {
 
     // Get actual download data for top galleries - sort by downloads
     const topGalleriesWithDownloads = apiData.topGalleries
-      .filter(gallery => gallery.downloads > 0) // Only show galleries with downloads
-      .sort((a, b) => (b.downloads || 0) - (a.downloads || 0)) // Sort by downloads
+      .filter(gallery => (gallery.downloads ?? 0) > 0) // Only show galleries with downloads
+      .sort((a, b) => (b.downloads ?? 0) - (a.downloads ?? 0)) // Sort by downloads
       .slice(0, 5) // Take top 5
       .map(gallery => ({
         name: gallery.event_name,
-        downloads: gallery.downloads || 0
+        downloads: gallery.downloads ?? 0
       }));
 
     return {
@@ -429,38 +435,68 @@ export const AnalyticsPage: React.FC = () => {
           </Card>
 
           {/* Storage Information */}
-          {dashboardStats && (
-            <Card padding="md">
-              <h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('analytics.storageUsage')}</h2>
-              <div className="space-y-4">
-                <div>
-                  <div className="flex justify-between text-sm mb-1">
-                    <span className="text-neutral-600">{t('analytics.used')}</span>
-                    <span className="font-medium">{adminService.formatBytes(dashboardStats.storageUsed)}</span>
+          {dashboardStats && (() => {
+            const softLimitBytes = storageInfo?.storage_soft_limit ?? storageInfo?.storage_limit ?? storageInfo?.recommended_soft_limit ?? null;
+            const safeSoftLimit = Math.max(
+              softLimitBytes ?? storageInfo?.recommended_soft_limit ?? (dashboardStats.storageUsed || 1),
+              1
+            );
+            const usageRatio = dashboardStats.storageUsed / safeSoftLimit;
+            const usagePercent = Math.round(usageRatio * 100);
+            const usageWidth = Math.min(usageRatio * 100, 100);
+            const overSoftLimit = softLimitBytes != null && dashboardStats.storageUsed >= softLimitBytes;
+            const limitDisplay = softLimitBytes != null
+              ? adminService.formatBytes(softLimitBytes)
+              : storageInfo?.recommended_soft_limit != null
+                ? adminService.formatBytes(storageInfo.recommended_soft_limit)
+                : t('settings.storage.unlimited');
+            const progressColor = overSoftLimit
+              ? 'bg-red-600'
+              : usagePercent >= 90
+                ? 'bg-amber-500'
+                : 'bg-primary-600';
+            const limitDescriptor = storageInfo
+              ? storageInfo.soft_limit_configured
+                ? t('admin.storageSoftLimitConfigured', { limit: limitDisplay })
+                : t('admin.storageSoftLimitRecommended', { limit: limitDisplay })
+              : t('admin.storageSoftLimitRecommended', { limit: limitDisplay });
+
+            return (
+              <Card padding="md">
+                <h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('analytics.storageUsage')}</h2>
+                <div className="space-y-4">
+                  <div>
+                    <div className="flex justify-between text-sm mb-1">
+                      <span className="text-neutral-600">{t('analytics.used')}</span>
+                      <span className="font-medium">{adminService.formatBytes(dashboardStats.storageUsed)}</span>
+                    </div>
+                    <div className="w-full bg-neutral-200 rounded-full h-2">
+                      <div
+                        className={`${progressColor} h-2 rounded-full transition-all`}
+                        style={{ width: `${usageWidth}%` }}
+                      />
+                    </div>
+                    <p className="text-xs text-neutral-500 mt-1">
+                      {usagePercent}% {t('analytics.of')} {limitDisplay}
+                    </p>
+                    <p className={`text-xs mt-1 ${overSoftLimit ? 'text-red-600 font-semibold' : 'text-red-500 font-medium'}`}>
+                      {limitDescriptor}
+                    </p>
                   </div>
-                  <div className="w-full bg-neutral-200 rounded-full h-2">
-                    <div
-                      className="bg-primary-600 h-2 rounded-full transition-all"
-                      style={{ width: `${Math.min((dashboardStats.storageUsed / (10 * 1024 * 1024 * 1024)) * 100, 100)}%` }}
-                    />
-                  </div>
-                  <p className="text-xs text-neutral-500 mt-1">
-                    {Math.round((dashboardStats.storageUsed / (10 * 1024 * 1024 * 1024)) * 100)}% {t('analytics.of')} 10 GB
-                  </p>
-                </div>
-                <div className="pt-2 border-t">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-neutral-600">{t('analytics.totalPhotos')}</span>
-                    <span className="font-medium">{dashboardStats.totalPhotos.toLocaleString()}</span>
-                  </div>
-                  <div className="flex justify-between text-sm mt-2">
-                    <span className="text-neutral-600">{t('analytics.activeEvents')}</span>
-                    <span className="font-medium">{dashboardStats.activeEvents}</span>
+                  <div className="pt-2 border-t">
+                    <div className="flex justify-between text-sm">
+                      <span className="text-neutral-600">{t('analytics.totalPhotos')}</span>
+                      <span className="font-medium">{dashboardStats.totalPhotos.toLocaleString()}</span>
+                    </div>
+                    <div className="flex justify-between text-sm mt-2">
+                      <span className="text-neutral-600">{t('analytics.activeEvents')}</span>
+                      <span className="font-medium">{dashboardStats.activeEvents}</span>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </Card>
-          )}
+              </Card>
+            );
+          })()}
         </div>
       </div>
 
@@ -480,4 +516,4 @@ export const AnalyticsPage: React.FC = () => {
       )}
     </div>
   );
-};
+};

frontend/src/pages/admin/BackupManagement.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentType } from 'react';
+
+export const BackupManagement: ComponentType<any>;

frontend/src/pages/admin/BrandingPage.tsx

@@ -150,7 +150,13 @@ export const BrandingPage: React.FC = () => {
       try {
         const logoUrl = await settingsService.uploadLogo(file);
         setBrandingSettings(prev => ({ ...prev, logo_url: logoUrl }));
-        setCurrentTheme(prev => ({ ...prev, logoUrl }));
+        setCurrentTheme(prev => {
+          const updated = { ...prev, logoUrl };
+          if (isPreviewMode) {
+            setTheme(updated);
+          }
+          return updated;
+        });
         toast.success(t('toast.uploadSuccess'));
       } catch (error) {
         console.error('Failed to upload logo:', error);
@@ -159,6 +165,17 @@ export const BrandingPage: React.FC = () => {
     }
   };
 
+  const handleRemoveLogo = () => {
+    setBrandingSettings(prev => ({ ...prev, logo_url: '' }));
+    setCurrentTheme(prev => {
+      const updated = { ...prev, logoUrl: '' };
+      if (isPreviewMode) {
+        setTheme(updated);
+      }
+      return updated;
+    });
+  };
+
   const handleWatermarkLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
@@ -351,7 +368,7 @@ export const BrandingPage: React.FC = () => {
                       />
                       <button
                         type="button"
-                        onClick={() => handleBrandingChange('logo_url', '')}
+                        onClick={handleRemoveLogo}
                         className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-600"
                       >
                         ×
@@ -685,7 +702,8 @@ export const BrandingPage: React.FC = () => {
                   {t('branding.livePreview')}
                 </h3>
                 <GalleryPreview 
-                  theme={currentTheme} 
+                  theme={currentTheme}
+                  branding={brandingSettings}
                   className="shadow-lg" 
                 />
               </Card>
@@ -708,4 +726,4 @@ export const BrandingPage: React.FC = () => {
       </div>
     </ErrorBoundary>
   );
-};
+};

frontend/src/pages/admin/CMSPage.tsx

@@ -1,13 +1,15 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'react-toastify';
-import { Save, FileText, Globe } from 'lucide-react';
+import { FileText, Globe, Sparkles, ShieldCheck } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import DOMPurify from 'dompurify';
 
 import { Button, Card, Input, Loading } from '../../components/common';
 import { CMSEditor } from '../../components/admin/CMSEditor';
 import { cmsService } from '../../services/cms.service';
 import type { CMSPage as CMSPageType } from '../../services/cms.service';
+import { settingsService, PublicSiteBranding } from '../../services/settings.service';
 
 export const CMSPage: React.FC = () => {
   const { t } = useTranslation();
@@ -15,6 +17,11 @@ export const CMSPage: React.FC = () => {
   const [selectedPage, setSelectedPage] = useState<string>('impressum');
   const [editingLang, setEditingLang] = useState<'en' | 'de'>('en');
   const [editForm, setEditForm] = useState<Partial<CMSPageType>>({});
+  const [publicSiteEnabled, setPublicSiteEnabled] = useState(false);
+  const [publicSiteHtml, setPublicSiteHtml] = useState('');
+  const [publicSiteCss, setPublicSiteCss] = useState('');
+  const [publicSiteBaseCss, setPublicSiteBaseCss] = useState('');
+  const [publicSiteBranding, setPublicSiteBranding] = useState<PublicSiteBranding | undefined>(undefined);
 
   // Fetch CMS pages
   const { data: pages, isLoading } = useQuery({
@@ -22,6 +29,33 @@ export const CMSPage: React.FC = () => {
     queryFn: cmsService.getPages,
   });
 
+  const { data: adminSettings, isLoading: isLoadingAdminSettings } = useQuery({
+    queryKey: ['admin-settings'],
+    queryFn: () => settingsService.getAllSettings(),
+  });
+
+  const { data: publicSiteDefaults, isLoading: isLoadingPublicDefaults } = useQuery({
+    queryKey: ['public-site-defaults'],
+    queryFn: () => settingsService.getPublicSiteDefaults(),
+  });
+
+  React.useEffect(() => {
+    if (publicSiteDefaults) {
+      setPublicSiteBaseCss(publicSiteDefaults.baseCss || '');
+      setPublicSiteBranding(publicSiteDefaults.branding);
+    }
+  }, [publicSiteDefaults]);
+
+  React.useEffect(() => {
+    if (!adminSettings) {
+      return;
+    }
+
+    setPublicSiteEnabled(Boolean(adminSettings.general_public_site_enabled));
+    setPublicSiteHtml((adminSettings.general_public_site_html as string) || '');
+    setPublicSiteCss((adminSettings.general_public_site_custom_css as string) || '');
+  }, [adminSettings]);
+
   // Update page mutation
   const updateMutation = useMutation({
     mutationFn: ({ slug, data }: { slug: string; data: Partial<CMSPageType> }) =>
@@ -62,6 +96,53 @@ export const CMSPage: React.FC = () => {
     setEditForm(prev => ({ ...prev, [field]: title }));
   };
 
+  const publicSiteSaveMutation = useMutation({
+    mutationFn: async () => {
+      const trimmedHtml = publicSiteHtml.trim();
+      if (publicSiteEnabled && !trimmedHtml) {
+        throw new Error('PUBLIC_SITE_HTML_REQUIRED');
+      }
+
+      await settingsService.updatePublicSite({
+        enabled: publicSiteEnabled,
+        html: trimmedHtml || '',
+        css: publicSiteCss,
+      });
+    },
+    onSuccess: async () => {
+      toast.success(t('settings.publicSite.saveSuccess'));
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['admin-settings'] }),
+        queryClient.invalidateQueries({ queryKey: ['public-site-defaults'] }),
+      ]);
+    },
+    onError: (error: any) => {
+      if (error?.message === 'PUBLIC_SITE_HTML_REQUIRED') {
+        toast.error(t('settings.publicSite.htmlRequired'));
+        return;
+      }
+      toast.error(t('settings.publicSite.saveError'));
+    },
+  });
+
+  const publicSiteResetMutation = useMutation({
+    mutationFn: () => settingsService.resetPublicSite(),
+    onSuccess: async (data) => {
+      toast.success(t('settings.publicSite.resetSuccess'));
+      setPublicSiteHtml(data.html || '');
+      setPublicSiteCss(data.css || '');
+      setPublicSiteBaseCss(data.baseCss || '');
+      setPublicSiteBranding(data.branding ?? publicSiteDefaults?.branding);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['admin-settings'] }),
+        queryClient.invalidateQueries({ queryKey: ['public-site-defaults'] }),
+      ]);
+    },
+    onError: () => {
+      toast.error(t('settings.publicSite.resetError'));
+    }
+  });
+
   if (isLoading) {
     return (
       <div className="flex items-center justify-center min-h-[400px]">
@@ -72,6 +153,131 @@ export const CMSPage: React.FC = () => {
 
   const currentPage = pages?.find(p => p.slug === selectedPage);
 
+  const publicSiteSanitizedHtml = useMemo(() => DOMPurify.sanitize(publicSiteHtml || '', {
+    ALLOWED_TAGS: [
+      'a', 'article', 'aside', 'blockquote', 'br', 'button', 'caption', 'div', 'em',
+      'figure', 'figcaption', 'footer', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header',
+      'hr', 'img', 'li', 'main', 'nav', 'ol', 'p', 'section', 'span', 'strong', 'sup',
+      'sub', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'ul'
+    ],
+    ALLOWED_ATTR: ['class', 'id', 'role', 'aria-label', 'aria-hidden', 'href', 'target', 'rel', 'src', 'alt', 'title', 'loading', 'decoding', 'width', 'height'],
+    ALLOW_UNKNOWN_PROTOCOLS: false,
+    ADD_ATTR: ['data-*'],
+  }), [publicSiteHtml]);
+
+  const sanitizeCss = (css: string) => {
+    if (!css) {
+      return '';
+    }
+
+    let sanitized = css;
+    const disallowedPatterns = [
+      /@import[^;]+;?/gi,
+      /@charset[^;]+;?/gi,
+      /expression\s*\([^)]*\)/gi,
+      /url\s*\(\s*(['"])\s*javascript:[^)]*\)/gi,
+      /url\s*\(\s*(['"])\s*data:text\/javascript[^)]*\)/gi
+    ];
+
+    disallowedPatterns.forEach((pattern) => {
+      sanitized = sanitized.replace(pattern, '');
+    });
+
+    sanitized = sanitized.replace(/[\u0000-\u001F\u007F]/g, '');
+
+    const MAX_LENGTH = 100 * 1024;
+    if (sanitized.length > MAX_LENGTH) {
+      sanitized = sanitized.slice(0, MAX_LENGTH);
+    }
+
+    return sanitized.trim();
+  };
+
+  const publicSiteSanitizedCss = useMemo(() => sanitizeCss(publicSiteCss || ''), [publicSiteCss]);
+
+  const applyBrandTokens = (html: string, branding: PublicSiteBranding | undefined) => {
+    if (!html || !branding) {
+      return html;
+    }
+
+    const tokens: Record<string, string> = {
+      company_name: branding.companyName || '',
+      company_tagline: branding.companyTagline || '',
+      support_email: branding.supportEmail || '',
+      brand_logo_url: branding.logoUrl || '/picpeak-logo-transparent.png',
+      brand_primary_hex: branding.colors.primary,
+      brand_accent_hex: branding.colors.accent,
+      brand_background_hex: branding.colors.background,
+      brand_text_hex: branding.colors.text,
+    };
+
+    return html.replace(/\{\{\s*(company_name|company_tagline|support_email|brand_logo_url|brand_primary_hex|brand_accent_hex|brand_background_hex|brand_text_hex)\s*\}\}/gi,
+      (_, key: string) => tokens[key] || '');
+  };
+
+  const publicSitePreview = useMemo(() => {
+    const branding = publicSiteBranding || publicSiteDefaults?.branding;
+    const substitutedHtml = applyBrandTokens(publicSiteSanitizedHtml, branding);
+    const inlineStyles = [
+      branding ? `:root {\n  --brand-primary: ${branding.colors.primary};\n  --brand-accent: ${branding.colors.accent};\n  --brand-background: ${branding.colors.background};\n  --brand-text: ${branding.colors.text};\n}` : '',
+      publicSiteBaseCss,
+      publicSiteSanitizedCss ? `/* Custom styles */\n${publicSiteSanitizedCss}` : ''
+    ].filter(Boolean).join('\n\n');
+
+    const logo = branding?.logoUrl ? `<img src="${branding.logoUrl}" alt="${branding.companyName || 'Brand logo'}" class="brand-logo" loading="lazy" decoding="async" />` : '';
+    const tagline = branding?.companyTagline ? `<p class="brand-tagline">${branding.companyTagline}</p>` : '';
+    const support = branding?.supportEmail ? `<a href="mailto:${branding.supportEmail}">${branding.supportEmail}</a>` : '';
+    const footerNote = branding?.footerText ? `<p>${branding.footerText}</p>` : '';
+
+    const displayName = branding?.companyName || 'Celebration Stories';
+
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>${inlineStyles}</style>
+</head>
+<body>
+  <div class="site-shell">
+    <header class="site-header">
+      <div class="header-inner">
+        <div class="brand">
+          ${logo}
+          <div class="brand-copy">
+            <p class="brand-label">${displayName}</p>
+            ${tagline}
+          </div>
+        </div>
+        <nav class="site-nav">
+          <a href="#collections">Collections</a>
+          <a href="#features">Features</a>
+          <a href="#stories">Stories</a>
+          <a href="#contact">Contact</a>
+        </nav>
+      </div>
+    </header>
+    <main class="site-main">
+      ${substitutedHtml}
+    </main>
+    <footer class="site-footer" id="contact">
+      <div class="footer-inner">
+        <div>
+          <h2>${displayName}</h2>
+          ${footerNote}
+        </div>
+        <div class="footer-contact">
+          <span>${support}</span>
+        </div>
+      </div>
+    </footer>
+  </div>
+</body>
+</html>`;
+  }, [publicSiteBranding, publicSiteDefaults, publicSiteSanitizedHtml, publicSiteBaseCss, publicSiteSanitizedCss]);
+
+  const publicSiteLoading = isLoadingAdminSettings || isLoadingPublicDefaults;
+
   return (
     <div>
       <div className="mb-6">
@@ -79,6 +285,135 @@ export const CMSPage: React.FC = () => {
         <p className="text-neutral-600 mt-1">{t('cms.subtitle')}</p>
       </div>
 
+      <div className="mb-8">
+        <Card className="space-y-6">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <div className="flex items-center gap-2 text-primary-600 mb-1">
+                <Globe className="w-5 h-5" />
+                <span className="text-sm font-semibold uppercase tracking-wide">{t('settings.publicSite.badge')}</span>
+              </div>
+              <h2 className="text-2xl font-semibold text-neutral-900">{t('settings.publicSite.title')}</h2>
+              <p className="text-neutral-600 mt-1 max-w-2xl">{t('settings.publicSite.subtitle')}</p>
+            </div>
+            <label className="flex items-center gap-2 cursor-pointer select-none">
+              <input
+                type="checkbox"
+                className="sr-only"
+                checked={publicSiteEnabled}
+                onChange={() => setPublicSiteEnabled((prev) => !prev)}
+              />
+              <span
+                aria-hidden="true"
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                  publicSiteEnabled ? 'bg-primary-600' : 'bg-neutral-300'
+                }`}
+              >
+                <span
+                  className={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition ${
+                    publicSiteEnabled ? 'translate-x-5' : 'translate-x-1'
+                  }`}
+                />
+              </span>
+              <span className="text-sm font-medium text-neutral-700">
+                {publicSiteEnabled ? t('settings.publicSite.enabled') : t('settings.publicSite.disabled')}
+              </span>
+            </label>
+          </div>
+
+          {publicSiteLoading ? (
+            <div className="flex items-center justify-center min-h-[240px]">
+              <Loading size="lg" text={t('settings.publicSite.loading')} />
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+              <div className="space-y-4">
+                <div>
+                  <label className="flex items-center gap-2 text-sm font-medium text-neutral-800 mb-2">
+                    <Sparkles className="w-4 h-4 text-primary-500" />
+                    {t('settings.publicSite.htmlLabel')}
+                  </label>
+                  <textarea
+                    className="w-full h-64 font-mono text-sm rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:bg-neutral-100 disabled:text-neutral-500"
+                    value={publicSiteHtml}
+                    onChange={(event) => setPublicSiteHtml(event.target.value)}
+                    disabled={!publicSiteEnabled}
+                    placeholder={t('settings.publicSite.htmlPlaceholder') || ''}
+                  />
+                  <p className="text-xs text-neutral-500 mt-1">
+                    {t('settings.publicSite.htmlHelp')}
+                  </p>
+                </div>
+
+                <div>
+                  <label className="flex items-center gap-2 text-sm font-medium text-neutral-800 mb-2">
+                    <ShieldCheck className="w-4 h-4 text-primary-500" />
+                    {t('settings.publicSite.cssLabel')}
+                  </label>
+                  <textarea
+                    className="w-full h-48 font-mono text-sm rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:bg-neutral-100 disabled:text-neutral-500"
+                    value={publicSiteCss}
+                    onChange={(event) => setPublicSiteCss(event.target.value)}
+                    disabled={!publicSiteEnabled}
+                    placeholder={t('settings.publicSite.cssPlaceholder') || ''}
+                  />
+                  <p className="text-xs text-neutral-500 mt-1">
+                    {t('settings.publicSite.cssHelp')}
+                  </p>
+                </div>
+
+                <div className="flex flex-wrap gap-3">
+                  <Button
+                    variant="primary"
+                    onClick={() => publicSiteSaveMutation.mutate()}
+                    disabled={publicSiteSaveMutation.isPending}
+                    isLoading={publicSiteSaveMutation.isPending}
+                  >
+                    {publicSiteSaveMutation.isPending ? t('settings.publicSite.saving') : t('settings.publicSite.saveCta')}
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    onClick={() => publicSiteResetMutation.mutate()}
+                    disabled={publicSiteResetMutation.isPending}
+                    isLoading={publicSiteResetMutation.isPending}
+                  >
+                    {publicSiteResetMutation.isPending ? t('settings.publicSite.resetting') : t('settings.publicSite.resetCta')}
+                  </Button>
+                </div>
+
+                <div className="rounded-lg bg-neutral-50 border border-neutral-200 p-3 text-xs text-neutral-600 leading-relaxed">
+                  <p className="font-semibold mb-1">{t('settings.publicSite.sanitizationNotice')}</p>
+                  <p>{t('settings.publicSite.htmlHelp')}</p>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-4">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-sm font-semibold text-neutral-800 uppercase tracking-wide">
+                    {t('settings.publicSite.previewTitle')}
+                  </h3>
+                  <span className="text-xs text-neutral-500">{t('settings.publicSite.previewSandboxed')}</span>
+                </div>
+                {publicSiteEnabled ? (
+                  <div className="rounded-xl border border-neutral-200 overflow-hidden shadow-sm bg-white">
+                    <iframe
+                      title="public-site-preview"
+                      sandbox="allow-same-origin"
+                      className="w-full h-[480px] bg-white"
+                      srcDoc={publicSitePreview}
+                    />
+                  </div>
+                ) : (
+                  <div className="rounded-xl border border-dashed border-neutral-300 bg-neutral-50 p-8 text-center text-sm text-neutral-500">
+                    {t('settings.publicSite.previewDisabled')}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </Card>
+      </div>
+
       <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
         {/* Page Selection */}
         <div className="lg:col-span-1">
@@ -200,4 +535,4 @@ export const CMSPage: React.FC = () => {
       </div>
     </div>
   );
-};
+};

frontend/src/pages/admin/CMSPageEnhanced.tsx

@@ -1,14 +1,16 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'react-toastify';
-import { Save, FileText, Globe, Clock } from 'lucide-react';
+import { FileText, Globe, Clock, Sparkles, ShieldCheck } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { debounce } from 'lodash';
+import DOMPurify from 'dompurify';
 
 import { Button, Card, Input, Loading } from '../../components/common';
 import { CMSEditor } from '../../components/admin/CMSEditor';
 import { cmsService } from '../../services/cms.service';
 import type { CMSPage as CMSPageType } from '../../services/cms.service';
+import { settingsService, PublicSiteBranding } from '../../services/settings.service';
 
 export const CMSPageEnhanced: React.FC = () => {
   const { t } = useTranslation();
@@ -19,6 +21,11 @@ export const CMSPageEnhanced: React.FC = () => {
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const [lastSaved, setLastSaved] = useState<Date | null>(null);
   const [isAutoSaving, setIsAutoSaving] = useState(false);
+  const [publicSiteEnabled, setPublicSiteEnabled] = useState(false);
+  const [publicSiteHtml, setPublicSiteHtml] = useState('');
+  const [publicSiteCss, setPublicSiteCss] = useState('');
+  const [publicSiteBaseCss, setPublicSiteBaseCss] = useState('');
+  const [publicSiteBranding, setPublicSiteBranding] = useState<PublicSiteBranding | undefined>(undefined);
 
   // Fetch CMS pages
   const { data: pages, isLoading } = useQuery({
@@ -26,6 +33,16 @@ export const CMSPageEnhanced: React.FC = () => {
     queryFn: cmsService.getPages,
   });
 
+  const { data: adminSettings, isLoading: isLoadingAdminSettings } = useQuery({
+    queryKey: ['admin-settings'],
+    queryFn: () => settingsService.getAllSettings(),
+  });
+
+  const { data: publicSiteDefaults, isLoading: isLoadingPublicDefaults } = useQuery({
+    queryKey: ['public-site-defaults'],
+    queryFn: () => settingsService.getPublicSiteDefaults(),
+  });
+
   // Update page mutation
   const updateMutation = useMutation({
     mutationFn: ({ slug, data }: { slug: string; data: Partial<CMSPageType> }) =>
@@ -45,6 +62,53 @@ export const CMSPageEnhanced: React.FC = () => {
     },
   });
 
+  const publicSiteSaveMutation = useMutation({
+    mutationFn: async () => {
+      const trimmedHtml = publicSiteHtml.trim();
+      if (publicSiteEnabled && !trimmedHtml) {
+        throw new Error('PUBLIC_SITE_HTML_REQUIRED');
+      }
+
+      await settingsService.updatePublicSite({
+        enabled: publicSiteEnabled,
+        html: trimmedHtml || '',
+        css: publicSiteCss,
+      });
+    },
+    onSuccess: async () => {
+      toast.success(t('settings.publicSite.saveSuccess'));
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['admin-settings'] }),
+        queryClient.invalidateQueries({ queryKey: ['public-site-defaults'] }),
+      ]);
+    },
+    onError: (error: any) => {
+      if (error?.message === 'PUBLIC_SITE_HTML_REQUIRED') {
+        toast.error(t('settings.publicSite.htmlRequired'));
+        return;
+      }
+      toast.error(t('settings.publicSite.saveError'));
+    },
+  });
+
+  const publicSiteResetMutation = useMutation({
+    mutationFn: () => settingsService.resetPublicSite(),
+    onSuccess: async (data) => {
+      toast.success(t('settings.publicSite.resetSuccess'));
+      setPublicSiteHtml(data.html || '');
+      setPublicSiteCss(data.css || '');
+      setPublicSiteBaseCss(data.baseCss || '');
+      setPublicSiteBranding(data.branding ?? publicSiteDefaults?.branding);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['admin-settings'] }),
+        queryClient.invalidateQueries({ queryKey: ['public-site-defaults'] }),
+      ]);
+    },
+    onError: () => {
+      toast.error(t('settings.publicSite.resetError'));
+    },
+  });
+
   // Auto-save functionality
   const autoSave = useCallback(
     debounce(() => {
@@ -59,6 +123,23 @@ export const CMSPageEnhanced: React.FC = () => {
     [hasUnsavedChanges, editForm, selectedPage]
   );
 
+  useEffect(() => {
+    if (publicSiteDefaults) {
+      setPublicSiteBaseCss(publicSiteDefaults.baseCss || '');
+      setPublicSiteBranding(publicSiteDefaults.branding);
+    }
+  }, [publicSiteDefaults]);
+
+  useEffect(() => {
+    if (!adminSettings) {
+      return;
+    }
+
+    setPublicSiteEnabled(Boolean(adminSettings.general_public_site_enabled));
+    setPublicSiteHtml((adminSettings.general_public_site_html as string) || '');
+    setPublicSiteCss((adminSettings.general_public_site_custom_css as string) || '');
+  }, [adminSettings]);
+
   // Trigger auto-save when content changes
   useEffect(() => {
     if (hasUnsavedChanges) {
@@ -113,6 +194,126 @@ export const CMSPageEnhanced: React.FC = () => {
     return () => window.removeEventListener('beforeunload', handleBeforeUnload);
   }, [hasUnsavedChanges]);
 
+  const currentPage = pages?.find(p => p.slug === selectedPage);
+  const publicSiteSanitizedHtml = useMemo(() => DOMPurify.sanitize(publicSiteHtml || '', {
+    ALLOWED_TAGS: [
+      'a', 'article', 'aside', 'blockquote', 'br', 'button', 'caption', 'div', 'em',
+      'figure', 'figcaption', 'footer', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header',
+      'hr', 'img', 'li', 'main', 'nav', 'ol', 'p', 'section', 'span', 'strong', 'sup',
+      'sub', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'ul'
+    ],
+    ALLOWED_ATTR: ['class', 'id', 'role', 'aria-label', 'aria-hidden', 'href', 'target', 'rel', 'src', 'alt', 'title', 'loading', 'decoding', 'width', 'height'],
+    ALLOW_UNKNOWN_PROTOCOLS: false,
+    ADD_ATTR: ['data-*'],
+  }), [publicSiteHtml]);
+
+  const sanitizeCss = (css: string) => {
+    if (!css) {
+      return '';
+    }
+
+    let sanitized = css;
+    const disallowedPatterns = [
+      /@import[^;]+;?/gi,
+      /@charset[^;]+;?/gi,
+      /expression\s*\([^)]*\)/gi,
+      /url\s*\(\s*(['"])\s*javascript:[^)]*\)/gi,
+      /url\s*\(\s*(['"])\s*data:text\/javascript[^)]*\)/gi
+    ];
+
+    disallowedPatterns.forEach((pattern) => {
+      sanitized = sanitized.replace(pattern, '');
+    });
+
+    sanitized = sanitized.replace(/[\u0000-\u001F\u007F]/g, '');
+
+    const MAX_LENGTH = 100 * 1024;
+    if (sanitized.length > MAX_LENGTH) {
+      sanitized = sanitized.slice(0, MAX_LENGTH);
+    }
+
+    return sanitized.trim();
+  };
+
+  const publicSiteSanitizedCss = useMemo(() => sanitizeCss(publicSiteCss || ''), [publicSiteCss]);
+
+  const applyBrandTokens = (html: string, branding: PublicSiteBranding | undefined) => {
+    if (!html || !branding) {
+      return html;
+    }
+
+    const tokens: Record<string, string> = {
+      company_name: branding.companyName || '',
+      company_tagline: branding.companyTagline || '',
+      support_email: branding.supportEmail || '',
+    };
+
+    return html.replace(/\{\{\s*(company_name|company_tagline|support_email)\s*\}\}/gi, (_, key: string) => tokens[key] || '');
+  };
+
+  const publicSitePreview = useMemo(() => {
+    const branding = publicSiteBranding || publicSiteDefaults?.branding;
+    const substitutedHtml = applyBrandTokens(publicSiteSanitizedHtml, branding);
+    const inlineStyles = [
+      branding ? `:root {\n  --brand-primary: ${branding.colors.primary};\n  --brand-accent: ${branding.colors.accent};\n  --brand-background: ${branding.colors.background};\n  --brand-text: ${branding.colors.text};\n}` : '',
+      publicSiteBaseCss,
+      publicSiteSanitizedCss ? `/* Custom styles */\n${publicSiteSanitizedCss}` : ''
+    ].filter(Boolean).join('\n\n');
+
+    const logo = branding?.logoUrl ? `<img src="${branding.logoUrl}" alt="${branding.companyName || 'Brand logo'}" class="brand-logo" loading="lazy" decoding="async" />` : '';
+    const tagline = branding?.companyTagline ? `<p class="brand-tagline">${branding.companyTagline}</p>` : '';
+    const support = branding?.supportEmail ? `<a href="mailto:${branding.supportEmail}">${branding.supportEmail}</a>` : '';
+    const footerNote = branding?.footerText ? `<p>${branding.footerText}</p>` : '';
+
+    const displayName = branding?.companyName || 'Celebration Stories';
+
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>${inlineStyles}</style>
+</head>
+<body>
+  <div class="site-shell">
+    <header class="site-header">
+      <div class="header-inner">
+        <div class="brand">
+          ${logo}
+          <div class="brand-copy">
+            <p class="brand-label">${displayName}</p>
+            ${tagline}
+          </div>
+        </div>
+        <nav class="site-nav">
+          <a href="#collections">Collections</a>
+          <a href="#features">Features</a>
+          <a href="#stories">Stories</a>
+          <a href="#contact">Contact</a>
+        </nav>
+      </div>
+    </header>
+    <main class="site-main">
+      ${substitutedHtml}
+    </main>
+    <footer class="site-footer" id="contact">
+      <div class="footer-inner">
+        <div>
+          <h2>${displayName}</h2>
+          ${footerNote}
+        </div>
+        <div class="footer-contact">
+          <span>${support}</span>
+        </div>
+      </div>
+    </footer>
+  </div>
+</body>
+</html>`;
+  }, [publicSiteBranding, publicSiteDefaults, publicSiteSanitizedHtml, publicSiteBaseCss, publicSiteSanitizedCss]);
+
+  const publicSiteLoading = isLoadingAdminSettings || isLoadingPublicDefaults;
+
   if (isLoading) {
     return (
       <div className="flex items-center justify-center min-h-[400px]">
@@ -121,8 +322,6 @@ export const CMSPageEnhanced: React.FC = () => {
     );
   }
 
-  const currentPage = pages?.find(p => p.slug === selectedPage);
-
   return (
     <div>
       <div className="mb-6">
@@ -130,6 +329,135 @@ export const CMSPageEnhanced: React.FC = () => {
         <p className="text-neutral-600 mt-1">{t('cms.subtitle')}</p>
       </div>
 
+      <div className="mb-8">
+        <Card className="space-y-6">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <div className="flex items-center gap-2 text-primary-600 mb-1">
+                <Globe className="w-5 h-5" />
+                <span className="text-sm font-semibold uppercase tracking-wide">{t('settings.publicSite.badge')}</span>
+              </div>
+              <h2 className="text-2xl font-semibold text-neutral-900">{t('settings.publicSite.title')}</h2>
+              <p className="text-neutral-600 mt-1 max-w-2xl">{t('settings.publicSite.subtitle')}</p>
+            </div>
+            <label className="flex items-center gap-2 cursor-pointer select-none">
+              <input
+                type="checkbox"
+                className="sr-only"
+                checked={publicSiteEnabled}
+                onChange={() => setPublicSiteEnabled((prev) => !prev)}
+              />
+              <span
+                aria-hidden="true"
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                  publicSiteEnabled ? 'bg-primary-600' : 'bg-neutral-300'
+                }`}
+              >
+                <span
+                  className={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition ${
+                    publicSiteEnabled ? 'translate-x-5' : 'translate-x-1'
+                  }`}
+                />
+              </span>
+              <span className="text-sm font-medium text-neutral-700">
+                {publicSiteEnabled ? t('settings.publicSite.enabled') : t('settings.publicSite.disabled')}
+              </span>
+            </label>
+          </div>
+
+          {publicSiteLoading ? (
+            <div className="flex items-center justify-center min-h-[240px]">
+              <Loading size="lg" text={t('settings.publicSite.loading')} />
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+              <div className="space-y-4">
+                <div>
+                  <label className="flex items-center gap-2 text-sm font-medium text-neutral-800 mb-2">
+                    <Sparkles className="w-4 h-4 text-primary-500" />
+                    {t('settings.publicSite.htmlLabel')}
+                  </label>
+                  <textarea
+                    className="w-full h-64 font-mono text-sm rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:bg-neutral-100 disabled:text-neutral-500"
+                    value={publicSiteHtml}
+                    onChange={(event) => setPublicSiteHtml(event.target.value)}
+                    disabled={!publicSiteEnabled}
+                    placeholder={t('settings.publicSite.htmlPlaceholder') || ''}
+                  />
+                  <p className="text-xs text-neutral-500 mt-1">
+                    {t('settings.publicSite.htmlHelp')}
+                  </p>
+                </div>
+
+                <div>
+                  <label className="flex items-center gap-2 text-sm font-medium text-neutral-800 mb-2">
+                    <ShieldCheck className="w-4 h-4 text-primary-500" />
+                    {t('settings.publicSite.cssLabel')}
+                  </label>
+                  <textarea
+                    className="w-full h-48 font-mono text-sm rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:bg-neutral-100 disabled:text-neutral-500"
+                    value={publicSiteCss}
+                    onChange={(event) => setPublicSiteCss(event.target.value)}
+                    disabled={!publicSiteEnabled}
+                    placeholder={t('settings.publicSite.cssPlaceholder') || ''}
+                  />
+                  <p className="text-xs text-neutral-500 mt-1">
+                    {t('settings.publicSite.cssHelp')}
+                  </p>
+                </div>
+
+                <div className="flex flex-wrap gap-3">
+                  <Button
+                    variant="primary"
+                    onClick={() => publicSiteSaveMutation.mutate()}
+                    disabled={publicSiteSaveMutation.isPending}
+                    isLoading={publicSiteSaveMutation.isPending}
+                  >
+                    {publicSiteSaveMutation.isPending ? t('settings.publicSite.saving') : t('settings.publicSite.saveCta')}
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    onClick={() => publicSiteResetMutation.mutate()}
+                    disabled={publicSiteResetMutation.isPending}
+                    isLoading={publicSiteResetMutation.isPending}
+                  >
+                    {publicSiteResetMutation.isPending ? t('settings.publicSite.resetting') : t('settings.publicSite.resetCta')}
+                  </Button>
+                </div>
+
+                <div className="rounded-lg bg-neutral-50 border border-neutral-200 p-3 text-xs text-neutral-600 leading-relaxed">
+                  <p className="font-semibold mb-1">{t('settings.publicSite.sanitizationNotice')}</p>
+                  <p>{t('settings.publicSite.htmlHelp')}</p>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-4">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-sm font-semibold text-neutral-800 uppercase tracking-wide">
+                    {t('settings.publicSite.previewTitle')}
+                  </h3>
+                  <span className="text-xs text-neutral-500">{t('settings.publicSite.previewSandboxed')}</span>
+                </div>
+                {publicSiteEnabled ? (
+                  <div className="rounded-xl border border-neutral-200 overflow-hidden shadow-sm bg-white">
+                    <iframe
+                      title="public-site-preview"
+                      sandbox="allow-same-origin"
+                      className="w-full h-[480px] bg-white"
+                      srcDoc={publicSitePreview}
+                    />
+                  </div>
+                ) : (
+                  <div className="rounded-xl border border-dashed border-neutral-300 bg-neutral-50 p-8 text-center text-sm text-neutral-500">
+                    {t('settings.publicSite.previewDisabled')}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </Card>
+      </div>
+
       <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
         {/* Page Selection */}
         <div className="lg:col-span-1">
@@ -287,4 +615,4 @@ export const CMSPageEnhanced: React.FC = () => {
       </div>
     </div>
   );
-};
+};

frontend/src/pages/admin/CreateEventPageEnhanced.tsx

@@ -69,7 +69,7 @@ const EVENT_TYPES = [
 
 export const CreateEventPageEnhanced: React.FC = () => {
   const navigate = useNavigate();
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const { format } = useLocalizedDate();
   const isMountedRef = useRef(true);
   const [showThemeCustomizer, setShowThemeCustomizer] = useState(false);
@@ -225,7 +225,9 @@ export const CreateEventPageEnhanced: React.FC = () => {
     if (!validateForm()) {
       return;
     }
-    
+
+    const feedbackSettings = formData.feedback_settings;
+
     const payload = {
       event_type: formData.event_type,
       event_name: formData.event_name,
@@ -239,9 +241,16 @@ export const CreateEventPageEnhanced: React.FC = () => {
       expiration_days: formData.expires_in_days,
       allow_user_uploads: formData.allow_user_uploads,
       upload_category_id: formData.upload_category_id,
-      feedback_settings: formData.feedback_settings,
+      feedback_enabled: feedbackSettings.feedback_enabled,
+      allow_ratings: feedbackSettings.allow_ratings,
+      allow_likes: feedbackSettings.allow_likes,
+      allow_comments: feedbackSettings.allow_comments,
+      allow_favorites: feedbackSettings.allow_favorites,
+      require_name_email: feedbackSettings.require_name_email,
+      moderate_comments: feedbackSettings.moderate_comments,
+      show_feedback_to_guests: feedbackSettings.show_feedback_to_guests,
     };
-    
+
     createMutation.mutate(payload);
   };
 
@@ -632,4 +641,4 @@ export const CreateEventPageEnhanced: React.FC = () => {
       </form>
     </div>
   );
-};
+};

frontend/src/pages/admin/EventDetailsPage.tsx

@@ -29,10 +29,16 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { eventsService } from '../../services/events.service';
 import { archiveService } from '../../services/archive.service';
 import { externalMediaService } from '../../services/externalMedia.service';
-import { photosService, AdminPhoto } from '../../services/photos.service';
+import { photosService, AdminPhoto, type PhotoFilters as PhotoFilterParams } from '../../services/photos.service';
 import { feedbackService, FeedbackSettings as FeedbackSettingsType } from '../../services/feedback.service';
 import { ThemeConfig, GALLERY_THEME_PRESETS } from '../../types/theme.types';
-import { useTranslation } from 'react-i18next';
+
+const resolveShareLink = (link: string): string => {
+  if (!link) return '#';
+  if (link.startsWith('http')) return link;
+  if (link.startsWith('/')) return link;
+  return `/gallery/${link}`;
+};
 
 const ExternalFolderPicker: React.FC<{ value: string; onChange: (p: string) => void }> = ({ value, onChange }) => {
   const { t } = useTranslation();
@@ -105,15 +111,29 @@ export const EventDetailsPage: React.FC = () => {
     }
   }, [id, navigate]);
   
+  type EditFormState = {
+    welcome_message: string;
+    color_theme: string;
+    expires_at: string;
+    allow_user_uploads: boolean;
+    upload_category_id: number | null;
+    hero_photo_id: number | null;
+    host_name: string;
+    source_mode: 'managed' | 'reference';
+    external_path: string;
+  };
+
   const [isEditing, setIsEditing] = useState(false);
-  const [editForm, setEditForm] = useState({
+  const [editForm, setEditForm] = useState<EditFormState>({
     welcome_message: '',
     color_theme: '',
     expires_at: '',
     allow_user_uploads: false,
-    upload_category_id: null as number | null,
-    hero_photo_id: null as number | null,
+    upload_category_id: null,
+    hero_photo_id: null,
     host_name: '',
+    source_mode: 'managed',
+    external_path: '',
   });
   const [feedbackSettings, setFeedbackSettings] = useState<FeedbackSettingsType>({
     feedback_enabled: false,
@@ -121,8 +141,12 @@ export const EventDetailsPage: React.FC = () => {
     allow_likes: true,
     allow_comments: true,
     allow_favorites: true,
-    require_moderation: true,
-    show_public_stats: false
+    require_name_email: false,
+    moderate_comments: true,
+    show_feedback_to_guests: true,
+    enable_rate_limiting: false,
+    rate_limit_window_minutes: 15,
+    rate_limit_max_requests: 10,
   });
   const [copiedLink, setCopiedLink] = useState(false);
   const [showPhotoUpload, setShowPhotoUpload] = useState(false);
@@ -136,10 +160,10 @@ export const EventDetailsPage: React.FC = () => {
   const [currentPresetName, setCurrentPresetName] = useState<string>('default');
   
   // Photo filters state
-  const [photoFilters, setPhotoFilters] = useState({
+  const [photoFilters, setPhotoFilters] = useState<PhotoFilterParams>({
     category_id: undefined as number | null | undefined,
     search: '',
-    sort: 'date' as 'date' | 'name' | 'size' | 'rating',
+    sort: 'date',
     order: 'desc' as 'asc' | 'desc'
   });
 
@@ -248,6 +272,8 @@ export const EventDetailsPage: React.FC = () => {
       upload_category_id: event.upload_category_id || null,
       hero_photo_id: event.hero_photo_id || null,
       host_name: event.host_name || '',
+      source_mode: event.source_mode === 'reference' ? 'reference' : 'managed',
+      external_path: event.external_path || '',
     });
     
     // Set feedback settings if available
@@ -295,6 +321,13 @@ export const EventDetailsPage: React.FC = () => {
       // Use preset name for non-custom themes
       themeToSave = currentPresetName;
     }
+
+    const externalPathToSave = editForm.external_path?.trim() || '';
+
+    if (editForm.source_mode === 'reference' && !externalPathToSave) {
+      toast.error(t('events.externalFolderRequired', 'Please select an external folder before saving.'));
+      return;
+    }
     
     // Clean up the data - remove undefined values
     const updateData: any = {
@@ -315,6 +348,10 @@ export const EventDetailsPage: React.FC = () => {
     if (editForm.hero_photo_id !== undefined) {
       updateData.hero_photo_id = editForm.hero_photo_id;
     }
+    updateData.source_mode = editForm.source_mode;
+    updateData.external_path = editForm.source_mode === 'reference'
+      ? externalPathToSave
+      : null;
     if (editForm.host_name !== undefined && editForm.host_name !== null) {
       updateData.host_name = editForm.host_name;
     }
@@ -458,11 +495,7 @@ export const EventDetailsPage: React.FC = () => {
             )}
             {event.share_link && !isEditing && (
               <a
-                href={
-                  event.share_link.startsWith('http') 
-                    ? event.share_link
-                    : `/gallery/${event.share_link}`
-                }
+                href={resolveShareLink(event.share_link)}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-primary-600 hover:text-primary-700 border border-primary-600 rounded-lg hover:bg-primary-50 transition-colors"
@@ -607,6 +640,47 @@ export const EventDetailsPage: React.FC = () => {
                   onSelect={(photoId) => setEditForm(prev => ({ ...prev, hero_photo_id: photoId }))}
                   isEditing={isEditing}
                 />
+
+                <div>
+                  <label className="block text-sm font-medium text-neutral-700 mb-1">
+                    {t('events.sourceMode', 'Source Mode')}
+                  </label>
+                  <select
+                    value={editForm.source_mode}
+                    onChange={(e) => {
+                      const mode = e.target.value as 'managed' | 'reference';
+                      setEditForm(prev => ({
+                        ...prev,
+                        source_mode: mode,
+                        external_path: mode === 'reference'
+                          ? (prev.external_path || event.external_path || '')
+                          : ''
+                      }));
+                    }}
+                    className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                  >
+                    <option value="managed">{t('events.sourceModeManaged', 'Managed (upload to PicPeak)')}</option>
+                    <option value="reference">{t('events.sourceModeReference', 'Reference external folder')}</option>
+                  </select>
+                  <p className="text-xs text-neutral-500 mt-1">
+                    {t('events.sourceModeHelp', 'Use managed mode for direct uploads or reference an external folder that is mounted at /external-media in Docker.')}
+                  </p>
+                </div>
+
+                {editForm.source_mode === 'reference' && (
+                  <div className="mt-3">
+                    <label className="block text-sm font-medium text-neutral-700 mb-2">
+                      {t('events.externalFolder', 'External Folder')}
+                    </label>
+                    <ExternalFolderPicker
+                      value={editForm.external_path || ''}
+                      onChange={(folder) => setEditForm(prev => ({ ...prev, external_path: folder }))}
+                    />
+                    <p className="text-xs text-neutral-500 mt-1">
+                      {t('events.externalFolderHint', 'These folders come from the /external-media mount inside the container. Ensure it is accessible to the backend process.')}
+                    </p>
+                  </div>
+                )}
                 
                 <div>
                   <label className="flex items-center">
@@ -1004,9 +1078,9 @@ export const EventDetailsPage: React.FC = () => {
           <PhotoFilters
             categories={categories}
             selectedCategory={photoFilters.category_id}
-            searchTerm={photoFilters.search}
-            sortBy={photoFilters.sort}
-            sortOrder={photoFilters.order}
+            searchTerm={photoFilters.search ?? ''}
+            sortBy={photoFilters.sort ?? 'date'}
+            sortOrder={photoFilters.order ?? 'desc'}
             onCategoryChange={(categoryId) => setPhotoFilters(prev => ({ ...prev, category_id: categoryId }))}
             onSearchChange={(search) => setPhotoFilters(prev => ({ ...prev, search }))}
             onSortChange={(sort, order) => setPhotoFilters(prev => ({ ...prev, sort, order }))}

frontend/src/pages/admin/EventFeedbackPage.tsx

@@ -11,7 +11,6 @@ import {
   Download,
   Shield,
   CheckCircle,
-  XCircle,
   Eye,
   EyeOff,
   Trash2
@@ -25,7 +24,7 @@ import { FeedbackSettings } from '../../components/admin';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { eventsService } from '../../services/events.service';
 import { feedbackService } from '../../services/feedback.service';
-import type { PhotoFeedback, FeedbackAnalytics } from '../../services/feedback.service';
+import type { PhotoFeedback, FeedbackAnalytics, FeedbackResponse } from '../../services/feedback.service';
 
 export const EventFeedbackPage: React.FC = () => {
   const { id } = useParams<{ id: string }>();
@@ -44,7 +43,7 @@ export const EventFeedbackPage: React.FC = () => {
   // Fetch event details
   const { data: event, isLoading: eventLoading } = useQuery({
     queryKey: ['event', id],
-    queryFn: () => eventsService.getEvent(id!),
+    queryFn: () => eventsService.getEvent(Number(id)),
     enabled: !!id
   });
 
@@ -56,14 +55,14 @@ export const EventFeedbackPage: React.FC = () => {
   });
 
   // Fetch feedback list
-  const { data: feedbackData, isLoading: feedbackLoading } = useQuery({
+  const { data: feedbackData, isLoading: feedbackLoading } = useQuery<FeedbackResponse>({
     queryKey: ['event-feedback', id, feedbackFilter],
     queryFn: () => feedbackService.getEventFeedback(id!, feedbackFilter),
     enabled: !!id && activeTab === 'feedback'
   });
 
   // Fetch analytics
-  const { data: analytics, isLoading: analyticsLoading } = useQuery({
+  const { data: analytics, isLoading: analyticsLoading } = useQuery<FeedbackAnalytics>({
     queryKey: ['feedback-analytics', id],
     queryFn: () => feedbackService.getEventFeedbackAnalytics(id!),
     enabled: !!id && activeTab === 'analytics'
@@ -133,6 +132,10 @@ export const EventFeedbackPage: React.FC = () => {
     return <div>{t('events.notFound', 'Event not found')}</div>;
   }
 
+  const pagination = feedbackData?.pagination;
+  const perPage = pagination?.per_page ?? feedbackFilter.limit ?? 20;
+  const totalPages = perPage ? Math.max(1, Math.ceil((pagination?.total ?? 0) / perPage)) : 1;
+
   return (
     <div className="max-w-7xl mx-auto">
       {/* Header */}
@@ -360,7 +363,7 @@ export const EventFeedbackPage: React.FC = () => {
           )}
 
           {/* Pagination */}
-          {feedbackData?.pagination && feedbackData.pagination.pages > 1 && (
+          {pagination && totalPages > 1 && (
             <div className="flex justify-center gap-2 mt-4">
               <Button
                 variant="outline"
@@ -373,13 +376,13 @@ export const EventFeedbackPage: React.FC = () => {
               <span className="flex items-center px-3 text-sm text-neutral-600">
                 {t('common.pageOf', 'Page {{current}} of {{total}}', {
                   current: feedbackFilter.page,
-                  total: feedbackData.pagination.pages
+                  total: totalPages
                 })}
               </span>
               <Button
                 variant="outline"
                 size="sm"
-                disabled={feedbackFilter.page === feedbackData.pagination.pages}
+                disabled={feedbackFilter.page >= totalPages}
                 onClick={() => setFeedbackFilter({ ...feedbackFilter, page: feedbackFilter.page + 1 })}
               >
                 {t('common.next', 'Next')}