Moving collection and wishlist to the protected route, adding sheet with list options for profile on avatar click, adding show and update user profile.

package.json

@@ -43,8 +43,8 @@
 		"postcss-preset-env": "^8.5.1",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
-		"prisma": "^5.1.0",
+		"prisma": "^5.1.1",
-		"sass": "^1.64.1",
+		"sass": "^1.64.2",
 		"svelte": "^4.1.2",
 		"svelte-check": "^3.4.6",
 		"svelte-preprocess": "^5.0.4",
@@ -55,7 +55,7 @@
 		"ts-node": "^10.9.1",
 		"tslib": "^2.6.1",
 		"typescript": "^5.1.6",
-		"vite": "^4.4.7",
+		"vite": "^4.4.8",
 		"vitest": "^0.25.3",
 		"zod": "^3.21.4"
 	},
@@ -69,11 +69,11 @@
 		"@fontsource/fira-mono": "^4.5.10",
 		"@iconify-icons/line-md": "^1.2.23",
 		"@iconify-icons/mdi": "^1.2.47",
-		"@lucia-auth/adapter-mysql": "^1.1.1",
+		"@lucia-auth/adapter-mysql": "^2.0.0",
 		"@lucia-auth/adapter-prisma": "^3.0.0",
 		"@lukeed/uuid": "^2.0.1",
 		"@melt-ui/svelte": "^0.27.3",
-		"@prisma/client": "5.1.0",
+		"@prisma/client": "5.1.1",
 		"@types/feather-icons": "^4.29.1",
 		"class-variance-authority": "^0.6.1",
 		"clsx": "^1.2.1",

pnpm-lock.yaml

@@ -18,11 +18,11 @@ dependencies:
     specifier: ^1.2.47
     version: 1.2.47
   '@lucia-auth/adapter-mysql':
-    specifier: ^1.1.1
+    specifier: ^2.0.0
-    version: 1.1.1(lucia-auth@1.8.0)
+    version: 2.0.0(lucia@2.0.0)
   '@lucia-auth/adapter-prisma':
     specifier: ^3.0.0
-    version: 3.0.0(@prisma/client@5.1.0)(lucia@2.0.0)
+    version: 3.0.0(@prisma/client@5.1.1)(lucia@2.0.0)
   '@lukeed/uuid':
     specifier: ^2.0.1
     version: 2.0.1
@@ -30,8 +30,8 @@ dependencies:
     specifier: ^0.27.3
     version: 0.27.3(svelte@4.1.2)
   '@prisma/client':
-    specifier: 5.1.0
+    specifier: 5.1.1
-    version: 5.1.0(prisma@5.1.0)
+    version: 5.1.1(prisma@5.1.1)
   '@types/feather-icons':
     specifier: ^4.29.1
     version: 4.29.1
@@ -105,7 +105,7 @@ devDependencies:
     version: 1.0.6(@sveltejs/kit@1.22.4)
   '@sveltejs/kit':
     specifier: ^1.22.4
-    version: 1.22.4(svelte@4.1.2)(vite@4.4.7)
+    version: 1.22.4(svelte@4.1.2)(vite@4.4.8)
   '@types/cookie':
     specifier: ^0.5.1
     version: 0.5.1
@@ -155,20 +155,20 @@ devDependencies:
     specifier: ^2.10.1
     version: 2.10.1(prettier@2.8.8)(svelte@4.1.2)
   prisma:
-    specifier: ^5.1.0
+    specifier: ^5.1.1
-    version: 5.1.0
+    version: 5.1.1
   sass:
-    specifier: ^1.64.1
+    specifier: ^1.64.2
-    version: 1.64.1
+    version: 1.64.2
   svelte:
     specifier: ^4.1.2
     version: 4.1.2
   svelte-check:
     specifier: ^3.4.6
-    version: 3.4.6(postcss-load-config@4.0.1)(postcss@8.4.27)(sass@1.64.1)(svelte@4.1.2)
+    version: 3.4.6(postcss-load-config@4.0.1)(postcss@8.4.27)(sass@1.64.2)(svelte@4.1.2)
   svelte-preprocess:
     specifier: ^5.0.4
-    version: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.27)(sass@1.64.1)(svelte@4.1.2)(typescript@5.1.6)
+    version: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.27)(sass@1.64.2)(svelte@4.1.2)(typescript@5.1.6)
   svelte-sequential-preprocessor:
     specifier: ^2.0.1
     version: 2.0.1
@@ -191,11 +191,11 @@ devDependencies:
     specifier: ^5.1.6
     version: 5.1.6
   vite:
-    specifier: ^4.4.7
+    specifier: ^4.4.8
-    version: 4.4.7(@types/node@18.17.1)(sass@1.64.1)
+    version: 4.4.8(@types/node@18.17.1)(sass@1.64.2)
   vitest:
     specifier: ^0.25.3
-    version: 0.25.8(sass@1.64.1)
+    version: 0.25.8(sass@1.64.2)
   zod:
     specifier: ^3.21.4
     version: 3.21.4
@@ -1152,11 +1152,11 @@ packages:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  /@lucia-auth/adapter-mysql@1.1.1(lucia-auth@1.8.0):
+  /@lucia-auth/adapter-mysql@2.0.0(lucia@2.0.0):
-    resolution: {integrity: sha512-br+/OBDNJ+eRc6RrZnnC20ef+2VEMrXFxNYvsbryPw64ito7vg40STblpENdjJF0o4R10mjWTO43wQ+56jyXLA==}
+    resolution: {integrity: sha512-8a4JZ3VjDyRu/mAop2hEt/jOJO2HXwWIAid6a4wGiR8wgnlyOws9brRc+/wxQHSOlWUlrWemrfDvXLs5mMtkeQ==}
     peerDependencies:
       '@planetscale/database': ^1.0.0
-      lucia-auth: ^1.4.0
+      lucia: ^2.0.0
       mysql2: ^3.0.0
     peerDependenciesMeta:
       '@planetscale/database':
@@ -1164,16 +1164,16 @@ packages:
       mysql2:
         optional: true
     dependencies:
-      lucia-auth: 1.8.0
+      lucia: 2.0.0
     dev: false
 
-  /@lucia-auth/adapter-prisma@3.0.0(@prisma/client@5.1.0)(lucia@2.0.0):
+  /@lucia-auth/adapter-prisma@3.0.0(@prisma/client@5.1.1)(lucia@2.0.0):
     resolution: {integrity: sha512-qrFA5IID4AulINQbLQLQPIXqE9+M3zjmN558VDhrS3Y7Fdn5dyObPbHijUWw7lGYgOrhxDox9UUG8oyZ3+D1MA==}
     peerDependencies:
       '@prisma/client': ^4.2.0 || ^5.0.0
       lucia: ^2.0.0
     dependencies:
-      '@prisma/client': 5.1.0(prisma@5.1.0)
+      '@prisma/client': 5.1.1(prisma@5.1.1)
       lucia: 2.0.0
     dev: false
 
@@ -1261,8 +1261,8 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
-  /@prisma/client@5.1.0(prisma@5.1.0):
+  /@prisma/client@5.1.1(prisma@5.1.1):
-    resolution: {integrity: sha512-aIxuXlH3p3Vy91buodQhYgAD9m0yuxJzpXMhc1ejQ/WN3pNNWzBA0iDcBObLq8DMdszcXmoLAk3hiRq/ZwBsOw==}
+    resolution: {integrity: sha512-fxcCeK5pMQGcgCqCrWsi+I2rpIbk0rAhdrN+ke7f34tIrgPwA68ensrpin+9+fZvuV2OtzHmuipwduSY6HswdA==}
     engines: {node: '>=16.13'}
     requiresBuild: true
     peerDependencies:
@@ -1271,16 +1271,16 @@ packages:
       prisma:
         optional: true
     dependencies:
-      '@prisma/engines-version': 5.1.0-28.a9b7003df90aa623086e4d6f4e43c72468e6339b
+      '@prisma/engines-version': 5.1.1-1.6a3747c37ff169c90047725a05a6ef02e32ac97e
-      prisma: 5.1.0
+      prisma: 5.1.1
     dev: false
 
-  /@prisma/engines-version@5.1.0-28.a9b7003df90aa623086e4d6f4e43c72468e6339b:
+  /@prisma/engines-version@5.1.1-1.6a3747c37ff169c90047725a05a6ef02e32ac97e:
-    resolution: {integrity: sha512-jTwE2oy1yjICmTfnCR0ASIpuMZXZ18sUzQXB7V0RMbrM9OlcmbUwXPuYhnxXuWN8XwRmujeIhsXs/Zeh+fjPOQ==}
+    resolution: {integrity: sha512-owZqbY/wucbr65bXJ/ljrHPgQU5xXTSkmcE/JcbqE1kusuAXV/TLN3/exmz21SZ5rJ7WDkyk70J2G/n68iogbQ==}
     dev: false
 
-  /@prisma/engines@5.1.0:
+  /@prisma/engines@5.1.1:
-    resolution: {integrity: sha512-HqaFsnPmZOdMWkPq6tT2eTVTQyaAXEDdKszcZ4yc7DGMBIYRP6j/zAJTtZUG9SsMV8FaucdL5vRyxY/p5Ni28g==}
+    resolution: {integrity: sha512-NV/4nVNWFZSJCCIA3HIFJbbDKO/NARc9ej0tX5S9k2EVbkrFJC4Xt9b0u4rNZWL4V+F5LAjvta8vzEUw0rw+HA==}
     requiresBuild: true
 
   /@rollup/pluginutils@4.2.1:
@@ -1296,7 +1296,7 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
     dependencies:
-      '@sveltejs/kit': 1.22.4(svelte@4.1.2)(vite@4.4.7)
+      '@sveltejs/kit': 1.22.4(svelte@4.1.2)(vite@4.4.8)
       import-meta-resolve: 2.2.0
     dev: true
 
@@ -1305,7 +1305,7 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
     dependencies:
-      '@sveltejs/kit': 1.22.4(svelte@4.1.2)(vite@4.4.7)
+      '@sveltejs/kit': 1.22.4(svelte@4.1.2)(vite@4.4.8)
       '@vercel/nft': 0.22.6
       esbuild: 0.16.8
     transitivePeerDependencies:
@@ -1313,7 +1313,7 @@ packages:
       - supports-color
     dev: true
 
-  /@sveltejs/kit@1.22.4(svelte@4.1.2)(vite@4.4.7):
+  /@sveltejs/kit@1.22.4(svelte@4.1.2)(vite@4.4.8):
     resolution: {integrity: sha512-Opkqw1QXk4Cc25b/heJP2D7mX+OUBFAq4MXKfET58svTTxdeiHFKzmnuRsSF3nmxESqrLjqPAgHpib+knNGzRw==}
     engines: {node: ^16.14 || >=18}
     hasBin: true
@@ -1322,7 +1322,7 @@ packages:
       svelte: ^3.54.0 || ^4.0.0-next.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@4.1.2)(vite@4.4.7)
+      '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@4.1.2)(vite@4.4.8)
       '@types/cookie': 0.5.1
       cookie: 0.5.0
       devalue: 4.3.1
@@ -1335,12 +1335,12 @@ packages:
       sirv: 2.0.2
       svelte: 4.1.2
       undici: 5.22.0
-      vite: 4.4.7(@types/node@18.17.1)(sass@1.64.1)
+      vite: 4.4.8(@types/node@18.17.1)(sass@1.64.2)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte-inspector@1.0.2(@sveltejs/vite-plugin-svelte@2.4.1)(svelte@4.1.2)(vite@4.4.7):
+  /@sveltejs/vite-plugin-svelte-inspector@1.0.2(@sveltejs/vite-plugin-svelte@2.4.1)(svelte@4.1.2)(vite@4.4.8):
     resolution: {integrity: sha512-Cy1dUMcYCnDVV/hPLXa43YZJ2jGKVW5rA0xuNL9dlmYhT0yoS1g7+FOFSRlgk0BXKk/Oc7grs+8BVA5Iz2fr8A==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
@@ -1348,30 +1348,30 @@ packages:
       svelte: ^3.54.0 || ^4.0.0-next.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@4.1.2)(vite@4.4.7)
+      '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@4.1.2)(vite@4.4.8)
       debug: 4.3.4
       svelte: 4.1.2
-      vite: 4.4.7(@types/node@18.17.1)(sass@1.64.1)
+      vite: 4.4.8(@types/node@18.17.1)(sass@1.64.2)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte@2.4.1(svelte@4.1.2)(vite@4.4.7):
+  /@sveltejs/vite-plugin-svelte@2.4.1(svelte@4.1.2)(vite@4.4.8):
     resolution: {integrity: sha512-bNNKvoRY89ptY7udeBSCmTdCVwkjmMcZ0j/z9J5MuedT8jPjq0zrknAo/jF1sToAza4NVaAgR9AkZoD9oJJmnA==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
       svelte: ^3.54.0 || ^4.0.0-next.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 1.0.2(@sveltejs/vite-plugin-svelte@2.4.1)(svelte@4.1.2)(vite@4.4.7)
+      '@sveltejs/vite-plugin-svelte-inspector': 1.0.2(@sveltejs/vite-plugin-svelte@2.4.1)(svelte@4.1.2)(vite@4.4.8)
       debug: 4.3.4
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.0
       svelte: 4.1.2
       svelte-hmr: 0.15.2(svelte@4.1.2)
-      vite: 4.4.7(@types/node@18.17.1)(sass@1.64.1)
+      vite: 4.4.8(@types/node@18.17.1)(sass@1.64.2)
-      vitefu: 0.2.4(vite@4.4.7)
+      vitefu: 0.2.4(vite@4.4.8)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2751,10 +2751,6 @@ packages:
       yallist: 4.0.0
     dev: true
 
-  /lucia-auth@1.8.0:
-    resolution: {integrity: sha512-zI8gT2AOpxTPIxYzToEdgoht+GOflrduZiHPsOEmg4/2pThOyCW3o3lXh+Uwh20tJ9QoXwQe9/Omn6PlUG6efw==}
-    dev: false
-
   /lucia@2.0.0:
     resolution: {integrity: sha512-WRBMoZIgTHH6y2bAEHZWgWcMH6tDsQ+wf45juUgmn3ycjipn/e6OGpWki4XSjEuRm50WXghH+2EF9LCjCHUsUw==}
     dev: false
@@ -3519,13 +3515,13 @@ packages:
     resolution: {integrity: sha512-db91Bf3pRGKDPz1lAqLFSJXeW13mulUJxhycysFpfXV5MIK7RgWWK2E5aPAa71s8TCzQUXxF5JOV42/iOs6QkA==}
     dev: false
 
-  /prisma@5.1.0:
+  /prisma@5.1.1:
-    resolution: {integrity: sha512-wkXvh+6wxk03G8qwpZMOed4Y3j+EQ+bMTlvbDZHeal6k1E8QuGKzRO7DRXlE1NV0WNgOAas8kwZqcLETQ2+BiQ==}
+    resolution: {integrity: sha512-WJFG/U7sMmcc6TjJTTifTfpI6Wjoh55xl4AzopVwAdyK68L9/ogNo8QQ2cxuUjJf/Wa82z/uhyh3wMzvRIBphg==}
     engines: {node: '>=16.13'}
     hasBin: true
     requiresBuild: true
     dependencies:
-      '@prisma/engines': 5.1.0
+      '@prisma/engines': 5.1.1
 
   /prismjs@1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
@@ -3658,8 +3654,8 @@ packages:
       rimraf: 2.7.1
     dev: true
 
-  /sass@1.64.1:
+  /sass@1.64.2:
-    resolution: {integrity: sha512-16rRACSOFEE8VN7SCgBu1MpYCyN7urj9At898tyzdXFhC+a+yOX5dXwAR7L8/IdPJ1NB8OYoXmD55DM30B2kEQ==}
+    resolution: {integrity: sha512-TnDlfc+CRnUAgLO9D8cQLFu/GIjJIzJCGkE7o4ekIGQOH7T3GetiRR/PsTWJUHhkzcSPrARkPI+gNWn5alCzDg==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
@@ -3822,7 +3818,7 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  /svelte-check@3.4.6(postcss-load-config@4.0.1)(postcss@8.4.27)(sass@1.64.1)(svelte@4.1.2):
+  /svelte-check@3.4.6(postcss-load-config@4.0.1)(postcss@8.4.27)(sass@1.64.2)(svelte@4.1.2):
     resolution: {integrity: sha512-OBlY8866Zh1zHQTkBMPS6psPi7o2umTUyj6JWm4SacnIHXpWFm658pG32m3dKvKFL49V4ntAkfFHKo4ztH07og==}
     hasBin: true
     peerDependencies:
@@ -3835,7 +3831,7 @@ packages:
       picocolors: 1.0.0
       sade: 1.8.1
       svelte: 4.1.2
-      svelte-preprocess: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.27)(sass@1.64.1)(svelte@4.1.2)(typescript@5.1.6)
+      svelte-preprocess: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.27)(sass@1.64.2)(svelte@4.1.2)(typescript@5.1.6)
       typescript: 5.1.6
     transitivePeerDependencies:
       - '@babel/core'
@@ -3907,7 +3903,7 @@ packages:
       svelte: 4.1.2
     dev: false
 
-  /svelte-preprocess@5.0.4(postcss-load-config@4.0.1)(postcss@8.4.27)(sass@1.64.1)(svelte@4.1.2)(typescript@5.1.6):
+  /svelte-preprocess@5.0.4(postcss-load-config@4.0.1)(postcss@8.4.27)(sass@1.64.2)(svelte@4.1.2)(typescript@5.1.6):
     resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
     engines: {node: '>= 14.10.0'}
     requiresBuild: true
@@ -3950,7 +3946,7 @@ packages:
       magic-string: 0.27.0
       postcss: 8.4.27
       postcss-load-config: 4.0.1(postcss@8.4.27)(ts-node@10.9.1)
-      sass: 1.64.1
+      sass: 1.64.2
       sorcery: 0.11.0
       strip-indent: 3.0.0
       svelte: 4.1.2
@@ -3997,7 +3993,7 @@ packages:
       '@sveltejs/kit': 1.x
       svelte: 3.x || 4.x
     dependencies:
-      '@sveltejs/kit': 1.22.4(svelte@4.1.2)(vite@4.4.7)
+      '@sveltejs/kit': 1.22.4(svelte@4.1.2)(vite@4.4.8)
       svelte: 4.1.2
     dev: true
 
@@ -4008,7 +4004,7 @@ packages:
       svelte: 3.x || 4.x
       zod: 3.x
     dependencies:
-      '@sveltejs/kit': 1.22.4(svelte@4.1.2)(vite@4.4.7)
+      '@sveltejs/kit': 1.22.4(svelte@4.1.2)(vite@4.4.8)
       svelte: 4.1.2
       zod: 3.21.4
     dev: true
@@ -4239,8 +4235,8 @@ packages:
   /v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
 
-  /vite@4.4.7(@types/node@18.17.1)(sass@1.64.1):
+  /vite@4.4.8(@types/node@18.17.1)(sass@1.64.2):
-    resolution: {integrity: sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==}
+    resolution: {integrity: sha512-LONawOUUjxQridNWGQlNizfKH89qPigK36XhMI7COMGztz8KNY0JHim7/xDd71CZwGT4HtSRgI7Hy+RlhG0Gvg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -4271,12 +4267,12 @@ packages:
       esbuild: 0.18.11
       postcss: 8.4.27
       rollup: 3.26.2
-      sass: 1.64.1
+      sass: 1.64.2
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
-  /vitefu@0.2.4(vite@4.4.7):
+  /vitefu@0.2.4(vite@4.4.8):
     resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
     peerDependencies:
       vite: ^3.0.0 || ^4.0.0
@@ -4284,10 +4280,10 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 4.4.7(@types/node@18.17.1)(sass@1.64.1)
+      vite: 4.4.8(@types/node@18.17.1)(sass@1.64.2)
     dev: true
 
-  /vitest@0.25.8(sass@1.64.1):
+  /vitest@0.25.8(sass@1.64.2):
     resolution: {integrity: sha512-X75TApG2wZTJn299E/TIYevr4E9/nBo1sUtZzn0Ci5oK8qnpZAZyhwg0qCeMSakGIWtc6oRwcQFyFfW14aOFWg==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
@@ -4322,7 +4318,7 @@ packages:
       tinybench: 2.3.1
       tinypool: 0.3.0
       tinyspy: 1.0.2
-      vite: 4.4.7(@types/node@18.17.1)(sass@1.64.1)
+      vite: 4.4.8(@types/node@18.17.1)(sass@1.64.2)
     transitivePeerDependencies:
       - less
       - lightningcss

src/lib/components/header/index.svelte

@@ -2,13 +2,19 @@
 	import { enhance } from '$app/forms';
 	import { LogOut } from 'lucide-svelte';
 	import Button from '$components/ui/button/Button.svelte';
-	 import { createDropdownMenu } from '@melt-ui/svelte'
-  const { menu, item, trigger, arrow, separator } = createDropdownMenu();
-	// import Profile from '../preferences/profile.svelte';
 	import logo from './bored-game.png';
 	import Avatar from '$components/ui/avatar/Avatar.svelte';
-	import AvatarImage from '$components/ui/avatar/AvatarImage.svelte';
 	import AvatarFallback from '$components/ui/avatar/AvatarFallback.svelte';
+	import {
+	Sheet,
+	SheetClose,
+	SheetContent,
+	SheetDescription,
+	SheetFooter,
+	SheetHeader,
+	SheetTitle,
+	SheetTrigger
+} from "$components/ui/sheet";
 
 	export let user: any;
 </script>
@@ -24,36 +30,55 @@
 		{#if user}
 			<a href="/collection" title="Go to your collection" data-sveltekit-preload-data>Collection</a>
 			<a href="/wishlist" title="Go to your wishlist" data-sveltekit-preload-data>Wishlist</a>
-			<button melt={$trigger}>
+			<Sheet>
-				<Avatar class="h-16 w-16 bg-neutral-100">
+				<SheetTrigger>
-					<AvatarFallback class="text-3xl font-medium text-magnum-700">
+					<Avatar class="h-16 w-16 bg-neutral-100">
-						{user?.username.slice(0, 2).toUpperCase() || '?'}
+						<AvatarFallback class="text-3xl font-medium text-magnum-700">
-					</AvatarFallback>
+							{user?.username.slice(0, 1).toUpperCase() || '?'}
-				</Avatar>
+						</AvatarFallback>
-			</button>
+					</Avatar>
-			<div melt={$menu}>
+				</SheetTrigger>
-				<div {...$item} use:item>
+				<SheetContent position="right" size="lg">
-					<a href="/profile">Profile</a>
+					<SheetHeader>
-				</div>
+						<SheetTitle>Menu</SheetTitle>
-				<div class="separator" melt={$separator} />
+					</SheetHeader>
-				<div {...$item} use:item={{
+					<div class="menu">
-					onSelect: (e) => {
+						<div class="item">
-						e.preventDefault();
+							<SheetClose>
-					}
+								<Button variant="link" href="/profile">View Profile</Button>
-				}}>
+							</SheetClose>
-					<form
+						</div>
-						use:enhance
+						<div class="item">
-						action="/auth/signout"
+							<SheetClose>
-						method="POST"
+								<Button variant="link" href="/collection">Your Collection</Button>
-					>
+							</SheetClose>
-						<Button type="submit">
+						</div>
-							<LogOut class="mr-2 h-4 w-4"/>
+						<div class="item">
-							Sign out
+							<SheetClose>
-						</Button>
+								<Button variant="link" href="/wishlist">Your Wishlist</Button>
-					</form>
+							</SheetClose>
-				</div>
+						</div>
-				<div melt={$arrow} />
+						<div class="separator" />
-			</div>
+						<div class="item">
+							<form
+								use:enhance
+								action="/auth/signout"
+								method="POST"
+							>
+								<Button type="submit">
+									<LogOut class="mr-2 h-4 w-4"/>
+									Sign out
+								</Button>
+							</form>
+						</div>
+					</div>
+					<SheetFooter>
+						<SheetClose>
+							<Button type="button">Close</Button>
+						</SheetClose>
+					</SheetFooter>
+				</SheetContent>
+			</Sheet>
 			<!-- <form
 				use:enhance
 				action="/auth/signout"
@@ -90,6 +115,14 @@
 		}
 	}
 
+	.menu {
+		display: grid;
+	}
+
+	.item {
+		margin-bottom: 0.2rem;
+	}
+
 	.corner {
 		width: 3em;
 		height: 3em;
@@ -135,4 +168,55 @@
 		text-decoration: underline;
 		color: var(--accent-color);
 	}
+
+	/* .menu {
+    @apply z-10 flex max-h-[300px] min-w-[220px] flex-col shadow-lg;
+    @apply rounded-md bg-slate-300 p-1 shadow-neutral-900/30 lg:max-h-none;
+    @apply ring-0 !important;
+  } */
+	/*
+  .subMenu {
+    @apply min-w-[220px] shadow-md shadow-neutral-900/30;
+  }*/
+  /* .item {
+    @apply relative h-6 select-none rounded-sm pl-6 pr-1;
+    @apply z-20 text-slate-700 outline-none;
+    @apply data-[highlighted]:bg-slate-200 data-[highlighted]:text-slate-700;
+    @apply data-[disabled]:text-neutral-300;
+    @apply flex items-center leading-none;
+    @apply ring-0 !important;
+  } */
+	/*
+  .trigger {
+    @apply inline-flex h-9 w-9 items-center justify-center rounded-full bg-white;
+    @apply text-magnum-700 transition-colors hover:bg-white/90;
+    @apply data-[highlighted]:ring-magnum-400 data-[highlighted]:ring-offset-2 !important;
+    @apply p-0 text-sm font-medium focus:ring data-[highlighted]:outline-none;
+  }
+  .check {
+    @apply absolute left-2 top-1/2 text-magnum-500;
+    translate: 0 calc(-50% + 1px);
+  }
+
+  .dot {
+    @apply h-[4.75px] w-[4.75px] rounded-full bg-magnum-700;
+  } */
+
+  .separator {
+    @apply m-[5px] h-[1px] bg-black;
+  }
+
+  /* .rightSlot {
+    @apply ml-auto pl-5;
+  }
+
+  .icon {
+    @apply h-[13px] w-[13px];
+  }
+  .check {
+    @apply absolute left-0 inline-flex w-6 items-center justify-center;
+  }
+  .text {
+    @apply pl-6 text-xs leading-6 text-neutral-600;
+  } */
 </style>

src/lib/components/preferences/profile.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-	// import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui';
 	import cogOutline from '@iconify-icons/mdi/cog-outline';
 	import Themes from './themes.svelte';
 	import GameCollection from './gameCollection.svelte';

src/lib/components/ui/sheet/SheetContent.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { VariantProps } from "class-variance-authority";
+	import { X } from "lucide-svelte";
+	import { Dialog as SheetPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+	import { sheetVariants } from ".";
+	import SheetOverlay from "./SheetOverlay.svelte";
+	import SheetPortal from "./SheetPortal.svelte";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let position: VariantProps<typeof sheetVariants>["position"] =
+		"right";
+	export let size: VariantProps<typeof sheetVariants>["size"] = "default";
+</script>
+
+<SheetPortal {position}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		class={cn(sheetVariants({ position, size }), className)}
+		{...$$restProps}
+	>
+		<slot />
+		<SheetPrimitive.Close
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+		>
+			<X class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPortal>

src/lib/components/ui/sheet/SheetDescription.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Description
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</SheetPrimitive.Description>

src/lib/components/ui/sheet/SheetFooter.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn(
+		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</div>

src/lib/components/ui/sheet/SheetHeader.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>

src/lib/components/ui/sheet/SheetOverlay.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Overlay
+	class={cn(
+		"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+		className
+	)}
+	{...$$restProps}
+/>

src/lib/components/ui/sheet/SheetPortal.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { VariantProps } from "class-variance-authority";
+	import { cva } from "class-variance-authority";
+	import { Dialog as SheetPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+
+	const portalVariants = cva("fixed inset-0 z-50 flex", {
+		variants: {
+			position: {
+				top: "items-start",
+				bottom: "items-end",
+				left: "justify-start",
+				right: "justify-end"
+			}
+		},
+		defaultVariants: { position: "right" }
+	});
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let position: VariantProps<typeof portalVariants>["position"] =
+		"right";
+</script>
+
+<SheetPrimitive.Portal class={cn(className)} {...$$restProps}>
+	<div class={portalVariants({ position })}>
+		<slot />
+	</div>
+</SheetPrimitive.Portal>

src/lib/components/ui/sheet/SheetTitle.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Title
+	class={cn("text-lg font-semibold text-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</SheetPrimitive.Title>

src/lib/components/ui/sheet/index.ts

@@ -0,0 +1,102 @@
+import { cva } from "class-variance-authority";
+import { Dialog as SheetPrimitive } from "radix-svelte";
+
+export { default as SheetContent } from "./SheetContent.svelte";
+export { default as SheetDescription } from "./SheetDescription.svelte";
+export { default as SheetFooter } from "./SheetFooter.svelte";
+export { default as SheetHeader } from "./SheetHeader.svelte";
+export { default as SheetOverlay } from "./SheetOverlay.svelte";
+export { default as SheetPortal } from "./SheetPortal.svelte";
+export { default as SheetTitle } from "./SheetTitle.svelte";
+
+export const Sheet = SheetPrimitive.Root;
+export const SheetTrigger = SheetPrimitive.Trigger;
+export const SheetClose = SheetPrimitive.Close;
+
+export const sheetVariants = cva(
+	"fixed z-50 scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border",
+	{
+		variants: {
+			position: {
+				top: "animate-in slide-in-from-top w-full duration-300",
+				bottom: "animate-in slide-in-from-bottom w-full duration-300",
+				left: "animate-in slide-in-from-left h-full duration-300",
+				right: "animate-in slide-in-from-right h-full duration-300"
+			},
+			size: {
+				content: "",
+				default: "",
+				sm: "",
+				lg: "",
+				xl: "",
+				full: ""
+			}
+		},
+		compoundVariants: [
+			{
+				position: ["top", "bottom"],
+				size: "content",
+				class: "max-h-screen"
+			},
+			{
+				position: ["top", "bottom"],
+				size: "default",
+				class: "h-1/3"
+			},
+			{
+				position: ["top", "bottom"],
+				size: "sm",
+				class: "h-1/4"
+			},
+			{
+				position: ["top", "bottom"],
+				size: "lg",
+				class: "h-1/2"
+			},
+			{
+				position: ["top", "bottom"],
+				size: "xl",
+				class: "h-5/6"
+			},
+			{
+				position: ["top", "bottom"],
+				size: "full",
+				class: "h-screen"
+			},
+			{
+				position: ["right", "left"],
+				size: "content",
+				class: "max-w-screen"
+			},
+			{
+				position: ["right", "left"],
+				size: "default",
+				class: "w-1/3"
+			},
+			{
+				position: ["right", "left"],
+				size: "sm",
+				class: "w-1/4"
+			},
+			{
+				position: ["right", "left"],
+				size: "lg",
+				class: "w-1/2"
+			},
+			{
+				position: ["right", "left"],
+				size: "xl",
+				class: "w-5/6"
+			},
+			{
+				position: ["right", "left"],
+				size: "full",
+				class: "w-screen"
+			}
+		],
+		defaultVariants: {
+			position: "right",
+			size: "default"
+		}
+	}
+);

src/routes/(protected)/profile/+page.server.ts

@@ -0,0 +1,88 @@
+import { fail, redirect } from '@sveltejs/kit';
+import { message, setError, superValidate } from 'sveltekit-superforms/server';
+import { userSchema } from '$lib/config/zod-schemas';
+import { auth } from '$lib/server/lucia.js';
+import { LuciaError } from 'lucia';
+// import prisma from '$lib/prisma.js';
+
+const profileSchema = userSchema.pick({
+	firstName: true,
+	lastName: true,
+	email: true,
+	username: true
+});
+
+export const load = async (event) => {
+	const form = await superValidate(event, profileSchema);
+	const session = await event.locals.auth.validate();
+
+	if (!session) {
+		throw redirect(302, '/auth/signin');
+	}
+
+	const { user } = session;
+
+	form.data = {
+		firstName: user.firstName,
+		lastName: user.lastName,
+		email: user.email,
+		username: user.username
+	};
+	return {
+		form
+	};
+};
+
+export const actions = {
+	default: async (event) => {
+		const form = await superValidate(event, profileSchema);
+
+		if (!form.valid) {
+			return fail(400, {
+				form
+			});
+		}
+
+		try {
+			console.log('updating profile');
+			const session = await event.locals.auth.validate();
+
+			if (!session) {
+				throw redirect(302, '/auth/signin');
+			}
+
+			const user = session.user;
+
+			auth.updateUserAttributes(user.userId, {
+				firstName: form.data.firstName,
+				lastName: form.data.lastName,
+				email: form.data.email,
+				username: form.data.username
+			});
+
+			if (user.email !== form.data.email) {
+				// auth.update
+				// await prisma.key.update({
+				// 	where: {
+				// 		id: 'emailpassword:' + user.email
+				// 	},
+				// 	data: {
+				// 		id: 'emailpassword:' + form.data.email
+				// 	}
+				// });
+				// auth.updateUserAttributes(user.user_id, {
+				// 	receiveEmail: false
+				// });
+			}
+		} catch (e) {
+			if (e instanceof LuciaError && e.message === `AUTH_INVALID_USER_ID`) {
+				// invalid user id
+				console.error(e);
+			}
+			return setError(form, 'There was a problem updating your profile.');
+		}
+
+		console.log('profile updated successfully');
+		return message(form, 'Profile updated successfully.');
+	}
+};

src/routes/(protected)/profile/+page.svelte

@@ -3,17 +3,21 @@
 	//import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';
 	import { userSchema } from '$lib/config/zod-schemas';
 	import { AlertTriangle } from 'lucide-svelte';
+	import Label from '$components/ui/label/Label.svelte';
+	import Input from '$components/ui/input/Input.svelte';
+	import Button from '$components/ui/button/Button.svelte';
 	export let data;
 
-	const signUpSchema = userSchema.pick({
+	const profileSchema = userSchema.pick({
 		firstName: true,
 		lastName: true,
-		email: true
+		email: true,
+		username: true
 	});
 
 	const { form, errors, enhance, delayed, message } = superForm(data.form, {
 		taintedMessage: null,
-		validators: signUpSchema,
+		validators: profileSchema,
 		delayMs: 0
 	});
 </script>
@@ -30,79 +34,41 @@
 			</div>
 		</aside>
 	{/if}
-	{#if $errors._errors}
-		<aside class="alert variant-filled-error mt-6">
-			<!-- Icon -->
-			<div><AlertTriangle size="42" /></div>
-			<!-- Message -->
-			<div class="alert-message">
-				<h3 class="h3">Sign In Problem</h3>
-				<p>{$errors._errors}</p>
-			</div>
-		</aside>
-	{/if}
 	<div class="mt-6">
-		<label class="label">
+		<Label for="username">Username</Label>
-			<span class="">First Name</span>
+		<Input type="text" id="username" name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
-			<input
+		{#if $errors.username}
-				id="firstName"
+			<small>{$errors.username}</small>
-				name="firstName"
+		{/if}
-				type="text"
-				placeholder="First Name"
-				autocomplete="given-name"
-				data-invalid={$errors.firstName}
-				bind:value={$form.firstName}
-				class="input"
-				class:input-error={$errors.firstName}
-			/>
-			{#if $errors.firstName}
-				<small>{$errors.firstName}</small>
-			{/if}
-		</label>
 	</div>
 	<div class="mt-6">
-		<label class="label">
+		<Label for="firstName">First Name</Label>
-			<span class="">Last Name</span>
+		<Input type="text" id="firstName" name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
-			<input
+		{#if $errors.firstName}
-				id="lastName"
+			<small>{$errors.firstName}</small>
-				name="lastName"
+		{/if}
-				type="text"
-				placeholder="Last Name"
-				autocomplete="family-name"
-				data-invalid={$errors.lastName}
-				bind:value={$form.lastName}
-				class="input"
-				class:input-error={$errors.lastName}
-			/>
-			{#if $errors.lastName}
-				<small>{$errors.lastName}</small>
-			{/if}
-		</label>
 	</div>
 	<div class="mt-6">
-		<label class="label">
+		<Label for="lastName">Last Name</Label>
-			<span class="">Email address</span>
+		<Input type="text" id="lastName" name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
-			<input
+		{#if $errors.lastName}
-				id="email"
+			<small>{$errors.lastName}</small>
-				name="email"
+		{/if}
-				type="email"
-				placeholder="Email address"
-				autocomplete="email"
-				data-invalid={$errors.email}
-				bind:value={$form.email}
-				class="input"
-				class:input-error={$errors.email}
-			/>
-			{#if $errors.email}
-				<small>{$errors.email}</small>
-			{/if}
-		</label>
 	</div>
 	<div class="mt-6">
-		<a href="/auth/password/reset">Change Password</a>
+		<Label for="email">Email address</Label>
+		<Input type="email" id="email" name="email" placeholder="Email Address" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
+		{#if $errors.email}
+			<small>{$errors.email}</small>
+		{/if}
+	</div>
+	<div class="mt-6">
+		<Button variant="link" href="/auth/password/reset">Change Password</Button>
+		<!-- <a href="/auth/password/reset">Change Password</a> -->
 	</div>
 
 	<div class="mt-6">
+		<Button type="submit" class="w-full">Update Profile</Button>
 		<!-- <button type="submit" class="btn variant-filled-primary w-full"
 			>{#if $delayed}<ConicGradient stops={conicStops} spin width="w-6" />{:else}Update Profile{/if}</button
 		> -->

src/routes/auth/signin/+page.svelte

@@ -50,7 +50,7 @@
 			<Label for="username">Username</Label>
 			<Input type="text" id="username" name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
 			<Label for="password">Password</Label>
-			<Input type="password" id="password" name="password" placeholder="Password" autocomplete="new-password" data-invalid={$errors.password} bind:value={$form.password} />
+			<Input type="password" id="password" name="password" placeholder="Password" autocomplete="password" data-invalid={$errors.password} bind:value={$form.password} />
 			<Button type="submit">Sign In</Button>
 		</div>
 	</form>

src/routes/auth/signout/+page.server.ts

@@ -3,6 +3,7 @@ import { redirect } from '@sveltejs/kit';
 
 export const actions = {
 	default: async ({ locals }) => {
+		console.log('Signing out user');
 		const session = await locals.auth.validate();
 		if (!session) {
 			throw redirect(302, '/auth/signin');