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 1/4] 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 (
-

current plan: stereo free

+

current plan: stereo pro+

+

storage used: 3.8 / 15 GB

+

upgrade your plan for more features

); }); @@ -31,6 +33,14 @@ const PrivacyAndSecurity = component$(() => { ); }); +const DangerZone = component$(() => { + return ( +
+

delete your account and data here

+
+ ); +}); + export default component$(() => { const open = useNanostore$(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" > -
+

settings

{categories.value.map((category, i) => (
(selectedCategory.value = i)} > @@ -101,7 +112,7 @@ export default component$(() => { ))}
-
+

{categories.value[selectedCategory.value].name}

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" && (
-

{categories.value[selectedCategory.value].name}

+

{categories.value[selectedCategory.value].name}