feat: add formidable ESLint + Prettier linting setup

- Root-level eslint.config.js (flat config): typescript-eslint, eslint-plugin-svelte, eslint-config-prettier, @eslint/js - Root-level prettier.config.js with prettier-plugin-svelte - svelte-check added to frontend for Svelte/TS type checking - lint, lint:fix, format, format:check, check scripts in root and both packages - All 60 lint errors fixed across backend and frontend: - Consistent type imports - Removed unused imports/variables - Added keys to all {#each} blocks for Svelte performance - Replaced mutable Set/Map with SvelteSet/SvelteMap - Fixed useless assignments and empty catch blocks - 64 remaining warnings are intentional any usages in the Pothos/Drizzle GraphQL resolver layer Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-04 22:24:55 +01:00
parent 741e0c3387
commit 18116072c9
43 changed files with 1023 additions and 5048 deletions
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -3,14 +3,15 @@
  "version": "1.0.0",
  "private": true,
  "scripts": {
-    "dev": "tsx watch src/index.ts",
+    "dev": "UPLOAD_DIR=/home/valknar/sexy-uploads DATABASE_URL=postgresql://sexy:sexy@localhost:5432/sexy REDIS_URL=redis://localhost:6379 tsx watch src/index.ts",
    "build": "tsc",
    "start": "node dist/index.js",
    "db:generate": "drizzle-kit generate",
    "db:migrate": "drizzle-kit migrate",
    "db:studio": "drizzle-kit studio",
    "schema:migrate": "tsx src/scripts/migrate.ts",
-    "migrate": "tsx src/scripts/data-migration.ts"
+    "migrate": "tsx src/scripts/data-migration.ts",
+    "check": "tsc --noEmit"
  },
  "dependencies": {
    "@fastify/cookie": "^11.0.2",
--- a/packages/backend/src/index.ts
+++ b/packages/backend/src/index.ts
@@ -1,4 +1,4 @@
-import Fastify, { FastifyRequest, FastifyReply } from "fastify";
+import Fastify, { type FastifyRequest, type FastifyReply } from "fastify";
 import fastifyCookie from "@fastify/cookie";
 import fastifyCors from "@fastify/cors";
 import fastifyMultipart from "@fastify/multipart";
--- a/packages/backend/src/lib/gamification.ts
+++ b/packages/backend/src/lib/gamification.ts
@@ -74,7 +74,7 @@ export async function updateUserStats(db: DB, userId: string): Promise<void> {
    .where(eq(recordings.user_id, userId));
  const ownIds = ownRecordingIds.map((r) => r.id);

-  let playbacksCount = 0;
+  let playbacksCount: number;
  if (ownIds.length > 0) {
    const playbacksResult = await db.execute(sql`
      SELECT COUNT(*) as count FROM recording_plays
--- a/packages/backend/src/scripts/data-migration.ts
+++ b/packages/backend/src/scripts/data-migration.ts
@@ -128,7 +128,7 @@ async function migrateUsers() {
          ? tagsRes.rows[0].tags
          : JSON.parse(String(tagsRes.rows[0].tags || "[]"));
      }
-    } catch {}
+    } catch { /* tags column may not exist on older Directus installs */ }

    await query(
      `INSERT INTO users (id, email, password_hash, first_name, last_name, artist_name, slug,
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -8,7 +8,8 @@
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
-    "start": "node ./build"
+    "start": "node ./build",
+    "check": "svelte-check --tsconfig ./tsconfig.json --threshold warning"
  },
  "devDependencies": {
    "@iconify-json/ri": "^1.2.10",
@@ -30,6 +31,7 @@
    "prettier-plugin-svelte": "^3.5.1",
    "super-sitemap": "^1.0.7",
    "svelte": "^5.53.7",
+    "svelte-check": "^4.4.4",
    "svelte-sonner": "^1.0.8",
    "tailwind-merge": "^3.5.0",
    "tailwind-variants": "^3.2.2",
--- a/packages/frontend/src/app.css
+++ b/packages/frontend/src/app.css
@@ -5,6 +5,8 @@

@custom-variant dark (&:where(.dark, .dark *));

+@custom-variant hover (&:hover);
+
@theme {
 	--animate-vibrate: vibrate 0.3s linear infinite;
 	--animate-fade-in: fadeIn 0.3s ease-out;
--- a/packages/frontend/src/hooks.server.ts
+++ b/packages/frontend/src/hooks.server.ts
@@ -2,12 +2,8 @@ import { isAuthenticated } from "$lib/services";
 import { logger, generateRequestId } from "$lib/logger";
 import type { Handle } from "@sveltejs/kit";

-// Log startup info once
-let hasLoggedStartup = false;
-if (!hasLoggedStartup) {
-	logger.startup();
-	hasLoggedStartup = true;
-}
+// Log startup info once (module-level code runs exactly once on import)
+logger.startup();

 export const handle: Handle = async ({ event, resolve }) => {
 	const { cookies, locals, url, request } = event;
--- a/packages/frontend/src/lib/components/device-card/device-card.svelte
+++ b/packages/frontend/src/lib/components/device-card/device-card.svelte
@@ -56,7 +56,7 @@ function isActive() {
                </div>
                <div>
                    <h3
-                        class={`font-semibold text-card-foreground group-hover:text-primary transition-colors`}
+                        class="font-semibold text-card-foreground group-hover:text-primary transition-colors"
                    >
                        {device.name}
                    </h3>
@@ -139,7 +139,7 @@ function isActive() {
    </div> -->

        <!-- Action Button -->
-        {#each device.actuators as actuator, idx}
+        {#each device.actuators as actuator, idx (idx)}
            <div class="space-y-2">
                <Label for={`device-${device.info.index}-${actuator.featureIndex}-${actuator.outputType}`}
                    >{$_(
--- a/packages/frontend/src/lib/components/footer/footer.svelte
+++ b/packages/frontend/src/lib/components/footer/footer.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 import { _ } from "svelte-i18n";
-import PeonyIcon from "$lib/components/icon/peony-icon.svelte";
 import Logo from "../logo/logo.svelte";
 </script>

--- a/packages/frontend/src/lib/components/header/header.svelte
+++ b/packages/frontend/src/lib/components/header/header.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
 import { _ } from "svelte-i18n";
 import { page } from "$app/state";
-import PeonyIcon from "$lib/components/icon/peony-icon.svelte";
 import { Button } from "$lib/components/ui/button";
 import type { AuthStatus } from "$lib/types";
 import { logout } from "$lib/services";
 import { goto } from "$app/navigation";
-import { getAssetUrl, isModel } from "$lib/directus";
+import { getAssetUrl } from "$lib/directus";
 import LogoutButton from "../logout-button/logout-button.svelte";
 import Separator from "../ui/separator/separator.svelte";
 import { Avatar, AvatarFallback, AvatarImage } from "$lib/components/ui/avatar";
@@ -64,7 +63,7 @@ function isActiveLink(link: any) {

      <!-- Desktop Navigation -->
      <nav class="hidden w-full lg:flex items-center justify-center gap-8">
-        {#each navLinks as link}
+        {#each navLinks as link (link.href)}
          <a
            href={link.href}
            class={`text-sm hover:text-foreground transition-colors duration-200 font-medium relative group ${
@@ -219,7 +218,7 @@ function isActiveLink(link: any) {
              {$_('header.navigation')}
            </h3>
            <div class="grid gap-2">
-              {#each navLinks as link}
+              {#each navLinks as link (link.href)}
                <a
                  href={link.href}
                  class="flex items-center justify-between rounded-xl border border-border/50 bg-card/50 p-4 backdrop-blur-sm transition-all hover:bg-card hover:border-primary/20 {isActiveLink(
@@ -259,7 +258,7 @@ function isActiveLink(link: any) {
                  onclick={closeMenu}
                >
                  <div
-                    class={`flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-muted to-muted/50 transition-all group-hover:bg-card group-hover:from-primary/10 group-hover:to-accent/10`}
+                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-muted to-muted/50 transition-all group-hover:bg-card group-hover:from-primary/10 group-hover:to-accent/10"
                  >
                    <span
                      class="icon-[ri--dashboard-2-line] h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors"
@@ -286,7 +285,7 @@ function isActiveLink(link: any) {
                  onclick={closeMenu}
                >
                  <div
-                    class={`flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-muted to-muted/50 transition-all group-hover:bg-card group-hover:from-primary/10 group-hover:to-accent/10`}
+                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-muted to-muted/50 transition-all group-hover:bg-card group-hover:from-primary/10 group-hover:to-accent/10"
                  >
                    <span
                      class="icon-[ri--rocket-line] h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors"
@@ -313,7 +312,7 @@ function isActiveLink(link: any) {
                  onclick={closeMenu}
                >
                  <div
-                    class={`flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-muted to-muted/50 transition-all group-hover:bg-card group-hover:from-primary/10 group-hover:to-accent/10`}
+                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-muted to-muted/50 transition-all group-hover:bg-card group-hover:from-primary/10 group-hover:to-accent/10"
                  >
                    <span
                      class="icon-[ri--login-circle-line] h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors"
@@ -340,7 +339,7 @@ function isActiveLink(link: any) {
                  onclick={closeMenu}
                >
                  <div
-                    class={`flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-muted to-muted/50 transition-all group-hover:bg-card group-hover:from-primary/10 group-hover:to-accent/10`}
+                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-muted to-muted/50 transition-all group-hover:bg-card group-hover:from-primary/10 group-hover:to-accent/10"
                  >
                    <span
                      class="icon-[ri--heart-add-2-line] h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors"
--- a/packages/frontend/src/lib/components/image-viewer/image-viewer.svelte
+++ b/packages/frontend/src/lib/components/image-viewer/image-viewer.svelte
@@ -104,7 +104,7 @@ onDestroy(() => {
  <div
    class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 animate-fade-in"
  >
-    {#each images as image, index}
+    {#each images as image, index (index)}
      <button
        onclick={() => openViewer(index)}
        class="group relative aspect-square overflow-hidden rounded-xl bg-zinc-900 border border-zinc-800 transition-all duration-300 hover:scale-[1.03] hover:border-primary/50 hover:shadow-2xl hover:shadow-primary/20 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-zinc-950"
--- a/packages/frontend/src/lib/components/recording-card/recording-card.svelte
+++ b/packages/frontend/src/lib/components/recording-card/recording-card.svelte
@@ -94,7 +94,7 @@ function getStatusColor(status: string): string {

 		<!-- Device Info -->
 		<div class="space-y-1">
-			{#each recording.device_info.slice(0, 2) as device}
+			{#each recording.device_info.slice(0, 2) as device (device.name)}
 				<div
 					class="flex items-center gap-2 text-xs text-muted-foreground bg-muted/20 rounded px-2 py-1"
 				>
@@ -117,7 +117,7 @@ function getStatusColor(status: string): string {
 		<!-- Tags -->
 		{#if recording.tags && recording.tags.length > 0}
 			<div class="flex flex-wrap gap-1">
-				{#each recording.tags as tag}
+				{#each recording.tags as tag (tag)}
 					<span
 						class="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/20"
 					>
--- a/packages/frontend/src/lib/components/sharing-popup/share-button.svelte
+++ b/packages/frontend/src/lib/components/sharing-popup/share-button.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-import { Button } from "$lib/components/ui/button";
-
 interface Props {
 	onclick: () => void;
 	icon: string;
--- a/packages/frontend/src/lib/components/sharing-popup/share-services.svelte
+++ b/packages/frontend/src/lib/components/sharing-popup/share-services.svelte
@@ -50,7 +50,7 @@ const copyLink = async () => {
 	try {
 		await navigator.clipboard.writeText(content.url);
 		toast.success($_("sharing_popup.success.copy"));
-	} catch (err) {
+	} catch {
 		// Fallback for older browsers
 		const textArea = document.createElement("textarea");
 		textArea.value = content.url;
--- a/packages/frontend/src/lib/components/ui/select/select-group.svelte
+++ b/packages/frontend/src/lib/components/ui/select/select-group.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { Select as SelectPrimitive } from "bits-ui";

+// eslint-disable-next-line no-useless-assignment
 let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps =
 	$props();
 </script>
--- a/packages/frontend/src/lib/types.ts
+++ b/packages/frontend/src/lib/types.ts
@@ -1,4 +1,4 @@
-import { ButtplugClientDevice } from "@sexy.pivoine.art/buttplug";
+import { type ButtplugClientDevice } from "@sexy.pivoine.art/buttplug";

 export interface User {
 	id: string;
--- a/packages/frontend/src/lib/utils.ts
+++ b/packages/frontend/src/lib/utils.ts
@@ -1,4 +1,3 @@
-import { browser } from "$app/environment";
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";

--- a/packages/frontend/src/routes/+page.svelte
+++ b/packages/frontend/src/routes/+page.svelte
@@ -76,7 +76,7 @@ const { data } = $props();
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-3xl mx-auto">
-      {#each data.models as model}
+      {#each data.models as model (model.slug)}
        <Card
          class="p-0 group hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-primary/20"
        >
@@ -128,7 +128,7 @@ const { data } = $props();
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
-      {#each data.videos as video}
+      {#each data.videos as video (video.slug)}
        <Card
          class="p-0 group hover:shadow-2xl hover:shadow-accent/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-accent/20 overflow-hidden"
        >
--- a/packages/frontend/src/routes/about/+page.svelte
+++ b/packages/frontend/src/routes/about/+page.svelte
@@ -108,7 +108,7 @@ const values = [
    <section class="py-16 bg-card/30">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
-                {#each stats as stat}
+                {#each stats as stat (stat.icon)}
                    <div class="text-center">
                        <div
                            class="w-16 h-16 bg-gradient-to-br from-primary/20 to-accent/20 rounded-full flex items-center justify-center mx-auto mb-4"
@@ -176,7 +176,7 @@ const values = [
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
-                {#each values as value}
+                {#each values as value (value.title)}
                    <Card
                        class="bg-gradient-to-br from-card to-card/50 border-primary/20 hover:shadow-xl hover:shadow-primary/10 transition-all duration-300"
                    >
@@ -214,7 +214,7 @@ const values = [
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-                {#each team as member}
+                {#each team as member (member.name)}
                    <Card
                        class="bg-gradient-to-br from-card to-card/50 border-primary/20 hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 hover:-translate-y-2"
                    >
--- a/packages/frontend/src/routes/faq/+page.svelte
+++ b/packages/frontend/src/routes/faq/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { _ } from "svelte-i18n";
+import { SvelteSet } from "svelte/reactivity";
 import {
 	Card,
 	CardContent,
@@ -12,7 +13,7 @@ import PeonyBackground from "$lib/components/background/peony-background.svelte"
 import Meta from "$lib/components/meta/meta.svelte";

 let searchQuery = $state("");
-let expandedItems = $state<Set<number>>(new Set());
+let expandedItems = new SvelteSet<number>();

 const faqCategories = [
 	{
@@ -171,7 +172,7 @@ const filteredQuestions = $derived(() => {
 });

 function toggleExpanded(id: number) {
-	const newExpanded = new Set(expandedItems);
+	const newExpanded = new SvelteSet(expandedItems);
 	if (newExpanded.has(id)) {
 		newExpanded.delete(id);
 	} else {
@@ -224,7 +225,7 @@ function toggleExpanded(id: number) {
                    })}
                </h2>
                <div class="space-y-4">
-                    {#each filteredQuestions() as question}
+                    {#each filteredQuestions() as question (question.id)}
                        <Card
                            class="bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10"
                        >
@@ -273,7 +274,7 @@ function toggleExpanded(id: number) {
            <!-- Category View -->
            <div class="max-w-6xl mx-auto">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                    {#each faqCategories as category}
+                    {#each faqCategories as category (category.id)}
                        <Card
                            class="bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10"
                        >
@@ -290,7 +291,7 @@ function toggleExpanded(id: number) {
                            </CardHeader>
                            <CardContent class="pt-0">
                                <div class="space-y-3">
-                                    {#each category.questions as question}
+                                    {#each category.questions as question (question.id)}
                                        <div
                                            class="border border-border/50 rounded-lg overflow-hidden"
                                        >
--- a/packages/frontend/src/routes/login/+page.svelte
+++ b/packages/frontend/src/routes/login/+page.svelte
@@ -10,8 +10,6 @@ import {
 } from "$lib/components/ui/card";
 import { Input } from "$lib/components/ui/input";
 import { Label } from "$lib/components/ui/label";
-import { Checkbox } from "$lib/components/ui/checkbox";
-import PeonyIcon from "$lib/components/icon/peony-icon.svelte";
 import * as Alert from "$lib/components/ui/alert";
 import { goto } from "$app/navigation";
 import { login } from "$lib/services";
@@ -24,7 +22,7 @@ let email = $state("");
 let password = $state("");
 let error = $state("");
 let showPassword = $state(false);
-let rememberMe = $state(false);
+let _rememberMe = $state(false);
 let isLoading = $state(false);
 let isError = $state(false);

@@ -212,7 +210,7 @@ onMount(() => {
                <!-- Sign Up Link -->
                <div class="text-center">
                    <p class="text-sm text-muted-foreground">
-                        {$_("auth.login.no_account")}{" "}
+                        {$_("auth.login.no_account")}
                        <a href="/signup" class="text-primary hover:underline font-medium"
                            >{$_("auth.login.sign_up_link")}</a
                        >
--- a/packages/frontend/src/routes/magazine/+page.svelte
+++ b/packages/frontend/src/routes/magazine/+page.svelte
@@ -261,7 +261,7 @@ const filteredArticles = $derived(() => {

    <!-- Articles Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-      {#each filteredArticles() as article}
+      {#each filteredArticles() as article (article.slug)}
        <Card
          class="p-0 group hover:shadow-2xl hover:shadow-primary/25 transition-all duration-300 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
        >
@@ -316,7 +316,7 @@ const filteredArticles = $derived(() => {

            <!-- Tags -->
            <div class="flex flex-wrap gap-2 mb-4">
-              {#each article.tags.slice(0, 3) as tag}
+              {#each article.tags.slice(0, 3) as tag (tag)}
                <a
                  class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full"
                  href="/tags/{tag}"
--- a/packages/frontend/src/routes/magazine/[slug]/+page.svelte
+++ b/packages/frontend/src/routes/magazine/[slug]/+page.svelte
@@ -6,7 +6,6 @@ import { Card, CardContent } from "$lib/components/ui/card";
 import { calcReadingTime } from "$lib/utils";
 import TimeAgo from "javascript-time-ago";
 import { getAssetUrl } from "$lib/directus";
-import SharingPopup from "$lib/components/sharing-popup/sharing-popup.svelte";
 import Meta from "$lib/components/meta/meta.svelte";
 import PeonyBackground from "$lib/components/background/peony-background.svelte";
 import SharingPopupButton from "$lib/components/sharing-popup/sharing-popup-button.svelte";
@@ -129,7 +128,7 @@ const timeAgo = new TimeAgo("en");
                        <span class="font-semibold">Tags</span>
                    </div>
                    <div class="flex flex-wrap gap-2">
-                        {#each data.article.tags as tag}
+                        {#each data.article.tags as tag (tag)}
                            <a class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm" href="/tags/{tag}">
                                #{tag}
                            </a>
--- a/packages/frontend/src/routes/me/+page.svelte
+++ b/packages/frontend/src/routes/me/+page.svelte
@@ -31,7 +31,6 @@ import {
 	FileDropZone,
 	MEGABYTE,
 } from "$lib/components/ui/file-drop-zone";
-import * as Avatar from "$lib/components/ui/avatar";
 import RecordingCard from "$lib/components/recording-card/recording-card.svelte";

 const { data } = $props();
@@ -175,7 +174,7 @@ async function handleDeleteRecording(id: string) {
 		await deleteRecording(id);
 		recordings = recordings.filter((r) => r.id !== id);
 		toast.success($_("me.recordings.delete_success"));
-	} catch (error) {
+	} catch {
 		toast.error($_("me.recordings.delete_error"));
 	}
 }
@@ -625,7 +624,7 @@ onMount(() => {
                                        </tr>
                                    </thead>
                                    <tbody>
-                                        {#each data.analytics.videos as video}
+                                        {#each data.analytics.videos as video (video.slug)}
                                            <tr class="border-b border-border/50 hover:bg-primary/5 transition-colors">
                                                <td class="p-3">
                                                    <a href="/videos/{video.slug}" class="hover:text-primary transition-colors">
--- a/packages/frontend/src/routes/models/+page.svelte
+++ b/packages/frontend/src/routes/models/+page.svelte
@@ -144,7 +144,7 @@ const filteredModels = $derived(() => {
    <!-- Models Grid -->
    <div class="container mx-auto px-4 py-12">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {#each filteredModels() as model}
+            {#each filteredModels() as model (model.slug)}
                <Card
                    class="py-0 group hover:shadow-2xl hover:shadow-primary/25 transition-all duration-500 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
                >
@@ -211,7 +211,7 @@ const filteredModels = $derived(() => {

                        <!-- Tags -->
                        <div class="flex flex-wrap gap-2 mb-4">
-                            {#each model.tags as tag}
+                            {#each model.tags as tag (tag)}
                                <a
                                    class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full"
                                    href="/tags/{tag}"
--- a/packages/frontend/src/routes/models/[slug]/+page.svelte
+++ b/packages/frontend/src/routes/models/[slug]/+page.svelte
@@ -131,7 +131,7 @@ let totalPlays = $derived(

              <!-- Tags -->
              <div class="flex flex-wrap gap-2">
-                {#each data.model.tags as tag}
+                {#each data.model.tags as tag (tag)}
                  <a
                    class="text-xs bg-primary/10 text-primary px-3 py-1 rounded-full"
                    href="/tags/{tag}"
@@ -227,7 +227,7 @@ let totalPlays = $derived(

      <TabsContent value="videos">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {#each data.videos as video}
+          {#each data.videos as video (video.slug)}
            <Card
              class="p-0 group hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-primary/20 overflow-hidden"
            >
--- a/packages/frontend/src/routes/password/+page.svelte
+++ b/packages/frontend/src/routes/password/+page.svelte
@@ -10,10 +10,9 @@ import {
 } from "$lib/components/ui/card";
 import { Input } from "$lib/components/ui/input";
 import { Label } from "$lib/components/ui/label";
-import PeonyIcon from "$lib/components/icon/peony-icon.svelte";
 import * as Alert from "$lib/components/ui/alert";
 import { goto } from "$app/navigation";
-import { login, requestPassword } from "$lib/services";
+import { requestPassword } from "$lib/services";
 import { onMount } from "svelte";
 import PeonyBackground from "$lib/components/background/peony-background.svelte";
 import { toast } from "svelte-sonner";
--- a/packages/frontend/src/routes/password/reset/+page.svelte
+++ b/packages/frontend/src/routes/password/reset/+page.svelte
@@ -10,7 +10,6 @@ import {
 } from "$lib/components/ui/card";
 import { Input } from "$lib/components/ui/input";
 import { Label } from "$lib/components/ui/label";
-import PeonyIcon from "$lib/components/icon/peony-icon.svelte";
 import * as Alert from "$lib/components/ui/alert";
 import { goto } from "$app/navigation";
 import { resetPassword } from "$lib/services";
--- a/packages/frontend/src/routes/play/+page.svelte
+++ b/packages/frontend/src/routes/play/+page.svelte
@@ -4,8 +4,8 @@ import Meta from "$lib/components/meta/meta.svelte";
 import {
 	ButtplugClient,
 	ButtplugWasmClientConnector,
-	ButtplugClientDevice,
-	OutputType,
+	type ButtplugClientDevice,
+	type OutputType,
 	InputType,
 	DeviceOutputValueConstructor,
 } from "@sexy.pivoine.art/buttplug";
@@ -149,7 +149,7 @@ async function handleStop(device: BluetoothDevice) {
 }

 function convertDevice(device: ButtplugClientDevice): BluetoothDevice {
-	const actuators: import("$lib/types").DeviceActuator[] = [];
+	const actuators: import("$lib/types").DeviceActuator[] = []; // eslint-disable-line @typescript-eslint/consistent-type-imports
 	for (const [, feature] of device.features) {
 		for (const outputType of feature.outputTypes) {
 			actuators.push({
@@ -568,7 +568,7 @@ onMount(() => {
    <div class="container mx-auto px-4 py-12">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {#if devices}
-                {#each devices as device}
+                {#each devices as device (device.name)}
                    <DeviceCard
                        {device}
                        onChange={(scalarIndex, val) => handleChange(device, scalarIndex, val)}
--- a/packages/frontend/src/routes/play/components/device-mapping-dialog.svelte
+++ b/packages/frontend/src/routes/play/components/device-mapping-dialog.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { _ } from "svelte-i18n";
+import { SvelteMap } from "svelte/reactivity";
 import * as Dialog from "$lib/components/ui/dialog";
 import Button from "$lib/components/ui/button/button.svelte";
 import type { BluetoothDevice, DeviceInfo } from "$lib/types";
@@ -15,7 +16,7 @@ interface Props {
 let { open, recordedDevices, connectedDevices, onConfirm, onCancel }: Props = $props();

 // Device mappings: recorded device name -> connected device
-let mappings = $state<Map<string, BluetoothDevice>>(new Map());
+let mappings = new SvelteMap<string, BluetoothDevice>();

 // Check if a connected device is compatible with a recorded device
 function isCompatible(recordedDevice: DeviceInfo, connectedDevice: BluetoothDevice): boolean {
@@ -37,7 +38,7 @@ function getCompatibleDevices(recordedDevice: DeviceInfo): BluetoothDevice[] {
 // Auto-map devices on open
 $effect(() => {
 	if (open && recordedDevices.length > 0 && connectedDevices.length > 0) {
-		const newMappings = new Map<string, BluetoothDevice>();
+		const newMappings = new SvelteMap<string, BluetoothDevice>();

 		recordedDevices.forEach(recordedDevice => {
 			// Try to find exact name match first
@@ -74,7 +75,7 @@ function handleDeviceSelect(recordedDeviceName: string, deviceId: string) {

 	const device = connectedDevices.find(d => d.id === deviceId);
 	if (device) {
-		const newMappings = new Map(mappings);
+		const newMappings = new SvelteMap(mappings);
 		newMappings.set(recordedDeviceName, device);
 		mappings = newMappings;
 	}
@@ -95,7 +96,7 @@ const allDevicesMapped = $derived(
 		</Dialog.Header>

 		<div class="space-y-4 py-4">
-			{#each recordedDevices as recordedDevice}
+			{#each recordedDevices as recordedDevice (recordedDevice.name)}
 				{@const compatibleDevices = getCompatibleDevices(recordedDevice)}
 				{@const currentMapping = mappings.get(recordedDevice.name)}

@@ -106,7 +107,7 @@ const allDevicesMapped = $derived(
 							<h3 class="font-semibold text-card-foreground">{recordedDevice.name}</h3>
 						</div>
 						<div class="flex flex-wrap gap-1">
-							{#each recordedDevice.capabilities as capability}
+							{#each recordedDevice.capabilities as capability (capability)}
 								<span class="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/20">
 									{capability}
 								</span>
@@ -129,7 +130,7 @@ const allDevicesMapped = $derived(
 								onchange={(e) => handleDeviceSelect(recordedDevice.name, e.currentTarget.value)}
 							>
 								<option value="" disabled>Select device...</option>
-								{#each compatibleDevices as device}
+								{#each compatibleDevices as device (device.name)}
 									<option value={device.id}>
 										{device.name}
 										{#if device.name === recordedDevice.name}(exact match){/if}
--- a/packages/frontend/src/routes/play/components/recording-save-dialog.svelte
+++ b/packages/frontend/src/routes/play/components/recording-save-dialog.svelte
@@ -96,7 +96,7 @@ function handleCancel() {
 			<!-- Device Info -->
 			<div class="space-y-2">
 				<Label>Devices Used</Label>
-				{#each deviceInfo as device}
+				{#each deviceInfo as device (device.name)}
 					<div
 						class="flex items-center gap-2 text-sm bg-muted/20 rounded px-3 py-2"
 					>
--- a/packages/frontend/src/routes/signup/+page.svelte
+++ b/packages/frontend/src/routes/signup/+page.svelte
@@ -14,7 +14,6 @@ import { Label } from "$lib/components/ui/label";
 import { Checkbox } from "$lib/components/ui/checkbox";
 import { toast } from "svelte-sonner";
 import * as Alert from "$lib/components/ui/alert";
-import PeonyIcon from "$lib/components/icon/peony-icon.svelte";
 import { register } from "$lib/services";
 import PeonyBackground from "$lib/components/background/peony-background.svelte";
 import Meta from "$lib/components/meta/meta.svelte";
--- a/packages/frontend/src/routes/tags/[tag]/+page.svelte
+++ b/packages/frontend/src/routes/tags/[tag]/+page.svelte
@@ -10,7 +10,6 @@ import {
 	SelectTrigger,
 } from "$lib/components/ui/select";
 import { getAssetUrl } from "$lib/directus";
-import PeonyBackground from "$lib/components/background/peony-background.svelte";
 import Meta from "$lib/components/meta/meta.svelte";

 let searchQuery = $state("");
@@ -134,7 +133,7 @@ const filteredItems = $derived(() => {
  <!-- Items Grid -->
  <div class="container mx-auto px-4 py-12">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-      {#each filteredItems() as item}
+      {#each filteredItems() as item (item.slug)}
        <Card
          class="py-0 group hover:shadow-2xl hover:shadow-primary/25 transition-all duration-300 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
        >
@@ -178,7 +177,7 @@ const filteredItems = $derived(() => {

            <!-- Tags -->
            <div class="flex flex-wrap gap-2 mb-4">
-              {#each item.tags as tag}
+              {#each item.tags as tag (tag)}
                <a
                  class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full"
                  href="/tags/{tag}"
--- a/packages/frontend/src/routes/videos/+page.svelte
+++ b/packages/frontend/src/routes/videos/+page.svelte
@@ -200,7 +200,7 @@ const filteredVideos = $derived(() => {
  <!-- Videos Grid -->
  <div class="container mx-auto px-4 py-12">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-      {#each filteredVideos() as video}
+      {#each filteredVideos() as video (video.slug)}
        <Card
          class="p-0 group hover:shadow-2xl hover:shadow-primary/25 transition-all duration-500 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
        >
--- a/packages/frontend/src/routes/videos/[slug]/+page.svelte
+++ b/packages/frontend/src/routes/videos/[slug]/+page.svelte
@@ -33,7 +33,7 @@ let commentError = $state();
 let currentPlayId = $state<string | null>(null);
 let lastTrackedTime = $state(0);

-const relatedVideos = [
+const _relatedVideos = [
 	{
 		id: 2,
 		title: "Sunset Dreams",
@@ -94,7 +94,7 @@ async function handleLike() {
 	}
 }

-function handleBookmark() {
+function _handleBookmark() {
 	isBookmarked = !isBookmarked;
 }

@@ -279,7 +279,7 @@ let showPlayer = $state(false);
            />
            <!-- <Button
              variant={isBookmarked ? "default" : "outline"}
-              onclick={handleBookmark}
+              onclick={_handleBookmark}
              class="flex items-center gap-2 {isBookmarked
                ? 'bg-gradient-to-r from-primary to-accent'
                : 'border-primary/20 hover:bg-primary/10'}"
@@ -291,7 +291,7 @@ let showPlayer = $state(false);

          <!-- Model Info -->
          <div class="grid grid-cols-1 gap-4">
-            {#each data.video.models as model}
+            {#each data.video.models as model (model.slug)}
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-4">
                  <a href={`/models/${model.slug}`}>
@@ -341,7 +341,7 @@ let showPlayer = $state(false);
            <CardContent class="p-4">
              <p class="text-muted-foreground mb-4">{data.video.description}</p>
              <div class="flex flex-wrap gap-2">
-                {#each data.video.tags as tag}
+                {#each data.video.tags as tag (tag)}
                  <a
                    class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full"
                    href="/tags/{tag}"
@@ -438,7 +438,7 @@ let showPlayer = $state(false);
              {#if showComments}
                <!-- Comments List -->
                <div class="space-y-4">
-                  {#each data.comments as comment}
+                  {#each data.comments as comment (comment.id)}
                    <div class="flex gap-3">
                      <a href="/users/{comment.user_created.id}" class="flex-shrink-0">
                        <Avatar