less padding for comments

Reviewed-on: w0bm/f0bm#5

.gitignore

@@ -8,3 +8,4 @@ deleted/b
 deleted/ca
 deleted/t
 tmp/*
+tools

debug/fix_deleted.mjs

@@ -0,0 +1,72 @@
+
+import db from "../src/inc/sql.mjs";
+import { promises as fs } from "fs";
+
+(async () => {
+    console.log("Starting migration...");
+
+    // 1. Ensure column exists
+    try {
+        await db`select is_deleted from items limit 1`;
+        console.log("Column 'is_deleted' already exists.");
+    } catch (err) {
+        if (err.message.includes('column "is_deleted" does not exist')) {
+            console.log("Column 'is_deleted' missing. Adding it now...");
+            await db`ALTER TABLE items ADD COLUMN is_deleted BOOLEAN DEFAULT FALSE`;
+            console.log("Column added successfully.");
+        } else {
+            console.error("Unexpected error checking column:", err);
+            process.exit(1);
+        }
+    }
+
+    const items = await db`select id, dest from items where active = false`;
+    console.log(`Found ${items.length} inactive items.`);
+
+    let trashCount = 0;
+    let pendingCount = 0;
+    let brokenCount = 0;
+
+    for (const item of items) {
+        try {
+            await fs.access(`./deleted/b/${item.dest}`);
+            // File exists in deleted, mark as is_deleted = true
+            await db`update items set is_deleted = true where id = ${item.id}`;
+            trashCount++;
+        } catch {
+            // Not in deleted, check public
+            try {
+                await fs.access(`./public/b/${item.dest}`);
+                // In public, is_deleted = false (default)
+                pendingCount++;
+            } catch {
+                // Not in either? Broken.
+                console.log(`Item ${item.id} (${item.dest}) missing from both locations. Cleaning up...`);
+
+                // 2. Fix FK constraint: Check if this item is used as an avatar
+                try {
+                    // Find a safe fallback avatar (active item)
+                    const fallback = await db`select id from items where active = true limit 1`;
+                    if (fallback.length > 0) {
+                        const safeId = fallback[0].id;
+                        const users = await db`update "user_options" set avatar = ${safeId} where avatar = ${item.id} returning user_id`;
+                        if (users.length > 0) {
+                            console.log(`  > Reassigned avatar for ${users.length} users (from ${item.id} to ${safeId})`);
+                        }
+                    }
+                } catch (fkErr) {
+                    console.error(`  ! Error fixing avatar FK for ${item.id}:`, fkErr.message);
+                }
+
+                await db`delete from items where id = ${item.id}`;
+                brokenCount++;
+            }
+        }
+    }
+
+    console.log(`Migration complete.`);
+    console.log(`Trash (soft-deleted): ${trashCount}`);
+    console.log(`Pending: ${pendingCount}`);
+    console.log(`Broken: ${brokenCount}`);
+    process.exit(0);
+})();

debug/init_comments.mjs

@@ -0,0 +1,22 @@
+import db from "../src/inc/sql.mjs";
+import { promises as fs } from "fs";
+
+(async () => {
+    try {
+        const migration = await fs.readFile("./migration_comments.sql", "utf-8");
+        console.log("Applying migration...");
+        // Split by semicolon to handle multiple statements if the driver requires it, 
+        // but postgres.js usually handles simple files well or we can execute as one block 
+        // if it's just DDL. However, postgres.js template literal usually prefers single statements 
+        // or we can use `db.file` if available, or just execute the string.
+
+        // Simple approach: execute the whole string
+        await db.unsafe(migration);
+
+        console.log("Migration applied successfully.");
+        process.exit(0);
+    } catch (e) {
+        console.error("Migration failed:", e);
+        process.exit(1);
+    }
+})();

debug/init_emojis.mjs

@@ -0,0 +1,34 @@
+import db from "../src/inc/sql.mjs";
+
+async function run() {
+    try {
+        console.log("Creating custom_emojis table...");
+
+        await db`
+            CREATE TABLE IF NOT EXISTS custom_emojis (
+                id SERIAL PRIMARY KEY,
+                name TEXT NOT NULL UNIQUE,
+                url TEXT NOT NULL,
+                created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+            )
+        `;
+
+        // Seed with existing default emojis if table is empty
+        const count = await db`SELECT count(*) FROM custom_emojis`;
+        if (count[0].count == 0) {
+            console.log("Seeding default emojis...");
+            await db`
+                INSERT INTO custom_emojis (name, url) VALUES
+                ('f0ck', '/s/img/f0ck.png')
+            `;
+        }
+
+        console.log("Done.");
+        process.exit(0);
+    } catch (e) {
+        console.error(e);
+        process.exit(1);
+    }
+}
+
+run();

debug/recreate_hashes.mjs

@@ -0,0 +1,84 @@
+import fs from 'fs';
+import crypto from 'crypto';
+import db from '../src/inc/sql.mjs';
+import path from 'path';
+
+const run = async () => {
+    console.log('Starting hash recreation (Production Mode - Streams)...');
+
+    try {
+        // Fetch only necessary columns
+        const items = await db`SELECT id, dest, checksum, size FROM items ORDER BY id ASC`;
+        console.log(`Found ${items.length} items. Processing...`);
+
+        let updated = 0;
+        let errors = 0;
+        let skipped = 0;
+
+        for (const [index, item] of items.entries()) {
+            const filePath = path.join('./public/b', item.dest);
+
+            try {
+                if (!fs.existsSync(filePath)) {
+                    // Silent error in logs for missing files to avoid spamming "thousands" of lines if many are missing
+                    // Use verbose logging if needed, but here we'll just count them.
+                    // Actually, precise logs are better for "production" to know what's wrong.
+                    console.error(`[MISSING] File not found for item ${item.id}: ${filePath}`);
+                    errors++;
+                    continue;
+                }
+
+                // Get file size without reading content
+                const stats = await fs.promises.stat(filePath);
+                const size = stats.size;
+
+                // Calculate hash using stream to ensure low memory usage
+                const hash = await new Promise((resolve, reject) => {
+                    const hashStream = crypto.createHash('sha256');
+                    const rs = fs.createReadStream(filePath);
+
+                    rs.on('error', reject);
+                    rs.on('data', chunk => hashStream.update(chunk));
+                    rs.on('end', () => resolve(hashStream.digest('hex')));
+                });
+
+                if (hash !== item.checksum || size !== item.size) {
+                    console.log(`[UPDATE] Item ${item.id} (${index + 1}/${items.length})`);
+                    if (hash !== item.checksum) console.log(`  - Hash: ${item.checksum} -> ${hash}`);
+                    if (size !== item.size) console.log(`  - Size: ${item.size} -> ${size}`);
+
+                    await db`
+                UPDATE items
+                SET checksum = ${hash}, size = ${size}
+                WHERE id = ${item.id}
+            `;
+                    updated++;
+                } else {
+                    skipped++;
+                }
+
+                // Log progress every 100 items
+                if ((index + 1) % 100 === 0) {
+                    console.log(`Progress: ${index + 1}/${items.length} (Updated: ${updated}, Errors: ${errors})`);
+                }
+
+            } catch (err) {
+                console.error(`[ERROR] Processing item ${item.id}:`, err);
+                errors++;
+            }
+        }
+
+        console.log('Done.');
+        console.log(`Total: ${items.length}`);
+        console.log(`Updated: ${updated}`);
+        console.log(`Skipped (No changes): ${skipped}`);
+        console.log(`Errors (Missing files): ${errors}`);
+
+    } catch (err) {
+        console.error('Fatal error:', err);
+    } finally {
+        process.exit(0);
+    }
+};
+
+run();

debug/verify_comments.mjs

@@ -0,0 +1,106 @@
+import db from "../src/inc/sql.mjs";
+import http from "http";
+import crypto from "crypto";
+
+const HOST = "localhost";
+const PORT = 3000;
+import { readFile } from "fs/promises";
+const cfg = JSON.parse(await readFile("../config.json", "utf8"));
+const serverPort = cfg.websrv.port;
+
+const runTest = async () => {
+    // 1. Setup Data
+    console.log("Setting up test data...");
+    const user = await db`SELECT id FROM "user" LIMIT 1`;
+    const item = await db`SELECT id FROM "items" LIMIT 1`;
+
+    if (!user.length || !item.length) {
+        console.error("No user or item found.");
+        process.exit(1);
+    }
+
+    const userId = user[0].id;
+    const itemId = item[0].id;
+
+    // Create session
+    const sessionKey = "testsession_" + Date.now();
+    const sessionHash = crypto.createHash('md5').update(sessionKey).digest("hex");
+
+    await db`DELETE FROM user_sessions WHERE user_id = ${userId}`; // Clear old sessions for clean test
+    await db`INSERT INTO user_sessions (user_id, session, browser, created_at, last_used, last_action)
+             VALUES (${userId}, ${sessionHash}, 'test-bot', ${Math.floor(Date.now() / 1000)}, ${Math.floor(Date.now() / 1000)}, 'test')`;
+
+    console.log(`User: ${userId}, Item: ${itemId}, Session: ${sessionKey}`);
+
+    // Helper for requests
+    const request = (method, path, body = null, cookie = null) => {
+        return new Promise((resolve, reject) => {
+            const options = {
+                hostname: HOST,
+                port: serverPort,
+                path: path,
+                method: method,
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Cookie': cookie ? `session=${cookie}` : ''
+                }
+            };
+
+            const req = http.request(options, (res) => {
+                let data = '';
+                res.on('data', chunk => data += chunk);
+                res.on('end', () => resolve({ statusCode: res.statusCode, body: data }));
+            });
+
+            req.on('error', reject);
+            if (body) req.write(JSON.stringify(body));
+            req.end();
+        });
+    };
+
+    // 2. Test GET (Empty)
+    console.log("Testing GET /api/comments/" + itemId);
+    let res = await request('GET', `/api/comments/${itemId}`);
+    console.log("GET Response:", res.body);
+    let json = JSON.parse(res.body);
+    if (!json.success) throw new Error("GET failed");
+
+    // 3. Test POST
+    console.log("Testing POST /api/comments");
+    res = await request('POST', '/api/comments', {
+        item_id: itemId,
+        content: "Hello World from Test Bot"
+    }, sessionKey);
+    console.log("POST Response:", res.body);
+    json = JSON.parse(res.body);
+    if (!json.success) throw new Error("POST failed");
+    const commentId = json.comment.id;
+
+    // 4. Test GET (With comment)
+    console.log("Testing GET /api/comments/" + itemId);
+    res = await request('GET', `/api/comments/${itemId}`);
+    json = JSON.parse(res.body);
+    if (json.comments.length === 0) throw new Error("Comment not found");
+    console.log("Found comments:", json.comments.length);
+
+    // 5. Test Subscribe
+    console.log("Testing POST /api/subscribe/" + itemId);
+    res = await request('POST', `/api/subscribe/${itemId}`, {}, sessionKey);
+    console.log("Subscribe Response:", res.body);
+    json = JSON.parse(res.body);
+    if (!json.success) throw new Error("Subscribe failed");
+    if (!json.subscribed) throw new Error("Expected subscribed=true");
+
+    console.log("Testing Unsubscribe...");
+    res = await request('POST', `/api/subscribe/${itemId}`, {}, sessionKey);
+    json = JSON.parse(res.body);
+    if (json.subscribed) throw new Error("Expected subscribed=false");
+
+    console.log("ALL TESTS PASSED");
+    process.exit(0);
+};
+
+runTest().catch(e => {
+    console.error(e);
+    process.exit(1);
+});

debug/verify_db.mjs

@@ -0,0 +1,62 @@
+import db from "../src/inc/sql.mjs";
+
+const runTest = async () => {
+    console.log("Verifying Database Schema...");
+
+    // 1. Check Tables
+    try {
+        await db`SELECT 1 FROM comments LIMIT 1`;
+        console.log("✔ Table 'comments' exists.");
+    } catch (e) {
+        console.error("✘ Table 'comments' missing.");
+        process.exit(1);
+    }
+
+    try {
+        await db`SELECT 1 FROM comment_subscriptions LIMIT 1`;
+        console.log("✔ Table 'comment_subscriptions' exists.");
+    } catch (e) {
+        console.error("✘ Table 'comment_subscriptions' missing.");
+        process.exit(1);
+    }
+
+    // 2. Insert Test Data
+    console.log("Testing Insert...");
+    const user = await db`SELECT id FROM "user" LIMIT 1`;
+    const item = await db`SELECT id FROM "items" LIMIT 1`;
+
+    if (!user.length || !item.length) {
+        console.log("⚠ No user/item to test insert. Skipping.");
+    } else {
+        const userId = user[0].id;
+        const itemId = item[0].id;
+
+        const comment = await db`
+            INSERT INTO comments (item_id, user_id, content) 
+            VALUES (${itemId}, ${userId}, 'Test Comment DB Verify')
+            RETURNING id
+        `;
+        console.log("✔ Inserted comment ID:", comment[0].id);
+
+        const fetch = await db`SELECT content FROM comments WHERE id = ${comment[0].id}`;
+        if (fetch[0].content === 'Test Comment DB Verify') {
+            console.log("✔ Verified content.");
+        } else {
+            console.error("✘ Content mismatch.");
+            process.exit(1);
+        }
+
+        // Cleanup
+        await db`DELETE FROM comments WHERE id = ${comment[0].id}`;
+    }
+
+    console.log("DB Schema Verification Passed.");
+
+    // 3. Optional: subscription test
+    await db`INSERT INTO comment_subscriptions (user_id, item_id) VALUES (${user[0].id}, ${item[0].id}) ON CONFLICT DO NOTHING`;
+    console.log("✔ Subscription table write access confirmed.");
+
+    process.exit(0);
+};
+
+runTest().catch(console.error);

f0ck.sql

@@ -153,6 +153,7 @@ CREATE TABLE public.items (
     usernetwork character varying(40) NOT NULL,
     stamp integer NOT NULL,
     active boolean NOT NULL,
+    is_deleted boolean DEFAULT false NOT NULL,
     thumb character varying(100)
 );
 
@@ -674,6 +675,25 @@ REVOKE USAGE ON SCHEMA public FROM PUBLIC;
 GRANT ALL ON SCHEMA public TO PUBLIC;
 
 
+--
+-- Data for default setup
+--
+
+-- Default Avatar Item (referenced by user_options default)
+INSERT INTO public.items (id, src, dest, mime, size, checksum, username, userchannel, usernetwork, stamp, active, is_deleted, thumb)
+VALUES (56660, 'default', 'default.png', 'image/png', 0, 'default', 'system', 'system', 'system', 0, false, false, NULL)
+ON CONFLICT (id) DO NOTHING;
+
+-- Default User 'foo' (password: 'foo')
+INSERT INTO public."user" (id, login, "user", password, admin)
+VALUES (1, 'foo', 'foo', '$f0ck$de94c6c92c2333990f1d42efb199bcd6:7b636e3d009a7e002a4d8b4c393bfcb601d2042d5dddd9965f20904270f268f5edbf504aab8d8091a7faec8bbd84107a9e3a6823e9f20c5245b693d8efb9664c', true)
+ON CONFLICT (id) DO NOTHING;
+
+-- Default User Options for 'foo'
+INSERT INTO public.user_options (user_id, mode, theme, avatar, fullscreen)
+VALUES (1, 3, 'amoled', 1, 0)
+ON CONFLICT (user_id) DO NOTHING;
+
 --
 -- PostgreSQL database dump complete
 --

migration_add_pinned.sql

@@ -0,0 +1,10 @@
+-- Migration: Add is_pinned column to comments table
+-- Migration: Add is_comments_locked column to items table
+-- Run with: psql -h <host> -U <user> -d <database> -f migration_add_pinned.sql
+
+-- Pinned comments
+ALTER TABLE comments ADD COLUMN IF NOT EXISTS is_pinned BOOLEAN DEFAULT FALSE;
+CREATE INDEX IF NOT EXISTS idx_comments_is_pinned ON comments(is_pinned) WHERE is_pinned = TRUE;
+
+-- Locked threads (prevents new comments on an item)
+ALTER TABLE items ADD COLUMN IF NOT EXISTS is_comments_locked BOOLEAN DEFAULT FALSE;

migration_comments.sql

@@ -0,0 +1,37 @@
+-- Create comments table
+CREATE TABLE IF NOT EXISTS comments (
+    id SERIAL PRIMARY KEY,
+    item_id INTEGER NOT NULL REFERENCES items(id) ON DELETE CASCADE,
+    user_id INTEGER NOT NULL REFERENCES "user"(id) ON DELETE CASCADE,
+    parent_id INTEGER REFERENCES comments(id) ON DELETE SET NULL,
+    content TEXT NOT NULL,
+    is_deleted BOOLEAN DEFAULT FALSE,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    updated_at TIMESTAMP WITH TIME ZONE,
+    vote_score INTEGER DEFAULT 0
+);
+
+-- Create notifications table
+CREATE TABLE IF NOT EXISTS notifications (
+    id SERIAL PRIMARY KEY,
+    user_id INTEGER NOT NULL REFERENCES "user"(id) ON DELETE CASCADE,
+    type VARCHAR(32) NOT NULL, -- 'reply', 'comment', 'mention'
+    reference_id INTEGER NOT NULL, -- ID of the comment
+    item_id INTEGER NOT NULL REFERENCES items(id) ON DELETE CASCADE,
+    is_read BOOLEAN DEFAULT FALSE,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Create comment_subscriptions table (for subscribing to posts)
+CREATE TABLE IF NOT EXISTS comment_subscriptions (
+    user_id INTEGER NOT NULL REFERENCES "user"(id) ON DELETE CASCADE,
+    item_id INTEGER NOT NULL REFERENCES items(id) ON DELETE CASCADE,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    PRIMARY KEY (user_id, item_id)
+);
+
+-- Indexes for performance
+CREATE INDEX idx_comments_item_id ON comments(item_id);
+CREATE INDEX idx_comments_user_id ON comments(user_id);
+CREATE INDEX idx_notifications_user_id ON notifications(user_id);
+CREATE INDEX idx_notifications_unread ON notifications(user_id) WHERE is_read = FALSE;

package.json

@@ -10,7 +10,8 @@
     "autotagger": "node debug/autotagger.mjs",
     "thumbnailer": "node debug/thumbnailer.mjs",
     "test": "node debug/test.mjs",
-    "clean": "node debug/clean.mjs"
+    "clean": "node debug/clean.mjs",
+    "fix:deleted": "node debug/fix_deleted.mjs"
   },
   "author": "Flummi",
   "license": "MIT",
@@ -20,4 +21,4 @@
     "flummpress": "^2.0.5",
     "postgres": "^3.3.4"
   }
-}
+}

public/s/css/upload.css

@@ -0,0 +1,426 @@
+/* Upload Page Styles */
+.upload-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+.upload-container h2 {
+    margin-bottom: 1.5rem;
+    color: var(--accent);
+    text-align: center;
+}
+
+/* Guidelines */
+.content-guidelines {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 0;
+    margin-bottom: 2rem;
+    overflow: hidden;
+}
+
+.content-guidelines summary {
+    padding: 1rem 1.5rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--accent);
+    list-style: none;
+    /* Hide default triangle */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.content-guidelines summary::-webkit-details-marker {
+    display: none;
+}
+
+.content-guidelines summary::after {
+    content: '+';
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+.content-guidelines[open] summary::after {
+    content: '-';
+}
+
+.guidelines-content {
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.guidelines-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+    margin-top: 1rem;
+}
+
+.guidelines-dont h5 {
+    color: #ff6b6b;
+    margin-bottom: 0.5rem;
+}
+
+.guidelines-do h5 {
+    color: #51cf66;
+    margin-bottom: 0.5rem;
+}
+
+.guidelines-grid ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.guidelines-grid li {
+    padding: 0.3rem 0;
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+/* Upload Form */
+.upload-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    background: rgba(255, 255, 255, 0.02);
+    padding: 2rem;
+    border-radius: 0;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.form-section label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+}
+
+.required {
+    color: #ff6b6b;
+}
+
+/* Drop Zone */
+.drop-zone {
+    border: 2px dashed rgba(255, 255, 255, 0.2);
+    border-radius: 0;
+    padding: 2rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    position: relative;
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.drop-zone:hover,
+.drop-zone.dragover {
+    border-color: var(--accent);
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.drop-zone input[type="file"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.drop-zone-prompt {
+    color: rgba(255, 255, 255, 0.5);
+    pointer-events: none;
+    /* Let input handle clicks */
+}
+
+/* File Preview (Stacked) */
+.file-preview {
+    display: flex;
+    flex-direction: column;
+    /* Stacked */
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+}
+
+.file-preview video {
+    max-width: 100%;
+    max-height: 500px;
+    border-radius: 0;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    outline: none;
+    margin-bottom: 1rem;
+}
+
+.file-meta-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+    justify-content: center;
+}
+
+.file-info {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.3);
+    padding: 0.5rem 1rem;
+    border-radius: 0;
+}
+
+.file-name {
+    font-weight: 500;
+}
+
+.file-size {
+    opacity: 0.6;
+    font-size: 0.9rem;
+}
+
+.btn-remove {
+    background: #ff6b6b;
+    color: white;
+    border: none;
+    padding: 0.5rem 1.5rem;
+    border-radius: 0;
+    cursor: pointer;
+    font-weight: 600;
+    transition: background 0.2s;
+    /* remove margin-top as it's now in a flex row */
+}
+
+.btn-remove:hover {
+    background: #fa5252;
+}
+
+/* Ratings */
+.rating-options {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+}
+
+.rating-option input {
+    display: none;
+}
+
+.rating-label {
+    display: block;
+    padding: 0.75rem 2rem;
+    border-radius: 0;
+    border: 2px solid transparent;
+    transition: all 0.2s;
+    font-weight: 600;
+    text-align: center;
+}
+
+.rating-label.sfw {
+    background: rgba(81, 207, 102, 0.1);
+    border-color: rgba(81, 207, 102, 0.3);
+    color: #51cf66;
+}
+
+.rating-label.nsfw {
+    background: rgba(255, 107, 107, 0.1);
+    border-color: rgba(255, 107, 107, 0.3);
+    color: #ff6b6b;
+}
+
+.rating-option input:checked+.rating-label.sfw {
+    background: rgba(81, 207, 102, 0.2);
+    border-color: #51cf66;
+}
+
+.rating-option input:checked+.rating-label.nsfw {
+    background: rgba(255, 107, 107, 0.2);
+    border-color: #ff6b6b;
+}
+
+/* Tags */
+.tag-input-container {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 0;
+    padding: 0.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+    gap: 0.5rem;
+}
+
+.tags-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.tag-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    background: var(--accent);
+    color: #000;
+    padding: 0.3rem 0.6rem;
+    border-radius: 0;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.tag-chip button {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+    font-size: 1.1rem;
+    line-height: 1;
+}
+
+#tag-input {
+    flex: 1;
+    min-width: 120px;
+    background: transparent;
+    border: none;
+    color: inherit;
+    padding: 0.5rem;
+    outline: none;
+}
+
+.tag-count {
+    font-weight: normal;
+    font-size: 0.85rem;
+    opacity: 0.7;
+}
+
+.tag-count.valid {
+    color: #51cf66;
+    font-weight: bold;
+    opacity: 1;
+}
+
+.tag-suggestions {
+    /* (styles for dropdown remain similar, maybe cleaner shadow) */
+    position: absolute;
+    top: auto;
+    bottom: 100%;
+    left: 0;
+    right: 0;
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
+    border-radius: 0;
+    max-height: 200px;
+    overflow-y: auto;
+    display: none;
+    z-index: 100;
+}
+
+.tag-suggestions.show {
+    display: block;
+}
+
+.tag-suggestion {
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+}
+
+.tag-suggestion:hover,
+.tag-suggestion.active {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+/* Submit Button */
+.btn-upload {
+    background: var(--accent);
+    color: #000;
+    border: none;
+    padding: 1rem 2rem;
+    border-radius: 0;
+    font-size: 1.1rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s;
+    width: 100%;
+    margin-top: 1rem;
+}
+
+.btn-upload:disabled {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.4);
+    cursor: not-allowed;
+}
+
+.btn-upload:not(:disabled):hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
+}
+
+/* Progress */
+.upload-progress {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: rgba(0, 0, 0, 0.2);
+    padding: 1rem;
+    border-radius: 0;
+}
+
+.progress-bar {
+    flex: 1;
+    height: 10px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 0;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: var(--accent);
+    width: 0%;
+    transition: width 0.2s;
+}
+
+.progress-text {
+    font-weight: bold;
+    font-family: monospace;
+}
+
+.upload-status {
+    text-align: center;
+    padding: 1rem;
+    font-weight: 600;
+}
+
+.upload-status.error {
+    color: #ff6b6b;
+}
+
+.upload-status.success {
+    color: #51cf66;
+}
+
+/* Login Required */
+.login-required {
+    text-align: center;
+    padding: 4rem 2rem;
+    border: 1px dashed rgba(255, 255, 255, 0.2);
+    border-radius: 0;
+}
+
+.btn-login {
+    display: inline-block;
+    margin-top: 1rem;
+    padding: 0.75rem 2rem;
+    background: var(--accent);
+    color: #000;
+    text-decoration: none;
+    border-radius: 0;
+    font-weight: 700;
+}

public/s/css/w0bm.css

@@ -216,7 +216,7 @@ video {
 }
 
 #main {
-  padding: 25px;
+  padding: 0px 25px 0px 25px;
 }
 
 .container {
@@ -262,7 +262,7 @@ video {
   background: #0000008a !important;
 }
 
-.pagination > a {
+.pagination>a {
   background: #232323b2;
 }
 
@@ -285,32 +285,33 @@ div.search {
 div.sbt {
   display: grid;
   grid-template-columns: 1fr auto;
-   align-content: center;
+  align-content: center;
 }
 
 #sbtButton {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 #sbtInput {
-    background: #00000021;
-    box-shadow: -1px -1px 0px #252525;
-    border: inset 1px #0000001c;
-    padding: revert;
-    box-shadow: inset 0px 0px 5px 1px #0000005e;
-        width: 100%;
+  background: #00000021;
+  box-shadow: -1px -1px 0px #252525;
+  border: inset 1px #0000001c;
+  padding: revert;
+  box-shadow: inset 0px 0px 5px 1px #0000005e;
+  width: 100%;
 }
 
-  .navigation-links {
-    display: grid;
-    grid-row: 1;
-    grid-column: 2;
-    grid-template-columns: auto auto 1fr;
-  }
+.navigation-links {
+  display: grid;
+  grid-row: 1;
+  grid-column: 2;
+  grid-template-columns: auto auto 1fr;
+}
 
-.navigation-links-guest, ol {
-    margin: 5px;
-    margin-block-start: 0;
-    margin-block-end: 0;
-    padding-inline-start: 0;
+.navigation-links-guest,
+ol {
+  margin: 5px;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  padding-inline-start: 0;
 }

public/s/js/admin.js

@@ -130,12 +130,12 @@
           return false;
         }
         renderTags(res.tags);
-        span.parentElement.removeChild(span);
+        if (span.parentElement) span.parentElement.removeChild(span);
         testList.innerText = "";
         addtagClick();
       }
       else if (e.key === "Escape") {
-        span.parentElement.removeChild(span);
+        if (span.parentElement) span.parentElement.removeChild(span);
         testList.innerText = "";
       }
       else {
@@ -184,13 +184,47 @@
     if (!ctx) return;
     const { postid, poster } = ctx;
 
-    if (!confirm(`Reason for deleting f0ckpost ${postid} by ${poster} (Weihnachten™)`))
-      return;
-    const res = await post("/api/v2/admin/deletepost", {
-      postid: postid
-    });
-    if (!res.success) {
-      alert(res.msg);
+    const modal = document.getElementById('delete-item-modal');
+    const idEl = document.getElementById('delete-item-id');
+    const posterEl = document.getElementById('delete-item-poster');
+    const confirmBtn = document.getElementById('delete-item-confirm');
+    const cancelBtn = document.getElementById('delete-item-cancel');
+
+    if (modal) {
+      idEl.textContent = postid;
+      posterEl.textContent = poster || 'unknown';
+      modal.style.display = 'flex';
+
+      const closeModal = () => {
+        modal.style.display = 'none';
+        confirmBtn.onclick = null;
+        cancelBtn.onclick = null;
+        confirmBtn.textContent = 'Delete';
+        confirmBtn.disabled = false;
+      };
+
+      cancelBtn.onclick = closeModal;
+
+      confirmBtn.onclick = async () => {
+        confirmBtn.textContent = 'Deleting...';
+        confirmBtn.disabled = true;
+        try {
+          const res = await post("/api/v2/admin/deletepost", {
+            postid: postid
+          });
+          if (!res.success) {
+            alert(res.msg);
+            confirmBtn.textContent = 'Delete';
+            confirmBtn.disabled = false;
+          } else {
+            closeModal();
+          }
+        } catch (e) {
+          alert('Error: ' + e); // Or e.message
+          confirmBtn.textContent = 'Delete';
+          confirmBtn.disabled = false;
+        }
+      };
     }
   };
 

public/s/js/comments.js

@@ -0,0 +1,746 @@
+class CommentSystem {
+    constructor() {
+        this.container = document.getElementById('comments-container');
+        this.itemId = this.container ? this.container.dataset.itemId : null;
+        this.user = this.container ? this.container.dataset.user : null; // logged in user?
+        this.isAdmin = this.container ? this.container.dataset.isAdmin === 'true' : false;
+        this.isLocked = this.container ? this.container.dataset.isLocked === 'true' : false;
+        this.sort = 'new';
+
+        // Restore visibility state
+        if (this.container) {
+            const isHidden = localStorage.getItem('comments_hidden') === 'true';
+            if (isHidden) {
+                this.container.classList.add('faded-out');
+                this.container.style.display = 'none';
+            }
+        }
+
+        if (this.itemId) {
+            this.init();
+        }
+    }
+
+    async init() {
+        await this.loadEmojis();
+        this.loadComments();
+        this.setupGlobalListeners();
+    }
+
+    async loadEmojis() {
+        try {
+            const res = await fetch('/api/v2/emojis');
+            const data = await res.json();
+            if (data.success) {
+                this.customEmojis = {};
+                data.emojis.forEach(e => {
+                    this.customEmojis[e.name] = e.url;
+                });
+                console.log('Loaded Emojis:', this.customEmojis);
+
+                // Preload images to prevent NS Binding Aborted errors
+                this.preloadEmojiImages();
+            } else {
+                this.customEmojis = {};
+            }
+        } catch (e) {
+            console.error("Failed to load emojis", e);
+            this.customEmojis = {};
+        }
+    }
+
+    preloadEmojiImages() {
+        // Preload all emoji images into browser cache
+        if (!this.customEmojis) return;
+
+        Object.values(this.customEmojis).forEach(url => {
+            const img = new Image();
+            img.src = url;
+            // No need to append to DOM, just loading into cache
+        });
+    }
+
+    // ...
+
+    renderEmoji(match, name) {
+        // console.log('Rendering Emoji:', name, this.customEmojis ? this.customEmojis[name] : 'No list');
+        if (this.customEmojis && this.customEmojis[name]) {
+            return `<img src="${this.customEmojis[name]}" style="height:60px;vertical-align:middle;" alt="${name}">`;
+        }
+        return match;
+    }
+
+    async loadComments(scrollToId = null) {
+        if (!this.container) return;
+
+        // If guest, hide completely and don't fetch
+        if (!this.user) {
+            this.container.innerHTML = '';
+            this.container.style.display = 'none';
+            return;
+        }
+
+        // Check for server-side preloaded comments
+        // Check for server-side preloaded comments (Script Tag Method)
+        const dataEl = document.getElementById('initial-comments');
+        if (dataEl) {
+            try {
+                // Decode Base64 for safe template transfer
+                const raw = dataEl.textContent.trim();
+                const json = atob(raw);
+                const comments = JSON.parse(json);
+
+                const subEl = document.getElementById('initial-subscription');
+                // Handle boolean text content
+                const isSubscribed = subEl && (subEl.textContent.trim() === 'true');
+
+                // Consume
+                dataEl.remove();
+                if (subEl) subEl.remove();
+
+                this.render(comments, this.user, isSubscribed);
+
+                if (scrollToId) {
+                    this.scrollToComment(scrollToId);
+                } else if (window.location.hash && window.location.hash.startsWith('#c')) {
+                    const hashId = window.location.hash.substring(2);
+                    this.scrollToComment(hashId);
+                }
+                return;
+            } catch (e) {
+                console.error("SSR comments parse error", e);
+            }
+        }
+
+        // Render skeleton (Result: Layout visible immediately)
+        if (!scrollToId) {
+            this.render([], this.user, false);
+        }
+
+        try {
+            const res = await fetch(`/api/comments/${this.itemId}?sort=${this.sort}`);
+            const data = await res.json();
+
+            if (data.success) {
+                if (data.require_login) {
+                    this.container.innerHTML = '';
+                    this.container.style.display = 'none';
+                    return;
+                }
+
+                this.isAdmin = data.is_admin || false;
+                this.isLocked = data.is_locked || false;
+
+                // Render real data
+                this.render(data.comments, data.user_id, data.is_subscribed);
+
+
+
+                if (scrollToId) {
+                    this.scrollToComment(scrollToId);
+                } else if (window.location.hash && window.location.hash.startsWith('#c')) {
+                    const hashId = window.location.hash.substring(2);
+                    this.scrollToComment(hashId);
+                }
+            } else {
+                this.container.innerHTML = `<div class="error">Failed to load comments: ${data.message}</div>`;
+            }
+        } catch (e) {
+            console.error(e);
+            this.container.innerHTML = `<div class="error">Error loading comments: ${e.message}</div>`;
+        }
+    }
+
+    // ...
+
+
+
+    scrollToComment(id) {
+        // Allow DOM reflow
+        setTimeout(() => {
+            const el = document.getElementById('c' + id);
+            if (el) {
+                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                el.style.transition = "background-color 0.5s";
+                el.style.backgroundColor = "rgba(255, 255, 0, 0.2)";
+                setTimeout(() => el.style.backgroundColor = "", 2000);
+            }
+        }, 100);
+    }
+
+    render(comments, currentUserId, isSubscribed) {
+        // Build two-level tree: top-level comments + all replies at one level
+        const map = new Map();
+        const roots = [];
+
+        comments.forEach(c => {
+            c.replies = [];
+            c.replyTo = null; // Username being replied to (for @mentions)
+            map.set(c.id, c);
+        });
+
+        // Find root parent for any comment
+        const findRoot = (comment) => {
+            if (!comment.parent_id) return null;
+            let current = comment;
+            while (current.parent_id && map.has(current.parent_id)) {
+                current = map.get(current.parent_id);
+            }
+            return current;
+        };
+
+        comments.forEach(c => {
+            if (!c.parent_id) {
+                // Top-level comment
+                roots.push(c);
+            } else {
+                // It's a reply - find root and attach there
+                const root = findRoot(c);
+                if (root && root !== c) {
+                    // If replying to a non-root, capture the username for @mention
+                    const directParent = map.get(c.parent_id);
+                    if (directParent && directParent.id !== root.id) {
+                        c.replyTo = directParent.username;
+                    }
+                    root.replies.push(c);
+                } else {
+                    // Orphaned reply (parent deleted?) - show as root
+                    roots.push(c);
+                }
+            }
+        });
+
+        // Sort replies by date (oldest first)
+        roots.forEach(r => {
+            if (r.replies && r.replies.length > 0) {
+                r.replies.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+            }
+        });
+
+        const subText = isSubscribed ? 'Subscribed' : 'Subscribe';
+        const subClass = isSubscribed ? 'active' : '';
+
+        const lockIcon = this.isLocked ? '🔒' : '🔓';
+        const lockTitle = this.isLocked ? 'Unlock Thread' : 'Lock Thread';
+        const lockBtn = this.isAdmin ? `<button id="lock-thread-btn" title="${lockTitle}">${lockIcon}</button>` : '';
+        const lockNotice = this.isLocked ? '<div class="lock-notice">🔒 This thread is locked. New comments are disabled.</div>' : '';
+
+        // Determine what to show for input
+        let inputSection = '';
+        if (this.isLocked && !this.isAdmin) {
+            inputSection = '<div class="lock-notice">🔒 Comments are disabled on this thread.</div>';
+        } else if (currentUserId) {
+            inputSection = this.renderInput();
+        } else {
+            inputSection = '<div class="login-placeholder"><a href="/login">Login</a> to comment</div>';
+        }
+
+        let html = `
+            <div class="comments-header">
+                <span>Comments (${comments.length}) ${this.isLocked ? '🔒' : ''}</span>
+                <div class="comments-controls">
+                    <select id="comment-sort">
+                        <option value="old" ${this.sort === 'old' ? 'selected' : ''}>Oldest</option>
+                        <option value="new" ${this.sort === 'new' ? 'selected' : ''}>Newest</option>
+                    </select>
+                    ${currentUserId ? `<button id="subscribe-btn" class="${subClass}">${subText}</button>` : ''}
+
+                    ${lockBtn}
+                </div>
+            </div>
+            ${inputSection}
+            <div class="comments-list">
+                ${roots.map(c => this.renderComment(c, currentUserId)).join('')}
+            </div>
+        `;
+
+        this.container.innerHTML = html;
+        this.bindEvents();
+    }
+
+    renderCommentContent(content) {
+        if (typeof marked === 'undefined') {
+            console.warn('Marked.js not loaded, falling back to plain text');
+            return this.escapeHtml(content).replace(/:([a-z0-9_]+):/g, (m, n) => this.renderEmoji(m, n));
+        }
+
+        try {
+            // 1. Escape HTML, but preserve > for blockquotes
+            let safe = content
+                .replace(/&/g, "&amp;")
+                .replace(/</g, "&lt;")
+                .replace(/"/g, "&quot;")
+                .replace(/'/g, "&#039;");
+
+            const renderer = new marked.Renderer();
+            renderer.blockquote = function (quote) {
+                // If quote is an object (latest marked), extract text. Otherwise use it as string.
+                let text = (typeof quote === 'string') ? quote : (quote.text || '');
+                let cleanQuote = text.replace(/<p>|<\/p>|\n/g, '');
+                return `<span class="greentext">&gt; ${cleanQuote}</span><br>`;
+            };
+
+            let md = marked.parse(safe, {
+                breaks: true,
+                renderer: renderer
+            });
+
+            return md.replace(/:([a-z0-9_]+):/g, (m, n) => this.renderEmoji(m, n));
+        } catch (e) {
+            console.error('Markdown error:', e);
+            return this.escapeHtml(content);
+        }
+    }
+
+    renderComment(comment, currentUserId, isReply = false) {
+        const isDeleted = comment.is_deleted;
+        const isPinned = comment.is_pinned;
+
+        // Add @mention prefix if this is a reply to a reply
+        let contentPrefix = '';
+        if (comment.replyTo) {
+            contentPrefix = `<span class="reply-mention">@${comment.replyTo}</span> `;
+        }
+
+        const content = isDeleted ? '<span class="deleted-msg">[deleted]</span>' : contentPrefix + this.renderCommentContent(comment.content);
+        const date = new Date(comment.created_at).toLocaleString();
+
+        // Admin buttons
+        let adminButtons = '';
+        if (this.isAdmin && !isDeleted) {
+            const pinIcon = isPinned ? '📌' : '📍';
+            const pinTitle = isPinned ? 'Unpin' : 'Pin';
+            adminButtons = `
+                <button class="admin-pin-btn" data-id="${comment.id}" title="${pinTitle}">${pinIcon}</button>
+                <button class="admin-edit-btn" data-id="${comment.id}" data-content="${this.escapeHtml(comment.content)}">✏️</button>
+                <button class="admin-delete-btn" data-id="${comment.id}">🗑️</button>
+            `;
+        }
+
+        const pinnedBadge = isPinned ? '<span class="pinned-badge">📌 Pinned</span>' : '';
+        const commentClass = isReply ? 'comment reply' : 'comment';
+
+        // Build replies HTML (only for root comments, max 1 level deep)
+        let repliesHtml = '';
+        if (!isReply && comment.replies && comment.replies.length > 0) {
+            repliesHtml = `<div class="comment-replies">${comment.replies.map(r => this.renderComment(r, currentUserId, true)).join('')}</div>`;
+        }
+
+        return `
+            <div class="${commentClass} ${isDeleted ? 'deleted' : ''} ${isPinned ? 'pinned' : ''}" id="c${comment.id}">
+                <div class="comment-avatar">
+                    <img src="${comment.avatar ? `/t/${comment.avatar}.webp` : '/s/img/default.png'}" alt="av">
+                </div>
+                <div class="comment-body">
+                    <div class="comment-meta">
+                        ${pinnedBadge}
+                        <span class="comment-author">${comment.username || 'System'}</span>
+                        <span class="comment-time">${date}</span>
+                        <a href="#c${comment.id}" class="comment-permalink">#${comment.id}</a>
+                        ${!isDeleted && currentUserId ? `<button class="reply-btn" data-id="${comment.id}" data-username="${comment.username}">Reply</button>` : ''}
+                        ${adminButtons}
+                    </div>
+                    <div class="comment-content">${content}</div>
+                </div>
+            </div>
+            ${repliesHtml}
+        `;
+    }
+
+    escapeHtml(unsafe) {
+        return unsafe
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
+
+    renderInput(parentId = null) {
+        return `
+            <div class="comment-input ${parentId ? 'reply-input' : 'main-input'}" ${parentId ? `data-parent="${parentId}"` : ''}>
+                <textarea placeholder="Write a comment..."></textarea>
+                <div class="input-actions">
+                    <button class="submit-comment">Post</button>
+                    ${parentId ? '<button class="cancel-reply">Cancel</button>' : ''}
+                </div>
+            </div>
+        `;
+    }
+
+    bindEvents() {
+        // Sorting
+        const sortSelect = this.container.querySelector('#comment-sort');
+        if (sortSelect) {
+            sortSelect.addEventListener('change', (e) => {
+                this.sort = e.target.value;
+                this.loadComments();
+            });
+        }
+
+        // Posting
+        this.container.querySelectorAll('.submit-comment').forEach(btn => {
+            btn.addEventListener('click', (e) => this.handleSubmit(e));
+        });
+
+        // Delete
+        this.container.querySelectorAll('.delete-btn').forEach(btn => {
+            btn.addEventListener('click', async (e) => {
+                if (!confirm('Delete this comment?')) return;
+                const id = e.target.dataset.id;
+                const res = await fetch(`/api/comments/${id}/delete`, { method: 'POST' });
+                const json = await res.json();
+                if (json.success) this.loadComments();
+                else alert('Failed to delete: ' + (json.message || 'Error'));
+            });
+        });
+
+        // Admin Delete
+        this.container.querySelectorAll('.admin-delete-btn').forEach(btn => {
+            btn.addEventListener('click', async (e) => {
+                if (!confirm('Admin: Delete this comment?')) return;
+                const id = e.target.dataset.id;
+                const res = await fetch(`/api/comments/${id}/delete`, { method: 'POST' });
+                const json = await res.json();
+                if (json.success) this.loadComments(id);
+                else alert('Failed to delete: ' + (json.message || 'Error'));
+            });
+        });
+
+        // Admin Pin
+        this.container.querySelectorAll('.admin-pin-btn').forEach(btn => {
+            btn.addEventListener('click', async (e) => {
+                const id = e.target.dataset.id;
+                const res = await fetch(`/api/comments/${id}/pin`, { method: 'POST' });
+                const json = await res.json();
+                if (json.success) this.loadComments(id);
+                else alert('Failed to pin: ' + (json.message || 'Error'));
+            });
+        });
+
+        // Admin Edit
+        this.container.querySelectorAll('.admin-edit-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const id = e.target.dataset.id;
+                const currentContent = e.target.dataset.content;
+                const commentEl = document.getElementById('c' + id);
+                const contentEl = commentEl.querySelector('.comment-content');
+
+                // Replace content with textarea
+                const originalHtml = contentEl.innerHTML;
+                contentEl.innerHTML = `
+                    <textarea class="edit-textarea">${currentContent}</textarea>
+                    <div class="edit-actions">
+                        <button class="save-edit-btn">Save</button>
+                        <button class="cancel-edit-btn">Cancel</button>
+                    </div>
+                `;
+
+                contentEl.querySelector('.cancel-edit-btn').addEventListener('click', () => {
+                    contentEl.innerHTML = originalHtml;
+                });
+
+                contentEl.querySelector('.save-edit-btn').addEventListener('click', async () => {
+                    const newContent = contentEl.querySelector('.edit-textarea').value;
+                    if (!newContent.trim()) return alert('Cannot be empty');
+
+                    const params = new URLSearchParams();
+                    params.append('content', newContent);
+
+                    const res = await fetch(`/api/comments/${id}/edit`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                        body: params
+                    });
+                    const json = await res.json();
+                    if (json.success) {
+                        this.loadComments(id);
+                    } else {
+                        alert('Failed to edit: ' + (json.message || 'Error'));
+                    }
+                });
+            });
+        });
+
+        // Reply
+        this.container.querySelectorAll('.reply-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const id = e.target.dataset.id;
+                const username = e.target.dataset.username;
+                const commentEl = e.target.closest('.comment');
+                const isReplyingToReply = commentEl.classList.contains('reply');
+
+                const body = e.target.closest('.comment-body');
+                // Check if input already exists
+                if (body.querySelector('.reply-input')) return;
+
+                const div = document.createElement('div');
+                div.innerHTML = this.renderInput(id);
+                body.appendChild(div.firstElementChild);
+
+                // Bind new buttons
+                const newForm = body.querySelector('.reply-input');
+                newForm.querySelector('.submit-comment').addEventListener('click', (ev) => this.handleSubmit(ev));
+                newForm.querySelector('.cancel-reply').addEventListener('click', () => newForm.remove());
+                this.setupEmojiPicker(newForm);
+            });
+        });
+
+        // Main Input Emoji Picker
+        const mainInput = this.container.querySelector('.main-input');
+        if (mainInput) this.setupEmojiPicker(mainInput);
+
+        // Subscription
+        // Subscription
+        const subBtn = this.container.querySelector('#subscribe-btn');
+        if (subBtn) {
+            subBtn.addEventListener('click', async () => {
+                // Optimistic UI update
+                const isSubscribed = subBtn.textContent === 'Subscribed';
+                subBtn.textContent = 'Wait...';
+
+                try {
+                    const res = await fetch(`/api/subscribe/${this.itemId}`, { method: 'POST' });
+                    const json = await res.json();
+
+                    if (json.success) {
+                        subBtn.textContent = json.subscribed ? 'Subscribed' : 'Subscribe';
+                        subBtn.classList.toggle('active', json.subscribed);
+                    } else {
+                        // Revert
+                        subBtn.textContent = isSubscribed ? 'Subscribed' : 'Subscribe';
+                        alert('Failed to toggle subscription');
+                    }
+                } catch (e) {
+                    subBtn.textContent = isSubscribed ? 'Subscribed' : 'Subscribe';
+                }
+            });
+        }
+
+
+
+        // Lock Thread
+        const lockBtn = this.container.querySelector('#lock-thread-btn');
+        if (lockBtn) {
+            lockBtn.addEventListener('click', async () => {
+                const action = this.isLocked ? 'unlock' : 'lock';
+                if (!confirm(`Admin: ${action.toUpperCase()} this thread?`)) return;
+
+                try {
+                    const res = await fetch(`/api/comments/${this.itemId}/lock`, { method: 'POST' });
+                    const json = await res.json();
+                    if (json.success) {
+                        this.loadComments();
+                    } else {
+                        alert('Failed to lock/unlock: ' + (json.message || 'Error'));
+                    }
+                } catch (e) {
+                    alert('Error: ' + e);
+                }
+            });
+        }
+
+        // Permalinks
+        this.container.addEventListener('click', (e) => {
+            if (e.target.classList.contains('comment-permalink')) {
+                e.preventDefault();
+                const hash = e.target.getAttribute('href'); // #c123
+                const id = hash.substring(2);
+
+                // Update URL without reload/hashchange trigger if possible, or just pushState
+                history.pushState(null, null, hash);
+
+                // Manually scroll
+                this.scrollToComment(id);
+            }
+        });
+    }
+
+    async handleSubmit(e) {
+        const wrap = e.target.closest('.comment-input');
+        const text = wrap.querySelector('textarea').value;
+        const parentId = wrap.dataset.parent || null;
+
+        if (!text.trim()) return;
+
+        try {
+            const params = new URLSearchParams();
+            params.append('item_id', this.itemId);
+            if (parentId) params.append('parent_id', parentId);
+            params.append('content', text);
+
+            const res = await fetch('/api/comments', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                body: params
+            });
+            const json = await res.json();
+            if (json.success) {
+                // Refresh comments or append locally
+                this.loadComments(json.comment.id);
+            } else {
+                alert('Error: ' + json.message);
+            }
+        } catch (err) {
+            console.error('Submit Error:', err);
+            alert('Failed to send comment: ' + err.toString());
+        }
+    }
+
+    setupGlobalListeners() {
+        window.addEventListener('hashchange', () => {
+            if (location.hash && location.hash.startsWith('#c')) {
+                const id = location.hash.substring(2);
+                this.scrollToComment(id);
+            }
+        });
+
+        // Shortcut 'c' to toggle comments
+        document.addEventListener('keydown', (e) => {
+            if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
+            const tag = e.target.tagName.toLowerCase();
+            if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;
+
+            if (e.key.toLowerCase() === 'c') {
+                if (!this.user) return;
+                this.toggleComments();
+            }
+        });
+    }
+
+    toggleComments() {
+        if (!this.container) return;
+
+        // Check if currently hidden (or fading out)
+        const isHidden = this.container.classList.contains('faded-out') || this.container.style.display === 'none';
+
+        if (isHidden) {
+            // SHOW
+            this.container.style.display = 'block';
+            localStorage.setItem('comments_hidden', 'false');
+            // Force reflow to enable transition
+            void this.container.offsetWidth;
+            this.container.classList.remove('faded-out');
+        } else {
+            // HIDE
+            localStorage.setItem('comments_hidden', 'true');
+            this.container.classList.add('faded-out');
+            // Wait for transition, then set display none
+            setTimeout(() => {
+                if (this.container.classList.contains('faded-out')) {
+                    this.container.style.display = 'none';
+                }
+            }, 300);
+        }
+    }
+
+
+
+    escapeHtml(unsafe) {
+        return unsafe
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
+
+
+
+    setupEmojiPicker(container) {
+        const textarea = container.querySelector('textarea');
+        if (container.querySelector('.emoji-trigger')) return;
+
+        const trigger = document.createElement('button');
+        trigger.innerText = '☺';
+        trigger.className = 'emoji-trigger';
+
+        const actions = container.querySelector('.input-actions');
+        if (actions) {
+            actions.prepend(trigger);
+
+            // Create picker once and cache it
+            let picker = null;
+            let closeHandler = null;
+
+            trigger.addEventListener('click', (e) => {
+                e.preventDefault();
+
+                // If picker already exists, toggle visibility
+                if (picker) {
+                    const isVisible = picker.style.display !== 'none';
+                    if (isVisible) {
+                        picker.style.display = 'none';
+                        if (closeHandler) {
+                            document.removeEventListener('click', closeHandler);
+                            closeHandler = null;
+                        }
+                    } else {
+                        picker.style.display = 'block';
+                        closeHandler = (ev) => {
+                            if (!picker.contains(ev.target) && ev.target !== trigger) {
+                                picker.style.display = 'none';
+                                document.removeEventListener('click', closeHandler);
+                                closeHandler = null;
+                            }
+                        };
+                        setTimeout(() => document.addEventListener('click', closeHandler), 0);
+                    }
+                    return;
+                }
+
+                // Create picker only once
+                picker = document.createElement('div');
+                picker.className = 'emoji-picker';
+
+                if (this.customEmojis && Object.keys(this.customEmojis).length > 0) {
+                    Object.keys(this.customEmojis).forEach(name => {
+                        const url = this.customEmojis[name];
+                        const img = document.createElement('img');
+                        img.src = url;
+                        img.title = `:${name}:`;
+                        img.loading = 'lazy'; // Use native lazy loading
+
+                        // Add error handling for failed loads
+                        img.onerror = () => {
+                            console.warn(`Failed to load emoji: ${name}`);
+                            img.style.display = 'none';
+                        };
+
+                        img.onclick = (ev) => {
+                            ev.stopPropagation();
+                            textarea.value += ` :${name}: `;
+                            textarea.focus();
+                        };
+                        picker.appendChild(img);
+                    });
+                } else {
+                    picker.innerHTML = '<div style="padding:5px;color:white;font-size:0.8em;">No emojis found</div>';
+                }
+
+                trigger.after(picker);
+
+                // Set up close handler
+                closeHandler = (ev) => {
+                    if (!picker.contains(ev.target) && ev.target !== trigger) {
+                        picker.style.display = 'none';
+                        document.removeEventListener('click', closeHandler);
+                        closeHandler = null;
+                    }
+                };
+                setTimeout(() => document.addEventListener('click', closeHandler), 0);
+            });
+        }
+    }
+}
+
+// Global instance or initialization
+window.commentSystem = new CommentSystem();
+// Re-init on navigation (if using SPA-like/pjax or custom f0ck.js navigation)
+document.addEventListener('f0ck:contentLoaded', () => { // Assuming custom event or we hook into it
+    // f0ck.js probably replaces content. We need to re-init.
+    window.commentSystem = new CommentSystem();
+});
+
+// If f0ck.js uses custom navigation without valid events, we might need MutationObserver or hook into `getContent`
+// Looking at f0ck.js, it seems to just replace innerHTML.

public/s/js/theme.js

@@ -1,10 +1,10 @@
 const Cookie = {
   get: name => {
     const c = document.cookie.match(`(?:(?:^|.*; *)${name} *= *([^;]*).*$)|^.*$`)[1];
-    if(c) return decodeURIComponent(c);
+    if (c) return decodeURIComponent(c);
   },
   set: (name, value, opts = {}) => {
-    if(opts.days) {
+    if (opts.days) {
       opts['max-age'] = opts.days * 60 * 60 * 24;
       delete opts.days;
     }
@@ -17,49 +17,54 @@ const Cookie = {
 (() => {
   const acttheme = Cookie.get('theme') ?? "w0bm";
   const themecontainer = document.querySelector("li#themes > ul.dropdown-menu");
-  const themes = [...themecontainer.querySelectorAll("li > a")].map(t => t.innerText.toLowerCase());
-  if(acttheme !== document.documentElement.getAttribute("theme") && themes.includes(acttheme))
-    document.documentElement.setAttribute("theme", acttheme);
-  [...themecontainer.querySelectorAll("li > a")].forEach(t => t.addEventListener("click", e => {
-    e.preventDefault();
-    const _theme = e.target.innerText.toLowerCase();
-    document.documentElement.setAttribute("theme", _theme);
-    document.querySelector("#themes > a").setAttribute("content", _theme);
-    Cookie.set("theme", _theme, { path: "/", days: 360 });
-    return false;
-  }));
 
-  document.addEventListener("keydown", e => {
-    if(e.target.tagName === "INPUT" ||  e.target.tagName === "TEXTAREA")
-      return;
-    const acttheme = Cookie.get('theme') ?? "w0bm";
+  if (themecontainer) {
     const themes = [...themecontainer.querySelectorAll("li > a")].map(t => t.innerText.toLowerCase());
-    const k = e.key;
-    if(k === "t") {
-      e.preventDefault();
-      let i = themes.indexOf(acttheme);
-      if(++i >= themes.length)
-        i = 0;
-      document.documentElement.setAttribute("theme", themes[i]);
-      document.querySelector("#themes > a").setAttribute("content", themes[i]);
-      Cookie.set("theme", themes[i], { path: "/", days: 360 });
-    }
-  });
+    if (acttheme !== document.documentElement.getAttribute("theme") && themes.includes(acttheme))
+      document.documentElement.setAttribute("theme", acttheme);
+    // [...themecontainer.querySelectorAll("li > a")].forEach(t => t.addEventListener("click", e => {
+    //   e.preventDefault();
+    //   const _theme = e.target.innerText.toLowerCase();
+    //   document.documentElement.setAttribute("theme", _theme);
+    //   document.querySelector("#themes > a").setAttribute("content", _theme);
+    //   Cookie.set("theme", _theme, { path: "/", days: 360 });
+    //   return false;
+    // }));
 
-  if(tbuttonfull = document.querySelector('svg#a_tfull')) {
-    tbuttonfull.addEventListener('click', e => {
-      let f = Cookie.get('fullscreen');
-      if(f == 1) {
-        Cookie.set('fullscreen', 0);
-        document.querySelector('html').setAttribute('res', '');
-        tbuttonfull.innerHTML = `<use href="/s/img/iconset.svg#window-maximize"></use>`;
-      }
-      else {
-        Cookie.set('fullscreen', 1);
-        document.querySelector('html').setAttribute('res', 'fullscreen');
-        tbuttonfull.innerHTML = `<use href="/s/img/iconset.svg#window-minimize"></use>`;
-      }
-      return true;
+    document.addEventListener("keydown", e => {
+      if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA")
+        return;
+      const acttheme = Cookie.get('theme') ?? "w0bm";
+      const themes = [...themecontainer.querySelectorAll("li > a")].map(t => t.innerText.toLowerCase());
+      const k = e.key;
+      // if (k === "t") {
+      //   e.preventDefault();
+      //   let i = themes.indexOf(acttheme);
+      //   if (++i >= themes.length)
+      //     i = 0;
+      //   document.documentElement.setAttribute("theme", themes[i]);
+      //   document.querySelector("#themes > a").setAttribute("content", themes[i]);
+      //   Cookie.set("theme", themes[i], { path: "/", days: 360 });
+      // }
     });
   }
+
+  // Fullscreen toggle - runs regardless of theme menu presence
+  document.addEventListener('click', e => {
+    const tbuttonfull = e.target.closest('svg#a_tfull');
+    if (!tbuttonfull) return;
+
+    let f = Cookie.get('fullscreen');
+    if (f == 1) {
+      Cookie.set('fullscreen', 0);
+      document.documentElement.setAttribute('res', '');
+      tbuttonfull.innerHTML = `<use href="/s/img/iconset.svg#window-maximize"></use>`;
+    }
+    else {
+      Cookie.set('fullscreen', 1);
+      document.documentElement.setAttribute('res', 'fullscreen');
+      tbuttonfull.innerHTML = `<use href="/s/img/iconset.svg#window-minimize"></use>`;
+    }
+    return true;
+  });
 })();

public/s/js/upload.js

@@ -0,0 +1,351 @@
+(() => {
+    const form = document.getElementById('upload-form');
+    if (!form) return;
+
+    const fileInput = document.getElementById('file-input');
+    const dropZone = document.getElementById('drop-zone');
+    const filePreview = document.getElementById('file-preview');
+    // Note: prompt is now a label, but accessible via class
+    const dropZonePrompt = dropZone.querySelector('.drop-zone-prompt');
+    const fileName = document.getElementById('file-name');
+    const fileSize = document.getElementById('file-size');
+    const removeFile = document.getElementById('remove-file');
+    const tagInput = document.getElementById('tag-input');
+    const tagsList = document.getElementById('tags-list');
+    const tagsHidden = document.getElementById('tags-hidden');
+    const tagCount = document.getElementById('tag-count');
+    const tagSuggestions = document.getElementById('tag-suggestions');
+    const submitBtn = document.getElementById('submit-btn');
+    const progressContainer = document.getElementById('upload-progress');
+    const progressFill = document.getElementById('progress-fill');
+    const progressText = document.getElementById('progress-text');
+    const statusDiv = document.getElementById('upload-status');
+
+    let tags = [];
+    let selectedFile = null;
+
+
+
+    const formatSize = (bytes) => {
+        const units = ['B', 'KB', 'MB', 'GB'];
+        let i = 0;
+        while (bytes >= 1024 && i < units.length - 1) {
+            bytes /= 1024;
+            i++;
+        }
+        return bytes.toFixed(2) + ' ' + units[i];
+    };
+
+    const updateSubmitButton = () => {
+        const rating = document.querySelector('input[name="rating"]:checked');
+        const hasFile = selectedFile !== null;
+        const hasRating = rating !== null;
+        const hasTags = tags.length >= 3;
+
+        submitBtn.disabled = !(hasFile && hasRating && hasTags);
+
+        if (!hasTags) {
+            submitBtn.querySelector('.btn-text').textContent = (3 - tags.length) + ' more tag' + (3 - tags.length !== 1 ? 's' : '') + ' required';
+        } else if (!hasFile) {
+            submitBtn.querySelector('.btn-text').textContent = 'Upload (Select file first)';
+        } else if (!hasRating) {
+            submitBtn.querySelector('.btn-text').textContent = 'Select SFW or NSFW';
+        } else {
+            submitBtn.querySelector('.btn-text').textContent = 'Upload';
+        }
+
+        tagCount.textContent = '(' + tags.length + '/3 minimum)';
+        tagCount.classList.toggle('valid', tags.length >= 3);
+    };
+
+    const handleFile = (file) => {
+        if (!file) return;
+
+        const validTypes = ['video/mp4', 'video/webm'];
+        // Check extensions as fallback
+        const ext = file.name.split('.').pop().toLowerCase();
+        const validExts = ['mp4', 'webm'];
+
+        if (!validTypes.includes(file.type) && !validExts.includes(ext)) {
+            statusDiv.textContent = 'Only mp4 and webm files are allowed';
+            statusDiv.className = 'upload-status error';
+            return;
+        }
+
+        selectedFile = file;
+        fileName.textContent = file.name;
+        fileSize.textContent = formatSize(file.size);
+        dropZonePrompt.style.display = 'none';
+
+        // Hide input so it doesn't intercept clicks on preview/remove button
+        fileInput.style.display = 'none';
+
+        filePreview.style.display = 'flex';
+        statusDiv.textContent = '';
+        statusDiv.className = 'upload-status';
+
+        // Video Preview
+        const itemPreview = filePreview.querySelector('.item-preview') || document.createElement('div');
+        itemPreview.className = 'item-preview';
+        itemPreview.style.marginRight = '15px';
+
+        // Clear previous
+        const existingVid = filePreview.querySelector('video');
+        if (existingVid) existingVid.remove();
+
+        const vid = document.createElement('video');
+        vid.src = URL.createObjectURL(file);
+        vid.controls = true; // User might want to scrub to check if it's the right video
+        vid.autoplay = true;
+        vid.muted = true;
+        vid.loop = true;
+        // Styles handled by CSS now for "Big" preview
+
+        filePreview.prepend(vid);
+
+        updateSubmitButton();
+    };
+
+    const preventDefaults = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+
+    // Attach drag events only to dropZone now (Input is hidden)
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, preventDefaults, false);
+    });
+
+    ['dragenter', 'dragover'].forEach(eventName => {
+        dropZone.addEventListener(eventName, () => dropZone.classList.add('dragover'), false);
+    });
+
+    ['dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, () => dropZone.classList.remove('dragover'), false);
+    });
+
+    dropZone.addEventListener('drop', (e) => {
+        const dt = e.dataTransfer;
+        const files = dt.files;
+        handleFile(files[0]);
+    });
+
+    // Native change listener on hidden input
+    fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
+
+    removeFile.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        selectedFile = null;
+        fileInput.value = '';
+        dropZonePrompt.style.display = 'block';
+        fileInput.style.display = 'block'; // Restore input visibility
+        filePreview.style.display = 'none';
+        // Clear preview video
+        const vid = filePreview.querySelector('video');
+        if (vid) vid.remove();
+
+        updateSubmitButton();
+    });
+
+    const addTag = (tagName) => {
+        tagName = tagName.trim().toLowerCase();
+        if (!tagName || tags.includes(tagName)) return;
+        if (tagName === 'sfw' || tagName === 'nsfw') return;
+
+        tags.push(tagName);
+
+        const chip = document.createElement('span');
+        chip.className = 'tag-chip';
+        chip.innerHTML = tagName + '<button type="button">&times;</button>';
+        chip.querySelector('button').addEventListener('click', () => {
+            tags = tags.filter(t => t !== tagName);
+            chip.remove();
+            updateSubmitButton();
+        });
+
+        tagsList.appendChild(chip);
+        tagsHidden.value = tags.join(',');
+        tagInput.value = '';
+        tagSuggestions.innerHTML = '';
+        tagSuggestions.classList.remove('show');
+        updateSubmitButton();
+    };
+
+    let currentFocus = -1;
+
+    const addActive = (x) => {
+        if (!x) return false;
+        removeActive(x);
+        if (currentFocus >= x.length) currentFocus = 0;
+        if (currentFocus < 0) currentFocus = (x.length - 1);
+        x[currentFocus].classList.add("active");
+        // Scroll to view
+        x[currentFocus].scrollIntoView({ block: 'nearest' });
+    };
+
+    const removeActive = (x) => {
+        for (let i = 0; i < x.length; i++) {
+            x[i].classList.remove("active");
+        }
+    };
+
+    tagInput.addEventListener('keydown', (e) => {
+        const x = tagSuggestions.getElementsByClassName("tag-suggestion");
+        if (e.key === 'ArrowDown') {
+            currentFocus++;
+            addActive(x);
+        } else if (e.key === 'ArrowUp') {
+            currentFocus--;
+            addActive(x);
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            if (currentFocus > -1) {
+                if (x) x[currentFocus].click();
+            } else {
+                addTag(tagInput.value);
+            }
+        } else if (e.key === 'Escape') {
+            tagSuggestions.classList.remove('show');
+            currentFocus = -1;
+        }
+    });
+
+    let debounceTimer;
+    tagInput.addEventListener('input', () => {
+        clearTimeout(debounceTimer);
+        const query = tagInput.value.trim();
+        currentFocus = -1; // Reset focus on new input
+
+        if (query.length < 2) {
+            tagSuggestions.classList.remove('show');
+            return;
+        }
+
+        debounceTimer = setTimeout(async () => {
+            try {
+                const res = await fetch('/api/v2/admin/tags/suggest?q=' + encodeURIComponent(query));
+                const data = await res.json();
+
+                if (data.success && data.suggestions && data.suggestions.length > 0) {
+                    const filtered = data.suggestions.filter(s => !tags.includes(s.tag.toLowerCase()));
+                    let html = '';
+                    for (let i = 0; i < Math.min(8, filtered.length); i++) {
+                        html += '<div class="tag-suggestion">' + filtered[i].tag + '</div>';
+                    }
+                    tagSuggestions.innerHTML = html;
+                    tagSuggestions.classList.add('show');
+
+                    tagSuggestions.querySelectorAll('.tag-suggestion').forEach(el => {
+                        el.addEventListener('click', () => {
+                            addTag(el.textContent);
+                            tagInput.focus();
+                        });
+                    });
+                } else {
+                    tagSuggestions.classList.remove('show');
+                }
+            } catch (err) {
+                console.error(err);
+            }
+        }, 200);
+    });
+
+    document.addEventListener('click', (e) => {
+        if (!tagInput.contains(e.target) && !tagSuggestions.contains(e.target)) {
+            tagSuggestions.classList.remove('show');
+        }
+    });
+
+    document.querySelectorAll('input[name="rating"]').forEach(radio => {
+        radio.addEventListener('change', updateSubmitButton);
+    });
+
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+
+        if (!selectedFile || tags.length < 3) return;
+
+        const rating = document.querySelector('input[name="rating"]:checked');
+        if (!rating) return;
+
+        submitBtn.disabled = true;
+        submitBtn.querySelector('.btn-text').style.display = 'none';
+        submitBtn.querySelector('.btn-loading').style.display = 'inline';
+        progressContainer.style.display = 'flex';
+        statusDiv.textContent = '';
+        statusDiv.className = 'upload-status';
+
+        const formData = new FormData();
+        formData.append('file', selectedFile);
+        formData.append('rating', rating.value);
+        formData.append('tags', tags.join(','));
+
+        try {
+            const xhr = new XMLHttpRequest();
+
+            xhr.upload.addEventListener('progress', (e) => {
+                if (e.lengthComputable) {
+                    const percent = Math.round((e.loaded / e.total) * 100);
+                    progressFill.style.width = percent + '%';
+                    progressText.textContent = percent + '%';
+                }
+            });
+
+            xhr.onload = () => {
+                const res = JSON.parse(xhr.responseText);
+                if (res.success) {
+                    statusDiv.innerHTML = '✓ ' + res.msg;
+                    statusDiv.className = 'upload-status success';
+
+
+                    form.reset();
+                    tags = [];
+                    tagsList.innerHTML = '';
+                    selectedFile = null;
+                    dropZonePrompt.style.display = 'block'; // label is actually flex/block via CSS
+                    filePreview.style.display = 'none';
+                    const vid = filePreview.querySelector('video');
+                    if (vid) vid.remove();
+                } else {
+                    statusDiv.textContent = '✕ ' + res.msg;
+                    statusDiv.className = 'upload-status error';
+                    if (res.repost) {
+                        statusDiv.innerHTML += ' <a href="/' + res.repost + '">View existing</a>';
+                    }
+
+                }
+
+                submitBtn.querySelector('.btn-text').style.display = 'inline';
+                submitBtn.querySelector('.btn-loading').style.display = 'none';
+                progressContainer.style.display = 'none';
+                progressFill.style.width = '0%';
+                updateSubmitButton();
+            };
+
+            xhr.onerror = () => {
+                statusDiv.textContent = '✕ Upload failed. Please try again.';
+                statusDiv.className = 'upload-status error';
+
+                submitBtn.querySelector('.btn-text').style.display = 'inline';
+                submitBtn.querySelector('.btn-loading').style.display = 'none';
+                progressContainer.style.display = 'none';
+                updateSubmitButton();
+            };
+
+            xhr.open('POST', '/api/v2/upload');
+            xhr.send(formData);
+
+        } catch (err) {
+            console.error(err);
+            statusDiv.textContent = '✕ Upload failed: ' + err.message;
+            statusDiv.className = 'upload-status error';
+
+            submitBtn.querySelector('.btn-text').style.display = 'inline';
+            submitBtn.querySelector('.btn-loading').style.display = 'none';
+            updateSubmitButton();
+        }
+    });
+
+    updateSubmitButton();
+})();

src/inc/events/callback_query.mjs

@@ -30,22 +30,21 @@ export default async bot => {
     f: async e => {
       logger.info(`${e.network} -> ${e.channel} -> ${e.user.nick}: ${e.message}`);
 
-      let [ cmd, id ] = e.opt.data.split(':');
+      let [cmd, id] = e.opt.data.split(':');
       let f0ck;
       id = +id;
 
-      if(cmd.startsWith('b_settag_')) {
+      if (cmd.startsWith('b_settag_')) {
         const tagid = +cmd.replace('b_settag_', '');
 
-        if(!(await lib.getTags(id)).filter(tag => tag.id == tagid).length) {
+        if (!(await lib.getTags(id)).filter(tag => tag.id == tagid).length) {
           // insert
           await db`
-            insert into "tags_assign" ${
-              db({
-                item_id: id,
-                tag_id: tagid,
-                user_id: 1
-              })
+            insert into "tags_assign" ${db({
+            item_id: id,
+            tag_id: tagid,
+            user_id: 1
+          })
             }
           `;
         }
@@ -71,9 +70,9 @@ export default async bot => {
         });
       }
 
-      switch(cmd) {
+      switch (cmd) {
         case "b_tags":
-          if(!id)
+          if (!id)
             return;
 
           const keyboard = await tagkeyboard(id);
@@ -87,9 +86,9 @@ export default async bot => {
               ]]
             })
           });
-        break;
+          break;
         case "b_back":
-          if(!id)
+          if (!id)
             return;
 
           await e.editMessageText(e.raw.chat.id, e.raw.message_id, e.message, {
@@ -104,24 +103,23 @@ export default async bot => {
               ]]
             })
           });
-        break;
+          break;
         case "b_sfw":
-          
-          if(!id)
+
+          if (!id)
             return;
 
-          if(!await lib.hasTag(id, 1)) {
+          if (!await lib.hasTag(id, 1)) {
             // insert
             await db`
-              insert into "tags_assign" ${
-                db({
-                  item_id: id,
-                  tag_id: 1, // sfw
-                  user_id: 1
-                })
+              insert into "tags_assign" ${db({
+              item_id: id,
+              tag_id: 1, // sfw
+              user_id: 1
+            })
               }
             `;
-            if(await lib.hasTag(id, 2)) {
+            if (await lib.hasTag(id, 2)) {
               await db`
                 delete from "tags_assign"
                 where tag_id = 2
@@ -151,23 +149,22 @@ export default async bot => {
             })
           });
 
-        break;
+          break;
         case "b_nsfw":
-          if(!id)
+          if (!id)
             return;
 
-          if(!await lib.hasTag(id, 2)) {
+          if (!await lib.hasTag(id, 2)) {
             // insert
             await db`
-              insert into "tags_assign" ${
-                db({
-                  item_id: id,
-                  tag_id: 2, // nsfw
-                  user_id: 1
-                })
+              insert into "tags_assign" ${db({
+              item_id: id,
+              tag_id: 2, // nsfw
+              user_id: 1
+            })
               }
             `;
-            if(await lib.hasTag(id, 1)) {
+            if (await lib.hasTag(id, 1)) {
               await db`
                 delete from "tags_assign"
                 where tag_id = 1
@@ -196,9 +193,9 @@ export default async bot => {
               ]]
             })
           });
-        break;
+          break;
         case "b_delete":
-          if(id <= 1)
+          if (id <= 1)
             return;
 
           e.user = {
@@ -218,33 +215,33 @@ export default async bot => {
           `;
           const level = getLevel(e.user).level;
 
-          if(f0ck.length === 0) {
+          if (f0ck.length === 0) {
             return await e.reply(`f0ck ${id}: f0ck not found`);
           }
-          
-          if(
+
+          if (
             (f0ck[0].username !== (e.user.nick || e.user.username) ||
-            f0ck[0].userchannel !== e.channel ||
-            f0ck[0].usernetwork !== e.network) &&
+              f0ck[0].userchannel !== e.channel ||
+              f0ck[0].usernetwork !== e.network) &&
             level < 100
           ) {
             return await e.reply(`f0ck ${id}: insufficient permissions`);
           }
 
-          if(~~(new Date() / 1e3) >= (f0ck[0].stamp + 600) && level < 100) {
+          if (~~(new Date() / 1e3) >= (f0ck[0].stamp + 600) && level < 100) {
             return await e.reply(`f0ck ${id}: too late lol`);
           }
 
-          await db`update "items" set active = 'false' where id = ${id}`;
+          await db`update "items" set active = 'false', is_deleted = true where id = ${id}`;
 
-          await fs.copyFile(`./public/b/${f0ck[0].dest}`, `./deleted/b/${f0ck[0].dest}`).catch(_=>{});
-          await fs.copyFile(`./public/t/${id}.webp`, `./deleted/t/${id}.webp`).catch(_=>{});
-          await fs.unlink(`./public/b/${f0ck[0].dest}`).catch(_=>{});
-          await fs.unlink(`./public/t/${id}.webp`).catch(_=>{});
+          await fs.copyFile(`./public/b/${f0ck[0].dest}`, `./deleted/b/${f0ck[0].dest}`).catch(_ => { });
+          await fs.copyFile(`./public/t/${id}.webp`, `./deleted/t/${id}.webp`).catch(_ => { });
+          await fs.unlink(`./public/b/${f0ck[0].dest}`).catch(_ => { });
+          await fs.unlink(`./public/t/${id}.webp`).catch(_ => { });
 
-          if(f0ck[0].mime.startsWith('audio')) {
-            await fs.copyFile(`./public/ca/${id}.webp`, `./deleted/ca/${id}.webp`).catch(_=>{});
-            await fs.unlink(`./public/ca/${id}.webp`).catch(_=>{});
+          if (f0ck[0].mime.startsWith('audio')) {
+            await fs.copyFile(`./public/ca/${id}.webp`, `./deleted/ca/${id}.webp`).catch(_ => { });
+            await fs.unlink(`./public/ca/${id}.webp`).catch(_ => { });
           }
 
           await e.editMessageText(e.raw.chat.id, e.raw.message_id, e.message, {
@@ -259,9 +256,9 @@ export default async bot => {
               ]]
             })
           });
-        break;
+          break;
         case "b_recover":
-          if(id <= 1)
+          if (id <= 1)
             return;
 
           e.user = {
@@ -270,7 +267,7 @@ export default async bot => {
             username: e.raw.reply_to_message.from.username,
             account: e.raw.reply_to_message.from.id.toString()
           };
-          
+
           f0ck = await db`
             select dest, mime
             from "items"
@@ -279,23 +276,23 @@ export default async bot => {
               active = 'false'
             limit 1
           `;
-  
-          if(f0ck.length === 0) {
+
+          if (f0ck.length === 0) {
             return await e.reply(`f0ck ${id}: f0ck not found`);
           }
-  
-          await fs.copyFile(`./deleted/b/${f0ck[0].dest}`, `./public/b/${f0ck[0].dest}`).catch(_=>{});
-          await fs.copyFile(`./deleted/t/${id}.webp`, `./public/t/${id}.webp`).catch(_=>{});
-          await fs.unlink(`./deleted/b/${f0ck[0].dest}`).catch(_=>{});
-          await fs.unlink(`./deleted/t/${id}.webp`).catch(_=>{});
-  
-          if(f0ck[0].mime.startsWith('audio')) {
-            await fs.copyFile(`./deleted/ca/${id}.webp`, `./public/ca/${id}.webp`).catch(_=>{});
-            await fs.unlink(`./deleted/ca/${id}.webp`).catch(_=>{});
+
+          await fs.copyFile(`./deleted/b/${f0ck[0].dest}`, `./public/b/${f0ck[0].dest}`).catch(_ => { });
+          await fs.copyFile(`./deleted/t/${id}.webp`, `./public/t/${id}.webp`).catch(_ => { });
+          await fs.unlink(`./deleted/b/${f0ck[0].dest}`).catch(_ => { });
+          await fs.unlink(`./deleted/t/${id}.webp`).catch(_ => { });
+
+          if (f0ck[0].mime.startsWith('audio')) {
+            await fs.copyFile(`./deleted/ca/${id}.webp`, `./public/ca/${id}.webp`).catch(_ => { });
+            await fs.unlink(`./deleted/ca/${id}.webp`).catch(_ => { });
           }
-  
+
           await db`update "items" set active = 'true' where id = ${id}`;
-          
+
           await e.editMessageText(e.raw.chat.id, e.raw.message_id, e.message, {
             reply_markup: JSON.stringify({
               inline_keyboard: [[
@@ -308,7 +305,7 @@ export default async bot => {
               ]]
             })
           });
-        break;
+          break;
         default:
           await e.reply('lol');
       }

src/inc/lib.mjs

@@ -109,7 +109,12 @@ export default new class {
     const deleted = +(await db`
       select count(*) as total
       from "items"
-      where active = false
+      where active = false and is_deleted = true
+    `)[0].total;
+    const pending = +(await db`
+      select count(*) as total
+      from "items"
+      where active = false and is_deleted = false
     `)[0].total;
     const lastf0ck = +(await db`
       select max(id) as id
@@ -120,7 +125,8 @@ export default new class {
       untagged,
       total: tagged + untagged,
       deleted,
-      untracked: lastf0ck - (tagged + untagged + deleted),
+      pending,
+      untracked: lastf0ck - (tagged + untagged + deleted + pending),
       sfw,
       nsfw,
     };

src/inc/routeinc/f0cklib.mjs

@@ -8,13 +8,13 @@ const globalfilter = cfg.nsfp.map(n => `tag_id = ${n}`).join(' or ');
 
 export default {
   getf0cks: async (o = { user, tag, mime, page, mode, fav, session, limit }) => {
-    const user    = o.user ? decodeURI(o.user) : null;
-    const tag     = lib.parseTag(o.tag ?? null);
-    const mime    = o.mime ?? null;
-    const page    = +(o.page ?? 1);
-    const smime   = cfg.allowedMimes.includes(mime) ? mime + "/%" : mime === "" ? "%" : "%";
-    const eps     = o.limit ?? cfg.websrv.eps;
-    
+    const user = o.user ? decodeURI(o.user) : null;
+    const tag = lib.parseTag(o.tag ?? null);
+    const mime = o.mime ?? null;
+    const page = +(o.page ?? 1);
+    const smime = cfg.allowedMimes.includes(mime) ? mime + "/%" : mime === "" ? "%" : "%";
+    const eps = o.limit ?? cfg.websrv.eps;
+
     const tmp = { user, tag, mime, smime, page, mode: o.mode };
     const modequery = mime == "audio" ? lib.getMode(0) : lib.getMode(o.mode ?? 0);
 
@@ -27,17 +27,17 @@ export default {
       left join favorites on favorites.item_id = items.id
       left join "user" on "user".id = favorites.user_id
       where
-        ${ db.unsafe(modequery) }
+        ${db.unsafe(modequery)}
         and items.active = 'true'
-        ${ tag ? db`and tags.normalized ilike '%' || slugify(${tag}) || '%'` : db`` }
-        ${ o.fav ? db`and "user".user ilike ${'%'+user+'%'}` : db`` }
-        ${ !o.fav && user ? db`and items.username ilike ${'%'+user+'%'}` : db`` }
-        ${ mime ? db`and items.mime ilike ${smime}` : db`` }
-        ${ !o.session && globalfilter ? db`and items.id not in (select item_id from tags_assign where item_id = items.id and (${db.unsafe(globalfilter)}))` : db`` }
+        ${tag ? db`and tags.normalized ilike '%' || slugify(${tag}) || '%'` : db``}
+        ${o.fav ? db`and "user".user ilike ${'%' + user + '%'}` : db``}
+        ${!o.fav && user ? db`and items.username ilike ${'%' + user + '%'}` : db``}
+        ${mime ? db`and items.mime ilike ${smime}` : db``}
+        ${!o.session && globalfilter ? db`and items.id not in (select item_id from tags_assign where item_id = items.id and (${db.unsafe(globalfilter)}))` : db``}
       group by items.id, tags.tag
     `)?.length || 0;
 
-    if(!total || total === 0) {
+    if (!total || total === 0) {
       return {
         success: false,
         message: "404 - no f0cks given"
@@ -61,13 +61,13 @@ export default {
       left join "user" on "user".id = favorites.user_id
       left join tags_assign ta on ta.item_id = items.id and (ta.tag_id = 1 or ta.tag_id = 2)
       where
-        ${ db.unsafe(modequery) }
+        ${db.unsafe(modequery)}
         and items.active = 'true'
-        ${ tag ? db`and tags.normalized ilike '%' || slugify(${tag}) || '%'` : db`` }
-        ${ o.fav ? db`and "user".user ilike ${'%'+user+'%'}` : db`` }
-        ${ !o.fav && user ? db`and items.username ilike ${'%'+user+'%'}` : db`` }
-        ${ mime ? db`and items.mime ilike ${smime}` : db`` }
-        ${ !o.session && globalfilter ? db`and items.id not in (select item_id from tags_assign where item_id = items.id and (${db.unsafe(globalfilter)}))` : db`` }
+        ${tag ? db`and tags.normalized ilike '%' || slugify(${tag}) || '%'` : db``}
+        ${o.fav ? db`and "user".user ilike ${'%' + user + '%'}` : db``}
+        ${!o.fav && user ? db`and items.username ilike ${'%' + user + '%'}` : db``}
+        ${mime ? db`and items.mime ilike ${smime}` : db``}
+        ${!o.session && globalfilter ? db`and items.id not in (select item_id from tags_assign where item_id = items.id and (${db.unsafe(globalfilter)}))` : db``}
       group by items.id, tags.tag, ta.tag_id
       order by items.id desc
       offset ${offset}
@@ -75,11 +75,11 @@ export default {
     `;
 
     const cheat = [];
-    for(let i = Math.max(1, act_page - 3); i <= Math.min(act_page + 3, pages); i++)
+    for (let i = Math.max(1, act_page - 3); i <= Math.min(act_page + 3, pages); i++)
       cheat.push(i);
-  
+
     const link = lib.genLink({ user, tag, mime, type: o.fav ? 'favs' : 'f0cks', path: 'p/' });
-  
+
     return {
       success: true,
       items: rows,
@@ -96,54 +96,61 @@ export default {
     };
   },
   getf0ck: async (o = ({ user, tag, mime, itemid, mode, session })) => {
-    const user    = o.user ? decodeURI(o.user) : null;
-    const tag     = lib.parseTag(o.tag ?? null);
-    const mime    = (o.mime ?? "");
-    const itemid  = +(o.itemid ?? 404);
-    const smime   = cfg.allowedMimes.includes(mime) ? mime + "/%" : mime === "" ? "%" : "%";
-    
+    const user = o.user ? decodeURI(o.user) : null;
+    const tag = lib.parseTag(o.tag ?? null);
+    const mime = (o.mime ?? "");
+    const itemid = +(o.itemid ?? 404);
+    const smime = cfg.allowedMimes.includes(mime) ? mime + "/%" : mime === "" ? "%" : "%";
+
     const tmp = { user, tag, mime, smime, itemid };
-  
+
     const modequery = mime == "audio" ? lib.getMode(0) : lib.getMode(o.mode ?? 0);
-  
-    if(itemid === 404) {
+
+    if (itemid === 404) {
       return {
         success: false,
         message: "404 - f0ck not found"
       };
     }
-  
+
     const items = await db`
       select distinct on (items.id)
         items.*
       from items
       left join tags_assign on tags_assign.item_id = items.id
       left join tags on tags.id = tags_assign.tag_id
-      left join favorites on favorites.item_id = items.id
-      left join "user" on "user".id = favorites.user_id
+      ${o.fav
+        ? db`inner join favorites on favorites.item_id = items.id inner join "user" on "user".id = favorites.user_id`
+        : db`left join favorites on favorites.item_id = items.id left join "user" on "user".id = favorites.user_id`
+      }
       left join tags_assign ta on ta.item_id = items.id and (ta.tag_id = 1 or ta.tag_id = 2)
       where
-        ${ db.unsafe(modequery) }
+        ${db.unsafe(modequery)}
         and items.active = 'true'
-        ${ tag ? db`and tags.normalized ilike '%' || slugify(${tag}) || '%'` : db`` }
-        ${ o.fav ? db`and "user".user ilike ${'%'+user+'%'}` : db`` }
-        ${ !o.fav && user ? db`and items.username ilike ${'%'+user+'%'}` : db`` }
-        ${ mime ? db`and items.mime ilike ${smime}` : db`` }
-        ${ !o.session && globalfilter ? db`and items.id not in (select item_id from tags_assign where item_id = items.id and (${db.unsafe(globalfilter)}))` : db`` }
+        ${tag ? db`and tags.normalized ilike '%' || slugify(${tag}) || '%'` : db``}
+        ${o.fav ? db`and "user"."user" ilike ${user}` : db``}
+        ${!o.fav && user ? db`and items.username ilike ${'%' + user + '%'}` : db``}
+        ${mime ? db`and items.mime ilike ${smime}` : db``}
+        ${!o.session && globalfilter ? db`and items.id not in (select item_id from tags_assign where item_id = items.id and (${db.unsafe(globalfilter)}))` : db``}
       group by items.id, tags.tag, ta.tag_id
       order by items.id desc
     `;
 
+    console.log('[GETF0CK DEBUG] Query params:', { user, itemid, fav: o.fav });
+    console.log('[GETF0CK DEBUG] Items found:', items.length, 'Item IDs:', items.slice(0, 10).map(i => i.id));
+
     const item = items.findIndex(i => i.id === itemid);
     const actitem = items[item];
-  
-    if(!actitem) { // sfw-check!
+
+    console.log('[GETF0CK DEBUG] findIndex result:', item, 'actitem exists:', !!actitem);
+
+    if (!actitem) { // sfw-check!
       return {
         success: false,
         message: "Sorry, this post is currently not visible."
       };
     }
-  
+
     const tags = await lib.getTags(itemid);
     const cheat = [...new Set(items.slice(Math.max(0, item - 3), item + 4).map(i => i.id))];
     const link = lib.genLink({ user, tag, mime, type: o.fav ? 'favs' : 'f0cks', path: '' });
@@ -154,19 +161,19 @@ export default {
       left join "user_options" on "user_options".user_id = "favorites".user_id
       where "favorites".item_id = ${itemid}
     `;
-    
+
     let coverart = true;
     try {
       await fs.promises.access(`./public${cfg.websrv.paths.coverarts}/${actitem.id}.webp`);
-    } catch(err) {
+    } catch (err) {
       coverart = false;
     }
-  
+
     const data = {
       success: true,
       user: {
         name: actitem.username,
-        channel: actitem.usernetwork == "Telegram" && actitem.userchannel !== "w0bm.com" ? "anonymous" : actitem.userchannel,
+        channel: actitem.usernetwork == "Telegram" && actitem.userchannel !== cfg.websrv.domain ? "anonymous" : actitem.userchannel,
         network: actitem.usernetwork
       },
       item: {
@@ -175,7 +182,7 @@ export default {
           long: actitem.src,
           short: url.parse(actitem.src).hostname,
         },
-        thumbnail: `${cfg.websrv.paths.thumbnails}/${actitem.id}.png`,
+        thumbnail: `${cfg.websrv.paths.thumbnails}/${actitem.id}.webp`,
         coverart: coverart ? `${cfg.websrv.paths.coverarts}/${actitem.id}.webp` : '/s/img/music.webp',
         dest: `${cfg.websrv.paths.images}/${actitem.dest}`,
         mime: actitem.mime,
@@ -185,9 +192,10 @@ export default {
           timefull: new Date(actitem.stamp * 1e3).toISOString()
         },
         favorites: favorites,
-        tags: tags
+        tags: tags,
+        is_comments_locked: actitem.is_comments_locked || false
       },
-      title: `${actitem.id} - w0bm.com`,
+      title: `${actitem.id} - ${cfg.websrv.domain}`,
       pagination: {
         end: items[items.length - 1]?.id,
         start: items[0]?.id,
@@ -201,16 +209,16 @@ export default {
       tmp
     };
     return data;
-  },getRandom: async (o = ({ user, tag, mime, mode, fav, session })) => {
+  }, getRandom: async (o = ({ user, tag, mime, mode, fav, session })) => {
     const user = o.user ? decodeURI(o.user) : null;
     const tag = lib.parseTag(o.tag ?? null);
     const mime = (o.mime ?? "");
     const smime = cfg.allowedMimes.includes(mime) ? mime + "/%" : mime === "" ? "%" : "%";
-  
+
     const modequery = mime == "audio" ? lib.getMode(0) : lib.getMode(o.mode ?? 0);
-  
+
     let item;
-  
+
     if (o.fav && user) {
       // Special case: random from user's favorites
       item = await db`
@@ -219,10 +227,15 @@ export default {
         from favorites
         inner join items on favorites.item_id = items.id
         inner join "user" on "user".id = favorites.user_id
+        left join tags_assign on tags_assign.item_id = items.id
+        left join tags on tags.id = tags_assign.tag_id
         where
-          "user".user ilike ${'%' + user + '%'}
+          ${db.unsafe(modequery)}
+          and "user".user ilike ${'%' + user + '%'}
           and items.active = 'true'
           ${mime ? db`and items.mime ilike ${smime}` : db``}
+          ${!o.session && globalfilter ? db`and items.id not in (select item_id from tags_assign where item_id = items.id and (${db.unsafe(globalfilter)}))` : db``}
+        group by items.id
         order by random()
         limit 1
       `;
@@ -246,20 +259,48 @@ export default {
         limit 1
       `;
     }
-  
+
     if (item.length === 0) {
       return {
         success: false,
         message: "no f0cks found :("
       };
     }
-  
+
     const link = lib.genLink({ user, tag, mime, type: o.fav ? 'favs' : 'f0cks' });
-  
+
     return {
-      success: true,
-      link: link,
       itemid: item[0].id
     };
+  },
+  getComments: async (itemId, sort = 'new') => {
+    if (!itemId) return [];
+    try {
+      const comments = await db`
+            SELECT
+                c.id, c.parent_id, c.content, c.created_at, c.vote_score, c.is_deleted,
+                COALESCE(c.is_pinned, false) as is_pinned,
+                u.user as username, u.id as user_id, uo.avatar,
+                (SELECT count(*) FROM comments r WHERE r.parent_id = c.id) as reply_count
+            FROM comments c
+            JOIN "user" u ON c.user_id = u.id
+            LEFT JOIN user_options uo ON uo.user_id = u.id
+            WHERE c.item_id = ${itemId} AND c.is_deleted = false
+            ORDER BY COALESCE(c.is_pinned, false) DESC, c.created_at ${db.unsafe(sort === 'new' ? 'DESC' : 'ASC')}
+        `;
+      return comments;
+    } catch (e) {
+      console.error('[F0CKLIB] Error fetching comments:', e);
+      return [];
+    }
+  },
+  getSubscriptionStatus: async (userId, itemId) => {
+    if (!userId || !itemId) return false;
+    try {
+      const sub = await db`SELECT 1 FROM comment_subscriptions WHERE user_id = ${userId} AND item_id = ${itemId}`;
+      return sub.length > 0;
+    } catch (e) {
+      return false;
+    }
   }
-  };
+};

src/inc/routes/admin.mjs

@@ -2,10 +2,11 @@ import db from "../sql.mjs";
 import lib from "../lib.mjs";
 import { exec } from "child_process";
 import { promises as fs } from "fs";
+import cfg from "../config.mjs";
 
 export default (router, tpl) => {
   router.get(/^\/login(\/)?$/, async (req, res) => {
-    if(req.cookies.session) {
+    if (req.cookies.session) {
       return res.reply({
         body: tpl.render('error', {
           message: "you're already logged in lol",
@@ -17,7 +18,7 @@ export default (router, tpl) => {
       body: tpl.render("login", { theme: req.cookies.theme ?? "f0ck" })
     });
   });
-  
+
   router.post(/^\/login(\/)?$/, async (req, res) => {
     const user = await db`
       select *
@@ -25,9 +26,9 @@ export default (router, tpl) => {
       where "login" = ${req.post.username.toLowerCase()}
       limit 1
     `;
-    if(user.length === 0)
+    if (user.length === 0)
       return res.reply({ body: "user doesn't exist or wrong password" });
-    if(!(await lib.verify(req.post.password, user[0].password)))
+    if (!(await lib.verify(req.post.password, user[0].password)))
       return res.reply({ body: "user doesn't exist or wrong password" });
     const stamp = ~~(Date.now() / 1e3);
 
@@ -36,7 +37,7 @@ export default (router, tpl) => {
       where last_action <= ${(Date.now() - 6048e5)}
       and kmsi = 0
     `;
-  
+
     const session = lib.md5(lib.createID());
     const blah = {
       user_id: user[0].id,
@@ -49,8 +50,7 @@ export default (router, tpl) => {
     };
 
     await db`
-      insert into "user_sessions" ${
-        db(blah, 'user_id', 'session', 'browser', 'created_at', 'last_used', 'last_action', 'kmsi')
+      insert into "user_sessions" ${db(blah, 'user_id', 'session', 'browser', 'created_at', 'last_used', 'last_action', 'kmsi')
       }
     `;
 
@@ -60,16 +60,16 @@ export default (router, tpl) => {
       "Location": "/"
     }).end();
   });
-  
+
   router.get(/^\/logout$/, lib.loggedin, async (req, res) => {
     const usersession = await db`
       select *
       from "user_sessions"
       where id = ${+req.session.sess_id}
     `;
-    if(usersession.length === 0)
+    if (usersession.length === 0)
       return res.reply({ body: "nope 2" });
-    
+
     await db`
       delete from "user_sessions"
       where id = ${+req.session.sess_id}
@@ -80,7 +80,7 @@ export default (router, tpl) => {
       "Location": "/"
     }).end();
   });
-  
+
   router.get(/^\/login\/pwdgen$/, async (req, res) => {
     res.reply({
       body: "<form action=\"/login/pwdgen\" method=\"post\"><input type=\"text\" name=\"pwd\" placeholder=\"pwd\" /><input type=\"submit\" value=\"f0ck it\" /></form>"
@@ -102,7 +102,7 @@ export default (router, tpl) => {
       }, req)
     });
   });
-  
+
   router.get(/^\/admin\/sessions(\/)?$/, lib.auth, async (req, res) => {
     const rows = await db`
       select "user_sessions".*, "user".user
@@ -110,7 +110,7 @@ export default (router, tpl) => {
       left join "user" on "user".id = "user_sessions".user_id
       order by "user_sessions".last_used desc
     `;
-  
+
     res.reply({
       body: tpl.render("admin/sessions", {
         session: req.session,
@@ -121,79 +121,237 @@ export default (router, tpl) => {
     });
   });
 
-  // router.get(/^\/admin\/log(\/)?$/, lib.auth, async (req, res) => {
-  //   // Funktioniert ohne systemd service natürlich nicht.
-  //   exec("journalctl -qeu f0ck --no-pager", (err, stdout) => {
-  //     res.reply({
-  //       body: tpl.render("admin/log", {
-  //         log: stdout.split("\n").slice(0, -1),
-  //         tmp: null
-  //       }, req)
-  //     });
-  //   });
-  // });
+  router.get(/^\/admin\/approve\/?/, lib.auth, async (req, res) => {
+    if (req.url.qs?.id) {
+      const id = +req.url.qs.id;
+      const f0ck = await db`
+        select dest, mime
+        from "items"
+        where
+          id = ${id} and
+          active = 'false'
+        limit 1
+      `;
+      if (f0ck.length === 0) {
+        return res.reply({
+          body: `f0ck ${id}: f0ck not found`
+        });
+      }
 
-  // router.get(/^\/admin\/recover\/?/, lib.auth, async (req, res) => {
-  //  Gelöschte Objekte werden nicht aufgehoben.
-  //   if(req.url.qs?.id) {
-  //     const id = +req.url.qs.id;
-  //     const f0ck = await db`
-  //       select dest, mime
-  //       from "items"
-  //       where
-  //         id = ${id} and
-  //         active = 'false'
-  //       limit 1
-  //     `;
-  //     if(f0ck.length === 0) {
-  //       return res.reply({
-  //         body: `f0ck ${id}: f0ck not found`
-  //       });
-  //     }
+      await db`update "items" set active = 'true', is_deleted = false where id = ${id}`;
 
-  //     await db`update "items" set active = 'true' where id = ${id}`;
+      // Check if files need moving (if they are in deleted/)
+      try {
+        await fs.access(`./public/b/${f0ck[0].dest}`);
+        // Exists in public, good (new upload)
+      } catch {
+        // Not in public, likely a deleted item being recovered
+        await fs.copyFile(`./deleted/b/${f0ck[0].dest}`, `./public/b/${f0ck[0].dest}`).catch(_ => { });
+        await fs.copyFile(`./deleted/t/${id}.webp`, `./public/t/${id}.webp`).catch(_ => { });
+        await fs.unlink(`./deleted/b/${f0ck[0].dest}`).catch(_ => { });
+        await fs.unlink(`./deleted/t/${id}.webp`).catch(_ => { });
 
-  //     await fs.copyFile(`./deleted/b/${f0ck[0].dest}`, `./public/b/${f0ck[0].dest}`).catch(_=>{});
-  //     await fs.copyFile(`./deleted/t/${id}.webp`, `./public/t/${id}.webp`).catch(_=>{});
-  //     await fs.unlink(`./deleted/b/${f0ck[0].dest}`).catch(_=>{});
-  //     await fs.unlink(`./deleted/t/${id}.webp`).catch(_=>{});
+        if (f0ck[0].mime.startsWith('audio')) {
+          await fs.copyFile(`./deleted/ca/${id}.webp`, `./public/ca/${id}.webp`).catch(_ => { });
+          await fs.unlink(`./deleted/ca/${id}.webp`).catch(_ => { });
+        }
+      }
 
-  //     if(f0ck[0].mime.startsWith('audio')) {
-  //       await fs.copyFile(`./deleted/ca/${id}.webp`, `./public/ca/${id}.webp`).catch(_=>{});
-  //       await fs.unlink(`./deleted/ca/${id}.webp`).catch(_=>{});
-  //     }
+      return res.writeHead(302, {
+        "Location": `/${id}`
+      }).end();
+    }
 
-  //     return res.reply({
-  //       body: `f0ck ${id} recovered. <a href="/admin/recover">back</a>`
-  //     });
-  //   }
+    const page = +req.url.qs.page || 1;
+    const limit = 50;
+    const offset = (page - 1) * limit;
 
-  //   const _posts = await db`
-  //     select id, mime, username
-  //     from "items"
-  //     where
-  //       active = 'false'
-  //     order by id desc
-  //   `;
+    const total = (await db`select count(*) as c from "items" where active = 'false'`)[0].c;
+    const pages = Math.ceil(total / limit);
 
-  //   if(_posts.length === 0) {
-  //     return res.reply({
-  //       body: 'blah'
-  //     });
-  //   }
+    // Fetch Pending (not deleted)
+    const pending = await db`
+      select i.id, i.mime, i.username, i.dest, array_agg(t.tag) as tags
+      from "items" i
+      left join "tags_assign" ta on ta.item_id = i.id
+      left join "tags" t on t.id = ta.tag_id
+      where
+        i.active = 'false' and i.is_deleted = false
+      group by i.id
+      order by i.id desc
+    `;
 
-  //   const posts = await Promise.all(_posts.map(async p => ({
-  //     ...p,
-  //     thumbnail: (await fs.readFile(`./deleted/t/${p.id}.webp`)).toString('base64')
-  //   })));
+    // Fetch Trash (deleted)
+    const trash = await db`
+      select i.id, i.mime, i.username, i.dest, array_agg(t.tag) as tags
+      from "items" i
+      left join "tags_assign" ta on ta.item_id = i.id
+      left join "tags" t on t.id = ta.tag_id
+      where
+        i.active = 'false' and i.is_deleted = true
+      group by i.id
+      order by i.id desc
+    `;
 
-  //   res.reply({
-  //     body: tpl.render('admin/recover', {
-  //       posts,
-  //       tmp: null
-  //     }, req)
-  //   });
-  // });
+    // Helper to process thumbnails
+    const processItems = async (items, isInTrash) => {
+      return Promise.all(items.map(async p => {
+        let thumb = '';
+        const path = isInTrash ? 'deleted' : 'public';
+        try {
+          thumb = (await fs.readFile(`./${path}/t/${p.id}.webp`)).toString('base64');
+        } catch { }
+        return {
+          ...p,
+          thumbnail: thumb,
+          tags: p.tags.filter(t => t !== null)
+        };
+      }));
+    };
+
+    const pendingProcessed = await processItems(pending, false);
+    const trashProcessed = await processItems(trash, true);
+
+    res.reply({
+      body: tpl.render('admin/approve', {
+        pending: pendingProcessed,
+        trash: trashProcessed,
+        page,
+        pages,
+        stats: { total: pending.length + trash.length },
+        tmp: null
+      }, req)
+    });
+  });
+
+  const deleteItem = async (id) => {
+    const f0ck = await db`
+      select dest, mime
+      from "items"
+      where
+        id = ${id}
+      limit 1
+    `;
+
+    if (f0ck.length > 0) {
+      console.log(`[ADMIN DENY] Found item, deleting files: ${f0ck[0].dest}`);
+      // Delete files
+      await fs.unlink(`./public/b/${f0ck[0].dest}`).catch(e => console.log('File error pub/b:', e.message));
+      await fs.unlink(`./public/t/${id}.webp`).catch(e => console.log('File error pub/t:', e.message));
+      await fs.unlink(`./deleted/b/${f0ck[0].dest}`).catch(e => console.log('File error del/b:', e.message));
+      await fs.unlink(`./deleted/t/${id}.webp`).catch(e => console.log('File error del/t:', e.message));
+
+      if (f0ck[0].mime.startsWith('audio')) {
+        await fs.unlink(`./public/ca/${id}.webp`).catch(() => { });
+        await fs.unlink(`./deleted/ca/${id}.webp`).catch(() => { });
+      }
+
+      // Delete DB entries
+      console.log('[ADMIN DENY] Deleting DB entries...');
+      try {
+        // Fix FK constraint: Check if this item is used as an avatar
+        try {
+          const fallback = await db`select id from items where active = true limit 1`;
+          if (fallback.length > 0) {
+            const safeId = fallback[0].id;
+            await db`update "user_options" set avatar = ${safeId} where avatar = ${id}`;
+          }
+        } catch (fkErr) {
+          console.error('[ADMIN DENY FK FIX ERROR]', fkErr);
+        }
+
+        await db`delete from "tags_assign" where item_id = ${id}`;
+        await db`delete from "favorites" where item_id = ${id}`;
+        await db`delete from "comments" where item_id = ${id}`.catch(() => { });
+        await db`delete from "items" where id = ${id}`;
+        console.log('[ADMIN DENY] Deleted successfully');
+        return true;
+      } catch (dbErr) {
+        console.error('[ADMIN DENY DB ERROR]', dbErr);
+        return false;
+      }
+    } else {
+      console.log('[ADMIN DENY] Item not found in DB');
+      return false;
+    }
+  };
+
+  router.get(/^\/admin\/deny\/?/, lib.auth, async (req, res) => {
+    console.log('[ADMIN DENY] Logs initiated');
+    if (req.url.qs?.id) {
+      const id = +req.url.qs.id;
+      console.log(`[ADMIN DENY] Denying ID: ${id}`);
+      await deleteItem(id);
+      return res.reply({ success: true });
+    }
+
+    console.log('[ADMIN DENY] No ID provided');
+    return res.reply({ success: false, msg: "No ID provided" });
+  });
+
+  router.post(/^\/admin\/deny-multi\/?/, lib.auth, async (req, res) => {
+    try {
+      const ids = req.post.ids;
+      if (!Array.isArray(ids)) throw new Error('ids must be an array');
+
+      console.log(`[ADMIN DENY MULTI] Denying ${ids.length} items`);
+      for (const id of ids) {
+        await deleteItem(+id);
+      }
+
+      return res.reply({ success: true });
+    } catch (err) {
+      console.error('[ADMIN DENY MULTI ERROR]', err);
+      return res.reply({ success: false, msg: err.message }, 500);
+    }
+  });
+
+  // Token Routes
+  router.get(/^\/admin\/tokens\/?$/, lib.auth, async (req, res) => {
+    res.reply({
+      body: tpl.render("admin/tokens", { session: req.session, tmp: null }, req)
+    });
+  });
+
+  router.get(/^\/api\/v2\/admin\/tokens\/?$/, lib.auth, async (req, res) => {
+    const tokens = await db`
+        select invite_tokens.*, "user".user as used_by_name
+        from invite_tokens
+        left join "user" on "user".id = invite_tokens.used_by
+        order by created_at desc
+    `;
+    if (res.json) {
+      return res.json({ success: true, tokens });
+    }
+    // Fallback if res.json is not available
+    return res.writeHead(200, { 'Content-Type': 'application/json' }).end(JSON.stringify({ success: true, tokens }));
+  });
+
+  router.post(/^\/api\/v2\/admin\/tokens\/create\/?$/, lib.auth, async (req, res) => {
+    try {
+      const secret = cfg.main.invite_secret || 'defaultsecret';
+      const token = lib.md5(lib.createID() + secret).substring(0, 10).toUpperCase(); // Short readable token
+      await db`
+            insert into invite_tokens (token, created_at, created_by)
+            values (${token}, ${~~(Date.now() / 1e3)}, ${req.session.id})
+        `;
+      if (res.json) return res.json({ success: true, token });
+      return res.writeHead(200, { 'Content-Type': 'application/json' }).end(JSON.stringify({ success: true, token }));
+    } catch (err) {
+      if (res.json) return res.json({ success: false, msg: err.message });
+      return res.writeHead(200, { 'Content-Type': 'application/json' }).end(JSON.stringify({ success: false, msg: err.message }));
+    }
+  });
+
+  router.post(/^\/api\/v2\/admin\/tokens\/delete\/?$/, lib.auth, async (req, res) => {
+    if (!req.post.id) {
+      if (res.json) return res.json({ success: false });
+      return res.writeHead(200, { 'Content-Type': 'application/json' }).end(JSON.stringify({ success: false }));
+    }
+    await db`delete from invite_tokens where id = ${req.post.id}`;
+    if (res.json) return res.json({ success: true });
+    return res.writeHead(200, { 'Content-Type': 'application/json' }).end(JSON.stringify({ success: true }));
+  });
 
   return router;
 };

src/inc/routes/ajax.mjs

@@ -13,8 +13,14 @@ export default (router, tpl) => {
         }
 
         let contextUrl = `/${req.params.itemid}`;
-        if (query.tag) contextUrl = `/tag/${query.tag}/${req.params.itemid}`;
-        if (query.user) contextUrl = `/user/${query.user}/${req.params.itemid}`; // User filter takes precedence if both? usually mutually exclusive
+        if (query.tag) contextUrl = `/tag/${encodeURIComponent(query.tag)}/${req.params.itemid}`;
+        if (query.user) {
+            contextUrl = query.fav === 'true'
+                ? `/user/${encodeURIComponent(query.user)}/favs/${req.params.itemid}`
+                : `/user/${encodeURIComponent(query.user)}/${req.params.itemid}`;
+        }
+
+        console.log('[AJAX DEBUG] Params:', { itemid: req.params.itemid, user: query.user, fav: query.fav, contextUrl });
 
         const data = await f0cklib.getf0ck({
             itemid: req.params.itemid,
@@ -23,9 +29,12 @@ export default (router, tpl) => {
             url: contextUrl,
             user: query.user,
             tag: query.tag,
-            mime: query.mime
+            mime: query.mime,
+            fav: query.fav === 'true'
         });
 
+        console.log('[AJAX DEBUG] getf0ck result:', { success: data.success, message: data.message });
+
         if (!data.success) {
             return res.reply({
                 code: 404,
@@ -33,22 +42,42 @@ export default (router, tpl) => {
             });
         }
 
+        // Preload comments for instant rendering (if logged in)
+        if (req.session) {
+            data.comments = await f0cklib.getComments(req.params.itemid);
+            // Also need subscription status? comments.js handles subscription toggle separately but initial state?
+            // API returns is_subscribed.
+            // Let's optimize later or just fetch simple comments list.
+            // Subscription status and is_locked/is_admin might be needed for comments.js to FULLY render without API call.
+            // But comments.js fetches API mainly for comments list. It also gets is_admin etc.
+            // If I provide comments list, comments.js skips fetch.
+            // It uses `this.isAdmin` from DOM. `this.isLocked` from DOM.
+            // `isSubscribed`? Not in DOM yet.
+            // I should add `data-is-subscribed` to DOM?
+            const sub = await f0cklib.getSubscriptionStatus(req.session.id, req.params.itemid);
+            data.isSubscribed = sub;
+            data.commentsJSON = Buffer.from(JSON.stringify(data.comments || [])).toString('base64');
+        } else {
+            data.comments = [];
+            data.isSubscribed = false;
+            data.commentsJSON = Buffer.from('[]').toString('base64');
+        }
+
         // Inject session into data for the template
         // We clone session to avoid unintended side effects or collisions
         if (req.session) {
             data.session = { ...req.session };
             // data.user comes from f0cklib (uploader). req.session.user is logged-in user string.
-            // If template engine confuses them, removing session.user from this context might help.
-            // item-partial doesn't use session.user.
-            // Note: If anything fails, it prints literal code, so we ensure no collision.
-            if (data.session.user) delete data.session.user;
+            // Templates use session.user for matching favorites. We must preserve it.
+            // if (data.session.user) delete data.session.user; // REMOVED THIS
         } else {
             data.session = false;
         }
 
         // Inject missing variables normally provided by req or middleware
-        data.url = { pathname: `/${req.params.itemid}` }; // Template expects url.pathname
+        data.url = { pathname: contextUrl }; // Template expects url.pathname
         data.fullscreen = req.cookies.fullscreen || 0; // Index.mjs uses req.cookies.fullscreen
+        data.hidePagination = true;
 
         // Render both the item content and the pagination
         const itemHtml = tpl.render('ajax-item', data);
@@ -64,5 +93,65 @@ export default (router, tpl) => {
         });
     });
 
+    // Infinite scroll endpoint for index thumbnails
+    router.get(/\/ajax\/items/, async (req, res) => {
+        let query = {};
+        if (typeof req.url === 'string') {
+            const parsedUrl = url.parse(req.url, true);
+            query = parsedUrl.query;
+        } else {
+            query = req.url.qs || {};
+        }
+
+        const page = parseInt(query.page) || 1;
+
+        const data = await f0cklib.getf0cks({
+            page: page,
+            tag: query.tag || null,
+            user: query.user || null,
+            mime: query.mime || null,
+            mode: req.session.mode,
+            session: !!req.session,
+            fav: false
+        });
+
+        if (!data.success) {
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    success: false,
+                    html: '',
+                    hasMore: false
+                })
+            });
+        }
+
+        // Render just the thumbnail items
+        const itemsHtml = tpl.render('snippets/items-grid', {
+            items: data.items,
+            link: data.link
+        });
+
+        // Render pagination
+        const paginationHtml = tpl.render('snippets/pagination', {
+            pagination: data.pagination,
+            link: data.link
+        });
+
+        const hasMore = data.pagination.next !== null;
+
+        return res.reply({
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                success: true,
+                html: itemsHtml,
+                pagination: paginationHtml,
+                hasMore: hasMore,
+                nextPage: data.pagination.next,
+                currentPage: data.pagination.page
+            })
+        });
+    });
+
     return router;
 };

src/inc/routes/apiv2/index.mjs

@@ -1,9 +1,12 @@
 import { promises as fs } from "fs";
 import db from '../../sql.mjs';
 import lib from '../../lib.mjs';
+import cfg from '../../config.mjs';
 import search from '../../routeinc/search.mjs';
 
-const allowedMimes = [ "audio", "image", "video", "%" ];
+const allowedMimes = ["audio", "image", "video", "%"];
+const globalfilter = cfg.nsfp?.length ? cfg.nsfp.map(n => `tag_id = ${n}`).join(' or ') : null;
+
 export default router => {
   router.group(/^\/api\/v2/, group => {
     group.get(/$/, (req, res) => {
@@ -11,26 +14,43 @@ export default router => {
     });
 
     group.get(/\/random(\/user\/.+|\/image|\/video|\/audio)?$/, async (req, res) => {
-      const user = req.url.split[3] === "user" ? req.url.split[4] : "%";
-      const mime = (allowedMimes.filter(n => req.url.split[3]?.startsWith(n))[0] ? req.url.split[3] : "") + "%";
-  
+      const pathUser = req.url.split[3] === "user" ? req.url.split[4] : null;
+      const user = req.url.qs.user || pathUser || "%";
+
+      const pathMime = allowedMimes.filter(n => req.url.split[3]?.startsWith(n))[0] ? req.url.split[3] : "";
+      const mime = (req.url.qs.mime || pathMime) + "%";
+
+      const tag = req.url.qs.tag || null;
+      const isFav = req.url.qs.fav === 'true';
+      const hasSession = !!req.session;
+      const modequery = mime.startsWith("audio") ? lib.getMode(0) : lib.getMode(req.session?.mode ?? 0);
+
       const rows = await db`
-        select *
+        select "items".*
         from "items"
+        ${isFav
+          ? db`join "favorites" on "favorites".item_id = "items".id join "user" as fu on fu.id = "favorites".user_id`
+          : db``
+        }
+        left join tags_assign on tags_assign.item_id = items.id
+        left join tags on tags.id = tags_assign.tag_id
         where
+          ${db.unsafe(modequery)} and
           mime ilike ${mime} and
-          username ilike ${user} and
           active = 'true'
+          ${isFav ? db`and fu."user" = ${user}` : db`and items.username ilike ${user}`}
+          ${tag ? db`and tags.normalized ilike '%' || slugify(${tag}) || '%'` : db``}
+          ${!hasSession && globalfilter ? db`and items.id not in (select item_id from tags_assign where item_id = items.id and (${db.unsafe(globalfilter)}))` : db``}
         order by random()
         limit 1
       `;
-  
+
       return res.json({
         success: rows.length > 0,
         items: rows.length > 0 ? rows[0] : []
       });
     });
-  
+
     group.get(/\/items\/get/, async (req, res) => {
       let eps = 150;
 
@@ -51,17 +71,15 @@ export default router => {
         where
           ${db.unsafe(modequery)} and
           active = 'true'
-          ${
-            opt.older
-              ? db`and id <= ${opt.older}`
-              : opt.newer
-                ? db`and id >= ${opt.newer}`
-                : db``
-          }
-        order by id ${
-          opt.newer
-            ? db`asc`
-            : db`desc`
+          ${opt.older
+          ? db`and id <= ${opt.older}`
+          : opt.newer
+            ? db`and id >= ${opt.newer}`
+            : db``
+        }
+        order by id ${opt.newer
+          ? db`asc`
+          : db`desc`
         }
         limit ${eps}
       `).sort((a, b) => b.id - a.id);
@@ -73,10 +91,10 @@ export default router => {
         items: rows
       }, 200);
     });
-  
+
     group.get(/\/item\/[0-9]+$/, async (req, res) => {
       const id = +req.url.split[3];
-  
+
       const item = await db`
         select *
         from "items"
@@ -97,14 +115,14 @@ export default router => {
         order by id desc
         limit 1
       `;
-  
-      if(item.length === 0) {
+
+      if (item.length === 0) {
         return res.json({
           success: false,
           msg: 'no items found'
         });
       }
-  
+
       const rows = {
         ...item[0],
         ...{
@@ -118,11 +136,11 @@ export default router => {
         rows
       });
     });
-  
+
     group.get(/\/user\/.*(\/\d+)?$/, async (req, res) => {
       const user = req.url.split[3];
       const eps = +req.url.split[4] || 50;
-  
+
       const rows = db`
         select id, mime, size, src, stamp, userchannel, username, usernetwork
         from "items"
@@ -130,7 +148,7 @@ export default router => {
         order by stamp desc
         limit ${+eps}
       `;
-        
+
       return res.json({
         success: rows.length > 0,
         items: rows.length > 0 ? rows : []
@@ -140,7 +158,7 @@ export default router => {
     // tags lol
 
     group.put(/\/admin\/tags\/(?<tagname>.*)/, lib.loggedin, async (req, res) => {
-      if(!req.params.tagname || !req.post.newtag) {
+      if (!req.params.tagname || !req.post.newtag) {
         return res.json({
           success: false,
           msg: 'missing tagname or newtag',
@@ -154,7 +172,7 @@ export default router => {
       const tagname = decodeURIComponent(req.params.tagname);
       const newtag = req.post.newtag;
 
-      if(['sfw', 'nsfw'].includes(tagname) || ['sfw', 'nsfw'].includes(newtag)) {
+      if (['sfw', 'nsfw'].includes(tagname) || ['sfw', 'nsfw'].includes(newtag)) {
         return res.json({
           msg: 'f0ck you'
         }, 405); // method not allowed
@@ -166,8 +184,8 @@ export default router => {
         where tag = ${tagname}
         limit 1
       `)[0];
-      
-      if(!tmptag) {
+
+      if (!tmptag) {
         return res.json({
           success: false,
           msg: 'no tag found'
@@ -175,10 +193,9 @@ export default router => {
       }
 
       const q = (await db`
-        update "tags" set ${
-          db({
-            tag: newtag
-          }, 'tag')
+        update "tags" set ${db({
+        tag: newtag
+      }, 'tag')
         }
         where tag = ${tagname}
         returning *
@@ -195,7 +212,7 @@ export default router => {
 
       const searchString = req.url.qs.q;
 
-      if(searchString?.length <= 1) {
+      if (searchString?.length <= 1) {
         reply.error = 'too short lol';
         return res.json(reply);
       }
@@ -212,7 +229,7 @@ export default router => {
         `;
         reply.success = true;
         reply.suggestions = search(q, searchString);
-      } catch(err) {
+      } catch (err) {
         reply.error = err.msg;
       }
 
@@ -220,7 +237,7 @@ export default router => {
     });
 
     group.post(/\/admin\/deletepost$/, lib.auth, async (req, res) => {
-      if(!req.post.postid) {
+      if (!req.post.postid) {
         return res.json({
           success: false,
           msg: 'no postid'
@@ -228,7 +245,7 @@ export default router => {
       }
       const id = +req.post.postid;
 
-      if(id <= 1) {
+      if (id <= 1) {
         return res.json({
           success: false
         });
@@ -243,23 +260,23 @@ export default router => {
         limit 1
       `;
 
-      if(f0ck.length === 0) {
+      if (f0ck.length === 0) {
         return res.json({
           success: false,
           msg: `f0ck ${id}: f0ck not found`
         });
       }
 
-      await db`update "items" set active = 'false' where id = ${id}`;
-  
-      await fs.copyFile(`./public/b/${f0ck[0].dest}`, `./deleted/b/${f0ck[0].dest}`).catch(_=>{});
-      await fs.copyFile(`./public/t/${id}.webp`, `./deleted/t/${id}.webp`).catch(_=>{});
-      await fs.unlink(`./public/b/${f0ck[0].dest}`).catch(_=>{});
-      await fs.unlink(`./public/t/${id}.webp`).catch(_=>{});
+      await db`update "items" set active = 'false', is_deleted = true where id = ${id}`;
 
-      if(f0ck[0].mime.startsWith('audio')) {
-        await fs.copyFile(`./public/ca/${id}.webp`, `./deleted/ca/${id}.webp`).catch(_=>{});
-        await fs.unlink(`./public/ca/${id}.webp`).catch(_=>{});
+      await fs.copyFile(`./public/b/${f0ck[0].dest}`, `./deleted/b/${f0ck[0].dest}`).catch(_ => { });
+      await fs.copyFile(`./public/t/${id}.webp`, `./deleted/t/${id}.webp`).catch(_ => { });
+      await fs.unlink(`./public/b/${f0ck[0].dest}`).catch(_ => { });
+      await fs.unlink(`./public/t/${id}.webp`).catch(_ => { });
+
+      if (f0ck[0].mime.startsWith('audio')) {
+        await fs.copyFile(`./public/ca/${id}.webp`, `./deleted/ca/${id}.webp`).catch(_ => { });
+        await fs.unlink(`./public/ca/${id}.webp`).catch(_ => { });
       }
 
       res.json({
@@ -269,14 +286,14 @@ export default router => {
 
     group.post(/\/admin\/togglefav$/, lib.loggedin, async (req, res) => {
       const postid = +req.post.postid;
-      
+
       let favs = await db`
         select user_id
         from "favorites"
         where item_id = ${+postid}
       `;
 
-      if(Object.values(favs).filter(u => u.user_id === req.session.id)[0]) {
+      if (Object.values(favs).filter(u => u.user_id === req.session.id)[0]) {
         // del fav
         await db`
           delete from "favorites"
@@ -287,11 +304,10 @@ export default router => {
       else {
         // add fav
         await db`
-          insert into "favorites" ${
-            db({
-              item_id: +postid,
-              user_id: +req.session.id
-            }, 'item_id', 'user_id')
+          insert into "favorites" ${db({
+          item_id: +postid,
+          user_id: +req.session.id
+        }, 'item_id', 'user_id')
           }
         `;
       }
@@ -310,7 +326,7 @@ export default router => {
         favs
       });
     });
-  
+
   });
 
   return router;

src/inc/routes/apiv2/upload.mjs

@@ -0,0 +1,260 @@
+import { promises as fs } from "fs";
+import db from '../../sql.mjs';
+import lib from '../../lib.mjs';
+import cfg from '../../config.mjs';
+import queue from '../../queue.mjs';
+import path from "path";
+
+// Native multipart form data parser
+const parseMultipart = (buffer, boundary) => {
+    const parts = {};
+    const boundaryBuffer = Buffer.from(`--${boundary}`);
+    const segments = [];
+
+    let start = 0;
+    let idx;
+
+    while ((idx = buffer.indexOf(boundaryBuffer, start)) !== -1) {
+        if (start !== 0) {
+            segments.push(buffer.slice(start, idx - 2)); // -2 for \r\n before boundary
+        }
+        start = idx + boundaryBuffer.length + 2; // +2 for \r\n after boundary
+    }
+
+    for (const segment of segments) {
+        const headerEnd = segment.indexOf('\r\n\r\n');
+        if (headerEnd === -1) continue;
+
+        const headers = segment.slice(0, headerEnd).toString();
+        const body = segment.slice(headerEnd + 4);
+
+        const nameMatch = headers.match(/name="([^"]+)"/);
+        const filenameMatch = headers.match(/filename="([^"]+)"/);
+        const contentTypeMatch = headers.match(/Content-Type:\s*([^\r\n]+)/i);
+
+        if (nameMatch) {
+            const name = nameMatch[1];
+            if (filenameMatch) {
+                parts[name] = {
+                    filename: filenameMatch[1],
+                    contentType: contentTypeMatch ? contentTypeMatch[1] : 'application/octet-stream',
+                    data: body
+                };
+            } else {
+                parts[name] = body.toString().trim();
+            }
+        }
+    }
+
+    return parts;
+};
+
+// Collect request body as buffer with debug logging
+const collectBody = (req) => {
+    return new Promise((resolve, reject) => {
+        console.log('[UPLOAD DEBUG] collectBody started');
+        const chunks = [];
+        req.on('data', chunk => {
+            // console.log(`[UPLOAD DEBUG] chunk received: ${chunk.length} bytes`);
+            chunks.push(chunk);
+        });
+        req.on('end', () => {
+            console.log(`[UPLOAD DEBUG] Stream ended. Total size: ${chunks.reduce((acc, c) => acc + c.length, 0)}`);
+            resolve(Buffer.concat(chunks));
+        });
+        req.on('error', err => {
+            console.error('[UPLOAD DEBUG] Stream error:', err);
+            reject(err);
+        });
+
+        // Ensure stream is flowing
+        if (req.isPaused()) {
+            console.log('[UPLOAD DEBUG] Stream was paused, resuming...');
+            req.resume();
+        }
+    });
+};
+
+export default router => {
+    router.group(/^\/api\/v2/, group => {
+
+        group.post(/\/upload$/, lib.loggedin, async (req, res) => {
+            try {
+                console.log('[UPLOAD DEBUG] Request received');
+                // Use stored content type if available (from middleware bypass), otherwise use header
+                const contentType = req._multipartContentType || req.headers['content-type'] || '';
+                const boundaryMatch = contentType.match(/boundary=(.+)$/);
+
+                if (!boundaryMatch) {
+                    console.log('[UPLOAD DEBUG] No boundary found');
+                    return res.json({ success: false, msg: 'Invalid content type' }, 400);
+                }
+
+                let body;
+                if (req.bodyPromise) {
+                    console.log('[UPLOAD DEBUG] Waiting for buffered body from middleware promise...');
+                    body = await req.bodyPromise;
+                    console.log('[UPLOAD DEBUG] Received body from promise');
+                } else if (req.rawBody) {
+                    console.log('[UPLOAD DEBUG] Using buffered body from middleware');
+                    body = req.rawBody;
+                } else {
+                    console.log('[UPLOAD DEBUG] Collecting body via collectBody...');
+                    body = await collectBody(req);
+                }
+
+                if (!body) {
+                    return res.json({ success: false, msg: 'Failed to receive file body' }, 400);
+                }
+
+                console.log('[UPLOAD DEBUG] Body size:', body.length);
+                const parts = parseMultipart(body, boundaryMatch[1]);
+                console.log('[UPLOAD DEBUG] Parsed parts:', Object.keys(parts));
+
+                // Validate required fields
+                const file = parts.file;
+                const rating = parts.rating; // 'sfw' or 'nsfw'
+                const tagsRaw = parts.tags;  // comma-separated tags
+
+                if (!file || !file.data) {
+                    return res.json({ success: false, msg: 'No file provided' }, 400);
+                }
+
+                if (!rating || !['sfw', 'nsfw'].includes(rating)) {
+                    return res.json({ success: false, msg: 'Rating (sfw/nsfw) is required' }, 400);
+                }
+
+                const tags = tagsRaw ? tagsRaw.split(',').map(t => t.trim()).filter(t => t.length > 0) : [];
+                if (tags.length < 3) {
+                    return res.json({ success: false, msg: 'At least 3 tags are required' }, 400);
+                }
+
+                // Validate MIME type
+                const allowedMimes = ['video/mp4', 'video/webm'];
+                let mime = file.contentType;
+
+                if (!allowedMimes.includes(mime)) {
+                    return res.json({ success: false, msg: `Invalid file type. Only mp4 and webm allowed. Got: ${mime}` }, 400);
+                }
+
+                // Validate file size
+                const maxfilesize = cfg.main.maxfilesize;
+                const size = file.data.length;
+
+                if (size > maxfilesize) {
+                    return res.json({
+                        success: false,
+                        msg: `File too large. Max: ${lib.formatSize(maxfilesize)}, Got: ${lib.formatSize(size)}`
+                    }, 400);
+                }
+
+                // Generate UUID for filename
+                const uuid = await queue.genuuid();
+                const ext = mime === 'video/mp4' ? 'mp4' : 'webm';
+                const filename = `${uuid}.${ext}`;
+                const tmpPath = `./tmp/${filename}`;
+                const destPath = `./public/b/${filename}`;
+
+                // Save file temporarily
+                await fs.writeFile(tmpPath, file.data);
+
+                // Verify MIME with file command
+                const actualMime = (await queue.exec(`file --mime-type -b ${tmpPath}`)).stdout.trim();
+                if (!allowedMimes.includes(actualMime)) {
+                    await fs.unlink(tmpPath).catch(() => { });
+                    return res.json({ success: false, msg: `Invalid file type detected: ${actualMime}` }, 400);
+                }
+
+                // Generate checksum
+                const checksum = (await queue.exec(`sha256sum ${tmpPath}`)).stdout.trim().split(" ")[0];
+
+                // Check for repost
+                const repost = await queue.checkrepostsum(checksum);
+                if (repost) {
+                    await fs.unlink(tmpPath).catch(() => { });
+                    return res.json({
+                        success: false,
+                        msg: `This file already exists`,
+                        repost: repost
+                    }, 409);
+                }
+
+                // Move to public folder
+                await fs.copyFile(tmpPath, destPath);
+                await fs.unlink(tmpPath).catch(() => { });
+
+                // Insert into database (active=false for admin approval)
+                await db`
+          insert into items ${db({
+                    src: '',
+                    dest: filename,
+                    mime: actualMime,
+                    size: size,
+                    checksum: checksum,
+                    username: req.session.user,
+                    userchannel: 'web',
+                    usernetwork: 'web',
+                    stamp: ~~(Date.now() / 1000),
+                    active: false
+                }, 'src', 'dest', 'mime', 'size', 'checksum', 'username', 'userchannel', 'usernetwork', 'stamp', 'active')
+                    }
+        `;
+
+                // Get the new item ID
+                const itemid = await queue.getItemID(filename);
+
+                // Generate thumbnail
+                try {
+                    await queue.genThumbnail(filename, actualMime, itemid, '');
+                } catch (err) {
+                    await queue.exec(`magick ./mugge.png ./public/t/${itemid}.webp`);
+                }
+
+                // Assign rating tag (sfw=1, nsfw=2)
+                const ratingTagId = rating === 'sfw' ? 1 : 2;
+                await db`
+          insert into tags_assign ${db({ item_id: itemid, tag_id: ratingTagId, user_id: req.session.id })}
+        `;
+
+                // Assign user tags
+                for (const tagName of tags) {
+                    // Check if tag exists, create if not
+                    let tagRow = await db`
+            select id from tags where normalized = slugify(${tagName}) limit 1
+          `;
+
+                    let tagId;
+                    if (tagRow.length === 0) {
+                        // Create new tag
+                        await db`
+              insert into tags ${db({ tag: tagName }, 'tag')}
+            `;
+                        tagRow = await db`
+              select id from tags where normalized = slugify(${tagName}) limit 1
+            `;
+                    }
+                    tagId = tagRow[0].id;
+
+                    // Assign tag to item
+                    await db`
+            insert into tags_assign ${db({ item_id: itemid, tag_id: tagId, user_id: req.session.id })}
+            on conflict do nothing
+          `;
+                }
+
+                return res.json({
+                    success: true,
+                    msg: 'Upload successful! Your upload is pending admin approval.',
+                    itemid: itemid
+                });
+
+            } catch (err) {
+                console.error('[UPLOAD ERROR]', err);
+                return res.json({ success: false, msg: 'Upload failed: ' + err.message }, 500);
+            }
+        });
+
+    });
+
+    return router;
+};

src/inc/routes/comments.mjs

@@ -0,0 +1,292 @@
+import db from "../sql.mjs";
+import f0cklib from "../routeinc/f0cklib.mjs"; // Assuming this exists or we need to check imports
+
+export default (router, tpl) => {
+
+
+
+    // Get comments for an item
+    router.get(/\/api\/comments\/(?<itemid>\d+)/, async (req, res) => {
+        const itemId = req.params.itemid;
+        const sort = req.url.qs?.sort || 'new'; // 'new' or 'old'
+
+        // Require login
+        if (!req.session) {
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    success: true,
+                    comments: [],
+                    require_login: true,
+                    user_id: null,
+                    is_admin: false
+                })
+            });
+        }
+
+        try {
+            // Check locked status
+            const item = await db`SELECT is_comments_locked FROM items WHERE id = ${itemId}`;
+            const is_locked = item.length > 0 ? item[0].is_comments_locked : false;
+
+            const comments = await f0cklib.getComments(itemId, sort);
+
+            let is_subscribed = false;
+            if (req.session) {
+                const sub = await db`SELECT 1 FROM comment_subscriptions WHERE user_id = ${req.session.id} AND item_id = ${itemId}`;
+                if (sub.length > 0) is_subscribed = true;
+            }
+
+            // Transform for frontend if needed, or send as is
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    success: true,
+                    comments,
+                    is_subscribed,
+                    is_locked,
+                    user_id: req.session ? req.session.user : null,
+                    is_admin: req.session ? req.session.admin : false
+                })
+            })
+        } catch (err) {
+            console.error(err);
+            return res.reply({
+                code: 500,
+                body: JSON.stringify({ success: false, message: "Database error" })
+            });
+        }
+    });
+
+    // Post a comment
+    router.post('/api/comments', async (req, res) => {
+        if (!req.session) return res.reply({ code: 401, body: JSON.stringify({ success: false, message: "Unauthorized" }) });
+
+        console.log("DEBUG: POST /api/comments");
+
+        // Use standard framework parsing
+        const body = req.post || {};
+        const item_id = parseInt(body.item_id, 10);
+        const parent_id = body.parent_id ? parseInt(body.parent_id, 10) : null;
+        const content = body.content;
+
+        console.log("DEBUG: Posting comment:", { item_id, parent_id, content: content?.substring(0, 20) });
+
+        if (!content || !content.trim()) {
+            return res.reply({ body: JSON.stringify({ success: false, message: "Empty comment" }) });
+        }
+
+        try {
+            // Check if thread is locked (admins can still post)
+            if (!req.session.admin) {
+                const lockCheck = await db`SELECT COALESCE(is_comments_locked, false) as is_locked FROM items WHERE id = ${item_id}`;
+                if (lockCheck.length > 0 && lockCheck[0].is_locked) {
+                    return res.reply({ code: 403, body: JSON.stringify({ success: false, message: "This thread is locked" }) });
+                }
+            }
+
+            const newComment = await db`
+                INSERT INTO comments ${db({
+                item_id,
+                user_id: req.session.id,
+                parent_id: parent_id || null,
+                content: content
+            })}
+                RETURNING id, created_at
+            `;
+
+            const commentId = parseInt(newComment[0].id, 10);
+
+            // Notify Subscribers (excluding the author)
+            // 1. Get subscribers of the item
+            // 2. If it's a reply, notify parent author? (Optional, complex logic. Let's stick to item subscription for now + Parent author)
+
+            // Logic: Notify users who subscribed to this item OR are the parent author.
+            // Exclude current user.
+
+            // 1. Get subscribers
+            const subscribers = await db`SELECT user_id FROM comment_subscriptions WHERE item_id = ${item_id}`;
+
+            // 2. Get parent author
+            let parentAuthor = [];
+            if (parent_id) {
+                parentAuthor = await db`SELECT user_id FROM comments WHERE id = ${parent_id}`;
+            }
+
+            // 3. Prepare notifications
+            const notificationsToAdd = [];
+
+            // Parent author gets 'comment_reply'
+            if (parentAuthor.length > 0) {
+                const pid = parentAuthor[0].user_id;
+                if (pid !== req.session.id) {
+                    notificationsToAdd.push({
+                        user_id: pid,
+                        type: 'comment_reply',
+                        item_id: item_id,
+                        reference_id: commentId
+                    });
+                }
+            }
+
+            // Subscribers get 'subscription' (unless they already got comment_reply)
+            const parentUserId = parentAuthor.length > 0 ? parentAuthor[0].user_id : -1;
+
+            subscribers.forEach(s => {
+                if (s.user_id !== req.session.id && s.user_id !== parentUserId) {
+                    notificationsToAdd.push({
+                        user_id: s.user_id,
+                        type: 'subscription',
+                        item_id: item_id,
+                        reference_id: commentId
+                    });
+                }
+            });
+
+            // 4. Batch insert
+            if (notificationsToAdd.length > 0) {
+                await db`INSERT INTO notifications ${db(notificationsToAdd)}`;
+            }
+
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ success: true, comment: newComment[0] })
+            });
+        } catch (err) {
+            console.error(err);
+            return res.reply({
+                code: 500,
+                body: JSON.stringify({ success: false, message: "Database error" })
+            });
+        }
+    });
+
+    // Subscribe toggle
+    router.post(/\/api\/subscribe\/(?<itemid>\d+)/, async (req, res) => {
+        if (!req.session) return res.reply({ code: 401, body: JSON.stringify({ success: false }) });
+        const itemId = req.params.itemid;
+
+        try {
+            const existing = await db`
+                 SELECT 1 FROM comment_subscriptions 
+                 WHERE user_id = ${req.session.id} AND item_id = ${itemId}
+             `;
+
+            let subscribed = false;
+            if (existing.length > 0) {
+                await db`DELETE FROM comment_subscriptions WHERE user_id = ${req.session.id} AND item_id = ${itemId}`;
+            } else {
+                await db`INSERT INTO comment_subscriptions (user_id, item_id) VALUES (${req.session.id}, ${itemId})`;
+                subscribed = true;
+            }
+
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ success: true, subscribed })
+            });
+        } catch (e) {
+            return res.reply({ code: 500, body: JSON.stringify({ success: false }) });
+        }
+    });
+
+    // Delete comment
+    router.post(/\/api\/comments\/(?<id>\d+)\/delete/, async (req, res) => {
+        if (!req.session) return res.reply({ code: 401, body: JSON.stringify({ success: false }) });
+        const commentId = req.params.id;
+
+        try {
+            const comment = await db`SELECT user_id FROM comments WHERE id = ${commentId}`;
+            if (!comment.length) return res.reply({ code: 404, body: JSON.stringify({ success: false, message: "Not found" }) });
+
+            if (!req.session.admin && comment[0].user_id !== req.session.id) {
+                return res.reply({ code: 403, body: JSON.stringify({ success: false, message: "Forbidden" }) });
+            }
+
+            await db`UPDATE comments SET is_deleted = true, content = '[deleted]' WHERE id = ${commentId}`;
+
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ success: true })
+            });
+        } catch (e) {
+            return res.reply({ code: 500, body: JSON.stringify({ success: false }) });
+        }
+    });
+
+    // Edit comment (admin only)
+    router.post(/\/api\/comments\/(?<id>\d+)\/edit/, async (req, res) => {
+        if (!req.session) return res.reply({ code: 401, body: JSON.stringify({ success: false }) });
+        if (!req.session.admin) return res.reply({ code: 403, body: JSON.stringify({ success: false, message: "Admin only" }) });
+
+        const commentId = req.params.id;
+        const body = req.post || {};
+        const content = body.content;
+
+        if (!content || !content.trim()) {
+            return res.reply({ body: JSON.stringify({ success: false, message: "Empty content" }) });
+        }
+
+        try {
+            const comment = await db`SELECT id FROM comments WHERE id = ${commentId}`;
+            if (!comment.length) return res.reply({ code: 404, body: JSON.stringify({ success: false, message: "Not found" }) });
+
+            await db`UPDATE comments SET content = ${content}, updated_at = NOW() WHERE id = ${commentId}`;
+
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ success: true })
+            });
+        } catch (e) {
+            console.error(e);
+            return res.reply({ code: 500, body: JSON.stringify({ success: false }) });
+        }
+    });
+    // Toggle pin comment (admin only)
+    router.post(/\/api\/comments\/(?<id>\d+)\/pin/, async (req, res) => {
+        if (!req.session) return res.reply({ code: 401, body: JSON.stringify({ success: false }) });
+        if (!req.session.admin) return res.reply({ code: 403, body: JSON.stringify({ success: false, message: "Admin only" }) });
+
+        const commentId = req.params.id;
+
+        try {
+            const comment = await db`SELECT id, COALESCE(is_pinned, false) as is_pinned FROM comments WHERE id = ${commentId}`;
+            if (!comment.length) return res.reply({ code: 404, body: JSON.stringify({ success: false, message: "Not found" }) });
+
+            const newPinned = !comment[0].is_pinned;
+            await db`UPDATE comments SET is_pinned = ${newPinned} WHERE id = ${commentId}`;
+
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ success: true, is_pinned: newPinned })
+            });
+        } catch (e) {
+            console.error(e);
+            return res.reply({ code: 500, body: JSON.stringify({ success: false }) });
+        }
+    });
+    // Toggle lock thread (admin only)
+    router.post(/\/api\/comments\/(?<itemid>\d+)\/lock/, async (req, res) => {
+        if (!req.session) return res.reply({ code: 401, body: JSON.stringify({ success: false }) });
+        if (!req.session.admin) return res.reply({ code: 403, body: JSON.stringify({ success: false, message: "Admin only" }) });
+
+        const itemId = req.params.itemid;
+
+        try {
+            const item = await db`SELECT id, COALESCE(is_comments_locked, false) as is_locked FROM items WHERE id = ${itemId}`;
+            if (!item.length) return res.reply({ code: 404, body: JSON.stringify({ success: false, message: "Not found" }) });
+
+            const newLocked = !item[0].is_locked;
+            await db`UPDATE items SET is_comments_locked = ${newLocked} WHERE id = ${itemId}`;
+
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ success: true, is_locked: newLocked })
+            });
+        } catch (e) {
+            console.error(e);
+            return res.reply({ code: 500, body: JSON.stringify({ success: false }) });
+        }
+    });
+
+    return router;
+};

src/inc/routes/emojis.mjs

@@ -0,0 +1,85 @@
+import db from "../sql.mjs";
+
+import lib from "../lib.mjs";
+
+export default (router, tpl) => {
+
+    // Admin View
+    router.get(/^\/admin\/emojis\/?$/, lib.auth, async (req, res) => {
+        res.reply({
+            body: tpl.render("admin/emojis", { session: req.session, tmp: null }, req)
+        });
+    });
+
+    // List all emojis (Public)
+    router.get('/api/v2/emojis', async (req, res) => {
+        try {
+            const emojis = await db`SELECT id, name, url FROM custom_emojis ORDER BY name ASC`;
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ success: true, emojis })
+            });
+        } catch (e) {
+            console.error(e);
+            return res.reply({ code: 500, body: JSON.stringify({ success: false, message: "Database error" }) });
+        }
+    });
+
+    // Add emoji (Admin only)
+    router.post('/api/v2/admin/emojis', async (req, res) => {
+        if (!req.session || !req.session.admin) {
+            return res.reply({ code: 403, body: JSON.stringify({ success: false, message: "Forbidden" }) });
+        }
+
+        const body = req.post || {};
+        const name = body.name ? body.name.trim().toLowerCase() : '';
+        const url = body.url ? body.url.trim() : '';
+
+        if (!name || !url) {
+            return res.reply({ body: JSON.stringify({ success: false, message: "Name and URL required" }) });
+        }
+
+        // Basic name validation (alphanumeric)
+        if (!/^[a-z0-9_]+$/.test(name)) {
+            return res.reply({ body: JSON.stringify({ success: false, message: "Invalid name. Use lowercase a-z, 0-9, _ only." }) });
+        }
+
+        try {
+            const newEmoji = await db`
+                INSERT INTO custom_emojis (name, url) VALUES (${name}, ${url})
+                RETURNING id, name, url
+            `;
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ success: true, emoji: newEmoji[0] })
+            });
+        } catch (e) {
+            if (e.code === '23505') { // Unique violation
+                return res.reply({ body: JSON.stringify({ success: false, message: "Emoji name already exists" }) });
+            }
+            console.error(e);
+            return res.reply({ code: 500, body: JSON.stringify({ success: false, message: "Database error" }) });
+        }
+    });
+
+    // Delete emoji (Admin only)
+    router.post(/\/api\/v2\/admin\/emojis\/(?<id>\d+)\/delete/, async (req, res) => {
+        if (!req.session || !req.session.admin) {
+            return res.reply({ code: 403, body: JSON.stringify({ success: false, message: "Forbidden" }) });
+        }
+        const id = req.params.id;
+
+        try {
+            await db`DELETE FROM custom_emojis WHERE id = ${id}`;
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ success: true })
+            });
+        } catch (e) {
+            console.error(e);
+            return res.reply({ code: 500, body: JSON.stringify({ success: false, message: "Database error" }) });
+        }
+    });
+
+    return router;
+};

src/inc/routes/index.mjs

@@ -4,7 +4,7 @@ import lib from "../lib.mjs";
 import f0cklib from "../routeinc/f0cklib.mjs";
 
 const auth = async (req, res, next) => {
-  if(!req.session)
+  if (!req.session)
     return res.redirect("/login");
   return next();
 };
@@ -21,7 +21,7 @@ export default (router, tpl) => {
       limit 1
     `;
 
-    if(!query.length) {
+    if (!query.length) {
       return res.reply({
         code: 404,
         body: tpl.render('error', {
@@ -44,11 +44,11 @@ export default (router, tpl) => {
         session: !!req.session,
         limit: 99999999
       });
-      if('items' in f0cks) {
+      if ('items' in f0cks) {
         count.f0cks = f0cks.items.length;
         f0cks.items = f0cks.items.slice(0, 50);
       }
-    } catch(err) {
+    } catch (err) {
       f0cks = false;
       count.f0cks = 0;
     }
@@ -60,11 +60,11 @@ export default (router, tpl) => {
         session: !!req.session,
         limit: 99999999
       });
-      if('items' in favs) {
+      if ('items' in favs) {
         count.favs = favs.items.length;
         favs.items = favs.items.slice(0, 50);
       }
-    } catch(err) {
+    } catch (err) {
       favs = false;
       count.favs = 0;
     }
@@ -93,7 +93,7 @@ export default (router, tpl) => {
       session: !!req.session,
       url: req.url.pathname
     });
-    if(!data.success) {
+    if (!data.success) {
       return res.reply({
         code: 404,
         body: tpl.render('error', {
@@ -103,6 +103,20 @@ export default (router, tpl) => {
       });
     }
 
+    if (mode === 'item') {
+      data.hidePagination = true;
+      if (req.session) {
+        data.comments = await f0cklib.getComments(req.params.itemid);
+        const sub = await f0cklib.getSubscriptionStatus(req.session.id, req.params.itemid);
+        data.isSubscribed = sub;
+        data.commentsJSON = Buffer.from(JSON.stringify(data.comments || [])).toString('base64');
+      } else {
+        data.comments = [];
+        data.isSubscribed = false;
+        data.commentsJSON = Buffer.from('[]').toString('base64');
+      }
+    }
+
     return res.reply({ body: tpl.render(mode, data, req) });
   });
 
@@ -123,10 +137,10 @@ export default (router, tpl) => {
     let referertmp = req.headers.referer;
     let referer = "";
 
-    if(referertmp?.match(/f0ck\.me/))
+    if (referertmp?.match(/f0ck\.me/))
       referer = referertmp.split("/").slice(3).join("/");
 
-    if(cfg.allowedModes[mode]) {
+    if (cfg.allowedModes[mode]) {
       const blah = {
         user_id: req.session.id,
         mode: mode,
@@ -134,8 +148,7 @@ export default (router, tpl) => {
       };
 
       await db`
-        insert into "user_options" ${
-          db(blah, 'user_id', 'mode', 'theme')
+        insert into "user_options" ${db(blah, 'user_id', 'mode', 'theme')
         }
         on conflict ("user_id") do update set
           mode = excluded.mode,

src/inc/routes/notifications.mjs

@@ -0,0 +1,62 @@
+import db from "../sql.mjs";
+
+export default (router, tpl) => {
+
+    // Get unread notifications
+    router.get('/api/notifications', async (req, res) => {
+        if (!req.session) return res.reply({ code: 401, body: JSON.stringify({ success: false }) });
+
+        try {
+            const notifications = await db`
+                SELECT n.id, n.type, n.item_id, n.reference_id, n.created_at, n.is_read,
+                       u.user as from_user, u.id as from_user_id
+                FROM notifications n
+                JOIN comments c ON n.reference_id = c.id
+                JOIN "user" u ON c.user_id = u.id
+                WHERE n.user_id = ${req.session.id} AND n.is_read = false
+                ORDER BY n.created_at DESC
+                LIMIT 20
+            `;
+
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ success: true, notifications })
+            });
+        } catch (err) {
+            console.error(err);
+            return res.reply({ code: 500, body: JSON.stringify({ success: false }) });
+        }
+    });
+
+    // Mark all as read
+    router.post('/api/notifications/read', async (req, res) => {
+        if (!req.session) return res.reply({ code: 401, body: JSON.stringify({ success: false }) });
+
+        try {
+            await db`UPDATE notifications SET is_read = true WHERE user_id = ${req.session.id}`;
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ success: true })
+            });
+        } catch (err) {
+            return res.reply({ code: 500, body: JSON.stringify({ success: false }) });
+        }
+    });
+
+    // Mark single as read (optional, for clicking)
+    router.post(/\/api\/notifications\/(?<id>\d+)\/read/, async (req, res) => {
+        if (!req.session) return res.reply({ code: 401, body: JSON.stringify({ success: false }) });
+        const id = req.params.id;
+        try {
+            await db`UPDATE notifications SET is_read = true WHERE id = ${id} AND user_id = ${req.session.id}`;
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ success: true })
+            });
+        } catch (err) {
+            return res.reply({ code: 500, body: JSON.stringify({ success: false }) });
+        }
+    });
+
+    return router;
+};

src/inc/routes/register.mjs

@@ -0,0 +1,79 @@
+import db from "../sql.mjs";
+import lib from "../lib.mjs";
+
+export default (router, tpl) => {
+    router.get(/^\/register(\/)?$/, async (req, res) => {
+        if (req.cookies.session) {
+            return res.writeHead(302, { "Location": "/" }).end();
+        }
+        res.reply({
+            body: tpl.render("register", { theme: req.cookies.theme ?? "f0ck" })
+        });
+    });
+
+    router.post(/^\/register(\/)?$/, async (req, res) => {
+        const { username, password, password_confirm, token } = req.post;
+
+        const renderError = (msg) => {
+            return res.reply({
+                body: tpl.render("register", { theme: req.cookies.theme ?? "f0ck", error: msg })
+            });
+        };
+
+        if (!username || !password || !token) return renderError("All fields are required");
+        if (password !== password_confirm) return renderError("Passwords do not match");
+        if (username.length < 3) return renderError("Username too short");
+
+        // Password complexity check
+        if (password.length < 20) return renderError("Password must be at least 20 characters long");
+
+        // Check token
+        const tokenRow = await db`
+        select * from invite_tokens where token = ${token} and is_used = false
+    `;
+
+        if (tokenRow.length === 0) {
+            return renderError("Invalid or used invite token");
+        }
+
+        // Check user existence
+        const existing = await db`select id from "user" where "login" = ${username.toLowerCase()}`;
+        if (existing.length > 0) return renderError("Username taken");
+
+        // Create User
+        const hash = await lib.hash(password);
+        const ts = ~~(Date.now() / 1e3);
+
+        // Note: Creating user. Assuming columns based on typical structure.
+        // Need to check 'user' table columns to be safe, but usually: login, password, user (display name), created_at, admin
+        // I'll assume 'user' is display name and 'login' is lowercase
+
+        const newUser = await db`
+        insert into "user" ("login", "password", "user", "created_at", "admin")
+        values (${username.toLowerCase()}, ${hash}, ${username}, to_timestamp(${ts}), false)
+        returning id
+    `;
+        const userId = newUser[0].id;
+
+        // Mark token used
+        await db`
+        update invite_tokens 
+        set is_used = true, used_by = ${userId}
+        where id = ${tokenRow[0].id}
+    `;
+
+        // Get a valid avatar ID (default to 1)
+        const avatarRow = await db`select id from items where id = 1`;
+        const avatarId = avatarRow.length > 0 ? 1 : (await db`select id from items limit 1`)[0].id;
+
+        await db`
+        insert into user_options (user_id, mode, theme, fullscreen, avatar)
+        values (${userId}, 3, 'amoled', 0, ${avatarId})
+    `;
+
+        // Redirect to home with login success message
+        return res.writeHead(302, { "Location": "/?login=success" }).end();
+    });
+
+    return router;
+};

src/inc/routes/subscriptions.mjs

@@ -0,0 +1,57 @@
+import db from "../sql.mjs";
+
+export default (router, tpl) => {
+
+    // Subscriptions Overview
+    router.get('/subscriptions', async (req, res) => {
+        if (!req.session) return res.redirect('/login');
+
+        try {
+            console.log('[DEBUG SUB] Fetching subscriptions for user', req.session.id);
+            const subs = await db`
+                SELECT 
+                    s.created_at as sub_date,
+                    i.id, i.dest, i.mime, i.username as uploader_name
+                FROM comment_subscriptions s
+                JOIN items i ON s.item_id = i.id
+                WHERE s.user_id = ${req.session.id}
+                ORDER BY s.created_at DESC
+            `;
+            console.log('[DEBUG SUB] Found', subs.length, 'subscriptions');
+
+            const items = subs.map(i => ({
+                id: i.id,
+                user: i.uploader_name || 'System',
+                sub_created: new Date(i.sub_date).toLocaleString(),
+                thumb: `/t/${i.id}.webp`
+            }));
+
+            return res.reply({
+                body: tpl.render('subscriptions', { items }, req)
+            });
+        } catch (e) {
+            console.error('[DEBUG SUB ERROR]', e);
+            return res.reply({ code: 500, body: 'Database Error' });
+        }
+    });
+
+    // Unsubscribe
+    router.post(/\/api\/subscriptions\/(?<itemid>\d+)\/delete/, async (req, res) => {
+        if (!req.session) return res.reply({ code: 401, body: JSON.stringify({ success: false }) });
+
+        const itemId = req.params.itemid;
+
+        try {
+            await db`DELETE FROM comment_subscriptions WHERE user_id = ${req.session.id} AND item_id = ${itemId}`;
+            return res.reply({
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ success: true })
+            });
+        } catch (e) {
+            console.error(e);
+            return res.reply({ code: 500, body: JSON.stringify({ success: false }) });
+        }
+    });
+
+    return router;
+};

src/inc/routes/tag_image.mjs

@@ -0,0 +1,56 @@
+import crypto from 'crypto';
+
+export default (router, tpl) => {
+  router.get(/^\/tag_image\/(?<tag>.+)$/, async (req, res) => {
+    const tag = decodeURIComponent(req.params.tag);
+
+    // Create a deterministic hash from the tag
+    const hash = crypto.createHash('md5').update(tag).digest('hex');
+
+    // Escape character for SVG
+    const escapeXml = (unsafe) => {
+      return unsafe.replace(/[<>&'"]/g, (c) => {
+        switch (c) {
+          case '<': return '&lt;';
+          case '>': return '&gt;';
+          case '&': return '&amp;';
+          case '\'': return '&apos;';
+          case '"': return '&quot;';
+        }
+      });
+    };
+
+    const displayTag = escapeXml(tag);
+
+    // Generate colors from hash
+    const c1 = '#' + hash.substring(0, 6);
+    const c2 = '#' + hash.substring(6, 12);
+    const c3 = '#' + hash.substring(12, 18);
+
+    // Generate some deterministic numbers for shapes
+    const n1 = parseInt(hash.substring(18, 20), 16);
+    const n2 = parseInt(hash.substring(20, 22), 16);
+
+    const svg = `
+      <svg width="300" height="150" viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:${c1};stop-opacity:1" />
+            <stop offset="100%" style="stop-color:${c2};stop-opacity:1" />
+          </linearGradient>
+        </defs>
+        <rect width="300" height="150" fill="url(#grad)" />
+        <circle cx="${n1}%" cy="${n2}%" r="${(n1 + n2) / 4}" fill="${c3}" fill-opacity="0.3" />
+        <circle cx="${100 - n1}%" cy="${100 - n2}%" r="${(n1 + n2) / 3}" fill="${c3}" fill-opacity="0.2" />
+        <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="24" fill="#fff" fill-opacity="0.9" font-weight="bold">${displayTag}</text>
+      </svg>
+    `.trim();
+
+    res.writeHead(200, {
+      'Content-Type': 'image/svg+xml',
+      'Cache-Control': 'public, max-age=86400'
+    });
+    res.end(svg);
+  });
+  return router;
+};

src/inc/routes/toptags.mjs

@@ -1,11 +1,53 @@
 import db from "../../inc/sql.mjs";
 import cfg from "../../inc/config.mjs";
 
+const TAGS_PER_PAGE = 500;
+
 export default (router, tpl) => {
+  // API endpoint for lazy loading tags
+  router.get(/^\/api\/tags$/, async (req, res) => {
+    const page = Math.max(1, +(req.url.qs?.page ?? 1));
+    const offset = (page - 1) * TAGS_PER_PAGE;
+    const isLoggedIn = !!req.session;
+
+    const nsfp = cfg.nsfp.map(n => `${n}`);
+
+    let tags;
+    if (isLoggedIn) {
+      tags = await db`
+        SELECT t.id, t.tag, COUNT(DISTINCT ta.item_id) AS total_items
+        FROM tags t
+        LEFT JOIN tags_assign ta ON t.id = ta.tag_id
+        GROUP BY t.id, t.tag
+        HAVING COUNT(DISTINCT ta.item_id) >= 1
+        ORDER BY total_items DESC
+        OFFSET ${offset}
+        LIMIT ${TAGS_PER_PAGE}
+      `;
+    } else {
+      tags = await db`
+        SELECT t.id, t.tag, COUNT(DISTINCT ta.item_id) AS total_items
+        FROM tags t
+        LEFT JOIN tags_assign ta ON t.id = ta.tag_id
+        WHERE t.id not in (${db.unsafe(nsfp)})
+        GROUP BY t.id, t.tag
+        HAVING COUNT(DISTINCT ta.item_id) >= 1
+        ORDER BY total_items DESC
+        OFFSET ${offset}
+        LIMIT ${TAGS_PER_PAGE}
+      `;
+    }
+
+    res.json({
+      tags,
+      page,
+      hasMore: tags.length === TAGS_PER_PAGE
+    });
+  });
+
+  // Main tags page - only load first page
   router.get(/^\/tags$/, async (req, res) => {
-
     const phrase = cfg.websrv.phrases[~~(Math.random() * cfg.websrv.phrases.length)];
-
     const nsfp = cfg.nsfp.map(n => `${n}`);
 
     const toptags = await db`
@@ -14,9 +56,9 @@ export default (router, tpl) => {
       LEFT JOIN tags_assign ta ON t.id = ta.tag_id
       WHERE t.id not in (${db.unsafe(nsfp)})
       GROUP BY t.id, t.tag
+      HAVING COUNT(DISTINCT ta.item_id) >= 1
       ORDER BY total_items DESC
-      LIMIT 500
-      ;
+      LIMIT ${TAGS_PER_PAGE}
     `;
 
     const toptags_regged = await db`
@@ -24,19 +66,26 @@ export default (router, tpl) => {
       FROM tags t
       LEFT JOIN tags_assign ta ON t.id = ta.tag_id
       GROUP BY t.id, t.tag
+      HAVING COUNT(DISTINCT ta.item_id) >= 1
       ORDER BY total_items DESC
-      LIMIT 500
-      ;
+      LIMIT ${TAGS_PER_PAGE}
     `;
-    
+
+    res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
+    res.setHeader('Pragma', 'no-cache');
+    res.setHeader('Expires', '0');
+    res.setHeader('Surrogate-Control', 'no-store');
+
     res.reply({
       body: tpl.render('tags', {
         toptags,
         toptags_regged,
         phrase,
-        tmp: null
+        tmp: null,
+        hidePagination: true
       }, req)
     });
   });
+
   return router;
 };

src/inc/trigger/delete.mjs

@@ -11,11 +11,11 @@ export default async bot => {
     f: async e => {
       let deleted = [];
 
-      for(let id of e.args) {
+      for (let id of e.args) {
         id = +id;
-        if(id <= 1)
+        if (id <= 1)
           continue;
-        
+
         const f0ck = await db`
           select dest, mime, username, userchannel, usernetwork
           from "items"
@@ -26,36 +26,36 @@ export default async bot => {
         `;
         const level = getLevel(e.user).level;
 
-        if(f0ck.length === 0) {
+        if (f0ck.length === 0) {
           await e.reply(`f0ck ${id}: f0ck not found`);
           continue;
         }
-        
-        if(
+
+        if (
           (f0ck[0].username !== (e.user.nick || e.user.username) ||
-          f0ck[0].userchannel !== e.channel ||
-          f0ck[0].usernetwork !== e.network) &&
+            f0ck[0].userchannel !== e.channel ||
+            f0ck[0].usernetwork !== e.network) &&
           level < 100
         ) {
           await e.reply(`f0ck ${id}: insufficient permissions`);
           continue;
         }
 
-        if(~~(new Date() / 1e3) >= (f0ck[0].stamp + 600) && level < 100) {
+        if (~~(new Date() / 1e3) >= (f0ck[0].stamp + 600) && level < 100) {
           await e.reply(`f0ck ${id}: too late lol`);
           continue;
         }
 
-        await db`update "items" set active = 'false' where id = ${id}`;
+        await db`update "items" set active = 'false', is_deleted = true where id = ${id}`;
 
-        await fs.copyFile(`./public/b/${f0ck[0].dest}`, `./deleted/b/${f0ck[0].dest}`).catch(_=>{});
-        await fs.copyFile(`./public/t/${id}.webp`, `./deleted/t/${id}.webp`).catch(_=>{});
-        await fs.unlink(`./public/b/${f0ck[0].dest}`).catch(_=>{});
-        await fs.unlink(`./public/t/${id}.webp`).catch(_=>{});
+        await fs.copyFile(`./public/b/${f0ck[0].dest}`, `./deleted/b/${f0ck[0].dest}`).catch(_ => { });
+        await fs.copyFile(`./public/t/${id}.webp`, `./deleted/t/${id}.webp`).catch(_ => { });
+        await fs.unlink(`./public/b/${f0ck[0].dest}`).catch(_ => { });
+        await fs.unlink(`./public/t/${id}.webp`).catch(_ => { });
 
-        if(f0ck[0].mime.startsWith('audio')) {
-          await fs.copyFile(`./public/ca/${id}.webp`, `./deleted/ca/${id}.webp`).catch(_=>{});
-          await fs.unlink(`./public/ca/${id}.webp`).catch(_=>{});
+        if (f0ck[0].mime.startsWith('audio')) {
+          await fs.copyFile(`./public/ca/${id}.webp`, `./deleted/ca/${id}.webp`).catch(_ => { });
+          await fs.unlink(`./public/ca/${id}.webp`).catch(_ => { });
         }
 
         deleted.push(id);
@@ -71,11 +71,11 @@ export default async bot => {
     f: async e => {
       let recovered = [];
 
-      for(let id of e.args) {
+      for (let id of e.args) {
         id = +id;
-        if(id <= 1)
+        if (id <= 1)
           continue;
-        
+
         const f0ck = await db`
           select dest, mime
           from "items"
@@ -85,19 +85,19 @@ export default async bot => {
           limit 1
         `;
 
-        if(f0ck.length === 0) {
+        if (f0ck.length === 0) {
           await e.reply(`f0ck ${id}: f0ck not found`);
           continue;
         }
 
-        await fs.copyFile(`./deleted/b/${f0ck[0].dest}`, `./public/b/${f0ck[0].dest}`).catch(_=>{});
-        await fs.copyFile(`./deleted/t/${id}.webp`, `./public/t/${id}.webp`).catch(_=>{});
-        await fs.unlink(`./deleted/b/${f0ck[0].dest}`).catch(_=>{});
-        await fs.unlink(`./deleted/t/${id}.webp`).catch(_=>{});
+        await fs.copyFile(`./deleted/b/${f0ck[0].dest}`, `./public/b/${f0ck[0].dest}`).catch(_ => { });
+        await fs.copyFile(`./deleted/t/${id}.webp`, `./public/t/${id}.webp`).catch(_ => { });
+        await fs.unlink(`./deleted/b/${f0ck[0].dest}`).catch(_ => { });
+        await fs.unlink(`./deleted/t/${id}.webp`).catch(_ => { });
 
-        if(f0ck[0].mime.startsWith('audio')) {
-          await fs.copyFile(`./deleted/ca/${id}.webp`, `./public/ca/${id}.webp`).catch(_=>{});
-          await fs.unlink(`./deleted/ca/${id}.webp`).catch(_=>{});
+        if (f0ck[0].mime.startsWith('audio')) {
+          await fs.copyFile(`./deleted/ca/${id}.webp`, `./public/ca/${id}.webp`).catch(_ => { });
+          await fs.unlink(`./deleted/ca/${id}.webp`).catch(_ => { });
         }
 
         await db`update "items" set active = 'true' where id = ${id}`;

src/index.mjs

@@ -4,8 +4,10 @@ import lib from "./inc/lib.mjs";
 import cuffeo from "cuffeo";
 import { promises as fs } from "fs";
 import flummpress from "flummpress";
+import { handleUpload } from "./upload_handler.mjs";
 
 process.on('unhandledRejection', err => {
+  if (err.code === 'ERR_HTTP_HEADERS_SENT') return;
   console.error(err);
   throw err;
 });
@@ -19,7 +21,7 @@ process.on('unhandledRejection', err => {
       this.level = args.level || 0;
       this.name = args.name;
       this.active = args.hasOwnProperty("active") ? args.active : true;
-      this.clients = args.clients || [ "irc", "tg", "slack" ];
+      this.clients = args.clients || ["irc", "tg", "slack"];
       this.f = args.f;
     },
     bot: await new cuffeo(cfg.clients)
@@ -27,7 +29,7 @@ process.on('unhandledRejection', err => {
 
   console.time("loading");
   const modules = {
-    events:  (await  fs.readdir("./src/inc/events")).filter(f => f.endsWith(".mjs")),
+    events: (await fs.readdir("./src/inc/events")).filter(f => f.endsWith(".mjs")),
     trigger: (await fs.readdir("./src/inc/trigger")).filter(f => f.endsWith(".mjs"))
   };
 
@@ -41,7 +43,7 @@ process.on('unhandledRejection', err => {
       console.timeLog("loading", `${dir}/${mod}`);
       return res;
     }))).flat(2)
-  })))).reduce((a, b) => ({...a, ...b}));
+  })))).reduce((a, b) => ({ ...a, ...b }));
 
   blah.events.forEach(event => {
     console.timeLog("loading", `registering event > ${event.name}`);
@@ -61,15 +63,16 @@ process.on('unhandledRejection', err => {
   const router = app.router;
   const tpl = app.tpl;
 
+
   app.use(async (req, res) => {
     // sessionhandler
     req.session = false;
-    if(req.url.pathname.match(/^\/(s|b|t|ca)\//))
+    if (req.url.pathname.match(/^\/(s|b|t|ca)\//))
       return;
-    req.theme = req.cookies.theme || 'amoled';
+    req.theme = 'amoled';
     req.fullscreen = req.cookies.fullscreen || 0;
 
-    if(req.cookies.session) {
+    if (req.cookies.session) {
       const user = await db`
         select "user".id, "user".login, "user".user, "user".admin, "user_sessions".id as sess_id, "user_options".*
         from "user_sessions"
@@ -78,8 +81,8 @@ process.on('unhandledRejection', err => {
         where "user_sessions".session = ${lib.md5(req.cookies.session)}
         limit 1
       `;
-      
-      if(user.length === 0) {
+
+      if (user.length === 0) {
         return res.writeHead(307, { // delete session
           "Cache-Control": "no-cache, public",
           "Set-Cookie": "session=; Path=/;  expires=Thu, 01 Jan 1970 00:00:00 GMT",
@@ -91,28 +94,31 @@ process.on('unhandledRejection', err => {
 
       // log last action
       await db`
-        update "user_sessions" set ${
-          db({
-            last_used: ~~(Date.now() / 1e3),
-            last_action: req.url.pathname,
-            browser: req.headers['user-agent']
-          }, 'last_used', 'last_action', 'browser')
+        update "user_sessions" set ${db({
+        last_used: ~~(Date.now() / 1e3),
+        last_action: req.url.pathname,
+        browser: req.headers['user-agent']
+      }, 'last_used', 'last_action', 'browser')
         }
         where id = ${+user[0].sess_id}
-      `;
+        `;
+
+      if (req.session.admin) {
+        const pending = await db`select count(*) as c from "items" where active = false and is_deleted = false`;
+        req.session.pending_count = pending[0].c;
+      }
 
       req.session.theme = req.cookies.theme;
       req.session.fullscreen = req.cookies.fullscreen;
-      
+
       // update userprofile
       await db`
-        insert into "user_options" ${
-          db({
-            user_id: +user[0].id,
-            mode: user[0].mode ?? 0,
-            theme: req.session.theme ?? 'amoled',
-            fullscreen: req.session.fullscreen || 0
-          }, 'user_id', 'mode', 'theme', 'fullscreen')
+        insert into "user_options" ${db({
+        user_id: +user[0].id,
+        mode: user[0].mode ?? 0,
+        theme: req.session.theme ?? 'amoled',
+        fullscreen: req.session.fullscreen || 0
+      }, 'user_id', 'mode', 'theme', 'fullscreen')
         }
         on conflict ("user_id") do update set
           mode = excluded.mode,
@@ -123,13 +129,23 @@ process.on('unhandledRejection', err => {
     }
   });
 
+  // Bypass middleware for direct upload handling
+  app.use(async (req, res) => {
+    if (req.method === 'POST' && req.url.pathname === '/api/v2/upload') {
+      await handleUpload(req, res);
+      // Modify URL to prevent router matching and double execution
+      req.url.pathname = '/handled_upload_bypass';
+    }
+  });
+
   tpl.views = "views";
   tpl.debug = true;
   tpl.cache = false;
   tpl.globals = {
     lul: cfg.websrv.lul,
     themes: cfg.websrv.themes,
-    modes: cfg.allowedModes
+    modes: cfg.allowedModes,
+    domain: cfg.websrv.domain || 'w0bm.com'
   };
   router.use(tpl);
 

src/upload_handler.mjs

@@ -0,0 +1,254 @@
+import { promises as fs } from "fs";
+import db from "./inc/sql.mjs";
+import lib from "./inc/lib.mjs";
+import cfg from "./inc/config.mjs";
+import queue from "./inc/queue.mjs";
+import path from "path";
+
+// Native multipart form data parser
+const parseMultipart = (buffer, boundary) => {
+    const parts = {};
+    const boundaryBuffer = Buffer.from(`--${boundary}`);
+    const segments = [];
+
+    let start = 0;
+    let idx;
+
+    while ((idx = buffer.indexOf(boundaryBuffer, start)) !== -1) {
+        if (start !== 0) {
+            segments.push(buffer.slice(start, idx - 2)); // -2 for \r\n before boundary
+        }
+        start = idx + boundaryBuffer.length + 2; // +2 for \r\n after boundary
+    }
+
+    for (const segment of segments) {
+        const headerEnd = segment.indexOf('\r\n\r\n');
+        if (headerEnd === -1) continue;
+
+        const headers = segment.slice(0, headerEnd).toString();
+        const body = segment.slice(headerEnd + 4);
+
+        const nameMatch = headers.match(/name="([^"]+)"/);
+        const filenameMatch = headers.match(/filename="([^"]+)"/);
+        const contentTypeMatch = headers.match(/Content-Type:\s*([^\r\n]+)/i);
+
+        if (nameMatch) {
+            const name = nameMatch[1];
+            if (filenameMatch) {
+                parts[name] = {
+                    filename: filenameMatch[1],
+                    contentType: contentTypeMatch ? contentTypeMatch[1] : 'application/octet-stream',
+                    data: body
+                };
+            } else {
+                parts[name] = body.toString().trim();
+            }
+        }
+    }
+
+    return parts;
+};
+
+// Collect request body as buffer
+const collectBody = (req) => {
+    return new Promise((resolve, reject) => {
+        const chunks = [];
+        req.on('data', chunk => chunks.push(chunk));
+        req.on('end', () => resolve(Buffer.concat(chunks)));
+        req.on('error', reject);
+
+        // Ensure stream flows
+        if (req.isPaused()) req.resume();
+    });
+};
+
+// Helper for JSON response
+const sendJson = (res, data, code = 200) => {
+    res.writeHead(code, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify(data));
+};
+
+export const handleUpload = async (req, res) => {
+    console.log('[UPLOAD HANDLER] Started');
+
+    // Manual Session Lookup (because flummpress middleware might not have finished)
+    // We assume req.cookies is populated by framework or we need to parse it?
+    // index.mjs accesses req.cookies directly, so we assume it works.
+
+    let user = [];
+    if (req.cookies && req.cookies.session) {
+        user = await db`
+            select "user".id, "user".login, "user".user, "user".admin, "user_sessions".id as sess_id, "user_options".*
+            from "user_sessions"
+            left join "user" on "user".id = "user_sessions".user_id
+            left join "user_options" on "user_options".user_id = "user_sessions".user_id
+            where "user_sessions".session = ${lib.md5(req.cookies.session)}
+            limit 1
+          `;
+    }
+
+    if (user.length === 0) {
+        console.log('[UPLOAD HANDLER] Unauthorized - No valid session found');
+        return sendJson(res, { success: false, msg: 'Unauthorized' }, 401);
+    }
+
+    // Mock req.session for consistency if needed by other logic, though we use 'user[0]' here
+    req.session = user[0];
+    console.log('[UPLOAD HANDLER] Authorized:', req.session.user);
+
+    try {
+        const contentType = req.headers['content-type'] || '';
+        const boundaryMatch = contentType.match(/boundary=(.+)$/);
+
+        if (!boundaryMatch) {
+            console.log('[UPLOAD HANDLER] No boundary');
+            return sendJson(res, { success: false, msg: 'Invalid content type' }, 400);
+        }
+
+        console.log('[UPLOAD HANDLER] Collecting body...');
+        const body = await collectBody(req);
+        console.log('[UPLOAD HANDLER] Body collected, size:', body.length);
+
+        const parts = parseMultipart(body, boundaryMatch[1]);
+
+        // Validate required fields
+        const file = parts.file;
+        const rating = parts.rating;
+        const tagsRaw = parts.tags;
+
+        if (!file || !file.data) {
+            return sendJson(res, { success: false, msg: 'No file provided' }, 400);
+        }
+
+        if (!rating || !['sfw', 'nsfw'].includes(rating)) {
+            return sendJson(res, { success: false, msg: 'Rating (sfw/nsfw) is required' }, 400);
+        }
+
+        const tags = tagsRaw ? tagsRaw.split(',').map(t => t.trim()).filter(t => t.length > 0) : [];
+        if (tags.length < 3) {
+            return sendJson(res, { success: false, msg: 'At least 3 tags are required' }, 400);
+        }
+
+        // Validate MIME type
+        const allowedMimes = ['video/mp4', 'video/webm'];
+        let mime = file.contentType;
+
+        if (!allowedMimes.includes(mime)) {
+            return sendJson(res, { success: false, msg: `Invalid file type. Only mp4 and webm allowed. Got: ${mime}` }, 400);
+        }
+
+        // Validate file size
+        const maxfilesize = cfg.main.maxfilesize;
+        const size = file.data.length;
+
+        if (size > maxfilesize) {
+            return sendJson(res, {
+                success: false,
+                msg: `File too large. Max: ${lib.formatSize(maxfilesize)}, Got: ${lib.formatSize(size)}`
+            }, 400);
+        }
+
+        // Generate UUID
+        const uuid = await queue.genuuid();
+        const ext = mime === 'video/mp4' ? 'mp4' : 'webm';
+        const filename = `${uuid}.${ext}`;
+        const tmpPath = `./tmp/${filename}`;
+        const destPath = `./public/b/${filename}`;
+
+        // Ensure directories exist
+        await fs.mkdir('./tmp', { recursive: true });
+        await fs.mkdir('./public/b', { recursive: true });
+
+        // Save temporarily
+        await fs.writeFile(tmpPath, file.data);
+
+        // Verify MIME
+        const actualMime = (await queue.exec(`file --mime-type -b ${tmpPath}`)).stdout.trim();
+        if (!allowedMimes.includes(actualMime)) {
+            await fs.unlink(tmpPath).catch(() => { });
+            return sendJson(res, { success: false, msg: `Invalid file type detected: ${actualMime}` }, 400);
+        }
+
+        // Constants
+        const checksum = (await queue.exec(`sha256sum ${tmpPath}`)).stdout.trim().split(" ")[0];
+
+        // Check repost
+        const repost = await queue.checkrepostsum(checksum);
+        if (repost) {
+            await fs.unlink(tmpPath).catch(() => { });
+            return sendJson(res, {
+                success: false,
+                msg: `This file already exists`,
+                repost: repost
+            }, 409);
+        }
+
+        // Move to public
+        await fs.copyFile(tmpPath, destPath);
+        await fs.unlink(tmpPath).catch(() => { });
+
+        // Insert
+        await db`
+          insert into items ${db({
+            src: '',
+            dest: filename,
+            mime: actualMime,
+            size: size,
+            checksum: checksum,
+            username: req.session.user,
+            userchannel: 'web',
+            usernetwork: 'web',
+            stamp: ~~(Date.now() / 1000),
+            active: false
+        }, 'src', 'dest', 'mime', 'size', 'checksum', 'username', 'userchannel', 'usernetwork', 'stamp', 'active')
+            }
+        `;
+
+        const itemid = await queue.getItemID(filename);
+
+        // Thumbnail
+        try {
+            await queue.genThumbnail(filename, actualMime, itemid, '');
+        } catch (err) {
+            await queue.exec(`magick ./mugge.png ./public/t/${itemid}.webp`);
+        }
+
+        // Tags
+        const ratingTagId = rating === 'sfw' ? 1 : 2;
+        await db`
+          insert into tags_assign ${db({ item_id: itemid, tag_id: ratingTagId, user_id: req.session.id })}
+        `;
+
+        for (const tagName of tags) {
+            let tagRow = await db`
+            select id from tags where normalized = slugify(${tagName}) limit 1
+          `;
+
+            let tagId;
+            if (tagRow.length === 0) {
+                await db`
+              insert into tags ${db({ tag: tagName }, 'tag')}
+            `;
+                tagRow = await db`
+              select id from tags where normalized = slugify(${tagName}) limit 1
+            `;
+            }
+            tagId = tagRow[0].id;
+
+            await db`
+            insert into tags_assign ${db({ item_id: itemid, tag_id: tagId, user_id: req.session.id })}
+            on conflict do nothing
+          `;
+        }
+
+        return sendJson(res, {
+            success: true,
+            msg: 'Upload successful! Your upload is pending admin approval.',
+            itemid: itemid
+        });
+
+    } catch (err) {
+        console.error('[UPLOAD HANDLER ERROR]', err);
+        return sendJson(res, { success: false, msg: 'Upload failed: ' + err.message }, 500);
+    }
+};

views/about.html

@@ -1,13 +1,26 @@
 @include(snippets/header)
 <div id="main">
-<div class="about">
-    <p>Welcome stranger!</p>
-    <p>bringing you some of the greatest webms from the past, the present and the future!</p>
-    <p>Enjoy your stay.</p>
-    <img style="width: 200px" src="/s/img/cockfag.png" alt="cockfag">
-    <p>If you have any questions you can reach out via Mail.</p>
-    <p>mail: admin@w0bm.com</p>
-    <p>Please also make yourself familiar with the <a href="/terms">Terms Of Service</a></p>
+    <div class="about">
+        <p>Welcome stranger!</p>
+        <p>bringing you some of the greatest webms from the past, the present and the future!</p>
+        <p>How to use it?</p>
+        <p>shortcuts</p>
+        <ul>
+            <li>k = search</li>
+            <li>r = random</li>
+            <li>p = toggle safe for rating</li>
+            <li>i = open tag input</li>
+            <li>l = turns on/off the background</li>
+            <li>c = hides/shows the comments</li>
+            @if(session.admin)
+            <li>x = del</li>
+            @endif
+            <li>scroll up/down inside video or inside the controls triggers next or prev</li>
+            <li>Arrow keys trigger next or prev</li>
+        </ul>
+        <p>If you have any questions you can reach out via Mail.</p>
+        <p>mail: admin@w0bm.com</p>
+        <p>Please also make yourself familiar with the <a style="font-weight: bold; text-decoration: underline;" href="/terms">Terms Of Service</a></p>
+    </div>
 </div>
-</div>
-@include(snippets/footer)
+@include(snippets/footer)

views/admin.html

@@ -6,17 +6,20 @@
     <span>Hier entsteht eine Internetpräsenz!</span><br>
     <hr>
     <p>f0ck stats: @if(typeof totals !== "undefined")
-    total: {{ totals.total }} | tagged: {{ totals.tagged }} | untagged: {{ totals.untagged }} | sfw: {{ totals.sfw }} | nsfw: {{ totals.nsfw }}
-    @endif</p>
+      total: {{ totals.total }} | tagged: {{ totals.tagged }} | untagged: {{ totals.untagged }} | sfw: {{ totals.sfw }}
+      | nsfw: {{ totals.nsfw }}
+      @endif</p>
     <hr>
     <div class="admintools">
       <p>Adminwerkzeuge</p>
       <ul>
-        <!-- <li><a href="/admin/log">Logs</a></li>
-        <li><a href="/admin/recover">Recover f0cks</a></li> -->
+        <!-- <li><a href="/admin/log">Logs</a></li> -->
+        <li><a href="/admin/approve">Approval Queue</a></li>
         <li><a href="/admin/sessions">Sessions</a></li>
+        <li><a href="/admin/tokens">Invite Tokens</a></li>
+        <li><a href="/admin/emojis">Emoji Manager</a></li>
       </ul>
     </div>
   </div>
 </div>
-@include(snippets/footer)
+@include(snippets/footer)

views/admin/approve.html

@@ -0,0 +1,191 @@
+@include(snippets/header)
+<div id="main">
+    <div class="container">
+        <h1>APPROVAL QUEUE</h1>
+        <p>Items here are pending approval.</p>
+
+        @if(pending.length > 0)
+        <h2>Pending Uploads</h2>
+        <table class="table" style="width: 100%; margin-bottom: 30px;">
+            <thead>
+                <tr>
+                    <td>Preview</td>
+                    <td>ID</td>
+                    <td>Uploader</td>
+                    <td>Type</td>
+                    <td>Tags</td>
+                    <td>Action</td>
+                </tr>
+            </thead>
+            <tbody>
+                @each(pending as post)
+                <tr>
+                    <td>
+                        <video controls loop muted preload="metadata" style="max-height: 200px; max-width: 300px;">
+                            <source src="/b/{{ post.dest }}" type="{{ post.mime }}">
+                        </video>
+                    </td>
+                    <td>{{ post.id }}</td>
+                    <td>{{ post.username }}</td>
+                    <td>{{ post.mime }}</td>
+                    <td>
+                        @each(post.tags as tag)
+                        <span class="badge badge-secondary" style="margin-right: 5px;">{{ tag }}</span>
+                        @endeach
+                    </td>
+                    <td>
+                        <a href="/admin/approve/?id={{ post.id }}" class="badge badge-success">Approve</a>
+                        <a href="/admin/deny/?id={{ post.id }}" class="badge badge-danger btn-deny-async">Deny /
+                            Delete</a>
+                    </td>
+                </tr>
+                @endeach
+            </tbody>
+        </table>
+        @endif
+
+        <h2 style="color: #ff6b6b; margin-top: 40px;">Reference / Soft Deleted</h2>
+        <p class="text-muted">These items are in the deleted folder but not purged from DB. Approving them will restore
+            them.</p>
+
+        @if(trash.length > 0)
+        <table class="table" style="width: 100%; opacity: 0.8;">
+            <thead>
+                <tr>
+                    <td>Preview</td>
+                    <td>ID</td>
+                    <td>Uploader</td>
+                    <td>Type</td>
+                    <td>Tags</td>
+                    <td>Action</td>
+                </tr>
+            </thead>
+            <tbody>
+                @each(trash as post)
+                <tr>
+                    <td>
+                        @if(post.thumbnail)
+                        <img src="data:image/webp;base64,{{ post.thumbnail }}" style="max-height: 150px; opacity: 0.6;">
+                        @else
+                        <span style="color:red;">[File Missing]</span>
+                        @endif
+                    </td>
+                    <td>{{ post.id }}</td>
+                    <td>{{ post.username }}</td>
+                    <td>{{ post.mime }}</td>
+                    <td>
+                        @each(post.tags as tag)
+                        <span class="badge badge-secondary" style="margin-right: 5px;">{{ tag }}</span>
+                        @endeach
+                    </td>
+                    <td>
+                        <a href="/admin/approve/?id={{ post.id }}" class="badge badge-warning">Restore</a>
+                        <a href="/admin/deny/?id={{ post.id }}" class="badge badge-danger btn-deny-async">Purge</a>
+                    </td>
+                </tr>
+                @endeach
+            </tbody>
+        </table>
+        @else
+        <p style="padding: 20px; border: 1px dashed #444; color: #888;">Trash is empty.</p>
+        @endif
+
+        @if(pending.length === 0 && trash.length === 0)
+        <div style="text-align: center; padding: 50px;">
+            <h3>No pending items.</h3>
+            <p>Go touch grass?</p>
+        </div>
+        @endif
+
+        <br>
+        @if(typeof pages !== 'undefined' && pages > 1)
+        <div class="pagination" style="display: flex; gap: 10px; align-items: center; justify-content: center;">
+            @if(page > 1)
+            <a href="/admin/approve?page={{ page - 1 }}" class="badge badge-secondary">&laquo; Prev</a>
+            @endif
+            <span>Page {{ page }} of {{ pages }}</span>
+            @if(page < pages) <a href="/admin/approve?page={{ page + 1 }}" class="badge badge-secondary">Next
+                &raquo;</a>
+                @endif
+        </div>
+        <br>
+        @endif
+
+
+
+        <!-- Custom Modal -->
+        <div id="custom-modal"
+            style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); justify-content: center; align-items: center; z-index: 1000;">
+            <div
+                style="background: #222; color: #fff; padding: 20px; border-radius: 8px; max-width: 400px; text-align: center; border: 1px solid #444;">
+                <h3 id="modal-title" style="margin-top: 0;">Confirm Action</h3>
+                <p id="modal-text">Are you sure?</p>
+                <div style="display: flex; justify-content: space-around; margin-top: 20px;">
+                    <button id="modal-cancel" class="badge badge-secondary"
+                        style="border: none; padding: 10px 20px; cursor: pointer;">Cancel</button>
+                    <button id="modal-confirm" class="badge badge-danger"
+                        style="border: none; padding: 10px 20px; cursor: pointer;">Confirm</button>
+                </div>
+            </div>
+        </div>
+
+        <script>
+            document.addEventListener('DOMContentLoaded', () => {
+                const modal = document.getElementById('custom-modal');
+                const modalTitle = document.getElementById('modal-title');
+                const modalText = document.getElementById('modal-text');
+                const btnConfirm = document.getElementById('modal-confirm');
+                const btnCancel = document.getElementById('modal-cancel');
+
+                let pendingAction = null;
+
+                const showModal = (title, text, action) => {
+                    modalTitle.innerText = title;
+                    modalText.innerText = text;
+                    pendingAction = action;
+                    modal.style.display = 'flex';
+
+                    btnConfirm.onclick = async () => {
+                        if (!pendingAction) return;
+                        btnConfirm.disabled = true;
+                        btnConfirm.innerText = 'Processing...';
+                        try {
+                            await pendingAction();
+                            closeModal();
+                        } catch (e) {
+                            alert('Error: ' + e.message);
+                        } finally {
+                            btnConfirm.disabled = false;
+                            btnConfirm.innerText = 'Confirm';
+                        }
+                    };
+                };
+
+                const closeModal = () => {
+                    modal.style.display = 'none';
+                    pendingAction = null;
+                };
+
+                if (btnCancel) btnCancel.onclick = closeModal;
+
+                // Single Deny
+                document.querySelectorAll('.btn-deny-async').forEach(btn => {
+                    btn.addEventListener('click', e => {
+                        e.preventDefault();
+                        const url = btn.getAttribute('href');
+                        const row = btn.closest('tr');
+
+                        showModal('Deny Item', 'Permanently delete this item?', async () => {
+                            const res = await fetch(url);
+                            if (res.ok) {
+                                row.style.opacity = '0';
+                                setTimeout(() => row.remove(), 300);
+                            } else {
+                                throw new Error('Request failed');
+                            }
+                        });
+                    });
+                });
+            });
+        </script>
+        @include(snippets/footer)

views/admin/emojis.html

@@ -0,0 +1,96 @@
+@include(snippets/header)
+
+<div class="container" style="padding-top: 20px;">
+    <h2>Custom Emojis</h2>
+
+    <div class="upload-form"
+        style="margin-bottom: 20px; text-align: left; background: var(--dropdown-bg); padding: 15px; border: 1px solid var(--nav-border-color);">
+        <h4>Add New Emoji</h4>
+        <input type="text" id="emoji-name" placeholder="Name (e.g. pingu)"
+            style="background: var(--bg); border: 1px solid var(--black); padding: 5px; color: var(--white);">
+        <input type="text" id="emoji-url" placeholder="URL (e.g. /s/img/pingu.gif)"
+            style="background: var(--bg); border: 1px solid var(--black); padding: 5px; color: var(--white); width: 300px;">
+        <button id="add-emoji" class="btn-upload"
+            style="width: auto; padding: 5px 15px; border: 1px solid var(--nav-border-color); background: var(--bg); color: var(--white); cursor: pointer;">Add</button>
+    </div>
+
+    <div class="upload-form" style="overflow-x: auto;">
+        <table style="width: 100%; border-collapse: collapse; color: var(--white);">
+            <thead>
+                <tr style="border-bottom: 1px solid var(--nav-border-color); text-align: left;">
+                    <th style="padding: 10px;">Preview</th>
+                    <th style="padding: 10px;">Name</th>
+                    <th style="padding: 10px;">URL</th>
+                    <th style="padding: 10px;">Actions</th>
+                </tr>
+            </thead>
+            <tbody id="emoji-list">
+                <!-- Populated by JS -->
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<script>
+    const loadEmojis = async () => {
+        try {
+            const res = await fetch('/api/v2/emojis');
+            const data = await res.json();
+            if (data.success) {
+                const tbody = document.getElementById('emoji-list');
+                tbody.innerHTML = data.emojis.map(e =>
+                    '<tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">' +
+                    '<td style="padding: 10px;"><img src="' + e.url + '" style="height: 30px; object-fit: contain;"></td>' +
+                    '<td style="padding: 10px; font-family: monospace; font-size: 1.1em; color: var(--accent);">:' + e.name + ':</td>' +
+                    '<td style="padding: 10px; opacity: 0.7;">' + e.url + '</td>' +
+                    '<td style="padding: 10px;">' +
+                    '<button onclick="deleteEmoji(' + e.id + ')" class="btn-remove" style="padding: 5px 10px; font-size: 0.8em; background: #c00; color: white; border: none; cursor: pointer;">Delete</button>' +
+                    '</td>' +
+                    '</tr>'
+                ).join('');
+            }
+        } catch (err) { console.error(err); }
+    };
+
+    const addEmoji = async () => {
+        const name = document.getElementById('emoji-name').value;
+        const url = document.getElementById('emoji-url').value;
+        if (!name || !url) return alert('Fill both fields');
+
+        try {
+            const res = await fetch('/api/v2/admin/emojis', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, // Body parsing middleware uses this or JSON? Typically form-encoded in this stack
+                body: new URLSearchParams({ name, url })
+            });
+            const data = await res.json();
+            if (data.success) {
+                document.getElementById('emoji-name').value = '';
+                document.getElementById('emoji-url').value = '';
+                loadEmojis();
+            } else {
+                alert('Failed: ' + data.message);
+            }
+        } catch (e) {
+            alert('Error: ' + e.message);
+        }
+    };
+
+    const deleteEmoji = async (id) => {
+        if (!confirm('Delete this emoji?')) return;
+        try {
+            const res = await fetch('/api/v2/admin/emojis/' + id + '/delete', { method: 'POST' });
+            const data = await res.json();
+            if (data.success) {
+                loadEmojis();
+            } else {
+                alert('Failed');
+            }
+        } catch (e) { alert(e); }
+    };
+
+    document.getElementById('add-emoji').addEventListener('click', addEmoji);
+    loadEmojis();
+</script>
+
+@include(snippets/footer)

views/admin/tokens.html

@@ -0,0 +1,89 @@
+@include(snippets/header)
+
+<div class="container" style="padding-top: 20px;">
+    <h2>Invite Tokens</h2>
+
+    <div style="margin-bottom: 20px; text-align: right;">
+        <button id="generate-token" class="btn-upload" style="width: auto; padding: 10px 20px;">Generate New
+            Token</button>
+    </div>
+
+    <div class="upload-form" style="overflow-x: auto;">
+        <table style="width: 100%; border-collapse: collapse; color: var(--white);">
+            <thead>
+                <tr style="border-bottom: 1px solid var(--nav-border-color); text-align: left;">
+                    <th style="padding: 10px;">Token</th>
+                    <th style="padding: 10px;">Status</th>
+                    <th style="padding: 10px;">Used By</th>
+                    <th style="padding: 10px;">Created</th>
+                    <th style="padding: 10px;">Actions</th>
+                </tr>
+            </thead>
+            <tbody id="token-list">
+                <!-- Populated by JS -->
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<script>
+    const loadTokens = async () => {
+        try {
+            console.log('Loading tokens...');
+            const res = await fetch('/api/v2/admin/tokens');
+            const data = await res.json();
+            console.log('Tokens data:', data);
+            if (data.success) {
+                const tbody = document.getElementById('token-list');
+                tbody.innerHTML = data.tokens.map(t =>
+                    '<tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">' +
+                    '<td style="padding: 10px; font-family: monospace; font-size: 1.1em; color: var(--accent);">' + t.token + '</td>' +
+                    '<td style="padding: 10px;">' +
+                    (t.is_used ? '<span style="color: #ff6b6b">Used</span>' : '<span style="color: #51cf66">Available</span>') +
+                    '</td>' +
+                    '<td style="padding: 10px;">' + (t.used_by_name || '-') + '</td>' +
+                    '<td style="padding: 10px;">' + new Date(parseInt(t.created_at) * 1000).toLocaleString() + '</td>' +
+                    '<td style="padding: 10px;">' +
+                    (!t.is_used ? '<button onclick="deleteToken(' + t.id + ')" class="btn-remove" style="padding: 5px 10px; font-size: 0.8em;">Delete</button>' : '') +
+                    '</td>' +
+                    '</tr>'
+                ).join('');
+            }
+        } catch (e) { console.error(e); }
+    };
+
+    const generateToken = async () => {
+        console.log('Generating...');
+        try {
+            const res = await fetch('/api/v2/admin/tokens/create', { method: 'POST' });
+            const data = await res.json();
+            console.log('Gen result:', data);
+            if (data.success) {
+                loadTokens();
+            } else {
+                alert('Failed: ' + data.msg);
+            }
+        } catch (e) {
+            console.error(e);
+            alert('Error: ' + e.message);
+        }
+    };
+
+    const deleteToken = async (id) => {
+        if (!confirm('Delete this token?')) return;
+        const res = await fetch('/api/v2/admin/tokens/delete', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        });
+        const data = await res.json();
+        if (data.success) {
+            loadTokens();
+        }
+    };
+
+    document.getElementById('generate-token').addEventListener('click', generateToken);
+    loadTokens();
+</script>
+
+@include(snippets/footer)

views/index.html

@@ -1,18 +1,18 @@
-@include(snippets/header)
-<div class="pagewrapper">
-  <div id="main">
-    <div class="index-container">
-      @if(tmp.user)<h2>user: <a href="/user/{{ tmp.user.toLowerCase() }}">{!! tmp.user.toLowerCase() !!}</a>@if(tmp.mime) ({{ tmp.mime }}s)@else (all)@endif</h2>@endif
-      @if(tmp.tag)<h2>tag: @if(session)<a href="/search?tag={!! tmp.tag.toLowerCase() !!}" target="_blank">{!! tmp.tag.toLowerCase() !!}</a>@else{!! tmp.tag.toLowerCase() !!}@endif@if(tmp.mime) ({{ tmp.mime }}s)@else (all)@endif</h2>@endif
-      <div class="posts">
-        @each(items as item)
-        <a href="{{ link.main }}{{ item.id }}" data-mime="{{ item.mime }}" data-mode="{{ item.tag_id ? ['','sfw','nsfw'][item.tag_id] : 'null' }}" style="background-image: url('/t/{{ item.id }}.webp')"><p></p></a>
-        @endeach
-      </div>
-      <div id="footbar">
-        &#9660;
-      </div>
-    </div>
-  </div>
-</div>
-@include(snippets/footer)
+@include(snippets/header)
+<div class="pagewrapper">
+  <div id="main">
+    <div class="index-container">
+      @if(tmp.user)<h2>user: <a href="/user/{{ tmp.user.toLowerCase() }}">{{ tmp.user.toLowerCase() }}</a>@if(tmp.mime) ({{ tmp.mime }}s)@else (all)@endif</h2>@endif
+      @if(tmp.tag)<h2>tag: @if(session)<a href="/search?tag={{ tmp.tag.toLowerCase() }}" target="_blank">{{ tmp.tag.toLowerCase() }}</a>@else{{ tmp.tag.toLowerCase() }}@endif@if(tmp.mime) ({{ tmp.mime }}s)@else (all)@endif</h2>@endif
+      <div class="posts">
+        @each(items as item)
+        <a href="{{ link.main }}{{ item.id }}" data-mime="{{ item.mime }}" data-mode="{{ item.tag_id ? ['','sfw','nsfw'][item.tag_id] : 'null' }}" style="background-image: url('/t/{{ item.id }}.webp')"><p></p></a>
+        @endeach
+      </div>
+      <div id="footbar">
+        &#9660;
+      </div>
+    </div>
+  </div>
+</div>
+@include(snippets/footer)

views/item-partial.html

@@ -33,7 +33,7 @@
         @if(item.mime.startsWith("video"))
         <div class="embed-responsive embed-responsive-16by9">
             <video id="my-video" class="embed-responsive-item" width="640" height="360" src="{{ item.dest }}"
-                preload="auto" autoplay controls loop playsinline></video>
+                preload="metadata" controls loop playsinline></video>
         </div>
         @elseif(item.mime.startsWith("audio"))
         <div class="embed-responsive embed-responsive-16by9"
@@ -95,15 +95,17 @@
         <span class="badge badge-dark">
             <a href="/{{ item.id }}" class="id-link">{{ item.id }}</a>
             @if(session)
-            (<a id="a_username" href="/user/{{ user.name.toLowerCase() }}/f0cks@if(tmp.mime)/{{ tmp.mime }}@endif">{{ user.name }}</a>)
+            (<a id="a_username"
+                href="/user/{{ user.name.toLowerCase() }}/f0cks@if(tmp.mime)/{{ tmp.mime }}@endif">{{user.name }}</a>)
             @endif
         </span>
-        <span class="badge badge-dark"><time class="timeago" tooltip="{{ item.timestamp.timefull }}">{{ item.timestamp.timeago }}</time></span>
+        <span class="badge badge-dark"><time class="timeago"
+                tooltip="{{ item.timestamp.timefull }}">{{item.timestamp.timeago }}</time></span>
         <span class="badge badge-dark" id="tags">
             @if(typeof item.tags !== "undefined")
             @each(item.tags as tag)
             <span @if(session)tooltip="{{ tag.user }}" @endif class="badge {{ tag.badge }} mr-2">
-                <a href="/tag/{{ tag.normalized }}">{!! tag.tag !!}</a>@if(session.admin)&nbsp;<a class="removetag"
+                <a href="/tag/{{ tag.normalized }}">{{ tag.tag }}</a>@if(session.admin)&nbsp;<a class="removetag"
                     href="#">&#215;</a>@endif
             </span>
             @endeach
@@ -121,6 +123,22 @@
                     style="height: 32px; width: 32px" /></a>
             @endeach
             @endif
-        </span>
     </div>
-</div>
+</div>
+<div id="comments-container" data-item-id="{{ item.id }}" @if(session)data-user="{{ session.user }}"
+    @if(session.admin)data-is-admin="true" @endif @else style="display:none" @endif
+    @if(item.is_comments_locked)data-is-locked="true" @endif>
+    <div class="comments-header">
+        <span>Comments @if(item.is_comments_locked)🔒@endif</span>
+        <div class="comments-controls">
+            
+        </div>
+    </div>
+    @if(session && session.user && !item.is_comments_locked)
+    <div class="comment-input main-input">
+        <textarea disabled></textarea>
+    </div>
+    @endif
+</div>
+<script id="initial-comments" type="application/json">{{ commentsJSON }}</script>
+<script id="initial-subscription" type="application/json">{{ isSubscribed }}</script>

views/item.html

@@ -1,5 +1,5 @@
 @include(snippets/header)
-<canvas class="hidden-xs" id="bg"></canvas>
+
 <div class="wrapper">
   <div id="main">
 

views/register.html

@@ -0,0 +1,35 @@
+<!doctype f0ck>
+<html theme="amoled">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>register</title>
+    <link href="/s/css/f0ck.css" rel="stylesheet" />
+</head>
+
+<body type="login">
+    <form class="login-form" method="post" action="/register">
+        <h2 style="text-align: center; margin-bottom: 20px;">Register</h2>
+        @if(typeof error !== 'undefined')
+        <div style="color: #ff6b6b; margin-bottom: 10px; text-align: center;">{{ error }}</div>
+        @endif
+        <input type="text" name="username" placeholder="username" autocomplete="off" required />
+        <input type="password" name="password" placeholder="password" autocomplete="off" required minlength="20"
+            title="Must be at least 20 characters long." />
+        <input type="password" name="password_confirm" placeholder="confirm password" autocomplete="off" /><br>
+        <input type="text" name="token" placeholder="invite token" autocomplete="off" /><br>
+        <p style="text-align: left; font-size: 0.9em; margin: 10px 0; color: #fff;">
+            <input type="checkbox" id="tos-page" name="tos" required />
+            <label for="tos-page">I have read and accept the <a href="/terms" target="_blank"
+                    style="color: var(--accent); text-decoration: underline;">Terms of Service</a> and I am at least 18
+                years old</label>
+        </p>
+        <input type="submit" value="Register" />
+        <div style="margin-top: 15px; text-align: center;">
+            <a href="/login" style="color: var(--accent); text-decoration: none;">Back to Login</a>
+        </div>
+    </form>
+</body>
+
+</html>

views/search.html

@@ -5,7 +5,7 @@
       <span>search</span>
     </div>
     <form action="/search" class="admin-search">
-      <input type="text" name="tag" value="{!! searchstring || '' !!}" /><button type="submit">🔍</button>
+      <input type="text" name="tag" value="{{ searchstring || '' }}" /><button type="submit">🔍</button>
     </form>
     <div class="results">
       @if(result)
@@ -22,20 +22,23 @@
           </tr>
         </thead>
         <tbody>
-      @each(result as line)
+          @each(result as line)
           <tr>
-            <td style="width: 128px;"><a href="/tag/{!! line.tag !!}/{{ line.id }}" target="_blank"><img src="/t/{{ line.id }}.webp" /></a></td>
-            <td><span class="mview_desc">ID:</span><a href="/tag/{!! line.tag !!}/{{ line.id }}" target="_blank">{{ line.id }}</a></td>
-            <td><span class="mview_desc">Tag:</span><a href="/tag/{!! line.tag !!}">{!! line.tag !!}</a></td>
+            <td style="width: 128px;"><a href="/tag/{{ line.tag }}/{{ line.id }}" target="_blank"><img
+                  src="/t/{{ line.id }}.webp" /></a></td>
+            <td><span class="mview_desc">ID:</span><a href="/tag/{{ line.tag }}/{{ line.id }}" target="_blank">{{
+                line.id }}</a></td>
+            <td><span class="mview_desc">Tag:</span><a href="/tag/{{ line.tag }}">{{ line.tag }}</a></td>
             <td><span class="mview_desc">Mime:</span>{{ line.mime }}</td>
-            <td><span class="mview_desc">User:</span><a href="/user/{!! line.username !!}/f0cks/{{ line.id }}">{!! line.username !!}</a></td>
+            <td><span class="mview_desc">User:</span><a href="/user/{{ line.username }}/f0cks/{{ line.id }}">{{
+                line.username }}</a></td>
             <td><span class="mview_desc">Score:</span>{{ line.score?.toFixed(2) }}</td>
           </tr>
-      @endeach
+          @endeach
         </tbody>
       </table>
       @endif
     </div>
   </div>
 </div>
-@include(snippets/footer)
+@include(snippets/footer)

views/settings.html

@@ -2,19 +2,15 @@
 <div class="settings">
   <h1>Settings</h1>
   <h2>Site settings</h2>
-    <div class="themes">
-      <h3>Themes</h3>
-        @each(themes as t)
-          <a href="/theme/{{ t }}">{{ t }}</a>
-        @endeach
-    </div>
-    <div class="modes">
-      <h3>Modes</h3>
-      <span>Current: {{ modes[session.mode] ?? 'sfw' }}</span>
-      @for(let i = 0; i < modes.length; i++)
-        <a class="dropdown-item" href="/mode/{{ i }}">{{ modes[i] }}</a>
-      @endfor
-    </div>
+
+  <div class="modes">
+    <h3>Modes</h3>
+    <span>Current: {{ modes[session.mode] ?? 'sfw' }}</span>
+    <a class="dropdown-item" href="/mode/0">sfw</a>
+    <a class="dropdown-item" href="/mode/1">nsfw</a>
+    <a class="dropdown-item" href="/mode/2">untagged</a>
+    <a class="dropdown-item" href="/mode/3">all</a>
+  </div>
   <h2>Account</h2>
   <table class="table">
     <tbody>
@@ -28,10 +24,11 @@
       </tr>
       <tr>
         <td>username</td>
-        <td>{!! session.user !!}</td>
+        <td>{{ session.user }}</td>
       </tr>
       <tr>
-        <td>@if(session.avatar)<a href="/{{ session.avatar }}"><img id="img_avatar" src="/t/{{ session.avatar }}.webp"></a>@endif</td>
+        <td>@if(session.avatar)<a href="/{{ session.avatar }}"><img id="img_avatar"
+              src="/t/{{ session.avatar }}.webp"></a>@endif</td>
         <td><input type="text" class="input" name="i_avatar" value="{{ session.avatar }}"></td>
       </tr>
       <tr>
@@ -39,7 +36,7 @@
         <td><input type="text" class="input" name="i_mail" placeholder="hashed" disabled></td>
       </tr>
       <tr>
-        <td colspan="2"><input type="submit" id="s_avatar" value="save"></td>
+        <td><input type="submit" id="s_avatar" value="save"></td>
       </tr>
     </tbody>
   </table>
@@ -55,7 +52,7 @@
     </thead>
     <tbody>
       @each(sessions as sess)
-      <tr@if(sess.id === session.sess_id) style="background-color: rgb(0, 89, 0)"@endif>
+      <tr@if(sess.id===session.sess_id) style="background-color: rgb(0, 89, 0)" @endif>
         <td>{{ sess.kmsi ? '&#9875;' : '' }}</td>
         <td tooltip="{{ sess.browser }}" flow="right">
           <p>{{ sess.id }}</p>
@@ -66,9 +63,9 @@
           <p>created_at: {{ new Date(sess.created_at * 1e3).toLocaleString("de-DE") }}</p>
         </td>
         <td><a href="{{ sess.last_action }}" target="_blank">{{ sess.last_action }}</a></td>
-      </tr>
-      @endeach
+        </tr>
+        @endeach
     </tbody>
   </table>
 </div>
-@include(snippets/footer)
+@include(snippets/footer)

views/snippets/footer.html

@@ -1,10 +1,33 @@
-  <script async src="/s/js/theme.js?v=@mtime(/public/s/js/theme.js)"></script>
-  <script src="/s/js/v0ck.js?v=@mtime(/public/s/js/v0ck.js)"></script>
-  <script src="/s/js/f0ck.js?v=@mtime(/public/s/js/f0ck.js)"></script>
-  @if(session && session.admin)
-    <script src="/s/js/admin.js?v=@mtime(/public/s/js/admin.js)"></script>
-  @elseif(session && !session.admin)
-    <script src="/s/js/user.js?v=@mtime(/public/s/js/user.js)"></script>
-  @endif
+<div id="delete-tag-modal" class="modal-overlay" style="display:none;">
+  <div class="modal-content">
+    <h3>Delete Tag?</h3>
+    <p>Are you sure you want to delete the tag <strong id="delete-tag-name"></strong>?</p>
+    <div class="modal-actions">
+      <button id="delete-tag-confirm" class="btn-danger">Delete</button>
+      <button id="delete-tag-cancel" class="btn-secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+<div id="delete-item-modal" class="modal-overlay" style="display:none;">
+  <div class="modal-content">
+    <h3>Delete Item?</h3>
+    <p>Are you sure you want to delete item <strong id="delete-item-id"></strong> by <strong
+        id="delete-item-poster"></strong>?</p>
+    <div class="modal-actions">
+      <button id="delete-item-confirm" class="btn-danger">Delete</button>
+      <button id="delete-item-cancel" class="btn-secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+<script async src="/s/js/theme.js?v=@mtime(/public/s/js/theme.js)"></script>
+<script src="/s/js/v0ck.js?v=@mtime(/public/s/js/v0ck.js)"></script>
+<script src="/s/js/f0ck.js?v=@mtime(/public/s/js/f0ck.js)"></script>
+<script src="/s/js/comments.js?v=@mtime(/public/s/js/comments.js)"></script>
+@if(session && session.admin)
+<script src="/s/js/admin.js?v=@mtime(/public/s/js/admin.js)"></script>
+@elseif(session && !session.admin)
+<script src="/s/js/user.js?v=@mtime(/public/s/js/user.js)"></script>
+@endif
 </body>
-</html>
+
+</html>

views/snippets/header.html

@@ -1,14 +1,30 @@
 <!doctype html>
-<html lang="en" theme="@if(typeof theme !== "undefined"){{ theme }}@endif" res="@if(typeof fullscreen !== "undefined"){{ fullscreen == 1 ? 'fullscreen' : '' }}@endif">
+<html lang="en" theme="@if(typeof theme !== 'undefined'){{ theme }}@endif"
+  res="@if(typeof fullscreen !== 'undefined'){{ fullscreen == 1 ? 'fullscreen' : '' }}@endif">
+
 <head>
-  @if(typeof item !== "undefined")<title>f0bm - {{ item.id }}</title>@else<title>f0bm</title>@endif
+  @if(typeof item !== 'undefined')<title>f0bm - {{ item.id }}</title>@else<title>f0bm</title>@endif
   <link rel="icon" type="image/gif" href="/s/img/favicon.png" />
   <link rel="stylesheet" href="/s/css/f0ck.css?v=@mtime(/public/s/css/f0ck.css)">
-  <link rel="stylesheet" href="/s/css/w0bm.css?v=@mtime(/public/s/css/w0bm.css)"> 
+  <link rel="stylesheet" href="/s/css/w0bm.css?v=@mtime(/public/s/css/w0bm.css)">
+  <script src="/s/js/marked.min.js"></script>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  @if(typeof item !== "undefined")<link rel="canonical" href="https://w0bm.com/{{ item.id }}" />@endif
+  @if(typeof item !== 'undefined')
+  <link rel="canonical" href="https://{{ domain }}/{{ item.id }}" />
+  <meta property="og:site_name" content="f0bm" />
+  <meta property="og:title" content="f0bm - {{ item.id }}" />
+  <meta property="og:url" content="https://{{ domain }}/{{ item.id }}" />
+  <meta property="og:image" content="https://{{ domain }}{{ item.thumbnail }}" />
+  <meta property="og:type" content="website" />
+  <meta property="twitter:card" content="summary_large_image" />
+  <meta property="twitter:title" content="f0bm - {{ item.id }}" />
+  <meta property="twitter:image" content="https://{{ domain }}{{ item.thumbnail }}" />
+  <meta property="twitter:url" content="https://{{ domain }}/{{ item.id }}" />
+  @endif
 </head>
+
 <body>
   <!-- hier splitting betreiben  -->
-  @include(snippets/navbar)
+  <canvas class="hidden-xs" id="bg"></canvas>
+  @include(snippets/navbar)

views/snippets/items-grid.html

@@ -0,0 +1,7 @@
+@each(items as item)
+<a href="{{ link.main }}{{ item.id }}" data-mime="{{ item.mime }}"
+    data-mode="{{ item.tag_id ? ['','sfw','nsfw'][item.tag_id] : 'null' }}"
+    style="background-image: url('/t/{{ item.id }}.webp')">
+    <p></p>
+</a>
+@endeach

views/snippets/navbar.html

@@ -2,18 +2,70 @@
 <!-- logged in -->
 <nav class="navbar navbar-expand-lg">
   <a class="navbar-brand" href="/"><span class="f0ck" width="" height="">w0bm.com</span></a>
-
-  <div class="navigation-links-guest">
-    <ol>
+  <div class="nav-left-group">
+    <div class="nav-user-dropdown">
+      <button class="nav-user-btn" id="nav-user-toggle">
+        {{ session.user }} ▾
+      </button>
+      <div class="nav-user-menu" id="nav-user-menu">
+        <a href="/user/{{ session.user.toLowerCase() }}">profile</a>
+        <a href="/user/{{ session.user.toLowerCase() }}/favs">favs</a>
+        <a href="/upload">upload</a>
+        @if(session.admin)
+        <a href="/admin">Admin
+          @if(typeof session.pending_count !== 'undefined' && session.pending_count > 0)
+          <span class="notification-dot" title="{{ session.pending_count }} Pending"
+            onclick="event.preventDefault(); window.location.href='/admin/approve';"></span>
+          @endif
+        </a>
+        @endif
+        <a href="/settings">settings</a>
+        <a href="/about">about</a>
+        <div class="nav-user-divider"></div>
+        <a href="/logout">logout</a>
+      </div>
+    </div>
+    <div class="nav-links">
       <a href="/tags">tags</a>
-      <a href="/about">about</a>
       @if(!/^\/\d$/.test(url.pathname))
-      <a href="/random">rand</a>
+      <a href="/random" id="nav-random" title="Random"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
+          fill="currentColor" viewBox="0 0 16 16">
+          <path fill-rule="evenodd"
+            d="M0 3.5A.5.5 0 0 1 .5 3H1c2.202 0 3.827 1.24 4.874 2.418.49.552.865 1.102 1.126 1.532.26-.43.636-.98 1.126-1.532C9.173 4.24 10.798 3 13 3v1c-1.798 0-3.173 1.01-4.126 2.082A9.624 9.624 0 0 0 7.556 8a9.624 9.624 0 0 0 1.317 1.918C9.828 10.99 11.204 12 13 12v1c-2.202 0-3.827-1.24-4.874-2.418A10.595 10.595 0 0 1 7 9.05c-.26.43-.636.98-1.126 1.532C4.827 11.76 3.202 13 1 13H.5a.5.5 0 0 1 0-1H1c1.798 0 3.173-1.01 4.126-2.082A9.624 9.624 0 0 0 6.444 8a9.624 9.624 0 0 0-1.317-1.918C4.172 5.01 2.796 4 1 4H.5a.5.5 0 0 1-.5-.5z" />
+          <path
+            d="M13 5.466V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192zm0 9v-3.932a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192z" />
+        </svg></a>
       @endif
-    </ol>
+      <div id="nav-notifications" class="nav-item-rel">
+        <a href="#" id="nav-notif-btn" title="Notifications">
+          <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 16 16">
+            <path
+              d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z" />
+          </svg>
+          <span class="notif-count" style="display:none">0</span>
+        </a>
+        <div id="notif-dropdown" class="notif-dropdown">
+          <div class="notif-header">
+            <span>Notifications</span>
+            <button id="mark-all-read">Mark all read</button>
+          </div>
+          <div class="notif-list">
+            <div class="notif-empty">No new notifications</div>
+          </div>
+          <div class="submanage">
+            <a href="/subscriptions">manage subscriptions</a>
+          </div>
+        </div>
+      </div>
+      <a href="#" id="nav-search-btn" title="Search"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
+          fill="currentColor" viewBox="0 0 16 16">
+          <path
+            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
+        </svg></a>
+    </div>
   </div>
   <!-- show pagination only for tags and main page -->
-  @if(!/^\/\d$/.test(url.pathname))
+  @if(typeof hidePagination === 'undefined' || !hidePagination)
   <div class="collapse navbar-collapse show" id="navbarSupportedContent">
     <div class="pagination-container-fluid">
       <div class="pagination-wrapper">
@@ -27,18 +79,38 @@
 <!-- not logged in -->
 <nav class="navbar navbar-expand-lg">
   <a class="navbar-brand" href="/"><span class="f0ck" width="" height="">w0bm.com</span></a>
-
-  <div class="navigation-links-guest">
-    <ol>
+  <div class="nav-left-group">
+    <div class="nav-user-dropdown">
+      <button class="nav-user-btn" id="nav-visitor-toggle">
+        guest ▾
+      </button>
+      <div class="nav-user-menu" id="nav-visitor-menu">
+        <a href="#" id="nav-login-btn">Login</a>
+        <a href="#" id="nav-register-btn">Register</a>
+        <div class="nav-user-divider"></div>
+        <a href="/about">about</a>
+      </div>
+    </div>
+    <div class="nav-links">
       <a href="/tags">tags</a>
-      <a href="/about">about</a>
       @if(!/^\/\d$/.test(url.pathname))
-      <a href="/random">rand</a>
+      <a href="/random" id="nav-random" title="Random"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
+          fill="currentColor" viewBox="0 0 16 16">
+          <path fill-rule="evenodd"
+            d="M0 3.5A.5.5 0 0 1 .5 3H1c2.202 0 3.827 1.24 4.874 2.418.49.552.865 1.102 1.126 1.532.26-.43.636-.98 1.126-1.532C9.173 4.24 10.798 3 13 3v1c-1.798 0-3.173 1.01-4.126 2.082A9.624 9.624 0 0 0 7.556 8a9.624 9.624 0 0 0 1.317 1.918C9.828 10.99 11.204 12 13 12v1c-2.202 0-3.827-1.24-4.874-2.418A10.595 10.595 0 0 1 7 9.05c-.26.43-.636.98-1.126 1.532C4.827 11.76 3.202 13 1 13H.5a.5.5 0 0 1 0-1H1c1.798 0 3.173-1.01 4.126-2.082A9.624 9.624 0 0 0 6.444 8a9.624 9.624 0 0 0-1.317-1.918C4.172 5.01 2.796 4 1 4H.5a.5.5 0 0 1-.5-.5z" />
+          <path
+            d="M13 5.466V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192zm0 9v-3.932a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192z" />
+        </svg></a>
       @endif
-    </ol>
+      <a href="#" id="nav-search-btn-guest" title="Search"><svg xmlns="http://www.w3.org/2000/svg" width="13"
+          height="13" fill="currentColor" viewBox="0 0 16 16">
+          <path
+            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
+        </svg></a>
+    </div>
   </div>
   <!-- show pagination only for tags and main page -->
-  @if(!/^\/\d$/.test(url.pathname))
+  @if(typeof hidePagination === 'undefined' || !hidePagination)
   <div class="collapse navbar-collapse show" id="navbarSupportedContent">
     <div class="pagination-container-fluid">
       <div class="pagination-wrapper">
@@ -48,5 +120,42 @@
   </div>
   @endif
 </nav>
+@endif
 
-@endif
+<!-- Login Modal -->
+<div id="login-modal" style="display: none;">
+  <div class="login-modal-content">
+    <button id="login-modal-close">&times;</button>
+    <form class="login-form" method="post" action="/login">
+      <img class="login-image" src="/s/img/w0bm_mosh_banner_by_marderchen.gif" alt="Login Banner">
+      <input type="text" name="username" placeholder="Username" autocomplete="off" required />
+      <input type="password" name="password" placeholder="Password" autocomplete="off" required />
+      <p style="text-align: left; font-size: 0.9em; margin: 0;"><input type="checkbox" id="kmsi-modal" name="kmsi" />
+        <label for="kmsi-modal">Stay signed in</label>
+      </p>
+      <button type="submit">Login</button>
+    </form>
+  </div>
+</div>
+
+<!-- Register Modal -->
+<div id="register-modal" style="display: none;">
+  <div class="login-modal-content">
+    <button id="register-modal-close">&times;</button>
+    <form class="login-form" method="post" action="/register">
+      <h2 style="text-align: center; margin-bottom: 20px;">Register</h2>
+      <input type="text" name="username" placeholder="username" autocomplete="off" required />
+      <input type="password" name="password" placeholder="password" autocomplete="off" required minlength="20"
+        title="Must be at least 20 characters long." />
+      <input type="password" name="password_confirm" placeholder="confirm password" autocomplete="off" required />
+      <input type="text" name="token" placeholder="invite token" autocomplete="off" required />
+      <p style="text-align: left; font-size: 0.9em; margin: 0; color: #fff;">
+        <input type="checkbox" id="tos-modal" name="tos" required />
+        <label for="tos-modal">I have read and accept the <a href="/terms" target="_blank"
+            style="color: var(--accent); text-decoration: underline;">Terms of Service</a> and I am at least 18 years
+          old</label>
+      </p>
+      <button type="submit">Create Account</button>
+    </form>
+  </div>
+</div>

views/subscriptions.html

@@ -0,0 +1,127 @@
+@include(snippets/header)
+
+<div id="main">
+    <div style="padding: 20px; max-width: 1200px; margin: 0 auto;">
+        <h2 style="margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px;">My Subscriptions</h2>
+
+        @if(items.length === 0)
+        <div style="padding: 20px; background: rgba(0,0,0,0.2); border-radius: 4px; text-align: center;">
+            You haven't subscribed to any threads yet.
+        </div>
+        @else
+        <div class="subs-grid">
+            @each(items as item)
+            <div class="sub-card" id="sub-{{ item.id }}">
+                <a href="/{{ item.id }}" class="sub-link">
+                    <img src="{{ item.thumb }}" loading="lazy" />
+                    <div class="sub-info">
+                        <span class="sub-id">#{{ item.id }}</span>
+                        <span class="sub-user">by {{ item.user }}</span>
+                    </div>
+                </a>
+                <button class="unsub-btn" data-id="{{ item.id }}">Unsubscribe</button>
+            </div>
+            @endeach
+        </div>
+        @endif
+    </div>
+</div>
+
+<style>
+    .subs-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: 15px;
+    }
+
+    .sub-card {
+        background: rgba(0, 0, 0, 0.3);
+        border-radius: 4px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .sub-link {
+        text-decoration: none;
+        color: inherit;
+        display: block;
+        flex-grow: 1;
+    }
+
+    .sub-card img {
+        width: 100%;
+        height: 110px;
+        object-fit: cover;
+        display: block;
+    }
+
+    .sub-info {
+        padding: 8px;
+    }
+
+    .sub-id {
+        display: block;
+        font-weight: bold;
+        color: var(--accent);
+    }
+
+    .sub-user {
+        display: block;
+        font-size: 0.85em;
+        color: #888;
+    }
+
+    .unsub-btn {
+        width: 100%;
+        border: none;
+        background: rgba(200, 50, 50, 0.2);
+        color: #ff6666;
+        padding: 8px;
+        cursor: pointer;
+        font-size: 0.9em;
+        transition: background 0.2s;
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    .unsub-btn:hover {
+        background: rgba(200, 50, 50, 0.4);
+    }
+</style>
+
+<script>
+    document.querySelectorAll('.unsub-btn').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+            if (!confirm('Unsubscribe from this thread?')) return;
+
+            const id = e.target.dataset.id;
+            const card = document.getElementById('sub-' + id);
+            const originalText = e.target.textContent;
+            e.target.textContent = '...';
+
+            try {
+                const res = await fetch('/api/subscriptions/' + id + '/delete', { method: 'POST' });
+                const json = await res.json();
+
+                if (json.success) {
+                    card.style.opacity = '0';
+                    setTimeout(() => {
+                        card.remove();
+                        if (document.querySelectorAll('.sub-card').length === 0) {
+                            location.reload();
+                        }
+                    }, 300);
+                } else {
+                    alert('Error: ' + (json.message || 'Failed'));
+                    e.target.textContent = originalText;
+                }
+            } catch (err) {
+                console.error(err);
+                alert('Error removing subscription');
+                e.target.textContent = originalText;
+            }
+        });
+    });
+</script>
+
+@include(snippets/footer)

views/tags.html

@@ -2,27 +2,33 @@
 <div id="main">
   <div class="container">
     <h3 style="text-align: center;">☯</h3>
-    <div class="tags">
+    <div class="tags-grid" id="tags-container">
       @if(session)
       @each(toptags_regged as toptag)
-      <div class="tag badge badge-light mr-2">
-        <div class="tagbox-body">
-          <span class="toptag_id">{!! toptag.tag !!}</span>
-          <span class="toptag_tag"><a href="/tag/{!! toptag.tag !!}">{{ toptag.total_items }}</a></span>
+      <a href="/tag/{{ toptag.tag }}" class="tag-card">
+        <div class="tag-card-image">
+          <img src="/tag_image/{{ toptag.tag }}" loading="lazy" alt="{{ toptag.tag }}">
         </div>
-      </div>
+        <div class="tag-card-content">
+          <span class="tag-name">#{{ toptag.tag }}</span>
+          <span class="tag-count">{{ toptag.total_items }} posts</span>
+        </div>
+      </a>
       @endeach
       @else
       @each(toptags as toptag)
-      <div class="tag badge badge-light mr-2">
-        <div class="tagbox-body">
-          <span class="toptag_id">{!! toptag.tag !!}</span>
-          <span class="toptag_tag"><a href="/tag/{!! toptag.tag !!}">{{ toptag.total_items }}</a></span>
+      <a href="/tag/{{ toptag.tag }}" class="tag-card">
+        <div class="tag-card-image">
+          <img src="/tag_image/{{ toptag.tag }}" loading="lazy" alt="{{ toptag.tag }}">
         </div>
-      </div>
+        <div class="tag-card-content">
+          <span class="tag-name">#{{ toptag.tag }}</span>
+          <span class="tag-count">{{ toptag.total_items }} posts</span>
+        </div>
+      </a>
       @endeach
       @endif
     </div>
   </div>
 </div>
-@include(snippets/footer)
+@include(snippets/footer)

views/terms.html

@@ -1,56 +1,96 @@
 @include(snippets/header)
 <div id="main">
-<div class="tos">
-    <p>Terms of Service</p>
-    <ol>
-        <li>Acceptance of Terms</li>
-        <p>By accessing and using this website, you acknowledge that your access is a privilege, not a right. If you do not agree with these terms, you are free to leave at any time.</p>
-        <li>No Claims</li>
-        <p>Visitors to this website have no claims whatsoever against the website owner or operators. Access to the website and its content is provided as-is, with no guarantees, warranties, or entitlements of any kind.</p>
-        <li>No Liability</li>
-        <p>This website and its operators assume no liability for any errors, omissions, inaccuracies, or any other issues that may arise from the use of this site. Use of this website is entirely at your own risk.</p>
-        <li>No Warranty</li>
-        <p>There is no warranty regarding the completeness, accuracy, reliability, or availability of the content provided on this website. The content may change at any time without notice.</p>
-        <li>Compliance with Requests</li>
-        <p>The website owner reserves the right to remove content, restrict access, or comply with any valid legal or personal requests at their sole discretion.</p>
-        <li>Changes to Terms</li>
-        <p>These terms may be updated at any time without prior notice. It is your responsibility to review them periodically.</p>
-    </ol>
-    <p>Data Privacy</p>
-    <ol>
-        <li>No Data Logging</li>
-        <p>This website does not collect, store, or log any personal data, including IP addresses or other identifying information of its visitors. No server-side logs are maintained.</p>
-        
-        <li>Use of Cookies</li>
-        <p>Upon changing the theme, a single cookie is set. This cookie solely stores the name of the currently active theme to enhance the visual experience. It does not contain any personal data, tracking information, or other identifiers.</p>
-        
-        <li>Cookie Control</li>
-        <p>The cookie is purely of cosmetic nature and not essential for the website's functionality. Users can disable cookies for this website entirely via their browser settings without affecting their ability to access and use the site.</p>
-        
-        <li>No Third-Party Tracking</li>
-        <p>This website does not use third-party tracking services, analytics tools, or embedded content that collects user data.</p>
-        
-        <li>User Accounts</li>
-        <p>When a former visitor is granted access with an account, the following data is collected:</p>
-        <ul>
-            <li>The User Agent</li>
-            <li>The Timestamp of the first login</li>
-            <li>The Timestamp of the account's last usage</li>
-            <li>The User's last recorded action</li>
-        </ul>
+    <div class="tos">
+        <h1 style="text-align: center; margin-bottom: 20px;">Terms of Service</h1>
+        <ol>
+            <li>
+                <strong>Acceptance of Terms</strong>
+                <p>By accessing and using this website, you acknowledge that your access is a privilege, not a right. If
+                    you do not agree with these terms, you are free to leave at any time.</p>
+            </li>
+            <li>
+                <strong>No Claims</strong>
+                <p>Visitors to this website have no claims whatsoever against the website owner or operators. Access to
+                    the website and its content is provided as-is, with no guarantees, warranties, or entitlements of
+                    any kind.</p>
+            </li>
+            <li>
+                <strong>No Liability</strong>
+                <p>This website and its operators assume no liability for any errors, omissions, inaccuracies, or any
+                    other issues that may arise from the use of this site. Use of this website is entirely at your own
+                    risk.</p>
+            </li>
+            <li>
+                <strong>No Warranty</strong>
+                <p>There is no warranty regarding the completeness, accuracy, reliability, or availability of the
+                    content provided on this website. The content may change at any time without notice.</p>
+            </li>
+            <li>
+                <strong>Compliance with Requests</strong>
+                <p>The website owner reserves the right to remove content, restrict access, or comply with any valid
+                    legal or personal requests at their sole discretion.</p>
+            </li>
+            <li>
+                <strong>Changes to Terms</strong>
+                <p>These terms may be updated at any time without prior notice. It is your responsibility to review them
+                    periodically.</p>
+            </li>
+        </ol>
 
-        <li>Email Communication</li>
-        <p>If you send me an email your mail is stored on our server, we can make a connection to your Email-Address and your user account if you contact us this way.</p>
-        <p>The Emails are not deleted after being answered.</p>
+        <h2 style="margin-top: 30px;">Data Privacy</h2>
+        <ol>
+            <li>
+                <strong>No Data Logging</strong>
+                <p>This website does not collect, store, or log any personal data, including IP addresses or other
+                    identifying information of its visitors. No server-side logs are maintained.</p>
+            </li>
+            <li>
+                <strong>Use of Cookies</strong>
+                <p>Upon changing the theme, a single cookie is set. This cookie solely stores the name of the currently
+                    active theme to enhance the visual experience. It does not contain any personal data, tracking
+                    information, or other identifiers.</p>
+            </li>
+            <li>
+                <strong>Cookie Control</strong>
+                <p>The cookie is purely of cosmetic nature and not essential for the website's functionality. Users can
+                    disable cookies for this website entirely via their browser settings without affecting their ability
+                    to access and use the site.</p>
+            </li>
+            <li>
+                <strong>No Third-Party Tracking</strong>
+                <p>This website does not use third-party tracking services, analytics tools, or embedded content that
+                    collects user data.</p>
+            </li>
+            <li>
+                <strong>User Accounts</strong>
+                <p>When a former visitor is granted access with an account, the following data is collected:</p>
+                <ul>
+                    <li>The User Agent</li>
+                    <li>The Timestamp of the first login</li>
+                    <li>The Timestamp of the account's last usage</li>
+                    <li>The User's last recorded action</li>
+                </ul>
+                <br>
+            </li>
+            <li>
+                <strong>Email Communication</strong>
+                <p>If you send me an email your mail is stored on our server, we can make a connection to your
+                    Email-Address and your user account if you contact us this way.</p>
+                <p>The Emails are not deleted after being answered.</p>
+            </li>
+            <li>
+                <strong>Fully complying with Art. 15 GDPR</strong>
+                <p>You can ask anytime what data we have of you and how we use it, see Email Communication too.</p>
+            </li>
+            <li>
+                <strong>Changes to This Policy</strong>
+                <p>This privacy policy may be updated from time to time. Users are encouraged to review it periodically
+                    to stay informed about any changes.</p>
+            </li>
+        </ol>
 
-        <li>Fully complying with Art. 15 GDPR</li>
-        <p>You can ask anytime what data we have of you and how we use it, see Email Communication too.</p>
-
-        <li>Changes to This Policy</li>
-        <p>This privacy policy may be updated from time to time. Users are encouraged to review it periodically to stay informed about any changes.</p>
-        
-        <p>By using this website, you acknowledge and accept the terms of service and the data privacy policy.</p>
-    </ol>
-</div>
+        <p style="margin-top: 30px; font-style: italic;">By using this website, you acknowledge and accept the terms of
+            service and the data privacy policy.</p>
+    </div>
 </div>
 @include(snippets/footer)

views/upload.html

@@ -1,37 +1,115 @@
 @include(snippets/header)
-<div class="upload">
-    <h5>Upload</h5>
-    <p>To add videos to the w0bm catalogue you must join our <a href="https://t.me/+w97TCd988ehkNWEy">Telegram</a> group</p>
-    <h5>Content Guideline</h5>
-    <p>w0bm follows strict principles when it comes to content, please keep this in mind.</p>
-    <p>We do not want content that</p>
-    <ul>
-        <li>glorifies Nazis</li>
-        <li>sexualizes children and minors</li>
-        <li>is political</li>
-        <li>glorifies military</li>
-        <li>depicts gore</li>
-        <li>depicts acts of terrorism</li>
-        <li>depicts violence and cruelty against animals</li>
-    </ul>
-    <p>We want content that</p>
-    <ul>
-        <li>is cool</li>
-        <li>has deeper value</li>
-        <li>is fun to watch</li>
-        <li>has a vibe to it</li>
-        <li>can be looped for 5000 times and doesnt get boring</li>
-    </ul>
-    <p>but in general we welcome content that has been curated beforehand by the uploader and believe that they understand the vibe.</p>
-    <p>Content that is deemed NSFW (Not Safe For Work) MUST be tagged with "nsfw"</p>
-    <p>This list is subject to change, please review it periodically.</p> 
-    <br>
-    <h5>How it works</h5>
-    <ul>
-        <li>The maximum filesize for direct file upload is 20MB and cannot be exceeded.</li>
-        <li>There is a much higher limit for non-direct uploads via sending a URL.</li>
-        <li>You can send a link to the group and put a !f behind it and the bot will pick it up and add it to w0bm.</li>
-        <li>In the menu below the bots message you can select the rating and additional tags.</li>
-    </ul>
+<link rel="stylesheet" href="/s/css/upload.css">
+
+<div class="upload-container">
+    <h2>Upload Content</h2>
+
+    <details class="content-guidelines">
+        <summary>Content Guidelines (Click to expand)</summary>
+        <div class="guidelines-content">
+            <p>We want this place to be fun. Keep it cool, keep it legal.</p>
+            <div class="guidelines-grid">
+                <div class="guidelines-do">
+                    <h5>Do's (Vibes & Hypnosis)</h5>
+                    <ul>
+                        <li>Cool, relaxing, or weird "vibing" content</li>
+                        <li>Classic-style loops (Flash era vibes)</li>
+                        <li>High-quality, hypnotic edits (PMVs welcome)</li>
+                        <li>Interesting, freaky, or just plain cool stuff</li>
+                    </ul>
+                </div>
+                <div class="guidelines-dont">
+                    <h5>Don'ts (The Banhammer)</h5>
+                    <ul>
+                        <li>Political commentary, preaching, or "pol" bait</li>
+                        <li>Gore, extreme violence, or animal cruelty (Instant Ban)</li>
+                        <li>Illegal content (CP, Terror, etc.) (Instant Ban)</li>
+                        <li>Boring, unedited, or lengthy videos</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </details>
+
+    @if(session)
+    <form id="upload-form" class="upload-form" enctype="multipart/form-data">
+        <div class="form-section">
+            <label>Video File <span class="required">*</span></label>
+            <div class="drop-zone" id="drop-zone">
+                <input type="file" id="file-input" name="file" accept="video/mp4,video/webm">
+                <div class="drop-zone-prompt">
+                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+                        style="opacity: 0.7; margin-bottom: 1rem;">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="17 8 12 3 7 8"></polyline>
+                        <line x1="12" y1="3" x2="12" y2="15"></line>
+                    </svg>
+                    <p style="font-size: 1.1rem; font-weight: 500;">Drop your video here</p>
+                    <p style="font-size: 0.9rem; opacity: 0.6;">(mp4 or webm)</p>
+                </div>
+                <!-- Preview Container -->
+                <div class="file-preview" id="file-preview" style="display: none;">
+                    <!-- Video will be injected here via JS -->
+                    <div class="file-meta-row">
+                        <div class="file-info">
+                            <span class="file-name" id="file-name"></span>
+                            <span class="file-size" id="file-size"></span>
+                        </div>
+                        <button type="button" class="btn-remove" id="remove-file" title="Remove File">✕</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="form-section">
+            <label>Rating <span class="required">*</span></label>
+            <div class="rating-options">
+                <label class="rating-option">
+                    <input type="radio" name="rating" value="sfw" required>
+                    <span class="rating-label sfw">SFW</span>
+                </label>
+                <label class="rating-option">
+                    <input type="radio" name="rating" value="nsfw">
+                    <span class="rating-label nsfw">NSFW</span>
+                </label>
+            </div>
+        </div>
+
+        <div class="form-section">
+            <label>Tags <span class="required">*</span> <span class="tag-count" id="tag-count">(0/3
+                    minimum)</span></label>
+            <div class="tag-input-container">
+                <div class="tags-list" id="tags-list"></div>
+                <input type="text" id="tag-input" placeholder="Type a tag and press Enter" autocomplete="off">
+                <div class="tag-suggestions" id="tag-suggestions"></div>
+            </div>
+            <input type="hidden" name="tags" id="tags-hidden">
+        </div>
+
+        <div class="form-actions">
+            <button type="submit" id="submit-btn" class="btn-upload" disabled>
+                <span class="btn-text">Select a file</span>
+                <span class="btn-loading" style="display: none;">Uploading...</span>
+            </button>
+        </div>
+
+        <div class="upload-progress" id="upload-progress" style="display: none;">
+            <div class="progress-bar">
+                <div class="progress-fill" id="progress-fill"></div>
+            </div>
+            <span class="progress-text" id="progress-text">0%</span>
+        </div>
+
+        <div class="upload-status" id="upload-status"></div>
+    </form>
+    @else
+    <div class="login-required">
+        <h3>Authentication Required</h3>
+        <p>You must be logged in to upload content to w0bm.</p>
+        <a href="/login" class="btn-login">Login</a>
+    </div>
+    @endif
 </div>
+
+<script src="/s/js/upload.js"></script>
 @include(snippets/footer)