From c0563b844a326a46ba111321d8035c82fae0a5cc Mon Sep 17 00:00:00 2001
From: grngxd <36968271+grngxd@users.noreply.github.com>
Date: Tue, 29 Jul 2025 23:02:40 +0100
Subject: [PATCH] new masonry layout for dashboard

---
 src/components/dashboard/Settings.tsx | 27 +++++++++++++++++++--------
 src/routes/dashboard/index.tsx        | 12 ++++++------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/components/dashboard/Settings.tsx b/src/components/dashboard/Settings.tsx
index d7526f6..d8cefa3 100644
--- a/src/components/dashboard/Settings.tsx
+++ b/src/components/dashboard/Settings.tsx
@@ -10,7 +10,9 @@ import { isSettingsOpen } from "~/lib/stores";
 const StorageAndPlan = component$(() => {
     return (
         <div>
-            <p>current plan: stereo free</p>
+            <p>current plan: stereo pro+</p>
+            <p>storage used: 3.8 / 15 GB</p>
+            <p>upgrade your plan for more features</p>
         </div>
     );
 });
@@ -31,6 +33,14 @@ const PrivacyAndSecurity = component$(() => {
     );
 });
 
+const DangerZone = component$(() => {
+    return (
+        <div>
+            <p>delete your account and data here</p>
+        </div>
+    );
+});
+
 
 export default component$(() => {
     const open = useNanostore$<boolean>(isSettingsOpen);
@@ -50,8 +60,9 @@ export default component$(() => {
 
     const categories = useSignal([
         { name: "storage & plan", component: StorageAndPlan },
-        { name: "api & integrations" , component: Integrations },
-        { name: "privacy & security" , component: PrivacyAndSecurity }
+        { name: "api & integrations", component: Integrations },
+        { name: "privacy & security", component: PrivacyAndSecurity },
+        { name: "danger zone", component: DangerZone }
     ])
 
     const selectedCategory = useSignal(0);
@@ -81,17 +92,17 @@ export default component$(() => {
                 onClick$={e => e.stopPropagation()}
                 class="flex gap-8 bg-black/30 bg-gradient-to-t from-stereo/20 to-transparent p-8 rounded-3xl shadow-lg w-4/7 h-4/7"
             >
-                <div class="flex flex-col justify-between flex-1/4 border-r-2 border-white/25">
+                <div class="flex flex-col justify-between flex-1/4 border-r-2 border-white/15">
                     <h1 class="text-2xl">settings</h1>
                     <div>
                         {categories.value.map((category, i) => (
                             <div
                                 key={category.name}
                                 class={[
-                                    "group py-2 px-3 transition-colors cursor-pointer rounded-l-xl",
+                                    "group py-2 px-3 transition-colors cursor-pointer rounded-l-xl select-none",
                                     selectedCategory.value === i
-                                        ? "bg-white/20 text-white"
-                                        : "hover:bg-white/15 text-white/75 hover:text-white"
+                                        ? "bg-white/10 text-white"
+                                        : "hover:bg-white/5 text-white/75 hover:text-white"
                                 ].join(" ")}
                                 onClick$={() => (selectedCategory.value = i)}
                             >
@@ -101,7 +112,7 @@ export default component$(() => {
                         ))}
                     </div>
                 </div>
-                <div class="flex flex-col flex-3/4 text-lg">
+                <div class="flex flex-col flex-3/4 text-lg overflow-clip">
                     <h1 class="text-2xl mb-4">{categories.value[selectedCategory.value].name}</h1>
                     <SelectedComponent.value />
                 </div>
diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx
index 0be2621..7ec3ff3 100644
--- a/src/routes/dashboard/index.tsx
+++ b/src/routes/dashboard/index.tsx
@@ -68,7 +68,7 @@ const Files = component$<{
 			  width={400}
 			  src={`/api/${file.ID}`}
 			  alt={file.Name}
-			  class="w-full h-60 object-cover flex-grow hover:scale-105 transition-all duration-300"
+			  class="w-full min-h-30 object-cover flex-grow hover:scale-105 transition-all duration-300"
 			/>
 		  )}
 		  {fileType.value === "video" && (
@@ -76,18 +76,18 @@ const Files = component$<{
 			  width={400}
 			  src={`/api/${file.ID}`}
 			  controls
-			  class="w-full h-60 object-cover flex-grow hover:scale-105 transition-all duration-300"
+			  class="w-full min-h-30 object-cover flex-grow hover:scale-105 transition-all duration-300"
 			/>
 		  )}
 		  {fileType.value === "audio" && (
 			<audio
 			  src={`/api/${file.ID}`}
 			  controls
-			  class="w-full h-60 object-cover flex-grow hover:scale-105 transition-all duration-300"
+			  class="w-full min-h-30 object-cover flex-grow hover:scale-105 transition-all duration-300"
 			/>
 		  )}
 		  {fileType.value === "other" && (
-			<div class="w-full h-60 flex items-center justify-center bg-gray-200 text-gray-500">
+			<div class="w-full min-h-30 flex items-center justify-center bg-gray-200 text-gray-500">
 			  <p>Unsupported file type</p>
 			</div>
 		  )}
@@ -116,8 +116,8 @@ const Files = component$<{
 	);
   });
   return (
-	<div class="px-2 mb-6 flex flex-col w-full max-h-full overflow-y-auto overflow-x-hidden mask-clip-content rounded-3xl">
-	  <div class="w-full h-full columns-1 md:columns-2 lg:columns-4 gap-2">
+	<div class="px-2 mb-6 flex-grow overflow-y-auto mask-clip-content rounded-3xl">
+	  <div class="w-full columns-1 md:columns-2 lg:columns-4 gap-2 space-y-2">
 		{files.value.map((file) => (
 		  <File key={file.ID} file={file} />
 		))}