add description to settings pages

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);
@@ -49,9 +59,26 @@ export default component$(() => {
     });
 
     const categories = useSignal([
-        { name: "storage & plan", component: StorageAndPlan },
-        { name: "api & integrations" , component: Integrations },
-        { name: "privacy & security" , component: PrivacyAndSecurity }
+        {
+            name: "storage & plan",
+            description: "manage your storage and plan details",
+            component: StorageAndPlan
+        },
+        {
+            name: "api & integrations",
+            description: "manage your api keys and integrations",
+            component: Integrations
+        },
+        {
+            name: "privacy & security",
+            description: "manage your privacy settings and security options",
+            component: PrivacyAndSecurity
+        },
+        {
+            name: "danger zone",
+            description: "delete your account and data",
+            component: DangerZone
+        }
     ])
 
     const selectedCategory = useSignal(0);
@@ -81,28 +108,28 @@ 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)}
                             >
                                 <h2 class="text-lg">{category.name}</h2>
-                                <p class="text-sm text-white/25">description</p>
+                                <p class="text-sm text-white/25">{category.description}</p>
                             </div>
                         ))}
                     </div>
                 </div>
-                <div class="flex flex-col flex-3/4 text-lg">
-                    <h1 class="text-2xl mb-4">{categories.value[selectedCategory.value].name}</h1>
+                <div class="flex flex-col flex-3/4 text-lg overflow-clip">
+                    <h1 class="text-2xl mb-2">{categories.value[selectedCategory.value].name}</h1>
                     <SelectedComponent.value />
                 </div>
             </div>

src/components/dashboard/TitleBar.tsx

@@ -5,27 +5,42 @@ import { StereoUser } from "~/lib/types";
 
 export default component$(() => {
     const greetings = [
-        "what's on the agenda today, |?",
-        "what's on your mind, |?",
-        "what's the plan, |?",
-        "ready to rock, |?",
-        "what's brewing, |?",
-        "what's the latest, |?",
-        "how's your day going, |?",
-        "need some inspiration, |?",
-        "let's make some noise, |!",
-        "welcome back, |!",
-        "good to see you, |!",
-        "what are we making today, |?",
-        "time to make some magic, |!",
-        "let's get creative, |?",
-        "what's the vibe today, |?",
+        "what's on the agenda today, <username>?",
+        "what's on your mind, <username>?",
+        "what's the plan, <username>?",
+        "ready to rock, <username>?",
+        "what's brewing, <username>?",
+        "what's the latest, <username>?",
+        "how's your day going, <username>?",
+        "need some inspiration, <username>?",
+        "let's make some noise, <username>!",
+        "welcome back, <username>!",
+        "good to see you, <username>!",
+        "what are we making today, <username>?",
+        "time to make some magic, <username>!",
+        "let's get creative, <username>!",
+        "what's the vibe today, <username>?",
+        "let's create something awesome, <username>!",
+        "what's the next big thing, <username>?",
+        "let's turn ideas into reality, <username>!",
+        "let's see your next masterpiece, <username>!",
+        "let's make some art, <username>!",
+        "what's the next hit, <username>?",
+        "let's make some music, <username>!",
+        "let's make some waves, <username>!",
+        "what brilliance awaits, <username>?",
+        "ready to brainstorm, <username>?",
+        "let's bring ideas to life, <username>!",
+        "don't get any ideas, <username>...",
+        "let's try this again, <username>!",
+        "let's get this party started, <username>!",
+        "let's make something unforgettable, <username>!",
     ]
 
     const greeting = greetings[Math.floor(Math.random() * greetings.length)];
     const user = useNanostore$<StereoUser>(userInfo);
 
-    const splits = greeting.split("|");
+    const splits = greeting.split("<username>");
 
     useTask$(({ track }) => {
         track(() => user.value);

src/routes/dashboard/index.tsx

@@ -1,8 +1,8 @@
 import { component$, Signal, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik";
 import { routeLoader$, type DocumentHead } from "@builder.io/qwik-city";
-import OSBar from "~/components/dashboard/OSBar";
+import Actionbar from "~/components/dashboard/Actionbar";
 import Settings from "~/components/dashboard/Settings";
-import TitleBar from "~/components/dashboard/TitleBar";
+import Titlebar from "~/components/dashboard/Titlebar";
 // import Dropzone from "~/components/Dropzone";
 import { useNanostore$ } from "~/hooks/nanostores";
 import { api } from "~/lib/api";
@@ -30,9 +30,9 @@ export default component$(() => {
 		<>
 			<Settings />
 			<div class="flex flex-col w-full h-screen p-8 gap-6 bg-gradient-to-b from-stereo/20 to-transparent justify-self-end">
-				<TitleBar />
+				<Titlebar />
 				<Files files={files} loaded={loaded} />
-				<OSBar />
+				<Actionbar />
 			</div>
 		</>
 	);
@@ -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} />
 		))}