images fixing with database saves

backend/Dockerfile

@@ -5,67 +5,56 @@ FROM node:20-alpine AS builder
 
 WORKDIR /app
 
-# Install build dependencies for native modules (better-sqlite3, sharp)
 RUN apk add --no-cache python3 make g++ vips-dev
 
-# Install dependencies
 COPY package*.json ./
-# Use npm ci when lockfile exists, fallback to npm install for local/dev
 RUN npm ci || npm install
 
-# Copy source
 COPY . .
 
-# Build TypeScript
+RUN npm run db:generate || true
+
 RUN npm run build
 
+
 # Stage 2: Production
 FROM node:20-alpine
 
 WORKDIR /app
 
-# Install runtime dependencies (git for simple-git, sqlite3 CLI tool, vips for sharp)
-# Note: python3, make, g++ are needed for native module compilation
 RUN apk add --no-cache git sqlite vips vips-dev python3 make g++
 
-# Copy package files first
 COPY --from=builder /app/package*.json ./
 
-# Install all production dependencies and rebuild sharp for linuxmusl-x64
 RUN npm ci --omit=dev || npm install --production && \
     npm rebuild sharp
 
-# Clean up build dependencies after installation to reduce image size
 RUN apk del python3 make g++ vips-dev
 
-# Copy built files from builder
+
+# Copy built files
 COPY --from=builder /app/dist ./dist
 COPY --from=builder /app/src/db/migrations ./dist/db/migrations
 
-# Copy migration script and migrated images
 COPY --from=builder /app/migrate-production.js ./migrate-production.js
 COPY --from=builder /app/data/images ./data/images
 
-# Create directories
 RUN mkdir -p /app/workspace /app/data
 
-# Ensure proper permissions
 RUN chown -R node:node /app
-
-# Switch to non-root user
 USER node
 
-# Expose port
 EXPOSE 8080
 
-# Set environment
 ENV NODE_ENV=production
 ENV PORT=8080
 ENV DATABASE_PATH=/app/data/gallus_cms.db
 
-# Health check
-HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
-  CMD node -e "require('http').get('http://localhost:8080/health', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})"
 
-# Run DB migrations if present, then start application
-CMD ["/bin/sh", "-lc", "mkdir -p /app/data/images/events /app/data/images/gallery && [ -f dist/migrate.js ] && node dist/migrate.js || true; node dist/index.js"]
+CMD ["/bin/sh", "-lc", "\
+mkdir -p /app/data/images/events /app/data/images/gallery; \
+echo 'Running Drizzle migrations...'; \
+npx drizzle-kit generate:sqlite || true; \
+npx drizzle-kit migrate || true; \
+node dist/index.js \
+"]

backend/src/db/schema.ts

@@ -20,7 +20,8 @@ export const events = sqliteTable('events', {
   title: text('title').notNull(),
   date: text('date').notNull(),
   description: text('description').notNull(),
-  imageUrl: text('image_url').notNull(),
+  imageData: text('image_data').notNull(),  // base64 encoded image
+  mimeType: text('mime_type').notNull(),    // e.g. 'image/webp', 'image/jpeg'
   displayOrder: integer('display_order').notNull(),
   isPublished: integer('is_published', { mode: 'boolean' }).default(true),
   createdAt: integer('created_at', { mode: 'timestamp' }).default(sql`(unixepoch())`),
@@ -30,7 +31,8 @@ export const events = sqliteTable('events', {
 // Gallery images table
 export const galleryImages = sqliteTable('gallery_images', {
   id: text('id').primaryKey().$defaultFn(() => crypto.randomUUID()),
-  imageUrl: text('image_url').notNull(),
+  imageData: text('image_data').notNull(),  // base64 encoded image
+  mimeType: text('mime_type').notNull(),    // e.g. 'image/webp', 'image/jpeg'
   altText: text('alt_text').notNull(),
   displayOrder: integer('display_order').notNull(),
   isPublished: integer('is_published', { mode: 'boolean' }).default(true),
@@ -59,4 +61,4 @@ export const publishHistory = sqliteTable('publish_history', {
   commitHash: text('commit_hash'),
   commitMessage: text('commit_message'),
   publishedAt: integer('published_at', { mode: 'timestamp' }).default(sql`(unixepoch())`),
-});
+});

backend/src/routes/events.ts

@@ -2,20 +2,18 @@ import { FastifyPluginAsync } from 'fastify';
 import { db } from '../config/database.js';
 import { events } from '../db/schema.js';
 import { eq } from 'drizzle-orm';
-import fs from 'fs';
-import path from 'path';
 
-// Fastify JSON schema for event body
 const eventBodyJsonSchema = {
   type: 'object',
-  required: ['title', 'date', 'description', 'imageUrl', 'displayOrder'],
+  required: ['title', 'date', 'description', 'displayOrder'],
   properties: {
     title: { type: 'string', minLength: 1, maxLength: 200 },
     date: { type: 'string', minLength: 1, maxLength: 100 },
     description: { type: 'string', minLength: 1 },
-    imageUrl: { type: 'string', minLength: 1 },
     displayOrder: { type: 'integer', minimum: 0 },
     isPublished: { type: 'boolean' },
+    imageData: { type: 'string' },
+    mimeType: { type: 'string' },
   },
 } as const;
 
@@ -38,50 +36,126 @@ const reorderBodyJsonSchema = {
 } as const;
 
 const eventsRoute: FastifyPluginAsync = async (fastify) => {
+
   // PUBLIC: List published events (no auth required)
   fastify.get('/events/public', async () => {
-    const all = await db.select().from(events)
-      .where(eq(events.isPublished, true))
-      .orderBy(events.displayOrder);
-    return { events: all };
+    const all = await db.select({
+      id: events.id,
+      title: events.title,
+      date: events.date,
+      description: events.description,
+      displayOrder: events.displayOrder,
+      isPublished: events.isPublished,
+    }).from(events)
+        .where(eq(events.isPublished, true))
+        .orderBy(events.displayOrder);
+
+    return {
+      events: all.map(ev => ({
+        ...ev,
+        imageUrl: `/api/events/${ev.id}/image`,
+      }))
+    };
   });
 
-  // List all events (by displayOrder) - admin only
+  // Serve event image
+  fastify.get('/events/:id/image', async (request, reply) => {
+    const { id } = request.params as { id: string };
+    const [event] = await db.select({
+      imageData: events.imageData,
+      mimeType: events.mimeType,
+    }).from(events).where(eq(events.id, id)).limit(1);
+
+    if (!event || !event.imageData) {
+      return reply.code(404).send({ error: 'Image not found' });
+    }
+
+    const buffer = Buffer.from(event.imageData, 'base64');
+    return reply
+        .header('Content-Type', event.mimeType || 'image/webp')
+        .header('Cache-Control', 'public, max-age=31536000')
+        .send(buffer);
+  });
+
+  // List all events - admin only
   fastify.get('/events', { preHandler: [fastify.authenticate] }, async () => {
-    const all = await db.select().from(events).orderBy(events.displayOrder);
-    return { events: all };
+    const all = await db.select({
+      id: events.id,
+      title: events.title,
+      date: events.date,
+      description: events.description,
+      displayOrder: events.displayOrder,
+      isPublished: events.isPublished,
+    }).from(events).orderBy(events.displayOrder);
+
+    return {
+      events: all.map(ev => ({
+        ...ev,
+        imageUrl: `/api/events/${ev.id}/image`,
+      }))
+    };
   });
 
   // Get single event
   fastify.get('/events/:id', { preHandler: [fastify.authenticate] }, async (request, reply) => {
     const { id } = request.params as { id: string };
-    const rows = await db.select().from(events).where(eq(events.id, id)).limit(1);
-    if (rows.length === 0) return reply.code(404).send({ error: 'Event not found' });
-    return { event: rows[0] };
+    const [event] = await db.select({
+      id: events.id,
+      title: events.title,
+      date: events.date,
+      description: events.description,
+      displayOrder: events.displayOrder,
+      isPublished: events.isPublished,
+    }).from(events).where(eq(events.id, id)).limit(1);
+
+    if (!event) {
+      return reply.code(404).send({ error: 'Event not found' });
+    }
+
+    return {
+      event: {
+        ...event,
+        imageUrl: `/api/events/${event.id}/image`,
+      }
+    };
   });
 
   // Create event
-  fastify.post('/events', { schema: { body: eventBodyJsonSchema }, preHandler: [fastify.authenticate] }, async (request, reply) => {
+  fastify.post('/events', {
+    schema: { body: eventBodyJsonSchema },
+    preHandler: [fastify.authenticate],
+  }, async (request, reply) => {
     const data = request.body as any;
-    const [row] = await db.insert(events).values(data).returning();
-    return reply.code(201).send({ event: row });
+    const [row] = await db.insert(events).values({
+      title: data.title,
+      date: data.date,
+      description: data.description,
+      displayOrder: data.displayOrder,
+      isPublished: data.isPublished ?? true,
+      imageData: data.imageData || '',
+      mimeType: data.mimeType || '',
+    }).returning({
+      id: events.id,
+      title: events.title,
+      date: events.date,
+      description: events.description,
+      displayOrder: events.displayOrder,
+      isPublished: events.isPublished,
+    });
+
+    return reply.code(201).send({
+      event: {
+        ...row,
+        imageUrl: `/api/events/${row.id}/image`,
+      }
+    });
   });
 
-  // Update event
-  fastify.put('/events/:id', { schema: { body: eventBodyJsonSchema }, preHandler: [fastify.authenticate] }, async (request, reply) => {
-    const { id } = request.params as { id: string };
-    const data = request.body as any;
-    const [row] = await db.update(events).set({ ...data, updatedAt: new Date() }).where(eq(events.id, id)).returning();
-    if (!row) return reply.code(404).send({ error: 'Event not found' });
-    return { event: row };
-  });
-
-  // Upload event image file (multipart)
+  // Upload event image (returns base64 data)
   fastify.post('/events/upload', {
     preHandler: [fastify.authenticate],
   }, async (request, reply) => {
     try {
-      // Expect a single file field named "file"
       const file = await (request as any).file();
       if (!file) {
         return reply.code(400).send({ error: 'No file uploaded' });
@@ -92,11 +166,6 @@ const eventsRoute: FastifyPluginAsync = async (fastify) => {
         return reply.code(400).send({ error: 'Only image uploads are allowed' });
       }
 
-      // Prepare directories - use persistent volume for Fly.io
-      const dataDir = process.env.GIT_WORKSPACE_DIR || path.join(process.cwd(), 'data');
-      const uploadDir = path.join(dataDir, 'public', 'images', 'events');
-      if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir, { recursive: true });
-
       // Read uploaded stream into buffer
       const chunks: Buffer[] = [];
       for await (const chunk of file.file) {
@@ -104,38 +173,25 @@ const eventsRoute: FastifyPluginAsync = async (fastify) => {
       }
       const inputBuffer = Buffer.concat(chunks);
 
-      // Generate filename
-      const stamp = Date.now().toString(36);
-      const rand = Math.random().toString(36).slice(2, 8);
-      const baseName = `${stamp}-${rand}`;
+      // Process image and convert to base64
+      let imageData: string;
+      let mimeType = 'image/webp';
 
-      // Try to convert to webp and limit size; fallback to original
-      let outBuffer: Buffer | null = null;
-      let outExt = '.webp';
       try {
-        // Lazy load sharp only when needed
         const sharp = (await import('sharp')).default;
-        outBuffer = await sharp(inputBuffer)
-          .rotate()
-          .resize({ width: 1600, withoutEnlargement: true })
-          .webp({ quality: 82 })
-          .toBuffer();
+        const processedBuffer = await sharp(inputBuffer)
+            .rotate()
+            .resize({ width: 1600, withoutEnlargement: true })
+            .webp({ quality: 82 })
+            .toBuffer();
+        imageData = processedBuffer.toString('base64');
       } catch (err) {
         fastify.log.warn({ err }, 'Sharp processing failed, using original image');
-        outBuffer = inputBuffer;
-        // naive extension from mimetype
-        const extFromMime = mime.split('/')[1] || 'bin';
-        outExt = '.' + extFromMime.replace(/[^a-z0-9]/gi, '').toLowerCase();
+        imageData = inputBuffer.toString('base64');
+        mimeType = mime;
       }
 
-      const filename = baseName + outExt;
-      const destPath = path.join(uploadDir, filename);
-      fs.writeFileSync(destPath, outBuffer);
-
-      // Public URL (served via /static)
-      const publicUrl = `/images/events/${filename}`;
-
-      return reply.code(201).send({ imageUrl: publicUrl });
+      return reply.code(201).send({ imageData, mimeType });
 
     } catch (err) {
       fastify.log.error({ err }, 'Upload failed');
@@ -143,6 +199,110 @@ const eventsRoute: FastifyPluginAsync = async (fastify) => {
     }
   });
 
+  // Update event
+  fastify.put('/events/:id', {
+    schema: { body: eventBodyJsonSchema },
+    preHandler: [fastify.authenticate],
+  }, async (request, reply) => {
+    const { id } = request.params as { id: string };
+    const data = request.body as any;
+
+    const updateData: any = {
+      title: data.title,
+      date: data.date,
+      description: data.description,
+      displayOrder: data.displayOrder,
+      isPublished: data.isPublished,
+      updatedAt: new Date(),
+    };
+
+    // Only update image if provided
+    if (data.imageData) {
+      updateData.imageData = data.imageData;
+      updateData.mimeType = data.mimeType || 'image/webp';
+    }
+
+    const [row] = await db.update(events)
+        .set(updateData)
+        .where(eq(events.id, id))
+        .returning({
+          id: events.id,
+          title: events.title,
+          date: events.date,
+          description: events.description,
+          displayOrder: events.displayOrder,
+          isPublished: events.isPublished,
+        });
+
+    if (!row) {
+      return reply.code(404).send({ error: 'Event not found' });
+    }
+
+    return {
+      event: {
+        ...row,
+        imageUrl: `/api/events/${row.id}/image`,
+      }
+    };
+  });
+
+  // Update event image only
+  fastify.put('/events/:id/image', {
+    preHandler: [fastify.authenticate],
+  }, async (request, reply) => {
+    const { id } = request.params as { id: string };
+
+    try {
+      const file = await (request as any).file();
+      if (!file) {
+        return reply.code(400).send({ error: 'No file uploaded' });
+      }
+
+      const mime = file.mimetype as string | undefined;
+      if (!mime || !mime.startsWith('image/')) {
+        return reply.code(400).send({ error: 'Only image uploads are allowed' });
+      }
+
+      const chunks: Buffer[] = [];
+      for await (const chunk of file.file) {
+        chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
+      }
+      const inputBuffer = Buffer.concat(chunks);
+
+      let imageData: string;
+      let mimeType = 'image/webp';
+
+      try {
+        const sharp = (await import('sharp')).default;
+        const processedBuffer = await sharp(inputBuffer)
+            .rotate()
+            .resize({ width: 1600, withoutEnlargement: true })
+            .webp({ quality: 82 })
+            .toBuffer();
+        imageData = processedBuffer.toString('base64');
+      } catch (err) {
+        fastify.log.warn({ err }, 'Sharp processing failed, using original image');
+        imageData = inputBuffer.toString('base64');
+        mimeType = mime;
+      }
+
+      const [row] = await db.update(events)
+          .set({ imageData, mimeType, updatedAt: new Date() })
+          .where(eq(events.id, id))
+          .returning({ id: events.id });
+
+      if (!row) {
+        return reply.code(404).send({ error: 'Event not found' });
+      }
+
+      return { message: 'Image updated', imageUrl: `/api/events/${id}/image` };
+
+    } catch (err) {
+      fastify.log.error({ err }, 'Image update failed');
+      return reply.code(500).send({ error: 'Failed to update image' });
+    }
+  });
+
   // Delete event
   fastify.delete('/events/:id', { preHandler: [fastify.authenticate] }, async (request, reply) => {
     const { id } = request.params as { id: string };
@@ -151,8 +311,11 @@ const eventsRoute: FastifyPluginAsync = async (fastify) => {
     return { message: 'Event deleted successfully' };
   });
 
-  // Reorder events (synchronous transaction for better-sqlite3)
-  fastify.put('/events/reorder', { schema: { body: reorderBodyJsonSchema }, preHandler: [fastify.authenticate] }, async (request) => {
+  // Reorder events
+  fastify.put('/events/reorder', {
+    schema: { body: reorderBodyJsonSchema },
+    preHandler: [fastify.authenticate],
+  }, async (request) => {
     const { orders } = request.body as { orders: Array<{ id: string; displayOrder: number }> };
     db.transaction((tx: any) => {
       for (const { id, displayOrder } of orders) {
@@ -163,4 +326,4 @@ const eventsRoute: FastifyPluginAsync = async (fastify) => {
   });
 };
 
-export default eventsRoute;
+export default eventsRoute;

backend/src/routes/gallery.ts

@@ -1,17 +1,12 @@
 import { FastifyPluginAsync } from 'fastify';
-import { z } from 'zod';
 import { db } from '../config/database.js';
 import { galleryImages } from '../db/schema.js';
 import { eq } from 'drizzle-orm';
-import fs from 'fs';
-import path from 'path';
 
-// Fastify JSON schema for gallery image body
 const galleryBodyJsonSchema = {
   type: 'object',
-  required: ['imageUrl', 'altText', 'displayOrder'],
+  required: ['altText', 'displayOrder'],
   properties: {
-    imageUrl: { type: 'string', minLength: 1 },
     altText: { type: 'string', minLength: 1, maxLength: 200 },
     displayOrder: { type: 'integer', minimum: 0 },
     isPublished: { type: 'boolean' },
@@ -22,46 +17,99 @@ const galleryRoute: FastifyPluginAsync = async (fastify) => {
 
   // PUBLIC: List published gallery images (no auth required)
   fastify.get('/gallery/public', async () => {
-    const images = await db.select().from(galleryImages)
-      .where(eq(galleryImages.isPublished, true))
-      .orderBy(galleryImages.displayOrder);
-    return { images };
+    const images = await db.select({
+      id: galleryImages.id,
+      altText: galleryImages.altText,
+      displayOrder: galleryImages.displayOrder,
+      isPublished: galleryImages.isPublished,
+    }).from(galleryImages)
+        .where(eq(galleryImages.isPublished, true))
+        .orderBy(galleryImages.displayOrder);
+
+    // Return with generated URLs pointing to the image endpoint
+    return {
+      images: images.map(img => ({
+        ...img,
+        imageUrl: `/api/gallery/${img.id}/image`,
+      }))
+    };
+  });
+
+  // Serve image data
+  fastify.get('/gallery/:id/image', async (request, reply) => {
+    const { id } = request.params as { id: string };
+    const [image] = await db.select({
+      imageData: galleryImages.imageData,
+      mimeType: galleryImages.mimeType,
+    }).from(galleryImages).where(eq(galleryImages.id, id)).limit(1);
+
+    if (!image || !image.imageData) {
+      return reply.code(404).send({ error: 'Image not found' });
+    }
+
+    const buffer = Buffer.from(image.imageData, 'base64');
+    return reply
+        .header('Content-Type', image.mimeType || 'image/webp')
+        .header('Cache-Control', 'public, max-age=31536000')
+        .send(buffer);
   });
 
   // List all gallery images - admin only
   fastify.get('/gallery', {
     preHandler: [fastify.authenticate],
-  }, async (request, reply) => {
-    const images = await db.select().from(galleryImages).orderBy(galleryImages.displayOrder);
-    return { images };
+  }, async () => {
+    const images = await db.select({
+      id: galleryImages.id,
+      altText: galleryImages.altText,
+      displayOrder: galleryImages.displayOrder,
+      isPublished: galleryImages.isPublished,
+    }).from(galleryImages).orderBy(galleryImages.displayOrder);
+
+    return {
+      images: images.map(img => ({
+        ...img,
+        imageUrl: `/api/gallery/${img.id}/image`,
+      }))
+    };
   });
 
-  // Get single gallery image
+  // Get single gallery image metadata
   fastify.get('/gallery/:id', {
     preHandler: [fastify.authenticate],
   }, async (request, reply) => {
     const { id } = request.params as { id: string };
-    const image = await db.select().from(galleryImages).where(eq(galleryImages.id, id)).limit(1);
+    const [image] = await db.select({
+      id: galleryImages.id,
+      altText: galleryImages.altText,
+      displayOrder: galleryImages.displayOrder,
+      isPublished: galleryImages.isPublished,
+    }).from(galleryImages).where(eq(galleryImages.id, id)).limit(1);
 
-    if (image.length === 0) {
+    if (!image) {
       return reply.code(404).send({ error: 'Image not found' });
     }
 
-    return { image: image[0] };
+    return {
+      image: {
+        ...image,
+        imageUrl: `/api/gallery/${image.id}/image`,
+      }
+    };
   });
 
-  // Create gallery image
+  // Create gallery image (JSON, no file)
   fastify.post('/gallery', {
-    schema: {
-      body: galleryBodyJsonSchema,
-    },
+    schema: { body: galleryBodyJsonSchema },
     preHandler: [fastify.authenticate],
   }, async (request, reply) => {
     const data = request.body as any;
-
     const [newImage] = await db.insert(galleryImages).values(data).returning();
-
-    return reply.code(201).send({ image: newImage });
+    return reply.code(201).send({
+      image: {
+        ...newImage,
+        imageUrl: `/api/gallery/${newImage.id}/image`,
+      }
+    });
   });
 
   // Upload image file (multipart)
@@ -69,7 +117,6 @@ const galleryRoute: FastifyPluginAsync = async (fastify) => {
     preHandler: [fastify.authenticate],
   }, async (request, reply) => {
     try {
-      // Expect a single file field named "file"
       const file = await (request as any).file();
       if (!file) {
         return reply.code(400).send({ error: 'No file uploaded' });
@@ -84,11 +131,6 @@ const galleryRoute: FastifyPluginAsync = async (fastify) => {
         return reply.code(400).send({ error: 'Only image uploads are allowed' });
       }
 
-      // Prepare directories - use persistent volume for Fly.io
-      const dataDir = process.env.GIT_WORKSPACE_DIR || path.join(process.cwd(), 'data');
-      const uploadDir = path.join(dataDir, 'public', 'images', 'gallery');
-      if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir, { recursive: true });
-
       // Read uploaded stream into buffer
       const chunks: Buffer[] = [];
       for await (const chunk of file.file) {
@@ -96,46 +138,44 @@ const galleryRoute: FastifyPluginAsync = async (fastify) => {
       }
       const inputBuffer = Buffer.concat(chunks);
 
-      // Generate filename
-      const stamp = Date.now().toString(36);
-      const rand = Math.random().toString(36).slice(2, 8);
-      const baseName = `${stamp}-${rand}`;
+      // Process image and convert to base64
+      let imageData: string;
+      let mimeType = 'image/webp';
 
-      // Try to convert to webp and limit size; fallback to original
-      let outBuffer: Buffer | null = null;
-      let outExt = '.webp';
       try {
-        // Lazy load sharp only when needed
         const sharp = (await import('sharp')).default;
-        outBuffer = await sharp(inputBuffer)
-          .rotate()
-          .resize({ width: 1600, withoutEnlargement: true })
-          .webp({ quality: 82 })
-          .toBuffer();
+        const processedBuffer = await sharp(inputBuffer)
+            .rotate()
+            .resize({ width: 1600, withoutEnlargement: true })
+            .webp({ quality: 82 })
+            .toBuffer();
+        imageData = processedBuffer.toString('base64');
       } catch (err) {
         fastify.log.warn({ err }, 'Sharp processing failed, using original image');
-        outBuffer = inputBuffer;
-        // naive extension from mimetype
-        const extFromMime = mime.split('/')[1] || 'bin';
-        outExt = '.' + extFromMime.replace(/[^a-z0-9]/gi, '').toLowerCase();
+        imageData = inputBuffer.toString('base64');
+        mimeType = mime;
       }
 
-      const filename = baseName + outExt;
-      const destPath = path.join(uploadDir, filename);
-      fs.writeFileSync(destPath, outBuffer);
-
-      // Public URL (served via /static)
-      const publicUrl = `/images/gallery/${filename}`;
-
-      // Store in DB (optional but useful)
+      // Store in DB
       const [row] = await db.insert(galleryImages).values({
-        imageUrl: publicUrl,
-        altText: altText || filename,
+        imageData,
+        mimeType,
+        altText: altText || 'Gallery image',
         displayOrder,
         isPublished: true,
-      }).returning();
+      }).returning({
+        id: galleryImages.id,
+        altText: galleryImages.altText,
+        displayOrder: galleryImages.displayOrder,
+        isPublished: galleryImages.isPublished,
+      });
 
-      return reply.code(201).send({ image: row });
+      return reply.code(201).send({
+        image: {
+          ...row,
+          imageUrl: `/api/gallery/${row.id}/image`,
+        }
+      });
 
     } catch (err) {
       fastify.log.error({ err }, 'Upload failed');
@@ -145,25 +185,33 @@ const galleryRoute: FastifyPluginAsync = async (fastify) => {
 
   // Update gallery image
   fastify.put('/gallery/:id', {
-    schema: {
-      body: galleryBodyJsonSchema,
-    },
+    schema: { body: galleryBodyJsonSchema },
     preHandler: [fastify.authenticate],
   }, async (request, reply) => {
     const { id } = request.params as { id: string };
     const data = request.body as any;
 
     const [updated] = await db
-      .update(galleryImages)
-      .set(data)
-      .where(eq(galleryImages.id, id))
-      .returning();
+        .update(galleryImages)
+        .set(data)
+        .where(eq(galleryImages.id, id))
+        .returning({
+          id: galleryImages.id,
+          altText: galleryImages.altText,
+          displayOrder: galleryImages.displayOrder,
+          isPublished: galleryImages.isPublished,
+        });
 
     if (!updated) {
       return reply.code(404).send({ error: 'Image not found' });
     }
 
-    return { image: updated };
+    return {
+      image: {
+        ...updated,
+        imageUrl: `/api/gallery/${updated.id}/image`,
+      }
+    };
   });
 
   // Delete gallery image
@@ -173,9 +221,9 @@ const galleryRoute: FastifyPluginAsync = async (fastify) => {
     const { id } = request.params as { id: string };
 
     const [deleted] = await db
-      .delete(galleryImages)
-      .where(eq(galleryImages.id, id))
-      .returning();
+        .delete(galleryImages)
+        .where(eq(galleryImages.id, id))
+        .returning();
 
     if (!deleted) {
       return reply.code(404).send({ error: 'Image not found' });
@@ -209,7 +257,6 @@ const galleryRoute: FastifyPluginAsync = async (fastify) => {
   }, async (request, reply) => {
     const { orders } = request.body as { orders: Array<{ id: string; displayOrder: number }> };
 
-    // Update all in synchronous transaction (better-sqlite3 requirement)
     db.transaction((tx: any) => {
       for (const { id, displayOrder } of orders) {
         tx.update(galleryImages).set({ displayOrder }).where(eq(galleryImages.id, id)).run?.();
@@ -220,4 +267,4 @@ const galleryRoute: FastifyPluginAsync = async (fastify) => {
   });
 };
 
-export default galleryRoute;
+export default galleryRoute;

src/pages/admin.astro

@@ -3,370 +3,391 @@ const title = 'Admin';
 ---
 
 <html lang="de">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{title}</title>
-    <style>
-      body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; margin: 1rem; }
-      h1, h2 { margin: 0.5rem 0; }
-      section { border: 1px solid #ddd; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
-      .row { display: flex; gap: 1rem; flex-wrap: wrap; }
-      .events-row { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; align-items: start; }
-      @media (max-width: 900px){ .events-row { grid-template-columns: 1fr; } }
-      button { margin-top: 0.5rem; padding: 0.5rem 1rem; cursor: pointer; }
-      .muted { color: #666; }
-      .btn { display: inline-block; padding: 0.5rem 1rem; background: #222; color: #fff; border-radius: 6px; text-decoration: none; }
-      .btn:hover { background: #444; }
-      .grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 0.75rem; }
-      .card { border: 1px solid #eee; padding: 0.75rem; border-radius: 6px; }
-      label { display:block; margin-top: 0.5rem; }
-      input, textarea { width: 100%; max-width: 600px; padding: 0.5rem; margin-top: 0.25rem; }
-      img.thumb { max-width: 100%; height: auto; display: block; }
-      .toolbar { display:flex; gap:.5rem; align-items:center; margin:.5rem 0; }
-      .pill { font-size:.85rem; padding:.25rem .5rem; border:1px solid #ddd; border-radius:999px; background:#f7f7f7; }
-      .dragging { opacity:.5; }
-      .drag-handle { cursor:grab; padding:.25rem .5rem; border:1px dashed #bbb; border-radius:6px; font-size:.85rem; }
-      .row-buttons { display:flex; gap:.5rem; margin-top:.5rem; }
-    </style>
-  </head>
-  <body>
-    <h1>Admin</h1>
-    <section>
-      <h2>Authentifizierung</h2>
-      <div id="auth-status" class="muted">Prüfe Anmeldestatus...</div>
-      <div class="row">
-        <a id="login-link" class="btn" href="https://cms.gallus-pub.ch/api/auth/gitea">Mit Gitea anmelden</a>
-        <button id="btn-relogin">Neu anmelden</button>
-        <button id="btn-logout">Abmelden</button>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{title}</title>
+  <style>
+    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; margin: 1rem; }
+    h1, h2 { margin: 0.5rem 0; }
+    section { border: 1px solid #ddd; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
+    .row { display: flex; gap: 1rem; flex-wrap: wrap; }
+    .events-row { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; align-items: start; }
+    @media (max-width: 900px){ .events-row { grid-template-columns: 1fr; } }
+    button { margin-top: 0.5rem; padding: 0.5rem 1rem; cursor: pointer; }
+    .muted { color: #666; }
+    .btn { display: inline-block; padding: 0.5rem 1rem; background: #222; color: #fff; border-radius: 6px; text-decoration: none; }
+    .btn:hover { background: #444; }
+    .grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 0.75rem; }
+    .card { border: 1px solid #eee; padding: 0.75rem; border-radius: 6px; }
+    label { display:block; margin-top: 0.5rem; }
+    input, textarea { width: 100%; max-width: 600px; padding: 0.5rem; margin-top: 0.25rem; }
+    img.thumb { max-width: 100%; height: auto; display: block; }
+    .toolbar { display:flex; gap:.5rem; align-items:center; margin:.5rem 0; }
+    .pill { font-size:.85rem; padding:.25rem .5rem; border:1px solid #ddd; border-radius:999px; background:#f7f7f7; }
+    .dragging { opacity:.5; }
+    .drag-handle { cursor:grab; padding:.25rem .5rem; border:1px dashed #bbb; border-radius:6px; font-size:.85rem; }
+    .row-buttons { display:flex; gap:.5rem; margin-top:.5rem; }
+  </style>
+</head>
+<body>
+<h1>Admin</h1>
+<section>
+  <h2>Authentifizierung</h2>
+  <div id="auth-status" class="muted">Prüfe Anmeldestatus...</div>
+  <div class="row">
+    <a id="login-link" class="btn" href="https://cms.gallus-pub.ch/api/auth/gitea">Mit Gitea anmelden</a>
+    <button id="btn-relogin">Neu anmelden</button>
+    <button id="btn-logout">Abmelden</button>
+  </div>
+</section>
+
+<section id="sec-events" style="display:none">
+  <h2>Events verwalten</h2>
+  <div class="events-row">
+    <div class="card">
+      <h3>Neues Event</h3>
+      <label>Titel<input id="ev-title" /></label>
+      <label>Datum<input id="ev-date" type="date" placeholder="z. B. 2025-12-31" /></label>
+      <label>Beschreibung<textarea id="ev-desc" rows="4"></textarea></label>
+      <label>Bild-Datei<input id="ev-file" type="file" accept="image/*" /></label>
+      <button id="btn-create-ev">Event anlegen</button>
+      <div id="ev-create-msg" class="muted"></div>
+    </div>
+    <div class="card" style="min-width:380px;">
+      <h3>Liste</h3>
+      <div class="toolbar">
+        <span class="pill" id="lbl-order">Anzeige: automatisch nach Datum (neueste zuerst)</span>
+        <button id="btn-toggle-reorder">Reihenfolge bearbeiten</button>
+        <button id="btn-save-order" style="display:none">Reihenfolge speichern</button>
+        <span id="order-msg" class="muted"></span>
       </div>
-    </section>
+      <div id="events-list" class="grid"></div>
+    </div>
+  </div>
+</section>
 
-    <section id="sec-events" style="display:none">
-      <h2>Events verwalten</h2>
-      <div class="events-row">
-        <div class="card">
-          <h3>Neues Event</h3>
-          <label>Titel<input id="ev-title" /></label>
-          <label>Datum<input id="ev-date" type="date" placeholder="z. B. 2025-12-31" /></label>
-          <label>Beschreibung<textarea id="ev-desc" rows="4"></textarea></label>
-          <label>Bild-Datei<input id="ev-file" type="file" accept="image/*" /></label>
-          <button id="btn-create-ev">Event anlegen</button>
-          <div id="ev-create-msg" class="muted"></div>
-        </div>
-        <div class="card" style="min-width:380px;">
-          <h3>Liste</h3>
-          <div class="toolbar">
-            <span class="pill" id="lbl-order">Anzeige: automatisch nach Datum (neueste zuerst)</span>
-            <button id="btn-toggle-reorder">Reihenfolge bearbeiten</button>
-            <button id="btn-save-order" style="display:none">Reihenfolge speichern</button>
-            <span id="order-msg" class="muted"></span>
-          </div>
-          <div id="events-list" class="grid"></div>
-        </div>
-      </div>
-    </section>
+<section id="sec-gallery" style="display:none">
+  <h2>Gallery verwalten</h2>
+  <div class="events-row">
+    <div class="card">
+      <h3>Neues Gallery-Bild</h3>
+      <label>Bild-Datei<input id="gal-file" type="file" accept="image/*" /></label>
+      <label>Alt-Text<input id="gal-alt" placeholder="Bildbeschreibung" /></label>
+      <button id="btn-create-gal">Bild hochladen</button>
+      <div id="gal-create-msg" class="muted"></div>
+    </div>
+    <div class="card" style="min-width:380px;">
+      <h3>Gallery-Liste</h3>
+      <div id="gallery-list" class="grid"></div>
+    </div>
+  </div>
+</section>
 
-    <section id="sec-gallery" style="display:none">
-      <h2>Gallery verwalten</h2>
-      <div class="events-row">
-        <div class="card">
-          <h3>Neues Gallery-Bild</h3>
-          <label>Bild-Datei<input id="gal-file" type="file" accept="image/*" /></label>
-          <label>Alt-Text<input id="gal-alt" placeholder="Bildbeschreibung" /></label>
-          <button id="btn-create-gal">Bild hochladen</button>
-          <div id="gal-create-msg" class="muted"></div>
-        </div>
-        <div class="card" style="min-width:380px;">
-          <h3>Gallery-Liste</h3>
-          <div id="gallery-list" class="grid"></div>
-        </div>
-      </div>
-    </section>
+<section id="sec-publish" style="display:none">
+  <h2>Veröffentlichen</h2>
+  <label>Commit-Message<input id="pub-msg" placeholder="Änderungen beschreiben" value="Update events" /></label>
+  <button id="btn-publish">Publish</button>
+  <div id="pub-status" class="muted"></div>
+</section>
 
-    <section id="sec-publish" style="display:none">
-      <h2>Veröffentlichen</h2>
-      <label>Commit-Message<input id="pub-msg" placeholder="Änderungen beschreiben" value="Update events" /></label>
-      <button id="btn-publish">Publish</button>
-      <div id="pub-status" class="muted"></div>
-    </section>
+<script>
+  const API_BASE = 'https://cms.gallus-pub.ch';
 
-    <script>
-      // Base-URL des Backends (separate Subdomain)
-      const API_BASE = 'https://cms.gallus-pub.ch';
+  const api = async (path, opts = {}) => {
+    const res = await fetch(API_BASE + path, { credentials: 'include', ...opts });
+    if (!res.ok) throw new Error(await res.text());
+    const ct = res.headers.get('content-type') || '';
+    return ct.includes('application/json') ? res.json() : res.text();
+  };
 
-      const api = async (path, opts = {}) => {
-        const res = await fetch(API_BASE + path, { credentials: 'include', ...opts });
-        if (!res.ok) throw new Error(await res.text());
-        const ct = res.headers.get('content-type') || '';
-        return ct.includes('application/json') ? res.json() : res.text();
-      };
+  // Helper to get full image URL
+  function getImageUrl(imageUrl) {
+    if (!imageUrl) return '';
+    // API image endpoints need the base URL prefix
+    if (imageUrl.startsWith('/api/')) {
+      return API_BASE + imageUrl;
+    }
+    return imageUrl;
+  }
 
-      async function refreshAuth() {
-        try {
-          const me = await api('/api/auth/me');
-          document.getElementById('auth-status').textContent = `Angemeldet als ${me.user?.giteaUsername || 'Admin'}`;
-          // UI-Bereiche für eingeloggte Nutzer einblenden
-          document.getElementById('sec-events').style.display = '';
-          document.getElementById('sec-gallery').style.display = '';
-          document.getElementById('sec-publish').style.display = '';
-          // Direkt Events laden und auf Sektion fokussieren
-          await loadEvents();
-          await loadGallery();
-          document.getElementById('sec-events').scrollIntoView({ behavior: 'smooth' });
-        } catch (e) {
-          const el = document.getElementById('auth-status');
-          el.textContent = 'Nicht angemeldet';
-          // Kein Auto-Redirect, damit keine Schleife entsteht. Login-Button verwenden.
-          document.getElementById('sec-events').style.display = 'none';
-          document.getElementById('sec-gallery').style.display = 'none';
-          document.getElementById('sec-publish').style.display = 'none';
-        }
+  async function refreshAuth() {
+    try {
+      const me = await api('/api/auth/me');
+      document.getElementById('auth-status').textContent = `Angemeldet als ${me.user?.giteaUsername || 'Admin'}`;
+      document.getElementById('sec-events').style.display = '';
+      document.getElementById('sec-gallery').style.display = '';
+      document.getElementById('sec-publish').style.display = '';
+      await loadEvents();
+      await loadGallery();
+      document.getElementById('sec-events').scrollIntoView({ behavior: 'smooth' });
+    } catch (e) {
+      const el = document.getElementById('auth-status');
+      el.textContent = 'Nicht angemeldet';
+      document.getElementById('sec-events').style.display = 'none';
+      document.getElementById('sec-gallery').style.display = 'none';
+      document.getElementById('sec-publish').style.display = 'none';
+    }
+  }
+
+  const loginLink = document.getElementById('login-link');
+  loginLink.addEventListener('click', (e) => {
+    try {
+      window.location.assign(API_BASE + '/api/auth/gitea');
+    } catch {}
+  });
+  document.getElementById('btn-relogin').addEventListener('click', async () => {
+    try { await api('/api/auth/logout', { method: 'POST' }); } catch {}
+    document.cookie = 'token=; Path=/; Max-Age=0;';
+    window.location.assign(API_BASE + '/api/auth/gitea');
+  });
+  document.getElementById('btn-logout').addEventListener('click', async () => {
+    try { await api('/api/auth/logout', { method: 'POST' }); } catch {}
+    document.cookie = 'token=; Path=/; Max-Age=0;';
+    await refreshAuth();
+  });
+
+  // Upload image and get base64 data back
+  async function uploadEventImage(file) {
+    const fd = new FormData();
+    fd.append('file', file);
+    const res = await fetch(API_BASE + '/api/events/upload', { method: 'POST', body: fd, credentials: 'include' });
+    if (!res.ok) throw new Error(await res.text());
+    return res.json(); // Returns { imageData, mimeType }
+  }
+
+  async function uploadGalleryImage(file, altText) {
+    const fd = new FormData();
+    fd.append('file', file);
+    if (altText) fd.append('altText', altText);
+    fd.append('displayOrder', '0');
+    const res = await fetch(API_BASE + '/api/gallery/upload', { method: 'POST', body: fd, credentials: 'include' });
+    if (!res.ok) throw new Error(await res.text());
+    return res.json();
+  }
+
+  let reorderMode = false;
+  let lastEvents = [];
+
+  function parseDateSafe(s){
+    const d = new Date(s);
+    return isNaN(+d) ? new Date(0) : d;
+  }
+
+  async function loadEvents() {
+    const listEl = document.getElementById('events-list');
+    listEl.innerHTML = '<div class="muted">Lade...</div>';
+    try {
+      const data = await api('/api/events');
+      listEl.innerHTML = '';
+      lastEvents = (data.events || []).slice();
+      let renderList = lastEvents.slice();
+      if (!reorderMode) {
+        renderList.sort((a,b) => +parseDateSafe(b.date) - +parseDateSafe(a.date));
+        document.getElementById('lbl-order').textContent = 'Anzeige: automatisch nach Datum (neueste zuerst)';
+      } else {
+        renderList.sort((a,b) => (a.displayOrder??0) - (b.displayOrder??0));
+        document.getElementById('lbl-order').textContent = 'Anzeige: manuelle Reihenfolge (drag & drop)';
       }
 
-      // Fallback: falls der Link von Browser/Extensions blockiert wäre
-      const loginLink = document.getElementById('login-link');
-      loginLink.addEventListener('click', (e) => {
-        try {
-          // Stelle sicher, dass Navigieren erzwungen wird
-          window.location.assign(API_BASE + '/api/auth/gitea');
-        } catch {}
-      });
-      document.getElementById('btn-relogin').addEventListener('click', async () => {
-        try { await api('/api/auth/logout', { method: 'POST' }); } catch {}
-        document.cookie = 'token=; Path=/; Max-Age=0;';
-        window.location.assign(API_BASE + '/api/auth/gitea');
-      });
-      document.getElementById('btn-logout').addEventListener('click', async () => {
-        try { await api('/api/auth/logout', { method: 'POST' }); } catch {}
-        document.cookie = 'token=; Path=/; Max-Age=0;';
-        await refreshAuth();
-      });
-
-      // ========== Events & Publish ==========
-      async function uploadEventImage(file) {
-        const fd = new FormData();
-        fd.append('file', file);
-        const res = await fetch(API_BASE + '/api/events/upload', { method: 'POST', body: fd, credentials: 'include' });
-        if (!res.ok) throw new Error(await res.text());
-        return res.json();
-      }
-
-      async function uploadGalleryImage(file, altText) {
-        const fd = new FormData();
-        fd.append('file', file);
-        if (altText) fd.append('altText', altText);
-        fd.append('displayOrder', '0');
-        const res = await fetch(API_BASE + '/api/gallery/upload', { method: 'POST', body: fd, credentials: 'include' });
-        if (!res.ok) throw new Error(await res.text());
-        return res.json();
-      }
-
-      let reorderMode = false;
-      let lastEvents = [];
-
-      function parseDateSafe(s){
-        const d = new Date(s);
-        return isNaN(+d) ? new Date(0) : d;
-      }
-
-      async function loadEvents() {
-        const listEl = document.getElementById('events-list');
-        listEl.innerHTML = '<div class="muted">Lade...</div>';
-        try {
-          const data = await api('/api/events');
-          listEl.innerHTML = '';
-          // Merken, globale Liste aktualisieren
-          lastEvents = (data.events || []).slice();
-          let renderList = lastEvents.slice();
-          if (!reorderMode) {
-            // Automatisch nach Datum sortieren (neueste zuerst)
-            renderList.sort((a,b) => +parseDateSafe(b.date) - +parseDateSafe(a.date));
-            document.getElementById('lbl-order').textContent = 'Anzeige: automatisch nach Datum (neueste zuerst)';
-          } else {
-            // Nach displayOrder aufsteigend
-            renderList.sort((a,b) => (a.displayOrder??0) - (b.displayOrder??0));
-            document.getElementById('lbl-order').textContent = 'Anzeige: manuelle Reihenfolge (drag & drop)';
-          }
-
-          renderList.forEach((ev, idx) => {
-            const card = document.createElement('div');
-            card.className = 'card';
-            card.setAttribute('draggable', String(reorderMode));
-            card.dataset.id = ev.id;
-            card.dataset.displayOrder = String(ev.displayOrder ?? idx);
-            card.innerHTML = `
+      renderList.forEach((ev, idx) => {
+        const card = document.createElement('div');
+        card.className = 'card';
+        card.setAttribute('draggable', String(reorderMode));
+        card.dataset.id = ev.id;
+        card.dataset.displayOrder = String(ev.displayOrder ?? idx);
+        const imgUrl = getImageUrl(ev.imageUrl);
+        card.innerHTML = `
               <div class="row" style="justify-content:space-between;align-items:center">
                 <div><strong>${ev.title}</strong></div>
-                ${reorderMode ? '<span class="drag-handle">⇅ Ziehen</span>' : ''}
+                ${reorderMode ? '<span class="drag-handle">&#8597; Ziehen</span>' : ''}
               </div>
               <div class="muted">${ev.date}</div>
               <div>${ev.description || ''}</div>
-              <div class="muted">Bild: ${ev.imageUrl || ''}</div>
+              ${imgUrl ? `<img src="${imgUrl}" alt="${ev.title}" class="thumb" style="margin-top:0.5rem;max-height:120px;object-fit:cover;" />` : '<div class="muted">Kein Bild</div>'}
               <div class="row-buttons">
                 <button data-id="${ev.id}" class="btn-del-ev">Löschen</button>
               </div>`;
-            listEl.appendChild(card);
-          });
-          listEl.querySelectorAll('.btn-del-ev').forEach(btn => {
-            btn.addEventListener('click', async () => {
-              const id = btn.getAttribute('data-id');
-              if (!id) return;
-              if (!confirm('Event wirklich löschen?')) return;
-              try { await api(`/api/events/${id}`, { method: 'DELETE' }); await loadEvents(); } catch(e){ alert('Fehler: '+e.message); }
-            })
-          })
+        listEl.appendChild(card);
+      });
+      listEl.querySelectorAll('.btn-del-ev').forEach(btn => {
+        btn.addEventListener('click', async () => {
+          const id = btn.getAttribute('data-id');
+          if (!id) return;
+          if (!confirm('Event wirklich löschen?')) return;
+          try { await api(`/api/events/${id}`, { method: 'DELETE' }); await loadEvents(); } catch(e){ alert('Fehler: '+e.message); }
+        })
+      })
 
-          if (reorderMode) {
-            enableDragAndDrop(listEl);
-          }
-        } catch (e) {
-          listEl.innerHTML = '<div class="muted">Fehler beim Laden</div>';
-          console.error(e);
-        }
+      if (reorderMode) {
+        enableDragAndDrop(listEl);
       }
+    } catch (e) {
+      listEl.innerHTML = '<div class="muted">Fehler beim Laden</div>';
+      console.error(e);
+    }
+  }
 
-      // Drag & Drop Reorder
-      function enableDragAndDrop(container){
-        let draggingEl = null;
-        container.querySelectorAll('.card').forEach(card => {
-          card.addEventListener('dragstart', (e) => {
-            draggingEl = card; card.classList.add('dragging');
-            e.dataTransfer.setData('text/plain', card.dataset.id || '');
-          });
-          card.addEventListener('dragend', () => { draggingEl = null; card.classList.remove('dragging'); });
-          card.addEventListener('dragover', (e) => { e.preventDefault(); });
-          card.addEventListener('drop', (e) => {
-            e.preventDefault();
-            const target = card;
-            if (!draggingEl || draggingEl === target) return;
-            const cards = Array.from(container.querySelectorAll('.card'));
-            const draggingIdx = cards.indexOf(draggingEl);
-            const targetIdx = cards.indexOf(target);
-            if (draggingIdx < targetIdx) {
-              target.after(draggingEl);
-            } else {
-              target.before(draggingEl);
-            }
-          });
-        });
-      }
-
-      document.getElementById('btn-create-ev').addEventListener('click', async () => {
-        const title = (document.getElementById('ev-title')).value.trim();
-        const date = (document.getElementById('ev-date')).value.trim();
-        const desc = (document.getElementById('ev-desc')).value.trim();
-        const file = /** @type {HTMLInputElement} */ (document.getElementById('ev-file')).files[0];
-        const msg = document.getElementById('ev-create-msg');
-        msg.textContent = 'Lade Bild hoch...';
-        try {
-          let imageUrl = '';
-          if (file) {
-            const up = await uploadEventImage(file);
-            imageUrl = up?.imageUrl || '';
-          }
-          msg.textContent = 'Lege Event an...';
-          await api('/api/events', {
-            method: 'POST', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ title, date, description: desc, imageUrl, displayOrder: 0, isPublished: true })
-          });
-          msg.textContent = 'Event erstellt';
-          (document.getElementById('ev-title')).value = '';
-          (document.getElementById('ev-date')).value = '';
-          (document.getElementById('ev-desc')).value = '';
-          (document.getElementById('ev-file')).value = '';
-          await loadEvents();
-        } catch(e){ msg.textContent = 'Fehler: '+e.message }
+  function enableDragAndDrop(container){
+    let draggingEl = null;
+    container.querySelectorAll('.card').forEach(card => {
+      card.addEventListener('dragstart', (e) => {
+        draggingEl = card; card.classList.add('dragging');
+        e.dataTransfer.setData('text/plain', card.dataset.id || '');
       });
-
-      document.getElementById('btn-publish').addEventListener('click', async () => {
-        const s = document.getElementById('pub-status');
-        const m = (document.getElementById('pub-msg')).value.trim() || 'Update events';
-        s.textContent = 'Veröffentliche...';
-        try {
-          const res = await api('/api/publish', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ commitMessage: m }) });
-          s.textContent = res?.message || 'Veröffentlicht';
-        } catch(e){ s.textContent = 'Fehler: '+e.message }
-      });
-
-      // Toggle Reorder
-      document.getElementById('btn-toggle-reorder').addEventListener('click', async () => {
-        reorderMode = !reorderMode;
-        document.getElementById('btn-save-order').style.display = reorderMode ? '' : 'none';
-        await loadEvents();
-      });
-
-      // Save Order
-      document.getElementById('btn-save-order').addEventListener('click', async () => {
-        const container = document.getElementById('events-list');
+      card.addEventListener('dragend', () => { draggingEl = null; card.classList.remove('dragging'); });
+      card.addEventListener('dragover', (e) => { e.preventDefault(); });
+      card.addEventListener('drop', (e) => {
+        e.preventDefault();
+        const target = card;
+        if (!draggingEl || draggingEl === target) return;
         const cards = Array.from(container.querySelectorAll('.card'));
-        const orders = cards.map((c, idx) => ({ id: c.dataset.id, displayOrder: idx }));
-        const msg = document.getElementById('order-msg');
-        msg.textContent = 'Speichere Reihenfolge...';
-        try {
-          await api('/api/events/reorder', { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ orders }) });
-          msg.textContent = 'Reihenfolge gespeichert';
-          // Bleibe in Reorder-Mode oder verlasse ihn? Hier: verlassen
-          reorderMode = false;
-          document.getElementById('btn-save-order').style.display = 'none';
-          await loadEvents();
-        } catch(e){ msg.textContent = 'Fehler: '+e.message }
+        const draggingIdx = cards.indexOf(draggingEl);
+        const targetIdx = cards.indexOf(target);
+        if (draggingIdx < targetIdx) {
+          target.after(draggingEl);
+        } else {
+          target.before(draggingEl);
+        }
+      });
+    });
+  }
+
+  document.getElementById('btn-create-ev').addEventListener('click', async () => {
+    const title = (document.getElementById('ev-title')).value.trim();
+    const date = (document.getElementById('ev-date')).value.trim();
+    const desc = (document.getElementById('ev-desc')).value.trim();
+    const file = (document.getElementById('ev-file')).files[0];
+    const msg = document.getElementById('ev-create-msg');
+
+    if (!title || !date) {
+      msg.textContent = 'Titel und Datum sind erforderlich';
+      return;
+    }
+
+    msg.textContent = 'Lade Bild hoch...';
+    try {
+      let imageData = '';
+      let mimeType = '';
+
+      if (file) {
+        const uploadResult = await uploadEventImage(file);
+        imageData = uploadResult.imageData || '';
+        mimeType = uploadResult.mimeType || '';
+      }
+
+      msg.textContent = 'Lege Event an...';
+      await api('/api/events', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title,
+          date,
+          description: desc,
+          imageData,
+          mimeType,
+          displayOrder: 0,
+          isPublished: true
+        })
       });
 
-      // ========== Gallery ==========
-      async function loadGallery() {
-        const listEl = document.getElementById('gallery-list');
-        listEl.innerHTML = '<div class="muted">Lade...</div>';
-        try {
-          const data = await api('/api/gallery');
-          listEl.innerHTML = '';
-          const galleryImages = (data.images || []).slice();
-          galleryImages.sort((a,b) => (a.displayOrder??0) - (b.displayOrder??0));
+      msg.textContent = 'Event erstellt';
+      document.getElementById('ev-title').value = '';
+      document.getElementById('ev-date').value = '';
+      document.getElementById('ev-desc').value = '';
+      document.getElementById('ev-file').value = '';
+      await loadEvents();
+    } catch(e) {
+      msg.textContent = 'Fehler: ' + e.message;
+    }
+  });
 
-          galleryImages.forEach((img) => {
-            const card = document.createElement('div');
-            card.className = 'card';
-            card.innerHTML = `
-              <img src="${API_BASE}${img.imageUrl}" alt="${img.altText}" class="thumb" />
+  document.getElementById('btn-publish').addEventListener('click', async () => {
+    const s = document.getElementById('pub-status');
+    const m = (document.getElementById('pub-msg')).value.trim() || 'Update events';
+    s.textContent = 'Veröffentliche...';
+    try {
+      const res = await api('/api/publish', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ commitMessage: m }) });
+      s.textContent = res?.message || 'Veröffentlicht';
+    } catch(e){ s.textContent = 'Fehler: '+e.message }
+  });
+
+  document.getElementById('btn-toggle-reorder').addEventListener('click', async () => {
+    reorderMode = !reorderMode;
+    document.getElementById('btn-save-order').style.display = reorderMode ? '' : 'none';
+    await loadEvents();
+  });
+
+  document.getElementById('btn-save-order').addEventListener('click', async () => {
+    const container = document.getElementById('events-list');
+    const cards = Array.from(container.querySelectorAll('.card'));
+    const orders = cards.map((c, idx) => ({ id: c.dataset.id, displayOrder: idx }));
+    const msg = document.getElementById('order-msg');
+    msg.textContent = 'Speichere Reihenfolge...';
+    try {
+      await api('/api/events/reorder', { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ orders }) });
+      msg.textContent = 'Reihenfolge gespeichert';
+      reorderMode = false;
+      document.getElementById('btn-save-order').style.display = 'none';
+      await loadEvents();
+    } catch(e){ msg.textContent = 'Fehler: '+e.message }
+  });
+
+  // Gallery
+  async function loadGallery() {
+    const listEl = document.getElementById('gallery-list');
+    listEl.innerHTML = '<div class="muted">Lade...</div>';
+    try {
+      const data = await api('/api/gallery');
+      listEl.innerHTML = '';
+      const galleryImages = (data.images || []).slice();
+      galleryImages.sort((a,b) => (a.displayOrder??0) - (b.displayOrder??0));
+
+      galleryImages.forEach((img) => {
+        const card = document.createElement('div');
+        card.className = 'card';
+        const imgUrl = getImageUrl(img.imageUrl);
+        card.innerHTML = `
+              <img src="${imgUrl}" alt="${img.altText}" class="thumb" />
               <div class="muted">${img.altText || ''}</div>
               <div class="row-buttons">
                 <button data-id="${img.id}" class="btn-del-gal">Löschen</button>
               </div>`;
-            listEl.appendChild(card);
-          });
-          listEl.querySelectorAll('.btn-del-gal').forEach(btn => {
-            btn.addEventListener('click', async () => {
-              const id = btn.getAttribute('data-id');
-              if (!id) return;
-              if (!confirm('Bild wirklich löschen?')) return;
-              try { await api(`/api/gallery/${id}`, { method: 'DELETE' }); await loadGallery(); } catch(e){ alert('Fehler: '+e.message); }
-            })
-          })
-        } catch (e) {
-          listEl.innerHTML = '<div class="muted">Fehler beim Laden</div>';
-          console.error(e);
-        }
-      }
-
-      document.getElementById('btn-create-gal').addEventListener('click', async () => {
-        const file = /** @type {HTMLInputElement} */ (document.getElementById('gal-file')).files[0];
-        const alt = (document.getElementById('gal-alt')).value.trim();
-        const msg = document.getElementById('gal-create-msg');
-        if (!file) {
-          msg.textContent = 'Bitte Datei auswählen';
-          return;
-        }
-        msg.textContent = 'Lade Bild hoch...';
-        try {
-          await uploadGalleryImage(file, alt);
-          msg.textContent = 'Bild hochgeladen';
-          (document.getElementById('gal-file')).value = '';
-          (document.getElementById('gal-alt')).value = '';
-          await loadGallery();
-        } catch(e){ msg.textContent = 'Fehler: '+e.message }
+        listEl.appendChild(card);
       });
+      listEl.querySelectorAll('.btn-del-gal').forEach(btn => {
+        btn.addEventListener('click', async () => {
+          const id = btn.getAttribute('data-id');
+          if (!id) return;
+          if (!confirm('Bild wirklich löschen?')) return;
+          try { await api(`/api/gallery/${id}`, { method: 'DELETE' }); await loadGallery(); } catch(e){ alert('Fehler: '+e.message); }
+        })
+      })
+    } catch (e) {
+      listEl.innerHTML = '<div class="muted">Fehler beim Laden</div>';
+      console.error(e);
+    }
+  }
 
-      refreshAuth();
-    </script>
-  </body>
-  </html>
+  document.getElementById('btn-create-gal').addEventListener('click', async () => {
+    const file = (document.getElementById('gal-file')).files[0];
+    const alt = (document.getElementById('gal-alt')).value.trim();
+    const msg = document.getElementById('gal-create-msg');
+    if (!file) {
+      msg.textContent = 'Bitte Datei auswählen';
+      return;
+    }
+    msg.textContent = 'Lade Bild hoch...';
+    try {
+      await uploadGalleryImage(file, alt);
+      msg.textContent = 'Bild hochgeladen';
+      document.getElementById('gal-file').value = '';
+      document.getElementById('gal-alt').value = '';
+      await loadGallery();
+    } catch(e){ msg.textContent = 'Fehler: '+e.message }
+  });
+
+  refreshAuth();
+</script>
+</body>
+</html>