feat: implementing experience page (#718)

* feat: add color scheme toggle
* feat: colorScheme stored in UserSettings model
* feat: add stories
* fix: AnimatePresence exit not working

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

server/src/database/migrations/20230718070849_alter_table_user_and_add_table_user_settings/migration.sql

@@ -0,0 +1,19 @@
+-- Adding 'settingsId' to 'users' table without NOT NULL constraint initially
+ALTER TABLE "users" ADD COLUMN "settingsId" TEXT;
+
+-- Creating 'user_settings' table
+CREATE TYPE "ColorScheme" AS ENUM ('Light', 'Dark', 'System');
+CREATE TABLE "user_settings" (
+    "id" TEXT NOT NULL,
+    "colorScheme" "ColorScheme" NOT NULL DEFAULT 'System',
+    "locale" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "user_settings_pkey" PRIMARY KEY ("id")
+);
+
+-- Applying constraints and indexes
+CREATE UNIQUE INDEX "users_settingsId_key" ON "users"("settingsId");
+ALTER TABLE "users" ADD CONSTRAINT "users_settingsId_fkey" FOREIGN KEY ("settingsId") REFERENCES "user_settings"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+

server/src/database/schema.prisma

@@ -172,17 +172,42 @@ model User {
   refreshTokens   RefreshToken[]
   comments        Comment[]
 
+  authoredCommentThreads CommentThread[] @relation(name: "authoredCommentThreads")
+  assignedCommentThreads CommentThread[] @relation(name: "assignedCommentThreads")
+  settings               UserSettings    @relation(fields: [settingsId], references: [id])
+  settingsId             String          @unique
+
   /// @TypeGraphQL.omit(input: true, output: true)
   deletedAt DateTime?
 
-  createdAt              DateTime        @default(now())
-  updatedAt              DateTime        @updatedAt
-  authoredCommentThreads CommentThread[] @relation(name: "authoredCommentThreads")
-  assignedCommentThreads CommentThread[] @relation(name: "assignedCommentThreads")
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
 
   @@map("users")
 }
 
+enum ColorScheme {
+  Light
+  Dark
+  System
+}
+
+model UserSettings {
+  id          String      @id @default(uuid())
+  /// @Validator.IsString()
+  /// @Validator.IsOptional()
+  colorScheme ColorScheme @default(System)
+  /// @Validator.IsString()
+  locale      String
+
+  user User?
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@map("user_settings")
+}
+
 /// @TypeGraphQL.omit(input: true)
 model Workspace {
   /// @Validator.IsString()

server/src/database/seeds/users.ts

@@ -8,9 +8,14 @@ export const seedUsers = async (prisma: PrismaClient) => {
       firstName: 'Tim',
       lastName: 'Apple',
       email: 'tim@apple.dev',
+      locale: 'en',
       passwordHash:
         '$2b$10$66d.6DuQExxnrfI9rMqOg.U1XIYpagr6Lv05uoWLYbYmtK0HDIvS6', // Applecar2025
-      locale: 'en',
+      settings: {
+        create: {
+          locale: 'en',
+        },
+      },
       avatarUrl: null,
       workspaceMember: {
         connectOrCreate: {
@@ -34,6 +39,11 @@ export const seedUsers = async (prisma: PrismaClient) => {
       lastName: 'Ive',
       email: 'jony.ive@apple.dev',
       locale: 'en',
+      settings: {
+        create: {
+          locale: 'en',
+        },
+      },
       avatarUrl: null,
       workspaceMember: {
         create: {
@@ -53,6 +63,11 @@ export const seedUsers = async (prisma: PrismaClient) => {
       lastName: 'Schiler',
       email: 'phil.schiler@apple.dev',
       locale: 'en',
+      settings: {
+        create: {
+          locale: 'en',
+        },
+      },
       avatarUrl: null,
       workspaceMember: {
         create: {
@@ -72,6 +87,11 @@ export const seedUsers = async (prisma: PrismaClient) => {
       lastName: 'Bochet',
       email: 'charles@twenty.dev',
       locale: 'en',
+      settings: {
+        create: {
+          locale: 'en',
+        },
+      },
       workspaceMember: {
         create: {
           id: 'twenty-dev-7ed9d213-1c25-4d02-bf35-6aeccf7oa419',