changes

.gitignore

@@ -133,7 +133,7 @@ dist
 
 .DS_Store
 next-env.d.ts
-/app/generated/prisma
+/prisma/generated/prisma
 
 # SQLite Database
 *.db

app/api/auth/me/route.ts

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { jwtVerify } from 'jose';
+import { prisma } from '@/lib/prisma';
 
 const JWT_SECRET = new TextEncoder().encode(
   process.env.JWT_SECRET || 'your-secret-key-at-least-32-chars-long'
@@ -14,7 +15,23 @@ export async function GET(request: NextRequest) {
 
   try {
     const { payload } = await jwtVerify(token, JWT_SECRET);
-    return NextResponse.json({ user: payload }, { status: 200 });
+    const userId = payload.userId as string;
+
+    // Fetch fresh user data from database to get current settings
+    const user = await prisma.user.findUnique({
+      where: { id: userId },
+      select: {
+        id: true,
+        username: true,
+        accentColor: true,
+      },
+    });
+
+    if (!user) {
+      return NextResponse.json({ user: null }, { status: 200 });
+    }
+
+    return NextResponse.json({ user }, { status: 200 });
   } catch (error) {
     return NextResponse.json({ user: null }, { status: 200 });
   }

app/api/user/settings/route.ts

@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { jwtVerify } from 'jose';
+import { prisma } from '@/lib/prisma';
+
+const JWT_SECRET = new TextEncoder().encode(
+  process.env.JWT_SECRET || 'your-secret-key-at-least-32-chars-long'
+);
+
+export async function PATCH(request: NextRequest) {
+  const token = request.cookies.get('token')?.value;
+
+  if (!token) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  try {
+    const { payload } = await jwtVerify(token, JWT_SECRET);
+    const userId = payload.userId as string;
+    const body = await request.json();
+
+    const { accentColor } = body;
+
+    if (accentColor !== undefined && typeof accentColor !== 'string') {
+      return NextResponse.json({ error: 'Invalid accentColor' }, { status: 400 });
+    }
+
+    const updateData: { accentColor?: string } = {};
+
+    if (accentColor !== undefined) {
+      updateData.accentColor = accentColor;
+    }
+
+    const updatedUser = await prisma.user.update({
+      where: { id: userId },
+      data: updateData,
+      select: {
+        id: true,
+        username: true,
+        accentColor: true,
+      },
+    });
+
+    return NextResponse.json(updatedUser, { status: 200 });
+  } catch (error) {
+    console.error('Update user settings error:', error);
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

components/DynamicThemeProvider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 import { createTheme, MantineProvider } from '@mantine/core';
 
 interface ThemeContextType {
@@ -18,6 +18,24 @@ export const useThemeContext = () => useContext(ThemeContext);
 export function DynamicThemeProvider({ children }: { children: React.ReactNode }) {
   const [primaryColor, setPrimaryColor] = useState('blue');
 
+  // Load user's accent color preference on mount
+  useEffect(() => {
+    const fetchUserAccentColor = async () => {
+      try {
+        const res = await fetch('/api/auth/me');
+        const data = await res.json();
+        if (data.user?.accentColor) {
+          setPrimaryColor(data.user.accentColor);
+        }
+      } catch (error) {
+        // Silently fail - use default color
+        console.error('Failed to fetch user accent color:', error);
+      }
+    };
+
+    fetchUserAccentColor();
+  }, []);
+
   const theme = createTheme({
     primaryColor,
   });

components/Settings/SettingsModal.tsx

@@ -52,6 +52,7 @@ const POPULAR_MODELS = [
 interface User {
   id: string;
   username: string;
+  accentColor?: string;
 }
 
 interface SettingsModalProps {
@@ -206,6 +207,24 @@ export function SettingsModal({
     setUser(null);
   };
 
+  const handleAccentColorChange = async (color: string) => {
+    // Update local state immediately for responsiveness
+    setPrimaryColor(color);
+
+    // If user is logged in, persist to database
+    if (user) {
+      try {
+        await fetch('/api/user/settings', {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ accentColor: color }),
+        });
+      } catch (e) {
+        console.error('Failed to save accent color:', e);
+      }
+    }
+  };
+
   const colors = Object.keys(theme.colors).filter(
     (color) => color !== 'dark' && color !== 'gray' && color !== 'white' && color !== 'black'
   );
@@ -290,7 +309,7 @@ export function SettingsModal({
                       key={color}
                       component="button"
                       color={theme.colors[color][6]}
-                      onClick={() => setPrimaryColor(color)}
+                      onClick={() => handleAccentColorChange(color)}
                       style={{ color: '#fff', cursor: 'pointer' }}
                       withShadow
                     >

eslint.config.mjs

@@ -6,7 +6,7 @@ import tseslint from 'typescript-eslint';
 export default defineConfig(
   tseslint.configs.recommended,
   ...mantine,
-  { ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}', '.next'] },
+  { ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}', '.next', 'prisma/generated/**'] },
   {
     files: ['**/*.story.tsx'],
     rules: { 'no-console': 'off' },

lib/prisma.ts

@@ -1,11 +1,16 @@
-import { PrismaClient } from '@prisma/client';
+import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3';
+import { PrismaClient } from '@/prisma/generated/prisma/client';
+
+const adapter = new PrismaBetterSqlite3({
+  url: process.env.DATABASE_URL || 'file:./prisma/dev.db',
+});
 
 const globalForPrisma = global as unknown as { prisma: PrismaClient };
 
 export const prisma =
   globalForPrisma.prisma ||
   new PrismaClient({
-    log: ['query'],
+    adapter,
   });
 
 if (process.env.NODE_ENV !== 'production') {

package.json

@@ -2,6 +2,7 @@
   "name": "mantine-next-template",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -23,13 +24,14 @@
     "@mantine/core": "^8.3.12",
     "@mantine/hooks": "^8.3.12",
     "@next/bundle-analyzer": "^16.0.0",
-    "@prisma/client": "^5.10.2",
+    "@prisma/adapter-better-sqlite3": "^7.2.0",
+    "@prisma/client": "^7.2.0",
     "@tabler/icons-react": "^3.35.0",
     "bcryptjs": "^3.0.3",
+    "dotenv": "^17.2.3",
     "jose": "^6.1.3",
     "next": "16.1.1",
     "ollama": "^0.6.3",
-    "prisma": "^5.10.2",
     "react": "19.2.3",
     "react-dom": "19.2.3"
   },
@@ -62,6 +64,7 @@
     "postcss-preset-mantine": "1.18.0",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.6.2",
+    "prisma": "^7.2.0",
     "storybook": "^10.0.0",
     "stylelint": "^16.25.0",
     "stylelint-config-standard-scss": "^16.0.0",

prisma.config.ts

@@ -0,0 +1,13 @@
+import 'dotenv/config';
+
+import { defineConfig, env } from 'prisma/config';
+
+export default defineConfig({
+  schema: 'prisma/schema.prisma',
+  migrations: {
+    path: 'prisma/migrations',
+  },
+  datasource: {
+    url: env('DATABASE_URL'),
+  },
+});

prisma/migrations/20260114185502_add_user_accent_color/migration.sql

@@ -0,0 +1,14 @@
+-- RedefineTables
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_User" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "username" TEXT NOT NULL,
+    "password" TEXT NOT NULL,
+    "accentColor" TEXT NOT NULL DEFAULT 'blue'
+);
+INSERT INTO "new_User" ("id", "password", "username") SELECT "id", "password", "username" FROM "User";
+DROP TABLE "User";
+ALTER TABLE "new_User" RENAME TO "User";
+CREATE UNIQUE INDEX "User_username_key" ON "User"("username");
+PRAGMA foreign_key_check;
+PRAGMA foreign_keys=ON;

prisma/migrations/migration_lock.toml

@@ -1,3 +1,3 @@
 # Please do not edit this file manually
-# It should be added in your version-control system (e.g., Git)
-provider = "sqlite"
+# It should be added in your version-control system (i.e. Git)
+provider = "sqlite"

prisma/schema.prisma

@@ -2,19 +2,20 @@
 // learn more about it in the docs: https://pris.ly/d/prisma-schema
 
 generator client {
-  provider = "prisma-client-js"
+  provider = "prisma-client"
+  output   = "./generated/prisma"
 }
 
 datasource db {
   provider = "sqlite"
-  url      = env("DATABASE_URL")
 }
 
 model User {
-  id       String @id @default(cuid())
-  username String @unique
-  password String
-  chats    Chat[]
+  id          String  @id @default(cuid())
+  username    String  @unique
+  password    String
+  accentColor String  @default("blue")
+  chats       Chat[]
 }
 
 model Chat {