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

2025-09-08 17:40:22 +00:00 · 2023-08-04 16:40:22 -07:00 · 2023-08-04 16:40:22 -07:00 · c4a141a1ff
commit c4a141a1ff
parent 49b7ad0d6f
20 changed files with 538 additions and 170 deletions
--- a/package.json
+++ b/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",
-		"sass": "^1.64.1",
+		"prisma": "^5.1.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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -18,11 +18,11 @@ dependencies:
    specifier: ^1.2.47
    version: 1.2.47
  '@lucia-auth/adapter-mysql':
-    specifier: ^1.1.1
-    version: 1.1.1(lucia-auth@1.8.0)
+    specifier: ^2.0.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
-    version: 5.1.0(prisma@5.1.0)
+    specifier: 5.1.1
+    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
-    version: 5.1.0
+    specifier: ^5.1.1
+    version: 5.1.1
  sass:
-    specifier: ^1.64.1
-    version: 1.64.1
+    specifier: ^1.64.2
+    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
-    version: 4.4.7(@types/node@18.17.1)(sass@1.64.1)
+    specifier: ^4.4.8
+    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):
-    resolution: {integrity: sha512-br+/OBDNJ+eRc6RrZnnC20ef+2VEMrXFxNYvsbryPw64ito7vg40STblpENdjJF0o4R10mjWTO43wQ+56jyXLA==}
+  /@lucia-auth/adapter-mysql@2.0.0(lucia@2.0.0):
+    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):
-    resolution: {integrity: sha512-aIxuXlH3p3Vy91buodQhYgAD9m0yuxJzpXMhc1ejQ/WN3pNNWzBA0iDcBObLq8DMdszcXmoLAk3hiRq/ZwBsOw==}
+  /@prisma/client@5.1.1(prisma@5.1.1):
+    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: 5.1.0
+      '@prisma/engines-version': 5.1.1-1.6a3747c37ff169c90047725a05a6ef02e32ac97e
+      prisma: 5.1.1
    dev: false

-  /@prisma/engines-version@5.1.0-28.a9b7003df90aa623086e4d6f4e43c72468e6339b:
-    resolution: {integrity: sha512-jTwE2oy1yjICmTfnCR0ASIpuMZXZ18sUzQXB7V0RMbrM9OlcmbUwXPuYhnxXuWN8XwRmujeIhsXs/Zeh+fjPOQ==}
+  /@prisma/engines-version@5.1.1-1.6a3747c37ff169c90047725a05a6ef02e32ac97e:
+    resolution: {integrity: sha512-owZqbY/wucbr65bXJ/ljrHPgQU5xXTSkmcE/JcbqE1kusuAXV/TLN3/exmz21SZ5rJ7WDkyk70J2G/n68iogbQ==}
    dev: false

-  /@prisma/engines@5.1.0:
-    resolution: {integrity: sha512-HqaFsnPmZOdMWkPq6tT2eTVTQyaAXEDdKszcZ4yc7DGMBIYRP6j/zAJTtZUG9SsMV8FaucdL5vRyxY/p5Ni28g==}
+  /@prisma/engines@5.1.1:
+    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)
-      vitefu: 0.2.4(vite@4.4.7)
+      vite: 4.4.8(@types/node@18.17.1)(sass@1.64.2)
+      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:
-    resolution: {integrity: sha512-wkXvh+6wxk03G8qwpZMOed4Y3j+EQ+bMTlvbDZHeal6k1E8QuGKzRO7DRXlE1NV0WNgOAas8kwZqcLETQ2+BiQ==}
+  /prisma@5.1.1:
+    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:
-    resolution: {integrity: sha512-16rRACSOFEE8VN7SCgBu1MpYCyN7urj9At898tyzdXFhC+a+yOX5dXwAR7L8/IdPJ1NB8OYoXmD55DM30B2kEQ==}
+  /sass@1.64.2:
+    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):
-    resolution: {integrity: sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==}
+  /vite@4.4.8(@types/node@18.17.1)(sass@1.64.2):
+    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
--- a/src/lib/components/header/index.svelte
+++ b/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}>
-				<Avatar class="h-16 w-16 bg-neutral-100">
-					<AvatarFallback class="text-3xl font-medium text-magnum-700">
-						{user?.username.slice(0, 2).toUpperCase() || '?'}
-					</AvatarFallback>
-				</Avatar>
-			</button>
-			<div melt={$menu}>
-				<div {...$item} use:item>
-					<a href="/profile">Profile</a>
-				</div>
-				<div class="separator" melt={$separator} />
-				<div {...$item} use:item={{
-					onSelect: (e) => {
-						e.preventDefault();
-					}
-				}}>
-					<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 melt={$arrow} />
-			</div>
+			<Sheet>
+				<SheetTrigger>
+					<Avatar class="h-16 w-16 bg-neutral-100">
+						<AvatarFallback class="text-3xl font-medium text-magnum-700">
+							{user?.username.slice(0, 1).toUpperCase() || '?'}
+						</AvatarFallback>
+					</Avatar>
+				</SheetTrigger>
+				<SheetContent position="right" size="lg">
+					<SheetHeader>
+						<SheetTitle>Menu</SheetTitle>
+					</SheetHeader>
+					<div class="menu">
+						<div class="item">
+							<SheetClose>
+								<Button variant="link" href="/profile">View Profile</Button>
+							</SheetClose>
+						</div>
+						<div class="item">
+							<SheetClose>
+								<Button variant="link" href="/collection">Your Collection</Button>
+							</SheetClose>
+						</div>
+						<div class="item">
+							<SheetClose>
+								<Button variant="link" href="/wishlist">Your Wishlist</Button>
+							</SheetClose>
+						</div>
+						<div class="separator" />
+						<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>
--- a/src/lib/components/preferences/profile.svelte
+++ b/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';
--- a/src/lib/components/ui/sheet/SheetContent.svelte
+++ b/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>
--- a/src/lib/components/ui/sheet/SheetDescription.svelte
+++ b/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>
--- a/src/lib/components/ui/sheet/SheetFooter.svelte
+++ b/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>
--- a/src/lib/components/ui/sheet/SheetHeader.svelte
+++ b/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>
--- a/src/lib/components/ui/sheet/SheetOverlay.svelte
+++ b/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}
+/>
--- a/src/lib/components/ui/sheet/SheetPortal.svelte
+++ b/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>
--- a/src/lib/components/ui/sheet/SheetTitle.svelte
+++ b/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>
--- a/src/lib/components/ui/sheet/index.ts
+++ b/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"
+		}
+	}
+);
--- a/src/routes/(protected)/collection/+page.server.ts
+++ b/src/routes/(protected)/collection/+page.server.ts
--- a/src/routes/(protected)/collection/+page.svelte
+++ b/src/routes/(protected)/collection/+page.svelte
--- a/src/routes/(protected)/profile/+page.server.ts
+++ b/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.');
+	}
+};
--- a/src/routes/(protected)/profile/+page.svelte
+++ b/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">
-			<span class="">First Name</span>
-			<input
-				id="firstName"
-				name="firstName"
-				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>
+		<Label for="username">Username</Label>
+		<Input type="text" id="username" name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
+		{#if $errors.username}
+			<small>{$errors.username}</small>
+		{/if}
 	</div>
 	<div class="mt-6">
-		<label class="label">
-			<span class="">Last Name</span>
-			<input
-				id="lastName"
-				name="lastName"
-				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>
+		<Label for="firstName">First Name</Label>
+		<Input type="text" id="firstName" name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
+		{#if $errors.firstName}
+			<small>{$errors.firstName}</small>
+		{/if}
 	</div>
 	<div class="mt-6">
-		<label class="label">
-			<span class="">Email address</span>
-			<input
-				id="email"
-				name="email"
-				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>
+		<Label for="lastName">Last Name</Label>
+		<Input type="text" id="lastName" name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
+		{#if $errors.lastName}
+			<small>{$errors.lastName}</small>
+		{/if}
 	</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
 		> -->
--- a/src/routes/(protected)/wishlist/+page.server.ts
+++ b/src/routes/(protected)/wishlist/+page.server.ts
--- a/src/routes/(protected)/wishlist/+page.svelte
+++ b/src/routes/(protected)/wishlist/+page.svelte
--- a/src/routes/auth/signin/+page.svelte
+++ b/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>
--- a/src/routes/auth/signout/+page.server.ts
+++ b/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');