svelte lol

.gitignore

@@ -18,4 +18,3 @@ public/tag_cache
 config.json
 bundle.css
 public/s/fonts/impact.woff
-f0ck-svelte/*

docker-compose.yml

@@ -99,8 +99,6 @@ services:
     container_name: f0ckm-nginx
     profiles:
       - f0ckm-nginx
-    environment:
-      - ENABLE_IPV6=true
     ports:
       - "80:80"
       - "443:443"

f0ck-svelte/.gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

f0ck-svelte/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

f0ck-svelte/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+	"recommendations": ["svelte.svelte-vscode"]
+}

f0ck-svelte/README.md

@@ -0,0 +1,42 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv@0.16.3 create --template minimal --types ts --install npm .
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

f0ck-svelte/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "f0ck-svelte",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/adapter-node": "^5.5.7",
+		"@sveltejs/kit": "^2.63.0",
+		"@sveltejs/vite-plugin-svelte": "^7.1.2",
+		"@tailwindcss/vite": "^4.3.3",
+		"@types/node": "^26.1.1",
+		"daisyui": "^5.6.18",
+		"svelte": "^5.56.1",
+		"svelte-check": "^4.6.0",
+		"tailwindcss": "^4.3.3",
+		"typescript": "^6.0.3",
+		"vite": "^8.0.16"
+	}
+}

f0ck-svelte/src/app.css

@@ -0,0 +1,77 @@
+@import "tailwindcss";
+@plugin "daisyui" {
+  themes: f0ck --default, light;
+}
+
+@theme {
+  /* f0ck dark theme — AMOLED-inspired */
+  --color-base-100: oklch(10% 0.02 265);
+  --color-base-200: oklch(13% 0.02 265);
+  --color-base-300: oklch(16% 0.02 265);
+  --color-base-content: oklch(92% 0.01 265);
+
+  --color-primary: oklch(55% 0.22 265);
+  --color-primary-content: oklch(98% 0.01 265);
+
+  --color-secondary: oklch(60% 0.18 300);
+  --color-secondary-content: oklch(98% 0.01 265);
+
+  --color-accent: oklch(72% 0.15 290);
+  --color-accent-content: oklch(10% 0.02 265);
+
+  --color-neutral: oklch(20% 0.02 265);
+  --color-neutral-content: oklch(85% 0.01 265);
+
+  --color-info: oklch(70% 0.15 220);
+  --color-success: oklch(70% 0.15 160);
+  --color-warning: oklch(78% 0.18 80);
+  --color-error: oklch(63% 0.22 25);
+
+  /* Rating colors */
+  --color-sfw: oklch(70% 0.15 160);
+  --color-nsfw: oklch(65% 0.20 25);
+  --color-nsfl: oklch(60% 0.22 0);
+}
+
+/* ── Global resets & base styles ───────────────────────────────────────── */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  background-color: var(--color-base-100);
+  color: var(--color-base-content);
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100dvh;
+  overscroll-behavior: none;
+}
+
+/* ── Scrollbar styling ─────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: oklch(30% 0.02 265); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: oklch(40% 0.02 265); }
+
+/* ── Rating badge utility classes ─────────────────────────────────────── */
+.badge-sfw  { background: oklch(70% 0.15 160 / 20%); color: oklch(70% 0.15 160); border-color: oklch(70% 0.15 160 / 40%); }
+.badge-nsfw { background: oklch(65% 0.20 25 / 20%);  color: oklch(65% 0.20 25);  border-color: oklch(65% 0.20 25 / 40%); }
+.badge-nsfl { background: oklch(55% 0.22 0 / 20%);   color: oklch(55% 0.22 0);   border-color: oklch(55% 0.22 0 / 40%); }
+.badge-unt  { background: oklch(55% 0.02 265 / 20%); color: oklch(65% 0.02 265); border-color: oklch(55% 0.02 265 / 40%); }
+
+/* ── Grid thumb skeleton pulse ─────────────────────────────────────────── */
+@keyframes thumb-pulse {
+  0%, 100% { opacity: 0.4; }
+  50%       { opacity: 0.7; }
+}
+.thumb-skeleton { animation: thumb-pulse 1.5s ease-in-out infinite; }
+
+/* ── Fade-in for navigations ───────────────────────────────────────────── */
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.page-enter { animation: fade-in 0.15s ease-out; }

f0ck-svelte/src/app.d.ts

@@ -0,0 +1,21 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+import type { SessionUser } from '$lib/types/session';
+
+declare global {
+	namespace App {
+		interface Error {
+			message: string;
+			code?: number;
+		}
+		interface Locals {
+			session: SessionUser | null;
+		}
+		interface PageData {
+			session: SessionUser | null;
+		}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

f0ck-svelte/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="text-scale" content="scale" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

f0ck-svelte/src/hooks.server.ts

@@ -0,0 +1,41 @@
+import type { Handle } from '@sveltejs/kit';
+
+/**
+ * Server-side hook: read session from the existing f0ckm backend
+ * by forwarding the session cookie on every SSR request.
+ *
+ * This keeps auth as a single source of truth in the backend.
+ */
+export const handle: Handle = async ({ event, resolve }) => {
+	// Forward cookies to the backend session endpoint
+	const cookieHeader = event.request.headers.get('cookie') ?? '';
+
+	try {
+		const res = await fetch(`${getApiBase(event)}/api/v2/session`, {
+			headers: { cookie: cookieHeader }
+		});
+
+		if (res.ok) {
+			const data = await res.json();
+			event.locals.session = data.loggedIn ? data.user : null;
+		} else {
+			event.locals.session = null;
+		}
+	} catch {
+		// Backend not reachable (dev without backend running)
+		event.locals.session = null;
+	}
+
+	return resolve(event);
+};
+
+/**
+ * Determine the API base URL for server-side fetches.
+ * In production the SvelteKit server and the API backend run on separate ports.
+ * The VITE_API_URL env var (or API_URL for SSR) sets the backend address.
+ */
+function getApiBase(event: Parameters<Handle>[0]['event']): string {
+	// SSR: use internal backend address (avoids going through Nginx proxy)
+	const internal = process.env.API_URL ?? 'http://localhost:1337';
+	return internal;
+}

f0ck-svelte/src/lib/api/actions.ts

@@ -0,0 +1,132 @@
+import type { Comment } from '$lib/types/comment';
+import { csrfFetch } from '$lib/utils/csrfFetch';
+
+// ── Comments ──────────────────────────────────────────────────────────────────
+
+export interface CommentsResponse {
+	success: boolean;
+	comments: Comment[];
+	total?: number;
+}
+
+export async function getComments(
+	itemId: number,
+	fetchFn = fetch
+): Promise<CommentsResponse> {
+	const res = await fetchFn(`/api/comments/${itemId}`);
+	if (!res.ok) throw new Error(`getComments failed: ${res.status}`);
+	return res.json();
+}
+
+export async function postComment(payload: {
+	itemId: number;
+	content: string;
+	replyTo?: number | null;
+}): Promise<{ success: boolean; comment?: Comment; message?: string; msg?: string }> {
+	const body = new URLSearchParams({
+		item_id: String(payload.itemId),
+		content:  payload.content,
+		...(payload.replyTo ? { parent_id: String(payload.replyTo) } : {})
+	});
+	const res = await csrfFetch('/api/comments', { method: 'POST', body });
+	if (!res.ok && res.status !== 400 && res.status !== 429) throw new Error(`postComment failed: ${res.status}`);
+	return res.json();
+}
+
+export async function deleteComment(
+	commentId: number
+): Promise<{ success: boolean; msg?: string }> {
+	// Backend uses POST /api/comments/:id/delete (not DELETE method)
+	const res = await csrfFetch(`/api/comments/${commentId}/delete`, { method: 'POST' });
+	if (!res.ok) throw new Error(`deleteComment failed: ${res.status}`);
+	return res.json();
+}
+
+// ── Favorites ─────────────────────────────────────────────────────────────────
+
+export interface FavResponse {
+	success: boolean;
+	itemid: number;
+	favs: Array<{
+		user: string;
+		display_name: string | null;
+		avatar: string | null;
+		avatar_file: string | null;
+		username_color: string | null;
+	}>;
+}
+
+export async function toggleFav(itemId: number): Promise<FavResponse> {
+	const body = new URLSearchParams({ postid: String(itemId) });
+	const res = await csrfFetch('/api/v2/togglefav', { method: 'POST', body });
+	if (!res.ok) throw new Error(`toggleFav failed: ${res.status}`);
+	return res.json();
+}
+
+// ── Tags ──────────────────────────────────────────────────────────────────────
+
+export interface TagsResponse {
+	success: boolean;
+	tags: import('$lib/types/item').Tag[];
+	msg?: string;
+}
+
+export async function addTag(itemId: number, tagname: string): Promise<TagsResponse> {
+	const body = new URLSearchParams({ tagname });
+	const res = await csrfFetch(`/api/v2/tags/${itemId}`, { method: 'POST', body });
+	if (!res.ok && res.status !== 400) throw new Error(`addTag failed: ${res.status}`);
+	return res.json();
+}
+
+export async function deleteTag(itemId: number, tagname: string): Promise<TagsResponse> {
+	const res = await csrfFetch(`/api/v2/tags/${itemId}/${encodeURIComponent(tagname)}`, {
+		method: 'DELETE'
+	});
+	if (!res.ok) throw new Error(`deleteTag failed: ${res.status}`);
+	return res.json();
+}
+
+export interface CycleRatingResponse {
+	success: boolean;
+	rating_tag_id: number;
+	rating_label: 'SFW' | 'NSFW' | 'NSFL';
+	rating_class: 'sfw' | 'nsfw' | 'nsfl';
+	msg?: string;
+}
+
+export async function cycleRating(itemId: number): Promise<CycleRatingResponse> {
+	const res = await csrfFetch(`/api/v2/tags/${itemId}/cycle-rating`, { method: 'PUT' });
+	if (!res.ok) throw new Error(`cycleRating failed: ${res.status}`);
+	return res.json();
+}
+
+export async function suggestTags(query: string): Promise<{ success: boolean; suggestions: Record<string, number> }> {
+	const res = await fetch(`/api/v2/tags/suggest?q=${encodeURIComponent(query)}`);
+	if (!res.ok) throw new Error('suggestTags failed');
+	return res.json();
+}
+
+// ── Item management (mod/admin) ───────────────────────────────────────────────
+
+export async function deleteItem(
+	itemId: number,
+	reason = ''
+): Promise<{ success: boolean; msg?: string }> {
+	const body = new URLSearchParams({ postid: String(itemId), reason });
+	const res = await csrfFetch('/api/v2/admin/deletepost', { method: 'POST', body });
+	if (!res.ok) throw new Error(`deleteItem failed: ${res.status}`);
+	return res.json();
+}
+
+export async function pinItem(itemId: number): Promise<{ success: boolean; pinned: boolean }> {
+	// Backend reads id from query string: req.url.qs.id
+	const res = await csrfFetch(`/mod/pin/?id=${itemId}`, { method: 'POST' });
+	if (!res.ok) throw new Error(`pinItem failed: ${res.status}`);
+	return res.json();
+}
+
+export async function unpinItem(itemId: number): Promise<{ success: boolean; pinned: boolean }> {
+	const res = await csrfFetch(`/mod/unpin/?id=${itemId}`, { method: 'POST' });
+	if (!res.ok) throw new Error(`unpinItem failed: ${res.status}`);
+	return res.json();
+}

f0ck-svelte/src/lib/api/auth.ts

@@ -0,0 +1,29 @@
+import type { SessionResponse } from '$lib/types/session';
+
+export async function getSession(fetchFn: typeof fetch = fetch): Promise<SessionResponse> {
+	const res = await fetchFn('/api/v2/session');
+	if (!res.ok) return { loggedIn: false, user: null };
+	return res.json();
+}
+
+export async function login(
+	username: string,
+	password: string,
+	kmsi = false
+): Promise<{ success: boolean; msg?: string }> {
+	const body = new URLSearchParams({ username, password, ...(kmsi ? { kmsi: '1' } : {}) });
+	const res = await fetch('/login', {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/x-www-form-urlencoded',
+			Accept: 'application/json'
+		},
+		body: body.toString(),
+		credentials: 'include'
+	});
+	return res.json();
+}
+
+export async function logout(): Promise<void> {
+	await fetch('/logout', { method: 'POST', credentials: 'include' });
+}

f0ck-svelte/src/lib/api/items.ts

@@ -0,0 +1,96 @@
+import type { ItemsResponse, ItemResponse, RandomResponse } from '$lib/types/item';
+
+export interface GetItemsParams {
+	page?: number;
+	mode?: number;
+	ratings?: string;
+	mime?: string;
+	tag?: string;
+	hall?: string;
+	user?: string;
+	fav?: boolean;
+	random?: boolean;
+	strict?: boolean;
+	min_xd?: number;
+	newer?: number;
+	tagger?: string;
+}
+
+/**
+ * Fetch a page of grid items.
+ * Called from +page.ts (server-side) and from the client for infinite-scroll.
+ */
+export async function getItems(
+	params: GetItemsParams,
+	fetchFn: typeof fetch = fetch
+): Promise<ItemsResponse> {
+	const qs = new URLSearchParams();
+	if (params.page)    qs.set('page',    String(params.page));
+	if (params.mode !== undefined) qs.set('mode', String(params.mode));
+	if (params.ratings) qs.set('ratings', params.ratings);
+	if (params.mime)    qs.set('mime',    params.mime);
+	if (params.tag)     qs.set('tag',     params.tag);
+	if (params.hall)    qs.set('hall',    params.hall);
+	if (params.user)    qs.set('user',    params.user);
+	if (params.fav)     qs.set('fav',     'true');
+	if (params.random)  qs.set('random',  '1');
+	if (params.strict)  qs.set('strict',  '1');
+	if (params.min_xd)  qs.set('min_xd',  String(params.min_xd));
+	if (params.newer)   qs.set('newer',   String(params.newer));
+	if (params.tagger)  qs.set('tagger',  params.tagger);
+
+	const res = await fetchFn(`/api/v2/items?${qs}`);
+	if (!res.ok) throw new Error(`Failed to fetch items: ${res.status}`);
+	return res.json();
+}
+
+export interface GetItemParams {
+	mode?: number;
+	ratings?: string;
+	tag?: string;
+	hall?: string;
+	user?: string;
+	fav?: boolean;
+	random?: boolean;
+	strict?: boolean;
+	mime?: string;
+	userHall?: string;
+	userHallOwner?: string;
+}
+
+/**
+ * Fetch a single item with its neighbours and metadata.
+ */
+export async function getItem(
+	id: number | string,
+	params: GetItemParams = {},
+	fetchFn: typeof fetch = fetch
+): Promise<ItemResponse> {
+	const qs = new URLSearchParams();
+	if (params.mode !== undefined) qs.set('mode',          String(params.mode));
+	if (params.ratings)            qs.set('ratings',       params.ratings);
+	if (params.tag)                qs.set('tag',           params.tag);
+	if (params.hall)               qs.set('hall',          params.hall);
+	if (params.user)               qs.set('user',          params.user);
+	if (params.fav)                qs.set('fav',           'true');
+	if (params.random)             qs.set('random',        '1');
+	if (params.strict)             qs.set('strict',        '1');
+	if (params.mime)               qs.set('mime',          params.mime);
+	if (params.userHall)           qs.set('userHall',      params.userHall);
+	if (params.userHallOwner)      qs.set('userHallOwner', params.userHallOwner);
+
+	const suffix = qs.toString() ? `?${qs}` : '';
+	const res = await fetchFn(`/api/v2/items/${id}${suffix}`);
+	if (!res.ok) throw new Error(`Failed to fetch item ${id}: ${res.status}`);
+	return res.json();
+}
+
+/**
+ * Get a random item ID (optionally within a context).
+ * Returns the JSON response; caller should navigate to response.url.
+ */
+export async function getRandom(fetchFn: typeof fetch = fetch): Promise<RandomResponse> {
+	const res = await fetchFn('/api/v2/random');
+	if (!res.ok) throw new Error(`Failed to get random item: ${res.status}`);
+	return res.json();
+}

f0ck-svelte/src/lib/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

f0ck-svelte/src/lib/components/item/Comments.svelte

@@ -0,0 +1,232 @@
+<script lang="ts">
+	import { getComments, postComment, deleteComment } from '$lib/api/actions';
+	import { session, isModOrAdmin } from '$lib/stores/session';
+	import { flash } from '$lib/stores/flash';
+	import { timeAgo, formatDate } from '$lib/utils/timeago';
+	import { onSSE } from '$lib/stores/sse';
+	import { onDestroy } from 'svelte';
+	import type { Comment } from '$lib/types/comment';
+
+	interface Props {
+		itemId: number;
+	}
+	let { itemId }: Props = $props();
+
+	// ── State ─────────────────────────────────────────────────────────────────
+	let comments  = $state<Comment[]>([]);
+	let loading   = $state(true);
+	let error     = $state('');
+	let text      = $state('');
+	let replyTo   = $state<Comment | null>(null);
+	let submitting = $state(false);
+
+	// ── Load ──────────────────────────────────────────────────────────────────
+	async function load() {
+		loading = true;
+		error = '';
+		try {
+			const data = await getComments(itemId);
+			comments = data.comments ?? [];
+		} catch {
+			error = 'Failed to load comments.';
+		} finally {
+			loading = false;
+		}
+	}
+
+	// Run on mount and when itemId changes
+	$effect(() => { load(); });
+
+	// ── Live updates via SSE ──────────────────────────────────────────────────
+	const unsubSSE = onSSE((event) => {
+		if (event.type !== 'comments') return;
+		const d = event.data as { item_id: number; type?: string };
+		if (d.item_id !== itemId) return;
+		// Reload the full comment list on any comment activity for this item
+		load();
+	});
+	onDestroy(unsubSSE);
+
+	// ── Post comment ──────────────────────────────────────────────────────────
+	async function submit(e: Event) {
+		e.preventDefault();
+		if (!text.trim()) return;
+		submitting = true;
+		try {
+			const res = await postComment({
+				itemId,
+				content: text.trim(),
+				replyTo: replyTo?.id ?? null
+			});
+			if (res.success) {
+				text = '';
+				replyTo = null;
+				await load();
+				flash('Comment posted', 'success');
+			} else {
+				flash(res.message ?? res.msg ?? 'Failed to post', 'error');
+			}
+		} catch {
+			flash('Network error', 'error');
+		} finally {
+			submitting = false;
+		}
+	}
+
+	// ── Delete comment ────────────────────────────────────────────────────────
+	async function handleDelete(comment: Comment) {
+		if (!confirm('Delete this comment?')) return;
+		try {
+			const res = await deleteComment(comment.id);
+			if (res.success) {
+				await load();
+				flash('Deleted', 'success');
+			} else {
+				flash(res.msg ?? 'Failed to delete', 'error');
+			}
+		} catch {
+			flash('Network error', 'error');
+		}
+	}
+
+	function canDelete(comment: Comment) {
+		return $session && ($isModOrAdmin || $session.user === comment.username);
+	}
+
+	function avatarSrc(comment: Comment): string {
+		if (comment.avatar_file) return `/a/${comment.avatar_file}`;
+		if (comment.avatar)      return `/t/${comment.avatar}.webp`;
+		return '/a/default.png';
+	}
+</script>
+
+<section class="flex flex-col gap-3">
+	<!-- Header -->
+	<div class="flex items-center justify-between">
+		<span class="text-xs font-semibold uppercase tracking-wider opacity-50">
+			Comments {#if comments.length > 0}<span class="opacity-60">({comments.length})</span>{/if}
+		</span>
+		<button onclick={load} class="btn btn-xs btn-ghost opacity-50 hover:opacity-100" aria-label="Refresh">
+			<i class="fa-solid fa-rotate-right text-xs" aria-hidden="true"></i>
+		</button>
+	</div>
+
+	<!-- Comment form -->
+	{#if $session}
+		<form onsubmit={submit} class="flex flex-col gap-2">
+			{#if replyTo}
+				<div class="flex items-center gap-2 text-xs bg-base-300 rounded px-2 py-1">
+					<i class="fa-solid fa-reply opacity-50" aria-hidden="true"></i>
+					<span class="opacity-70 truncate flex-1">Replying to {replyTo.display_name || replyTo.username}</span>
+					<button type="button" onclick={() => replyTo = null} class="opacity-50 hover:opacity-100">✕</button>
+				</div>
+			{/if}
+			<div class="flex gap-2">
+				<textarea
+					bind:value={text}
+					placeholder="Write a comment…"
+					rows="2"
+					class="textarea textarea-bordered flex-1 text-sm resize-none min-h-[3rem]"
+					disabled={submitting}
+					onkeydown={(e) => { if (e.key === 'Enter' && e.ctrlKey) submit(e); }}
+				></textarea>
+				<button
+					type="submit"
+					class="btn btn-primary btn-sm self-end"
+					disabled={submitting || !text.trim()}
+				>
+					{#if submitting}
+						<span class="loading loading-spinner loading-xs"></span>
+					{:else}
+						<i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
+					{/if}
+				</button>
+			</div>
+			<p class="text-xs opacity-30">Ctrl+Enter to submit</p>
+		</form>
+	{:else}
+		<p class="text-xs opacity-40">
+			<a href="/login" class="link link-primary">Log in</a> to comment.
+		</p>
+	{/if}
+
+	<!-- Comments list -->
+	{#if loading}
+		<div class="flex justify-center py-4">
+			<span class="loading loading-dots loading-sm opacity-40"></span>
+		</div>
+	{:else if error}
+		<p class="text-xs text-error opacity-70">{error}</p>
+	{:else if comments.length === 0}
+		<p class="text-xs opacity-30 text-center py-2">No comments yet.</p>
+	{:else}
+		<ul class="flex flex-col gap-2">
+			{#each comments as comment (comment.id)}
+				<li
+					class="group flex gap-2 text-sm {comment.is_deleted ? 'opacity-40' : ''}"
+					id="comment-{comment.id}"
+				>
+					<!-- Avatar -->
+					<a href="/user/{comment.username?.toLowerCase()}" class="flex-shrink-0 mt-0.5">
+						<div class="avatar">
+							<div class="w-7 rounded-full border border-base-300">
+								<img src={avatarSrc(comment)} alt={comment.username} loading="lazy" />
+							</div>
+						</div>
+					</a>
+
+					<!-- Body -->
+					<div class="flex-1 min-w-0">
+						<div class="flex items-baseline gap-1.5 flex-wrap">
+							<a
+								href="/user/{comment.username?.toLowerCase()}"
+								class="font-semibold text-xs hover:text-primary transition-colors"
+								style={comment.username_color ? `color: ${comment.username_color}` : ''}
+							>
+								{comment.display_name || comment.username}
+							</a>
+							<time
+								datetime={comment.stamp_full}
+								title={formatDate(comment.stamp_full)}
+								class="text-xs opacity-40"
+							>
+								{comment.stamp}
+							</time>
+						</div>
+
+						{#if comment.is_deleted}
+							<p class="text-xs italic opacity-50">— deleted —</p>
+						{:else}
+							<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+							<div class="prose prose-sm max-w-none text-xs leading-relaxed break-words">
+								{@html comment.content}
+							</div>
+						{/if}
+
+						<!-- Actions -->
+						{#if !comment.is_deleted}
+							<div class="flex items-center gap-2 mt-1 opacity-0 group-hover:opacity-100 transition-opacity">
+								{#if $session}
+									<button
+										onclick={() => { replyTo = comment; document.querySelector('textarea')?.focus(); }}
+										class="btn btn-ghost btn-xs gap-1 text-xs"
+									>
+										<i class="fa-solid fa-reply text-[10px]" aria-hidden="true"></i> Reply
+									</button>
+								{/if}
+								{#if canDelete(comment)}
+									<button
+										onclick={() => handleDelete(comment)}
+										class="btn btn-ghost btn-xs text-error gap-1 text-xs"
+									>
+										<i class="fa-solid fa-xmark text-[10px]" aria-hidden="true"></i> Delete
+									</button>
+								{/if}
+							</div>
+						{/if}
+					</div>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</section>

f0ck-svelte/src/lib/components/item/ItemCard.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { GridItem } from '$lib/types/item';
+	import type { ItemLink } from '$lib/types/item';
+
+	interface Props {
+		item: GridItem;
+		link: ItemLink;
+	}
+	let { item, link }: Props = $props();
+
+	// Build the item URL respecting the current filter context
+	const itemUrl = $derived(`${link.main}${item.id}${link.suffix}`);
+	const thumbUrl = $derived(`/t/${item.id}.webp`);
+
+	// Rating badge
+	const ratingClass = $derived(
+		item.tag === 'NSFL' ? 'badge-nsfl' :
+		item.tag === 'NSFW' ? 'badge-nsfw' :
+		item.tag === 'SFW'  ? 'badge-sfw'  : 'badge-unt'
+	);
+</script>
+
+<a
+	href={itemUrl}
+	data-sveltekit-preload-data="hover"
+	class="
+		group relative block overflow-hidden rounded-lg bg-base-200 border border-base-300
+		hover:border-primary/50 transition-all duration-200
+		hover:scale-[1.02] hover:shadow-lg hover:shadow-primary/10
+		{item.thumb_size === 2 ? 'col-span-2 row-span-2' : ''}
+	"
+>
+	<!-- Thumbnail -->
+	<div class="aspect-video w-full overflow-hidden bg-base-300">
+		<img
+			src={thumbUrl}
+			alt="Item {item.id}"
+			loading="lazy"
+			decoding="async"
+			class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+			onerror={(e) => { (e.target as HTMLImageElement).src = '/s/img/404.gif'; }}
+		/>
+	</div>
+
+	<!-- Overlay on hover -->
+	<div class="
+		absolute inset-0 bg-gradient-to-t from-base-100/90 via-transparent to-transparent
+		opacity-0 group-hover:opacity-100 transition-opacity duration-200
+		flex flex-col justify-end p-2 gap-1
+	">
+		<div class="flex items-center justify-between">
+			<span class="text-xs text-base-content/70 font-mono">#{item.id}</span>
+			<div class="flex items-center gap-1">
+				{#if item.is_oc}
+					<span class="badge badge-xs badge-accent">OC</span>
+				{/if}
+				{#if item.is_pinned}
+					<i class="fa-solid fa-thumbtack text-xs text-primary"></i>
+				{/if}
+				{#if item.xd_tier > 0}
+					<span class="badge badge-xs badge-warning font-mono">{item.xd_label}</span>
+				{/if}
+			</div>
+		</div>
+		{#if item.display_name || item.username}
+			<span class="text-xs text-base-content/60 truncate">
+				{item.display_name || item.username}
+			</span>
+		{/if}
+	</div>
+
+	<!-- Rating badge (always visible) -->
+	{#if item.tag}
+		<div class="absolute top-1.5 right-1.5">
+			<span class="badge badge-xs {ratingClass}">{item.tag}</span>
+		</div>
+	{/if}
+
+	<!-- Notification dot -->
+	{#if item.has_notification}
+		<div class="absolute top-1.5 left-1.5 w-2 h-2 rounded-full bg-primary animate-pulse"></div>
+	{/if}
+</a>

f0ck-svelte/src/lib/components/item/ItemView.svelte

@@ -0,0 +1,503 @@
+<script lang="ts">
+	import type { FullItem, Pagination, ItemLink, FavoriteUser, Tag } from '$lib/types/item';
+	import VideoPlayer    from '$lib/components/media/VideoPlayer.svelte';
+	import AudioPlayer    from '$lib/components/media/AudioPlayer.svelte';
+	import ImageViewer    from '$lib/components/media/ImageViewer.svelte';
+	import YouTubeEmbed   from '$lib/components/media/YouTubeEmbed.svelte';
+	import TagList        from '$lib/components/item/TagList.svelte';
+	import Comments       from '$lib/components/item/Comments.svelte';
+	import { mimeCategory } from '$lib/utils/mimeHelpers';
+	import { formatDate }   from '$lib/utils/timeago';
+	import { session, isModOrAdmin } from '$lib/stores/session';
+	import { goto, preloadData }     from '$app/navigation';
+	import { flash }                  from '$lib/stores/flash';
+	import { onSSE }                  from '$lib/stores/sse';
+	import { onDestroy }              from 'svelte';
+	import { broadcastPin }           from '$lib/stores/pin';
+	import {
+		toggleFav, addTag, deleteTag,
+		deleteItem, pinItem, unpinItem, cycleRating
+	} from '$lib/api/actions';
+
+	interface Props {
+		item: FullItem;
+		pagination: Pagination;
+		link: ItemLink;
+		isSubscribed?: boolean;
+	}
+	let { item, pagination, link, isSubscribed = false }: Props = $props();
+
+	// ── Reactive local state (mutable copies updated after actions) ───────────
+	let favorites = $state(item.favorites);
+	let tags      = $state(item.tags);
+	let isPinned  = $state(item.is_pinned);
+	let isOc      = $state(item.is_oc);
+	let isSfw     = $state(item.is_sfw);
+	let isNsfw    = $state(item.is_nsfw);
+	let isNsfl    = $state(item.is_nsfl);
+
+	// Sync when item prop changes (navigation)
+	$effect(() => {
+		favorites = item.favorites;
+		tags      = item.tags;
+		isPinned  = item.is_pinned;
+		isOc      = item.is_oc;
+		isSfw     = item.is_sfw;
+		isNsfw    = item.is_nsfw;
+		isNsfl    = item.is_nsfl;
+	});
+
+	// ── Live SSE updates ──────────────────────────────────────────────────────
+	const unsubSSE = onSSE((event) => {
+		if (event.type === 'favorites') {
+			const d = event.data as { item_id: number; favs: FavoriteUser[] };
+			if (d.item_id === item.id) favorites = d.favs;
+		} else if (event.type === 'tags') {
+			const d = event.data as { item_id: number; tags: Tag[] };
+			if (d.item_id === item.id) {
+				tags = d.tags;
+				// Re-derive rating state from the fresh tag list
+				const SFW_ID = 1, NSFW_ID = 2;
+				const ids = d.tags.map(t => t.id);
+				isSfw  = ids.includes(SFW_ID);
+				isNsfw = ids.includes(NSFW_ID);
+				isNsfl = !isSfw && !isNsfw && d.tags.some(t => t.badge === 'badge-nsfl');
+			}
+		} else if (event.type === 'delete_item') {
+			const d = event.data as { id: number };
+			if (d.id === item.id) goto('/');
+		}
+	});
+	onDestroy(unsubSSE);
+
+	const cat  = $derived(mimeCategory(item.mime));
+	const ytId = $derived(cat === 'youtube' ? item.dest.replace('yt:', '') : '');
+
+	const prevUrl = $derived(pagination.prev ? `${link.main}${pagination.prev}${link.suffix}` : null);
+	const nextUrl = $derived(pagination.next ? `${link.main}${pagination.next}${link.suffix}` : null);
+
+	const isFaved = $derived(favorites.some(f => f.user === $session?.user));
+
+	// Rating derived from local mutable state (so cycle updates instantly)
+	const ratingClass = $derived(
+		isNsfl ? 'badge-nsfl' : isNsfw ? 'badge-nsfw' : isSfw ? 'badge-sfw' : 'badge-unt'
+	);
+	const ratingLabel = $derived(
+		isNsfl ? 'NSFL' : isNsfw ? 'NSFW' : isSfw ? 'SFW' : '?'
+	);
+
+	const canManage = $derived(!!($session && ($session.admin || $session.is_moderator || $session.user === item.username)));
+	const isMod     = $derived(!!($session && ($session.admin || $session.is_moderator)));
+
+	// ── Cycle rating (mod-only) ───────────────────────────────────────────────
+	let ratingCycling = $state(false);
+	async function handleCycleRating() {
+		if (!isMod) return;
+		ratingCycling = true;
+		try {
+			const res = await cycleRating(item.id);
+			if (res.success) {
+				isSfw  = res.rating_class === 'sfw';
+				isNsfw = res.rating_class === 'nsfw';
+				isNsfl = res.rating_class === 'nsfl';
+				flash(`Rating → ${res.rating_label}`, 'success');
+			} else {
+				flash(res.msg ?? 'Failed to cycle rating', 'error');
+			}
+		} catch {
+			flash('Network error', 'error');
+		} finally {
+			ratingCycling = false;
+		}
+	}
+
+	// ── Keyboard navigation ───────────────────────────────────────────────────
+	function onKeydown(e: KeyboardEvent) {
+		if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+		if (e.key === 'ArrowLeft'  && prevUrl) goto(prevUrl);
+		if (e.key === 'ArrowRight' && nextUrl) goto(nextUrl);
+	}
+
+	// ── Tag input state ───────────────────────────────────────────────────────
+	let tagInput     = $state('');
+	let tagAdding    = $state(false);
+	let showTagInput = $state(false);
+	let suggestions  = $state<string[]>([]);
+
+	async function submitTag(e: Event) {
+		e.preventDefault();
+		const name = tagInput.trim();
+		if (!name) return;
+		tagAdding = true;
+		try {
+			const res = await addTag(item.id, name);
+			if (res.success) {
+				tags = res.tags;
+				tagInput = '';
+				showTagInput = false;
+				flash(`Tag "${name}" added`, 'success');
+			} else {
+				flash(res.msg ?? 'Failed to add tag', 'error');
+			}
+		} catch {
+			flash('Network error', 'error');
+		} finally {
+			tagAdding = false;
+		}
+	}
+
+	async function handleRemoveTag(tag: Tag) {
+		try {
+			const res = await deleteTag(item.id, tag.tag);
+			if (res.success) {
+				tags = res.tags;
+				flash(`Tag "${tag.tag}" removed`, 'success');
+			} else {
+				flash(res.msg ?? 'Failed to remove tag', 'error');
+			}
+		} catch {
+			flash('Network error', 'error');
+		}
+	}
+
+	// ── Favorite ──────────────────────────────────────────────────────────────
+	let favLoading = $state(false);
+	async function handleFav() {
+		if (!$session) { flash('Log in to favorite', 'warning'); return; }
+		favLoading = true;
+		try {
+			const res = await toggleFav(item.id);
+			if (res.success) favorites = res.favs;
+		} catch {
+			flash('Failed to update favorite', 'error');
+		} finally {
+			favLoading = false;
+		}
+	}
+
+	// ── Delete ────────────────────────────────────────────────────────────────
+	async function handleDelete() {
+		const reason = prompt('Reason for deletion (optional):') ?? '';
+		if (reason === null) return; // cancelled
+		try {
+			const res = await deleteItem(item.id, reason);
+			if (res.success) {
+				flash('Item deleted', 'success');
+				goto('/');
+			} else {
+				flash(res.msg ?? 'Delete failed', 'error');
+			}
+		} catch {
+			flash('Network error', 'error');
+		}
+	}
+
+	// ── Pin ───────────────────────────────────────────────────────────────────
+	async function handlePin() {
+		try {
+			const res = isPinned ? await unpinItem(item.id) : await pinItem(item.id);
+			if (res.success) {
+				isPinned = res.pinned;
+				broadcastPin(item.id, res.pinned); // patch grid card live
+				flash(res.pinned ? 'Pinned' : 'Unpinned', 'success');
+			} else {
+				flash('Pin failed', 'error');
+			}
+		} catch {
+			flash('Network error', 'error');
+		}
+	}
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+<div class="flex flex-col lg:flex-row gap-4 max-w-[1600px] mx-auto px-4 py-4">
+
+	<!-- ── LEFT SIDEBAR ────────────────────────────────────────────────────── -->
+	<aside class="lg:w-72 xl:w-80 flex-shrink-0 flex flex-col gap-3 order-2 lg:order-1">
+
+		<!-- Tags card -->
+		<div class="card bg-base-200 border border-base-300">
+			<div class="card-body p-3 gap-2">
+				<div class="flex items-center justify-between">
+					<span class="text-xs font-semibold uppercase tracking-wider opacity-50">Tags</span>
+					{#if $session}
+						<button
+							class="btn btn-xs btn-ghost"
+							onclick={() => showTagInput = !showTagInput}
+							aria-label="Add tag"
+						>
+							<i class="fa-solid fa-plus text-xs" aria-hidden="true"></i>
+						</button>
+					{/if}
+				</div>
+
+				<!-- Tag input -->
+				{#if showTagInput}
+					<form onsubmit={submitTag} class="flex gap-1">
+						<input
+							bind:value={tagInput}
+							type="text"
+							placeholder="tag name…"
+							class="input input-xs input-bordered flex-1"
+							disabled={tagAdding}
+							autocomplete="off"
+							autofocus
+						/>
+						<button
+							type="submit"
+							class="btn btn-xs btn-primary"
+							disabled={tagAdding || !tagInput.trim()}
+						>
+							{#if tagAdding}
+								<span class="loading loading-spinner loading-xs"></span>
+							{:else}
+								OK
+							{/if}
+						</button>
+					</form>
+				{/if}
+
+				{#if tags.length > 0}
+					<TagList {tags} canRemove={$isModOrAdmin} onRemove={handleRemoveTag} />
+				{:else}
+					<p class="text-xs opacity-40">No tags yet.</p>
+				{/if}
+			</div>
+		</div>
+
+		<!-- xD Score -->
+		{#if item.xd_tier > 0}
+			<div class="badge badge-warning badge-lg gap-1 self-start font-mono">
+				<i class="fa-solid fa-face-laugh-squint" aria-hidden="true"></i>
+				{item.xd_label}
+				<span class="opacity-70 text-xs">{item.xd_score}</span>
+			</div>
+		{/if}
+
+		<!-- Comments -->
+		<div class="card bg-base-200 border border-base-300">
+			<div class="card-body p-3">
+				<Comments itemId={item.id} />
+			</div>
+		</div>
+
+	</aside>
+
+	<!-- ── MAIN CONTENT ────────────────────────────────────────────────────── -->
+	<main class="flex-1 min-w-0 flex flex-col gap-3 order-1 lg:order-2">
+
+		{#if item.title}
+			<h1 class="text-lg font-semibold leading-snug">{item.title}</h1>
+		{/if}
+
+		<!-- Media + prev/next arrows -->
+		<div class="relative group">
+			<!-- Prev -->
+			<a
+				href={prevUrl ?? '#'}
+				aria-disabled={!prevUrl}
+				onmouseenter={() => prevUrl && preloadData(prevUrl)}
+				class="absolute left-0 top-0 bottom-0 w-16 z-10 flex items-center justify-start pl-2
+				       opacity-0 group-hover:opacity-100 transition-opacity
+				       {!prevUrl ? 'pointer-events-none' : ''}"
+			>
+				<div class="btn btn-circle btn-sm bg-base-100/80 backdrop-blur border-0">
+					<i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
+				</div>
+			</a>
+
+			<div class="rounded-lg overflow-hidden bg-base-300">
+				{#if cat === 'youtube'}
+					<YouTubeEmbed videoId={ytId} />
+				{:else if cat === 'video'}
+					<VideoPlayer src={item.dest} mime={item.mime} />
+				{:else if cat === 'audio'}
+					<AudioPlayer src={item.dest} mime={item.mime} coverart={item.coverart} />
+				{:else if cat === 'image'}
+					<ImageViewer src={item.dest} alt="Item {item.id}" />
+				{:else if cat === 'pdf'}
+					<iframe src="{item.dest}#toolbar=0" class="w-full h-[75dvh] border-0" title="PDF"></iframe>
+				{:else}
+					<div class="flex flex-col items-center justify-center p-12 gap-4">
+						<i class="fa-solid fa-file-zipper text-5xl opacity-40" aria-hidden="true"></i>
+						<a href={item.dest} download class="btn btn-primary gap-2">
+							<i class="fa-solid fa-download" aria-hidden="true"></i> Download
+						</a>
+					</div>
+				{/if}
+			</div>
+
+			<!-- Next -->
+			<a
+				href={nextUrl ?? '#'}
+				aria-disabled={!nextUrl}
+				onmouseenter={() => nextUrl && preloadData(nextUrl)}
+				class="absolute right-0 top-0 bottom-0 w-16 z-10 flex items-center justify-end pr-2
+				       opacity-0 group-hover:opacity-100 transition-opacity
+				       {!nextUrl ? 'pointer-events-none' : ''}"
+			>
+				<div class="btn btn-circle btn-sm bg-base-100/80 backdrop-blur border-0">
+					<i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
+				</div>
+			</a>
+		</div>
+
+		<!-- Metadata / action bar -->
+		<div class="card bg-base-200 border border-base-300">
+			<div class="card-body p-3 gap-2">
+
+				<!-- Prev / Random / Next -->
+				<div class="flex items-center justify-between text-sm">
+					<a href={prevUrl ?? '#'} aria-disabled={!prevUrl}
+					   onmouseenter={() => prevUrl && preloadData(prevUrl)}
+					   class="btn btn-sm btn-ghost gap-1 {!prevUrl ? 'opacity-30 pointer-events-none' : ''}">
+						<i class="fa-solid fa-arrow-left" aria-hidden="true"></i> Prev
+					</a>
+					<a href="/random" class="btn btn-sm btn-ghost" aria-label="Random item">
+						<i class="fa-solid fa-shuffle" aria-hidden="true"></i>
+					</a>
+					<a href={nextUrl ?? '#'} aria-disabled={!nextUrl}
+					   onmouseenter={() => nextUrl && preloadData(nextUrl)}
+					   class="btn btn-sm btn-ghost gap-1 {!nextUrl ? 'opacity-30 pointer-events-none' : ''}">
+						Next <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
+					</a>
+				</div>
+
+				<div class="divider my-0"></div>
+
+				<!-- Item metadata row -->
+				<div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
+					<a href="/{item.id}" class="font-mono text-xs opacity-60 hover:opacity-100 transition-opacity">
+						#{item.id}
+					</a>
+					{#if isMod}
+					<button
+						onclick={handleCycleRating}
+						disabled={ratingCycling}
+						class="badge badge-sm {ratingClass} cursor-pointer hover:brightness-125 transition-all border-0 gap-1"
+						title="Cycle rating: {ratingLabel} → {isNsfl ? 'SFW' : isNsfw ? 'NSFL' : isSfw ? 'NSFW' : 'SFW'}"
+						aria-label="Cycle rating"
+					>
+						{#if ratingCycling}
+							<span class="loading loading-spinner loading-xs"></span>
+						{:else}
+							<i class="fa-solid fa-rotate text-[9px]" aria-hidden="true"></i>
+						{/if}
+						{ratingLabel}
+					</button>
+				{:else}
+					<span class="badge badge-sm {ratingClass}">{ratingLabel}</span>
+				{/if}
+					<a href="/user/{item.username.toLowerCase()}"
+					   class="font-medium hover:text-primary transition-colors"
+					   style={item.author_color ? `color: ${item.author_color}` : ''}>
+						{item.author_display_name || item.username}
+					</a>
+					{#if isOc}
+						<span class="badge badge-sm badge-accent">OC</span>
+					{/if}
+					{#if isPinned}
+						<i class="fa-solid fa-thumbtack text-primary text-xs" aria-label="Pinned"></i>
+					{/if}
+					{#if item.primaryHall}
+						<a href="/h/{item.primaryHall.slug}" class="badge badge-sm badge-neutral gap-1 hover:brightness-125">
+							<i class="fa-solid fa-layer-group text-[10px]" aria-hidden="true"></i>
+							{item.primaryHall.name}
+						</a>
+					{/if}
+					<time datetime={item.timestamp.timefull} title={formatDate(item.timestamp.timefull)} class="text-xs opacity-50">
+						{item.timestamp.timeago}
+					</time>
+				</div>
+
+				<!-- Action buttons -->
+				<div class="flex items-center flex-wrap gap-1 pt-1">
+					<!-- Favorite -->
+					<button
+						onclick={handleFav}
+						disabled={favLoading || !$session}
+						class="btn btn-ghost btn-xs gap-1 {isFaved ? 'text-error' : ''}"
+						title="{isFaved ? 'Unfavorite' : 'Favorite'}"
+						aria-label="{isFaved ? 'Remove favorite' : 'Add favorite'}"
+					>
+						{#if favLoading}
+							<span class="loading loading-spinner loading-xs"></span>
+						{:else}
+							<i class="fa-{isFaved ? 'solid' : 'regular'} fa-heart" aria-hidden="true"></i>
+						{/if}
+						{#if favorites.length > 0}
+							<span class="text-xs">{favorites.length}</span>
+						{/if}
+					</button>
+
+					<!-- Subscribe (stub) -->
+					<button class="btn btn-ghost btn-xs" title="{isSubscribed ? 'Subscribed' : 'Subscribe'}" aria-label="Subscribe">
+						<i class="fa-{isSubscribed ? 'solid' : 'regular'} fa-bell" aria-hidden="true"></i>
+					</button>
+
+					<!-- Link copy -->
+					<button
+						class="btn btn-ghost btn-xs"
+						title="Copy link"
+						aria-label="Copy link"
+						onclick={() => {
+							navigator.clipboard.writeText(location.href);
+							flash('Link copied!', 'success');
+						}}
+					>
+						<i class="fa-solid fa-link text-xs" aria-hidden="true"></i>
+					</button>
+
+					<!-- Mod / owner actions -->
+					{#if canManage}
+						<div class="flex items-center gap-1 ml-auto">
+							<!-- Pin/Unpin -->
+							<button
+								onclick={handlePin}
+								class="btn btn-ghost btn-xs {isPinned ? 'text-primary' : ''}"
+								title="{isPinned ? 'Unpin' : 'Pin'}"
+								aria-label="{isPinned ? 'Unpin item' : 'Pin item'}"
+							>
+								<i class="fa-solid fa-thumbtack text-xs" aria-hidden="true"></i>
+							</button>
+							<!-- Delete -->
+							<button
+								onclick={handleDelete}
+								class="btn btn-ghost btn-xs text-error"
+								title="Delete"
+								aria-label="Delete item"
+							>
+								<i class="fa-solid fa-trash text-xs" aria-hidden="true"></i>
+							</button>
+						</div>
+					{/if}
+				</div>
+
+				<!-- Favorites avatars -->
+				{#if favorites.length > 0}
+					<div class="flex flex-wrap gap-1 pt-1">
+						{#each favorites as fav (fav.user)}
+							<a href="/user/{fav.user.toLowerCase()}" title={fav.display_name || fav.user} class="tooltip" data-tip={fav.display_name || fav.user}>
+								<div class="avatar">
+									<div class="w-7 rounded-full border-2 {fav.username_color ? '' : 'border-base-300'}"
+									     style={fav.username_color ? `border-color: ${fav.username_color}` : ''}>
+										{#if fav.avatar_file}
+											<img src="/a/{fav.avatar_file}" alt={fav.user} loading="lazy" />
+										{:else if fav.avatar}
+											<img src="/t/{fav.avatar}.webp" alt={fav.user} loading="lazy" />
+										{:else}
+											<img src="/a/default.png" alt={fav.user} />
+										{/if}
+									</div>
+								</div>
+							</a>
+						{/each}
+					</div>
+				{/if}
+
+			</div>
+		</div>
+	</main>
+
+</div>

f0ck-svelte/src/lib/components/item/TagList.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Tag } from '$lib/types/item';
+
+	interface Props {
+		tags: Tag[];
+		canRemove?: boolean;
+		onRemove?: (tag: Tag) => void;
+	}
+	let { tags, canRemove = false, onRemove }: Props = $props();
+
+	// Map badge class names from the existing tag badge values
+	const badgeClass = (badge: string) => {
+		if (badge === 'badge-sfw')  return 'badge-sfw';
+		if (badge === 'badge-nsfw') return 'badge-nsfw';
+		if (badge === 'badge-nsfl') return 'badge-nsfl';
+		return 'badge-neutral';
+	};
+</script>
+
+<div class="flex flex-wrap gap-1.5">
+	{#each tags as tag (tag.id)}
+		<span class="badge {badgeClass(tag.badge)} gap-1 cursor-pointer hover:brightness-125 transition-all">
+			<a href="/tag/{encodeURIComponent(tag.normalized)}" class="no-underline">
+				{tag.tag}
+			</a>
+			{#if canRemove && onRemove}
+				<button
+					class="hover:text-error ml-0.5 transition-colors"
+					onclick={() => onRemove?.(tag)}
+					aria-label="Remove tag {tag.tag}"
+				>
+					<i class="fa-solid fa-xmark text-[10px]"></i>
+				</button>
+			{/if}
+		</span>
+	{/each}
+</div>

f0ck-svelte/src/lib/components/layout/Navbar.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { session, loggedIn } from '$lib/stores/session';
+	import { filterLabel, activeMode, activeRatings } from '$lib/stores/preferences';
+	import { goto } from '$app/navigation';
+	import { getRandom } from '$lib/api/items';
+	import { flash } from '$lib/stores/flash';
+	import { get } from 'svelte/store';
+
+	async function goRandom() {
+		try {
+			const res = await getRandom();
+			if (res.success) goto(res.url);
+		} catch {
+			flash('Could not fetch a random item', 'error');
+		}
+	}
+
+	// In Svelte 5 runes mode, subscribe to legacy stores via $state + store.subscribe
+	// OR just use them in the template with $ prefix — both work, but $ in templates
+	// is fine for Svelte writable stores even in runes mode.
+</script>
+
+<nav class="navbar bg-base-200/80 backdrop-blur-md border-b border-base-300 sticky top-0 z-50 px-4 gap-2">
+	<!-- Logo / Home -->
+	<div class="navbar-start gap-2">
+		<a href="/" class="flex items-center gap-2 group">
+			<span class="text-xl font-black tracking-tight text-primary group-hover:text-accent transition-colors">
+				f0ckm
+			</span>
+		</a>
+	</div>
+
+	<!-- Center: actions -->
+	<div class="navbar-center gap-1 hidden sm:flex">
+		<!-- Random button -->
+		<button
+			class="btn btn-ghost btn-sm gap-1"
+			onclick={goRandom}
+			title="Random item"
+			aria-label="Random item"
+		>
+			<i class="fa-solid fa-shuffle text-sm" aria-hidden="true"></i>
+			<span class="hidden md:inline">Random</span>
+		</button>
+
+		<!-- Rating filter badge -->
+		<div class="dropdown dropdown-bottom">
+			<button
+				tabindex="0"
+				class="badge badge-lg cursor-pointer font-mono select-none badge-neutral"
+				aria-label="Content filter"
+			>
+				{$filterLabel}
+			</button>
+		</div>
+	</div>
+
+	<!-- Right: user area -->
+	<div class="navbar-end gap-2">
+		{#if $loggedIn}
+			<a href="/upload" class="btn btn-primary btn-sm gap-1" title="Upload">
+				<i class="fa-solid fa-upload text-sm" aria-hidden="true"></i>
+				<span class="hidden sm:inline">Upload</span>
+			</a>
+			<!-- Avatar / user menu -->
+			<div class="dropdown dropdown-end">
+				<button tabindex="0" class="btn btn-ghost btn-circle avatar placeholder" aria-label="User menu">
+					<div class="bg-neutral text-neutral-content rounded-full w-8 grid place-items-center">
+						{#if $session?.avatar_file}
+							<img src="/a/{$session.avatar_file}" alt="avatar" class="rounded-full" />
+						{:else if $session?.avatar}
+							<img src="/t/{$session.avatar}.webp" alt="avatar" class="rounded-full" />
+						{:else}
+							<span class="text-xs font-bold">{($session?.user ?? '?').charAt(0).toUpperCase()}</span>
+						{/if}
+					</div>
+				</button>
+				<ul tabindex="0" class="dropdown-content menu bg-base-200 rounded-box z-50 w-52 p-2 shadow-xl border border-base-300">
+					<li class="menu-title text-xs opacity-60">{$session?.display_name || $session?.user}</li>
+					<li><a href="/user/{$session?.user}"><i class="fa-solid fa-user w-4" aria-hidden="true"></i> Profile</a></li>
+					<li><a href="/settings"><i class="fa-solid fa-gear w-4" aria-hidden="true"></i> Settings</a></li>
+					{#if $session?.admin || $session?.is_moderator}
+						<li><a href="/admin"><i class="fa-solid fa-shield-halved w-4" aria-hidden="true"></i> Admin</a></li>
+					{/if}
+					<li class="divider my-1"></li>
+					<li>
+						<form method="post" action="/logout">
+							<button type="submit" class="text-error w-full text-left">
+								<i class="fa-solid fa-right-from-bracket w-4" aria-hidden="true"></i> Logout
+							</button>
+						</form>
+					</li>
+				</ul>
+			</div>
+		{:else}
+			<a href="/login" class="btn btn-ghost btn-sm">Login</a>
+			<a href="/register" class="btn btn-primary btn-sm">Register</a>
+		{/if}
+	</div>
+</nav>

f0ck-svelte/src/lib/components/media/AudioPlayer.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	interface Props {
+		src: string;
+		mime: string;
+		coverart?: string;
+	}
+	let { src, mime, coverart = '/s/img/music.webp' }: Props = $props();
+</script>
+
+<div
+	class="relative w-full flex items-center justify-center rounded-lg overflow-hidden bg-black"
+	style="background-image: url('{coverart}'); background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 320px;"
+>
+	<!-- Dark overlay over coverart -->
+	<div class="absolute inset-0 bg-black/60"></div>
+	<!-- svelte-ignore a11y-media-has-caption -->
+	<audio
+		{src}
+		loop
+		controls
+		preload="auto"
+		class="relative z-10 w-full max-w-md"
+	></audio>
+</div>

f0ck-svelte/src/lib/components/media/ImageViewer.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	interface Props {
+		src: string;
+		alt?: string;
+	}
+	let { src, alt = 'Image' }: Props = $props();
+
+	let expanded = $state(false);
+	let imgEl = $state<HTMLImageElement | undefined>();
+
+	function toggleExpand() {
+		expanded = !expanded;
+	}
+
+	// ESC to close modal
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape' && expanded) expanded = false;
+	}
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+<div class="relative flex items-center justify-center rounded-lg overflow-hidden bg-base-300 cursor-zoom-in">
+	<img
+		bind:this={imgEl}
+		{src}
+		{alt}
+		loading="lazy"
+		decoding="async"
+		onclick={toggleExpand}
+		class="max-h-[80dvh] w-auto max-w-full object-contain select-none"
+	/>
+	<button
+		class="absolute bottom-2 right-2 btn btn-xs btn-ghost opacity-60 hover:opacity-100"
+		onclick={toggleExpand}
+		aria-label="Expand"
+	>
+		<i class="fa-solid fa-expand"></i>
+	</button>
+</div>
+
+<!-- Fullscreen modal -->
+{#if expanded}
+	<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+	<div
+		class="fixed inset-0 z-[9998] bg-black/95 flex items-center justify-center cursor-zoom-out"
+		onclick={toggleExpand}
+	>
+		<img {src} {alt} class="max-h-dvh max-w-dvw object-contain" />
+		<button
+			class="absolute top-4 right-4 btn btn-circle btn-ghost text-white"
+			onclick={toggleExpand}
+			aria-label="Close"
+		>
+			<i class="fa-solid fa-xmark text-lg"></i>
+		</button>
+	</div>
+{/if}

f0ck-svelte/src/lib/components/media/VideoPlayer.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	interface Props {
+		src: string;
+		mime: string;
+		autoplay?: boolean;
+	}
+	let { src, mime, autoplay = false }: Props = $props();
+
+	let videoEl = $state<HTMLVideoElement | undefined>();
+
+	// Keyboard shortcut: space to toggle play/pause
+	function onKeydown(e: KeyboardEvent) {
+		if (e.target !== document.body) return;
+		if (e.key === ' ') {
+			e.preventDefault();
+			if (videoEl?.paused) videoEl.play();
+			else videoEl?.pause();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+<div class="relative w-full bg-black flex items-center justify-center rounded-lg overflow-hidden">
+	<!-- svelte-ignore a11y-media-has-caption -->
+	<video
+		bind:this={videoEl}
+		{src}
+		{autoplay}
+		loop
+		playsinline
+		controls
+		class="max-h-[80dvh] w-full object-contain"
+		preload="auto"
+	></video>
+</div>

f0ck-svelte/src/lib/components/media/YouTubeEmbed.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	interface Props {
+		videoId: string; // e.g. "dQw4w9WgXcQ"
+	}
+	let { videoId }: Props = $props();
+</script>
+
+<div class="relative w-full rounded-lg overflow-hidden bg-black" style="padding-top: 56.25%">
+	<iframe
+		class="absolute inset-0 w-full h-full"
+		src="https://www.youtube.com/embed/{videoId}"
+		title="YouTube video"
+		frameborder="0"
+		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+		referrerpolicy="strict-origin-when-cross-origin"
+		allowfullscreen
+	></iframe>
+</div>

f0ck-svelte/src/lib/components/ui/FlashMessages.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { flashes, dismiss, type FlashType } from '$lib/stores/flash';
+
+	const iconMap: Record<FlashType, string> = {
+		info:    'fa-solid fa-circle-info',
+		success: 'fa-solid fa-circle-check',
+		warning: 'fa-solid fa-triangle-exclamation',
+		error:   'fa-solid fa-circle-xmark'
+	};
+
+	const alertMap: Record<FlashType, string> = {
+		info:    'alert-info',
+		success: 'alert-success',
+		warning: 'alert-warning',
+		error:   'alert-error'
+	};
+</script>
+
+<div class="fixed bottom-4 left-4 z-[9999] flex flex-col-reverse gap-2 pointer-events-none">
+	{#each $flashes as msg (msg.id)}
+		<div
+			role="alert"
+			class="alert {alertMap[msg.type]} pointer-events-auto shadow-lg min-w-64 max-w-sm
+			       animate-[slide-up_0.2s_ease-out]"
+		>
+			<i class="{iconMap[msg.type]}"></i>
+			<span class="flex-1 text-sm">{msg.text}</span>
+			<button
+				class="btn btn-ghost btn-xs"
+				onclick={() => dismiss(msg.id)}
+				aria-label="Dismiss"
+			>✕</button>
+		</div>
+	{/each}
+</div>
+
+<style>
+	@keyframes slide-up {
+		from { opacity: 0; transform: translateY(8px); }
+		to   { opacity: 1; transform: translateY(0); }
+	}
+</style>

f0ck-svelte/src/lib/components/ui/Pagination.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Pagination, ItemLink } from '$lib/types/item';
+
+	interface Props {
+		pagination: Pagination;
+		link: ItemLink;
+	}
+	let { pagination, link }: Props = $props();
+
+	const base = $derived(link.main + link.path);
+	const suffix = $derived(link.suffix ?? '');
+</script>
+
+{#if pagination.end > 1}
+<nav class="flex justify-center items-center gap-1 py-4" aria-label="Pagination">
+	<!-- Prev -->
+	<a
+		href={pagination.prev ? `${base}${pagination.prev}${suffix}` : undefined}
+		class="btn btn-sm btn-ghost {!pagination.prev ? 'btn-disabled opacity-30' : ''}"
+		aria-disabled={!pagination.prev}
+		aria-label="Previous page"
+	>
+		<i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
+	</a>
+
+	<!-- First page -->
+	{#if pagination.cheat[0] > 1}
+		<a href="{base}1{suffix}" class="btn btn-sm btn-ghost">1</a>
+		{#if pagination.cheat[0] > 2}
+			<span class="px-1 opacity-40">…</span>
+		{/if}
+	{/if}
+
+	<!-- Page range -->
+	{#each pagination.cheat as p}
+		<a
+			href="{base}{p}{suffix}"
+			class="btn btn-sm {p === pagination.current ? 'btn-primary' : 'btn-ghost'}"
+		>
+			{p}
+		</a>
+	{/each}
+
+	<!-- Last page -->
+	{#if pagination.cheat[pagination.cheat.length - 1] < pagination.end}
+		{#if pagination.cheat[pagination.cheat.length - 1] < pagination.end - 1}
+			<span class="px-1 opacity-40">…</span>
+		{/if}
+		<a href="{base}{pagination.end}{suffix}" class="btn btn-sm btn-ghost">{pagination.end}</a>
+	{/if}
+
+	<!-- Next -->
+	<a
+		href={pagination.next ? `${base}${pagination.next}${suffix}` : undefined}
+		class="btn btn-sm btn-ghost {!pagination.next ? 'btn-disabled opacity-30' : ''}"
+		aria-disabled={!pagination.next}
+		aria-label="Next page"
+	>
+		<i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
+	</a>
+</nav>
+{/if}

f0ck-svelte/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

f0ck-svelte/src/lib/stores/flash.ts

@@ -0,0 +1,28 @@
+import { writable } from 'svelte/store';
+
+// ── Flash message type ────────────────────────────────────────────────────────
+export type FlashType = 'info' | 'success' | 'warning' | 'error';
+
+export interface FlashMessage {
+	id: number;
+	text: string;
+	type: FlashType;
+}
+
+let _nextId = 0;
+export const flashes = writable<FlashMessage[]>([]);
+
+/**
+ * Show a flash message. Auto-dismisses after `duration` ms.
+ * Returns the message ID so callers can dismiss early if needed.
+ */
+export function flash(text: string, type: FlashType = 'info', duration = 2500): number {
+	const id = ++_nextId;
+	flashes.update((q) => [...q, { id, text, type }]);
+	setTimeout(() => dismiss(id), duration);
+	return id;
+}
+
+export function dismiss(id: number): void {
+	flashes.update((q) => q.filter((m) => m.id !== id));
+}

f0ck-svelte/src/lib/stores/pin.ts

@@ -0,0 +1,20 @@
+/**
+ * Lightweight broadcast store for pin/unpin events.
+ * ItemView fires it after a successful pin action;
+ * the main grid subscribes to patch the item card immediately.
+ */
+import { writable } from 'svelte/store';
+
+export interface PinEvent {
+	itemId: number;
+	pinned: boolean;
+}
+
+// Null when idle, set to an event when pin/unpin succeeds
+export const pinEvent = writable<PinEvent | null>(null);
+
+export function broadcastPin(itemId: number, pinned: boolean) {
+	pinEvent.set({ itemId, pinned });
+	// Reset so subsequent identical events still trigger subscribers
+	setTimeout(() => pinEvent.set(null), 0);
+}

f0ck-svelte/src/lib/stores/preferences.ts

@@ -0,0 +1,50 @@
+import { writable, derived, get } from 'svelte/store';
+
+// ── Content mode ─────────────────────────────────────────────────────────────
+// 0=SFW, 1=NSFW, 2=untagged, 3=ALL, 4=NSFL
+export const activeMode = writable<number>(3);
+
+// ── Multi-rating filter ───────────────────────────────────────────────────────
+// When non-empty, overrides activeMode for filtering (OR logic across selected ratings)
+export type Rating = 'sfw' | 'nsfw' | 'nsfl' | 'untagged';
+export const activeRatings = writable<Rating[]>([]);
+
+// ── MIME filter ───────────────────────────────────────────────────────────────
+export type MimeFilter = 'video' | 'audio' | 'image' | 'flash';
+export const activeMimes = writable<MimeFilter[]>([]);
+
+// ── Derived: ratings query param string for API calls ─────────────────────────
+export const ratingsParam = derived(activeRatings, ($r) => $r.join('|') || null);
+
+// ── Derived: readable label for the filter badge ─────────────────────────────
+export const filterLabel = derived(
+	[activeMode, activeRatings],
+	([$mode, $ratings]) => {
+		if ($ratings.length > 0) {
+			const abbr: Record<Rating, string> = { sfw: 'S', nsfw: 'N', nsfl: 'L', untagged: 'U' };
+			return $ratings.map((r) => abbr[r]).join('+');
+		}
+		const labels: Record<number, string> = { 0: 'SFW', 1: 'NSFW', 2: 'UNT', 3: 'ALL', 4: 'NSFL' };
+		return labels[$mode] ?? 'ALL';
+	}
+);
+
+// ── Persistence helpers ───────────────────────────────────────────────────────
+// Call these after receiving the session from the server to hydrate from cookie/session.
+export function initPreferences(opts: { mode: number; ratings?: string }) {
+	activeMode.set(opts.mode ?? 3);
+	if (opts.ratings) {
+		const parsed = opts.ratings.split(/[|,]/).filter((r): r is Rating =>
+			['sfw', 'nsfw', 'nsfl', 'untagged'].includes(r)
+		);
+		activeRatings.set(parsed);
+	}
+}
+
+/** Build a mode number → server mode number (for API calls when using multi-rating). */
+export function getServerMode(): number {
+	const ratings = get(activeRatings);
+	if (ratings.length === 0) return get(activeMode);
+	const single: Record<Rating, number> = { sfw: 0, nsfw: 1, nsfl: 4, untagged: 2 };
+	return ratings.length === 1 ? (single[ratings[0]] ?? 3) : 3;
+}

f0ck-svelte/src/lib/stores/session.ts

@@ -0,0 +1,11 @@
+import { writable, derived } from 'svelte/store';
+import type { SessionUser } from '$lib/types/session';
+
+/** The current authenticated user, or null if not logged in. */
+export const session = writable<SessionUser | null>(null);
+
+/** Convenience derived — true when logged in. */
+export const loggedIn = derived(session, ($s) => $s !== null);
+
+/** True when the user has admin or moderator role. */
+export const isModOrAdmin = derived(session, ($s) => !!($s?.admin || $s?.is_moderator));

f0ck-svelte/src/lib/stores/sse.ts

@@ -0,0 +1,126 @@
+/**
+ * SSE store — connects to the backend's /api/notifications/stream endpoint.
+ *
+ * Emits typed events that components subscribe to with `onSSE()`.
+ * Auto-reconnects with exponential backoff on disconnect.
+ * Client-only: never runs during SSR.
+ */
+import { writable, get } from 'svelte/store';
+import { browser } from '$app/environment';
+
+// ── Event types broadcast by the backend ─────────────────────────────────────
+export interface SSEComment {
+	type: 'comment' | 'delete';
+	id?: number;
+	item_id: number;
+	comment_id?: number;
+	body?: string;
+	username?: string;
+	display_name?: string | null;
+	avatar?: string | null;
+	avatar_file?: string | null;
+	username_color?: string | null;
+	created_at?: string;
+	parent_id?: number | null;
+	xd_score?: number | null;
+}
+
+export interface SSEFavorites {
+	item_id: number;
+	favs: Array<{
+		user: string;
+		display_name: string | null;
+		avatar: string | null;
+		avatar_file: string | null;
+		username_color: string | null;
+	}>;
+}
+
+export interface SSETags {
+	item_id: number;
+	fresh: boolean;
+	tags: unknown[];
+}
+
+export interface SSENewItem {
+	id: number;
+	mime?: string;
+}
+
+export interface SSEDeleteItem {
+	id: number;
+}
+
+export interface SSEEvent {
+	type: 'comments' | 'favorites' | 'tags' | 'new_item' | 'delete_item' | 'notify' | 'activity' | string;
+	data: SSEComment | SSEFavorites | SSETags | SSENewItem | SSEDeleteItem | Record<string, unknown>;
+}
+
+// ── Connection state ──────────────────────────────────────────────────────────
+export type SSEState = 'disconnected' | 'connecting' | 'connected' | 'error';
+export const sseState = writable<SSEState>('disconnected');
+
+// ── Listener registry ─────────────────────────────────────────────────────────
+type SSEListener = (event: SSEEvent) => void;
+const listeners = new Set<SSEListener>();
+
+/** Subscribe to SSE events. Returns an unsubscribe function. */
+export function onSSE(fn: SSEListener): () => void {
+	listeners.add(fn);
+	return () => listeners.delete(fn);
+}
+
+// ── Internal connection state ─────────────────────────────────────────────────
+let es: EventSource | null = null;
+let retryTimer: ReturnType<typeof setTimeout> | null = null;
+let retryDelay = 2000;
+const MAX_RETRY = 30_000;
+const tabId = browser ? Math.random().toString(36).slice(2) : 'ssr';
+
+function dispatch(raw: SSEEvent) {
+	for (const fn of listeners) {
+		try { fn(raw); } catch (e) { console.error('[SSE] listener error', e); }
+	}
+}
+
+function scheduleRetry() {
+	if (retryTimer) clearTimeout(retryTimer);
+	retryTimer = setTimeout(connect, retryDelay);
+	retryDelay = Math.min(retryDelay * 1.5, MAX_RETRY);
+}
+
+export function connect() {
+	if (!browser) return;
+	if (es) { es.close(); es = null; }
+
+	sseState.set('connecting');
+	es = new EventSource(`/api/notifications/stream?tabId=${tabId}`);
+
+	es.onopen = () => {
+		sseState.set('connected');
+		retryDelay = 2000; // reset backoff on successful connect
+	};
+
+	es.onmessage = (e) => {
+		try {
+			const data = JSON.parse(e.data) as SSEEvent;
+			dispatch(data);
+		} catch {
+			// ignore malformed frames
+		}
+	};
+
+	es.onerror = () => {
+		sseState.set('error');
+		es?.close();
+		es = null;
+		scheduleRetry();
+	};
+}
+
+export function disconnect() {
+	if (retryTimer) { clearTimeout(retryTimer); retryTimer = null; }
+	es?.close();
+	es = null;
+	sseState.set('disconnected');
+}

f0ck-svelte/src/lib/stores/ws.ts

@@ -0,0 +1,81 @@
+import { writable } from 'svelte/store';
+
+// ── WebSocket message types ───────────────────────────────────────────────────
+export type WSMessage =
+	| { type: 'pong' }
+	| { type: 'notification'; count: number; item?: unknown }
+	| { type: 'comment:new'; itemId: number; comment: unknown }
+	| { type: 'comment:delete'; itemId: number; commentId: number }
+	| { type: 'item:tag_added'; itemId: number; tag: unknown }
+	| { type: 'item:favorited'; itemId: number; user: string }
+	| { type: 'global:activity'; payload: unknown };
+
+// ── Store ─────────────────────────────────────────────────────────────────────
+export const wsConnected = writable(false);
+
+let _socket: WebSocket | null = null;
+let _reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+let _reconnectDelay = 1000;
+
+const _listeners = new Map<string, Set<(msg: WSMessage) => void>>();
+
+/** Connect to the WebSocket server. Call once from the root layout. */
+export function wsConnect(): void {
+	if (typeof window === 'undefined') return; // SSR guard
+	if (_socket?.readyState === WebSocket.OPEN) return;
+
+	const proto = location.protocol === 'https:' ? 'wss' : 'ws';
+	_socket = new WebSocket(`${proto}://${location.host}/ws`);
+
+	_socket.onopen = () => {
+		wsConnected.set(true);
+		_reconnectDelay = 1000; // reset backoff on successful connect
+		_ping();
+	};
+
+	_socket.onmessage = (e) => {
+		try {
+			const msg = JSON.parse(e.data) as WSMessage;
+			// Dispatch to typed listeners
+			_listeners.get(msg.type)?.forEach((fn) => fn(msg));
+			_listeners.get('*')?.forEach((fn) => fn(msg));
+		} catch {
+			// ignore malformed messages
+		}
+	};
+
+	_socket.onclose = () => {
+		wsConnected.set(false);
+		_socket = null;
+		// Exponential backoff reconnect
+		if (_reconnectTimer) clearTimeout(_reconnectTimer);
+		_reconnectTimer = setTimeout(() => {
+			_reconnectDelay = Math.min(_reconnectDelay * 2, 30_000);
+			wsConnect();
+		}, _reconnectDelay);
+	};
+
+	_socket.onerror = () => {
+		_socket?.close();
+	};
+}
+
+/** Send a typed message to the server. */
+export function wsSend(msg: object): void {
+	if (_socket?.readyState === WebSocket.OPEN) {
+		_socket.send(JSON.stringify(msg));
+	}
+}
+
+/** Subscribe to a specific message type. Returns an unsubscribe function. */
+export function wsOn(type: string, fn: (msg: WSMessage) => void): () => void {
+	if (!_listeners.has(type)) _listeners.set(type, new Set());
+	_listeners.get(type)!.add(fn);
+	return () => _listeners.get(type)?.delete(fn);
+}
+
+let _pingTimer: ReturnType<typeof setInterval> | null = null;
+function _ping() {
+	if (_pingTimer) clearInterval(_pingTimer);
+	_pingTimer = setInterval(() => wsSend({ type: 'ping' }), 25_000);
+}

f0ck-svelte/src/lib/types/comment.ts

@@ -0,0 +1,21 @@
+export interface Comment {
+	id: number;
+	item_id: number;
+	username: string;
+	display_name: string | null;
+	avatar: string | null;
+	avatar_file: string | null;
+	username_color: string | null;
+	content: string; // may be HTML (server-rendered)
+	stamp: string;   // human-readable relative time
+	stamp_full: string; // ISO timestamp
+	is_deleted: boolean;
+	reply_to: number | null;
+	poll?: unknown;
+}
+
+export interface CommentsResponse {
+	success: boolean;
+	comments: Comment[];
+	total?: number;
+}

f0ck-svelte/src/lib/types/item.ts

@@ -0,0 +1,137 @@
+// ── Grid / list item (returned by /api/v2/items) ────────────────────────────
+export interface GridItem {
+	id: number;
+	mime: string;
+	dest: string;
+	username: string;
+	display_name: string | null;
+	is_pinned: boolean;
+	is_oc: boolean;
+	xd_score: number;
+	xd_tier: number;
+	xd_label: string;
+	tag: 'SFW' | 'NSFW' | 'NSFL' | null;
+	tag_id: number | null;
+	thumb_size: 1 | 2;
+	has_notification: boolean;
+}
+
+// ── Full single item (returned by /api/v2/items/:id) ────────────────────────
+export interface FullItem {
+	id: number;
+	mime: string;
+	dest: string;
+	username: string;
+	author_id: number | null;
+	author_color: string | null;
+	author_display_name: string | null;
+	author_avatar: string | null;
+	author_avatar_file: string | null;
+	title: string | null;
+	src: { long: string; short: string };
+	thumbnail: string;
+	og_thumbnail: string;
+	og_description: string;
+	coverart: string;
+	size: string;
+	checksum: string | null;
+	timestamp: { timeago: string; timefull: string };
+	favorites: FavoriteUser[];
+	tags: Tag[];
+	halls: Hall[];
+	user_halls: Hall[];
+	is_nsfw: boolean;
+	is_nsfl: boolean;
+	is_sfw: boolean;
+	is_pinned: boolean;
+	is_comments_locked: boolean;
+	is_oc: boolean;
+	is_repost: boolean;
+	reposts: RepostItem[];
+	width: number | null;
+	height: number | null;
+	original_filename: string | null;
+	xd_score: number;
+	xd_tier: number;
+	xd_label: string;
+	primaryHall: Hall | null;
+	otherHalls: Hall[];
+}
+
+// ── Pagination ───────────────────────────────────────────────────────────────
+export interface Pagination {
+	prev: number | null;
+	next: number | null;
+	start: number;
+	end: number;
+	current: number;
+	page: number;
+	cheat: number[];
+	location?: string;
+	suffix?: string;
+}
+
+// ── Link context ─────────────────────────────────────────────────────────────
+export interface ItemLink {
+	main: string;
+	mainDisplay?: string;
+	path: string;
+	suffix: string;
+}
+
+// ── Tags ─────────────────────────────────────────────────────────────────────
+export interface Tag {
+	id: number;
+	tag: string;
+	normalized: string;
+	badge: string;
+	display_name: string | null;
+	user: string;
+}
+
+// ── Halls ────────────────────────────────────────────────────────────────────
+export interface Hall {
+	name: string;
+	slug: string;
+}
+
+// ── Favorites ────────────────────────────────────────────────────────────────
+export interface FavoriteUser {
+	user: string;
+	avatar: string | null;
+	avatar_file: string | null;
+	username_color: string | null;
+	display_name: string | null;
+}
+
+// ── Reposts ──────────────────────────────────────────────────────────────────
+export interface RepostItem {
+	id: number;
+	username: string;
+	stamp: number;
+	match_type: 'checksum' | 'phash';
+}
+
+// ── API response wrappers ─────────────────────────────────────────────────────
+export interface ItemsResponse {
+	success: boolean;
+	items: GridItem[];
+	pagination: Pagination;
+	total: number;
+	link: ItemLink;
+}
+
+export interface ItemResponse {
+	success: boolean;
+	item: FullItem | null;
+	pagination: Pagination;
+	link: ItemLink;
+	isSubscribed: boolean;
+	message?: string;
+}
+
+export interface RandomResponse {
+	success: boolean;
+	id: number;
+	url: string;
+}

f0ck-svelte/src/lib/types/session.ts

@@ -0,0 +1,27 @@
+export interface SessionUser {
+	id: number;
+	user: string;
+	login: string;
+	admin: boolean;
+	is_moderator: boolean;
+	mode: number;
+	theme: string;
+	avatar: string | null;
+	avatar_file: string | null;
+	username_color: string | null;
+	display_name: string | null;
+	use_new_layout: boolean;
+	excluded_tags: number[];
+	min_xd_score: number;
+	uploads_remaining: number | undefined;
+	pending_count?: number;
+	language: string | null;
+	disable_autoplay: boolean;
+	disable_swiping: boolean;
+	csrf_token: string;
+}
+
+export interface SessionResponse {
+	loggedIn: boolean;
+	user: SessionUser | null;
+}

f0ck-svelte/src/lib/utils/csrfFetch.ts

@@ -0,0 +1,23 @@
+/**
+ * Wrapper around fetch that automatically injects the CSRF token as a header
+ * on all state-changing requests (POST, PUT, PATCH, DELETE).
+ *
+ * The token is read from the session store at call time so it's always fresh.
+ */
+import { get } from 'svelte/store';
+import { session } from '$lib/stores/session';
+
+const SAFE_METHODS = new Set(['GET', 'HEAD', 'OPTIONS']);
+
+export function csrfFetch(input: RequestInfo | URL, init: RequestInit = {}): Promise<Response> {
+	const method = (init.method ?? 'GET').toUpperCase();
+	if (SAFE_METHODS.has(method)) return fetch(input, init);
+
+	const token = get(session)?.csrf_token;
+	if (!token) return fetch(input, init); // not logged in — let backend return 401
+
+	const headers = new Headers(init.headers ?? {});
+	headers.set('X-CSRF-Token', token);
+
+	return fetch(input, { ...init, headers });
+}

f0ck-svelte/src/lib/utils/mimeHelpers.ts

@@ -0,0 +1,32 @@
+/** Map a MIME type to a simple category string. */
+export function mimeCategory(mime: string): 'video' | 'audio' | 'image' | 'flash' | 'pdf' | 'archive' | 'youtube' | 'unknown' {
+	if (mime === 'video/youtube')              return 'youtube';
+	if (mime.startsWith('video/'))             return 'video';
+	if (mime.startsWith('audio/'))             return 'audio';
+	if (mime.startsWith('image/'))             return 'image';
+	if (mime === 'application/pdf')            return 'pdf';
+	if (mime.includes('flash') || mime.includes('shockwave')) return 'flash';
+	if (mime.startsWith('application/'))       return 'archive';
+	return 'unknown';
+}
+
+/** Return a Font Awesome icon class for a MIME category. */
+export function mimeIcon(mime: string): string {
+	const cat = mimeCategory(mime);
+	const map: Record<string, string> = {
+		youtube:  'fa-brands fa-youtube',
+		video:    'fa-solid fa-film',
+		audio:    'fa-solid fa-music',
+		image:    'fa-solid fa-image',
+		flash:    'fa-solid fa-bolt',
+		pdf:      'fa-solid fa-file-pdf',
+		archive:  'fa-solid fa-file-zipper',
+		unknown:  'fa-solid fa-file'
+	};
+	return map[cat] ?? map.unknown;
+}
+
+/** True if the MIME type represents inline-playable media. */
+export function isPlayable(mime: string): boolean {
+	return ['video', 'audio', 'youtube'].includes(mimeCategory(mime));
+}

f0ck-svelte/src/lib/utils/timeago.ts

@@ -0,0 +1,45 @@
+/**
+ * Convert a Unix timestamp (seconds) or ISO string to a human-readable
+ * relative time string, e.g. "3 hours ago".
+ */
+export function timeAgo(input: number | string | Date): string {
+	const date =
+		input instanceof Date
+			? input
+			: typeof input === 'number'
+				? new Date(input * 1000)
+				: new Date(input);
+
+	const now = Date.now();
+	const diff = now - date.getTime();
+
+	const epochs: [string, number][] = [
+		['year',   365 * 24 * 3600 * 1000],
+		['month',   30 * 24 * 3600 * 1000],
+		['week',     7 * 24 * 3600 * 1000],
+		['day',          24 * 3600 * 1000],
+		['hour',              3600 * 1000],
+		['minute',              60 * 1000],
+		['second',                   1000]
+	];
+
+	for (const [label, ms] of epochs) {
+		const n = Math.floor(diff / ms);
+		if (n >= 1) return `${n} ${label}${n !== 1 ? 's' : ''} ago`;
+	}
+
+	return 'just now';
+}
+
+/**
+ * Format an ISO timestamp to a readable full date string.
+ */
+export function formatDate(iso: string): string {
+	return new Date(iso).toLocaleString(undefined, {
+		year: 'numeric',
+		month: 'short',
+		day: 'numeric',
+		hour: '2-digit',
+		minute: '2-digit'
+	});
+}

f0ck-svelte/src/routes/+layout.server.ts

@@ -0,0 +1,8 @@
+import type { LayoutServerLoad } from './$types';
+
+/** Pass session to all pages via PageData. */
+export const load: LayoutServerLoad = ({ locals }) => {
+	return {
+		session: locals.session
+	};
+};

f0ck-svelte/src/routes/+layout.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import '../app.css';
+	import Navbar from '$lib/components/layout/Navbar.svelte';
+	import FlashMessages from '$lib/components/ui/FlashMessages.svelte';
+	import { session as sessionStore } from '$lib/stores/session';
+	import { initPreferences } from '$lib/stores/preferences';
+	import { connect as sseConnect, disconnect as sseDisconnect } from '$lib/stores/sse';
+	import { onMount, onDestroy } from 'svelte';
+
+	interface Props {
+		data: {
+			session: import('$lib/types/session').SessionUser | null;
+		};
+		children: import('svelte').Snippet;
+	}
+	let { data, children }: Props = $props();
+
+	// Hydrate session store from server-loaded data
+	$effect(() => {
+		sessionStore.set(data.session);
+	});
+
+	// Init user preferences from session
+	$effect(() => {
+		if (data.session) {
+			initPreferences({ mode: data.session.mode ?? 3 });
+		}
+	});
+
+	onMount(() => {
+		sseConnect();
+	});
+
+	onDestroy(() => {
+		sseDisconnect();
+	});
+</script>
+
+<svelte:head>
+	<title>f0ckm</title>
+	<meta name="description" content="f0ckm — media sharing" />
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" crossorigin="anonymous" />
+	<link rel="preconnect" href="https://fonts.googleapis.com" />
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet" />
+</svelte:head>
+
+<div class="min-h-dvh flex flex-col" data-theme="f0ck">
+	<Navbar />
+	<div class="flex-1">
+		{@render children()}
+	</div>
+
+	<!-- Global flash messages -->
+	<FlashMessages />
+</div>

f0ck-svelte/src/routes/+page.server.ts

@@ -0,0 +1,30 @@
+import type { PageServerLoad } from './$types';
+import { getItems } from '$lib/api/items';
+
+export const load: PageServerLoad = async ({ fetch, url, locals }) => {
+	const page = Number(url.searchParams.get('page') ?? 1);
+	const mode = locals.session?.mode ?? 3;
+
+	try {
+		const data = await getItems({ page, mode }, fetch);
+		if (data.success) {
+			return {
+				items: data.items,
+				pagination: data.pagination,
+				total: data.total,
+				link: data.link
+			};
+		}
+	} catch (e) {
+		// Backend not yet running or API route not registered — return empty state
+		// so the page renders rather than hard-erroring.
+		console.warn('[/] Failed to load items:', (e as Error).message);
+	}
+
+	return {
+		items: [],
+		pagination: null,
+		total: 0,
+		link: { main: '/', path: 'p/', suffix: '' }
+	};
+};

f0ck-svelte/src/routes/+page.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import type { GridItem } from '$lib/types/item';
+	import ItemCard  from '$lib/components/item/ItemCard.svelte';
+	import Pagination from '$lib/components/ui/Pagination.svelte';
+	import { onSSE } from '$lib/stores/sse';
+	import { pinEvent } from '$lib/stores/pin';
+	import { onDestroy } from 'svelte';
+
+	let { data }: { data: PageData } = $props();
+
+	// Local mutable copy of the items list — SSE patches it live
+	let items = $state<GridItem[]>(data.items);
+	let total = $state(data.total);
+
+	// Re-sync when server data changes (e.g. navigation / invalidation)
+	$effect(() => {
+		items = data.items;
+		total = data.total;
+	});
+
+	// ── Live grid updates via SSE ─────────────────────────────────────────────
+	const unsubSSE = onSSE((event) => {
+		if (event.type === 'new_item') {
+			const d = event.data as GridItem & { dest: string; username: string };
+			if (!items.some(i => i.id === d.id)) {
+				items = [d, ...items];
+				total += 1;
+			}
+		} else if (event.type === 'delete_item') {
+			const d = event.data as { id: number };
+			const before = items.length;
+			items = items.filter(i => i.id !== d.id);
+			if (items.length < before) total = Math.max(0, total - 1);
+		}
+	});
+	onDestroy(unsubSSE);
+
+	// ── Pin store: patch the grid card is_pinned live ─────────────────────────
+	const unsubPin = pinEvent.subscribe((evt) => {
+		if (!evt) return;
+		items = items.map(i => i.id === evt.itemId ? { ...i, is_pinned: evt.pinned } : i);
+	});
+	onDestroy(unsubPin);
+</script>
+
+<svelte:head>
+	<title>f0ckm — {total} items</title>
+</svelte:head>
+
+<div class="max-w-[1600px] mx-auto px-3 py-4">
+	<!-- Grid header -->
+	{#if total > 0}
+		<p class="text-xs opacity-40 mb-3 font-mono">{total.toLocaleString()} items</p>
+	{/if}
+
+	<!-- Thumbnail grid -->
+	{#if items.length > 0}
+		<div class="
+			grid gap-1.5
+			grid-cols-[repeat(auto-fill,minmax(140px,1fr))]
+			sm:grid-cols-[repeat(auto-fill,minmax(180px,1fr))]
+			md:grid-cols-[repeat(auto-fill,minmax(200px,1fr))]
+		">
+			{#each items as item (item.id)}
+				<ItemCard {item} link={data.link} />
+			{/each}
+		</div>
+
+		{#if data.pagination}
+			<Pagination pagination={data.pagination} link={data.link} />
+		{/if}
+	{:else}
+		<div class="flex flex-col items-center justify-center py-32 gap-4 opacity-40">
+			<i class="fa-solid fa-box-open text-5xl"></i>
+			<p class="text-sm">No items found.</p>
+		</div>
+	{/if}
+</div>

f0ck-svelte/src/routes/[itemid]/+page.server.ts

@@ -0,0 +1,28 @@
+import type { PageServerLoad } from './$types';
+import { getItem } from '$lib/api/items';
+import { error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ params, fetch, locals, url }) => {
+	const id = params.itemid;
+	if (!id || !/^\d+$/.test(id)) throw error(404, 'Not found');
+
+	const mode = locals.session?.mode ?? 3;
+
+	try {
+		const data = await getItem(id, { mode }, fetch);
+
+		if (!data.success || !data.item) {
+			throw error(404, 'Item not found or not visible in current mode');
+		}
+
+		return {
+			item: data.item,
+			pagination: data.pagination,
+			link: data.link,
+			isSubscribed: data.isSubscribed
+		};
+	} catch (e) {
+		if (e instanceof Response) throw e;
+		throw error(500, 'Failed to load item');
+	}
+};

f0ck-svelte/src/routes/[itemid]/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import ItemView from '$lib/components/item/ItemView.svelte';
+
+	let { data }: { data: PageData } = $props();
+
+	const ogTitle  = $derived(data.item.title ?? `#${data.item.id} — f0ckm`);
+	const ogImage  = $derived(data.item.og_thumbnail);
+	const ogDesc   = $derived(data.item.og_description ?? '');
+</script>
+
+<svelte:head>
+	<title>{ogTitle}</title>
+	<meta name="description" content={ogDesc} />
+	<!-- OG tags for embeds -->
+	<meta property="og:title"       content={ogTitle} />
+	<meta property="og:description" content={ogDesc} />
+	<meta property="og:image"       content={ogImage} />
+	<meta property="og:type"        content="article" />
+	<!-- Twitter card -->
+	<meta name="twitter:card"        content="summary_large_image" />
+	<meta name="twitter:title"       content={ogTitle} />
+	<meta name="twitter:description" content={ogDesc} />
+	<meta name="twitter:image"       content={ogImage} />
+</svelte:head>
+
+<ItemView
+	item={data.item}
+	pagination={data.pagination}
+	link={data.link}
+	isSubscribed={data.isSubscribed}
+/>

f0ck-svelte/src/routes/login/+page.server.ts

@@ -0,0 +1,9 @@
+// Stub page for /login — will be built in Sprint 2.
+// For now redirect to the legacy login page so auth still works.
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+	// Temporary: redirect to legacy backend login until we build the Svelte login form
+	throw redirect(307, 'http://localhost:1337/login');
+};

f0ck-svelte/src/routes/random/+page.server.ts

@@ -0,0 +1,16 @@
+import type { PageServerLoad } from './$types';
+import { getRandom } from '$lib/api/items';
+import { redirect } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ fetch }) => {
+	try {
+		const data = await getRandom(fetch);
+		if (data.success && data.url) {
+			throw redirect(307, data.url);
+		}
+	} catch (e) {
+		if (e instanceof Response) throw e;
+	}
+	// Fallback: go home if no random item found
+	throw redirect(307, '/');
+};

f0ck-svelte/src/routes/register/+page.server.ts

@@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+	throw redirect(307, 'http://localhost:1337/register');
+};

f0ck-svelte/src/routes/tag/[tag]/+page.server.ts

@@ -0,0 +1,31 @@
+import type { PageServerLoad } from './$types';
+import { getItems } from '$lib/api/items';
+
+export const load: PageServerLoad = async ({ fetch, url, params, locals }) => {
+	const tag  = decodeURIComponent(params.tag);
+	const page = Number(url.searchParams.get('page') ?? 1);
+	const mode = locals.session?.mode ?? 3;
+
+	try {
+		const data = await getItems({ page, mode, tag }, fetch);
+		if (data.success) {
+			return {
+				tag,
+				items:      data.items,
+				pagination: data.pagination,
+				total:      data.total,
+				link:       data.link
+			};
+		}
+	} catch (e) {
+		console.warn(`[/tag/${tag}] Failed to load items:`, (e as Error).message);
+	}
+
+	return {
+		tag,
+		items:      [],
+		pagination: null,
+		total:      0,
+		link: { main: `/tag/${encodeURIComponent(tag)}/`, path: 'p/', suffix: '' }
+	};
+};

f0ck-svelte/src/routes/tag/[tag]/+page.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import type { GridItem } from '$lib/types/item';
+	import ItemCard   from '$lib/components/item/ItemCard.svelte';
+	import Pagination from '$lib/components/ui/Pagination.svelte';
+	import { onSSE }  from '$lib/stores/sse';
+	import { onDestroy } from 'svelte';
+
+	let { data }: { data: PageData } = $props();
+
+	let items = $state<GridItem[]>(data.items);
+	let total = $state(data.total);
+
+	$effect(() => {
+		items = data.items;
+		total = data.total;
+	});
+
+	// Live: remove items that get deleted
+	// (we don't prepend new_item because it may not match this tag filter)
+	const unsubSSE = onSSE((event) => {
+		if (event.type === 'delete_item') {
+			const d = event.data as { id: number };
+			const before = items.length;
+			items = items.filter(i => i.id !== d.id);
+			if (items.length < before) total = Math.max(0, total - 1);
+		}
+	});
+	onDestroy(unsubSSE);
+</script>
+
+<svelte:head>
+	<title>#{data.tag} — f0ckm</title>
+	<meta name="description" content="Items tagged #{data.tag} on f0ckm" />
+</svelte:head>
+
+<div class="max-w-[1600px] mx-auto px-3 py-4">
+
+	<!-- Tag header -->
+	<div class="flex items-center gap-3 mb-4">
+		<div class="flex items-center gap-2">
+			<i class="fa-solid fa-tag text-primary opacity-70" aria-hidden="true"></i>
+			<h1 class="text-xl font-bold">{data.tag}</h1>
+		</div>
+		{#if total > 0}
+			<span class="badge badge-neutral font-mono text-xs">{total.toLocaleString()}</span>
+		{/if}
+		<a href="/" class="btn btn-ghost btn-xs ml-auto opacity-60 hover:opacity-100 gap-1">
+			<i class="fa-solid fa-xmark text-xs" aria-hidden="true"></i> Clear
+		</a>
+	</div>
+
+	<!-- Grid -->
+	{#if items.length > 0}
+		<div class="
+			grid gap-1.5
+			grid-cols-[repeat(auto-fill,minmax(140px,1fr))]
+			sm:grid-cols-[repeat(auto-fill,minmax(180px,1fr))]
+			md:grid-cols-[repeat(auto-fill,minmax(200px,1fr))]
+		">
+			{#each items as item (item.id)}
+				<ItemCard {item} link={data.link} />
+			{/each}
+		</div>
+
+		{#if data.pagination}
+			<Pagination pagination={data.pagination} link={data.link} />
+		{/if}
+	{:else}
+		<div class="flex flex-col items-center justify-center py-32 gap-4 opacity-40">
+			<i class="fa-solid fa-tag text-5xl" aria-hidden="true"></i>
+			<p class="text-sm">No items found for <strong>#{data.tag}</strong>.</p>
+		</div>
+	{/if}
+
+</div>

f0ck-svelte/src/routes/tag/[tag]/[itemid]/+page.server.ts

@@ -0,0 +1,27 @@
+import type { PageServerLoad } from './$types';
+import { getItem } from '$lib/api/items';
+import { error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ fetch, params, locals }) => {
+	const tag    = decodeURIComponent(params.tag);
+	const itemid = Number(params.itemid);
+	const mode   = locals.session?.mode ?? 3;
+
+	if (!itemid) throw error(404, 'Not found');
+
+	try {
+		const data = await getItem(itemid, { mode, tag }, fetch);
+		if (!data.success || !data.item) throw error(404, data.message ?? 'Item not found');
+
+		return {
+			tag,
+			item:        data.item,
+			pagination:  data.pagination,
+			link:        data.link,
+			isSubscribed: data.isSubscribed ?? false
+		};
+	} catch (e: unknown) {
+		if ((e as { status?: number })?.status) throw e;
+		throw error(500, 'Failed to load item');
+	}
+};

f0ck-svelte/src/routes/tag/[tag]/[itemid]/+page.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import ItemView from '$lib/components/item/ItemView.svelte';
+
+	let { data }: { data: PageData } = $props();
+</script>
+
+<svelte:head>
+	<title>#{data.tag} — item {data.item.id} — f0ckm</title>
+</svelte:head>
+
+<!-- Tag breadcrumb -->
+<div class="max-w-[1600px] mx-auto px-4 pt-2">
+	<div class="text-xs opacity-50 flex items-center gap-1.5">
+		<a href="/" class="hover:opacity-100 transition-opacity">f0ckm</a>
+		<i class="fa-solid fa-chevron-right text-[10px]" aria-hidden="true"></i>
+		<a href="/tag/{encodeURIComponent(data.tag)}" class="hover:opacity-100 transition-opacity flex items-center gap-1">
+			<i class="fa-solid fa-tag text-[10px]" aria-hidden="true"></i>
+			{data.tag}
+		</a>
+		<i class="fa-solid fa-chevron-right text-[10px]" aria-hidden="true"></i>
+		<span>#{data.item.id}</span>
+	</div>
+</div>
+
+<ItemView
+	item={data.item}
+	pagination={data.pagination}
+	link={data.link}
+	isSubscribed={data.isSubscribed}
+/>

f0ck-svelte/static/robots.txt

@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:

f0ck-svelte/tsconfig.json

@@ -0,0 +1,21 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler",
+		"types": ["node"]
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}

f0ck-svelte/vite.config.ts

@@ -0,0 +1,47 @@
+import adapter from '@sveltejs/adapter-node';
+import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [
+		tailwindcss(),
+		sveltekit({
+			compilerOptions: {
+				runes: ({ filename }) =>
+					filename.split(/[/\\]/).includes('node_modules') ? undefined : true
+			},
+			adapter: adapter()
+		})
+	],
+	server: {
+		port: 5173,
+		proxy: {
+			// Proxy API + WebSocket to the existing f0ckm backend
+			'/api': {
+				target: 'http://localhost:1337',
+				changeOrigin: true
+			},
+			'/ajax': {
+				target: 'http://localhost:1337',
+				changeOrigin: true
+			},
+			'/ws': {
+				target: 'ws://localhost:1337',
+				ws: true
+			},
+			// Static media files — use exact prefix matching to avoid
+			// colliding with Vite's own /src/ module paths.
+			// Each rule anchored to exactly /X/ (with trailing slash).
+			'^/b/': { target: 'http://localhost:1337', changeOrigin: true },
+			'^/t/': { target: 'http://localhost:1337', changeOrigin: true },
+			'^/ca/': { target: 'http://localhost:1337', changeOrigin: true },
+			'^/a/': { target: 'http://localhost:1337', changeOrigin: true },
+			// /s/ — NOTE: must NOT match /src/ — regex anchors it
+			'^/s/': { target: 'http://localhost:1337', changeOrigin: true },
+			'^/memes/': { target: 'http://localhost:1337', changeOrigin: true },
+			// mod actions (pin, unpin, delete)
+			'^/mod/': { target: 'http://localhost:1337', changeOrigin: true }
+		}
+	}
+});

public/s/css/meme-creator.css

@@ -13,9 +13,8 @@
 /* Meme Creator Styles */
 
 .meme-creator-container {
-    box-sizing: border-box !important;
     padding: 20px;
-    max-width: 1100px;
+    max-width: 1200px;
     width: 100%;
     margin: 0 auto;
     position: relative;
@@ -112,7 +111,6 @@
 
 .canvas-wrapper {
     flex: 1;
-    max-width: 650px;
     min-width: 0; /* Allow shrinking */
     background: #000;
     border: 2px solid var(--nav-bg, #2b2b2b);
@@ -240,49 +238,22 @@ canvas#memeCanvas {
     color: var(--white, #fff);
 }
 
-/* Mobile Stacking - Clean Flexbox Column Layout */
+/* Mobile Stacking - Simple 2-Row Layout */
 @media (max-width: 950px) {
     .meme-editor-layout {
-        display: flex !important;
+        display: grid !important;
-        flex-direction: column !important;
+        grid-template-columns: 1fr !important;
-        align-items: center !important;
+        grid-template-rows: 0.6fr auto !important;
         gap: 20px;
     }
     .meme-controls {
-        box-sizing: border-box !important;
         width: 100% !important;
-        max-width: 500px !important;
+        grid-row: 2;
         overflow: visible !important;
     }
     .canvas-wrapper {
-        box-sizing: border-box !important;
         width: 100% !important;
-        max-width: 650px !important;
+        grid-row: 1;
-        margin-bottom: 10px;
-        overflow: visible !important;
-        height: auto !important;
-    }
-}
-
-/* Stack early when sidebar is open (sidebar is 300px, so 950 + 300 = 1250px)
-   This prevents the canvas from shrinking too much when the sidebar takes space. */
-@media (max-width: 1250px) {
-    body:not(.sidebar-right-hidden) .meme-editor-layout {
-        display: flex !important;
-        flex-direction: column !important;
-        align-items: center !important;
-        gap: 20px;
-    }
-    body:not(.sidebar-right-hidden) .meme-controls {
-        box-sizing: border-box !important;
-        width: 100% !important;
-        max-width: 500px !important;
-        overflow: visible !important;
-    }
-    body:not(.sidebar-right-hidden) .canvas-wrapper {
-        box-sizing: border-box !important;
-        width: 100% !important;
-        max-width: 650px !important;
         margin-bottom: 10px;
         overflow: visible !important;
         height: auto !important;
@@ -323,19 +294,20 @@ canvas#memeCanvas {
 
 /* Sidebar space reservation for meme pages */
 .meme-layout-wrapper {
-    box-sizing: border-box !important;
     width: 100%;
+    transition: padding-right 0.3s ease-in-out;
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 1200px) {
     /* Reserve space for the fixed sidebar so content doesn't flow behind it */
-    body:not(.sidebar-right-hidden) .meme-layout-wrapper {
+    .meme-layout-wrapper {
         padding-right: 300px;
     }
+
+    /* Collapse reserved space when sidebar is hidden */
+    body.sidebar-right-hidden .meme-layout-wrapper {
+        padding-right: 0;
+    }
 }
 
-/* Collapse reserved space when sidebar is hidden */
-body.sidebar-right-hidden .meme-layout-wrapper {
-    padding-right: 0 !important;
-}
 

public/s/js/comments.js

@@ -54,7 +54,7 @@ class CommentSystem {
                 document.body.classList.remove('sidebar-left-hidden');
                 const layout = this.container.closest('.item-layout-container');
                 if (layout) layout.classList.remove('sidebar-hidden');
-            } else if (isHidden && (window.innerWidth >= 1000 || !document.body.classList.contains('layout-modern'))) {
+            } else if (isHidden) {
                 this.container.classList.add('faded-out');
                 this.container.style.display = 'none';
                 document.body.classList.add('sidebar-left-hidden');
@@ -596,7 +596,7 @@ class CommentSystem {
                 if (cached) cached.content = fullContent;
             }
 
-            contentEl.dataset.raw = fullContent;
+            contentEl.dataset.raw = this.escapeHtml(fullContent);
             contentEl.innerHTML = this.renderCommentContent(fullContent, commentId);
             CommentSystem.autoplayConvertedGifs(contentEl);
             CommentSystem.playEmojiVideos(contentEl);
@@ -622,7 +622,6 @@ class CommentSystem {
 
         const contentEl = el.querySelector('.comment-content');
         if (contentEl) {
-            contentEl.dataset.raw = data.content;
             contentEl.innerHTML = this.renderCommentContent(data.content, data.comment_id);
             CommentSystem.autoplayConvertedGifs(contentEl);
             CommentSystem.playEmojiVideos(contentEl);
@@ -858,14 +857,26 @@ class CommentSystem {
      * border-right) is fully restored after the effect completes.
      *
      * @param {Element} el       - The .comment element to animate.
-     * @param {boolean} entering - Unused (kept for compatibility).
+     * @param {boolean} entering - True to also add 'comment-entering' (own post);
+     *                             false for 'new-item-fade' only (live others).
      */
     static _animateNewComment(el, entering = false) {
         if (!el) return;
-        el.classList.add('new-item-fade');
+
-        setTimeout(() => {
+        const classes = entering
-            el.classList.remove('new-item-fade');
+            ? ['comment-entering', 'new-item-fade']
-        }, 2500);
+            : ['new-item-fade'];
+
+        // Reset in case the element already has a stale animation
+        classes.forEach(c => el.classList.remove(c));
+        void el.offsetWidth; // force reflow so re-adding the class restarts the animation
+
+        classes.forEach(c => el.classList.add(c));
+
+        const cleanup = () => {
+            classes.forEach(c => el.classList.remove(c));
+        };
+        el.addEventListener('animationend', cleanup, { once: true });
     }
 
 
@@ -881,6 +892,7 @@ class CommentSystem {
             if (el) {
                 // Remove highlight from any previously highlighted or newly-posted comment
                 document.querySelectorAll('.comment-highlighted').forEach(c => c.classList.remove('comment-highlighted'));
+                document.querySelectorAll('.comment-entering').forEach(c => c.classList.remove('comment-entering'));
                 document.querySelectorAll('.new-item-fade').forEach(c => c.classList.remove('new-item-fade'));
 
                 // Always smooth-scroll so there's no jarring jump
@@ -1026,7 +1038,7 @@ class CommentSystem {
         preview.dataset.id = targetId;
 
         // Remove temporary animation/highlight classes
-        preview.classList.remove('new-item-fade', 'comment-highlighted');
+        preview.classList.remove('new-item-fade', 'comment-highlighted', 'comment-entering');
 
         // Remove input forms or action buttons
         const actions = preview.querySelector('.comment-actions');
@@ -1161,12 +1173,7 @@ class CommentSystem {
             const contentEl = body.querySelector('.comment-content');
             if (contentEl) {
                 const LINE_MAX = 200;
-                let rawText = (contentEl.dataset.raw || '').trim();
+                const rawText = (contentEl.dataset.raw || '').trim();
-                if (rawText.includes('>') || rawText.includes('<') || rawText.includes('&')) {
-                    const txt = document.createElement('textarea');
-                    txt.innerHTML = rawText;
-                    rawText = txt.value;
-                }
                 // Preserve all lines but cap any single line exceeding LINE_MAX chars
                 const lines = rawText.split('\n').map(line =>
                     line.length > LINE_MAX ? line.substring(0, LINE_MAX) + '\u2026' : line
@@ -1787,7 +1794,7 @@ class CommentSystem {
                     const renderedContent = quoteEmojis
                         ? quoteContent.replace(/:([a-z0-9_]+):/g, (m, n) => this.renderEmoji(m, n))
                         : quoteContent;
-                    return `<span class="greentext">&gt;${renderedContent.replace(/>/g, '&gt;')}</span>`;
+                    return `<span class="greentext">&gt;${renderedContent}</span>`;
                 }
 
                 // 2. Per-line limit to prevent marked.parse recursion on single giant lines
@@ -2192,7 +2199,7 @@ class CommentSystem {
         if (!unsafe) return '';
         const div = document.createElement('div');
         div.textContent = unsafe;
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+        return div.innerHTML;
     }
 
     renderCommentAttachments(files, content = '') {
@@ -3329,15 +3336,9 @@ class CommentSystem {
                     params.append('has_poll', '1');
                 }
 
-                const csrfToken = window.f0ckSession?.csrf_token || '';
-                if (csrfToken) params.append('csrf_token', csrfToken);
-
                 const res = await fetch('/api/comments', {
                     method: 'POST',
-                    headers: {
+                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-                        'Content-Type': 'application/x-www-form-urlencoded',
-                        ...(csrfToken ? { 'X-CSRF-Token': csrfToken } : {})
-                    },
                     body: params
                 });
 
@@ -3807,12 +3808,9 @@ class CommentSystem {
     toggleComments() {
         if (!this.container) return;
 
-        if (document.body.classList.contains('layout-modern')) {
+        if (document.body.classList.contains('layout-modern') && typeof window.toggleSidebarLeft === 'function') {
-            if (window.innerWidth < 1000) return;
+            window.toggleSidebarLeft();
-            if (typeof window.toggleSidebarLeft === 'function') {
+            return;
-                window.toggleSidebarLeft();
-                return;
-            }
         }
 
         const layout = this.container.closest('.item-layout-container');
@@ -4459,71 +4457,20 @@ class CommentSystem {
                     }, { passive: true });
                 };
 
-                // Helper: reliable touch handling for tab buttons on mobile (supports hold-to-action)
+                // Helper: reliable touch handling for tab buttons on mobile
-                let lastHoldTime = 0;
+                const addTabTouch = (btn, cb) => {
-                const addTabTouch = (btn, cb, onHold) => {
                     let ts = null;
-                    let holdTimer = null;
-                    let holdFired = false;
                     btn.addEventListener('touchstart', (e) => {
-                        holdFired = false;
                         ts = { x: e.touches[0].clientX, y: e.touches[0].clientY };
-                        if (onHold) {
-                            holdTimer = setTimeout(() => {
-                                holdFired = true;
-                                lastHoldTime = Date.now();
-                                try { navigator.vibrate?.(40); } catch(err) {}
-                                onHold();
-                            }, 500);
-                        }
                         e.stopPropagation();
                     }, { passive: true });
-
-                    btn.addEventListener('touchmove', (e) => {
-                        if (!ts) return;
-                        const dx = Math.abs(e.touches[0].clientX - ts.x);
-                        const dy = Math.abs(e.touches[0].clientY - ts.y);
-                        if (dx > 10 || dy > 10) {
-                            clearTimeout(holdTimer);
-                            ts = null;
-                        }
-                    }, { passive: true });
-
                     btn.addEventListener('touchend', (e) => {
-                        clearTimeout(holdTimer);
-                        if (holdFired) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            holdFired = false;
-                            ts = null;
-                            return;
-                        }
                         if (!ts) return;
                         const dx = Math.abs(e.changedTouches[0].clientX - ts.x);
                         const dy = Math.abs(e.changedTouches[0].clientY - ts.y);
                         ts = null;
                         if (dx < 10 && dy < 10) { e.preventDefault(); cb(); }
                     });
-
-                    btn.addEventListener('touchcancel', () => {
-                        clearTimeout(holdTimer);
-                        holdFired = false;
-                        ts = null;
-                    });
-                };
-
-                const toggleFavDefault = (tabEl) => {
-                    const KEY = 'f0ck_emoji_default_tab';
-                    const isDefault = localStorage.getItem(KEY) === '__favs__';
-                    if (isDefault) {
-                        localStorage.removeItem(KEY);
-                        tabEl.classList.remove('ep-tab-default');
-                        window._showEmojiToast?.('Favorites unset as default tab');
-                    } else {
-                        localStorage.setItem(KEY, '__favs__');
-                        tabEl.classList.add('ep-tab-default');
-                        window._showEmojiToast?.('Favorites set as default tab');
-                    }
                 };
 
                 // Build tab buttons — Favorites first
@@ -4535,13 +4482,23 @@ class CommentSystem {
                 favTab.innerHTML = '<i class="fa-solid fa-star" style="color:var(--emoji-fav-color,#f5c518);font-size:1.1em;"></i>';
                 favTab.addEventListener('mousedown', e => e.preventDefault());
                 favTab.addEventListener('click', () => showTab('__favs__'));
-                addTabTouch(favTab, () => showTab('__favs__'), () => toggleFavDefault(favTab));
+                addTabTouch(favTab, () => showTab('__favs__'));
                 // Right-click on fav tab → set/unset as default
                 favTab.addEventListener('contextmenu', (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    if (Date.now() - lastHoldTime < 1000) return;
+                    if (navigator.maxTouchPoints > 0) return;
-                    toggleFavDefault(favTab);
+                    const KEY = 'f0ck_emoji_default_tab';
+                    const isDefault = localStorage.getItem(KEY) === '__favs__';
+                    if (isDefault) {
+                        localStorage.removeItem(KEY);
+                        favTab.classList.remove('ep-tab-default');
+                        window._showEmojiToast?.('Favorites unset as default tab');
+                    } else {
+                        localStorage.setItem(KEY, '__favs__');
+                        favTab.classList.add('ep-tab-default');
+                        window._showEmojiToast?.('Favorites set as default tab');
+                    }
                 });
                 // Mark as default if already set
                 if (localStorage.getItem('f0ck_emoji_default_tab') === '__favs__') {

public/s/js/f0ckm.js

@@ -2307,49 +2307,9 @@ window.cancelAnimFrame = (function () {
       hidden = hiddenValue === 'true';
     }
     document.body.classList.toggle('sidebar-right-hidden', hidden);
-
-    // Always force-hide on very small screens regardless of saved preference
-    if (window.innerWidth <= 599) {
-      document.body.classList.add('sidebar-right-hidden');
-    }
   };
   window.initSidebarRightToggle();
 
-  // Auto-hide sidebar on very small screens (≤599px), restore on wider
-  (() => {
-    const mq = window.matchMedia('(max-width: 599px)');
-    const applyBreakpoint = (e) => {
-      // Freeze transitions so the class change is instant (no sliding during resize)
-      const sidebar = document.querySelector('.global-sidebar-right, .item-sidebar-right, .index-sidebar-right');
-      const wrappers = document.querySelectorAll('.index-layout-wrapper, .item-layout-container, .pagination-container-fluid, .pagewrapper');
-      if (sidebar) sidebar.style.setProperty('transition', 'none', 'important');
-      wrappers.forEach(w => w.style.setProperty('transition', 'none', 'important'));
-
-      if (e.matches) {
-        // Entering narrow: force-hide without touching localStorage
-        document.body.classList.add('sidebar-right-hidden');
-      } else {
-        // Leaving narrow: restore from saved preference
-        const saved = localStorage.getItem('sidebarRightHidden');
-        const hidden = saved === 'true';
-        document.body.classList.toggle('sidebar-right-hidden', hidden);
-      }
-
-      // Force reflow then restore transitions
-      if (sidebar) void sidebar.offsetWidth;
-      requestAnimationFrame(() => {
-        if (sidebar) sidebar.style.removeProperty('transition');
-        wrappers.forEach(w => {
-          w.style.removeProperty('transition');
-          w.style.removeProperty('padding-right');
-          w.style.removeProperty('right');
-        });
-      });
-    };
-    mq.addEventListener('change', applyBreakpoint);
-    applyBreakpoint(mq); // run once on init
-  })();
-
   const loadPageAjax = async (url, replace = true, options = {}) => {
     if (isNavigating) return;
 
@@ -2438,7 +2398,7 @@ window.cancelAnimFrame = (function () {
     const isAdmin = !!pathname.match(/^\/admin/);
     const isMod = !!pathname.match(/^\/mod/);
     const isSettings = pathname.match(/\/settings\/?(?:$|\?)/);
-    const isStatic = pathname.match(/\/(about|rules|terms|upload|subscriptions|stats|docs|discord|ranking|meme|memes|chat)($|\/|\?)/);
+    const isStatic = pathname.match(/\/(about|rules|terms|upload|subscriptions|stats|docs|discord|ranking|meme|memes)($|\/|\?)/);
     const isUpload = pathname.match(/\/upload\/?(?:$|\?)/);
     const parts = pathname.split('/').filter(Boolean);
     const isItem = !pathname.match(/\/p\//) && (
@@ -2446,9 +2406,8 @@ window.cancelAnimFrame = (function () {
       (parts.length >= 3 && (parts[0] === 'tag' || parts[0] === 'user' || parts[0] === 'h') && /^\d+$/.test(parts[parts.length - 1]))
     );
     const isMessages = !!pathname.match(/^\/messages(\/|$)/);
-    const isChat     = !!pathname.match(/^\/chat(\/|$)/);
     const isAbyss    = !!pathname.match(/^\/abyss(\/|$|\?|#)/) || pathname === '/abyss';
-    const isGrid = !isProfile && !isUserHall && !isUserHalls && !isHall && !isHalls && !isTags && !isComments && !isNotifs && !isItem && !isAdmin && !isMod && !isSettings && !isStatic && !isUpload && !isMessages && !isChat && !isAbyss;
+    const isGrid = !isProfile && !isUserHall && !isUserHalls && !isHall && !isHalls && !isTags && !isComments && !isNotifs && !isItem && !isAdmin && !isMod && !isSettings && !isStatic && !isUpload && !isMessages && !isAbyss;
 
     if (isItem) {
        isNavigating = false;
@@ -4080,7 +4039,7 @@ window.cancelAnimFrame = (function () {
         return false;
       }
 
-      if (!isSpecialLink && (pathname === '/' || pathname.startsWith('/halls') || pathname.startsWith('/h/') || pathname.startsWith('/notifications') || pathname.startsWith('/tag') || pathname.startsWith('/user/') || pathname.match(/^\/(image|video|audio)/) || pathname.match(/\/p\/\d+/) || pathname.match(/^\/\d+/) || pathname.match(/^\/(about|rules|terms|upload|subscriptions|stats|docs|settings|admin|mod|ranking|messages|meme|memes|chat)/) || pathname.startsWith('/abyss'))) {
+      if (!isSpecialLink && (pathname === '/' || pathname.startsWith('/halls') || pathname.startsWith('/h/') || pathname.startsWith('/notifications') || pathname.startsWith('/tag') || pathname.startsWith('/user/') || pathname.match(/^\/(image|video|audio)/) || pathname.match(/\/p\/\d+/) || pathname.match(/^\/\d+/) || pathname.match(/^\/(about|rules|terms|upload|subscriptions|stats|docs|settings|admin|mod|ranking|messages|meme|memes)/) || pathname.startsWith('/abyss'))) {
         e.preventDefault();
         e.stopImmediatePropagation();
 
@@ -4468,10 +4427,6 @@ window.cancelAnimFrame = (function () {
             if (window.renderTags) {
               window.renderTags(res.tags);
             }
-            // Evict the cached item HTML so navigating back fetches fresh content
-            if (window.invalidateItemCache) {
-              window.invalidateItemCache(postid);
-            }
           } else {
             revert();
             window.flashMessage('Error: ' + (res.msg || 'Failed to update rating'), 3000, 'error');
@@ -4534,7 +4489,7 @@ window.cancelAnimFrame = (function () {
       (parts.length >= 3 && parts[0] === 'tag' && /^\d+$/.test(parts[parts.length - 1])) ||
       (parts.length >= 3 && parts[0] === 'user' && /^\d+$/.test(parts[parts.length - 1]))
     );
-    const isSpecial = p.startsWith('/notifications') || p.startsWith('/tags') || p.startsWith('/user/') || p.startsWith('/subscriptions') || p.startsWith('/ranking') || p.startsWith('/chat');
+    const isSpecial = p.startsWith('/notifications') || p.startsWith('/tags') || p.startsWith('/user/') || p.startsWith('/subscriptions') || p.startsWith('/ranking');
     const isGridLike = url.match(/\/p\/\d+/) || url.match(/[?&]page=\d+/) || p === '/';
 
     window.f0ckDebug("[popstate] Navigation to:", url, { isItem, isSpecial, isGridLike });
@@ -6322,10 +6277,8 @@ window.cancelAnimFrame = (function () {
         if (settled) return;
         settled = true;
 
-        // Freeze sidebar AND wrapper transitions so the class toggle
+        // Freeze all transitions (override CSS !important) so the class toggle
-        // doesn't trigger a second padding-right animation.
+        // doesn't trigger an additional right-property animation.
-        const wrappers = getSidebarWrappers();
-        wrappers.forEach(w => w.style.setProperty('transition', 'none', 'important'));
         sidebar.style.setProperty('transition', 'none', 'important');
 
         if (stateChanging) {
@@ -6343,11 +6296,6 @@ window.cancelAnimFrame = (function () {
         // Restore CSS-controlled transitions on the next frame
         requestAnimationFrame(() => {
           sidebar.style.removeProperty('transition');
-          wrappers.forEach(w => {
-            w.style.removeProperty('transition');
-            w.style.removeProperty('padding-right');
-            w.style.removeProperty('right');
-          });
           swipeRT.isDraggingSidebar = false;
         });
       };
@@ -6585,10 +6533,6 @@ window.cancelAnimFrame = (function () {
     const settle = () => {
       if (settled) return;
       settled = true;
-      // Freeze sidebar AND wrapper transitions so the class toggle
-      // doesn't trigger a second padding-right animation.
-      const wrappers = getSidebarWrappers();
-      wrappers.forEach(w => w.style.setProperty('transition', 'none', 'important'));
       sidebar.style.setProperty('transition', 'none', 'important');
 
       if (stateChanging) {
@@ -6601,11 +6545,6 @@ window.cancelAnimFrame = (function () {
       sidebar.style.transform = '';
       requestAnimationFrame(() => {
         sidebar.style.removeProperty('transition');
-        wrappers.forEach(w => {
-          w.style.removeProperty('transition');
-          w.style.removeProperty('padding-right');
-          w.style.removeProperty('right');
-        });
       });
     };
 
@@ -6673,55 +6612,15 @@ window.cancelAnimFrame = (function () {
   });
   window.addEventListener('resize', syncEdgeZone, { passive: true });
 
-  // Returns true if (clientX, clientY) is within the pill's hit area.
+  // Touchend on edgeZone: instant tap-to-toggle (no 300ms synthetic click delay)
-  // The pill is #sidebar-drag-zone::after — 4×40px, centered on pointer:fine,
-  // right-aligned with padding-right:6px on pointer:coarse.
-  const isWithinPillArea = (clientX, clientY) => {
-    const rect = edgeZone.getBoundingClientRect();
-    const pillH = 40;
-    const hitPad = 12; // generous padding so it's easy to hit
-    // Vertical: pill is always centered in the drag zone
-    const pillCenterY = rect.top + rect.height / 2;
-    if (clientY < pillCenterY - pillH / 2 - hitPad || clientY > pillCenterY + pillH / 2 + hitPad) return false;
-    // Horizontal: right-aligned on touch, centered on mouse
-    const isCoarse = window.matchMedia('(pointer: coarse)').matches;
-    const pillCenterX = isCoarse ? rect.right - 6 - 2 : rect.left + rect.width / 2;
-    return clientX >= pillCenterX - 2 - hitPad && clientX <= pillCenterX + 2 + hitPad;
-  };
-
-  // Touchend: tap on the pill toggles sidebar; rest of drag zone only responds to swipe
   edgeZone.addEventListener('touchend', e => {
+    // Only if it was a clean tap (no significant swipe movement)
     if (Math.abs(swipeRT.xDiff || 0) < 15 && Math.abs(swipeRT.yDiff || 0) < 15) {
-      e.preventDefault(); // always prevent 300ms synthetic click
+      e.preventDefault();
-      const touch = e.changedTouches[0];
+      edgeZone.dispatchEvent(new Event('click'));
-      if (touch && isWithinPillArea(touch.clientX, touch.clientY)) {
-        window.toggleSidebarRight();
-      }
     }
   }, { passive: false });
 
-  // Helper: all layout wrappers that have padding-right animated by sidebar state
-  const getSidebarWrappers = () => {
-    // At ≤999px: sidebar is a pure overlay — only pagination tracks it.
-    if (window.innerWidth <= 599) {
-      return document.querySelectorAll('.pagination-container-fluid');
-    }
-    // At ≥600px: exclude pagewrapper when a dedicated layout wrapper is present.
-    // CSS already zeroes pagewrapper.padding-right via :has on those pages,
-    // so including it here causes double-padding (pagewrapper + index-layout-wrapper both
-    // get 300px snapped, making the grid 600px too narrow, then jumping back on settle).
-    const hasDedicatedWrapper = !!(
-      document.querySelector('.index-layout-wrapper') ||
-      document.querySelector('.item-layout-container') ||
-      document.querySelector('.meme-layout-wrapper') ||
-      document.querySelector('.messages-convo-page')
-    );
-    const sel = hasDedicatedWrapper
-      ? '.index-layout-wrapper, .meme-layout-wrapper, .messages-convo-page, .pagination-container-fluid'
-      : '.pagination-container-fluid, .pagewrapper';
-    return document.querySelectorAll(sel);
-  };
-
   // Smoothly toggle sidebar open/closed
   window.toggleSidebarRight = () => {
     const sidebar = document.querySelector('.global-sidebar-right, .item-sidebar-right, .index-sidebar-right');
@@ -6731,29 +6630,6 @@ window.cancelAnimFrame = (function () {
     const sidebarWidth = sidebar.offsetWidth || 300;
     const targetTranslate = isHidden ? -sidebarWidth : sidebarWidth;
 
-    // At ≤599px the sidebar is a pure overlay — never animate wrapper padding
-    const animateWrappers = window.innerWidth > 599;
-
-    // Grid/pagewrapper: snap instantly in both directions (no animated reflow).
-    // Pagination always animates — it tracks sidebar position with no reflow cost.
-    const wrappers = getSidebarWrappers();
-    if (animateWrappers) {
-      wrappers.forEach(w => {
-        const isPagination = w.classList.contains('pagination-container-fluid');
-        const isMessages = w.classList.contains('messages-convo-page');
-        
-        const prop = (isPagination || isMessages) ? 'right' : 'padding-right';
-        const targetVal = isHidden ? sidebarWidth + 'px' : '0px';
-        
-        // Lightweight layouts (pagination, messages) animate smoothly.
-        // Heavy/reflow-intensive layouts snap instantly to avoid reflow lag.
-        const shouldAnimate = (isPagination || isMessages);
-        w.style.setProperty('transition', shouldAnimate ? `${prop} 0.3s ease-in-out` : 'none', 'important');
-        w.style.setProperty(prop, targetVal, 'important');
-      });
-      void sidebar.offsetWidth; // settle layout before sidebar transform begins
-    }
-
     sidebar.style.setProperty('transition', 'transform 0.3s ease-in-out', 'important');
     sidebar.style.transform = `translateX(${targetTranslate}px)`;
 
@@ -6761,22 +6637,13 @@ window.cancelAnimFrame = (function () {
     const settle = () => {
       if (settled) return;
       settled = true;
-      // Freeze wrapper transitions so the class commit doesn't re-trigger them
-      wrappers.forEach(w => w.style.setProperty('transition', 'none', 'important'));
       sidebar.style.setProperty('transition', 'none', 'important');
       const toHidden = !isHidden;
       document.body.classList.toggle('sidebar-right-hidden', toHidden);
       localStorage.setItem('sidebarRightHidden', toHidden);
       void sidebar.offsetWidth;
       sidebar.style.transform = '';
-      requestAnimationFrame(() => {
+      requestAnimationFrame(() => sidebar.style.removeProperty('transition'));
-        sidebar.style.removeProperty('transition');
-        wrappers.forEach(w => {
-          w.style.removeProperty('transition');
-          w.style.removeProperty('padding-right');
-          w.style.removeProperty('right');
-        });
-      });
     };
 
     const onEnd = ev => {
@@ -6788,11 +6655,9 @@ window.cancelAnimFrame = (function () {
     setTimeout(settle, 350);
   };
 
-  // Click on edgeZone: only toggle when the click lands on the pill
+  // Click on edgeZone: smoothly toggle sidebar open/closed
-  edgeZone.addEventListener('click', (e) => {
+  edgeZone.addEventListener('click', () => {
-    if (isWithinPillArea(e.clientX, e.clientY)) {
+    window.toggleSidebarRight();
-      window.toggleSidebarRight();
-    }
   });
   // </mouse-sidebar-drag>
 
@@ -6812,9 +6677,7 @@ window.cancelAnimFrame = (function () {
     });
 
     const isLSActive = () =>
-      document.body.classList.contains('layout-modern') &&
+      document.body.classList.contains('layout-modern') && !!document.querySelector('.item-sidebar-left');
-      !!document.querySelector('.item-sidebar-left') &&
-      window.innerWidth >= 1000;
 
     // Prepare sidebar for drag — keeps it in the CSS grid so overflow:hidden clips translateX.
     // OPEN: removes sidebar-hidden/display:none, places sidebar at translateX(-sw), reflows twice.
@@ -7073,7 +6936,6 @@ window.cancelAnimFrame = (function () {
     };
 
     window.toggleSidebarLeft = () => {
-      if (window.innerWidth < 1000) return;
       const { sb, layout } = getLS();
       if (!sb || !layout) return;
       const isHidden = layout.classList.contains('sidebar-hidden');

public/s/js/messages.js

@@ -1976,73 +1976,6 @@ if (window.__dmLoaded) {
             dmGridArea = document.createElement('div');
             dmGridArea.className = 'emoji-picker-grid';
 
-            // Helper: reliable touch handling for tab buttons on mobile (supports hold-to-action)
-            let lastDmHoldTime = 0;
-            const addDmTabTouch = (btn, cb, onHold) => {
-                let ts = null;
-                let holdTimer = null;
-                let holdFired = false;
-                btn.addEventListener('touchstart', (e) => {
-                    holdFired = false;
-                    ts = { x: e.touches[0].clientX, y: e.touches[0].clientY };
-                    if (onHold) {
-                        holdTimer = setTimeout(() => {
-                            holdFired = true;
-                            lastDmHoldTime = Date.now();
-                            try { navigator.vibrate?.(40); } catch(err) {}
-                            onHold();
-                        }, 500);
-                    }
-                    e.stopPropagation();
-                }, { passive: true });
-
-                btn.addEventListener('touchmove', (e) => {
-                    if (!ts) return;
-                    const dx = Math.abs(e.touches[0].clientX - ts.x);
-                    const dy = Math.abs(e.touches[0].clientY - ts.y);
-                    if (dx > 10 || dy > 10) {
-                        clearTimeout(holdTimer);
-                        ts = null;
-                    }
-                }, { passive: true });
-
-                btn.addEventListener('touchend', (e) => {
-                    clearTimeout(holdTimer);
-                    if (holdFired) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        holdFired = false;
-                        ts = null;
-                        return;
-                    }
-                    if (!ts) return;
-                    const dx = Math.abs(e.changedTouches[0].clientX - ts.x);
-                    const dy = Math.abs(e.changedTouches[0].clientY - ts.y);
-                    ts = null;
-                    if (dx < 10 && dy < 10) { e.preventDefault(); cb(); }
-                });
-
-                btn.addEventListener('touchcancel', () => {
-                    clearTimeout(holdTimer);
-                    holdFired = false;
-                    ts = null;
-                });
-            };
-
-            const toggleDmFavDefault = (tabEl) => {
-                const KEY = 'f0ck_emoji_default_tab';
-                const isDefault = localStorage.getItem(KEY) === '__favs__';
-                if (isDefault) {
-                    localStorage.removeItem(KEY);
-                    tabEl.classList.remove('ep-tab-default');
-                    window._showEmojiToast?.('Favorites unset as default tab');
-                } else {
-                    localStorage.setItem(KEY, '__favs__');
-                    tabEl.classList.add('ep-tab-default');
-                    window._showEmojiToast?.('Favorites set as default tab');
-                }
-            };
-
             // ── Favorites tab ──
             const favsTab = document.createElement('button');
             favsTab.className = 'ep-tab ep-tab-favs';
@@ -2052,13 +1985,22 @@ if (window.__dmLoaded) {
             favsTab.innerHTML = '<i class="fa-solid fa-star" style="font-size:14px;color:var(--emoji-fav-color,#f5c518);"></i>';
             favsTab.addEventListener('mousedown', e => e.preventDefault());
             favsTab.addEventListener('click', () => showDmTab('__favs__', packs));
-            addDmTabTouch(favsTab, () => showDmTab('__favs__', packs), () => toggleDmFavDefault(favsTab));
             // Right-click on fav tab → set/unset as default
             favsTab.addEventListener('contextmenu', (e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                if (Date.now() - lastDmHoldTime < 1000) return;
+                if (navigator.maxTouchPoints > 0) return;
-                toggleDmFavDefault(favsTab);
+                const KEY = 'f0ck_emoji_default_tab';
+                const isDefault = localStorage.getItem(KEY) === '__favs__';
+                if (isDefault) {
+                    localStorage.removeItem(KEY);
+                    favsTab.classList.remove('ep-tab-default');
+                    window._showEmojiToast?.('Favorites unset as default tab');
+                } else {
+                    localStorage.setItem(KEY, '__favs__');
+                    favsTab.classList.add('ep-tab-default');
+                    window._showEmojiToast?.('Favorites set as default tab');
+                }
             });
             // Mark as default if already set
             if (localStorage.getItem('f0ck_emoji_default_tab') === '__favs__') {
@@ -2086,7 +2028,6 @@ if (window.__dmLoaded) {
                 }
                 tab.addEventListener('mousedown', e => e.preventDefault());
                 tab.addEventListener('click', () => showDmTab(pack.id ?? null, packs));
-                addDmTabTouch(tab, () => showDmTab(pack.id ?? null, packs));
                 dmTabBar.appendChild(tab);
             });
 

public/s/js/scroller.js

@@ -1000,10 +1000,9 @@
             e.stopPropagation();
             const itemId = slide.dataset.id;
             try {
-              const csrfToken = window.f0ckSession?.csrf_token || window.scrollerCsrf || '';
               const resp = await fetch(`/api/v2/tags/${itemId}/${encodeURIComponent(tag)}`, {
                 method: 'DELETE',
-                headers: { ...(csrfToken ? { 'X-CSRF-Token': csrfToken } : {}) }
+                headers: { 'x-csrf-token': window.scrollerCsrf || '' }
               });
               const data = await resp.json();
               if (data.success) pill.remove();
@@ -1158,14 +1157,10 @@
       if (nowFaved) flashFav(slide);
     }
     try {
-      const csrfToken = window.f0ckSession?.csrf_token || window.scrollerCsrf || '';
       const resp = await fetch('/api/v2/togglefav', {
         method: 'POST',
-        headers: {
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-          'Content-Type': 'application/x-www-form-urlencoded',
+        body: `postid=${id}`
-          ...(csrfToken ? { 'X-CSRF-Token': csrfToken } : {})
-        },
-        body: `postid=${id}${csrfToken ? `&csrf_token=${encodeURIComponent(csrfToken)}` : ''}`
       });
       const data = await resp.json();
       // Sync count to server truth (handles race conditions)
@@ -1587,10 +1582,9 @@
           e.stopPropagation();
           const itemId = slide.dataset.id;
           try {
-            const csrfToken = window.f0ckSession?.csrf_token || window.scrollerCsrf || '';
             const resp = await fetch(`/api/v2/tags/${itemId}/${encodeURIComponent(t)}`, {
               method: 'DELETE',
-              headers: { ...(csrfToken ? { 'X-CSRF-Token': csrfToken } : {}) }
+              headers: { 'x-csrf-token': window.scrollerCsrf || '' }
             });
             const data = await resp.json();
             if (data.success) pill.remove();
@@ -1856,12 +1850,11 @@
     else if (item.external_board === 'gif') rating = 'nsfw';
 
     try {
-      const csrfToken = window.f0ckSession?.csrf_token || window.scrollerCsrf || '';
       const resp = await fetch('/api/v2/scroller/rehost', {
         method: 'POST',
         headers: { 
           'Content-Type': 'application/x-www-form-urlencoded',
-          ...(csrfToken ? { 'X-CSRF-Token': csrfToken } : {})
+          'x-csrf-token': window.scrollerCsrf || ''
         },
         body: new URLSearchParams({
           url: item.external_media_url || item.dest,
@@ -1973,10 +1966,9 @@
       showShareToast(info.toast);
     }
 
-    const csrfToken = window.f0ckSession?.csrf_token || window.scrollerCsrf || '';
     fetch(`/api/v2/tags/${id}/cycle-rating`, {
       method: 'PUT',
-      headers: { ...(csrfToken ? { 'X-CSRF-Token': csrfToken } : {}) }
+      headers: { 'x-csrf-token': window.scrollerCsrf || '' }
     })
       .then(r => r.json())
       .then(data => {
@@ -2127,12 +2119,7 @@
     const contentEl = commentEl.querySelector('.comment-content');
     if (!contentEl) return;
 
-    let raw = (contentEl.dataset.raw || '').replace(/<br\s*\/?>/gi, '\n').trim();
+    const raw = (contentEl.dataset.raw || '').replace(/<br\s*\/?>/gi, '\n').trim();
-    if (raw.includes('&gt;') || raw.includes('&lt;') || raw.includes('&amp;')) {
-      const txt = document.createElement('textarea');
-      txt.innerHTML = raw;
-      raw = txt.value;
-    }
     const lines = raw.split('\n');
     const quote = `>>${id}\n${lines.map(line => `>${line}`).join('\n')}\n`;
 
@@ -2800,16 +2787,11 @@
       if (!content || !commentsItemId || commentsPosting) return;
       commentsPosting = true; commentSendBtn.disabled = true;
       try {
-        const csrfToken = window.f0ckSession?.csrf_token || window.scrollerCsrf || '';
         let postBody = `item_id=${commentsItemId}&content=${encodeURIComponent(content)}`;
         if (replyToCommentId) postBody += `&parent_id=${replyToCommentId}`;
-        if (csrfToken) postBody += `&csrf_token=${encodeURIComponent(csrfToken)}`;
         const resp = await fetch('/api/comments', {
           method: 'POST',
-          headers: {
+          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-            'Content-Type': 'application/x-www-form-urlencoded',
-            ...(csrfToken ? { 'X-CSRF-Token': csrfToken } : {})
-          },
           body: postBody
         });
         const data = await resp.json();
@@ -2917,14 +2899,10 @@
     if (addTagSendBtn) addTagSendBtn.disabled = true;
     closeSugg();
     try {
-      const csrfToken = window.f0ckSession?.csrf_token || window.scrollerCsrf || '';
       const resp = await fetch(`/api/v2/tags/${targetId}`, {
         method: 'POST',
-        headers: {
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-          'Content-Type': 'application/x-www-form-urlencoded',
+        body: `tagname=${encodeURIComponent(tag)}`
-          ...(csrfToken ? { 'X-CSRF-Token': csrfToken } : {})
-        },
-        body: `tagname=${encodeURIComponent(tag)}${csrfToken ? `&csrf_token=${encodeURIComponent(csrfToken)}` : ''}`
       });
       const data = await resp.json();
       if (data.success) {
@@ -3680,11 +3658,7 @@
       if (sMarkAll) {
         sMarkAll.addEventListener('click', async () => {
           try {
-            const csrfToken = window.f0ckSession?.csrf_token || window.scrollerCsrf || '';
+            await fetch('/api/notifications/read', { method: 'POST' });
-            await fetch('/api/notifications/read', {
-              method: 'POST',
-              headers: { ...(csrfToken ? { 'X-CSRF-Token': csrfToken } : {}) }
-            });
             updateScrollerNotifBadge(0);
             sCachedNotifs = sCachedNotifs.map(n => ({ ...n, is_read: true }));
             updateScrollerTabBadges(sCachedNotifs);
@@ -3699,12 +3673,7 @@
         if (!item) return;
         const nid = item.dataset.id;
         if (nid && item.classList.contains('unread')) {
-          const csrfToken = window.f0ckSession?.csrf_token || window.scrollerCsrf || '';
+          fetch(`/api/notifications/${nid}/read`, { method: 'POST', keepalive: true }).catch(() => {});
-          fetch(`/api/notifications/${nid}/read`, {
-            method: 'POST',
-            keepalive: true,
-            headers: { ...(csrfToken ? { 'X-CSRF-Token': csrfToken } : {}) }
-          }).catch(() => {});
           item.classList.remove('unread');
           // Update cache
           const cached = sCachedNotifs.find(n => String(n.id) === String(nid));

public/s/js/sidebar-activity.js

@@ -47,7 +47,7 @@
         if (!unsafe) return '';
         const div = document.createElement('div');
         div.textContent = unsafe;
-        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+        return div.innerHTML;
     };
 
     const playSidebarEmojiVideos = (container) => {
@@ -271,7 +271,7 @@
                     const rendered = quoteEmojis
                         ? quoteContent.replace(/:([a-z0-9_]+):/g, (m, n) => renderEmoji(m, n))
                         : quoteContent;
-                    return `<span class="greentext">&gt;${rendered.replace(/>/g, '&gt;')}</span>`;
+                    return `<span class="greentext">&gt;${rendered}</span>`;
                 }
 
                 // Per-line limit to prevent marked.parse recursion on single giant lines

public/s/js/user_comments.js

@@ -306,7 +306,7 @@ if (!window.UserCommentSystem) {
                 const trimmed = line.trimStart();
                 if (trimmed.startsWith('>') && !trimmed.match(/^>>\d+/)) {
                     const quoteContent = line.substring(line.indexOf('>') + 1);
-                    return `<span class="greentext">&gt;${quoteContent.replace(/>/g, '&gt;')}</span>`;
+                    return `<span class="greentext">&gt;${quoteContent}</span>`;
                 }
                 
                 // Per-line limit
@@ -450,7 +450,7 @@ if (!window.UserCommentSystem) {
         if (!unsafe) return '';
         const div = document.createElement('div');
         div.textContent = unsafe;
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+        return div.innerHTML;
     }
 }
 }

src/inc/locales/de.json

@@ -4,7 +4,6 @@
     "meme": "Meme",
     "halls": "Hallen",
     "tags": "Tags",
-    "chat": "Chat",
     "search": "Suchen",
     "random": "Zufall",
     "profile": "Profil",

src/inc/locales/en.json

@@ -4,7 +4,6 @@
     "meme": "Meme",
     "halls": "Halls",
     "tags": "Tags",
-    "chat": "Chat",
     "search": "Search",
     "random": "Random",
     "profile": "Profile",

src/inc/locales/nl.json

@@ -4,7 +4,6 @@
     "meme": "meme",
     "halls": "Hallen",
     "tags": "Tags",
-    "chat": "Chat",
     "search": "Zoeken",
     "random": "Willekeurig",
     "profile": "profiel",

src/inc/locales/zange.json

@@ -4,7 +4,6 @@
     "meme": "Memen",
     "halls": "Hallen",
     "tags": "Etiketten",
-    "chat": "Geschwafel",
     "search": "Suche",
     "random": "Zufall",
     "profile": "Profil",

src/inc/routes/apiv2/svelte.mjs

@@ -0,0 +1,212 @@
+/**
+ * f0ckm API v2 — JSON endpoints for the new SvelteKit frontend.
+ *
+ * These routes live alongside the existing flummpress routes and are
+ * purely additive — nothing in the old app is changed or removed.
+ *
+ * Mounted at: /api/v2/
+ */
+import f0cklib from '../../routeinc/f0cklib.mjs';
+import cfg from '../../config.mjs';
+
+const json = (res, body, code = 200) => {
+	res.writeHead(code, { 'Content-Type': 'application/json' });
+	res.end(JSON.stringify(body));
+};
+
+export default (router, _tpl) => {
+
+	// ── GET /api/v2/session ───────────────────────────────────────────────────
+	router.get('/api/v2/session', async (req, res) => {
+		if (!req.session) {
+			return json(res, { loggedIn: false, user: null });
+		}
+		return json(res, {
+			loggedIn: true,
+			user: {
+				id:                  req.session.id,
+				user:                req.session.user,
+				login:               req.session.login,
+				admin:               !!req.session.admin,
+				is_moderator:        !!req.session.is_moderator,
+				mode:                req.session.mode ?? 3,
+				theme:               req.session.theme ?? 'f0ck',
+				avatar:              req.session.avatar ?? null,
+				avatar_file:         req.session.avatar_file ?? null,
+				username_color:      req.session.username_color ?? null,
+				display_name:        req.session.display_name ?? null,
+				use_new_layout:      req.session.use_new_layout ?? true,
+				excluded_tags:       req.session.excluded_tags ?? [],
+				min_xd_score:        req.session.min_xd_score ?? 0,
+				uploads_remaining:   req.session.uploads_remaining,
+				pending_count:       req.session.pending_count,
+				language:            req.session.language ?? null,
+				disable_autoplay:    !!req.session.disable_autoplay,
+				disable_swiping:     !!req.session.disable_swiping,
+				csrf_token:          req.session.csrf_token ?? ''
+			}
+		});
+	});
+
+	// ── GET /api/v2/items ─────────────────────────────────────────────────────
+	router.get('/api/v2/items', async (req, res) => {
+		const q = req.url.qs ?? {};
+		const ratingsRaw = req.cookies?.ratings ?? q.ratings ?? null;
+		const ratingsArr = ratingsRaw
+			? decodeURIComponent(ratingsRaw).split(/[|,]/).filter(r => ['sfw','nsfw','nsfl','untagged'].includes(r))
+			: null;
+
+		const mode = q.mode !== undefined ? +q.mode : req.mode;
+
+		try {
+			const data = await f0cklib.getf0cks({
+				page:       q.page ? +q.page : 1,
+				mode,
+				ratings:    ratingsArr,
+				mime:       q.mime ?? (req.cookies?.mime ?? null),
+				tag:        q.tag ?? null,
+				hall:       q.hall ?? null,
+				user:       q.user ?? null,
+				userHall:   q.userHall ?? null,
+				userHallOwner: q.userHallOwner ?? null,
+				fav:        q.fav === 'true',
+				random:     q.random === '1' || req.cookies?.random_mode === '1',
+				strict:     q.strict === '1' || q.strict === 'true' || !!req.session?.strict_mode,
+				session:    !!req.session,
+				user_id:    req.session?.id ?? null,
+				exclude:    req.session?.excluded_tags ?? [],
+				minXdScore: req.session?.min_xd_score ?? 0,
+				newer:      q.newer ?? null,
+				tagger:     q.tagger ?? null
+			});
+
+			if (!data.success) {
+				return json(res, { success: false, items: [], pagination: null, total: 0, link: null });
+			}
+
+			return json(res, {
+				success:    true,
+				items:      data.items,
+				pagination: data.pagination,
+				total:      data.total,
+				link:       data.link
+			});
+		} catch (e) {
+			console.error('[API v2] /items error:', e);
+			return json(res, { success: false, error: 'Internal error' }, 500);
+		}
+	});
+
+	// ── GET /api/v2/items/:id ─────────────────────────────────────────────────
+	router.get(/^\/api\/v2\/items\/(?<itemid>\d+)$/, async (req, res) => {
+		const itemid = req.params.itemid;
+		const q = req.url.qs ?? {};
+		const ratingsRaw = req.cookies?.ratings ?? q.ratings ?? null;
+		const ratingsArr = ratingsRaw
+			? decodeURIComponent(ratingsRaw).split(/[|,]/).filter(r => ['sfw','nsfw','nsfl','untagged'].includes(r))
+			: null;
+
+		const mode = q.mode !== undefined ? +q.mode : req.mode;
+
+		try {
+			const data = await f0cklib.getf0ck({
+				itemid,
+				mode,
+				ratings:        ratingsArr,
+				session:        !!req.session,
+				user_id:        req.session?.id ?? null,
+				user:           q.user ?? null,
+				tag:            q.tag ?? null,
+				hall:           q.hall ?? null,
+				userHall:       q.userHall ?? null,
+				userHallOwner:  q.userHallOwner ?? null,
+				mime:           q.mime ?? (req.cookies?.mime ?? null),
+				fav:            q.fav === 'true',
+				random:         q.random === '1',
+				strict:         q.strict === '1' || !!req.session?.strict_mode,
+				exclude:        req.session?.excluded_tags ?? [],
+				lang:           req.lang ?? 'en'
+			});
+
+			if (!data.success) {
+				return json(res, { success: false, item: null, message: data.message }, 404);
+			}
+
+			// Precompute hall display data (mirrors existing index route logic)
+			if (data.item?.halls?.length) {
+				const currentHallSlug = data.tmp?.hall
+					? (typeof data.tmp.hall === 'object' ? data.tmp.hall.slug : data.tmp.hall)
+					: null;
+				data.item.primaryHall = data.item.halls.find(h => h.slug === currentHallSlug) || data.item.halls[0];
+				data.item.otherHalls  = data.item.halls.filter(h => h.slug !== data.item.primaryHall.slug);
+			} else if (data.item) {
+				data.item.primaryHall = null;
+				data.item.otherHalls  = [];
+			}
+
+			// Subscription status
+			const isSubscribed = req.session
+				? await f0cklib.getSubscriptionStatus(req.session.id, itemid).catch(() => false)
+				: false;
+
+			// xD Score
+			if (req.session || !cfg.main.hide_comments_from_public) {
+				const commentsForScore = await f0cklib.getComments(itemid, 'old', false);
+				const xdScore = f0cklib.computeXdScore(commentsForScore);
+				const xdMeta  = f0cklib.xdScoreMeta(xdScore);
+				data.item.xd_score = xdScore;
+				data.item.xd_tier  = xdMeta.tier;
+				data.item.xd_label = xdMeta.label;
+			} else {
+				data.item.xd_score = 0;
+				data.item.xd_tier  = 0;
+				data.item.xd_label = '';
+			}
+
+			// Notify read
+			if (req.session?.id) {
+				f0cklib.markNotificationsRead(req.session.id, itemid).catch(() => {});
+			}
+
+			return json(res, {
+				success:      true,
+				item:         data.item,
+				pagination:   data.pagination,
+				link:         data.link,
+				isSubscribed
+			});
+		} catch (e) {
+			console.error('[API v2] /items/:id error:', e);
+			return json(res, { success: false, error: 'Internal error' }, 500);
+		}
+	});
+
+	// ── GET /api/v2/random ────────────────────────────────────────────────────
+	router.get('/api/v2/random', async (req, res) => {
+		const ratingsRaw = req.cookies?.ratings ?? null;
+		const ratingsArr = ratingsRaw
+			? decodeURIComponent(ratingsRaw).split(/[|,]/).filter(r => ['sfw','nsfw','nsfl','untagged'].includes(r))
+			: null;
+
+		try {
+			const data = await f0cklib.getRandom({
+				mode:    req.mode,
+				ratings: ratingsArr,
+				session: !!req.session,
+				mime:    req.cookies?.mime ?? null
+			});
+
+			if (!data.success) {
+				return json(res, { success: false, message: data.message }, 404);
+			}
+
+			const url = encodeURI(`${data.link.main}${data.link.path ?? ''}${data.itemid}${data.link.suffix ?? ''}`);
+			return json(res, { success: true, id: data.itemid, url });
+		} catch (e) {
+			console.error('[API v2] /random error:', e);
+			return json(res, { success: false, error: 'Internal error' }, 500);
+		}
+	});
+
+	return router;
+};

src/inc/routes/apiv2/tags.mjs

@@ -25,8 +25,7 @@ export default router => {
 
     group.post(/$/, lib.loggedin, async (req, res) => {
       // assign and/or create tag
-      const rawTagname = req.post?.tagname || req.body?.tagname;
+      if (!req.params.postid || !req.post.tagname) {
-      if (!req.params.postid || !rawTagname) {
         return res.json({
           success: false,
           msg: 'missing postid or tag'
@@ -34,7 +33,7 @@ export default router => {
       }
 
       const postid = +req.params.postid;
-      const tagname = rawTagname.trim();
+      const tagname = req.post.tagname?.trim();
       const protectedTags = ['sfw', 'nsfw', 'nsfl'];
 
       if (protectedTags.includes(tagname.toLowerCase())) {

src/inc/routes/chat.mjs

@@ -47,25 +47,6 @@ function buildBgHostRegex() {
 
 export default (router, tpl) => {
 
-    // GET /chat — Dedicated site chat page
-    router.get('/chat', async (req, res) => {
-        if (!cfg.websrv.enable_global_chat) {
-            return res.reply({ code: 404, body: 'Not found' });
-        }
-        if (!req.session) {
-            return res.redirect('/login');
-        }
-        if (req.session.banned) {
-            return res.reply({ code: 403, body: 'Access denied: You are banned' });
-        }
-        return res.html(tpl.render('chat', {
-            session: req.session,
-            hidePagination: true,
-            link: { main: '/chat', path: '/chat' },
-            domain: cfg.main.url.domain
-        }, req));
-    });
-
     // GET /api/chat — fetch recent messages
     router.get('/api/chat', async (req, res) => {
         if (!cfg.websrv.enable_global_chat) {

src/inc/routes/toptags.mjs

@@ -95,7 +95,7 @@ export default (router, tpl) => {
     if (req.headers['x-requested-with'] === 'XMLHttpRequest' || query.ajax) {
       return res.json({
         success: true,
-        html: tpl.render('tag-cards', { toptags: tags, user: req.session?.user ? { user: req.session.user } : null, session: (req.session && req.session.user) ? { ...req.session } : false }, req),
+        html: tpl.render('tag-cards', { toptags: tags, session: (req.session && req.session.user) ? { ...req.session } : false }, req),
         currentPage: page,
         hasMore: tags.length === TAGS_PER_PAGE
       });
@@ -128,7 +128,6 @@ export default (router, tpl) => {
       phrase,
       tmp: null,
       hidePagination: true,
-      user: req.session?.user ? { user: req.session.user } : null,
       session: (req.session && req.session.user) ? { ...req.session } : false,
       page_meta: {
         title: 'Tags',

src/index.mjs

@@ -614,7 +614,9 @@ process.on('uncaughtException', err => {
       let _cachedRow = _scGet(_sessionHash);
       let user;
       if (_cachedRow) {
-        user = [_cachedRow];
+        // Shallow-clone the cached row so per-request mutations (theme, uploads_remaining,
+        // pending_count, etc.) don't corrupt the shared cache entry.
+        user = [{ ..._cachedRow }];
       } else {
         user = await db`
           select "user".id, "user".login, "user".user, "user".admin, "user".is_moderator, "user".banned, "user".ban_reason, "user".ban_expires, "user".force_password_change, "user_sessions".id as sess_id, "user_sessions".csrf_token, "user_options".mode, "user_options".theme, "user_options".fullscreen, "user_options".excluded_tags, "user_options".avatar, "user_options".avatar_file, "user_options".show_motd, "user_options".strict_mode, "user_options".show_background, "user_options".use_new_layout, "user_options".username_color, "user_options".font, "user_options".disable_autoplay, "user_options".disable_swiping, "user_options".description, "user_options".display_name, COALESCE("user_options".min_xd_score, 0) as min_xd_score, "user_options".ruffle_volume, "user_options".ruffle_background, "user_options".quote_emojis, "user_options".embed_youtube_in_comments, "user_options".hide_koepfe, "user_options".language, "user_options".use_alternative_infobox, "user_options".use_alternative_steuerung, "user_options".receive_system_notifications, "user_options".receive_user_notifications, "user_options".do_not_disturb, "user_options".comment_display_mode, "user_options".force_comment_display_mode
@@ -624,7 +626,8 @@ process.on('uncaughtException', err => {
           where "user_sessions".session = ${_sessionHash}
           limit 1
         `;
-        if (user.length > 0) _scSet(_sessionHash, user[0]);
+        // Store a plain-object clone — keeps the cache entry free of per-request fields.
+        if (user.length > 0) _scSet(_sessionHash, { ...user[0] });
       }
 
       if (user.length === 0) {

views/chat.html

@@ -1,9 +0,0 @@
-@include(snippets/header)
-<div class="pagewrapper">
-<div id="main" class="chat-page">
-    <div id="site-chat-container" class="site-chat-container">
-        <!-- Site chat widget is mounted here by globalchat.js -->
-    </div>
-</div>
-</div>
-@include(snippets/footer)

views/meme-creator.html

@@ -8,7 +8,7 @@
                 .meme-title { font-family: 'Impact', 'VCR', sans-serif; }
                 
                 /* NUCLEAR VISIBILITY RESET: Override any and all parent constraints for this page */
-                @media (max-width: 1250px) {
+                @media (max-width: 950px) {
                     /* Target all possible shell triggers */
                     html, body, .pagewrapper, #main, .layout-modern react-wrapper, .layout-legacy react-wrapper { 
                         height: auto !important; 

views/snippets/header.html

@@ -8,7 +8,6 @@
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="apple-mobile-web-app-title" content="{{ domain }}">
-  <script>(function(){var h=document.documentElement;if(localStorage.getItem('hideItemRatings')==='true')h.classList.add('hide-item-ratings-active');if(localStorage.getItem('blurNsfw')==='true')h.classList.add('blur-nsfw-active');if(localStorage.getItem('blurNsfl')==='true')h.classList.add('blur-nsfl-active');if(localStorage.getItem('blurSfw')==='true')h.classList.add('blur-sfw-active');if(localStorage.getItem('blurUntagged')==='true')h.classList.add('blur-untagged-active');if(localStorage.getItem('blurDetail')!=='false')h.classList.add('blur-detail-active');if(localStorage.getItem('imageExpandOnClick')!=='false')h.classList.add('image-expand-active');})();</script>
   <style>
     html { background-color: #000; color: #fff; }
     @if(session && session.font)
@@ -23,7 +22,6 @@
     }
     @endif
     :root {
-      --favicon-url: url('@if(custom_favicon && custom_favicon.length > 0){{ custom_favicon }}@else/s/img/favicon.gif@endif');
       @if(session && session.font)
       --font: 'CustomUserFont', monospace !important;
       @elseif(typeof default_font !== 'undefined' && default_font && default_font.length > 0)

views/snippets/navbar.html

@@ -26,9 +26,6 @@
         </div>
         @endif
         <a href="/tags" title="{{ t('nav.tags') }}"><i class="fa-solid fa-tags"></i></a>
-        @if(enable_global_chat)
-        <a href="/chat" title="{{ t('nav.chat') }}"><i class="fa-solid fa-comments"></i></a>
-        @endif
         @if(abyss_enabled)
         <a href="/abyss" title="{{ t('nav.abyss') }}"><i class="fa-solid fa-dice-d6"></i></a>
         @endif