Security hardening, code quality, and ESLint setup

- Remove production DB dump (db_backup_*.sql) and update.log from git tracking
- Add DB backups to .gitignore
- Replace all console.log/console.error with structured logger module
- Translate Dutch error messages to English (link-discord.ts)
- Remove dead code blocks (register-form.tsx false && pattern)
- Add ESLint flat config with TypeScript, React, Next.js, jsx-a11y, and security plugins
- Add Prettier config
- Add eslint-plugin-security for security-aware linting
- Fix all 119+ ESLint warnings across the codebase:
  - Resolve security/detect-object-injection with safe access patterns
  - Resolve security/detect-non-literal-fs-filename with path traversal validation
  - Replace <img> with next/image <Image> component
  - Remove unused variables and imports
  - Replace non-null assertions with proper type guards
  - Replace <a> with <Link> for internal navigation
  - Use next/script Script component for external scripts
- Fix setState-in-useEffect anti-patterns (navbar-color-picker, logo-generator, theme-switcher)
- Add lint and format scripts to package.json

All checks: typecheck ✓, tests 58/58 ✓, lint 0 errors 0 warnings ✓

src/app/admin/achievements/page.tsx

@@ -18,7 +18,7 @@ type Achievement = {
 export default async function AdminAchievements() {
   const t = await getTranslations("pages.admin.achievements");
 
-  let achievements: Achievement[] = [];
+  let achievements: Achievement[];
   try {
     achievements = await prisma.achievements.findMany({
       select: {

src/app/admin/ads/page.tsx

@@ -8,7 +8,7 @@ export const dynamic = "force-dynamic";
 
 export default async function AdminAds() {
   const t = await getTranslations("pages.admin.ads");
-  let ads: Awaited<ReturnType<typeof prisma.websiteAds.findMany>> = [];
+  let ads: Awaited<ReturnType<typeof prisma.websiteAds.findMany>>;
   try {
     ads = await prisma.websiteAds.findMany({
       orderBy: { id: "desc" },

src/app/admin/alerts/page.tsx

@@ -56,7 +56,7 @@ function Badge({ label, color }: { label: string; color: string }) {
 export default async function AdminAlerts() {
   const t = await getTranslations("pages.admin.alerts");
 
-  let alerts: Awaited<ReturnType<typeof prisma.alertLogs.findMany>> = [];
+  let alerts: Awaited<ReturnType<typeof prisma.alertLogs.findMany>>;
   try {
     alerts = await prisma.alertLogs.findMany({
       orderBy: { id: "desc" },

src/app/admin/applications/page.tsx

@@ -21,7 +21,7 @@ function formatDate(d: Date | null): string {
 
 export default async function AdminApplications() {
   const t = await getTranslations("pages.admin.applications");
-  let applications: ApplicationRow[] = [];
+  let applications: ApplicationRow[];
   try {
     applications = await prisma.websiteStaffApplications.findMany({
       orderBy: { createdAt: "desc" },

src/app/admin/badges/page.tsx

@@ -16,7 +16,7 @@ export default async function AdminBadges({
   const t = await getTranslations("pages.admin.badges");
   const { uploaded, error } = await searchParams;
 
-  let badges: Awaited<ReturnType<typeof prisma.websiteBadges.findMany>> = [];
+  let badges: Awaited<ReturnType<typeof prisma.websiteBadges.findMany>>;
   try {
     badges = await prisma.websiteBadges.findMany({
       orderBy: { badgeName: "asc" },

src/app/admin/calendar/[id]/page.tsx

@@ -2,7 +2,6 @@ import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { notFound } from "next/navigation";
 import { prisma } from "@/lib/prisma";
-import { Calendar } from "lucide-react";
 
 export const dynamic = "force-dynamic";
 

src/app/admin/favicon/favicon-form.tsx

@@ -2,6 +2,7 @@
 
 import { useRef, useState } from "react";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 import { saveFavicon, deleteFavicon } from "@/actions/save-favicon";
 import { FaviconGenerator } from "./favicon-generator";
 
@@ -70,10 +71,13 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
               {t("current")}
             </label>
             <div className="flex items-center gap-4">
-              <img
+              <Image
                 src={preview}
                 alt="Favicon preview"
-                className="w-16 h-16 rounded-lg border-2 border-[var(--border-subtle)] object-contain bg-white"
+                width={64}
+                height={64}
+                className="rounded-lg border-2 border-[var(--border-subtle)] object-contain bg-white"
+                unoptimized
               />
               <div className="text-xs text-[var(--color-text-muted)] break-all">{preview}</div>
             </div>

src/app/admin/housekeeping/page.tsx

@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { deletePermission, upsertPermission } from "@/actions/admin-housekeeping";
-import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";

src/app/admin/layout.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import type { ReactNode } from "react";
 import { getTranslations } from "next-intl/server";
@@ -90,9 +91,6 @@ function getNavGroups(t: (key: string) => string) {
 
 export default async function AdminLayout({ children }: { children: ReactNode }) {
   const staff = await requireStaff();
-  const t = await getTranslations("pages.admin.nav");
-  const navGroups = getNavGroups(t);
-
   if (await siteSettings.getBool("force_staff_2fa", false)) {
     const u = await prisma.user
       .findUnique({ where: { id: staff.id }, select: { twoFactorConfirmedAt: true } })
@@ -147,13 +145,13 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
       </nav>
 
       <div className="px-3 py-3 border-t border-white/[0.06]">
-        <a
+        <Link
           href="/"
           className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[#c8cbe0]/60 text-xs font-medium hover:text-white hover:bg-white/5 transition-all duration-150 no-underline"
         >
           <LogOut size={14} />
           <span>{t("backToSite")}</span>
-        </a>
+        </Link>
       </div>
     </aside>
   );

src/app/admin/radio/autodj/page.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import Image from 'next/image';
 import { createTrack, deleteTrack, toggleTrack } from '@/actions/admin-radio-autodj';
 import { StatusCard } from '@/components/admin/dashboard';
 import { prisma } from '@/lib/prisma';
@@ -220,12 +221,13 @@ export default async function AdminRadioAutoDjPage() {
                     <td>
                       <span className="inline-flex gap-2 items-center">
                         {track.artworkUrl ? (
-                          <img
+                          <Image
                             src={track.artworkUrl}
                             alt=""
                             width={32}
                             height={32}
                             style={{ borderRadius: 4, objectFit: 'cover' }}
+                            unoptimized
                           />
                         ) : null}
                         <strong>{track.title}</strong>

src/app/admin/radio/banners/page.tsx

@@ -6,7 +6,8 @@ import {
 } from '@/actions/admin-radio-extra';
 import { prisma } from '@/lib/prisma';
 import { StatusCard } from '@/components/admin/dashboard';
-import { Image } from 'lucide-react';
+import NextImage from 'next/image';
+import { Image as LucideImage } from 'lucide-react';
 import { getTranslations } from "next-intl/server";
 
 export const dynamic = 'force-dynamic';
@@ -66,7 +67,7 @@ export default async function AdminRadioBannersPage() {
 
       <div className="flex items-center gap-3 mb-6">
         <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
-          <Image size={20} className="text-[var(--color-primary)]" />
+          <LucideImage size={20} className="text-[var(--color-primary)]" />
         </div>
         <div>
           <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("banners.heading")}</h1>
@@ -176,10 +177,13 @@ export default async function AdminRadioBannersPage() {
                 </div>
 
                 {b.imagePath ? (
-                  <img
+                  <NextImage
                     src={b.imagePath}
                     alt={b.title ?? t("banners.bannerAlt")}
+                    width={800}
+                    height={200}
                     className="article-img my-2"
+                    unoptimized
                   />
                 ) : null}
 

src/app/admin/radio/embed/page.tsx

@@ -100,7 +100,7 @@ export default async function AdminRadioEmbedPage() {
               {t("embedPage.livePreviewText")}
             </p>
             <div className="admin-card">
-              {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+              { }
               <audio controls preload="none" src={streamUrl} style={{ width: '100%' }}>
                 {t("embedPage.audioUnsupported")}
               </audio>

src/app/admin/radio/monitoring/page.tsx

@@ -65,6 +65,7 @@ function isRecord(v: unknown): v is Record<string, unknown> {
 }
 
 function pickString(obj: Record<string, unknown>, key: string): string | null {
+  // eslint-disable-next-line security/detect-object-injection -- only called with hardcoded keys
   const v = obj[key];
   return typeof v === 'string' && v.trim() !== '' ? v.trim() : null;
 }
@@ -110,6 +111,7 @@ function findNumberDeep(value: unknown, keys: string[], depth = 0): number | nul
   if (typeof value === 'number' && Number.isFinite(value)) return value;
   if (!isRecord(value)) return null;
   for (const key of keys) {
+    // eslint-disable-next-line security/detect-object-injection -- keys from hardcoded array
     const v = value[key];
     if (typeof v === 'number' && Number.isFinite(v)) return v;
     if (typeof v === 'string' && v.trim() !== '' && Number.isFinite(Number(v))) {

src/app/admin/settings/page.tsx

@@ -1,6 +1,5 @@
 import { getTranslations } from "next-intl/server";
 import { createSetting, deleteSetting, updateSetting } from "@/actions/admin-settings";
-import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";

src/app/admin/theme/page.tsx

@@ -146,6 +146,7 @@ export default async function AdminTheme({
                         width: 14,
                         height: 14,
                         borderRadius: 3,
+                        // eslint-disable-next-line security/detect-object-injection -- k from hardcoded array
                         background: palette[k],
                         boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.15)",
                         marginLeft: -3,