style: apply prettier formatting to all files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitea/workflows/docker-build-backend.yml

@@ -6,7 +6,7 @@ on:
       - main
       - develop
     tags:
-      - 'v*.*.*'
+      - "v*.*.*"
   pull_request:
     branches:
       - main

.gitea/workflows/docker-build-frontend.yml

@@ -6,7 +6,7 @@ on:
       - main
       - develop
     tags:
-      - 'v*.*.*'
+      - "v*.*.*"
   pull_request:
     branches:
       - main

README.md

@@ -4,7 +4,7 @@
 
 ![sexy lips tongue mouth american apparel moist lip gloss ](https://i.gifer.com/1pYe.gif)
 
-*"Lust und Liebe gehören zusammen - wer das eine verteufelt, zerstört auch das andere."*
+_"Lust und Liebe gehören zusammen - wer das eine verteufelt, zerstört auch das andere."_
 — **Beate Uhse**, Pionierin der sexuellen Befreiung ✈️
 
 ---
@@ -104,10 +104,10 @@ docker compose up -d
 
 **Prerequisites:**
 
-1. Node.js 20.19.1 — *the foundation*
+1. Node.js 20.19.1 — _the foundation_
-2. `corepack enable` — *unlock the tools*
+2. `corepack enable` — _unlock the tools_
-3. `pnpm install` — *gather your ingredients*
+3. `pnpm install` — _gather your ingredients_
-4. PostgreSQL 16 + Redis — *the data lovers*
+4. PostgreSQL 16 + Redis — _the data lovers_
 
 **Start your pleasure journey:**
 
@@ -199,7 +199,7 @@ Every request:
 Assets are transformed on first request and cached as WebP:
 
 | Preset      | Size        | Fit    | Use              |
-|--------|------|-----|-----|
+| ----------- | ----------- | ------ | ---------------- |
 | `mini`      | 80×80       | cover  | Avatars in lists |
 | `thumbnail` | 300×300     | cover  | Profile photos   |
 | `preview`   | 800px wide  | inside | Video teasers    |
@@ -277,7 +277,7 @@ graph LR
 ### Backend (required)
 
 | Variable        | Description                   |
-|----------|-------------|
+| --------------- | ----------------------------- |
 | `DATABASE_URL`  | PostgreSQL connection string  |
 | `REDIS_URL`     | Redis connection string       |
 | `COOKIE_SECRET` | Session cookie signing secret |
@@ -287,7 +287,7 @@ graph LR
 ### Backend (optional)
 
 | Variable     | Default | Description                    |
-|----------|---------|-------------|
+| ------------ | ------- | ------------------------------ |
 | `PORT`       | `4000`  | Backend listen port            |
 | `LOG_LEVEL`  | `info`  | Fastify log level              |
 | `SMTP_HOST`  | —       | Email server for auth flows    |
@@ -298,7 +298,7 @@ graph LR
 ### Frontend
 
 | Variable              | Description                                   |
-|----------|-------------|
+| --------------------- | --------------------------------------------- |
 | `PUBLIC_API_URL`      | Backend URL (e.g. `http://sexy_backend:4000`) |
 | `PUBLIC_URL`          | Frontend public URL                           |
 | `PUBLIC_UMAMI_ID`     | Umami analytics site ID (optional)            |
@@ -314,14 +314,14 @@ graph LR
 
 **[Palina](https://sexy.pivoine.art) & [Valknar](https://sexy.pivoine.art)**
 
-*Für die Mäuse...* 🐭💕
+_Für die Mäuse..._ 🐭💕
 
 ---
 
 ### 🙏 Built With
 
 | Technology                                                | Purpose              |
-|------------|---------|
+| --------------------------------------------------------- | -------------------- |
 | [SvelteKit](https://kit.svelte.dev/)                      | Frontend framework   |
 | [Fastify](https://fastify.dev/)                           | HTTP server          |
 | [GraphQL Yoga](https://the-guild.dev/graphql/yoga-server) | GraphQL server       |
@@ -339,7 +339,7 @@ graph LR
 Pioneer of sexual liberation (1919-2001)
 Pilot, Entrepreneur, Freedom Fighter
 
-*"Eine Frau, die ihre Sexualität selbstbestimmt lebt, ist eine freie Frau."*
+_"Eine Frau, die ihre Sexualität selbstbestimmt lebt, ist eine freie Frau."_
 
 ![Beate Uhse Quote](https://img.shields.io/badge/Beate_Uhse-Sexual_Liberation_Pioneer-FF1493?style=for-the-badge&logo=heart&logoColor=white&labelColor=8B008B)
 
@@ -381,7 +381,7 @@ Pilot, Entrepreneur, Freedom Fighter
 ╚═════╝  ╚══════╝╚═╝  ╚═╝   ╚═╝
 </pre>
 
-*Pleasure is a human right. Technology is freedom. Together, they are power.*
+_Pleasure is a human right. Technology is freedom. Together, they are power._
 
 **[sexy.pivoine.art](https://sexy.pivoine.art)** | © 2025 Palina & Valknar
 

package.json

@@ -43,6 +43,7 @@
     "eslint-plugin-svelte": "^3.15.0",
     "globals": "^17.4.0",
     "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.1",
     "typescript-eslint": "^8.56.1"
   }
 }

packages/backend/src/db/schema/articles.ts

@@ -1,18 +1,13 @@
-import {
+import { pgTable, text, timestamp, boolean, index, uniqueIndex } from "drizzle-orm/pg-core";
-  pgTable,
-  text,
-  timestamp,
-  boolean,
-  index,
-  uniqueIndex,
-} from "drizzle-orm/pg-core";
 import { users } from "./users";
 import { files } from "./files";
 
 export const articles = pgTable(
   "articles",
   {
-    id: text("id").primaryKey().$defaultFn(() => crypto.randomUUID()),
+    id: text("id")
+      .primaryKey()
+      .$defaultFn(() => crypto.randomUUID()),
     slug: text("slug").notNull(),
     title: text("title").notNull(),
     excerpt: text("excerpt"),

packages/backend/src/db/schema/comments.ts

@@ -1,10 +1,4 @@
-import {
+import { pgTable, text, timestamp, index, integer } from "drizzle-orm/pg-core";
-  pgTable,
-  text,
-  timestamp,
-  index,
-  integer,
-} from "drizzle-orm/pg-core";
 import { users } from "./users";
 
 export const comments = pgTable(

packages/backend/src/db/schema/files.ts

@@ -1,16 +1,11 @@
-import {
+import { pgTable, text, timestamp, bigint, integer, index } from "drizzle-orm/pg-core";
-  pgTable,
-  text,
-  timestamp,
-  bigint,
-  integer,
-  index,
-} from "drizzle-orm/pg-core";
 
 export const files = pgTable(
   "files",
   {
-    id: text("id").primaryKey().$defaultFn(() => crypto.randomUUID()),
+    id: text("id")
+      .primaryKey()
+      .$defaultFn(() => crypto.randomUUID()),
     title: text("title"),
     description: text("description"),
     filename: text("filename").notNull(),

packages/backend/src/db/schema/gamification.ts

@@ -11,15 +11,14 @@ import {
 import { users } from "./users";
 import { recordings } from "./recordings";
 
-export const achievementStatusEnum = pgEnum("achievement_status", [
+export const achievementStatusEnum = pgEnum("achievement_status", ["draft", "published"]);
-  "draft",
-  "published",
-]);
 
 export const achievements = pgTable(
   "achievements",
   {
-    id: text("id").primaryKey().$defaultFn(() => crypto.randomUUID()),
+    id: text("id")
+      .primaryKey()
+      .$defaultFn(() => crypto.randomUUID()),
     code: text("code").notNull(),
     name: text("name").notNull(),
     description: text("description"),

packages/backend/src/db/schema/recordings.ts

@@ -12,16 +12,14 @@ import {
 import { users } from "./users";
 import { videos } from "./videos";
 
-export const recordingStatusEnum = pgEnum("recording_status", [
+export const recordingStatusEnum = pgEnum("recording_status", ["draft", "published", "archived"]);
-  "draft",
-  "published",
-  "archived",
-]);
 
 export const recordings = pgTable(
   "recordings",
   {
-    id: text("id").primaryKey().$defaultFn(() => crypto.randomUUID()),
+    id: text("id")
+      .primaryKey()
+      .$defaultFn(() => crypto.randomUUID()),
     title: text("title").notNull(),
     description: text("description"),
     slug: text("slug").notNull(),
@@ -53,7 +51,9 @@ export const recordings = pgTable(
 export const recording_plays = pgTable(
   "recording_plays",
   {
-    id: text("id").primaryKey().$defaultFn(() => crypto.randomUUID()),
+    id: text("id")
+      .primaryKey()
+      .$defaultFn(() => crypto.randomUUID()),
     recording_id: text("recording_id")
       .notNull()
       .references(() => recordings.id, { onDelete: "cascade" }),

packages/backend/src/db/schema/users.ts

@@ -15,7 +15,9 @@ export const roleEnum = pgEnum("user_role", ["model", "viewer", "admin"]);
 export const users = pgTable(
   "users",
   {
-    id: text("id").primaryKey().$defaultFn(() => crypto.randomUUID()),
+    id: text("id")
+      .primaryKey()
+      .$defaultFn(() => crypto.randomUUID()),
     email: text("email").notNull(),
     password_hash: text("password_hash").notNull(),
     first_name: text("first_name"),

packages/backend/src/db/schema/videos.ts

@@ -14,7 +14,9 @@ import { files } from "./files";
 export const videos = pgTable(
   "videos",
   {
-    id: text("id").primaryKey().$defaultFn(() => crypto.randomUUID()),
+    id: text("id")
+      .primaryKey()
+      .$defaultFn(() => crypto.randomUUID()),
     slug: text("slug").notNull(),
     title: text("title").notNull(),
     description: text("description"),
@@ -50,7 +52,9 @@ export const video_models = pgTable(
 export const video_likes = pgTable(
   "video_likes",
   {
-    id: text("id").primaryKey().$defaultFn(() => crypto.randomUUID()),
+    id: text("id")
+      .primaryKey()
+      .$defaultFn(() => crypto.randomUUID()),
     video_id: text("video_id")
       .notNull()
       .references(() => videos.id, { onDelete: "cascade" }),
@@ -68,7 +72,9 @@ export const video_likes = pgTable(
 export const video_plays = pgTable(
   "video_plays",
   {
-    id: text("id").primaryKey().$defaultFn(() => crypto.randomUUID()),
+    id: text("id")
+      .primaryKey()
+      .$defaultFn(() => crypto.randomUUID()),
     video_id: text("video_id")
       .notNull()
       .references(() => videos.id, { onDelete: "cascade" }),

packages/backend/src/graphql/resolvers/comments.ts

@@ -21,7 +21,12 @@ builder.queryField("commentsForVideo", (t) =>
       return Promise.all(
         commentList.map(async (c: any) => {
           const user = await ctx.db
-            .select({ id: users.id, first_name: users.first_name, last_name: users.last_name, avatar: users.avatar })
+            .select({
+              id: users.id,
+              first_name: users.first_name,
+              last_name: users.last_name,
+              avatar: users.avatar,
+            })
             .from(users)
             .where(eq(users.id, c.user_id))
             .limit(1);
@@ -57,7 +62,12 @@ builder.mutationField("createCommentForVideo", (t) =>
       await checkAchievements(ctx.db, ctx.currentUser.id, "social");
 
       const user = await ctx.db
-        .select({ id: users.id, first_name: users.first_name, last_name: users.last_name, avatar: users.avatar })
+        .select({
+          id: users.id,
+          first_name: users.first_name,
+          last_name: users.last_name,
+          avatar: users.avatar,
+        })
         .from(users)
         .where(eq(users.id, ctx.currentUser.id))
         .limit(1);

packages/backend/src/graphql/resolvers/gamification.ts

@@ -1,6 +1,12 @@
 import { builder } from "../builder";
 import { LeaderboardEntryType, UserGamificationType, AchievementType } from "../types/index";
-import { user_stats, users, user_achievements, achievements, user_points } from "../../db/schema/index";
+import {
+  user_stats,
+  users,
+  user_achievements,
+  achievements,
+  user_points,
+} from "../../db/schema/index";
 import { eq, desc, gt, count, isNotNull, and } from "drizzle-orm";
 
 builder.queryField("leaderboard", (t) =>
@@ -73,7 +79,12 @@ builder.queryField("userGamification", (t) =>
         })
         .from(user_achievements)
         .leftJoin(achievements, eq(user_achievements.achievement_id, achievements.id))
-        .where(and(eq(user_achievements.user_id, args.userId), isNotNull(user_achievements.date_unlocked)))
+        .where(
+          and(
+            eq(user_achievements.user_id, args.userId),
+            isNotNull(user_achievements.date_unlocked),
+          ),
+        )
         .orderBy(desc(user_achievements.date_unlocked));
 
       const recentPoints = await ctx.db

packages/backend/src/graphql/resolvers/recordings.ts

@@ -162,11 +162,13 @@ builder.mutationField("updateRecording", (t) =>
         updates.title = args.title;
         updates.slug = slugify(args.title);
       }
-      if (args.description !== null && args.description !== undefined) updates.description = args.description;
+      if (args.description !== null && args.description !== undefined)
+        updates.description = args.description;
       if (args.tags !== null && args.tags !== undefined) updates.tags = args.tags;
       if (args.status !== null && args.status !== undefined) updates.status = args.status;
       if (args.public !== null && args.public !== undefined) updates.public = args.public;
-      if (args.linkedVideoId !== null && args.linkedVideoId !== undefined) updates.linked_video = args.linkedVideoId;
+      if (args.linkedVideoId !== null && args.linkedVideoId !== undefined)
+        updates.linked_video = args.linkedVideoId;
 
       const updated = await ctx.db
         .update(recordings)
@@ -319,11 +321,20 @@ builder.mutationField("updateRecordingPlay", (t) =>
 
       await ctx.db
         .update(recording_plays)
-        .set({ duration_played: args.durationPlayed, completed: args.completed, date_updated: new Date() })
+        .set({
+          duration_played: args.durationPlayed,
+          completed: args.completed,
+          date_updated: new Date(),
+        })
         .where(eq(recording_plays.id, args.playId));
 
       if (args.completed && !wasCompleted && ctx.currentUser) {
-        await awardPoints(ctx.db, ctx.currentUser.id, "RECORDING_COMPLETE", existing[0].recording_id);
+        await awardPoints(
+          ctx.db,
+          ctx.currentUser.id,
+          "RECORDING_COMPLETE",
+          existing[0].recording_id,
+        );
         await checkAchievements(ctx.db, ctx.currentUser.id, "playback");
       }
 

packages/backend/src/graphql/resolvers/stats.ts

@@ -15,9 +15,7 @@ builder.queryField("stats", (t) =>
         .select({ count: count() })
         .from(users)
         .where(eq(users.role, "viewer"));
-      const videosCount = await ctx.db
+      const videosCount = await ctx.db.select({ count: count() }).from(videos);
-        .select({ count: count() })
-        .from(videos);
 
       return {
         models_count: modelsCount[0]?.count || 0,

packages/backend/src/graphql/resolvers/users.ts

@@ -28,11 +28,7 @@ builder.queryField("userProfile", (t) =>
       id: t.arg.string({ required: true }),
     },
     resolve: async (_root, args, ctx) => {
-      const user = await ctx.db
+      const user = await ctx.db.select().from(users).where(eq(users.id, args.id)).limit(1);
-        .select()
-        .from(users)
-        .where(eq(users.id, args.id))
-        .limit(1);
       return user[0] || null;
     },
   }),
@@ -53,13 +49,19 @@ builder.mutationField("updateProfile", (t) =>
       if (!ctx.currentUser) throw new GraphQLError("Unauthorized");
 
       const updates: Record<string, unknown> = { date_updated: new Date() };
-      if (args.firstName !== undefined && args.firstName !== null) updates.first_name = args.firstName;
+      if (args.firstName !== undefined && args.firstName !== null)
+        updates.first_name = args.firstName;
       if (args.lastName !== undefined && args.lastName !== null) updates.last_name = args.lastName;
-      if (args.artistName !== undefined && args.artistName !== null) updates.artist_name = args.artistName;
+      if (args.artistName !== undefined && args.artistName !== null)
-      if (args.description !== undefined && args.description !== null) updates.description = args.description;
+        updates.artist_name = args.artistName;
+      if (args.description !== undefined && args.description !== null)
+        updates.description = args.description;
       if (args.tags !== undefined && args.tags !== null) updates.tags = args.tags;
 
-      await ctx.db.update(users).set(updates as any).where(eq(users.id, ctx.currentUser.id));
+      await ctx.db
+        .update(users)
+        .set(updates as any)
+        .where(eq(users.id, ctx.currentUser.id));
 
       const updated = await ctx.db
         .select()

packages/backend/src/graphql/resolvers/videos.ts

@@ -1,7 +1,19 @@
 import { GraphQLError } from "graphql";
 import { builder } from "../builder";
-import { VideoType, VideoLikeResponseType, VideoPlayResponseType, VideoLikeStatusType } from "../types/index";
+import {
-import { videos, video_models, video_likes, video_plays, users, files } from "../../db/schema/index";
+  VideoType,
+  VideoLikeResponseType,
+  VideoPlayResponseType,
+  VideoLikeStatusType,
+} from "../types/index";
+import {
+  videos,
+  video_models,
+  video_likes,
+  video_plays,
+  users,
+  files,
+} from "../../db/schema/index";
 import { eq, and, lte, desc, inArray, count } from "drizzle-orm";
 
 async function enrichVideo(db: any, video: any) {
@@ -25,8 +37,14 @@ async function enrichVideo(db: any, video: any) {
   }
 
   // Count likes
-  const likesCount = await db.select({ count: count() }).from(video_likes).where(eq(video_likes.video_id, video.id));
+  const likesCount = await db
-  const playsCount = await db.select({ count: count() }).from(video_plays).where(eq(video_plays.video_id, video.id));
+    .select({ count: count() })
+    .from(video_likes)
+    .where(eq(video_likes.video_id, video.id));
+  const playsCount = await db
+    .select({ count: count() })
+    .from(video_plays)
+    .where(eq(video_plays.video_id, video.id));
 
   return {
     ...video,
@@ -63,10 +81,15 @@ builder.queryField("videos", (t) =>
         query = ctx.db
           .select({ v: videos })
           .from(videos)
-          .where(and(
+          .where(
+            and(
               lte(videos.upload_date, new Date()),
-            inArray(videos.id, videoIds.map((v: any) => v.video_id)),
+              inArray(
-          ))
+                videos.id,
+                videoIds.map((v: any) => v.video_id),
+              ),
+            ),
+          )
           .orderBy(desc(videos.upload_date));
       }
 
@@ -74,10 +97,7 @@ builder.queryField("videos", (t) =>
         query = ctx.db
           .select({ v: videos })
           .from(videos)
-          .where(and(
+          .where(and(lte(videos.upload_date, new Date()), eq(videos.featured, args.featured)))
-            lte(videos.upload_date, new Date()),
-            eq(videos.featured, args.featured),
-          ))
           .orderBy(desc(videos.upload_date));
       }
 
@@ -123,7 +143,9 @@ builder.queryField("videoLikeStatus", (t) =>
       const existing = await ctx.db
         .select()
         .from(video_likes)
-        .where(and(eq(video_likes.video_id, args.videoId), eq(video_likes.user_id, ctx.currentUser.id)))
+        .where(
+          and(eq(video_likes.video_id, args.videoId), eq(video_likes.user_id, ctx.currentUser.id)),
+        )
         .limit(1);
       return { liked: existing.length > 0 };
     },
@@ -142,7 +164,9 @@ builder.mutationField("likeVideo", (t) =>
       const existing = await ctx.db
         .select()
         .from(video_likes)
-        .where(and(eq(video_likes.video_id, args.videoId), eq(video_likes.user_id, ctx.currentUser.id)))
+        .where(
+          and(eq(video_likes.video_id, args.videoId), eq(video_likes.user_id, ctx.currentUser.id)),
+        )
         .limit(1);
 
       if (existing.length > 0) throw new GraphQLError("Already liked");
@@ -154,10 +178,22 @@ builder.mutationField("likeVideo", (t) =>
 
       await ctx.db
         .update(videos)
-        .set({ likes_count: (await ctx.db.select({ c: videos.likes_count }).from(videos).where(eq(videos.id, args.videoId)).limit(1))[0]?.c as number + 1 || 1 })
+        .set({
+          likes_count:
+            ((
+              await ctx.db
+                .select({ c: videos.likes_count })
+                .from(videos)
+                .where(eq(videos.id, args.videoId))
+                .limit(1)
+            )[0]?.c as number) + 1 || 1,
+        })
         .where(eq(videos.id, args.videoId));
 
-      const likesCount = await ctx.db.select({ count: count() }).from(video_likes).where(eq(video_likes.video_id, args.videoId));
+      const likesCount = await ctx.db
+        .select({ count: count() })
+        .from(video_likes)
+        .where(eq(video_likes.video_id, args.videoId));
       return { liked: true, likes_count: likesCount[0]?.count || 1 };
     },
   }),
@@ -175,21 +211,39 @@ builder.mutationField("unlikeVideo", (t) =>
       const existing = await ctx.db
         .select()
         .from(video_likes)
-        .where(and(eq(video_likes.video_id, args.videoId), eq(video_likes.user_id, ctx.currentUser.id)))
+        .where(
+          and(eq(video_likes.video_id, args.videoId), eq(video_likes.user_id, ctx.currentUser.id)),
+        )
         .limit(1);
 
       if (existing.length === 0) throw new GraphQLError("Not liked");
 
       await ctx.db
         .delete(video_likes)
-        .where(and(eq(video_likes.video_id, args.videoId), eq(video_likes.user_id, ctx.currentUser.id)));
+        .where(
+          and(eq(video_likes.video_id, args.videoId), eq(video_likes.user_id, ctx.currentUser.id)),
+        );
 
       await ctx.db
         .update(videos)
-        .set({ likes_count: Math.max(((await ctx.db.select({ c: videos.likes_count }).from(videos).where(eq(videos.id, args.videoId)).limit(1))[0]?.c as number || 1) - 1, 0) })
+        .set({
+          likes_count: Math.max(
+            (((
+              await ctx.db
+                .select({ c: videos.likes_count })
+                .from(videos)
+                .where(eq(videos.id, args.videoId))
+                .limit(1)
+            )[0]?.c as number) || 1) - 1,
+            0,
+          ),
+        })
         .where(eq(videos.id, args.videoId));
 
-      const likesCount = await ctx.db.select({ count: count() }).from(video_likes).where(eq(video_likes.video_id, args.videoId));
+      const likesCount = await ctx.db
+        .select({ count: count() })
+        .from(video_likes)
+        .where(eq(video_likes.video_id, args.videoId));
       return { liked: false, likes_count: likesCount[0]?.count || 0 };
     },
   }),
@@ -203,13 +257,19 @@ builder.mutationField("recordVideoPlay", (t) =>
       sessionId: t.arg.string(),
     },
     resolve: async (_root, args, ctx) => {
-      const play = await ctx.db.insert(video_plays).values({
+      const play = await ctx.db
+        .insert(video_plays)
+        .values({
           video_id: args.videoId,
           user_id: ctx.currentUser?.id || null,
           session_id: args.sessionId || null,
-      }).returning({ id: video_plays.id });
+        })
+        .returning({ id: video_plays.id });
 
-      const playsCount = await ctx.db.select({ count: count() }).from(video_plays).where(eq(video_plays.video_id, args.videoId));
+      const playsCount = await ctx.db
+        .select({ count: count() })
+        .from(video_plays)
+        .where(eq(video_plays.video_id, args.videoId));
 
       await ctx.db
         .update(videos)
@@ -237,7 +297,11 @@ builder.mutationField("updateVideoPlay", (t) =>
     resolve: async (_root, args, ctx) => {
       await ctx.db
         .update(video_plays)
-        .set({ duration_watched: args.durationWatched, completed: args.completed, date_updated: new Date() })
+        .set({
+          duration_watched: args.durationWatched,
+          completed: args.completed,
+          date_updated: new Date(),
+        })
         .where(eq(video_plays.id, args.playId));
       return true;
     },
@@ -262,13 +326,26 @@ builder.queryField("analytics", (t) =>
         .where(eq(video_models.user_id, userId));
 
       if (modelVideoIds.length === 0) {
-        return { total_videos: 0, total_likes: 0, total_plays: 0, plays_by_date: {}, likes_by_date: {}, videos: [] };
+        return {
+          total_videos: 0,
+          total_likes: 0,
+          total_plays: 0,
+          plays_by_date: {},
+          likes_by_date: {},
+          videos: [],
+        };
       }
 
       const videoIds = modelVideoIds.map((v: any) => v.video_id);
       const videoList = await ctx.db.select().from(videos).where(inArray(videos.id, videoIds));
-      const plays = await ctx.db.select().from(video_plays).where(inArray(video_plays.video_id, videoIds));
+      const plays = await ctx.db
-      const likes = await ctx.db.select().from(video_likes).where(inArray(video_likes.video_id, videoIds));
+        .select()
+        .from(video_plays)
+        .where(inArray(video_plays.video_id, videoIds));
+      const likes = await ctx.db
+        .select()
+        .from(video_likes)
+        .where(inArray(video_likes.video_id, videoIds));
 
       const totalLikes = videoList.reduce((sum, v) => sum + (v.likes_count || 0), 0);
       const totalPlays = videoList.reduce((sum, v) => sum + (v.plays_count || 0), 0);
@@ -290,7 +367,8 @@ builder.queryField("analytics", (t) =>
       const videoAnalytics = videoList.map((video) => {
         const vPlays = plays.filter((p) => p.video_id === video.id);
         const completedPlays = vPlays.filter((p) => p.completed).length;
-        const avgWatchTime = vPlays.length > 0
+        const avgWatchTime =
+          vPlays.length > 0
             ? vPlays.reduce((sum, p) => sum + (p.duration_watched || 0), 0) / vPlays.length
             : 0;
 

packages/backend/src/graphql/types/index.ts

@@ -1,7 +1,8 @@
 import { builder } from "../builder";
 
 // File type
-export const FileType = builder.objectRef<{
+export const FileType = builder
+  .objectRef<{
     id: string;
     title: string | null;
     description: string | null;
@@ -11,7 +12,8 @@ export const FileType = builder.objectRef<{
     duration: number | null;
     uploaded_by: string | null;
     date_created: Date;
-}>("File").implement({
+  }>("File")
+  .implement({
     fields: (t) => ({
       id: t.exposeString("id"),
       title: t.exposeString("title", { nullable: true }),
@@ -26,7 +28,8 @@ export const FileType = builder.objectRef<{
   });
 
 // User type
-export const UserType = builder.objectRef<{
+export const UserType = builder
+  .objectRef<{
     id: string;
     email: string;
     first_name: string | null;
@@ -40,7 +43,8 @@ export const UserType = builder.objectRef<{
     banner: string | null;
     email_verified: boolean;
     date_created: Date;
-}>("User").implement({
+  }>("User")
+  .implement({
     fields: (t) => ({
       id: t.exposeString("id"),
       email: t.exposeString("email"),
@@ -59,7 +63,8 @@ export const UserType = builder.objectRef<{
   });
 
 // CurrentUser type (same shape, used for auth context)
-export const CurrentUserType = builder.objectRef<{
+export const CurrentUserType = builder
+  .objectRef<{
     id: string;
     email: string;
     first_name: string | null;
@@ -73,7 +78,8 @@ export const CurrentUserType = builder.objectRef<{
     banner: string | null;
     email_verified: boolean;
     date_created: Date;
-}>("CurrentUser").implement({
+  }>("CurrentUser")
+  .implement({
     fields: (t) => ({
       id: t.exposeString("id"),
       email: t.exposeString("email"),
@@ -92,7 +98,8 @@ export const CurrentUserType = builder.objectRef<{
   });
 
 // Video type
-export const VideoType = builder.objectRef<{
+export const VideoType = builder
+  .objectRef<{
     id: string;
     slug: string;
     title: string;
@@ -105,9 +112,20 @@ export const VideoType = builder.objectRef<{
     featured: boolean | null;
     likes_count: number | null;
     plays_count: number | null;
-  models?: { id: string; artist_name: string | null; slug: string | null; avatar: string | null }[];
+    models?: {
-  movie_file?: { id: string; filename: string; mime_type: string | null; duration: number | null } | null;
+      id: string;
-}>("Video").implement({
+      artist_name: string | null;
+      slug: string | null;
+      avatar: string | null;
+    }[];
+    movie_file?: {
+      id: string;
+      filename: string;
+      mime_type: string | null;
+      duration: number | null;
+    } | null;
+  }>("Video")
+  .implement({
     fields: (t) => ({
       id: t.exposeString("id"),
       slug: t.exposeString("slug"),
@@ -126,12 +144,14 @@ export const VideoType = builder.objectRef<{
     }),
   });
 
-export const VideoModelType = builder.objectRef<{
+export const VideoModelType = builder
+  .objectRef<{
     id: string;
     artist_name: string | null;
     slug: string | null;
     avatar: string | null;
-}>("VideoModel").implement({
+  }>("VideoModel")
+  .implement({
     fields: (t) => ({
       id: t.exposeString("id"),
       artist_name: t.exposeString("artist_name", { nullable: true }),
@@ -140,12 +160,14 @@ export const VideoModelType = builder.objectRef<{
     }),
   });
 
-export const VideoFileType = builder.objectRef<{
+export const VideoFileType = builder
+  .objectRef<{
     id: string;
     filename: string;
     mime_type: string | null;
     duration: number | null;
-}>("VideoFile").implement({
+  }>("VideoFile")
+  .implement({
     fields: (t) => ({
       id: t.exposeString("id"),
       filename: t.exposeString("filename"),
@@ -155,7 +177,8 @@ export const VideoFileType = builder.objectRef<{
   });
 
 // Model type (model profile, enriched user)
-export const ModelType = builder.objectRef<{
+export const ModelType = builder
+  .objectRef<{
     id: string;
     slug: string | null;
     artist_name: string | null;
@@ -165,7 +188,8 @@ export const ModelType = builder.objectRef<{
     tags: string[] | null;
     date_created: Date;
     photos?: { id: string; filename: string }[];
-}>("Model").implement({
+  }>("Model")
+  .implement({
     fields: (t) => ({
       id: t.exposeString("id"),
       slug: t.exposeString("slug", { nullable: true }),
@@ -179,10 +203,12 @@ export const ModelType = builder.objectRef<{
     }),
   });
 
-export const ModelPhotoType = builder.objectRef<{
+export const ModelPhotoType = builder
+  .objectRef<{
     id: string;
     filename: string;
-}>("ModelPhoto").implement({
+  }>("ModelPhoto")
+  .implement({
     fields: (t) => ({
       id: t.exposeString("id"),
       filename: t.exposeString("filename"),
@@ -190,7 +216,8 @@ export const ModelPhotoType = builder.objectRef<{
   });
 
 // Article type
-export const ArticleType = builder.objectRef<{
+export const ArticleType = builder
+  .objectRef<{
     id: string;
     slug: string;
     title: string;
@@ -201,8 +228,14 @@ export const ArticleType = builder.objectRef<{
     publish_date: Date;
     category: string | null;
     featured: boolean | null;
-  author?: { first_name: string | null; last_name: string | null; avatar: string | null; description: string | null } | null;
+    author?: {
-}>("Article").implement({
+      first_name: string | null;
+      last_name: string | null;
+      avatar: string | null;
+      description: string | null;
+    } | null;
+  }>("Article")
+  .implement({
     fields: (t) => ({
       id: t.exposeString("id"),
       slug: t.exposeString("slug"),
@@ -218,12 +251,14 @@ export const ArticleType = builder.objectRef<{
     }),
   });
 
-export const ArticleAuthorType = builder.objectRef<{
+export const ArticleAuthorType = builder
+  .objectRef<{
     first_name: string | null;
     last_name: string | null;
     avatar: string | null;
     description: string | null;
-}>("ArticleAuthor").implement({
+  }>("ArticleAuthor")
+  .implement({
     fields: (t) => ({
       first_name: t.exposeString("first_name", { nullable: true }),
       last_name: t.exposeString("last_name", { nullable: true }),
@@ -233,7 +268,8 @@ export const ArticleAuthorType = builder.objectRef<{
   });
 
 // Recording type
-export const RecordingType = builder.objectRef<{
+export const RecordingType = builder
+  .objectRef<{
     id: string;
     title: string;
     description: string | null;
@@ -249,7 +285,8 @@ export const RecordingType = builder.objectRef<{
     public: boolean | null;
     date_created: Date;
     date_updated: Date | null;
-}>("Recording").implement({
+  }>("Recording")
+  .implement({
     fields: (t) => ({
       id: t.exposeString("id"),
       title: t.exposeString("title"),
@@ -270,15 +307,22 @@ export const RecordingType = builder.objectRef<{
   });
 
 // Comment type
-export const CommentType = builder.objectRef<{
+export const CommentType = builder
+  .objectRef<{
     id: number;
     collection: string;
     item_id: string;
     comment: string;
     user_id: string;
     date_created: Date;
-  user?: { id: string; first_name: string | null; last_name: string | null; avatar: string | null } | null;
+    user?: {
-}>("Comment").implement({
+      id: string;
+      first_name: string | null;
+      last_name: string | null;
+      avatar: string | null;
+    } | null;
+  }>("Comment")
+  .implement({
     fields: (t) => ({
       id: t.exposeInt("id"),
       collection: t.exposeString("collection"),
@@ -290,12 +334,14 @@ export const CommentType = builder.objectRef<{
     }),
   });
 
-export const CommentUserType = builder.objectRef<{
+export const CommentUserType = builder
+  .objectRef<{
     id: string;
     first_name: string | null;
     last_name: string | null;
     avatar: string | null;
-}>("CommentUser").implement({
+  }>("CommentUser")
+  .implement({
     fields: (t) => ({
       id: t.exposeString("id"),
       first_name: t.exposeString("first_name", { nullable: true }),
@@ -305,11 +351,13 @@ export const CommentUserType = builder.objectRef<{
   });
 
 // Stats type
-export const StatsType = builder.objectRef<{
+export const StatsType = builder
+  .objectRef<{
     videos_count: number;
     models_count: number;
     viewers_count: number;
-}>("Stats").implement({
+  }>("Stats")
+  .implement({
     fields: (t) => ({
       videos_count: t.exposeInt("videos_count"),
       models_count: t.exposeInt("models_count"),
@@ -318,7 +366,8 @@ export const StatsType = builder.objectRef<{
   });
 
 // Gamification types
-export const LeaderboardEntryType = builder.objectRef<{
+export const LeaderboardEntryType = builder
+  .objectRef<{
     user_id: string;
     display_name: string | null;
     avatar: string | null;
@@ -328,7 +377,8 @@ export const LeaderboardEntryType = builder.objectRef<{
     playbacks_count: number | null;
     achievements_count: number | null;
     rank: number;
-}>("LeaderboardEntry").implement({
+  }>("LeaderboardEntry")
+  .implement({
     fields: (t) => ({
       user_id: t.exposeString("user_id"),
       display_name: t.exposeString("display_name", { nullable: true }),
@@ -342,7 +392,8 @@ export const LeaderboardEntryType = builder.objectRef<{
     }),
   });
 
-export const AchievementType = builder.objectRef<{
+export const AchievementType = builder
+  .objectRef<{
     id: string;
     code: string;
     name: string;
@@ -351,7 +402,8 @@ export const AchievementType = builder.objectRef<{
     category: string | null;
     required_count: number;
     points_reward: number;
-}>("Achievement").implement({
+  }>("Achievement")
+  .implement({
     fields: (t) => ({
       id: t.exposeString("id"),
       code: t.exposeString("code"),
@@ -364,7 +416,8 @@ export const AchievementType = builder.objectRef<{
     }),
   });
 
-export const UserGamificationType = builder.objectRef<{
+export const UserGamificationType = builder
+  .objectRef<{
     stats: {
       user_id: string;
       total_raw_points: number | null;
@@ -392,7 +445,8 @@ export const UserGamificationType = builder.objectRef<{
       date_created: Date;
       recording_id: string | null;
     }[];
-}>("UserGamification").implement({
+  }>("UserGamification")
+  .implement({
     fields: (t) => ({
       stats: t.expose("stats", { type: UserStatsType, nullable: true }),
       achievements: t.expose("achievements", { type: [UserAchievementType] }),
@@ -400,7 +454,8 @@ export const UserGamificationType = builder.objectRef<{
     }),
   });
 
-export const UserStatsType = builder.objectRef<{
+export const UserStatsType = builder
+  .objectRef<{
     user_id: string;
     total_raw_points: number | null;
     total_weighted_points: number | null;
@@ -409,7 +464,8 @@ export const UserStatsType = builder.objectRef<{
     comments_count: number | null;
     achievements_count: number | null;
     rank: number;
-}>("UserStats").implement({
+  }>("UserStats")
+  .implement({
     fields: (t) => ({
       user_id: t.exposeString("user_id"),
       total_raw_points: t.exposeInt("total_raw_points", { nullable: true }),
@@ -422,7 +478,8 @@ export const UserStatsType = builder.objectRef<{
     }),
   });
 
-export const UserAchievementType = builder.objectRef<{
+export const UserAchievementType = builder
+  .objectRef<{
     id: string;
     code: string;
     name: string;
@@ -432,7 +489,8 @@ export const UserAchievementType = builder.objectRef<{
     date_unlocked: Date;
     progress: number | null;
     required_count: number;
-}>("UserAchievement").implement({
+  }>("UserAchievement")
+  .implement({
     fields: (t) => ({
       id: t.exposeString("id"),
       code: t.exposeString("code"),
@@ -446,12 +504,14 @@ export const UserAchievementType = builder.objectRef<{
     }),
   });
 
-export const RecentPointType = builder.objectRef<{
+export const RecentPointType = builder
+  .objectRef<{
     action: string;
     points: number;
     date_created: Date;
     recording_id: string | null;
-}>("RecentPoint").implement({
+  }>("RecentPoint")
+  .implement({
     fields: (t) => ({
       action: t.exposeString("action"),
       points: t.exposeInt("points"),
@@ -461,7 +521,8 @@ export const RecentPointType = builder.objectRef<{
   });
 
 // Analytics types
-export const AnalyticsType = builder.objectRef<{
+export const AnalyticsType = builder
+  .objectRef<{
     total_videos: number;
     total_likes: number;
     total_plays: number;
@@ -478,7 +539,8 @@ export const AnalyticsType = builder.objectRef<{
       completion_rate: number;
       avg_watch_time: number;
     }[];
-}>("Analytics").implement({
+  }>("Analytics")
+  .implement({
     fields: (t) => ({
       total_videos: t.exposeInt("total_videos"),
       total_likes: t.exposeInt("total_likes"),
@@ -489,7 +551,8 @@ export const AnalyticsType = builder.objectRef<{
     }),
   });
 
-export const VideoAnalyticsType = builder.objectRef<{
+export const VideoAnalyticsType = builder
+  .objectRef<{
     id: string;
     title: string;
     slug: string;
@@ -499,7 +562,8 @@ export const VideoAnalyticsType = builder.objectRef<{
     completed_plays: number;
     completion_rate: number;
     avg_watch_time: number;
-}>("VideoAnalytics").implement({
+  }>("VideoAnalytics")
+  .implement({
     fields: (t) => ({
       id: t.exposeString("id"),
       title: t.exposeString("title"),
@@ -514,21 +578,25 @@ export const VideoAnalyticsType = builder.objectRef<{
   });
 
 // Response types
-export const VideoLikeResponseType = builder.objectRef<{
+export const VideoLikeResponseType = builder
+  .objectRef<{
     liked: boolean;
     likes_count: number;
-}>("VideoLikeResponse").implement({
+  }>("VideoLikeResponse")
+  .implement({
     fields: (t) => ({
       liked: t.exposeBoolean("liked"),
       likes_count: t.exposeInt("likes_count"),
     }),
   });
 
-export const VideoPlayResponseType = builder.objectRef<{
+export const VideoPlayResponseType = builder
+  .objectRef<{
     success: boolean;
     play_id: string;
     plays_count: number;
-}>("VideoPlayResponse").implement({
+  }>("VideoPlayResponse")
+  .implement({
     fields: (t) => ({
       success: t.exposeBoolean("success"),
       play_id: t.exposeString("play_id"),
@@ -536,9 +604,11 @@ export const VideoPlayResponseType = builder.objectRef<{
     }),
   });
 
-export const VideoLikeStatusType = builder.objectRef<{
+export const VideoLikeStatusType = builder
+  .objectRef<{
     liked: boolean;
-}>("VideoLikeStatus").implement({
+  }>("VideoLikeStatus")
+  .implement({
     fields: (t) => ({
       liked: t.exposeBoolean("liked"),
     }),

packages/backend/src/index.ts

@@ -49,7 +49,12 @@ async function main() {
     decorateReply: true,
   });
 
-  const yoga = createYoga<{ req: FastifyRequest; reply: FastifyReply; db: typeof db; redis: typeof redis }>({
+  const yoga = createYoga<{
+    req: FastifyRequest;
+    reply: FastifyReply;
+    db: typeof db;
+    redis: typeof redis;
+  }>({
     schema,
     context: buildContext,
     graphqlEndpoint: "/graphql",
@@ -101,7 +106,12 @@ async function main() {
       if (!existsSync(cacheFile)) {
         const originalPath = path.join(UPLOAD_DIR, id, filename);
         await sharp(originalPath)
-          .resize({ width: preset.width, height: preset.height, fit: preset.fit ?? "inside", withoutEnlargement: true })
+          .resize({
+            width: preset.width,
+            height: preset.height,
+            fit: preset.fit ?? "inside",
+            withoutEnlargement: true,
+          })
           .webp({ quality: 92 })
           .toFile(cacheFile);
       }

packages/backend/src/lib/email.ts

@@ -4,10 +4,12 @@ const transporter = nodemailer.createTransport({
   host: process.env.SMTP_HOST || "localhost",
   port: parseInt(process.env.SMTP_PORT || "587"),
   secure: process.env.SMTP_SECURE === "true",
-  auth: process.env.SMTP_USER ? {
+  auth: process.env.SMTP_USER
+    ? {
         user: process.env.SMTP_USER,
         pass: process.env.SMTP_PASS,
-  } : undefined,
+      }
+    : undefined,
 });
 
 const FROM = process.env.EMAIL_FROM || "noreply@sexy.pivoine.art";

packages/backend/src/lib/gamification.ts

@@ -79,7 +79,10 @@ export async function updateUserStats(db: DB, userId: string): Promise<void> {
     const playbacksResult = await db.execute(sql`
       SELECT COUNT(*) as count FROM recording_plays
       WHERE user_id = ${userId}
-      AND recording_id NOT IN (${sql.join(ownIds.map(id => sql`${id}`), sql`, `)})
+      AND recording_id NOT IN (${sql.join(
+        ownIds.map((id) => sql`${id}`),
+        sql`, `,
+      )})
     `);
     playbacksCount = parseInt((playbacksResult.rows[0] as any)?.count || "0");
   } else {
@@ -135,11 +138,7 @@ export async function updateUserStats(db: DB, userId: string): Promise<void> {
   }
 }
 
-export async function checkAchievements(
+export async function checkAchievements(db: DB, userId: string, category?: string): Promise<void> {
-  db: DB,
-  userId: string,
-  category?: string,
-): Promise<void> {
   let achievementsQuery = db
     .select()
     .from(achievements)
@@ -176,7 +175,7 @@ export async function checkAchievements(
         .update(user_achievements)
         .set({
           progress,
-          date_unlocked: isUnlocked ? (existing[0].date_unlocked || new Date()) : null,
+          date_unlocked: isUnlocked ? existing[0].date_unlocked || new Date() : null,
         })
         .where(
           and(

packages/backend/src/scripts/data-migration.ts

@@ -128,7 +128,9 @@ async function migrateUsers() {
           ? tagsRes.rows[0].tags
           : JSON.parse(String(tagsRes.rows[0].tags || "[]"));
       }
-    } catch { /* tags column may not exist on older Directus installs */ }
+    } 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,
@@ -279,9 +281,7 @@ async function migrateVideoModels() {
 
 async function migrateVideoLikes() {
   console.log("❤️  Migrating video likes...");
-  const { rows } = await query(
+  const { rows } = await query(`SELECT id, video_id, user_id, date_created FROM sexy_video_likes`);
-    `SELECT id, video_id, user_id, date_created FROM sexy_video_likes`,
-  );
 
   let migrated = 0;
   for (const row of rows) {

packages/buttplug/src/client/ButtplugBrowserWebsocketClientConnector.ts

@@ -6,11 +6,11 @@
  * @copyright Copyright (c) Nonpolynomial Labs LLC. All rights reserved.
  */
 
-'use strict';
+"use strict";
 
-import { IButtplugClientConnector } from './IButtplugClientConnector';
+import { IButtplugClientConnector } from "./IButtplugClientConnector";
-import { ButtplugMessage } from '../core/Messages';
+import { ButtplugMessage } from "../core/Messages";
-import { ButtplugBrowserWebsocketConnector } from '../utils/ButtplugBrowserWebsocketConnector';
+import { ButtplugBrowserWebsocketConnector } from "../utils/ButtplugBrowserWebsocketConnector";
 
 export class ButtplugBrowserWebsocketClientConnector
   extends ButtplugBrowserWebsocketConnector
@@ -18,7 +18,7 @@ export class ButtplugBrowserWebsocketClientConnector
 {
   public send = (msg: ButtplugMessage): void => {
     if (!this.Connected) {
-      throw new Error('ButtplugClient not connected');
+      throw new Error("ButtplugClient not connected");
     }
     this.sendMessage(msg);
   };

packages/buttplug/src/client/ButtplugClient.ts

@@ -6,20 +6,16 @@
  * @copyright Copyright (c) Nonpolynomial Labs LLC. All rights reserved.
  */
 
-'use strict';
+"use strict";
 
-import { ButtplugLogger } from '../core/Logging';
+import { ButtplugLogger } from "../core/Logging";
-import { EventEmitter } from 'eventemitter3';
+import { EventEmitter } from "eventemitter3";
-import { ButtplugClientDevice } from './ButtplugClientDevice';
+import { ButtplugClientDevice } from "./ButtplugClientDevice";
-import { IButtplugClientConnector } from './IButtplugClientConnector';
+import { IButtplugClientConnector } from "./IButtplugClientConnector";
-import { ButtplugMessageSorter } from '../utils/ButtplugMessageSorter';
+import { ButtplugMessageSorter } from "../utils/ButtplugMessageSorter";
-import * as Messages from '../core/Messages';
+import * as Messages from "../core/Messages";
-import {
+import { ButtplugError, ButtplugInitError, ButtplugMessageError } from "../core/Exceptions";
-  ButtplugError,
+import { ButtplugClientConnectorException } from "./ButtplugClientConnectorException";
-  ButtplugInitError,
-  ButtplugMessageError,
-} from '../core/Exceptions';
-import { ButtplugClientConnectorException } from './ButtplugClientConnectorException';
 
 export class ButtplugClient extends EventEmitter {
   protected _pingTimer: NodeJS.Timeout | null = null;
@@ -30,7 +26,7 @@ export class ButtplugClient extends EventEmitter {
   protected _isScanning = false;
   private _sorter: ButtplugMessageSorter = new ButtplugMessageSorter(true);
 
-  constructor(clientName = 'Generic Buttplug Client') {
+  constructor(clientName = "Generic Buttplug Client") {
     super();
     this._clientName = clientName;
     this._logger.Debug(`ButtplugClient: Client ${clientName} created.`);
@@ -52,18 +48,16 @@ export class ButtplugClient extends EventEmitter {
   }
 
   public connect = async (connector: IButtplugClientConnector) => {
-    this._logger.Info(
+    this._logger.Info(`ButtplugClient: Connecting using ${connector.constructor.name}`);
-      `ButtplugClient: Connecting using ${connector.constructor.name}`
-    );
     await connector.connect();
     this._connector = connector;
-    this._connector.addListener('message', this.parseMessages);
+    this._connector.addListener("message", this.parseMessages);
-    this._connector.addListener('disconnect', this.disconnectHandler);
+    this._connector.addListener("disconnect", this.disconnectHandler);
     await this.initializeConnection();
   };
 
   public disconnect = async () => {
-    this._logger.Debug('ButtplugClient: Disconnect called');
+    this._logger.Debug("ButtplugClient: Disconnect called");
     this._devices.clear();
     this.checkConnector();
     await this.shutdownConnection();
@@ -71,25 +65,33 @@ export class ButtplugClient extends EventEmitter {
   };
 
   public startScanning = async () => {
-    this._logger.Debug('ButtplugClient: StartScanning called');
+    this._logger.Debug("ButtplugClient: StartScanning called");
     this._isScanning = true;
     await this.sendMsgExpectOk({ StartScanning: { Id: 1 } });
   };
 
   public stopScanning = async () => {
-    this._logger.Debug('ButtplugClient: StopScanning called');
+    this._logger.Debug("ButtplugClient: StopScanning called");
     this._isScanning = false;
     await this.sendMsgExpectOk({ StopScanning: { Id: 1 } });
   };
 
   public stopAllDevices = async () => {
-    this._logger.Debug('ButtplugClient: StopAllDevices');
+    this._logger.Debug("ButtplugClient: StopAllDevices");
-    await this.sendMsgExpectOk({ StopCmd: { Id: 1, DeviceIndex: undefined, FeatureIndex: undefined, Inputs: true, Outputs: true } });
+    await this.sendMsgExpectOk({
+      StopCmd: {
+        Id: 1,
+        DeviceIndex: undefined,
+        FeatureIndex: undefined,
+        Inputs: true,
+        Outputs: true,
+      },
+    });
   };
 
   protected disconnectHandler = () => {
-    this._logger.Info('ButtplugClient: Disconnect event receieved.');
+    this._logger.Info("ButtplugClient: Disconnect event receieved.");
-    this.emit('disconnect');
+    this.emit("disconnect");
   };
 
   protected parseMessages = (msgs: Messages.ButtplugMessage[]) => {
@@ -100,10 +102,10 @@ export class ButtplugClient extends EventEmitter {
         break;
       } else if (x.ScanningFinished !== undefined) {
         this._isScanning = false;
-        this.emit('scanningfinished', x);
+        this.emit("scanningfinished", x);
       } else if (x.InputReading !== undefined) {
         // TODO this should be emitted from the device or feature, not the client
-        this.emit('inputreading', x);
+        this.emit("inputreading", x);
       } else {
         console.log(`Unhandled message: ${x}`);
       }
@@ -112,21 +114,17 @@ export class ButtplugClient extends EventEmitter {
 
   protected initializeConnection = async (): Promise<boolean> => {
     this.checkConnector();
-    const msg = await this.sendMessage(
+    const msg = await this.sendMessage({
-      {
       RequestServerInfo: {
         ClientName: this._clientName,
         Id: 1,
         ProtocolVersionMajor: Messages.MESSAGE_SPEC_VERSION_MAJOR,
-          ProtocolVersionMinor: Messages.MESSAGE_SPEC_VERSION_MINOR
+        ProtocolVersionMinor: Messages.MESSAGE_SPEC_VERSION_MINOR,
-        }
+      },
-      }
+    });
-    );
     if (msg.ServerInfo !== undefined) {
       const serverinfo = msg as Messages.ServerInfo;
-      this._logger.Info(
+      this._logger.Info(`ButtplugClient: Connected to Server ${serverinfo.ServerName}`);
-        `ButtplugClient: Connected to Server ${serverinfo.ServerName}`
-      );
       // TODO: maybe store server name, do something with message template version?
       const ping = serverinfo.MaxPingTime;
       // If the server version is lower than the client version, the server will disconnect here.
@@ -153,22 +151,19 @@ export class ButtplugClient extends EventEmitter {
       throw ButtplugError.LogAndError(
         ButtplugInitError,
         this._logger,
-        `Cannot connect to server. ${err.ErrorMessage}`
+        `Cannot connect to server. ${err.ErrorMessage}`,
       );
     }
     return false;
-  }
+  };
 
   private parseDeviceList = (list: Messages.DeviceList) => {
     for (let [_, d] of Object.entries(list.Devices)) {
       if (!this._devices.has(d.DeviceIndex)) {
-        const device = ButtplugClientDevice.fromMsg(
+        const device = ButtplugClientDevice.fromMsg(d, this.sendMessageClosure);
-          d,
-          this.sendMessageClosure
-        );
         this._logger.Debug(`ButtplugClient: Adding Device: ${device}`);
         this._devices.set(d.DeviceIndex, device);
-        this.emit('deviceadded', device);
+        this.emit("deviceadded", device);
       } else {
         this._logger.Debug(`ButtplugClient: Device already added: ${d}`);
       }
@@ -176,19 +171,17 @@ export class ButtplugClient extends EventEmitter {
     for (let [index, device] of this._devices.entries()) {
       if (!list.Devices.hasOwnProperty(index.toString())) {
         this._devices.delete(index);
-        this.emit('deviceremoved', device);
+        this.emit("deviceremoved", device);
-      }
       }
     }
+  };
 
   protected requestDeviceList = async () => {
     this.checkConnector();
-    this._logger.Debug('ButtplugClient: ReceiveDeviceList called');
+    this._logger.Debug("ButtplugClient: ReceiveDeviceList called");
-    const response = (await this.sendMessage(
+    const response = await this.sendMessage({
-      {
+      RequestDeviceList: { Id: 1 },
-        RequestDeviceList: { Id: 1 }
+    });
-      }
-    ));
     this.parseDeviceList(response.DeviceList!);
   };
 
@@ -200,9 +193,7 @@ export class ButtplugClient extends EventEmitter {
     }
   };
 
-  protected async sendMessage(
+  protected async sendMessage(msg: Messages.ButtplugMessage): Promise<Messages.ButtplugMessage> {
-    msg: Messages.ButtplugMessage
-  ): Promise<Messages.ButtplugMessage> {
     this.checkConnector();
     const p = this._sorter.PrepareOutgoingMessage(msg);
     await this._connector!.send(msg);
@@ -211,15 +202,11 @@ export class ButtplugClient extends EventEmitter {
 
   protected checkConnector() {
     if (!this.connected) {
-      throw new ButtplugClientConnectorException(
+      throw new ButtplugClientConnectorException("ButtplugClient not connected");
-        'ButtplugClient not connected'
-      );
     }
   }
 
-  protected sendMsgExpectOk = async (
+  protected sendMsgExpectOk = async (msg: Messages.ButtplugMessage): Promise<void> => {
-    msg: Messages.ButtplugMessage
-  ): Promise<void> => {
     const response = await this.sendMessage(msg);
     if (response.Ok !== undefined) {
       return;
@@ -229,13 +216,13 @@ export class ButtplugClient extends EventEmitter {
       throw ButtplugError.LogAndError(
         ButtplugMessageError,
         this._logger,
-        `Message ${response} not handled by SendMsgExpectOk`
+        `Message ${response} not handled by SendMsgExpectOk`,
       );
     }
   };
 
   protected sendMessageClosure = async (
-    msg: Messages.ButtplugMessage
+    msg: Messages.ButtplugMessage,
   ): Promise<Messages.ButtplugMessage> => {
     return await this.sendMessage(msg);
   };

packages/buttplug/src/client/ButtplugClientConnectorException.ts

@@ -6,8 +6,8 @@
  * @copyright Copyright (c) Nonpolynomial Labs LLC. All rights reserved.
  */
 
-import { ButtplugError } from '../core/Exceptions';
+import { ButtplugError } from "../core/Exceptions";
-import * as Messages from '../core/Messages';
+import * as Messages from "../core/Messages";
 
 export class ButtplugClientConnectorException extends ButtplugError {
   public constructor(message: string) {

packages/buttplug/src/client/ButtplugClientDevice.ts

@@ -6,22 +6,17 @@
  * @copyright Copyright (c) Nonpolynomial Labs LLC. All rights reserved.
  */
 
-'use strict';
+"use strict";
-import * as Messages from '../core/Messages';
+import * as Messages from "../core/Messages";
-import {
+import { ButtplugDeviceError, ButtplugError, ButtplugMessageError } from "../core/Exceptions";
-  ButtplugDeviceError,
+import { EventEmitter } from "eventemitter3";
-  ButtplugError,
+import { ButtplugClientDeviceFeature } from "./ButtplugClientDeviceFeature";
-  ButtplugMessageError,
+import { DeviceOutputCommand } from "./ButtplugClientDeviceCommand";
-} from '../core/Exceptions';
-import { EventEmitter } from 'eventemitter3';
-import { ButtplugClientDeviceFeature } from './ButtplugClientDeviceFeature';
-import { DeviceOutputCommand } from './ButtplugClientDeviceCommand';
 
 /**
  * Represents an abstract device, capable of taking certain kinds of messages.
  */
 export class ButtplugClientDevice extends EventEmitter {
-
   private _features: Map<number, ButtplugClientDeviceFeature>;
 
   /**
@@ -58,9 +53,7 @@ export class ButtplugClientDevice extends EventEmitter {
 
   public static fromMsg(
     msg: Messages.DeviceInfo,
-    sendClosure: (
+    sendClosure: (msg: Messages.ButtplugMessage) => Promise<Messages.ButtplugMessage>,
-      msg: Messages.ButtplugMessage
-    ) => Promise<Messages.ButtplugMessage>
   ): ButtplugClientDevice {
     return new ButtplugClientDevice(msg, sendClosure);
   }
@@ -72,25 +65,29 @@ export class ButtplugClientDevice extends EventEmitter {
    */
   private constructor(
     private _deviceInfo: Messages.DeviceInfo,
-    private _sendClosure: (
+    private _sendClosure: (msg: Messages.ButtplugMessage) => Promise<Messages.ButtplugMessage>,
-      msg: Messages.ButtplugMessage
-    ) => Promise<Messages.ButtplugMessage>
   ) {
     super();
-    this._features = new Map(Object.entries(_deviceInfo.DeviceFeatures).map(([index, v]) => [parseInt(index), new ButtplugClientDeviceFeature(_deviceInfo.DeviceIndex, _deviceInfo.DeviceName, v, _sendClosure)]));
+    this._features = new Map(
+      Object.entries(_deviceInfo.DeviceFeatures).map(([index, v]) => [
+        parseInt(index),
+        new ButtplugClientDeviceFeature(
+          _deviceInfo.DeviceIndex,
+          _deviceInfo.DeviceName,
+          v,
+          _sendClosure,
+        ),
+      ]),
+    );
   }
 
-  public async send(
+  public async send(msg: Messages.ButtplugMessage): Promise<Messages.ButtplugMessage> {
-    msg: Messages.ButtplugMessage
-  ): Promise<Messages.ButtplugMessage> {
     // Assume we're getting the closure from ButtplugClient, which does all of
     // the index/existence/connection/message checks for us.
     return await this._sendClosure(msg);
   }
 
-  protected sendMsgExpectOk = async (
+  protected sendMsgExpectOk = async (msg: Messages.ButtplugMessage): Promise<void> => {
-    msg: Messages.ButtplugMessage
-  ): Promise<void> => {
     const response = await this.send(msg);
     if (response.Ok !== undefined) {
       return;
@@ -109,19 +106,36 @@ export class ButtplugClientDevice extends EventEmitter {
 
   protected isOutputValid(featureIndex: number, type: Messages.OutputType) {
     if (!this._deviceInfo.DeviceFeatures.hasOwnProperty(featureIndex.toString())) {
-      throw new ButtplugDeviceError(`Feature index ${featureIndex} does not exist for device ${this.name}`);
+      throw new ButtplugDeviceError(
+        `Feature index ${featureIndex} does not exist for device ${this.name}`,
+      );
     }
-    if (this._deviceInfo.DeviceFeatures[featureIndex.toString()].Outputs !== undefined && !this._deviceInfo.DeviceFeatures[featureIndex.toString()].Outputs.hasOwnProperty(type)) {
+    if (
-      throw new ButtplugDeviceError(`Feature index ${featureIndex} does not support type ${type} for device ${this.name}`);
+      this._deviceInfo.DeviceFeatures[featureIndex.toString()].Outputs !== undefined &&
+      !this._deviceInfo.DeviceFeatures[featureIndex.toString()].Outputs.hasOwnProperty(type)
+    ) {
+      throw new ButtplugDeviceError(
+        `Feature index ${featureIndex} does not support type ${type} for device ${this.name}`,
+      );
     }
   }
 
   public hasOutput(type: Messages.OutputType): boolean {
-    return this._features.values().filter((f) => f.hasOutput(type)).toArray().length > 0;
+    return (
+      this._features
+        .values()
+        .filter((f) => f.hasOutput(type))
+        .toArray().length > 0
+    );
   }
 
   public hasInput(type: Messages.InputType): boolean {
-    return this._features.values().filter((f) => f.hasInput(type)).toArray().length > 0;
+    return (
+      this._features
+        .values()
+        .filter((f) => f.hasInput(type))
+        .toArray().length > 0
+    );
   }
 
   public async runOutput(cmd: DeviceOutputCommand): Promise<void> {
@@ -138,7 +152,15 @@ export class ButtplugClientDevice extends EventEmitter {
   }
 
   public async stop(): Promise<void> {
-    await this.sendMsgExpectOk({StopCmd: { Id: 1, DeviceIndex: this.index, FeatureIndex: undefined, Inputs: true, Outputs: true}});
+    await this.sendMsgExpectOk({
+      StopCmd: {
+        Id: 1,
+        DeviceIndex: this.index,
+        FeatureIndex: undefined,
+        Inputs: true,
+        Outputs: true,
+      },
+    });
   }
 
   public async battery(): Promise<number> {
@@ -160,6 +182,6 @@ export class ButtplugClientDevice extends EventEmitter {
   }
 
   public emitDisconnected() {
-    this.emit('deviceremoved');
+    this.emit("deviceremoved");
   }
 }

packages/buttplug/src/client/ButtplugClientDeviceCommand.ts

@@ -14,7 +14,7 @@ class PercentOrSteps {
   }
 
   public static createSteps(s: number): PercentOrSteps {
-    let v = new PercentOrSteps;
+    let v = new PercentOrSteps();
     v._steps = s;
     return v;
   }
@@ -24,7 +24,7 @@ class PercentOrSteps {
       throw new ButtplugDeviceError(`Percent value ${p} is not in the range 0.0 <= x <= 1.0`);
     }
 
-    let v = new PercentOrSteps;
+    let v = new PercentOrSteps();
     v._percent = p;
     return v;
   }
@@ -35,8 +35,7 @@ export class DeviceOutputCommand {
     private _outputType: OutputType,
     private _value: PercentOrSteps,
     private _duration?: number,
-  )
+  ) {}
-  {}
 
   public get outputType() {
     return this._outputType;
@@ -52,26 +51,36 @@ export class DeviceOutputCommand {
 }
 
 export class DeviceOutputValueConstructor {
-  public constructor(
+  public constructor(private _outputType: OutputType) {}
-    private _outputType: OutputType)
-  {}
 
   public steps(steps: number): DeviceOutputCommand {
     return new DeviceOutputCommand(this._outputType, PercentOrSteps.createSteps(steps), undefined);
   }
 
   public percent(percent: number): DeviceOutputCommand {
-    return new DeviceOutputCommand(this._outputType, PercentOrSteps.createPercent(percent), undefined);
+    return new DeviceOutputCommand(
+      this._outputType,
+      PercentOrSteps.createPercent(percent),
+      undefined,
+    );
   }
 }
 
 export class DeviceOutputPositionWithDurationConstructor {
   public steps(steps: number, duration: number): DeviceOutputCommand {
-    return new DeviceOutputCommand(OutputType.Position, PercentOrSteps.createSteps(steps), duration);
+    return new DeviceOutputCommand(
+      OutputType.Position,
+      PercentOrSteps.createSteps(steps),
+      duration,
+    );
   }
 
   public percent(percent: number, duration: number): DeviceOutputCommand {
-    return new DeviceOutputCommand(OutputType.HwPositionWithDuration, PercentOrSteps.createPercent(percent), duration);
+    return new DeviceOutputCommand(
+      OutputType.HwPositionWithDuration,
+      PercentOrSteps.createPercent(percent),
+      duration,
+    );
   }
 }
 

packages/buttplug/src/client/ButtplugClientDeviceFeature.ts

@@ -3,23 +3,18 @@ import * as Messages from "../core/Messages";
 import { DeviceOutputCommand } from "./ButtplugClientDeviceCommand";
 
 export class ButtplugClientDeviceFeature {
-
   constructor(
     private _deviceIndex: number,
     private _deviceName: string,
     private _feature: Messages.DeviceFeature,
-    private _sendClosure: (
+    private _sendClosure: (msg: Messages.ButtplugMessage) => Promise<Messages.ButtplugMessage>,
-      msg: Messages.ButtplugMessage
+  ) {}
-    ) => Promise<Messages.ButtplugMessage>) {
-  }
 
   protected send = async (msg: Messages.ButtplugMessage): Promise<Messages.ButtplugMessage> => {
     return await this._sendClosure(msg);
-  }
+  };
 
-  protected sendMsgExpectOk = async (
+  protected sendMsgExpectOk = async (msg: Messages.ButtplugMessage): Promise<void> => {
-    msg: Messages.ButtplugMessage
-  ): Promise<void> => {
     const response = await this.send(msg);
     if (response.Ok !== undefined) {
       return;
@@ -32,13 +27,17 @@ export class ButtplugClientDeviceFeature {
 
   protected isOutputValid(type: Messages.OutputType) {
     if (this._feature.Output !== undefined && !this._feature.Output.hasOwnProperty(type)) {
-      throw new ButtplugDeviceError(`Feature index ${this._feature.FeatureIndex} does not support type ${type} for device ${this._deviceName}`);
+      throw new ButtplugDeviceError(
+        `Feature index ${this._feature.FeatureIndex} does not support type ${type} for device ${this._deviceName}`,
+      );
     }
   }
 
   protected isInputValid(type: Messages.InputType) {
     if (this._feature.Input !== undefined && !this._feature.Input.hasOwnProperty(type)) {
-      throw new ButtplugDeviceError(`Feature index ${this._feature.FeatureIndex} does not support type ${type} for device ${this._deviceName}`);
+      throw new ButtplugDeviceError(
+        `Feature index ${this._feature.FeatureIndex} does not support type ${type} for device ${this._deviceName}`,
+      );
     }
   }
 
@@ -74,8 +73,8 @@ export class ButtplugClientDeviceFeature {
         Id: 1,
         DeviceIndex: this._deviceIndex,
         FeatureIndex: this._feature.FeatureIndex,
-        Command: outCommand
+        Command: outCommand,
-      }
+      },
     };
     await this.sendMsgExpectOk(cmd);
   }
@@ -124,20 +123,29 @@ export class ButtplugClientDeviceFeature {
     return false;
   }
 
-
   public async runOutput(cmd: DeviceOutputCommand): Promise<void> {
-    if (this._feature.Output !== undefined && this._feature.Output.hasOwnProperty(cmd.outputType.toString())) {
+    if (
+      this._feature.Output !== undefined &&
+      this._feature.Output.hasOwnProperty(cmd.outputType.toString())
+    ) {
       return this.sendOutputCmd(cmd);
     }
     throw new ButtplugDeviceError(`Output type ${cmd.outputType} not supported by feature.`);
   }
 
-  public async runInput(inputType: Messages.InputType, inputCommand: Messages.InputCommandType): Promise<Messages.InputReading | undefined> {
+  public async runInput(
+    inputType: Messages.InputType,
+    inputCommand: Messages.InputCommandType,
+  ): Promise<Messages.InputReading | undefined> {
     // Make sure the requested feature is valid
     this.isInputValid(inputType);
     let inputAttributes = this._feature.Input[inputType];
     console.log(this._feature.Input);
-    if ((inputCommand === Messages.InputCommandType.Unsubscribe && !inputAttributes.Command.includes(Messages.InputCommandType.Subscribe)) && !inputAttributes.Command.includes(inputCommand)) {
+    if (
+      inputCommand === Messages.InputCommandType.Unsubscribe &&
+      !inputAttributes.Command.includes(Messages.InputCommandType.Subscribe) &&
+      !inputAttributes.Command.includes(inputCommand)
+    ) {
       throw new ButtplugDeviceError(`${inputType} does not support command ${inputCommand}`);
     }
 
@@ -148,7 +156,7 @@ export class ButtplugClientDeviceFeature {
         FeatureIndex: this._feature.FeatureIndex,
         Type: inputType,
         Command: inputCommand,
-      }
+      },
     };
     if (inputCommand == Messages.InputCommandType.Read) {
       const response = await this.send(cmd);

packages/buttplug/src/client/ButtplugNodeWebsocketClientConnector.ts

@@ -6,12 +6,11 @@
  * @copyright Copyright (c) Nonpolynomial Labs LLC. All rights reserved.
  */
 
-'use strict';
+"use strict";
 
-import { ButtplugBrowserWebsocketClientConnector } from './ButtplugBrowserWebsocketClientConnector';
+import { ButtplugBrowserWebsocketClientConnector } from "./ButtplugBrowserWebsocketClientConnector";
-import { WebSocket as NodeWebSocket } from 'ws';
+import { WebSocket as NodeWebSocket } from "ws";
 
 export class ButtplugNodeWebsocketClientConnector extends ButtplugBrowserWebsocketClientConnector {
-  protected _websocketConstructor =
+  protected _websocketConstructor = NodeWebSocket as unknown as typeof WebSocket;
-    NodeWebSocket as unknown as typeof WebSocket;
 }

packages/buttplug/src/client/IButtplugClientConnector.ts

@@ -6,8 +6,8 @@
  * @copyright Copyright (c) Nonpolynomial Labs LLC. All rights reserved.
  */
 
-import { ButtplugMessage } from '../core/Messages';
+import { ButtplugMessage } from "../core/Messages";
-import { EventEmitter } from 'eventemitter3';
+import { EventEmitter } from "eventemitter3";
 
 export interface IButtplugClientConnector extends EventEmitter {
   connect: () => Promise<void>;

packages/buttplug/src/core/Exceptions.ts

@@ -6,8 +6,8 @@
  * @copyright Copyright (c) Nonpolynomial Labs LLC. All rights reserved.
  */
 
-import * as Messages from './Messages';
+import * as Messages from "./Messages";
-import { ButtplugLogger } from './Logging';
+import { ButtplugLogger } from "./Logging";
 
 export class ButtplugError extends Error {
   public get ErrorClass(): Messages.ErrorClass {
@@ -27,16 +27,16 @@ export class ButtplugError extends Error {
       Error: {
         Id: this.Id,
         ErrorCode: this.ErrorClass,
-        ErrorMessage: this.message
+        ErrorMessage: this.message,
-      }
+      },
-    }
+    };
   }
 
   public static LogAndError<T extends ButtplugError>(
     constructor: new (str: string, num: number) => T,
     logger: ButtplugLogger,
     message: string,
-    id: number = Messages.SYSTEM_MESSAGE_ID
+    id: number = Messages.SYSTEM_MESSAGE_ID,
   ): T {
     logger.Error(message);
     return new constructor(message, id);
@@ -67,7 +67,7 @@ export class ButtplugError extends Error {
     message: string,
     errorClass: Messages.ErrorClass,
     id: number = Messages.SYSTEM_MESSAGE_ID,
-    inner?: Error
+    inner?: Error,
   ) {
     super(message);
     this.errorClass = errorClass;

packages/buttplug/src/core/Logging.ts

@@ -6,7 +6,7 @@
  * @copyright Copyright (c) Nonpolynomial Labs LLC. All rights reserved.
  */
 
-import { EventEmitter } from 'eventemitter3';
+import { EventEmitter } from "eventemitter3";
 
 export enum ButtplugLogLevel {
   Off,
@@ -69,9 +69,7 @@ export class LogMessage {
    * Returns a formatted string with timestamp, level, and message.
    */
   public get FormattedMessage() {
-    return `${ButtplugLogLevel[this.logLevel]} : ${this.timestamp} : ${
+    return `${ButtplugLogLevel[this.logLevel]} : ${this.timestamp} : ${this.logMessage}`;
-      this.logMessage
-    }`;
   }
 }
 
@@ -176,10 +174,7 @@ export class ButtplugLogger extends EventEmitter {
    */
   protected AddLogMessage(msg: string, level: ButtplugLogLevel) {
     // If nothing wants the log message we have, ignore it.
-    if (
+    if (level > this.maximumEventLogLevel && level > this.maximumConsoleLogLevel) {
-      level > this.maximumEventLogLevel &&
-      level > this.maximumConsoleLogLevel
-    ) {
       return;
     }
     const logMsg = new LogMessage(msg, level);
@@ -191,7 +186,7 @@ export class ButtplugLogger extends EventEmitter {
       console.log(logMsg.FormattedMessage);
     }
     if (level <= this.maximumEventLogLevel) {
-      this.emit('log', logMsg);
+      this.emit("log", logMsg);
     }
   }
 }

packages/buttplug/src/core/Messages.ts

@@ -7,9 +7,9 @@
  */
 
 // tslint:disable:max-classes-per-file
-'use strict';
+"use strict";
 
-import { ButtplugMessageError } from './Exceptions';
+import { ButtplugMessageError } from "./Exceptions";
 
 export const SYSTEM_MESSAGE_ID = 0;
 export const DEFAULT_MESSAGE_ID = 1;
@@ -132,34 +132,34 @@ export interface DeviceList {
 }
 
 export enum OutputType {
-  Unknown = 'Unknown',
+  Unknown = "Unknown",
-  Vibrate = 'Vibrate',
+  Vibrate = "Vibrate",
-  Rotate = 'Rotate',
+  Rotate = "Rotate",
-  Oscillate = 'Oscillate',
+  Oscillate = "Oscillate",
-  Constrict = 'Constrict',
+  Constrict = "Constrict",
-  Inflate = 'Inflate',
+  Inflate = "Inflate",
-  Position = 'Position',
+  Position = "Position",
-  HwPositionWithDuration = 'HwPositionWithDuration',
+  HwPositionWithDuration = "HwPositionWithDuration",
-  Temperature = 'Temperature',
+  Temperature = "Temperature",
-  Spray = 'Spray',
+  Spray = "Spray",
-  Led = 'Led',
+  Led = "Led",
 }
 
 export enum InputType {
-  Unknown = 'Unknown',
+  Unknown = "Unknown",
-  Battery = 'Battery',
+  Battery = "Battery",
-  RSSI = 'RSSI',
+  RSSI = "RSSI",
-  Button = 'Button',
+  Button = "Button",
-  Pressure = 'Pressure',
+  Pressure = "Pressure",
   // Temperature,
   // Accelerometer,
   // Gyro,
 }
 
 export enum InputCommandType {
-  Read = 'Read',
+  Read = "Read",
-  Subscribe = 'Subscribe',
+  Subscribe = "Subscribe",
-  Unsubscribe = 'Unsubscribe',
+  Unsubscribe = "Unsubscribe",
 }
 
 export interface DeviceFeatureInput {

packages/buttplug/src/index.ts

@@ -6,27 +6,24 @@
  * @copyright Copyright (c) Nonpolynomial Labs LLC. All rights reserved.
  */
 
-import { ButtplugMessage } from './core/Messages';
+import { ButtplugMessage } from "./core/Messages";
-import { IButtplugClientConnector } from './client/IButtplugClientConnector';
+import { IButtplugClientConnector } from "./client/IButtplugClientConnector";
-import { EventEmitter } from 'eventemitter3';
+import { EventEmitter } from "eventemitter3";
 
-export * from './client/ButtplugClient';
+export * from "./client/ButtplugClient";
-export * from './client/ButtplugClientDevice';
+export * from "./client/ButtplugClientDevice";
-export * from './client/ButtplugBrowserWebsocketClientConnector';
+export * from "./client/ButtplugBrowserWebsocketClientConnector";
-export * from './client/ButtplugNodeWebsocketClientConnector';
+export * from "./client/ButtplugNodeWebsocketClientConnector";
-export * from './client/ButtplugClientConnectorException';
+export * from "./client/ButtplugClientConnectorException";
-export * from './utils/ButtplugMessageSorter';
+export * from "./utils/ButtplugMessageSorter";
-export * from './client/ButtplugClientDeviceCommand';
+export * from "./client/ButtplugClientDeviceCommand";
-export * from './client/ButtplugClientDeviceFeature';
+export * from "./client/ButtplugClientDeviceFeature";
-export * from './client/IButtplugClientConnector';
+export * from "./client/IButtplugClientConnector";
-export * from './core/Messages';
+export * from "./core/Messages";
-export * from './core/Logging';
+export * from "./core/Logging";
-export * from './core/Exceptions';
+export * from "./core/Exceptions";
 
-export class ButtplugWasmClientConnector
+export class ButtplugWasmClientConnector extends EventEmitter implements IButtplugClientConnector {
-  extends EventEmitter
-  implements IButtplugClientConnector
-{
   private static _loggingActivated = false;
   private static wasmInstance;
   private _connected: boolean = false;
@@ -43,30 +40,25 @@ export class ButtplugWasmClientConnector
 
   private static maybeLoadWasm = async () => {
     if (ButtplugWasmClientConnector.wasmInstance == undefined) {
-      ButtplugWasmClientConnector.wasmInstance = await import(
+      ButtplugWasmClientConnector.wasmInstance = await import("../wasm/index.js");
-        '../wasm/index.js'
-      );
     }
   };
 
-  public static activateLogging = async (logLevel: string = 'debug') => {
+  public static activateLogging = async (logLevel: string = "debug") => {
     await ButtplugWasmClientConnector.maybeLoadWasm();
     if (this._loggingActivated) {
-      console.log('Logging already activated, ignoring.');
+      console.log("Logging already activated, ignoring.");
       return;
     }
-    console.log('Turning on logging.');
+    console.log("Turning on logging.");
-    ButtplugWasmClientConnector.wasmInstance.buttplug_activate_env_logger(
+    ButtplugWasmClientConnector.wasmInstance.buttplug_activate_env_logger(logLevel);
-      logLevel,
-    );
   };
 
   public initialize = async (): Promise<void> => {};
 
   public connect = async (): Promise<void> => {
     await ButtplugWasmClientConnector.maybeLoadWasm();
-    this.client =
+    this.client = ButtplugWasmClientConnector.wasmInstance.buttplug_create_embedded_wasm_server(
-      ButtplugWasmClientConnector.wasmInstance.buttplug_create_embedded_wasm_server(
       (msgs) => {
         this.emitMessage(msgs);
       },
@@ -80,7 +72,7 @@ export class ButtplugWasmClientConnector
   public send = (msg: ButtplugMessage): void => {
     ButtplugWasmClientConnector.wasmInstance.buttplug_client_send_json_message(
       this.client,
-      new TextEncoder().encode('[' + JSON.stringify(msg) + ']'),
+      new TextEncoder().encode("[" + JSON.stringify(msg) + "]"),
       (output) => {
         this.emitMessage(output);
       },
@@ -90,6 +82,6 @@ export class ButtplugWasmClientConnector
   private emitMessage = (msg: Uint8Array) => {
     const str = new TextDecoder().decode(msg);
     const msgs: ButtplugMessage[] = JSON.parse(str);
-    this.emit('message', msgs);
+    this.emit("message", msgs);
   };
 }

packages/buttplug/src/utils/ButtplugBrowserWebsocketConnector.ts

@@ -6,10 +6,10 @@
  * @copyright Copyright (c) Nonpolynomial Labs LLC. All rights reserved.
  */
 
-'use strict';
+"use strict";
 
-import { EventEmitter } from 'eventemitter3';
+import { EventEmitter } from "eventemitter3";
-import { ButtplugMessage } from '../core/Messages';
+import { ButtplugMessage } from "../core/Messages";
 
 export class ButtplugBrowserWebsocketConnector extends EventEmitter {
   protected _ws: WebSocket | undefined;
@@ -26,18 +26,20 @@ export class ButtplugBrowserWebsocketConnector extends EventEmitter {
   public connect = async (): Promise<void> => {
     return new Promise<void>((resolve, reject) => {
       const ws = new (this._websocketConstructor ?? WebSocket)(this._url);
-      const onErrorCallback = (event: Event) => {reject(event)}
+      const onErrorCallback = (event: Event) => {
-      const onCloseCallback = (event: CloseEvent) => reject(event.reason)
+        reject(event);
-      ws.addEventListener('open', async () => {
+      };
+      const onCloseCallback = (event: CloseEvent) => reject(event.reason);
+      ws.addEventListener("open", async () => {
         this._ws = ws;
         try {
           await this.initialize();
-          this._ws.addEventListener('message', (msg) => {
+          this._ws.addEventListener("message", (msg) => {
             this.parseIncomingMessage(msg);
           });
-          this._ws.removeEventListener('close', onCloseCallback);
+          this._ws.removeEventListener("close", onCloseCallback);
-          this._ws.removeEventListener('error', onErrorCallback);
+          this._ws.removeEventListener("error", onErrorCallback);
-          this._ws.addEventListener('close', this.disconnect);
+          this._ws.addEventListener("close", this.disconnect);
           resolve();
         } catch (e) {
           reject(e);
@@ -47,8 +49,8 @@ export class ButtplugBrowserWebsocketConnector extends EventEmitter {
       // browsers usually only throw Error Code 1006. It's up to those using this
       // library to state what the problem might be.
 
-      ws.addEventListener('error', onErrorCallback)
+      ws.addEventListener("error", onErrorCallback);
-      ws.addEventListener('close', onCloseCallback);
+      ws.addEventListener("close", onCloseCallback);
     });
   };
 
@@ -58,14 +60,14 @@ export class ButtplugBrowserWebsocketConnector extends EventEmitter {
     }
     this._ws!.close();
     this._ws = undefined;
-    this.emit('disconnect');
+    this.emit("disconnect");
   };
 
   public sendMessage(msg: ButtplugMessage) {
     if (!this.Connected) {
-      throw new Error('ButtplugBrowserWebsocketConnector not connected');
+      throw new Error("ButtplugBrowserWebsocketConnector not connected");
     }
-    this._ws!.send('[' + JSON.stringify(msg) + ']');
+    this._ws!.send("[" + JSON.stringify(msg) + "]");
   }
 
   public initialize = async (): Promise<void> => {
@@ -73,9 +75,9 @@ export class ButtplugBrowserWebsocketConnector extends EventEmitter {
   };
 
   protected parseIncomingMessage(event: MessageEvent) {
-    if (typeof event.data === 'string') {
+    if (typeof event.data === "string") {
       const msgs: ButtplugMessage[] = JSON.parse(event.data);
-      this.emit('message', msgs);
+      this.emit("message", msgs);
     } else if (event.data instanceof Blob) {
       // No-op, we only use text message types.
     }
@@ -83,6 +85,6 @@ export class ButtplugBrowserWebsocketConnector extends EventEmitter {
 
   protected onReaderLoad(event: Event) {
     const msgs: ButtplugMessage[] = JSON.parse((event.target as FileReader).result as string);
-    this.emit('message', msgs);
+    this.emit("message", msgs);
   }
 }

packages/buttplug/src/utils/ButtplugMessageSorter.ts

@@ -6,8 +6,8 @@
  * @copyright Copyright (c) Nonpolynomial Labs LLC. All rights reserved.
  */
 
-import * as Messages from '../core/Messages';
+import * as Messages from "../core/Messages";
-import { ButtplugError } from '../core/Exceptions';
+import { ButtplugError } from "../core/Exceptions";
 
 export class ButtplugMessageSorter {
   protected _counter = 1;
@@ -21,9 +21,7 @@ export class ButtplugMessageSorter {
   // One of the places we should actually return a promise, as we need to store
   // them while waiting for them to return across the line.
   // tslint:disable:promise-function-async
-  public PrepareOutgoingMessage(
+  public PrepareOutgoingMessage(msg: Messages.ButtplugMessage): Promise<Messages.ButtplugMessage> {
-    msg: Messages.ButtplugMessage
-  ): Promise<Messages.ButtplugMessage> {
     if (this._useCounter) {
       Messages.setMsgId(msg, this._counter);
       // Always increment last, otherwise we might lose sync
@@ -31,19 +29,15 @@ export class ButtplugMessageSorter {
     }
     let res;
     let rej;
-    const msgPromise = new Promise<Messages.ButtplugMessage>(
+    const msgPromise = new Promise<Messages.ButtplugMessage>((resolve, reject) => {
-      (resolve, reject) => {
       res = resolve;
       rej = reject;
-      }
+    });
-    );
     this._waitingMsgs.set(Messages.msgId(msg), [res, rej]);
     return msgPromise;
   }
 
-  public ParseIncomingMessages(
+  public ParseIncomingMessages(msgs: Messages.ButtplugMessage[]): Messages.ButtplugMessage[] {
-    msgs: Messages.ButtplugMessage[]
-  ): Messages.ButtplugMessage[] {
     const noMatch: Messages.ButtplugMessage[] = [];
     for (const x of msgs) {
       let id = Messages.msgId(x);

packages/frontend/src/app.css

@@ -77,11 +77,11 @@
   @keyframes pulseGlow {
     0%,
     100% {
-			boxShadow: 0 0 20px rgba(183, 0, 217, 0.3);
+      boxshadow: 0 0 20px rgba(183, 0, 217, 0.3);
     }
 
     50% {
-			boxShadow: 0 0 40px rgba(183, 0, 217, 0.6);
+      boxshadow: 0 0 40px rgba(183, 0, 217, 0.6);
     }
   }
 }

packages/frontend/src/app.html

@@ -1,17 +1,17 @@
 <!doctype html>
 <html lang="en">
-
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <link
-
+      href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
-
+      rel="stylesheet"
+    />
 
     <link rel="manifest" href="/site.webmanifest" />
     %sveltekit.head%
@@ -20,5 +20,4 @@
   <body data-sveltekit-preload-data="hover" class="dark">
     <div style="display: contents">%sveltekit.body%</div>
   </body>
-
 </html>

packages/frontend/src/hooks.server.ts

@@ -19,9 +19,9 @@ export const handle: Handle = async ({ event, resolve }) => {
   logger.request(request.method, url.pathname, {
     requestId,
     context: {
-			userAgent: request.headers.get('user-agent')?.substring(0, 100),
+      userAgent: request.headers.get("user-agent")?.substring(0, 100),
-			referer: request.headers.get('referer'),
+      referer: request.headers.get("referer"),
-			ip: request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip'),
+      ip: request.headers.get("x-forwarded-for") || request.headers.get("x-real-ip"),
     },
   });
 
@@ -33,7 +33,7 @@ export const handle: Handle = async ({ event, resolve }) => {
       locals.authStatus = await isAuthenticated(token);
 
       if (locals.authStatus.authenticated) {
-				logger.auth('Token validated', true, {
+        logger.auth("Token validated", true, {
           requestId,
           userId: locals.authStatus.user?.id,
           context: {
@@ -42,17 +42,17 @@ export const handle: Handle = async ({ event, resolve }) => {
           },
         });
       } else {
-				logger.auth('Token invalid', false, { requestId });
+        logger.auth("Token invalid", false, { requestId });
       }
     } catch (error) {
-			logger.error('Authentication check failed', {
+      logger.error("Authentication check failed", {
         requestId,
         error: error instanceof Error ? error : new Error(String(error)),
       });
       locals.authStatus = { authenticated: false };
     }
   } else {
-		logger.debug('No session token found', { requestId });
+    logger.debug("No session token found", { requestId });
     locals.authStatus = { authenticated: false };
   }
 
@@ -66,7 +66,7 @@ export const handle: Handle = async ({ event, resolve }) => {
     });
   } catch (error) {
     const duration = Date.now() - startTime;
-		logger.error('Request handler error', {
+    logger.error("Request handler error", {
       requestId,
       method: request.method,
       path: url.pathname,
@@ -82,12 +82,12 @@ export const handle: Handle = async ({ event, resolve }) => {
     requestId,
     userId: locals.authStatus.authenticated ? locals.authStatus.user?.id : undefined,
     context: {
-			cached: response.headers.get('x-sveltekit-page') === 'true',
+      cached: response.headers.get("x-sveltekit-page") === "true",
     },
   });
 
   // Add request ID to response headers (useful for debugging)
-	response.headers.set('x-request-id', requestId);
+  response.headers.set("x-request-id", requestId);
 
   return response;
 };

packages/frontend/src/lib/components/age-verification-dialog/age-verification-dialog.svelte

@@ -40,9 +40,7 @@ onMount(() => {
           <div
             class="w-10 h-10 shrink-0 grow-0 rounded-full bg-gradient-to-br from-primary to-purple-600 flex items-center justify-center"
           >
-                        <span class="text-primary-foreground text-sm"
+            <span class="text-primary-foreground text-sm">{$_("age_verification_dialog.age")}</span>
-                            >{$_("age_verification_dialog.age")}</span
-                        >
           </div>
           <div class="">
             <DialogTitle class="text-left text-xl font-semibold text-primary-foreground"
@@ -63,12 +61,7 @@ onMount(() => {
       <Button variant="destructive" href={$_("age_verification_dialog.exit_url")} size="sm">
         {$_("age_verification_dialog.exit")}
       </Button>
-            <Button
+      <Button variant="default" size="sm" onclick={handleAgeConfirmation} class="cursor-pointer">
-                variant="default"
-                size="sm"
-                onclick={handleAgeConfirmation}
-                class="cursor-pointer"
-            >
         <span class="icon-[ri--check-line]"></span>
         {$_("age_verification_dialog.confirm")}
       </Button>

packages/frontend/src/lib/components/burger-menu-button/burger-menu-button.svelte

@@ -2,11 +2,7 @@
   const { isMobileMenuOpen = $bindable(), label, onclick } = $props();
 </script>
 
-<button
+<button class="block rounded-full cursor-pointer" {onclick} aria-label={label}>
-  class="block rounded-full cursor-pointer"
-  onclick={onclick}
-  aria-label={label}
->
   <div
     class="relative flex overflow-hidden items-center justify-center rounded-full w-[50px] h-[50px] transform transition-all duration-200 shadow-md opacity-90 translate-x-3"
   >
@@ -14,23 +10,23 @@ const { isMobileMenuOpen = $bindable(), label, onclick } = $props();
       class="flex flex-col justify-between w-[16px] h-[10px] transform transition-all duration-300 origin-center overflow-hidden"
     >
       <div
-        class={`bg-white h-[2px] w-7 transform transition-all duration-300 origin-left ${isMobileMenuOpen ? 'translate-x-10' : ''}`}
+        class={`bg-white h-[2px] w-7 transform transition-all duration-300 origin-left ${isMobileMenuOpen ? "translate-x-10" : ""}`}
       ></div>
       <div
-        class={`bg-white h-[2px] w-7 rounded transform transition-all duration-300 delay-75 ${isMobileMenuOpen ? 'translate-x-10' : ''}`}
+        class={`bg-white h-[2px] w-7 rounded transform transition-all duration-300 delay-75 ${isMobileMenuOpen ? "translate-x-10" : ""}`}
       ></div>
       <div
-        class={`bg-white h-[2px] w-7 transform transition-all duration-300 origin-left delay-150 ${isMobileMenuOpen ? 'translate-x-10' : ''}`}
+        class={`bg-white h-[2px] w-7 transform transition-all duration-300 origin-left delay-150 ${isMobileMenuOpen ? "translate-x-10" : ""}`}
       ></div>
 
       <div
-        class={`absolute items-center justify-between transform transition-all duration-500 top-6.5 -translate-x-10 flex w-0 ${isMobileMenuOpen ? 'translate-x-0 w-12' : ''}`}
+        class={`absolute items-center justify-between transform transition-all duration-500 top-6.5 -translate-x-10 flex w-0 ${isMobileMenuOpen ? "translate-x-0 w-12" : ""}`}
       >
         <div
-          class={`absolute bg-white h-[2px] w-4 transform transition-all duration-500 rotate-0 delay-300 ${isMobileMenuOpen ? 'rotate-45' : ''}`}
+          class={`absolute bg-white h-[2px] w-4 transform transition-all duration-500 rotate-0 delay-300 ${isMobileMenuOpen ? "rotate-45" : ""}`}
         ></div>
         <div
-          class={`absolute bg-white h-[2px] w-4 transform transition-all duration-500 -rotate-0 delay-300 ${isMobileMenuOpen ? '-rotate-45' : ''}`}
+          class={`absolute bg-white h-[2px] w-4 transform transition-all duration-500 -rotate-0 delay-300 ${isMobileMenuOpen ? "-rotate-45" : ""}`}
         ></div>
       </div>
     </div>

packages/frontend/src/lib/components/device-card/device-card.svelte

@@ -52,12 +52,12 @@ function isActive() {
         <div
           class="p-2 rounded-lg bg-gradient-to-br from-primary/20 to-accent/20 border border-primary/30 flex shrink-0 grow-0"
         >
-                    <span class={cn([...getScalarAnimations(), "icon-[ri--rocket-line] w-5 h-5 text-primary"])}></span>
+          <span
+            class={cn([...getScalarAnimations(), "icon-[ri--rocket-line] w-5 h-5 text-primary"])}
+          ></span>
         </div>
         <div>
-                    <h3
+          <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>
           <!-- <p class="text-sm text-muted-foreground">
@@ -65,27 +65,20 @@ function isActive() {
 					</p> -->
         </div>
       </div>
-            <button class={`${isActive() ? "cursor-pointer" : ""} flex items-center gap-2`} onclick={() => isActive() && onStop()}>
+      <button
+        class={`${isActive() ? "cursor-pointer" : ""} flex items-center gap-2`}
+        onclick={() => isActive() && onStop()}
+      >
         <div class="relative">
-                    <div
+          <div class="w-2 h-2 rounded-full {isActive() ? 'bg-green-400' : 'bg-red-400'}"></div>
-                        class="w-2 h-2 rounded-full {isActive()
-                        ? 'bg-green-400'
-                        : 'bg-red-400'}"
-                    ></div>
           {#if isActive()}
             <div
               class="absolute inset-0 w-2 h-2 rounded-full bg-green-400 animate-ping opacity-75"
             ></div>
           {/if}
         </div>
-                <span
+        <span class="text-xs font-medium {isActive() ? 'text-green-400' : 'text-red-400'}">
-                class="text-xs font-medium {isActive()
+          {isActive() ? $_("device_card.active") : $_("device_card.paused")}
-                    ? 'text-green-400'
-                    : 'text-red-400'}"
-                >
-                {isActive()
-                    ? $_("device_card.active")
-                    : $_("device_card.paused")}
         </span>
       </button>
     </div>
@@ -108,9 +101,7 @@ function isActive() {
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-2">
           <span
-                        class="icon-[ri--battery-2-charge-line] w-4 h-4 {getBatteryColor(
+            class="icon-[ri--battery-2-charge-line] w-4 h-4 {getBatteryColor(device.batteryLevel)}"
-                            device.batteryLevel,
-                        )}"
           ></span>
           <span class="text-sm text-muted-foreground">{$_("device_card.battery")}</span>
         </div>
@@ -142,9 +133,7 @@ function isActive() {
     {#each device.actuators as actuator, idx (idx)}
       <div class="space-y-2">
         <Label for={`device-${device.info.index}-${actuator.featureIndex}-${actuator.outputType}`}
-                    >{$_(
+          >{$_(`device_card.actuator_types.${actuator.outputType.toLowerCase()}`)}</Label
-                        `device_card.actuator_types.${actuator.outputType.toLowerCase()}`,
-                    )}</Label
         >
         <Slider
           id={`device-${device.info.index}-${actuator.featureIndex}-${actuator.outputType}`}

packages/frontend/src/lib/components/girls/girls.svelte

@@ -7,9 +7,7 @@
     stroke="#ce47eb"
     preserveAspectRatio="xMidYMid meet"
   >
-    <metadata>
+    <metadata> Created by potrace 1.15, written by Peter Selinger 2001-2017 </metadata>
-      Created by potrace 1.15, written by Peter Selinger 2001-2017
-    </metadata>
     <g transform="translate(0.000000,904.000000) scale(0.100000,-0.100000)">
       <path
         d="M7930 7043 c-73 -10 -95 -18 -134 -51 -25 -20 -66 -53 -91 -72 -26

packages/frontend/src/lib/components/header/header.svelte

@@ -67,12 +67,12 @@ function isActiveLink(link: any) {
           <a
             href={link.href}
             class={`text-sm hover:text-foreground transition-colors duration-200 font-medium relative group ${
-              isActiveLink(link) ? 'text-foreground' : 'text-foreground/85'
+              isActiveLink(link) ? "text-foreground" : "text-foreground/85"
             }`}
           >
             {link.name}
             <span
-              class={`absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300 ${isActiveLink(link) ? 'w-full' : 'group-hover:w-full'}`}
+              class={`absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300 ${isActiveLink(link) ? "w-full" : "group-hover:w-full"}`}
             ></span>
           </a>
         {/each}
@@ -95,29 +95,29 @@ function isActiveLink(link: any) {
             <Button
               variant="link"
               size="icon"
-              class={`hidden sm:flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: '/me' }) ? 'text-foreground' : 'hover:text-foreground'}`}
+              class={`hidden sm:flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/me" }) ? "text-foreground" : "hover:text-foreground"}`}
               href="/me"
-              title={$_('header.dashboard')}
+              title={$_("header.dashboard")}
             >
               <span class="icon-[ri--dashboard-2-line] h-4 w-4"></span>
               <span
-                class={`absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300 ${isActiveLink({ href: '/me' }) ? 'w-full' : 'group-hover:w-full'}`}
+                class={`absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300 ${isActiveLink({ href: "/me" }) ? "w-full" : "group-hover:w-full"}`}
               ></span>
-              <span class="sr-only">{$_('header.dashboard')}</span>
+              <span class="sr-only">{$_("header.dashboard")}</span>
             </Button>
 
             <Button
               variant="link"
               size="icon"
-              class={`hidden sm:flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: '/play' }) ? 'text-foreground' : 'hover:text-foreground'}`}
+              class={`hidden sm:flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/play" }) ? "text-foreground" : "hover:text-foreground"}`}
               href="/play"
-              title={$_('header.play')}
+              title={$_("header.play")}
             >
               <span class="icon-[ri--rocket-line] h-4 w-4"></span>
               <span
-                class={`absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300 ${isActiveLink({ href: '/play' }) ? 'w-full' : 'group-hover:w-full'}`}
+                class={`absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300 ${isActiveLink({ href: "/play" }) ? "w-full" : "group-hover:w-full"}`}
               ></span>
-              <span class="sr-only">{$_('header.play')}</span>
+              <span class="sr-only">{$_("header.play")}</span>
             </Button>
 
             <Separator orientation="vertical" class="hidden md:flex mx-1 h-6 bg-border/50" />
@@ -126,9 +126,10 @@ function isActiveLink(link: any) {
 
             <LogoutButton
               user={{
-                name: authStatus.user!.artist_name || authStatus.user!.email.split('@')[0] || 'User',
+                name:
-                avatar: getAssetUrl(authStatus.user!.avatar?.id, 'mini')!,
+                  authStatus.user!.artist_name || authStatus.user!.email.split("@")[0] || "User",
-                email: authStatus.user!.email
+                avatar: getAssetUrl(authStatus.user!.avatar?.id, "mini")!,
+                email: authStatus.user!.email,
               }}
               onLogout={handleLogout}
             />
@@ -136,18 +137,16 @@ function isActiveLink(link: any) {
         </div>
       {:else}
         <div class="flex w-full items-center justify-end gap-4">
-          <Button variant="outline" class="font-medium" href="/login"
+          <Button variant="outline" class="font-medium" href="/login">{$_("header.login")}</Button>
-            >{$_('header.login')}</Button
-          >
           <Button
             href="/signup"
             class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 font-medium"
-            >{$_('header.signup')}</Button
+            >{$_("header.signup")}</Button
           >
         </div>
       {/if}
       <BurgerMenuButton
-        label={$_('header.navigation')}
+        label={$_("header.navigation")}
         bind:isMobileMenuOpen
         onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
       />
@@ -155,7 +154,7 @@ function isActiveLink(link: any) {
   </div>
   <!-- Mobile Navigation -->
   <div
-    class={`border-t border-border/20 bg-background/95 bg-gradient-to-br from-primary to-accent backdrop-blur-xl max-h-[calc(100vh-4rem)] overflow-y-auto shadow-xl/30 transition-all duration-250 ${isMobileMenuOpen ? 'opacity-100' : 'opacity-0'}`}
+    class={`border-t border-border/20 bg-background/95 bg-gradient-to-br from-primary to-accent backdrop-blur-xl max-h-[calc(100vh-4rem)] overflow-y-auto shadow-xl/30 transition-all duration-250 ${isMobileMenuOpen ? "opacity-100" : "opacity-0"}`}
   >
     {#if isMobileMenuOpen}
       <div class="container mx-auto grid grid-cols-1 lg:grid-cols-3">
@@ -168,13 +167,11 @@ function isActiveLink(link: any) {
             <div
               class="relative overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-br from-card to-card/50 p-4 backdrop-blur-sm"
             >
-              <div
+              <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5"></div>
-                class="absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5"
-              ></div>
               <div class="relative flex items-center gap-4">
                 <Avatar class="h-14 w-14 ring-2 ring-primary/30">
                   <AvatarImage
-                    src={getAssetUrl(authStatus.user!.avatar?.id, 'mini')}
+                    src={getAssetUrl(authStatus.user!.avatar?.id, "mini")}
                     alt={authStatus.user!.artist_name}
                   />
                   <AvatarFallback
@@ -212,17 +209,15 @@ function isActiveLink(link: any) {
           {/if}
           <!-- Navigation Cards -->
           <div class="space-y-3">
-            <h3
+            <h3 class="px-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-              class="px-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider"
+              {$_("header.navigation")}
-            >
-              {$_('header.navigation')}
             </h3>
             <div class="grid gap-2">
               {#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(
-                    link
+                    link,
                   )
                     ? 'border-primary/30 bg-primary/5'
                     : ''}"
@@ -233,8 +228,7 @@ function isActiveLink(link: any) {
                     <!-- {#if isActiveLink(link)}
                       <div class="h-2 w-2 rounded-full bg-primary"></div>
                     {/if} -->
-                    <span
+                    <span class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground"
-                      class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground"
                     ></span>
                   </div>
                 </a>
@@ -244,16 +238,14 @@ function isActiveLink(link: any) {
 
           <!-- Account Actions -->
           <div class="space-y-3">
-            <h3
+            <h3 class="px-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-              class="px-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider"
+              {$_("header.account")}
-            >
-              {$_('header.account')}
             </h3>
 
             <div class="grid gap-2">
               {#if authStatus.authenticated}
                 <a
-                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: '/me' }) ? 'border-primary/30 bg-primary/5' : ''}`}
+                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: "/me" }) ? "border-primary/30 bg-primary/5" : ""}`}
                   href="/me"
                   onclick={closeMenu}
                 >
@@ -266,13 +258,9 @@ function isActiveLink(link: any) {
                   </div>
                   <div class="flex flex-1 flex-col gap-1">
                     <div class="flex items-center gap-2">
-                      <span class="font-medium text-foreground"
+                      <span class="font-medium text-foreground">{$_("header.dashboard")}</span>
-                        >{$_('header.dashboard')}</span
-                      >
                     </div>
-                    <span class="text-sm text-muted-foreground"
+                    <span class="text-sm text-muted-foreground">{$_("header.dashboard_hint")}</span>
-                      >{$_('header.dashboard_hint')}</span
-                    >
                   </div>
                   <span
                     class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground transition-all"
@@ -280,7 +268,7 @@ function isActiveLink(link: any) {
                 </a>
 
                 <a
-                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: '/play' }) ? 'border-primary/30 bg-primary/5' : ''}`}
+                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: "/play" }) ? "border-primary/30 bg-primary/5" : ""}`}
                   href="/play"
                   onclick={closeMenu}
                 >
@@ -293,13 +281,9 @@ function isActiveLink(link: any) {
                   </div>
                   <div class="flex flex-1 flex-col gap-1">
                     <div class="flex items-center gap-2">
-                      <span class="font-medium text-foreground"
+                      <span class="font-medium text-foreground">{$_("header.play")}</span>
-                        >{$_('header.play')}</span
-                      >
                     </div>
-                    <span class="text-sm text-muted-foreground"
+                    <span class="text-sm text-muted-foreground">{$_("header.play_hint")}</span>
-                      >{$_('header.play_hint')}</span
-                    >
                   </div>
                   <span
                     class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground transition-all"
@@ -307,7 +291,7 @@ function isActiveLink(link: any) {
                 </a>
               {:else}
                 <a
-                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: '/login' }) ? 'border-primary/30 bg-primary/5' : ''}`}
+                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: "/login" }) ? "border-primary/30 bg-primary/5" : ""}`}
                   href="/login"
                   onclick={closeMenu}
                 >
@@ -320,13 +304,9 @@ function isActiveLink(link: any) {
                   </div>
                   <div class="flex flex-1 flex-col gap-1">
                     <div class="flex items-center gap-2">
-                      <span class="font-medium text-foreground"
+                      <span class="font-medium text-foreground">{$_("header.login")}</span>
-                        >{$_('header.login')}</span
-                      >
                     </div>
-                    <span class="text-sm text-muted-foreground"
+                    <span class="text-sm text-muted-foreground">{$_("header.login_hint")}</span>
-                      >{$_('header.login_hint')}</span
-                    >
                   </div>
                   <span
                     class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground transition-all"
@@ -334,7 +314,7 @@ function isActiveLink(link: any) {
                 </a>
 
                 <a
-                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: '/signup' }) ? 'border-primary/30 bg-primary/5' : ''}`}
+                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: "/signup" }) ? "border-primary/30 bg-primary/5" : ""}`}
                   href="/signup"
                   onclick={closeMenu}
                 >
@@ -347,13 +327,9 @@ function isActiveLink(link: any) {
                   </div>
                   <div class="flex flex-1 flex-col gap-1">
                     <div class="flex items-center gap-2">
-                      <span class="font-medium text-foreground"
+                      <span class="font-medium text-foreground">{$_("header.signup")}</span>
-                        >{$_('header.signup')}</span
-                      >
                     </div>
-                    <span class="text-sm text-muted-foreground"
+                    <span class="text-sm text-muted-foreground">{$_("header.signup_hint")}</span>
-                      >{$_('header.signup_hint')}</span
-                    >
                   </div>
                   <span
                     class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground transition-all"
@@ -372,17 +348,11 @@ function isActiveLink(link: any) {
               <div
                 class="flex h-10 w-10 items-center justify-center rounded-xl bg-destructive/10 group-hover:bg-destructive/20 transition-all"
               >
-                <span
+                <span class="icon-[ri--logout-circle-r-line] h-4 w-4 text-destructive"></span>
-                  class="icon-[ri--logout-circle-r-line] h-4 w-4 text-destructive"
-                ></span>
               </div>
               <div class="flex flex-1 flex-col gap-1">
-                <span class="font-medium text-foreground"
+                <span class="font-medium text-foreground">{$_("header.logout")}</span>
-                  >{$_('header.logout')}</span
+                <span class="text-sm text-muted-foreground">{$_("header.logout_hint")}</span>
-                >
-                <span class="text-sm text-muted-foreground"
-                  >{$_('header.logout_hint')}</span
-                >
               </div>
             </button>
           {/if}

packages/frontend/src/lib/components/icon/peony-icon.svelte

@@ -19,7 +19,6 @@ let { class: className = "", size = "24" }: Props = $props();
       d="M418.813 30.625c-21.178 26.27-49.712 50.982-84.125 70.844-36.778 21.225-75.064 33.62-110.313 38.06a310.317 310.317 0 0 0 6.813 18.25c16.01.277 29.366-.434 36.406-1.5l9.47-1.53 8.436-1.28.22 10.186a307.48 307.48 0 0 1-1.095 18.72l56.625 8.843c.86-.095 1.713-.15 2.563-.157 11.188-.114 21.44 7.29 24.468 18.593.657 2.448.922 4.903.845 7.313 5.972-2.075 11.753-4.305 17.28-6.72l9.595-4.188 2.313 10.22a340.211 340.211 0 0 1 7.375 48.062C438.29 247.836 468.438 225.71 493 197.5c-3.22-36.73-16.154-78.04-39.125-117.813a290.509 290.509 0 0 0-2.22-3.78l-27.56 71.374c5.154.762 10.123 3.158 14.092 7.126 9.81 9.807 9.813 25.69 0 35.5-9.812 9.81-25.722 9.807-35.53 0-8.86-8.858-9.69-22.68-2.532-32.5l38.938-100.844a322.02 322.02 0 0 0-20.25-25.937zM51.842 118.72c-8.46 17.373-15.76 36.198-21.187 56.436-14.108 52.617-13.96 103.682-2.812 143.438 13.3-2.605 26.442-3.96 39.312-4.03 1.855-.012 3.688.02 5.53.06 20.857.48 40.98 4.332 59.97 11.5a355.064 355.064 0 0 1-1.656-34.218c0-27.8 3.135-54.377 9-78.937l2.47-10.407 9.655 4.562c29.467 13.98 66.194 23.424 106.28 25.22 5.136-20.05 8.19-39.78 9.408-58.75-35.198 4.83-75.387 2.766-116.407-8.22-38.363-10.272-72.314-26.78-99.562-46.656zm230.594 82.218c-1.535 10.452-3.615 21.03-6.218 31.687a312.754 312.754 0 0 0 46-3.97 24.98 24.98 0 0 1-1.532-21.748l-38.25-5.97zM105 201.375l4.156 18.22-21.594 4.905c8.75 5.174 13.353 15.703 10.594 26-3.32 12.394-16.045 19.758-28.437 16.438-12.394-3.32-19.76-16.075-16.44-28.47a23.235 23.235 0 0 1 3.126-6.874l-21.062 4.78-4.125-18.218 73.78-16.78zm388.594 22.813c-25.53 25.46-55.306 45.445-86.906 60.5.05 2.397.093 4.8.093 7.218 0 9.188-.354 18.232-1.03 27.125 16.635 1.33 32.045-1.7 45.344-9.374 25.925-14.962 40.608-45.694 42.5-85.47zm-338.844 3c-4.03 19.993-6.33 41.31-6.406 63.593l.125-.342c30.568 10.174 62.622 17.572 95.25 21.375l7.5.875.718 7.5 5.687 60.125-18.625 1.75-2.53-26.75a23.117 23.117 0 0 1-14.845.968c-12.393-3.32-19.76-16.042-16.438-28.436.285-1.06.647-2.08 1.063-3.063a496.627 496.627 0 0 1-57.406-14.53c2.69 49.62 16.154 94.04 36.094 126.656 22.366 36.588 52.13 57.78 83.968 57.78 31.838.003 61.602-21.19 83.97-57.78 19.536-31.96 32.846-75.244 35.905-123.656a499.132 499.132 0 0 1-48.25 11.656c1.914 4.57 2.415 9.78 1.033 14.938-3.322 12.394-16.045 19.758-28.438 16.437a23.01 23.01 0 0 1-2.125-.686l-2.5 26.47-18.594-1.752 5.688-60.125.72-7.5 7.498-.875c29.245-3.407 57.995-9.717 85.657-18.312v-1.594c0-21.573-2.27-42.23-6.064-61.75C351.132 242.653 313.092 250 272.312 250c-43.59 0-83.986-8.658-117.562-22.813zm-87.5 105.968c-10.87.102-21.995 1.22-33.375 3.313 12.695 31.62 33.117 53.07 59 60 16.9 4.523 34.896 2.536 52.813-5.25-4.382-13.89-7.874-28.606-10.344-43.97-21.115-9.623-43.934-14.32-68.094-14.094zm137.5 80.22h130.813c-40.082 44.594-92.623 42.844-130.813 0z"
       fill-opacity="1"
       style="fill: currentColor; stroke: #ce47eb; stroke-width: 10px;"
-
     ></path></g
   ></svg
 >

packages/frontend/src/lib/components/image-viewer/image-viewer.svelte

@@ -101,9 +101,7 @@ onDestroy(() => {
 
 <!-- Gallery Grid -->
 <div class="w-full mx-auto">
-  <div
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 animate-fade-in">
-    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 (index)}
       <button
         onclick={() => openViewer(index)}
@@ -145,14 +143,9 @@ onDestroy(() => {
 
 <!-- Image Viewer Modal -->
 {#if isViewerOpen}
-  <div
+  <div class="fixed inset-0 z-50 flex items-center justify-center animate-fade-in">
-    class="fixed inset-0 z-50 flex items-center justify-center animate-fade-in"
-  >
     <!-- Backdrop -->
-    <div
+    <div class="absolute inset-0 bg-black/95 backdrop-blur-xl" onclick={closeViewer}></div>
-      class="absolute inset-0 bg-black/95 backdrop-blur-xl"
-      onclick={closeViewer}
-    ></div>
 
     <!-- Viewer Content -->
     <div class="relative w-[90vw] h-[90vh] flex flex-col animate-slide-up">
@@ -167,8 +160,8 @@ onDestroy(() => {
               {$_("image_viewer.index", {
                 values: {
                   index: currentImageIndex + 1,
-                    size: images.length
+                  size: images.length,
-                }
+                },
               })}
             </div>
             <p class="text-zinc-400 max-w-2xl">

packages/frontend/src/lib/components/logo/logo.svelte

@@ -11,11 +11,11 @@ const { hideName = false } = $props();
 <span
   class={`logo text-3xl text-foreground opacity-90 tracking-wide font-extrabold drop-shadow-x ${hideName ? "hidden sm:inline-block" : ""}`}
 >
-  {$_('brand.name')}
+  {$_("brand.name")}
 </span>
 
 <style>
   .logo {
-    font-family: 'Dancing Script', cursive;
+    font-family: "Dancing Script", cursive;
   }
 </style>

packages/frontend/src/lib/components/logout-button/logout-button.svelte

@@ -102,7 +102,9 @@ $effect(() => {
 </script>
 
 <div
-	class="relative h-10 w-40 rounded-full bg-muted/30 overflow-hidden select-none transition-all duration-300 bg-muted/40 shadow-lg shadow-accent/10 {isDragging ? 'cursor-grabbing' : ''}"
+  class="relative h-10 w-40 rounded-full bg-muted/30 overflow-hidden select-none transition-all duration-300 bg-muted/40 shadow-lg shadow-accent/10 {isDragging
+    ? 'cursor-grabbing'
+    : ''}"
   style="background: linear-gradient(90deg, 
 		oklch(var(--primary) / 0.3) 0%, 
 		oklch(var(--primary) / 0.3) {(1 - slideProgress) * 100}%, 
@@ -122,27 +124,61 @@ $effect(() => {
   ></div>
 
   <!-- Sliding user info -->
-	<button class="cursor-grab absolute left-0 top-0 h-full flex items-center gap-3 px-2 transition-all duration-200 ease-out rounded-full bg-background/80 backdrop-blur-sm border border-border/50 bg-background/90 border-primary/20 {isDragging ? '' : 'transition-all duration-300 ease-out'}" style="transform: translateX({slidePosition}px); width: calc(100% - {slidePosition}px);" onmousedown={handleMouseDown} ontouchstart={handleTouchStart}>
+  <button
-        <Avatar class="h-7 w-7 ring-2 ring-accent/20 transition-all duration-200 {isNearThreshold ? 'ring-destructive/40' : ''}" style="opacity: {Math.max(0.1, 1 - slideProgress * 1.8)}">
+    class="cursor-grab absolute left-0 top-0 h-full flex items-center gap-3 px-2 transition-all duration-200 ease-out rounded-full bg-background/80 backdrop-blur-sm border border-border/50 bg-background/90 border-primary/20 {isDragging
+      ? ''
+      : 'transition-all duration-300 ease-out'}"
+    style="transform: translateX({slidePosition}px); width: calc(100% - {slidePosition}px);"
+    onmousedown={handleMouseDown}
+    ontouchstart={handleTouchStart}
+  >
+    <Avatar
+      class="h-7 w-7 ring-2 ring-accent/20 transition-all duration-200 {isNearThreshold
+        ? 'ring-destructive/40'
+        : ''}"
+      style="opacity: {Math.max(0.1, 1 - slideProgress * 1.8)}"
+    >
       <AvatarImage src={user.avatar} alt={user.name || user.email} />
-			<AvatarFallback class="bg-gradient-to-br from-primary to-accent text-primary-foreground text-xs font-semibold transition-all duration-200 {isNearThreshold ? 'from-destructive to-destructive/80' : ''}">
+      <AvatarFallback
+        class="bg-gradient-to-br from-primary to-accent text-primary-foreground text-xs font-semibold transition-all duration-200 {isNearThreshold
+          ? 'from-destructive to-destructive/80'
+          : ''}"
+      >
         {getUserInitials(user.name || user.email)}
       </AvatarFallback>
     </Avatar>
     <div class="text-left flex flex-col min-w-0 flex-1">
-			<span class="text-sm font-medium text-foreground leading-none truncate transition-all duration-200 {isNearThreshold ? 'text-destructive' : ''}" style="opacity: {Math.max(0.15, 1 - slideProgress * 1.5)}">{user?.name ? user.name.split(" ")[0] : "User"}</span>
+      <span
-			<span class="text-xs text-muted-foreground leading-none transition-all duration-200 {isNearThreshold ? 'text-destructive/70' : ''}" style="opacity: {Math.max(0.1, 1 - slideProgress * 1.8)}">
+        class="text-sm font-medium text-foreground leading-none truncate transition-all duration-200 {isNearThreshold
+          ? 'text-destructive'
+          : ''}"
+        style="opacity: {Math.max(0.15, 1 - slideProgress * 1.5)}"
+        >{user?.name ? user.name.split(" ")[0] : "User"}</span
+      >
+      <span
+        class="text-xs text-muted-foreground leading-none transition-all duration-200 {isNearThreshold
+          ? 'text-destructive/70'
+          : ''}"
+        style="opacity: {Math.max(0.1, 1 - slideProgress * 1.8)}"
+      >
         {slideProgress > 0.3 ? "Logout" : "Online"}
       </span>
     </div>
   </button>
 
   <!-- Logout icon area -->
-	<div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full transition-all duration-200 {isNearThreshold ? 'bg-destructive text-destructive-foreground scale-110' : 'bg-transparent text-foreground'}">
+  <div
-        <span class="icon-[ri--logout-circle-r-line] h-4 w-4 transition-transform duration-200 {isNearThreshold ? 'scale-110' : ''}" ></span>
+    class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full transition-all duration-200 {isNearThreshold
+      ? 'bg-destructive text-destructive-foreground scale-110'
+      : 'bg-transparent text-foreground'}"
+  >
+    <span
+      class="icon-[ri--logout-circle-r-line] h-4 w-4 transition-transform duration-200 {isNearThreshold
+        ? 'scale-110'
+        : ''}"
+    ></span>
   </div>
 
-
   <!-- Progress indicator -->
   <!-- <div class="absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-200 rounded-full" style="width: {slideProgress * 100}%"></div> -->
 </div>

packages/frontend/src/lib/components/meta/meta.svelte

@@ -18,10 +18,7 @@
 <svelte:head>
   <title>{$_("head.title", { values: { title } })}</title>
   <meta name="description" content={description} />
-	<meta
+  <meta property="og:title" content={$_("head.title", { values: { title } })} />
-		property="og:title"
-		content={$_("head.title", { values: { title } })}
-	/>
   <meta property="og:description" content={description} />
   <meta property="og:image" content={image} />
 </svelte:head>

packages/frontend/src/lib/components/recording-card/recording-card.svelte

@@ -41,17 +41,10 @@ function getStatusColor(status: string): string {
     <div class="flex items-start justify-between">
       <div class="flex-1">
         <div class="flex items-center gap-2 mb-2">
-					<h3
+          <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"
-					>
             {recording.title}
           </h3>
-					<span
+          <span class={cn("text-xs px-2 py-0.5 rounded-full", getStatusColor(recording.status))}>
-						class={cn(
-							"text-xs px-2 py-0.5 rounded-full",
-							getStatusColor(recording.status),
-						)}
-					>
             {$_(`recording_card.status_${recording.status}`)}
           </span>
         </div>
@@ -67,25 +60,17 @@ function getStatusColor(status: string): string {
   <CardContent class="space-y-4">
     <!-- Stats Grid -->
     <div class="grid grid-cols-3 gap-3">
-			<div
+      <div class="flex flex-col items-center p-3 rounded-lg bg-muted/30 border border-border/30">
-				class="flex flex-col items-center p-3 rounded-lg bg-muted/30 border border-border/30"
-			>
         <span class="icon-[ri--time-line] w-4 h-4 text-primary mb-1"></span>
-				<span class="text-xs text-muted-foreground"
+        <span class="text-xs text-muted-foreground">{$_("recording_card.duration")}</span>
-					>{$_("recording_card.duration")}</span
-				>
         <span class="font-medium text-sm">{formatDuration(recording.duration)}</span>
       </div>
-			<div
+      <div class="flex flex-col items-center p-3 rounded-lg bg-muted/30 border border-border/30">
-				class="flex flex-col items-center p-3 rounded-lg bg-muted/30 border border-border/30"
-			>
         <span class="icon-[ri--pulse-line] w-4 h-4 text-accent mb-1"></span>
         <span class="text-xs text-muted-foreground">{$_("recording_card.events")}</span>
         <span class="font-medium text-sm">{recording.events.length}</span>
       </div>
-			<div
+      <div class="flex flex-col items-center p-3 rounded-lg bg-muted/30 border border-border/30">
-				class="flex flex-col items-center p-3 rounded-lg bg-muted/30 border border-border/30"
-			>
         <span class="icon-[ri--gamepad-line] w-4 h-4 text-primary mb-1"></span>
         <span class="text-xs text-muted-foreground">{$_("recording_card.devices")}</span>
         <span class="font-medium text-sm">{recording.device_info.length}</span>
@@ -105,9 +90,7 @@ function getStatusColor(status: string): string {
       {/each}
       {#if recording.device_info.length > 2}
         <div class="text-xs text-muted-foreground/60 px-2">
-					+{recording.device_info.length - 2} more device{recording.device_info.length -
+          +{recording.device_info.length - 2} more device{recording.device_info.length - 2 > 1
-						2 >
-					1
             ? "s"
             : ""}
         </div>

packages/frontend/src/lib/components/sharing-popup/sharing-popup-button.svelte

@@ -13,6 +13,6 @@ let isPopupOpen = $state(false);
   class="flex items-center gap-2 border-primary/20 hover:bg-primary/10 cursor-pointer"
 >
   <span class="icon-[ri--share-2-line] w-4 h-4"></span>
-  {$_('sharing_popup_button.share')}
+  {$_("sharing_popup_button.share")}
 </Button>
 <SharingPopup bind:open={isPopupOpen} {content} />

packages/frontend/src/lib/components/ui/button/button.svelte

@@ -1,25 +1,19 @@
 <script lang="ts" module>
   import { cn, type WithElementRef } from "$lib/utils.js";
-import type {
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-	HTMLAnchorAttributes,
-	HTMLButtonAttributes,
-} from "svelte/elements";
   import { type VariantProps, tv } from "tailwind-variants";
 
   export const buttonVariants = tv({
     base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
     variants: {
       variant: {
-			default:
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-				"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive:
           "bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
         outline:
           "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
-			secondary:
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-				"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-			ghost:
-				"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {

packages/frontend/src/lib/components/ui/dialog/dialog-close.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { Dialog as DialogPrimitive } from "bits-ui";
 
-let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps =
+  let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
-	$props();
 </script>
 
 <DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />

packages/frontend/src/lib/components/ui/dialog/dialog-trigger.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { Dialog as DialogPrimitive } from "bits-ui";
 
-let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps =
+  let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
-	$props();
 </script>
 
 <DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />

packages/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte

@@ -62,15 +62,10 @@ const change = async (
     (e.target as HTMLInputElement).value = "";
   };
 
-const shouldAcceptFile = (
+  const shouldAcceptFile = (file: File, fileNumber: number): FileRejectedReason | undefined => {
-	file: File,
+    if (maxFileSize !== undefined && file.size > maxFileSize) return "Maximum file size exceeded";
-	fileNumber: number,
-): FileRejectedReason | undefined => {
-	if (maxFileSize !== undefined && file.size > maxFileSize)
-		return "Maximum file size exceeded";
 
-	if (maxFiles !== undefined && fileNumber > maxFiles)
+    if (maxFiles !== undefined && fileNumber > maxFiles) return "Maximum files uploaded";
-		return "Maximum files uploaded";
 
     if (!accept) return undefined;
 
@@ -125,11 +120,7 @@ const upload = async (uploadFiles: File[]) => {
   const canUploadFiles = $derived(
     !disabled &&
       !uploading &&
-		!(
+      !(maxFiles !== undefined && fileCount !== undefined && fileCount >= maxFiles),
-			maxFiles !== undefined &&
-			fileCount !== undefined &&
-			fileCount >= maxFiles
-		),
   );
 </script>
 

packages/frontend/src/lib/components/ui/input/input.svelte

@@ -1,18 +1,12 @@
 <script lang="ts">
-import type {
+  import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-	HTMLInputAttributes,
-	HTMLInputTypeAttribute,
-} from "svelte/elements";
   import { cn, type WithElementRef } from "$lib/utils.js";
 
   type InputType = Exclude<HTMLInputTypeAttribute, "file">;
 
   type Props = WithElementRef<
     Omit<HTMLInputAttributes, "type"> &
-		(
+      ({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
-			| { type: "file"; files?: FileList }
-			| { type?: InputType; files?: undefined }
-		)
   >;
 
   let {

packages/frontend/src/lib/components/ui/select/select-group.svelte

@@ -2,8 +2,7 @@
   import { Select as SelectPrimitive } from "bits-ui";
 
   // eslint-disable-next-line no-useless-assignment
-let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps =
+  let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
-	$props();
 </script>
 
 <SelectPrimitive.Group data-slot="select-group" {...restProps} />

packages/frontend/src/lib/components/ui/sonner/sonner.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
-import {
+  import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
-	Toaster as Sonner,
-	type ToasterProps as SonnerProps,
-} from "svelte-sonner";
   import { mode } from "mode-watcher";
 
   let { ...restProps }: SonnerProps = $props();

packages/frontend/src/lib/components/ui/tabs/tabs-list.svelte

@@ -2,11 +2,7 @@
   import { Tabs as TabsPrimitive } from "bits-ui";
   import { cn } from "$lib/utils.js";
 
-let {
+  let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
-	ref = $bindable(null),
-	class: className,
-	...restProps
-}: TabsPrimitive.ListProps = $props();
 </script>
 
 <TabsPrimitive.List

packages/frontend/src/lib/components/ui/tags-input/tags-input.svelte

@@ -79,8 +79,7 @@ const keydown = (e: KeyboardEvent) => {
       return;
     }
 
-	const isAtBeginning =
+    const isAtBeginning = target.selectionStart === 0 && target.selectionEnd === 0;
-		target.selectionStart === 0 && target.selectionEnd === 0;
 
     let shouldResetIndex = true;
 

packages/frontend/src/lib/components/ui/tags-input/types.ts

@@ -9,5 +9,4 @@ export type TagsInputPropsWithoutHTML = {
   validate?: (val: string, tags: string[]) => string | undefined;
 };
 
-export type TagsInputProps = TagsInputPropsWithoutHTML &
+export type TagsInputProps = TagsInputPropsWithoutHTML & Omit<HTMLInputAttributes, "value">;
-	Omit<HTMLInputAttributes, "value">;

packages/frontend/src/lib/directus.ts

@@ -1,3 +1,8 @@
 // Re-export from api.ts for backwards compatibility
 // All components that import from $lib/directus continue to work
-export { apiUrl as directusApiUrl, getAssetUrl, isModel, getGraphQLClient as getDirectusInstance } from "./api.js";
+export {
+  apiUrl as directusApiUrl,
+  getAssetUrl,
+  isModel,
+  getGraphQLClient as getDirectusInstance,
+} from "./api.js";

packages/frontend/src/lib/i18n/locales/en.ts

@@ -186,8 +186,7 @@ export default {
       password_placeholder: "Create a strong password",
       confirm_password: "Confirm Password",
       confirm_password_placeholder: "Confirm your password",
-			terms_agreement:
+      terms_agreement: "I agree to the {terms} and {privacy}. I confirm I am 18+ years old.",
-				"I agree to the {terms} and {privacy}. I confirm I am 18+ years old.",
       terms_of_service: "Terms of Service",
       privacy_policy: "Privacy Policy",
       creating_account: "Creating account...",
@@ -264,8 +263,7 @@ export default {
   },
   videos: {
     title: "Your Videos",
-		description:
+    description: "Explore our curated collection of intimate and artistic video content",
-			"Explore our curated collection of intimate and artistic video content",
     search_placeholder: "Search videos or models...",
     categories: {
       all: "All Categories",
@@ -406,8 +404,7 @@ export default {
     },
     values: {
       title: "Our Values",
-			subtitle:
+      subtitle: "The principles that guide everything we do and shape our community",
-				"The principles that guide everything we do and shape our community",
       authentic_expression: {
         title: "Authentic Expression",
         description:
@@ -470,8 +467,7 @@ export default {
   },
   faq: {
     title: "Frequently Asked Questions",
-		description:
+    description: "Find answers to common questions about SexyArt, our platform, and services",
-			"Find answers to common questions about SexyArt, our platform, and services",
     search_placeholder: "Search frequently asked questions...",
     search_results: "Search Results ({count})",
     no_results: "No questions found matching your search.",
@@ -863,8 +859,7 @@ export default {
   },
   age_verification_dialog: {
     title: "Age Verification",
-		description:
+    description: 'By clicking "Confirm", you verify that you are 18 years or older.',
-			'By clicking "Confirm", you verify that you are 18 years or older.',
     age: "18+",
     confirm: "Confirm",
     exit: "Exit",
@@ -914,7 +909,8 @@ export default {
     rank: "Rank",
     stats: "Stats",
     how_it_works: "How It Works",
-		how_it_works_description: "Points are awarded for creating recordings, playing others' recordings, and engaging with the community. Rankings use time-weighted scoring to keep things dynamic.",
+    how_it_works_description:
+      "Points are awarded for creating recordings, playing others' recordings, and engaging with the community. Rankings use time-weighted scoring to keep things dynamic.",
     earn_by_creating: "Create Recordings",
     earn_by_creating_desc: "Earn 50 points per published recording",
     earn_by_playing: "Play & Complete",

packages/frontend/src/lib/logger.ts

@@ -3,7 +3,7 @@
  * Provides structured logging with context and request tracing
  */
 
-export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+export type LogLevel = "debug" | "info" | "warn" | "error";
 
 interface LogContext {
   timestamp: string;
@@ -19,11 +19,12 @@ interface LogContext {
 }
 
 class Logger {
-	private isDev = process.env.NODE_ENV === 'development';
+  private isDev = process.env.NODE_ENV === "development";
-	private serviceName = 'sexy.pivoine.art';
+  private serviceName = "sexy.pivoine.art";
 
   private formatLog(ctx: LogContext): string {
-		const { timestamp, level, message, context, requestId, userId, path, method, duration, error } = ctx;
+    const { timestamp, level, message, context, requestId, userId, path, method, duration, error } =
+      ctx;
 
     const parts = [
       `[${timestamp}]`,
@@ -35,10 +36,10 @@ class Logger {
       duration !== undefined ? `${duration}ms` : null,
     ].filter(Boolean);
 
-		let logString = parts.join(' ');
+    let logString = parts.join(" ");
 
     if (context && Object.keys(context).length > 0) {
-			logString += ' ' + JSON.stringify(context);
+      logString += " " + JSON.stringify(context);
     }
 
     if (error) {
@@ -60,44 +61,40 @@ class Logger {
     const formattedLog = this.formatLog(logContext);
 
     switch (level) {
-			case 'debug':
+      case "debug":
         if (this.isDev) console.debug(formattedLog);
         break;
-			case 'info':
+      case "info":
         console.info(formattedLog);
         break;
-			case 'warn':
+      case "warn":
         console.warn(formattedLog);
         break;
-			case 'error':
+      case "error":
         console.error(formattedLog);
         break;
     }
   }
 
   debug(message: string, meta?: Partial<LogContext>) {
-		this.log('debug', message, meta);
+    this.log("debug", message, meta);
   }
 
   info(message: string, meta?: Partial<LogContext>) {
-		this.log('info', message, meta);
+    this.log("info", message, meta);
   }
 
   warn(message: string, meta?: Partial<LogContext>) {
-		this.log('warn', message, meta);
+    this.log("warn", message, meta);
   }
 
   error(message: string, meta?: Partial<LogContext>) {
-		this.log('error', message, meta);
+    this.log("error", message, meta);
   }
 
   // Request logging helper
-	request(
+  request(method: string, path: string, meta: Partial<LogContext> = {}) {
-		method: string,
+    this.info("→ Request received", { method, path, ...meta });
-		path: string,
-		meta: Partial<LogContext> = {}
-	) {
-		this.info('→ Request received', { method, path, ...meta });
   }
 
   response(
@@ -105,15 +102,15 @@ class Logger {
     path: string,
     status: number,
     duration: number,
-		meta: Partial<LogContext> = {}
+    meta: Partial<LogContext> = {},
   ) {
-		const level = status >= 500 ? 'error' : status >= 400 ? 'warn' : 'info';
+    const level = status >= 500 ? "error" : status >= 400 ? "warn" : "info";
     this.log(level, `← Response ${status}`, { method, path, duration, ...meta });
   }
 
   // Authentication logging
   auth(action: string, success: boolean, meta: Partial<LogContext> = {}) {
-		this.info(`🔐 Auth: ${action} ${success ? 'success' : 'failed'}`, meta);
+    this.info(`🔐 Auth: ${action} ${success ? "success" : "failed"}`, meta);
   }
 
   // Startup logging
@@ -122,20 +119,20 @@ class Logger {
       NODE_ENV: process.env.NODE_ENV,
       PUBLIC_API_URL: process.env.PUBLIC_API_URL,
       PUBLIC_URL: process.env.PUBLIC_URL,
-			PUBLIC_UMAMI_ID: process.env.PUBLIC_UMAMI_ID ? '***set***' : 'not set',
+      PUBLIC_UMAMI_ID: process.env.PUBLIC_UMAMI_ID ? "***set***" : "not set",
-			PUBLIC_UMAMI_SCRIPT: process.env.PUBLIC_UMAMI_SCRIPT || 'not set',
+      PUBLIC_UMAMI_SCRIPT: process.env.PUBLIC_UMAMI_SCRIPT || "not set",
-			PORT: process.env.PORT || '3000',
+      PORT: process.env.PORT || "3000",
-			HOST: process.env.HOST || '0.0.0.0',
+      HOST: process.env.HOST || "0.0.0.0",
     };
 
-		console.log('\n' + '='.repeat(60));
+    console.log("\n" + "=".repeat(60));
-		console.log('🍑 sexy.pivoine.art - Server Starting 💜');
+    console.log("🍑 sexy.pivoine.art - Server Starting 💜");
-		console.log('='.repeat(60));
+    console.log("=".repeat(60));
-		console.log('\n📋 Environment Configuration:');
+    console.log("\n📋 Environment Configuration:");
     Object.entries(env).forEach(([key, value]) => {
       console.log(`  ${key}: ${value}`);
     });
-		console.log('\n' + '='.repeat(60) + '\n');
+    console.log("\n" + "=".repeat(60) + "\n");
   }
 }
 

packages/frontend/src/lib/services.ts

@@ -19,7 +19,7 @@ import { logger } from "$lib/logger";
 async function loggedApiCall<T>(
   operationName: string,
   operation: () => Promise<T>,
-	context?: Record<string, unknown>
+  context?: Record<string, unknown>,
 ): Promise<T> {
   const startTime = Date.now();
 
@@ -53,8 +53,19 @@ function getAuthClient(token: string, fetchFn?: typeof globalThis.fetch) {
 const ME_QUERY = gql`
   query Me {
     me {
-      id email first_name last_name artist_name slug description tags
+      id
-      role avatar banner email_verified date_created
+      email
+      first_name
+      last_name
+      artist_name
+      slug
+      description
+      tags
+      role
+      avatar
+      banner
+      email_verified
+      date_created
     }
   }
 `;
@@ -81,8 +92,19 @@ export async function isAuthenticated(token: string, fetchFn?: typeof globalThis
 const LOGIN_MUTATION = gql`
   mutation Login($email: String!, $password: String!) {
     login(email: $email, password: $password) {
-      id email first_name last_name artist_name slug description tags
+      id
-      role avatar banner email_verified date_created
+      email
+      first_name
+      last_name
+      artist_name
+      slug
+      description
+      tags
+      role
+      avatar
+      banner
+      email_verified
+      date_created
     }
   }
 `;
@@ -101,7 +123,11 @@ export async function login(email: string, password: string) {
   );
 }
 
-const LOGOUT_MUTATION = gql`mutation Logout { logout }`;
+const LOGOUT_MUTATION = gql`
+  mutation Logout {
+    logout
+  }
+`;
 
 export async function logout() {
   return loggedApiCall("logout", async () => {
@@ -191,8 +217,22 @@ export async function resetPassword(token: string, password: string) {
 const ARTICLES_QUERY = gql`
   query GetArticles {
     articles {
-      id slug title excerpt content image tags publish_date category featured
+      id
-      author { first_name last_name avatar description }
+      slug
+      title
+      excerpt
+      content
+      image
+      tags
+      publish_date
+      category
+      featured
+      author {
+        first_name
+        last_name
+        avatar
+        description
+      }
     }
   }
 `;
@@ -207,8 +247,22 @@ export async function getArticles(fetchFn?: typeof globalThis.fetch) {
 const ARTICLE_BY_SLUG_QUERY = gql`
   query GetArticleBySlug($slug: String!) {
     article(slug: $slug) {
-      id slug title excerpt content image tags publish_date category featured
+      id
-      author { first_name last_name avatar description }
+      slug
+      title
+      excerpt
+      content
+      image
+      tags
+      publish_date
+      category
+      featured
+      author {
+        first_name
+        last_name
+        avatar
+        description
+      }
     }
   }
 `;
@@ -233,10 +287,30 @@ export async function getArticleBySlug(slug: string, fetchFn?: typeof globalThis
 const VIDEOS_QUERY = gql`
   query GetVideos($modelId: String, $featured: Boolean, $limit: Int) {
     videos(modelId: $modelId, featured: $featured, limit: $limit) {
-      id slug title description image movie tags upload_date premium featured
+      id
-      likes_count plays_count
+      slug
-      models { id artist_name slug avatar }
+      title
-      movie_file { id filename mime_type duration }
+      description
+      image
+      movie
+      tags
+      upload_date
+      premium
+      featured
+      likes_count
+      plays_count
+      models {
+        id
+        artist_name
+        slug
+        avatar
+      }
+      movie_file {
+        id
+        filename
+        mime_type
+        duration
+      }
     }
   }
 `;
@@ -281,10 +355,30 @@ export async function getFeaturedVideos(
 const VIDEO_BY_SLUG_QUERY = gql`
   query GetVideoBySlug($slug: String!) {
     video(slug: $slug) {
-      id slug title description image movie tags upload_date premium featured
+      id
-      likes_count plays_count
+      slug
-      models { id artist_name slug avatar }
+      title
-      movie_file { id filename mime_type duration }
+      description
+      image
+      movie
+      tags
+      upload_date
+      premium
+      featured
+      likes_count
+      plays_count
+      models {
+        id
+        artist_name
+        slug
+        avatar
+      }
+      movie_file {
+        id
+        filename
+        mime_type
+        duration
+      }
     }
   }
 `;
@@ -309,8 +403,18 @@ export async function getVideoBySlug(slug: string, fetchFn?: typeof globalThis.f
 const MODELS_QUERY = gql`
   query GetModels($featured: Boolean, $limit: Int) {
     models(featured: $featured, limit: $limit) {
-      id slug artist_name description avatar banner tags date_created
+      id
-      photos { id filename }
+      slug
+      artist_name
+      description
+      avatar
+      banner
+      tags
+      date_created
+      photos {
+        id
+        filename
+      }
     }
   }
 `;
@@ -342,8 +446,18 @@ export async function getFeaturedModels(
 const MODEL_BY_SLUG_QUERY = gql`
   query GetModelBySlug($slug: String!) {
     model(slug: $slug) {
-      id slug artist_name description avatar banner tags date_created
+      id
-      photos { id filename }
+      slug
+      artist_name
+      description
+      avatar
+      banner
+      tags
+      date_created
+      photos {
+        id
+        filename
+      }
     }
   }
 `;
@@ -380,8 +494,18 @@ const UPDATE_PROFILE_MUTATION = gql`
       description: $description
       tags: $tags
     ) {
-      id email first_name last_name artist_name slug description tags
+      id
-      role avatar banner date_created
+      email
+      first_name
+      last_name
+      artist_name
+      slug
+      description
+      tags
+      role
+      avatar
+      banner
+      date_created
     }
   }
 `;
@@ -410,7 +534,11 @@ export async function updateProfile(user: Partial<User>) {
 
 const STATS_QUERY = gql`
   query GetStats {
-    stats { videos_count models_count viewers_count }
+    stats {
+      videos_count
+      models_count
+      viewers_count
+    }
   }
 `;
 
@@ -433,7 +561,10 @@ export async function removeFile(id: string) {
     "removeFile",
     async () => {
       // File deletion via REST DELETE /assets/:id (backend handles it)
-			const response = await fetch(`${apiUrl}/assets/${id}`, { method: "DELETE", credentials: "include" });
+      const response = await fetch(`${apiUrl}/assets/${id}`, {
+        method: "DELETE",
+        credentials: "include",
+      });
       if (!response.ok) throw new Error(`Failed to delete file: ${response.statusText}`);
     },
     { fileId: id },
@@ -457,8 +588,17 @@ export async function uploadFile(data: FormData) {
 const COMMENTS_FOR_VIDEO_QUERY = gql`
   query CommentsForVideo($videoId: String!) {
     commentsForVideo(videoId: $videoId) {
-      id comment item_id user_id date_created
+      id
-      user { id first_name last_name avatar }
+      comment
+      item_id
+      user_id
+      date_created
+      user {
+        id
+        first_name
+        last_name
+        avatar
+      }
     }
   }
 `;
@@ -468,7 +608,19 @@ export async function getCommentsForVideo(item: string, fetchFn?: typeof globalT
     "getCommentsForVideo",
     async () => {
       const data = await getGraphQLClient(fetchFn).request<{
-				commentsForVideo: { id: number; comment: string; item_id: string; user_id: string; date_created: string; user: { id: string; first_name: string | null; last_name: string | null; avatar: string | null } | null }[];
+        commentsForVideo: {
+          id: number;
+          comment: string;
+          item_id: string;
+          user_id: string;
+          date_created: string;
+          user: {
+            id: string;
+            first_name: string | null;
+            last_name: string | null;
+            avatar: string | null;
+          } | null;
+        }[];
       }>(COMMENTS_FOR_VIDEO_QUERY, { videoId: item });
       return data.commentsForVideo;
     },
@@ -479,7 +631,11 @@ export async function getCommentsForVideo(item: string, fetchFn?: typeof globalT
 const CREATE_COMMENT_MUTATION = gql`
   mutation CreateCommentForVideo($videoId: String!, $comment: String!) {
     createCommentForVideo(videoId: $videoId, comment: $comment) {
-      id comment item_id user_id date_created
+      id
+      comment
+      item_id
+      user_id
+      date_created
     }
   }
 `;
@@ -532,10 +688,35 @@ export async function getItemsByTag(
 // ─── Recordings ──────────────────────────────────────────────────────────────
 
 const RECORDINGS_QUERY = gql`
-  query GetRecordings($status: String, $tags: String, $linkedVideoId: String, $limit: Int, $page: Int) {
+  query GetRecordings(
-    recordings(status: $status, tags: $tags, linkedVideoId: $linkedVideoId, limit: $limit, page: $page) {
+    $status: String
-      id title description slug duration events device_info user_id status
+    $tags: String
-      tags linked_video featured public date_created date_updated
+    $linkedVideoId: String
+    $limit: Int
+    $page: Int
+  ) {
+    recordings(
+      status: $status
+      tags: $tags
+      linkedVideoId: $linkedVideoId
+      limit: $limit
+      page: $page
+    ) {
+      id
+      title
+      description
+      slug
+      duration
+      events
+      device_info
+      user_id
+      status
+      tags
+      linked_video
+      featured
+      public
+      date_created
+      date_updated
     }
   }
 `;
@@ -574,8 +755,21 @@ const CREATE_RECORDING_MUTATION = gql`
       status: $status
       linkedVideoId: $linkedVideoId
     ) {
-      id title description slug duration events device_info user_id status
+      id
-      tags linked_video featured public date_created date_updated
+      title
+      description
+      slug
+      duration
+      events
+      device_info
+      user_id
+      status
+      tags
+      linked_video
+      featured
+      public
+      date_created
+      date_updated
     }
   }
 `;
@@ -632,8 +826,21 @@ export async function deleteRecording(id: string) {
 const RECORDING_QUERY = gql`
   query GetRecording($id: String!) {
     recording(id: $id) {
-      id title description slug duration events device_info user_id status
+      id
-      tags linked_video featured public date_created date_updated
+      title
+      description
+      slug
+      duration
+      events
+      device_info
+      user_id
+      status
+      tags
+      linked_video
+      featured
+      public
+      date_created
+      date_updated
     }
   }
 `;
@@ -656,7 +863,10 @@ export async function getRecording(id: string, fetchFn?: typeof globalThis.fetch
 
 const LIKE_VIDEO_MUTATION = gql`
   mutation LikeVideo($videoId: String!) {
-    likeVideo(videoId: $videoId) { liked likes_count }
+    likeVideo(videoId: $videoId) {
+      liked
+      likes_count
+    }
   }
 `;
 
@@ -676,7 +886,10 @@ export async function likeVideo(videoId: string) {
 
 const UNLIKE_VIDEO_MUTATION = gql`
   mutation UnlikeVideo($videoId: String!) {
-    unlikeVideo(videoId: $videoId) { liked likes_count }
+    unlikeVideo(videoId: $videoId) {
+      liked
+      likes_count
+    }
   }
 `;
 
@@ -696,7 +909,9 @@ export async function unlikeVideo(videoId: string) {
 
 const VIDEO_LIKE_STATUS_QUERY = gql`
   query VideoLikeStatus($videoId: String!) {
-    videoLikeStatus(videoId: $videoId) { liked }
+    videoLikeStatus(videoId: $videoId) {
+      liked
+    }
   }
 `;
 
@@ -717,7 +932,9 @@ export async function getVideoLikeStatus(videoId: string, fetchFn?: typeof globa
 const RECORD_VIDEO_PLAY_MUTATION = gql`
   mutation RecordVideoPlay($videoId: String!, $sessionId: String) {
     recordVideoPlay(videoId: $videoId, sessionId: $sessionId) {
-      success play_id plays_count
+      success
+      play_id
+      plays_count
     }
   }
 `;
@@ -737,8 +954,18 @@ export async function recordVideoPlay(videoId: string, sessionId?: string) {
 }
 
 const UPDATE_VIDEO_PLAY_MUTATION = gql`
-  mutation UpdateVideoPlay($videoId: String!, $playId: String!, $durationWatched: Int!, $completed: Boolean!) {
+  mutation UpdateVideoPlay(
-    updateVideoPlay(videoId: $videoId, playId: $playId, durationWatched: $durationWatched, completed: $completed)
+    $videoId: String!
+    $playId: String!
+    $durationWatched: Int!
+    $completed: Boolean!
+  ) {
+    updateVideoPlay(
+      videoId: $videoId
+      playId: $playId
+      durationWatched: $durationWatched
+      completed: $completed
+    )
   }
 `;
 

packages/frontend/src/lib/utils.ts

@@ -8,9 +8,7 @@ export function cn(...inputs: ClassValue[]) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type WithoutChildren<T> = T extends { children?: any }
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
-	? Omit<T, "children">
-	: T;
 export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
 export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
   ref?: U | null;

packages/frontend/src/lib/utils/utils.ts

@@ -12,9 +12,7 @@ export function cn(...inputs: ClassValue[]) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type WithoutChildren<T> = T extends { children?: any }
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
-	? Omit<T, "children">
-	: T;
 export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
 export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
   ref?: U | null;

packages/frontend/src/routes/+error.svelte

@@ -100,23 +100,19 @@ import Meta from "$lib/components/meta/meta.svelte";
   <!-- Floating Hearts Animation -->
   <div class="absolute inset-0 pointer-events-none">
     <div class="absolute top-1/4 left-1/4 opacity-20">
-            <span
+      <span class="icon-[ri--heart-3-line] w-6 h-6 text-primary animate-float animation-delay-1000"
-                class="icon-[ri--heart-3-line] w-6 h-6 text-primary animate-float animation-delay-1000"
       ></span>
     </div>
     <div class="absolute top-1/3 right-1/3 opacity-15">
-            <span
+      <span class="icon-[ri--heart-3-line] w-4 h-4 text-accent animate-float animation-delay-3000"
-                class="icon-[ri--heart-3-line] w-4 h-4 text-accent animate-float animation-delay-3000"
       ></span>
     </div>
     <div class="absolute bottom-1/4 left-1/3 opacity-25">
-            <span
+      <span class="icon-[ri--heart-3-line] w-5 h-5 text-primary animate-float animation-delay-5000"
-                class="icon-[ri--heart-3-line] w-5 h-5 text-primary animate-float animation-delay-5000"
       ></span>
     </div>
     <div class="absolute bottom-1/3 right-1/4 opacity-20">
-            <span
+      <span class="icon-[ri--heart-3-line] w-3 h-3 text-accent animate-float animation-delay-7000"
-                class="icon-[ri--heart-3-line] w-3 h-3 text-accent animate-float animation-delay-7000"
       ></span>
     </div>
   </div>

packages/frontend/src/routes/+layout.svelte

@@ -18,11 +18,7 @@ let { children, data } = $props();
 
 <svelte:head>
   {#if import.meta.env.PROD && env.PUBLIC_UMAMI_ID && env.PUBLIC_UMAMI_SCRIPT}
-        <script
+    <script defer src={env.PUBLIC_UMAMI_SCRIPT} data-website-id={env.PUBLIC_UMAMI_ID}></script>
-            defer
-            src={env.PUBLIC_UMAMI_SCRIPT}
-            data-website-id={env.PUBLIC_UMAMI_ID}
-        ></script>
   {/if}
 </svelte:head>
 

packages/frontend/src/routes/+page.svelte

@@ -9,16 +9,12 @@ import { formatVideoDuration } from "$lib/utils.js";
   const { data } = $props();
 </script>
 
-<Meta title={$_('home.hero.title')} description={$_('home.hero.description')} />
+<Meta title={$_("home.hero.title")} description={$_("home.hero.description")} />
 
 <!-- Hero Section -->
-<section
+<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
-  class="relative min-h-screen flex items-center justify-center overflow-hidden"
->
   <!-- Background Gradient -->
-  <div
+  <div class="absolute inset-0 bg-gradient-to-br from-primary/20 via-accent/10 to-background"></div>
-    class="absolute inset-0 bg-gradient-to-br from-primary/20 via-accent/10 to-background"
-  ></div>
 
   <!-- Content -->
   <div class="relative z-10 container mx-auto px-4 text-center">
@@ -26,13 +22,11 @@ const { data } = $props();
       <h1
         class="text-6xl md:text-8xl font-bold bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent leading-tight mb-8"
       >
-        {$_('home.hero.title')}
+        {$_("home.hero.title")}
       </h1>
 
-      <p
+      <p class="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-        class="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"
+        {$_("home.hero.description")}
-      >
-        {$_('home.hero.description')}
       </p>
 
       <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
@@ -42,13 +36,13 @@ const { data } = $props();
           href="/videos"
         >
           <span class="icon-[ri--play-large-fill]"></span>
-          {$_('home.hero.cta_videos')}
+          {$_("home.hero.cta_videos")}
         </Button>
         <Button
           variant="outline"
           size="lg"
           class="text-lg px-8 py-6 border-primary/50 hover:bg-primary/10"
-          href="/models">{$_('home.hero.cta_models')}</Button
+          href="/models">{$_("home.hero.cta_models")}</Button
         >
       </div>
     </div>
@@ -68,10 +62,10 @@ const { data } = $props();
   <div class="container mx-auto px-4">
     <div class="text-center mb-12">
       <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        {$_('home.featured_models.title')}
+        {$_("home.featured_models.title")}
       </h2>
       <p class="text-muted-foreground text-lg">
-        {$_('home.featured_models.description')}
+        {$_("home.featured_models.description")}
       </p>
     </div>
 
@@ -83,7 +77,7 @@ const { data } = $props();
           <CardContent class="p-6 text-center">
             <div class="relative mb-4">
               <img
-                src={getAssetUrl(model.avatar, 'mini')}
+                src={getAssetUrl(model.avatar, "mini")}
                 alt={model.artist_name}
                 class="w-24 h-24 rounded-full mx-auto object-cover ring-4 ring-primary/20 group-hover:ring-primary/40 transition-all"
               />
@@ -107,8 +101,7 @@ const { data } = $props();
               variant="ghost"
               size="sm"
               class="mt-4 w-full group-hover:bg-primary/10"
-              href="/models/{model.slug}"
+              href="/models/{model.slug}">{$_("home.featured_models.view_profile")}</Button
-              >{$_('home.featured_models.view_profile')}</Button
             >
           </CardContent>
         </Card>
@@ -122,7 +115,7 @@ const { data } = $props();
   <div class="container mx-auto px-4">
     <div class="text-center mb-12">
       <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        {$_('home.trending.title')}
+        {$_("home.trending.title")}
       </h2>
       <!-- <p class="text-muted-foreground text-lg">Most watched romantic content</p> -->
     </div>
@@ -134,16 +127,14 @@ const { data } = $props();
         >
           <div class="relative">
             <img
-              src={getAssetUrl(video.image, 'preview')}
+              src={getAssetUrl(video.image, "preview")}
               alt={video.title}
               class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
             />
             <div
               class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent group-hover:scale-105 transition-transform duration-300"
             ></div>
-            <div
+            <div class="absolute bottom-2 left-2 text-white text-sm font-medium">
-              class="absolute bottom-2 left-2 text-white text-sm font-medium"
-            >
               {#if video.movie_file?.duration}{formatVideoDuration(video.movie_file.duration)}{/if}
             </div>
             <!-- <div
@@ -160,21 +151,18 @@ const { data } = $props();
                 href="/videos/{video.slug}"
                 aria-label={video.title}
               >
-                <span class="icon-[ri--play-large-fill] w-8 h-8 text-white"
+                <span class="icon-[ri--play-large-fill] w-8 h-8 text-white"></span>
-                ></span>
               </a>
             </div>
           </div>
           <CardContent class="px-4 pb-4 pt-0">
-            <h3
+            <h3 class="font-semibold mb-2 group-hover:text-primary transition-colors">
-              class="font-semibold mb-2 group-hover:text-primary transition-colors"
-            >
               {video.title}
             </h3>
 
             <div class="flex items-center gap-2 text-sm text-muted-foreground">
               <span class="icon-[ri--fire-line] w-4 h-4"></span>
-              {$_('home.trending.trending')}
+              {$_("home.trending.trending")}
             </div>
           </CardContent>
         </Card>
@@ -184,29 +172,27 @@ const { data } = $props();
 </section>
 
 <!-- CTA Section -->
-<section
+<section class="py-20 bg-gradient-to-r from-primary/10 via-accent/10 to-primary/10">
-  class="py-20 bg-gradient-to-r from-primary/10 via-accent/10 to-primary/10"
->
   <div class="container mx-auto px-4 text-center">
     <div class="max-w-3xl mx-auto space-y-8">
       <h2 class="text-3xl md:text-4xl font-bold">
-        {$_('home.featured_models.join_community')}
+        {$_("home.featured_models.join_community")}
       </h2>
       <p class="text-lg text-muted-foreground">
-        {$_('home.featured_models.join_community_description')}
+        {$_("home.featured_models.join_community_description")}
       </p>
       <div class="flex flex-col sm:flex-row gap-4 justify-center">
         <Button
           href="/signup"
           size="lg"
           class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 text-lg px-8 py-6"
-          >{$_('home.community.cta_join')}</Button
+          >{$_("home.community.cta_join")}</Button
         >
         <Button
           variant="outline"
           size="lg"
           class="text-lg px-8 py-6 border-primary/50 hover:bg-primary/10"
-          href="/magazine">{$_('home.community.cta_magazine')}</Button
+          href="/magazine">{$_("home.community.cta_magazine")}</Button
         >
       </div>
     </div>

packages/frontend/src/routes/about/+page.svelte

@@ -285,8 +285,7 @@ const values = [
               </p>
               <a
                 href="mailto:{$_('about.contact.general.mailto')}"
-                                class="text-primary hover:underline"
+                class="text-primary hover:underline">{$_("about.contact.general.mailto")}</a
-                                >{$_("about.contact.general.mailto")}</a
               >
             </CardContent>
           </Card>
@@ -300,8 +299,7 @@ const values = [
               </p>
               <a
                 href="mailto:{$_('about.contact.creators.mailto')}"
-                                class="text-primary hover:underline"
+                class="text-primary hover:underline">{$_("about.contact.creators.mailto")}</a
-                                >{$_("about.contact.creators.mailto")}</a
               >
             </CardContent>
           </Card>

packages/frontend/src/routes/faq/+page.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
   import { SvelteSet } from "svelte/reactivity";
-import {
+  import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/card";
-	Card,
-	CardContent,
-	CardHeader,
-	CardTitle,
-} from "$lib/components/ui/card";
   import { Input } from "$lib/components/ui/input";
   import { Button } from "$lib/components/ui/button";
   import PeonyBackground from "$lib/components/background/peony-background.svelte";
@@ -205,8 +200,7 @@ function toggleExpanded(id: number) {
     <!-- Search -->
     <div class="max-w-2xl mx-auto mb-12">
       <div class="relative">
-                <span
+        <span class="icon-[ri--search-line] absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5"
-                    class="icon-[ri--search-line] absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5"
         ></span>
         <Input
           placeholder={$_("faq.search_placeholder")}
@@ -283,8 +277,7 @@ function toggleExpanded(id: number) {
                   <div
                     class="w-10 h-10 bg-gradient-to-br from-primary/20 to-accent/20 rounded-full flex items-center justify-center"
                   >
-                                        <span class={category.icon + " w-5 h-5 text-primary"}
+                    <span class={category.icon + " w-5 h-5 text-primary"}></span>
-                                        ></span>
                   </div>
                   {category.title}
                 </CardTitle>
@@ -292,9 +285,7 @@ function toggleExpanded(id: number) {
               <CardContent class="pt-0">
                 <div class="space-y-3">
                   {#each category.questions as question (question.id)}
-                                        <div
+                    <div class="border border-border/50 rounded-lg overflow-hidden">
-                                            class="border border-border/50 rounded-lg overflow-hidden"
-                                        >
                       <button
                         onclick={() => toggleExpanded(question.id)}
                         class="w-full p-4 text-left hover:bg-primary/5 transition-colors flex items-center justify-between"
@@ -314,9 +305,7 @@ function toggleExpanded(id: number) {
                       </button>
                       {#if expandedItems.has(question.id)}
                         <div class="p-4 border-t border-border/50">
-                                                    <p
+                          <p class="text-muted-foreground text-sm leading-relaxed">
-                                                        class="text-muted-foreground text-sm leading-relaxed"
-                                                    >
                             {question.answer}
                           </p>
                         </div>
@@ -342,8 +331,7 @@ function toggleExpanded(id: number) {
           <div class="flex flex-col sm:flex-row gap-4 justify-center">
             <Button
               class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
-                            href="mailto:{$_('faq.support.contact_email')}"
+              href="mailto:{$_('faq.support.contact_email')}">{$_("faq.support.contact")}</Button
-                            >{$_("faq.support.contact")}</Button
             >
             <!-- <Button
               variant="outline"

packages/frontend/src/routes/imprint/+page.svelte

@@ -1,11 +1,6 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
-import {
+  import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/card";
-	Card,
-	CardContent,
-	CardHeader,
-	CardTitle,
-} from "$lib/components/ui/card";
   import { Separator } from "$lib/components/ui/separator";
   import PeonyBackground from "$lib/components/background/peony-background.svelte";
   import Meta from "$lib/components/meta/meta.svelte";

packages/frontend/src/routes/leaderboard/+page.server.ts

@@ -6,9 +6,15 @@ import { getGraphQLClient } from "$lib/api";
 const LEADERBOARD_QUERY = gql`
   query Leaderboard($limit: Int, $offset: Int) {
     leaderboard(limit: $limit, offset: $offset) {
-      user_id display_name avatar
+      user_id
-      total_weighted_points total_raw_points
+      display_name
-      recordings_count playbacks_count achievements_count rank
+      avatar
+      total_weighted_points
+      total_raw_points
+      recordings_count
+      playbacks_count
+      achievements_count
+      rank
     }
   }
 `;

packages/frontend/src/routes/leaderboard/+page.svelte

@@ -39,7 +39,10 @@ function getUserInitials(name: string): string {
   }
 </script>
 
-<Meta title={$_("gamification.leaderboard")} description={$_("gamification.leaderboard_description")} />
+<Meta
+  title={$_("gamification.leaderboard")}
+  description={$_("gamification.leaderboard_description")}
+/>
 
 <div class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5">
   <PeonyBackground />
@@ -83,18 +86,24 @@ function getUserInitials(name: string): string {
                   {#if entry.rank <= 3}
                     <span class="text-3xl">{getMedalEmoji(entry.rank)}</span>
                   {:else}
-										<span class="text-xl font-bold text-muted-foreground group-hover:text-foreground transition-colors">
+                    <span
+                      class="text-xl font-bold text-muted-foreground group-hover:text-foreground transition-colors"
+                    >
                       #{entry.rank}
                     </span>
                   {/if}
                 </div>
 
                 <!-- Avatar -->
-								<Avatar class="h-12 w-12 ring-2 ring-accent/20 group-hover:ring-primary/40 transition-all">
+                <Avatar
+                  class="h-12 w-12 ring-2 ring-accent/20 group-hover:ring-primary/40 transition-all"
+                >
                   {#if entry.avatar}
                     <AvatarImage src={getAssetUrl(entry.avatar, "mini")} alt={entry.display_name} />
                   {/if}
-									<AvatarFallback class="bg-gradient-to-br from-primary to-accent text-primary-foreground font-semibold">
+                  <AvatarFallback
+                    class="bg-gradient-to-br from-primary to-accent text-primary-foreground font-semibold"
+                  >
                     {getUserInitials(entry.display_name)}
                   </AvatarFallback>
                 </Avatar>
@@ -143,7 +152,8 @@ function getUserInitials(name: string): string {
             <div class="mt-6 text-center">
               <Button
                 variant="outline"
-								href="/leaderboard?offset={data.pagination.offset + data.pagination.limit}&limit={data.pagination.limit}"
+                href="/leaderboard?offset={data.pagination.offset +
+                  data.pagination.limit}&limit={data.pagination.limit}"
               >
                 {$_("common.load_more")}
               </Button>
@@ -165,14 +175,16 @@ function getUserInitials(name: string): string {
         </p>
         <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
           <div class="flex items-start gap-2">
-						<span class="icon-[ri--video-add-line] w-5 h-5 text-primary flex-shrink-0 mt-0.5"></span>
+            <span class="icon-[ri--video-add-line] w-5 h-5 text-primary flex-shrink-0 mt-0.5"
+            ></span>
             <div>
               <div class="font-medium">{$_("gamification.earn_by_creating")}</div>
               <div class="text-muted-foreground">{$_("gamification.earn_by_creating_desc")}</div>
             </div>
           </div>
           <div class="flex items-start gap-2">
-						<span class="icon-[ri--play-circle-line] w-5 h-5 text-primary flex-shrink-0 mt-0.5"></span>
+            <span class="icon-[ri--play-circle-line] w-5 h-5 text-primary flex-shrink-0 mt-0.5"
+            ></span>
             <div>
               <div class="font-medium">{$_("gamification.earn_by_playing")}</div>
               <div class="text-muted-foreground">{$_("gamification.earn_by_playing_desc")}</div>

packages/frontend/src/routes/legal/+page.svelte

@@ -1,17 +1,7 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
-import {
+  import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/card";
-	Card,
+  import { Tabs, TabsContent, TabsList, TabsTrigger } from "$lib/components/ui/tabs";
-	CardContent,
-	CardHeader,
-	CardTitle,
-} from "$lib/components/ui/card";
-import {
-	Tabs,
-	TabsContent,
-	TabsList,
-	TabsTrigger,
-} from "$lib/components/ui/tabs";
   import { Separator } from "$lib/components/ui/separator";
   import PeonyBackground from "$lib/components/background/peony-background.svelte";
   import Meta from "$lib/components/meta/meta.svelte";
@@ -161,8 +151,7 @@ let activeTab = $state("privacy");
           <Card class="bg-gradient-to-br from-card to-card/50 border-primary/20">
             <CardHeader>
               <CardTitle class="flex items-center gap-2">
-                                <span class="icon-[ri--file-list-3-line] w-5 h-5 text-primary"
+                <span class="icon-[ri--file-list-3-line] w-5 h-5 text-primary"></span>
-                                ></span>
                 {$_("legal.terms.title")}
               </CardTitle>
               <p class="text-muted-foreground">
@@ -426,9 +415,8 @@ let activeTab = $state("privacy");
           <p class="text-muted-foreground mb-4">
             {$_("legal.questions_description")}
           </p>
-                    <a
+          <a href="mailto:{$_('legal.questions_email')}" class="text-primary hover:underline"
-                        href="mailto:{$_('legal.questions_email')}"
+            >{$_("legal.questions_email")}</a
-                        class="text-primary hover:underline">{$_("legal.questions_email")}</a
           >
         </CardContent>
       </Card>

packages/frontend/src/routes/login/+page.svelte

@@ -60,7 +60,6 @@ onMount(() => {
     <!-- Logo -->
     <div class="text-center mb-8">
       <div class="flex items-center justify-center gap-3 text-2xl font-bold mb-2">
-                
         <Logo />
       </div>
       <p class="text-muted-foreground">{$_("auth.login.welcome")}</p>
@@ -131,8 +130,9 @@ onMount(() => {
             <div class="grid w-full max-w-xl items-start gap-4">
               <Alert.Root variant="destructive">
                 <Alert.Title class="items-center flex"
-                                    ><span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"
+                  ><span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>{$_(
-                                    ></span>{$_("auth.login.error")}</Alert.Title
+                    "auth.login.error",
+                  )}</Alert.Title
                 >
                 <Alert.Description>{error}</Alert.Description>
               </Alert.Root>

packages/frontend/src/routes/magazine/+page.svelte

@@ -4,12 +4,7 @@ import { Button } from "$lib/components/ui/button";
   import { Card, CardContent } from "$lib/components/ui/card";
   import { Input } from "$lib/components/ui/input";
 
-import {
+  import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-} from "$lib/components/ui/select";
 
   import TimeAgo from "javascript-time-ago";
   import type { Article } from "$lib/types";
@@ -32,32 +27,25 @@ const filteredArticles = $derived(() => {
         const matchesSearch =
           article.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
           article.excerpt.toLowerCase().includes(searchQuery.toLowerCase()) ||
-				article.author.first_name
+          article.author.first_name.toLowerCase().includes(searchQuery.toLowerCase());
-					.toLowerCase()
+        const matchesCategory = categoryFilter === "all" || article.category === categoryFilter;
-					.includes(searchQuery.toLowerCase());
-			const matchesCategory =
-				categoryFilter === "all" || article.category === categoryFilter;
         return matchesSearch && matchesCategory;
       })
       .sort((a, b) => {
         if (sortBy === "recent")
-				return (
+          return new Date(b.publish_date).getTime() - new Date(a.publish_date).getTime();
-					new Date(b.publish_date).getTime() -
-					new Date(a.publish_date).getTime()
-				);
         // if (sortBy === "popular")
         //   return (
         //     parseInt(b.views.replace(/[^\d]/g, "")) -
         //     parseInt(a.views.replace(/[^\d]/g, ""))
         //   );
-			if (sortBy === "featured")
+        if (sortBy === "featured") return (b.featured ? 1 : 0) - (a.featured ? 1 : 0);
-				return (b.featured ? 1 : 0) - (a.featured ? 1 : 0);
         return a.title.localeCompare(b.title);
       });
   });
 </script>
 
-<Meta title={$_('magazine.title')} description={$_('magazine.description')} />
+<Meta title={$_("magazine.title")} description={$_("magazine.description")} />
 
 <div
   class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
@@ -84,12 +72,12 @@ const filteredArticles = $derived(() => {
         <h1
           class="text-5xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
         >
-          {$_('magazine.title')}
+          {$_("magazine.title")}
         </h1>
         <p
           class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
         >
-          {$_('magazine.description')}
+          {$_("magazine.description")}
         </p>
         <!-- Filters -->
         <div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
@@ -99,7 +87,7 @@ const filteredArticles = $derived(() => {
               class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
             ></span>
             <Input
-              placeholder={$_('magazine.search_placeholder')}
+              placeholder={$_("magazine.search_placeholder")}
               bind:value={searchQuery}
               class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
             />
@@ -111,42 +99,28 @@ const filteredArticles = $derived(() => {
               class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
             >
               <span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
-              {categoryFilter === 'all'
+              {categoryFilter === "all"
-                ? $_('magazine.categories.all')
+                ? $_("magazine.categories.all")
-                : categoryFilter === 'photography'
+                : categoryFilter === "photography"
-                  ? $_('magazine.categories.photography')
+                  ? $_("magazine.categories.photography")
-                  : categoryFilter === 'production'
+                  : categoryFilter === "production"
-                    ? $_('magazine.categories.production')
+                    ? $_("magazine.categories.production")
-                    : categoryFilter === 'interview'
+                    : categoryFilter === "interview"
-                      ? $_('magazine.categories.interview')
+                      ? $_("magazine.categories.interview")
-                      : categoryFilter === 'psychology'
+                      : categoryFilter === "psychology"
-                        ? $_('magazine.categories.psychology')
+                        ? $_("magazine.categories.psychology")
-                        : categoryFilter === 'trends'
+                        : categoryFilter === "trends"
-                          ? $_('magazine.categories.trends')
+                          ? $_("magazine.categories.trends")
-                          : $_('magazine.categories.spotlight')}
+                          : $_("magazine.categories.spotlight")}
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all"
+              <SelectItem value="all">{$_("magazine.categories.all")}</SelectItem>
-                >{$_('magazine.categories.all')}</SelectItem
+              <SelectItem value="photography">{$_("magazine.categories.photography")}</SelectItem>
-              >
+              <SelectItem value="production">{$_("magazine.categories.production")}</SelectItem>
-              <SelectItem value="photography"
+              <SelectItem value="interview">{$_("magazine.categories.interview")}</SelectItem>
-                >{$_('magazine.categories.photography')}</SelectItem
+              <SelectItem value="psychology">{$_("magazine.categories.psychology")}</SelectItem>
-              >
+              <SelectItem value="trends">{$_("magazine.categories.trends")}</SelectItem>
-              <SelectItem value="production"
+              <SelectItem value="spotlight">{$_("magazine.categories.spotlight")}</SelectItem>
-                >{$_('magazine.categories.production')}</SelectItem
-              >
-              <SelectItem value="interview"
-                >{$_('magazine.categories.interview')}</SelectItem
-              >
-              <SelectItem value="psychology"
-                >{$_('magazine.categories.psychology')}</SelectItem
-              >
-              <SelectItem value="trends"
-                >{$_('magazine.categories.trends')}</SelectItem
-              >
-              <SelectItem value="spotlight"
-                >{$_('magazine.categories.spotlight')}</SelectItem
-              >
             </SelectContent>
           </Select>
 
@@ -155,25 +129,21 @@ const filteredArticles = $derived(() => {
             <SelectTrigger
               class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
             >
-              {sortBy === 'recent'
+              {sortBy === "recent"
-                ? $_('magazine.sort.recent')
+                ? $_("magazine.sort.recent")
-                : sortBy === 'popular'
+                : sortBy === "popular"
-                  ? $_('magazine.sort.popular')
+                  ? $_("magazine.sort.popular")
-                  : sortBy === 'featured'
+                  : sortBy === "featured"
-                    ? $_('magazine.sort.featured')
+                    ? $_("magazine.sort.featured")
-                    : $_('magazine.sort.name')}
+                    : $_("magazine.sort.name")}
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="recent"
+              <SelectItem value="recent">{$_("magazine.sort.recent")}</SelectItem>
-                >{$_('magazine.sort.recent')}</SelectItem
-              >
               <!-- <SelectItem value="popular"
               >{$_("magazine.sort.popular")}</SelectItem
             > -->
-              <SelectItem value="featured"
+              <SelectItem value="featured">{$_("magazine.sort.featured")}</SelectItem>
-                >{$_('magazine.sort.featured')}</SelectItem
+              <SelectItem value="name">{$_("magazine.sort.name")}</SelectItem>
-              >
-              <SelectItem value="name">{$_('magazine.sort.name')}</SelectItem>
             </SelectContent>
           </Select>
         </div>
@@ -183,21 +153,21 @@ const filteredArticles = $derived(() => {
 
   <div class="container mx-auto px-4 py-12">
     <!-- Featured Article -->
-    {#if featuredArticle && categoryFilter === 'all' && !searchQuery}
+    {#if featuredArticle && categoryFilter === "all" && !searchQuery}
       <Card
         class="py-0 mb-12 overflow-hidden bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-2xl shadow-primary/20"
       >
         <div class="grid grid-cols-1 lg:grid-cols-2">
           <div class="relative">
             <img
-              src={getAssetUrl(featuredArticle.image, 'medium')}
+              src={getAssetUrl(featuredArticle.image, "medium")}
               alt={featuredArticle.title}
               class="w-full h-96 object-cover"
             />
             <div
               class="absolute top-4 left-4 bg-gradient-to-r from-primary to-accent text-white px-3 py-1 rounded-full text-sm font-medium"
             >
-              {$_('magazine.featured')}
+              {$_("magazine.featured")}
             </div>
           </div>
           <CardContent class="p-8 flex flex-col justify-center">
@@ -208,13 +178,9 @@ const filteredArticles = $derived(() => {
                 {featuredArticle.category}
               </span>
             </div>
-            <h2
+            <h2 class="text-2xl md:text-3xl font-bold mb-4 hover:text-primary transition-colors">
-              class="text-2xl md:text-3xl font-bold mb-4 hover:text-primary transition-colors"
-            >
               <button class="text-left">
-                <a href="/article/{featuredArticle.slug}"
+                <a href="/article/{featuredArticle.slug}">{featuredArticle.title}</a>
-                  >{featuredArticle.title}</a
-                >
               </button>
             </h2>
             <p class="text-muted-foreground mb-6 text-lg leading-relaxed">
@@ -223,26 +189,20 @@ const filteredArticles = $derived(() => {
             <div class="flex items-center justify-between">
               <div class="flex items-center gap-3">
                 <img
-                  src={getAssetUrl(featuredArticle.author.avatar, 'mini')}
+                  src={getAssetUrl(featuredArticle.author.avatar, "mini")}
                   alt={featuredArticle.author.first_name}
                   class="w-10 h-10 rounded-full object-cover"
                 />
                 <div>
                   <p class="font-medium">{featuredArticle.author.first_name}</p>
-                  <div
+                  <div class="flex items-center gap-3 text-sm text-muted-foreground">
-                    class="flex items-center gap-3 text-sm text-muted-foreground"
+                    <span>{timeAgo.format(new Date(featuredArticle.publish_date))}</span>
-                  >
-                    <span
-                      >{timeAgo.format(
-                        new Date(featuredArticle.publish_date)
-                      )}</span
-                    >
                     <span>•</span>
                     <span
-                      >{$_('magazine.read_time', {
+                      >{$_("magazine.read_time", {
                         values: {
-                          time: calcReadingTime(featuredArticle.content)
+                          time: calcReadingTime(featuredArticle.content),
-                        }
+                        },
                       })}
                     </span>
                   </div>
@@ -250,8 +210,7 @@ const filteredArticles = $derived(() => {
               </div>
               <Button
                 class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
-                href="/magazine/{featuredArticle.slug}"
+                href="/magazine/{featuredArticle.slug}">{$_("magazine.read_article")}</Button
-                >{$_('magazine.read_article')}</Button
               >
             </div>
           </CardContent>
@@ -267,7 +226,7 @@ const filteredArticles = $derived(() => {
         >
           <div class="relative">
             <img
-              src={getAssetUrl(article.image, 'preview')}
+              src={getAssetUrl(article.image, "preview")}
               alt={article.title}
               class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
             />
@@ -287,7 +246,7 @@ const filteredArticles = $derived(() => {
               <div
                 class="absolute top-3 right-3 bg-gradient-to-r from-primary to-accent text-white text-xs px-2 py-1 rounded-full"
               >
-                {$_('magazine.featured')}
+                {$_("magazine.featured")}
               </div>
             {/if}
 
@@ -307,9 +266,7 @@ const filteredArticles = $derived(() => {
               >
                 <a href="/magazine/{article.slug}">{article.title}</a>
               </h3>
-              <p
+              <p class="text-muted-foreground text-sm line-clamp-3 leading-relaxed">
-                class="text-muted-foreground text-sm line-clamp-3 leading-relaxed"
-              >
                 {article.excerpt}
               </p>
             </div>
@@ -330,23 +287,21 @@ const filteredArticles = $derived(() => {
             <div class="flex items-center justify-between">
               <div class="flex items-center gap-2">
                 <img
-                  src={getAssetUrl(article.author.avatar, 'mini')}
+                  src={getAssetUrl(article.author.avatar, "mini")}
                   alt={article.author.first_name}
                   class="w-8 h-8 rounded-full object-cover"
                 />
                 <div>
                   <p class="text-sm font-medium">{article.author.first_name}</p>
-                  <div
+                  <div class="flex items-center gap-2 text-xs text-muted-foreground">
-                    class="flex items-center gap-2 text-xs text-muted-foreground"
-                  >
                     <span class="icon-[ri--calendar-line] w-4 h-4"></span>
                     {timeAgo.format(new Date(article.publish_date))}
                   </div>
                 </div>
               </div>
               <div class="text-xs text-muted-foreground">
-                {$_('magazine.read_time', {
+                {$_("magazine.read_time", {
-                  values: { time: calcReadingTime(article.content) }
+                  values: { time: calcReadingTime(article.content) },
                 })}
               </div>
             </div>
@@ -356,8 +311,7 @@ const filteredArticles = $derived(() => {
               variant="outline"
               size="sm"
               class="w-full mt-4 border-primary/20 hover:bg-primary/10"
-              href="/magazine/{article.slug}"
+              href="/magazine/{article.slug}">{$_("magazine.read_article")}</Button
-              >{$_('magazine.read_article')}</Button
             >
           </CardContent>
         </Card>
@@ -367,17 +321,17 @@ const filteredArticles = $derived(() => {
     {#if filteredArticles().length === 0}
       <div class="text-center py-12">
         <p class="text-muted-foreground text-lg mb-4">
-          {$_('magazine.no_results')}
+          {$_("magazine.no_results")}
         </p>
         <Button
           variant="outline"
           onclick={() => {
-            searchQuery = '';
+            searchQuery = "";
-            categoryFilter = 'all';
+            categoryFilter = "all";
           }}
           class="border-primary/20 hover:bg-primary/10"
         >
-          {$_('magazine.clear_filters')}
+          {$_("magazine.clear_filters")}
         </Button>
       </div>
     {/if}

packages/frontend/src/routes/magazine/[slug]/+page.svelte

@@ -58,9 +58,7 @@ const timeAgo = new TimeAgo("en");
           </p>
 
           <!-- Meta Information -->
-                    <div
+          <div class="flex flex-wrap items-center gap-6 text-sm text-muted-foreground mb-6">
-                        class="flex flex-wrap items-center gap-6 text-sm text-muted-foreground mb-6"
-                    >
             <div class="flex items-center gap-2">
               <span class="icon-[ri--calendar-line] w-4 h-4"></span>
               {timeAgo.format(new Date(data.article.publish_date))}
@@ -92,13 +90,14 @@ const timeAgo = new TimeAgo("en");
               <HeartIcon class="w-4 h-4 {isLiked ? 'fill-current' : ''}" />
               {data.article.likes}
             </Button> -->
-                    <SharingPopupButton content={{
+          <SharingPopupButton
+            content={{
               title: data.article.title,
               description: data.article.excerpt,
               url: page.url.href,
               type: "article" as const,
-                        }} />
+            }}
-  
+          />
         </div>
 
         <!-- Featured Image -->
@@ -129,7 +128,10 @@ const timeAgo = new TimeAgo("en");
           </div>
           <div class="flex flex-wrap gap-2">
             {#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}">
+              <a
+                class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm"
+                href="/tags/{tag}"
+              >
                 #{tag}
               </a>
             {/each}

packages/frontend/src/routes/me/+page.svelte

@@ -8,12 +8,7 @@ import {
     CardHeader,
     CardTitle,
   } from "$lib/components/ui/card";
-import {
+  import { Tabs, TabsContent, TabsList, TabsTrigger } from "$lib/components/ui/tabs";
-	Tabs,
-	TabsContent,
-	TabsList,
-	TabsTrigger,
-} from "$lib/components/ui/tabs";
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
   import PeonyBackground from "$lib/components/background/peony-background.svelte";
@@ -26,11 +21,7 @@ import { deleteRecording, removeFile, updateProfile, uploadFile } from "$lib/ser
   import { Textarea } from "$lib/components/ui/textarea";
   import Meta from "$lib/components/meta/meta.svelte";
   import { TagsInput } from "$lib/components/ui/tags-input";
-import {
+  import { displaySize, FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
-	displaySize,
-	FileDropZone,
-	MEGABYTE,
-} from "$lib/components/ui/file-drop-zone";
   import RecordingCard from "$lib/components/recording-card/recording-card.svelte";
 
   const { data } = $props();
@@ -75,10 +66,7 @@ async function handleProfileSubmit(e: Event) {
 
       if (avatar?.file) {
         const formData = new FormData();
-			formData.append(
+        formData.append("folder", data.folders.find((f) => f.name === "avatars")!.id);
-				"folder",
-				data.folders.find((f) => f.name === "avatars")!.id,
-			);
         formData.append("file", avatar.file!);
         const result = await uploadFile(formData);
         avatarId = result.id;
@@ -224,8 +212,7 @@ onMount(() => {
           <Button
             href={`/models/${data.authStatus.user!.slug}`}
             variant="outline"
-                        class="border-primary/20 hover:bg-primary/10"
+            class="border-primary/20 hover:bg-primary/10">{$_("me.view_profile")}</Button
-                        >{$_("me.view_profile")}</Button
           >
         {/if}
       </div>
@@ -294,8 +281,7 @@ onMount(() => {
                           size="icon"
                           onclick={handleAvatarRemove}
                           class="cursor-pointer"
-                                                    ><span class="icon-[ri--delete-bin-line]"
+                          ><span class="icon-[ri--delete-bin-line]"></span></Button
-                                                    ></span></Button
                         >
                       </div>
                     </div>
@@ -304,8 +290,7 @@ onMount(() => {
                 <!-- Name Fields -->
                 <div class="grid grid-cols-2 gap-4">
                   <div class="space-y-2">
-                                        <Label for="firstName">{$_("me.settings.first_name")}</Label
+                    <Label for="firstName">{$_("me.settings.first_name")}</Label>
-                                        >
                     <Input
                       id="firstName"
                       placeholder={$_("me.settings.first_name_placeholder")}
@@ -358,9 +343,9 @@ onMount(() => {
                   <div class="grid w-full items-start gap-4">
                     <Alert.Root variant="destructive">
                       <Alert.Title class="items-center flex"
-                                                ><span
+                        ><span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>{$_(
-                                                    class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"
+                          "me.settings.error",
-                                                ></span>{$_("me.settings.error")}</Alert.Title
+                        )}</Alert.Title
                       >
                       <Alert.Description>{profileError}</Alert.Description>
                     </Alert.Root>
@@ -423,8 +408,7 @@ onMount(() => {
                       class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                     >
                       {#if showPassword}
-                                                <span class="icon-[ri--eye-off-line] w-4 h-4"
+                        <span class="icon-[ri--eye-off-line] w-4 h-4"></span>
-                                                ></span>
                       {:else}
                         <span class="icon-[ri--eye-line] w-4 h-4"></span>
                       {/if}
@@ -434,29 +418,23 @@ onMount(() => {
 
                 <!-- Confirm Password -->
                 <div class="space-y-2">
-                                    <Label for="confirmPassword"
+                  <Label for="confirmPassword">{$_("me.settings.confirm_password")}</Label>
-                                        >{$_("me.settings.confirm_password")}</Label
-                                    >
                   <div class="relative">
                     <Input
                       id="confirmPassword"
                       type={showConfirmPassword ? "text" : "password"}
-                                            placeholder={$_(
+                      placeholder={$_("me.settings.confirm_password_placeholder")}
-                                                "me.settings.confirm_password_placeholder",
-                                            )}
                       bind:value={confirmPassword}
                       required
                       class="bg-background/50 border-primary/20 focus:border-primary pr-10"
                     />
                     <button
                       type="button"
-                                            onclick={() =>
+                      onclick={() => (showConfirmPassword = !showConfirmPassword)}
-                                                (showConfirmPassword = !showConfirmPassword)}
                       class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                     >
                       {#if showConfirmPassword}
-                                                <span class="icon-[ri--eye-off-line] w-4 h-4"
+                        <span class="icon-[ri--eye-off-line] w-4 h-4"></span>
-                                                ></span>
                       {:else}
                         <span class="icon-[ri--eye-line] w-4 h-4"></span>
                       {/if}
@@ -467,9 +445,9 @@ onMount(() => {
                   <div class="grid w-full items-start gap-4">
                     <Alert.Root variant="destructive">
                       <Alert.Title class="items-center flex"
-                                                ><span
+                        ><span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>{$_(
-                                                    class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"
+                          "me.settings.error",
-                                                ></span>{$_("me.settings.error")}</Alert.Title
+                        )}</Alert.Title
                       >
                       <Alert.Description>{securityError}</Alert.Description>
                     </Alert.Root>
@@ -520,12 +498,8 @@ onMount(() => {
           <Card class="bg-card/50 border-primary/20">
             <CardContent class="py-12">
               <div class="flex flex-col items-center justify-center text-center">
-                                <div
+                <div class="mb-4 p-4 rounded-full bg-muted/30 border border-border/30">
-                                    class="mb-4 p-4 rounded-full bg-muted/30 border border-border/30"
+                  <span class="icon-[ri--play-list-2-line] w-12 h-12 text-muted-foreground"></span>
-                                >
-                                    <span
-                                        class="icon-[ri--play-list-2-line] w-12 h-12 text-muted-foreground"
-                                    ></span>
                 </div>
                 <h3 class="text-xl font-semibold mb-2">
                   {$_("me.recordings.no_recordings")}
@@ -560,9 +534,7 @@ onMount(() => {
       {#if data.analytics}
         <TabsContent value="analytics" class="space-y-6">
           <div class="mb-6">
-                        <h2 class="text-2xl font-bold text-card-foreground">
+            <h2 class="text-2xl font-bold text-card-foreground">Analytics Dashboard</h2>
-                            Analytics Dashboard
-                        </h2>
             <p class="text-muted-foreground">
               Track your content performance and audience engagement
             </p>
@@ -627,7 +599,10 @@ onMount(() => {
                     {#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
+                            href="/videos/{video.slug}"
+                            class="hover:text-primary transition-colors"
+                          >
                             {video.title}
                           </a>
                         </td>
@@ -638,12 +613,21 @@ onMount(() => {
                           {video.plays}
                         </td>
                         <td class="text-right p-3">
-                                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs {video.completion_rate >= 70 ? 'bg-green-500/20 text-green-500' : video.completion_rate >= 40 ? 'bg-yellow-500/20 text-yellow-500' : 'bg-red-500/20 text-red-500'}">
+                          <span
+                            class="inline-flex items-center px-2 py-1 rounded-full text-xs {video.completion_rate >=
+                            70
+                              ? 'bg-green-500/20 text-green-500'
+                              : video.completion_rate >= 40
+                                ? 'bg-yellow-500/20 text-yellow-500'
+                                : 'bg-red-500/20 text-red-500'}"
+                          >
                             {video.completion_rate.toFixed(1)}%
                           </span>
                         </td>
                         <td class="text-right p-3 text-muted-foreground">
-                                                    {Math.floor(video.avg_watch_time / 60)}:{(video.avg_watch_time % 60).toString().padStart(2, '0')}
+                          {Math.floor(video.avg_watch_time / 60)}:{(video.avg_watch_time % 60)
+                            .toString()
+                            .padStart(2, "0")}
                         </td>
                       </tr>
                     {/each}

packages/frontend/src/routes/models/+page.svelte

@@ -3,12 +3,7 @@ import { _ } from "svelte-i18n";
   import { Button } from "$lib/components/ui/button";
   import { Card, CardContent } from "$lib/components/ui/card";
   import { Input } from "$lib/components/ui/input";
-import {
+  import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-} from "$lib/components/ui/select";
   import { getAssetUrl } from "$lib/directus";
   import Meta from "$lib/components/meta/meta.svelte";
 
@@ -24,11 +19,8 @@ const filteredModels = $derived(() => {
         const matchesSearch =
           searchQuery === "" ||
           model.artist_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-				model.tags.some((tag) =>
+          model.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()));
-					tag.toLowerCase().includes(searchQuery.toLowerCase()),
+        const matchesCategory = categoryFilter === "all" || model.category === categoryFilter;
-				);
-			const matchesCategory =
-				categoryFilter === "all" || model.category === categoryFilter;
         return matchesSearch && matchesCategory;
       })
       .sort((a, b) => {
@@ -105,15 +97,9 @@ const filteredModels = $derived(() => {
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="all">{$_("models.categories.all")}</SelectItem>
-                            <SelectItem value="romantic"
+              <SelectItem value="romantic">{$_("models.categories.romantic")}</SelectItem>
-                                >{$_("models.categories.romantic")}</SelectItem
+              <SelectItem value="artistic">{$_("models.categories.artistic")}</SelectItem>
-                            >
+              <SelectItem value="intimate">{$_("models.categories.intimate")}</SelectItem>
-                            <SelectItem value="artistic"
-                                >{$_("models.categories.artistic")}</SelectItem
-                            >
-                            <SelectItem value="intimate"
-                                >{$_("models.categories.intimate")}</SelectItem
-                            >
             </SelectContent>
           </Select>
 
@@ -180,11 +166,8 @@ const filteredModels = $derived(() => {
               aria-label={model.artist_name}
               class="absolute inset-0 group-hover:scale-105 transition bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 flex items-center justify-center"
             >
-                            <div
+              <div class="w-16 h-16 bg-primary/90 rounded-full flex items-center justify-center">
-                                class="w-16 h-16 bg-primary/90 rounded-full flex items-center justify-center"
+                <span class="icon-[ri--play-large-fill] w-8 h-8 text-white ml-1"></span>
-                            >
-                                <span class="icon-[ri--play-large-fill] w-8 h-8 text-white ml-1"
-                                ></span>
               </div>
             </a>
           </div>
@@ -192,9 +175,7 @@ const filteredModels = $derived(() => {
           <CardContent class="p-6">
             <div class="flex items-start justify-between mb-3">
               <div>
-                                <h3
+                <h3 class="font-semibold text-lg mb-1 group-hover:text-primary transition-colors">
-                                    class="font-semibold text-lg mb-1 group-hover:text-primary transition-colors"
-                                >
                   {model.artist_name}
                 </h3>
                 <!-- <div
@@ -222,9 +203,7 @@ const filteredModels = $derived(() => {
             </div>
 
             <!-- Stats -->
-                        <div
+            <div class="flex items-center justify-between text-sm text-muted-foreground mb-4">
-                            class="flex items-center justify-between text-sm text-muted-foreground mb-4"
-                        >
               <!-- <span>{model.videos} videos</span> -->
               <span class="capitalize">{model.category}</span>
             </div>

packages/frontend/src/routes/models/[slug]/+page.server.ts

@@ -1,9 +1,5 @@
 import { error } from "@sveltejs/kit";
-import {
+import { countCommentsForModel, getModelBySlug, getVideosForModel } from "$lib/services.js";
-	countCommentsForModel,
-	getModelBySlug,
-	getVideosForModel,
-} from "$lib/services.js";
 export async function load({ fetch, params }) {
   try {
     const model = await getModelBySlug(params.slug, fetch);

packages/frontend/src/routes/models/[slug]/+page.svelte

@@ -2,12 +2,7 @@
   import { _, locale } from "svelte-i18n";
   import { Button } from "$lib/components/ui/button";
   import { Card, CardContent } from "$lib/components/ui/card";
-import {
+  import { Tabs, TabsContent, TabsList, TabsTrigger } from "$lib/components/ui/tabs";
-	Tabs,
-	TabsContent,
-	TabsList,
-	TabsTrigger,
-} from "$lib/components/ui/tabs";
   import { getAssetUrl } from "$lib/directus";
   import Meta from "$lib/components/meta/meta.svelte";
   import PeonyBackground from "$lib/components/background/peony-background.svelte";
@@ -29,18 +24,14 @@ let images = $derived(
   );
 
   // Calculate total likes and plays from all videos
-let totalLikes = $derived(
+  let totalLikes = $derived(data.videos.reduce((sum, video) => sum + (video.likes_count || 0), 0));
-	data.videos.reduce((sum, video) => sum + (video.likes_count || 0), 0)
+  let totalPlays = $derived(data.videos.reduce((sum, video) => sum + (video.plays_count || 0), 0));
-);
-let totalPlays = $derived(
-	data.videos.reduce((sum, video) => sum + (video.plays_count || 0), 0)
-);
 </script>
 
 <Meta
   title={data.model.artist_name}
   description={data.model.description}
-  image={getAssetUrl(data.model.avatar, 'medium')!}
+  image={getAssetUrl(data.model.avatar, "medium")!}
 />
 
 <div
@@ -65,22 +56,18 @@ let totalPlays = $derived(
       variant="ghost"
       class="absolute top-4 left-4 bg-black/50 hover:bg-black/70 text-white"
       href="/models"
-      ><span class="icon-[ri--arrow-left-long-line] w-4 h-4 mr-1"></span>{$_(
+      ><span class="icon-[ri--arrow-left-long-line] w-4 h-4 mr-1"></span>{$_("models.back")}</Button
-        'models.back'
-      )}</Button
     >
   </div>
 
   <!-- Profile Header -->
   <div class="container mx-auto px-4 -mt-20 relative z-10">
-    <div
+    <div class="bg-card/90 backdrop-blur-sm rounded-2xl border border-border/50 p-6 shadow-2xl">
-      class="bg-card/90 backdrop-blur-sm rounded-2xl border border-border/50 p-6 shadow-2xl"
-    >
       <div class="flex flex-col md:flex-row gap-6">
         <!-- Profile Image -->
         <div class="relative">
           <img
-            src={getAssetUrl(data.model.avatar, 'thumbnail')}
+            src={getAssetUrl(data.model.avatar, "thumbnail")}
             alt="${data.model.artist_name}"
             class="w-32 h-32 rounded-2xl object-cover ring-4 ring-primary/20"
           />
@@ -96,9 +83,7 @@ let totalPlays = $derived(
 
         <!-- Profile Info -->
         <div class="flex-1">
-          <div
+          <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
-            class="flex flex-col md:flex-row md:items-start md:justify-between gap-4"
-          >
             <div>
               <h1 class="text-3xl font-bold mb-2">{data.model.artist_name}</h1>
               <div class="flex items-center gap-4 text-muted-foreground mb-3">
@@ -112,16 +97,14 @@ let totalPlays = $derived(
                 </div> -->
                 <div class="flex items-center gap-1">
                   <span class="icon-[ri--calendar-line] w-4 h-4"></span>
-                  {$_('models.joined', {
+                  {$_("models.joined", {
                     values: {
-                      join_date: new Date(
+                      join_date: new Date(data.model.date_created).toLocaleDateString($locale!, {
-                        data.model.date_created
+                        day: "numeric",
-                      ).toLocaleDateString($locale!, {
+                        month: "long",
-                        day: 'numeric',
+                        year: "numeric",
-                        month: 'long',
+                      }),
-                        year: 'numeric'
+                    },
-                      })
-                    }
                   })}
                 </div>
               </div>
@@ -169,7 +152,7 @@ let totalPlays = $derived(
                   title: data.model.artist_name,
                   description: data.model.description,
                   url: page.url,
-                  type: 'model'
+                  type: "model",
                 }}
               />
             </div>
@@ -178,14 +161,12 @@ let totalPlays = $derived(
       </div>
 
       <!-- Stats -->
-      <div
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6 pt-6 border-t border-border/50">
-        class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6 pt-6 border-t border-border/50"
-      >
         <div class="text-center">
           <div class="text-2xl font-bold text-primary">
             {data.videos.length}
           </div>
-          <div class="text-sm text-muted-foreground">{$_('models.videos')}</div>
+          <div class="text-sm text-muted-foreground">{$_("models.videos")}</div>
         </div>
         <div class="text-center">
           <div class="text-2xl font-bold text-primary">
@@ -204,7 +185,7 @@ let totalPlays = $derived(
             {data.commentsCount}
           </div>
           <div class="text-sm text-muted-foreground">
-            {$_('models.comments')}
+            {$_("models.comments")}
           </div>
         </div>
       </div>
@@ -217,11 +198,11 @@ let totalPlays = $derived(
       <TabsList class="grid w-full grid-cols-2 max-w-md mx-auto mb-8">
         <TabsTrigger value="videos" class="flex items-center gap-2">
           <span class="icon-[ri--play-large-fill] w-4 h-4"></span>
-          {$_('models.videos')}
+          {$_("models.videos")}
         </TabsTrigger>
         <TabsTrigger value="photos" class="flex items-center gap-2">
           <span class="icon-[ri--camera-fill] w-4 h-4"></span>
-          {$_('models.photos')}
+          {$_("models.photos")}
         </TabsTrigger>
       </TabsList>
 
@@ -233,17 +214,17 @@ let totalPlays = $derived(
             >
               <div class="relative">
                 <img
-                  src={getAssetUrl(video.image, 'preview')}
+                  src={getAssetUrl(video.image, "preview")}
                   alt={video.title}
                   class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                 />
                 <div
                   class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-transform group-hover:scale-105 duration-300"
                 ></div>
-                <div
+                <div class="absolute bottom-2 left-2 text-white text-sm font-medium">
-                  class="absolute bottom-2 left-2 text-white text-sm font-medium"
+                  {#if video.movie_file?.duration}{formatVideoDuration(
-                >
+                      video.movie_file.duration,
-                  {#if video.movie_file?.duration}{formatVideoDuration(video.movie_file.duration)}{/if}
+                    )}{/if}
                 </div>
                 <!-- <div
                   class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-full"
@@ -258,20 +239,15 @@ let totalPlays = $derived(
                   <div
                     class="w-16 h-16 bg-primary/90 rounded-full flex flex-col items-center justify-center shadow-2xl"
                   >
-                    <span class="icon-[ri--play-large-fill] w-8 h-8 text-white"
+                    <span class="icon-[ri--play-large-fill] w-8 h-8 text-white"></span>
-                    ></span>
                   </div>
                 </a>
               </div>
               <CardContent class="px-4 pb-4 pt-0">
-                <h3
+                <h3 class="font-semibold mb-2 group-hover:text-primary transition-colors">
-                  class="font-semibold mb-2 group-hover:text-primary transition-colors"
-                >
                   {video.title}
                 </h3>
-                <div
+                <div class="flex items-center justify-between text-sm text-muted-foreground">
-                  class="flex items-center justify-between text-sm text-muted-foreground"
-                >
                   <div class="flex items-center gap-1">
                     <span class="icon-[ri--play-fill] w-4 h-4"></span>
                     {video.plays_count || 0}
@@ -290,7 +266,6 @@ let totalPlays = $derived(
       <TabsContent value="photos">
         <ImageViewer {images} />
       </TabsContent>
-      
     </Tabs>
   </div>
 </div>

packages/frontend/src/routes/password/+page.svelte

@@ -28,9 +28,7 @@ async function handleSubmit(e: Event) {
     e.preventDefault();
     try {
       await requestPassword(email);
-		toast.success(
+      toast.success($_("auth.password_request.toast_request", { values: { email } }));
-			$_("auth.password_request.toast_request", { values: { email } }),
-		);
       goto("/login");
     } catch (err: any) {
       error = err.message;
@@ -64,7 +62,6 @@ onMount(() => {
     <!-- Logo -->
     <div class="text-center mb-8">
       <div class="flex items-center justify-center gap-3 text-2xl font-bold mb-2">
-                
         <Logo />
       </div>
       <p class="text-muted-foreground">{$_("auth.password_request.welcome")}</p>
@@ -96,8 +93,9 @@ onMount(() => {
             <div class="grid w-full max-w-xl items-start gap-4">
               <Alert.Root variant="destructive">
                 <Alert.Title class="items-center flex"
-                                    ><span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"
+                  ><span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>{$_(
-                                    ></span>{$_("auth.password_request.error")}</Alert.Title
+                    "auth.password_request.error",
+                  )}</Alert.Title
                 >
                 <Alert.Description>{error}</Alert.Description>
               </Alert.Root>

packages/frontend/src/routes/password/reset/+page.svelte

@@ -68,7 +68,6 @@ onMount(() => {
     <!-- Logo -->
     <div class="text-center mb-8">
       <div class="flex items-center justify-center gap-3 text-2xl font-bold mb-2">
-                
         <Logo />
       </div>
       <p class="text-muted-foreground">{$_("auth.password_reset.welcome")}</p>
@@ -111,9 +110,7 @@ onMount(() => {
 
           <!-- Confirm Password -->
           <div class="space-y-2">
-                        <Label for="confirmPassword"
+            <Label for="confirmPassword">{$_("auth.password_reset.confirm_password")}</Label>
-                            >{$_("auth.password_reset.confirm_password")}</Label
-                        >
             <div class="relative">
               <Input
                 id="confirmPassword"
@@ -141,8 +138,9 @@ onMount(() => {
             <div class="grid w-full max-w-xl items-start gap-4">
               <Alert.Root variant="destructive">
                 <Alert.Title class="items-center flex"
-                                    ><span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"
+                  ><span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>{$_(
-                                    ></span>{$_("auth.password_reset.error")}</Alert.Title
+                    "auth.password_reset.error",
+                  )}</Alert.Title
                 >
                 <Alert.Description>{error}</Alert.Description>
               </Alert.Root>

packages/frontend/src/routes/play/+page.svelte

@@ -86,11 +86,7 @@ function handleInputReading(msg: ButtplugMessage) {
     device.lastSeen = new Date();
   }
 
-async function handleChange(
+  async function handleChange(device: BluetoothDevice, actuatorIdx: number, value: number) {
-	device: BluetoothDevice,
-	actuatorIdx: number,
-	value: number,
-) {
     const actuator = device.actuators[actuatorIdx];
     const feature = device.info.features.get(actuator.featureIndex);
     if (!feature) return;
@@ -123,11 +119,7 @@ function stopRecording() {
     }
   }
 
-function captureEvent(
+  function captureEvent(device: BluetoothDevice, actuatorIdx: number, value: number) {
-	device: BluetoothDevice,
-	actuatorIdx: number,
-	value: number,
-) {
     if (!recordingStartTime) return;
 
     const timestamp = performance.now() - recordingStartTime;
@@ -174,11 +166,7 @@ function convertDevice(device: ButtplugClientDevice): BluetoothDevice {
     };
   }
 
-async function handleSaveRecording(data: {
+  async function handleSaveRecording(data: { title: string; description: string; tags: string[] }) {
-	title: string;
-	description: string;
-	tags: string[];
-}) {
     const deviceInfo: DeviceInfo[] = devices.map((d) => ({
       name: d.name,
       index: d.info.index,
@@ -332,9 +320,7 @@ function executeEvent(event: RecordedEvent) {
     }
 
     // Find matching actuator by type
-	const actuator = device.actuators.find(
+    const actuator = device.actuators.find((a) => a.outputType === event.actuatorType);
-		(a) => a.outputType === event.actuatorType,
-	);
     if (!actuator) {
       console.warn(`Actuator type ${event.actuatorType} not found on ${device.name}`);
       return;
@@ -361,7 +347,7 @@ function seek(percentage: number) {
     playbackProgress = targetTime;
 
     // Find the event index at this time
-	currentEventIndex = data.recording.events.findIndex(e => e.timestamp >= targetTime);
+    currentEventIndex = data.recording.events.findIndex((e) => e.timestamp >= targetTime);
     if (currentEventIndex === -1) {
       currentEventIndex = data.recording.events.length;
     }
@@ -496,19 +482,31 @@ onMount(() => {
           <div class="mb-4">
             <div class="flex items-center gap-3 mb-2">
               <span class="text-sm text-muted-foreground min-w-[50px]">
-                                {Math.floor(playbackProgress / 1000 / 60)}:{(Math.floor(playbackProgress / 1000) % 60).toString().padStart(2, '0')}
+                {Math.floor(playbackProgress / 1000 / 60)}:{(
+                  Math.floor(playbackProgress / 1000) % 60
+                )
+                  .toString()
+                  .padStart(2, "0")}
               </span>
-                            <div class="flex-1 h-2 bg-muted rounded-full overflow-hidden cursor-pointer relative"
+              <div
+                class="flex-1 h-2 bg-muted rounded-full overflow-hidden cursor-pointer relative"
                 onclick={(e) => {
                   const rect = e.currentTarget.getBoundingClientRect();
                   const percentage = ((e.clientX - rect.left) / rect.width) * 100;
                   seek(percentage);
-                                 }}>
+                }}
-                                <div class="absolute inset-0 bg-gradient-to-r from-primary to-accent transition-all duration-150"
+              >
-                                     style="width: {(playbackProgress / data.recording.duration) * 100}%"></div>
+                <div
+                  class="absolute inset-0 bg-gradient-to-r from-primary to-accent transition-all duration-150"
+                  style="width: {(playbackProgress / data.recording.duration) * 100}%"
+                ></div>
               </div>
               <span class="text-sm text-muted-foreground min-w-[50px] text-right">
-                                {Math.floor(data.recording.duration / 1000 / 60)}:{(Math.floor(data.recording.duration / 1000) % 60).toString().padStart(2, '0')}
+                {Math.floor(data.recording.duration / 1000 / 60)}:{(
+                  Math.floor(data.recording.duration / 1000) % 60
+                )
+                  .toString()
+                  .padStart(2, "0")}
               </span>
             </div>
           </div>
@@ -532,7 +530,7 @@ onMount(() => {
                 class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 min-w-[120px]"
               >
                 <span class="icon-[ri--play-fill] w-5 h-5 mr-2"></span>
-                                {playbackProgress > 0 ? 'Resume' : 'Play'}
+                {playbackProgress > 0 ? "Resume" : "Play"}
               </Button>
             {:else}
               <Button

packages/frontend/src/routes/play/components/device-mapping-dialog.svelte

@@ -20,19 +20,17 @@ let mappings = new SvelteMap<string, BluetoothDevice>();
 
   // Check if a connected device is compatible with a recorded device
   function isCompatible(recordedDevice: DeviceInfo, connectedDevice: BluetoothDevice): boolean {
-	const connectedActuators = connectedDevice.actuators.map(
+    const connectedActuators = connectedDevice.actuators.map((a) => a.outputType);
-		(a) => a.outputType,
-	);
 
     // Check if all required actuator types from recording exist on connected device
-	return recordedDevice.capabilities.every(requiredType =>
+    return recordedDevice.capabilities.every((requiredType) =>
-		connectedActuators.includes(requiredType)
+      connectedActuators.includes(requiredType),
     );
   }
 
   // Get compatible devices for a recorded device
   function getCompatibleDevices(recordedDevice: DeviceInfo): BluetoothDevice[] {
-	return connectedDevices.filter(device => isCompatible(recordedDevice, device));
+    return connectedDevices.filter((device) => isCompatible(recordedDevice, device));
   }
 
   // Auto-map devices on open
@@ -40,9 +38,9 @@ $effect(() => {
     if (open && recordedDevices.length > 0 && connectedDevices.length > 0) {
       const newMappings = new SvelteMap<string, BluetoothDevice>();
 
-		recordedDevices.forEach(recordedDevice => {
+      recordedDevices.forEach((recordedDevice) => {
         // Try to find exact name match first
-			let match = connectedDevices.find(d => d.name === recordedDevice.name);
+        let match = connectedDevices.find((d) => d.name === recordedDevice.name);
 
         // If no exact match, find first compatible device
         if (!match) {
@@ -63,7 +61,7 @@ $effect(() => {
 
   function handleConfirm() {
     // Validate that all devices are mapped
-	const allMapped = recordedDevices.every(rd => mappings.has(rd.name));
+    const allMapped = recordedDevices.every((rd) => mappings.has(rd.name));
     if (!allMapped) {
       return;
     }
@@ -73,7 +71,7 @@ function handleConfirm() {
   function handleDeviceSelect(recordedDeviceName: string, deviceId: string) {
     if (!deviceId) return;
 
-	const device = connectedDevices.find(d => d.id === deviceId);
+    const device = connectedDevices.find((d) => d.id === deviceId);
     if (device) {
       const newMappings = new SvelteMap(mappings);
       newMappings.set(recordedDeviceName, device);
@@ -81,9 +79,7 @@ function handleDeviceSelect(recordedDeviceName: string, deviceId: string) {
     }
   }
 
-const allDevicesMapped = $derived(
+  const allDevicesMapped = $derived(recordedDevices.every((rd) => mappings.has(rd.name)));
-	recordedDevices.every(rd => mappings.has(rd.name))
-);
 </script>
 
 <Dialog.Root {open}>
@@ -91,7 +87,8 @@ const allDevicesMapped = $derived(
     <Dialog.Header>
       <Dialog.Title>Map Devices for Playback</Dialog.Title>
       <Dialog.Description>
-				Assign your connected devices to match the recorded devices. Only compatible devices are shown.
+        Assign your connected devices to match the recorded devices. Only compatible devices are
+        shown.
       </Dialog.Description>
     </Dialog.Header>
 
@@ -108,7 +105,9 @@ const allDevicesMapped = $derived(
             </div>
             <div class="flex flex-wrap gap-1">
               {#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">
+                <span
+                  class="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/20"
+                >
                   {capability}
                 </span>
               {/each}
@@ -126,7 +125,7 @@ const allDevicesMapped = $derived(
             {:else}
               <select
                 class="w-full px-3 py-2 rounded-md border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-								value={currentMapping?.id || ''}
+                value={currentMapping?.id || ""}
                 onchange={(e) => handleDeviceSelect(recordedDevice.name, e.currentTarget.value)}
               >
                 <option value="" disabled>Select device...</option>
@@ -143,16 +142,12 @@ const allDevicesMapped = $derived(
       {/each}
 
       {#if recordedDevices.length === 0}
-				<div class="text-center py-8 text-muted-foreground">
+        <div class="text-center py-8 text-muted-foreground">No devices in this recording</div>
-					No devices in this recording
-				</div>
       {/if}
     </div>
 
     <Dialog.Footer class="flex gap-2">
-			<Button variant="outline" onclick={onCancel} class="cursor-pointer">
+      <Button variant="outline" onclick={onCancel} class="cursor-pointer">Cancel</Button>
-				Cancel
-			</Button>
       <Button
         onclick={handleConfirm}
         disabled={!allDevicesMapped}

packages/frontend/src/routes/play/components/recording-save-dialog.svelte

@@ -13,11 +13,7 @@ interface Props {
     events: RecordedEvent[];
     deviceInfo: DeviceInfo[];
     duration: number;
-	onSave: (data: {
+    onSave: (data: { title: string; description: string; tags: string[] }) => Promise<void>;
-		title: string;
-		description: string;
-		tags: string[];
-	}) => Promise<void>;
     onCancel: () => void;
   }
 
@@ -70,23 +66,17 @@ function handleCancel() {
     <div class="space-y-6 py-4">
       <!-- Recording Stats -->
       <div class="grid grid-cols-3 gap-4">
-				<div
+        <div class="flex flex-col items-center p-4 rounded-lg bg-muted/30 border border-border/30">
-					class="flex flex-col items-center p-4 rounded-lg bg-muted/30 border border-border/30"
-				>
           <span class="icon-[ri--time-line] w-5 h-5 text-primary mb-2"></span>
           <span class="text-xs text-muted-foreground mb-1">Duration</span>
           <span class="font-semibold">{formatDuration(duration)}</span>
         </div>
-				<div
+        <div class="flex flex-col items-center p-4 rounded-lg bg-muted/30 border border-border/30">
-					class="flex flex-col items-center p-4 rounded-lg bg-muted/30 border border-border/30"
-				>
           <span class="icon-[ri--pulse-line] w-5 h-5 text-accent mb-2"></span>
           <span class="text-xs text-muted-foreground mb-1">Events</span>
           <span class="font-semibold">{events.length}</span>
         </div>
-				<div
+        <div class="flex flex-col items-center p-4 rounded-lg bg-muted/30 border border-border/30">
-					class="flex flex-col items-center p-4 rounded-lg bg-muted/30 border border-border/30"
-				>
           <span class="icon-[ri--gamepad-line] w-5 h-5 text-primary mb-2"></span>
           <span class="text-xs text-muted-foreground mb-1">Devices</span>
           <span class="font-semibold">{deviceInfo.length}</span>
@@ -97,9 +87,7 @@ function handleCancel() {
       <div class="space-y-2">
         <Label>Devices Used</Label>
         {#each deviceInfo as device (device.name)}
-					<div
+          <div class="flex items-center gap-2 text-sm bg-muted/20 rounded px-3 py-2">
-						class="flex items-center gap-2 text-sm bg-muted/20 rounded px-3 py-2"
-					>
             <span class="icon-[ri--rocket-line] w-4 h-4"></span>
             <span class="font-medium">{device.name}</span>
             <span class="text-muted-foreground text-xs">
@@ -146,12 +134,7 @@ function handleCancel() {
     </div>
 
     <Dialog.Footer>
-			<Button
+      <Button variant="outline" onclick={handleCancel} disabled={isSaving} class="cursor-pointer">
-				variant="outline"
-				onclick={handleCancel}
-				disabled={isSaving}
-				class="cursor-pointer"
-			>
         Cancel
       </Button>
       <Button

packages/frontend/src/routes/signup/+page.svelte

@@ -65,10 +65,7 @@ onMount(() => {
   });
 </script>
 
-<Meta
+<Meta title={$_("auth.signup.title")} description={$_("auth.signup.description")} />
-  title={$_('auth.signup.title')}
-  description={$_('auth.signup.description')}
-/>
 
 <div
   class="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/5 via-accent/5 to-background p-4 overflow-hidden"
@@ -78,40 +75,38 @@ onMount(() => {
   <div class="w-full max-w-md">
     <!-- Logo -->
     <div class="text-center mb-8">
-      <div
+      <div class="flex items-center justify-center gap-3 text-2xl font-bold mb-2">
-        class="flex items-center justify-center gap-3 text-2xl font-bold mb-2"
-      >
         <Logo />
       </div>
-      <p class="text-muted-foreground">{$_('auth.signup.welcome')}</p>
+      <p class="text-muted-foreground">{$_("auth.signup.welcome")}</p>
     </div>
 
     <Card
       class="bg-gradient-to-br from-card/85 via-card/90 to-card/80 backdrop-blur-xl shadow-2xl shadow-primary/20"
     >
       <CardHeader class="text-center">
-        <CardTitle class="text-2xl">{$_('auth.signup.title')}</CardTitle>
+        <CardTitle class="text-2xl">{$_("auth.signup.title")}</CardTitle>
-        <CardDescription>{$_('auth.signup.description')}</CardDescription>
+        <CardDescription>{$_("auth.signup.description")}</CardDescription>
       </CardHeader>
       <CardContent class="space-y-6">
         <form onsubmit={handleSubmit} class="space-y-4">
           <!-- Name Fields -->
           <div class="grid grid-cols-2 gap-4">
             <div class="space-y-2">
-              <Label for="firstName">{$_('auth.signup.first_name')}</Label>
+              <Label for="firstName">{$_("auth.signup.first_name")}</Label>
               <Input
                 id="firstName"
-                placeholder={$_('auth.signup.first_name_placeholder')}
+                placeholder={$_("auth.signup.first_name_placeholder")}
                 bind:value={firstName}
                 required
                 class="bg-background/50 border-primary/20 focus:border-primary"
               />
             </div>
             <div class="space-y-2">
-              <Label for="lastName">{$_('auth.signup.last_name')}</Label>
+              <Label for="lastName">{$_("auth.signup.last_name")}</Label>
               <Input
                 id="lastName"
-                placeholder={$_('auth.signup.last_name_placeholder')}
+                placeholder={$_("auth.signup.last_name_placeholder")}
                 bind:value={lastName}
                 required
                 class="bg-background/50 border-primary/20 focus:border-primary"
@@ -121,11 +116,11 @@ onMount(() => {
 
           <!-- Email -->
           <div class="space-y-2">
-            <Label for="email">{$_('auth.signup.email')}</Label>
+            <Label for="email">{$_("auth.signup.email")}</Label>
             <Input
               id="email"
               type="email"
-              placeholder={$_('auth.signup.email_placeholder')}
+              placeholder={$_("auth.signup.email_placeholder")}
               bind:value={email}
               required
               class="bg-background/50 border-primary/20 focus:border-primary"
@@ -134,12 +129,12 @@ onMount(() => {
 
           <!-- Password -->
           <div class="space-y-2">
-            <Label for="password">{$_('auth.signup.password')}</Label>
+            <Label for="password">{$_("auth.signup.password")}</Label>
             <div class="relative">
               <Input
                 id="password"
-                type={showPassword ? 'text' : 'password'}
+                type={showPassword ? "text" : "password"}
-                placeholder={$_('auth.signup.password_placeholder')}
+                placeholder={$_("auth.signup.password_placeholder")}
                 bind:value={password}
                 required
                 class="bg-background/50 border-primary/20 focus:border-primary pr-10"
@@ -160,14 +155,12 @@ onMount(() => {
 
           <!-- Confirm Password -->
           <div class="space-y-2">
-            <Label for="confirmPassword"
+            <Label for="confirmPassword">{$_("auth.signup.confirm_password")}</Label>
-              >{$_('auth.signup.confirm_password')}</Label
-            >
             <div class="relative">
               <Input
                 id="confirmPassword"
-                type={showConfirmPassword ? 'text' : 'password'}
+                type={showConfirmPassword ? "text" : "password"}
-                placeholder={$_('auth.signup.confirm_password_placeholder')}
+                placeholder={$_("auth.signup.confirm_password_placeholder")}
                 bind:value={confirmPassword}
                 required
                 class="bg-background/50 border-primary/20 focus:border-primary pr-10"
@@ -190,11 +183,11 @@ onMount(() => {
           <div class="flex items-start space-x-2">
             <Checkbox id="terms" bind:checked={agreeTerms} class="mt-1" />
             <Label for="terms" class="text-sm leading-relaxed">
-              {$_('auth.signup.terms_agreement', {
+              {$_("auth.signup.terms_agreement", {
                 values: {
-                  terms: $_('auth.signup.terms_of_service'),
+                  terms: $_("auth.signup.terms_of_service"),
-                  privacy: $_('auth.signup.privacy_policy')
+                  privacy: $_("auth.signup.privacy_policy"),
-                }
+                },
               })}
             </Label>
           </div>
@@ -203,8 +196,9 @@ onMount(() => {
             <div class="grid w-full max-w-xl items-start gap-4">
               <Alert.Root variant="destructive">
                 <Alert.Title class="items-center flex"
-                  ><span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"
+                  ><span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>{$_(
-                  ></span>{$_('auth.signup.error')}</Alert.Title
+                    "auth.signup.error",
+                  )}</Alert.Title
                 >
                 <Alert.Description>{error}</Alert.Description>
               </Alert.Root>
@@ -221,9 +215,9 @@ onMount(() => {
               <div
                 class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
               ></div>
-              {$_('auth.signup.creating_account')}
+              {$_("auth.signup.creating_account")}
             {:else}
-              {$_('auth.signup.create_account')}
+              {$_("auth.signup.create_account")}
             {/if}
           </Button>
         </form>
@@ -231,9 +225,9 @@ onMount(() => {
         <!-- Sign In Link -->
         <div class="text-center">
           <p class="text-sm text-muted-foreground">
-            {$_('auth.signup.have_account')}
+            {$_("auth.signup.have_account")}
             <a href="/login" class="text-primary hover:underline font-medium"
-              >{$_('auth.signup.sign_in_link')}</a
+              >{$_("auth.signup.sign_in_link")}</a
             >
           </p>
         </div>

packages/frontend/src/routes/sitemap.xml/+server.ts

@@ -4,13 +4,7 @@ import { getArticles, getModels, getVideos } from "$lib/services";
 export const GET = async () => {
   return await sitemap.response({
     origin: "https://sexy.pivoine.art",
-		excludeRoutePatterns: [
+    excludeRoutePatterns: ["^/signup/verify", "^/password/reset", "^/me", "^/play", "^/tags/.+"],
-			"^/signup/verify",
-			"^/password/reset",
-			"^/me",
-			"^/play",
-			"^/tags/.+",
-		],
     paramValues: {
       "/magazine/[slug]": (await getArticles(fetch)).map((a) => a.slug),
       "/models/[slug]": (await getModels(fetch)).map((a) => a.slug),

packages/frontend/src/routes/tags/[tag]/+page.svelte

@@ -3,12 +3,7 @@ import { _ } from "svelte-i18n";
   import { Button } from "$lib/components/ui/button";
   import { Card, CardContent } from "$lib/components/ui/card";
   import { Input } from "$lib/components/ui/input";
-import {
+  import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-} from "$lib/components/ui/select";
   import { getAssetUrl } from "$lib/directus";
   import Meta from "$lib/components/meta/meta.svelte";
 
@@ -32,10 +27,8 @@ const filteredItems = $derived(() => {
     return data.items
       .filter((item: any) => {
         const matchesSearch =
-				searchQuery === "" ||
+          searchQuery === "" || item.title.toLowerCase().includes(searchQuery.toLowerCase());
-				item.title.toLowerCase().includes(searchQuery.toLowerCase());
+        const matchesCategory = categoryFilter === "all" || item.category === categoryFilter;
-			const matchesCategory =
-				categoryFilter === "all" || item.category === categoryFilter;
         return matchesSearch && matchesCategory;
       })
       .sort((a, b) => {
@@ -52,8 +45,8 @@ const filteredItems = $derived(() => {
 </script>
 
 <Meta
-  title={$_('tags.title', { values: { tag: data.tag } })}
+  title={$_("tags.title", { values: { tag: data.tag } })}
-  description={$_('tags.description', { values: { tag: data.tag } })}
+  description={$_("tags.description", { values: { tag: data.tag } })}
 />
 
 <div
@@ -78,12 +71,12 @@ const filteredItems = $derived(() => {
         <h1
           class="text-5xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
         >
-          {$_('tags.title', { values: { tag: data.tag } })}
+          {$_("tags.title", { values: { tag: data.tag } })}
         </h1>
         <p
           class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
         >
-          {$_('tags.description', { values: { tag: data.tag } })}
+          {$_("tags.description", { values: { tag: data.tag } })}
         </p>
         <!-- Filters -->
         <div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
@@ -93,7 +86,7 @@ const filteredItems = $derived(() => {
               class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
             ></span>
             <Input
-              placeholder={$_('tags.search_placeholder')}
+              placeholder={$_("tags.search_placeholder")}
               bind:value={searchQuery}
               class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
             />
@@ -105,25 +98,19 @@ const filteredItems = $derived(() => {
               class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
             >
               <span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
-              {categoryFilter === 'all'
+              {categoryFilter === "all"
-                ? $_('tags.categories.all')
+                ? $_("tags.categories.all")
-                : categoryFilter === 'video'
+                : categoryFilter === "video"
-                  ? $_('tags.categories.video')
+                  ? $_("tags.categories.video")
-                  : categoryFilter === 'article'
+                  : categoryFilter === "article"
-                    ? $_('tags.categories.article')
+                    ? $_("tags.categories.article")
-                    : $_('tags.categories.model')}
+                    : $_("tags.categories.model")}
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all">{$_('tags.categories.all')}</SelectItem>
+              <SelectItem value="all">{$_("tags.categories.all")}</SelectItem>
-              <SelectItem value="video"
+              <SelectItem value="video">{$_("tags.categories.video")}</SelectItem>
-                >{$_('tags.categories.video')}</SelectItem
+              <SelectItem value="article">{$_("tags.categories.article")}</SelectItem>
-              >
+              <SelectItem value="model">{$_("tags.categories.model")}</SelectItem>
-              <SelectItem value="article"
-                >{$_('tags.categories.article')}</SelectItem
-              >
-              <SelectItem value="model"
-                >{$_('tags.categories.model')}</SelectItem
-              >
             </SelectContent>
           </Select>
         </div>
@@ -139,7 +126,7 @@ const filteredItems = $derived(() => {
         >
           <div class="relative">
             <img
-              src={getAssetUrl(item['image'] || item['avatar'], 'preview')}
+              src={getAssetUrl(item["image"] || item["avatar"], "preview")}
               alt={item.title}
               class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
             />
@@ -158,9 +145,7 @@ const filteredItems = $derived(() => {
           <CardContent class="p-6">
             <div class="flex items-start justify-between mb-3">
               <div>
-                <h3
+                <h3 class="font-semibold text-lg mb-1 group-hover:text-primary transition-colors">
-                  class="font-semibold text-lg mb-1 group-hover:text-primary transition-colors"
-                >
                   {item.title}
                 </h3>
                 <!-- <div
@@ -194,8 +179,8 @@ const filteredItems = $derived(() => {
                 size="sm"
                 class="flex-1 border-primary/20 hover:bg-primary/10"
                 href={getUrlForItem(item)}
-                >{$_('tags.view', {
+                >{$_("tags.view", {
-                  values: { category: item.category }
+                  values: { category: item.category },
                 })}</Button
               >
               <!-- <Button
@@ -211,16 +196,16 @@ const filteredItems = $derived(() => {
 
     {#if filteredItems().length === 0}
       <div class="text-center py-12">
-        <p class="text-muted-foreground text-lg">{$_('tags.no_results')}</p>
+        <p class="text-muted-foreground text-lg">{$_("tags.no_results")}</p>
         <Button
           variant="outline"
           onclick={() => {
-            searchQuery = '';
+            searchQuery = "";
-            categoryFilter = 'all';
+            categoryFilter = "all";
           }}
           class="mt-4"
         >
-          {$_('tags.clear_filters')}
+          {$_("tags.clear_filters")}
         </Button>
       </div>
     {/if}

packages/frontend/src/routes/users/[id]/+page.server.ts

@@ -6,17 +6,42 @@ import { getGraphQLClient } from "$lib/api";
 const USER_PROFILE_QUERY = gql`
   query UserProfile($id: String!) {
     userProfile(id: $id) {
-      id first_name last_name email description avatar date_created
+      id
+      first_name
+      last_name
+      email
+      description
+      avatar
+      date_created
     }
     userGamification(userId: $id) {
       stats {
-        user_id total_raw_points total_weighted_points
+        user_id
-        recordings_count playbacks_count comments_count achievements_count rank
+        total_raw_points
+        total_weighted_points
+        recordings_count
+        playbacks_count
+        comments_count
+        achievements_count
+        rank
       }
       achievements {
-        id code name description icon category date_unlocked progress required_count
+        id
+        code
+        name
+        description
+        icon
+        category
+        date_unlocked
+        progress
+        required_count
+      }
+      recent_points {
+        action
+        points
+        date_created
+        recording_id
       }
-      recent_points { action points date_created recording_id }
     }
   }
 `;

packages/frontend/src/routes/users/[id]/+page.svelte

@@ -30,16 +30,12 @@ let joinDate = $derived(
   image={data.user.avatar ? getAssetUrl(data.user.avatar, "thumbnail") : undefined}
 />
 
-<div
+<div class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5">
-	class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5"
->
   <PeonyBackground />
 
   <div class="container mx-auto px-4 py-8 relative z-10">
     <!-- Profile Card -->
-		<Card
+    <Card class="max-w-3xl mx-auto bg-card/90 backdrop-blur-sm border-border/50">
-			class="max-w-3xl mx-auto bg-card/90 backdrop-blur-sm border-border/50"
-		>
       <CardContent class="p-6 md:p-8">
         <!-- Header with Back Button -->
         <div class="flex items-center justify-between mb-6">
@@ -86,9 +82,7 @@ let joinDate = $derived(
           <div class="flex-1">
             <h1 class="text-3xl font-bold mb-2">{displayName}</h1>
 
-						<div
+            <div class="flex items-center gap-2 text-muted-foreground mb-4">
-							class="flex items-center gap-2 text-muted-foreground mb-4"
-						>
               <span class="icon-[ri--calendar-line] w-4 h-4"></span>
               <span
                 >{$_("profile.member_since", {
@@ -98,9 +92,7 @@ let joinDate = $derived(
             </div>
 
             {#if data.user.location}
-							<div
+              <div class="flex items-center gap-2 text-muted-foreground mb-4">
-								class="flex items-center gap-2 text-muted-foreground mb-4"
-							>
                 <span class="icon-[ri--map-pin-line] w-4 h-4"></span>
                 <span>{data.user.location}</span>
               </div>
@@ -113,9 +105,7 @@ let joinDate = $derived(
             {/if}
 
             <!-- Statistics -->
-						<div
+            <div class="grid grid-cols-2 gap-4 pt-4 border-t border-border/50">
-							class="grid grid-cols-2 gap-4 pt-4 border-t border-border/50"
-						>
               <div class="text-center">
                 <div class="text-2xl font-bold text-primary">
                   {data.stats.comments_count}

packages/frontend/src/routes/videos/+page.svelte

@@ -3,12 +3,7 @@ import { _ } from "svelte-i18n";
   import { Button } from "$lib/components/ui/button";
   import { Card, CardContent } from "$lib/components/ui/card";
   import { Input } from "$lib/components/ui/input";
-import {
+  import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-} from "$lib/components/ui/select";
   import { getAssetUrl } from "$lib/directus";
   import Meta from "$lib/components/meta/meta.svelte";
   import TimeAgo from "javascript-time-ago";
@@ -26,9 +21,7 @@ const { data } = $props();
   const filteredVideos = $derived(() => {
     return data.videos
       .filter((video) => {
-			const matchesSearch = video.title
+        const matchesSearch = video.title.toLowerCase().includes(searchQuery.toLowerCase());
-				.toLowerCase()
-				.includes(searchQuery.toLowerCase());
         //  ||
         // video.model.toLowerCase().includes(searchQuery.toLowerCase());
         const matchesCategory = categoryFilter === "all";
@@ -43,20 +36,17 @@ const filteredVideos = $derived(() => {
       })
       .sort((a, b) => {
         if (sortBy === "recent")
-				return (
+          return new Date(b.upload_date).getTime() - new Date(a.upload_date).getTime();
-					new Date(b.upload_date).getTime() - new Date(a.upload_date).getTime()
+        if (sortBy === "most_liked") return (b.likes_count || 0) - (a.likes_count || 0);
-				);
+        if (sortBy === "most_played") return (b.plays_count || 0) - (a.plays_count || 0);
-			if (sortBy === "most_liked")
+        if (sortBy === "duration")
-				return (b.likes_count || 0) - (a.likes_count || 0);
+          return (b.movie_file?.duration ?? 0) - (a.movie_file?.duration ?? 0);
-			if (sortBy === "most_played")
-				return (b.plays_count || 0) - (a.plays_count || 0);
-			if (sortBy === "duration") return (b.movie_file?.duration ?? 0) - (a.movie_file?.duration ?? 0);
         return a.title.localeCompare(b.title);
       });
   });
 </script>
 
-<Meta title={$_('videos.title')} description={$_('videos.description')} />
+<Meta title={$_("videos.title")} description={$_("videos.description")} />
 
 <div
   class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
@@ -83,12 +73,12 @@ const filteredVideos = $derived(() => {
         <h1
           class="text-5xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
         >
-          {$_('videos.title')}
+          {$_("videos.title")}
         </h1>
         <p
           class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
         >
-          {$_('videos.description')}
+          {$_("videos.description")}
         </p>
 
         <!-- Filters -->
@@ -99,7 +89,7 @@ const filteredVideos = $derived(() => {
               class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
             ></span>
             <Input
-              placeholder={$_('videos.search_placeholder')}
+              placeholder={$_("videos.search_placeholder")}
               bind:value={searchQuery}
               class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
             />
@@ -111,30 +101,22 @@ const filteredVideos = $derived(() => {
               class="w-full lg:w-48 bg-background/50 border-primary/20 focus:border-primary"
             >
               <span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
-              {categoryFilter === 'all'
+              {categoryFilter === "all"
-                ? $_('videos.categories.all')
+                ? $_("videos.categories.all")
-                : categoryFilter === 'romantic'
+                : categoryFilter === "romantic"
-                  ? $_('videos.categories.romantic')
+                  ? $_("videos.categories.romantic")
-                  : categoryFilter === 'artistic'
+                  : categoryFilter === "artistic"
-                    ? $_('videos.categories.artistic')
+                    ? $_("videos.categories.artistic")
-                    : categoryFilter === 'intimate'
+                    : categoryFilter === "intimate"
-                      ? $_('videos.categories.intimate')
+                      ? $_("videos.categories.intimate")
-                      : $_('videos.categories.performance')}
+                      : $_("videos.categories.performance")}
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all">{$_('videos.categories.all')}</SelectItem>
+              <SelectItem value="all">{$_("videos.categories.all")}</SelectItem>
-              <SelectItem value="romantic"
+              <SelectItem value="romantic">{$_("videos.categories.romantic")}</SelectItem>
-                >{$_('videos.categories.romantic')}</SelectItem
+              <SelectItem value="artistic">{$_("videos.categories.artistic")}</SelectItem>
-              >
+              <SelectItem value="intimate">{$_("videos.categories.intimate")}</SelectItem>
-              <SelectItem value="artistic"
+              <SelectItem value="performance">{$_("videos.categories.performance")}</SelectItem>
-                >{$_('videos.categories.artistic')}</SelectItem
-              >
-              <SelectItem value="intimate"
-                >{$_('videos.categories.intimate')}</SelectItem
-              >
-              <SelectItem value="performance"
-                >{$_('videos.categories.performance')}</SelectItem
-              >
             </SelectContent>
           </Select>
 
@@ -144,23 +126,19 @@ const filteredVideos = $derived(() => {
               class="w-full lg:w-48 bg-background/50 border-primary/20 focus:border-primary"
             >
               <span class="icon-[ri--timer-2-line] w-4 h-4 mr-2"></span>
-              {durationFilter === 'all'
+              {durationFilter === "all"
-                ? $_('videos.duration.all')
+                ? $_("videos.duration.all")
-                : durationFilter === 'short'
+                : durationFilter === "short"
-                  ? $_('videos.duration.short')
+                  ? $_("videos.duration.short")
-                  : durationFilter === 'medium'
+                  : durationFilter === "medium"
-                    ? $_('videos.duration.medium')
+                    ? $_("videos.duration.medium")
-                    : $_('videos.duration.long')}
+                    : $_("videos.duration.long")}
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all">{$_('videos.duration.all')}</SelectItem>
+              <SelectItem value="all">{$_("videos.duration.all")}</SelectItem>
-              <SelectItem value="short"
+              <SelectItem value="short">{$_("videos.duration.short")}</SelectItem>
-                >{$_('videos.duration.short')}</SelectItem
+              <SelectItem value="medium">{$_("videos.duration.medium")}</SelectItem>
-              >
+              <SelectItem value="long">{$_("videos.duration.long")}</SelectItem>
-              <SelectItem value="medium"
-                >{$_('videos.duration.medium')}</SelectItem
-              >
-              <SelectItem value="long">{$_('videos.duration.long')}</SelectItem>
             </SelectContent>
           </Select>
 
@@ -169,28 +147,22 @@ const filteredVideos = $derived(() => {
             <SelectTrigger
               class="w-full lg:w-48 bg-background/50 border-primary/20 focus:border-primary"
             >
-              {sortBy === 'recent'
+              {sortBy === "recent"
-                ? $_('videos.sort.recent')
+                ? $_("videos.sort.recent")
-                : sortBy === 'most_liked'
+                : sortBy === "most_liked"
-                  ? $_('videos.sort.most_liked')
+                  ? $_("videos.sort.most_liked")
-                  : sortBy === 'most_played'
+                  : sortBy === "most_played"
-                    ? $_('videos.sort.most_played')
+                    ? $_("videos.sort.most_played")
-                    : sortBy === 'duration'
+                    : sortBy === "duration"
-                      ? $_('videos.sort.duration')
+                      ? $_("videos.sort.duration")
-                      : $_('videos.sort.name')}
+                      : $_("videos.sort.name")}
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="recent">{$_('videos.sort.recent')}</SelectItem>
+              <SelectItem value="recent">{$_("videos.sort.recent")}</SelectItem>
-              <SelectItem value="most_liked"
+              <SelectItem value="most_liked">{$_("videos.sort.most_liked")}</SelectItem>
-                >{$_('videos.sort.most_liked')}</SelectItem
+              <SelectItem value="most_played">{$_("videos.sort.most_played")}</SelectItem>
-              >
+              <SelectItem value="duration">{$_("videos.sort.duration")}</SelectItem>
-              <SelectItem value="most_played"
+              <SelectItem value="name">{$_("videos.sort.name")}</SelectItem>
-                >{$_('videos.sort.most_played')}</SelectItem
-              >
-              <SelectItem value="duration"
-                >{$_('videos.sort.duration')}</SelectItem
-              >
-              <SelectItem value="name">{$_('videos.sort.name')}</SelectItem>
             </SelectContent>
           </Select>
         </div>
@@ -206,7 +178,7 @@ const filteredVideos = $derived(() => {
         >
           <div class="relative">
             <img
-              src={getAssetUrl(video.image, 'preview')}
+              src={getAssetUrl(video.image, "preview")}
               alt={video.title}
               class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
             />
@@ -228,7 +200,7 @@ const filteredVideos = $derived(() => {
               <div
                 class="absolute top-3 left-3 bg-gradient-to-r from-primary to-accent text-white text-xs px-2 py-1 rounded-full font-medium"
               >
-                {$_('videos.premium')}
+                {$_("videos.premium")}
               </div>
             {/if}
 
@@ -246,13 +218,12 @@ const filteredVideos = $derived(() => {
             <a
               class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
               href={`/videos/${video.slug}`}
-              aria-label={$_('videos.watch')}
+              aria-label={$_("videos.watch")}
             >
               <div
                 class="w-16 h-16 bg-primary/90 rounded-full flex flex-col items-center justify-center shadow-2xl"
               >
-                <span class="icon-[ri--play-large-fill] w-8 h-8 text-white"
+                <span class="icon-[ri--play-large-fill] w-8 h-8 text-white"></span>
-                ></span>
               </div>
             </a>
 
@@ -280,9 +251,7 @@ const filteredVideos = $derived(() => {
             </div>
 
             <!-- Stats -->
-            <div
+            <div class="flex items-center justify-between text-sm text-muted-foreground mb-4">
-              class="flex items-center justify-between text-sm text-muted-foreground mb-4"
-            >
               <!-- <div class="flex items-center gap-4">
                 <div class="flex items-center gap-1">
                   <EyeIcon class="w-4 h-4" />
@@ -309,7 +278,7 @@ const filteredVideos = $derived(() => {
                 href={`/videos/${video.slug}`}
               >
                 <span class="icon-[ri--play-large-fill] w-4 h-4 mr-2"></span>
-                {$_('videos.watch')}
+                {$_("videos.watch")}
               </Button>
               <!-- <Button
                 variant="ghost"
@@ -327,18 +296,18 @@ const filteredVideos = $derived(() => {
     {#if filteredVideos().length === 0}
       <div class="text-center py-12">
         <p class="text-muted-foreground text-lg mb-4">
-          {$_('videos.no_results')}
+          {$_("videos.no_results")}
         </p>
         <Button
           variant="outline"
           onclick={() => {
-            searchQuery = '';
+            searchQuery = "";
-            categoryFilter = 'all';
+            categoryFilter = "all";
-            durationFilter = 'all';
+            durationFilter = "all";
           }}
           class="border-primary/20 hover:bg-primary/10"
         >
-          {$_('videos.clear_filters')}
+          {$_("videos.clear_filters")}
         </Button>
       </div>
     {/if}

packages/frontend/src/routes/videos/[slug]/+page.server.ts

@@ -19,7 +19,7 @@ export async function load({ fetch, params, locals }) {
       video,
       comments,
       authStatus: locals.authStatus,
-			likeStatus
+      likeStatus,
     };
   } catch {
     error(404, "Video not found");

packages/frontend/src/routes/videos/[slug]/+page.svelte

@@ -15,7 +15,13 @@ import { AvatarFallback, AvatarImage } from "$lib/components/ui/avatar";
   import { formatVideoDuration, getUserInitials } from "$lib/utils";
   import { invalidateAll } from "$app/navigation";
   import { toast } from "svelte-sonner";
-import { createCommentForVideo, likeVideo, unlikeVideo, recordVideoPlay, updateVideoPlay } from "$lib/services";
+  import {
+    createCommentForVideo,
+    likeVideo,
+    unlikeVideo,
+    recordVideoPlay,
+    updateVideoPlay,
+  } from "$lib/services";
   import SharingPopupButton from "$lib/components/sharing-popup/sharing-popup-button.svelte";
 
   const { data } = $props();
@@ -145,7 +151,7 @@ let showPlayer = $state(false);
 <Meta
   title={data.video.title}
   description={data.video.description}
-  image={getAssetUrl(data.video.image, 'medium')!}
+  image={getAssetUrl(data.video.image, "medium")!}
 />
 
 <div
@@ -157,16 +163,14 @@ let showPlayer = $state(false);
       <!-- Main Video Section -->
       <div class="lg:col-span-2 space-y-6">
         <!-- Video Player -->
-        <Card
+        <Card class="p-0 overflow-hidden bg-gradient-to-br from-card to-card/50">
-          class="p-0 overflow-hidden bg-gradient-to-br from-card to-card/50"
-        >
           <div class="relative aspect-video bg-black">
             {#if showPlayer}
               <media-controller class="absolute inset-0 w-full h-full">
                 <video
                   slot="media"
                   src={getAssetUrl(data.video.movie)}
-                  poster={getAssetUrl(data.video.image, 'preview')}
+                  poster={getAssetUrl(data.video.image, "preview")}
                   autoplay
                   ontimeupdate={handleTimeUpdate}
                   class="block w-full"
@@ -184,13 +188,11 @@ let showPlayer = $state(false);
               </media-controller>
             {:else}
               <img
-                src={getAssetUrl(data.video.image, 'medium')}
+                src={getAssetUrl(data.video.image, "medium")}
                 alt={data.video.title}
                 class="w-full h-full object-cover"
               />
-              <div
+              <div class="absolute inset-0 bg-black/20 flex items-center justify-center">
-                class="absolute inset-0 bg-black/20 flex items-center justify-center"
-              >
                 <button
                   class="cursor-pointer w-20 h-20 bg-primary/90 hover:bg-primary rounded-full flex flex-col items-center justify-center transition-colors shadow-2xl"
                   aria-label={data.video.title}
@@ -199,8 +201,7 @@ let showPlayer = $state(false);
                   data-umami-event-id={data.video.movie}
                   onclick={() => (showPlayer = true)}
                 >
-                  <span class="icon-[ri--play-large-fill] w-10 h-10 text-white"
+                  <span class="icon-[ri--play-large-fill] w-10 h-10 text-white"></span>
-                  ></span>
                 </button>
               </div>
               <button
@@ -214,20 +215,21 @@ let showPlayer = $state(false);
                 <div
                   class="w-20 h-20 bg-primary/90 hover:bg-primary rounded-full flex flex-col items-center justify-center transition-colors shadow-2xl"
                 >
-                  <span class="icon-[ri--play-large-fill] w-10 h-10 text-white"
+                  <span class="icon-[ri--play-large-fill] w-10 h-10 text-white"></span>
-                  ></span>
                 </div>
               </button>
               <div
                 class="absolute bottom-4 left-4 bg-black/70 text-white px-3 py-1 rounded font-medium"
               >
-                {#if data.video.movie_file?.duration}{formatVideoDuration(data.video.movie_file.duration)}{/if}
+                {#if data.video.movie_file?.duration}{formatVideoDuration(
+                    data.video.movie_file.duration,
+                  )}{/if}
               </div>
               {#if data.video.premium}
                 <div
                   class="absolute top-4 left-4 bg-gradient-to-r from-primary to-accent text-white px-3 py-1 rounded-full font-medium"
                 >
-                  {$_('videos.premium')}
+                  {$_("videos.premium")}
                 </div>
               {/if}
             {/if}
@@ -240,13 +242,12 @@ let showPlayer = $state(false);
             <h1 class="text-2xl md:text-3xl font-bold mb-2">
               {data.video.title}
             </h1>
-            <div
+            <div class="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
-              class="flex flex-wrap items-center gap-4 text-sm text-muted-foreground"
-            >
               {#if data.video.plays_count}
                 <div class="flex items-center gap-1">
                   <span class="icon-[ri--play-fill] w-4 h-4"></span>
-                  {data.video.plays_count} {data.video.plays_count === 1 ? 'play' : 'plays'}
+                  {data.video.plays_count}
+                  {data.video.plays_count === 1 ? "play" : "plays"}
                 </div>
               {/if}
               <div class="flex items-center gap-1">
@@ -274,7 +275,7 @@ let showPlayer = $state(false);
                 title: data.video.title,
                 description: data.video.description,
                 url: page.url.href,
-                type: 'video' as const
+                type: "video" as const,
               }}
             />
             <!-- <Button
@@ -296,7 +297,7 @@ let showPlayer = $state(false);
                 <div class="flex items-center gap-4">
                   <a href={`/models/${model.slug}`}>
                     <img
-                      src={getAssetUrl(model.avatar as string, 'thumbnail')}
+                      src={getAssetUrl(model.avatar as string, "thumbnail")}
                       alt={model.artist_name}
                       class="w-12 h-12 rounded-full object-cover ring-2 ring-primary/20 hover:ring-primary/40 transition-all"
                     />
@@ -307,14 +308,8 @@ let showPlayer = $state(false);
                       class="font-semibold hover:text-primary transition-colors flex items-center gap-2"
                     >
                       {model.artist_name}
-                      <div
+                      <div class="w-4 h-4 bg-primary rounded-full flex items-center justify-center">
-                        class="w-4 h-4 bg-primary rounded-full flex items-center justify-center"
+                        <svg class="w-2.5 h-2.5 text-white" fill="currentColor" viewBox="0 0 20 20">
-                      >
-                        <svg
-                          class="w-2.5 h-2.5 text-white"
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                        >
                           <path
                             fill-rule="evenodd"
                             d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
@@ -359,10 +354,10 @@ let showPlayer = $state(false);
               <div class="flex items-center justify-between mb-4">
                 <h3 class="font-semibold flex items-center gap-2">
                   <span class="icon-[ri--message-line] w-5 h-5"></span>
-                  {$_('videos.comments', {
+                  {$_("videos.comments", {
                     values: {
-                      comments: data.comments.length
+                      comments: data.comments.length,
-                    }
+                    },
                   })}
                 </h3>
                 {#if data.comments.length > 0}
@@ -372,7 +367,7 @@ let showPlayer = $state(false);
                     class="cursor-pointer"
                     onclick={() => (showComments = !showComments)}
                   >
-                    {showComments ? $_('videos.hide') : $_('videos.show')}
+                    {showComments ? $_("videos.hide") : $_("videos.show")}
                   </Button>
                 {/if}
               </div>
@@ -380,11 +375,9 @@ let showPlayer = $state(false);
               <!-- Add Comment -->
               {#if data.authStatus.authenticated}
                 <div class="flex gap-3 mb-6">
-                  <Avatar
+                  <Avatar class="h-8 w-8 ring-2 ring-accent/20 transition-all duration-200">
-                    class="h-8 w-8 ring-2 ring-accent/20 transition-all duration-200"
-                  >
                     <AvatarImage
-                      src={getAssetUrl(data.authStatus.user!.avatar.id, 'mini')}
+                      src={getAssetUrl(data.authStatus.user!.avatar.id, "mini")}
                       alt={data.authStatus.user!.artist_name}
                     />
                     <AvatarFallback
@@ -396,7 +389,7 @@ let showPlayer = $state(false);
                   <form class="flex-1 space-y-4" onsubmit={handleComment}>
                     <div class="space-y-2">
                       <Textarea
-                        placeholder={$_('videos.add_comment_placeholder')}
+                        placeholder={$_("videos.add_comment_placeholder")}
                         bind:value={newComment}
                         class="bg-background/50 border-primary/20 focus:border-primary resize-none"
                         rows={2}
@@ -406,9 +399,8 @@ let showPlayer = $state(false);
                       <div class="grid w-full max-w-xl items-start gap-4">
                         <Alert.Root variant="destructive">
                           <Alert.Title class="items-center flex"
-                            ><span
+                            ><span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"
-                              class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"
+                            ></span>{$_("videos.error")}</Alert.Title
-                            ></span>{$_('videos.error')}</Alert.Title
                           >
                           <Alert.Description>{commentError}</Alert.Description>
                         </Alert.Root>
@@ -425,9 +417,9 @@ let showPlayer = $state(false);
                           <div
                             class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
                           ></div>
-                          {$_('videos.commenting')}
+                          {$_("videos.commenting")}
                         {:else}
-                          {$_('videos.comment')}
+                          {$_("videos.comment")}
                         {/if}
                       </Button>
                     </div>
@@ -445,10 +437,7 @@ let showPlayer = $state(false);
                           class="h-8 w-8 ring-2 ring-accent/20 hover:ring-primary/40 transition-all duration-200 cursor-pointer"
                         >
                           <AvatarImage
-                            src={getAssetUrl(
+                            src={getAssetUrl(comment.user_created.avatar as string, "mini")}
-                              comment.user_created.avatar as string,
-                              'mini'
-                            )}
                             alt={comment.user_created.artist_name}
                           />
                           <AvatarFallback
@@ -460,19 +449,17 @@ let showPlayer = $state(false);
                       </a>
                       <div class="flex-1">
                         <div class="flex items-center gap-2 mb-1">
-                          <a href="/users/{comment.user_created.id}" class="font-medium text-sm hover:text-primary transition-colors"
+                          <a
+                            href="/users/{comment.user_created.id}"
+                            class="font-medium text-sm hover:text-primary transition-colors"
                             >{comment.user_created.artist_name}</a
                           >
                           <span class="text-xs text-muted-foreground"
-                            >{timeAgo.format(
+                            >{timeAgo.format(new Date(comment.date_created))}</span
-                              new Date(comment.date_created)
-                            )}</span
                           >
                         </div>
                         <p class="text-sm mb-2">{comment.comment}</p>
-                        <div
+                        <div class="flex items-center gap-4 text-xs text-muted-foreground">
-                          class="flex items-center gap-4 text-xs text-muted-foreground"
-                        >
                           <!-- <button
                             class="flex items-center gap-1 hover:text-primary transition-colors"
                           >
@@ -543,8 +530,9 @@ let showPlayer = $state(false);
           variant="outline"
           href="/videos"
           class="w-full border-primary/20 hover:bg-primary/10"
-          ><span class="icon-[ri--arrow-left-long-line] w-4 h-4 mr-1"
+          ><span class="icon-[ri--arrow-left-long-line] w-4 h-4 mr-1"></span>{$_(
-          ></span>{$_('videos.back')}</Button
+            "videos.back",
+          )}</Button
         >
       </div>
     </div>

packages/frontend/vite.config.ts

@@ -2,7 +2,7 @@ import path from "path";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 import { sveltekit } from "@sveltejs/kit/vite";
-import wasm from 'vite-plugin-wasm';
+import wasm from "vite-plugin-wasm";
 
 export default defineConfig({
   plugins: [sveltekit(), tailwindcss(), wasm()],

pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       prettier:
         specifier: ^3.8.1
         version: 3.8.1
+      prettier-plugin-svelte:
+        specifier: ^3.5.1
+        version: 3.5.1(prettier@3.8.1)(svelte@5.53.7)
       typescript-eslint:
         specifier: ^8.56.1
         version: 8.56.1(eslint@10.0.2(jiti@2.6.1))(typescript@5.9.3)