top bar

src/components/dashboard/TitleBar.tsx

@@ -1,9 +1,41 @@
 import { component$ } from "@builder.io/qwik";
+import { useNanostore$ } from "~/hooks/nanostores";
+import { userInfo } from "~/lib/stores";
+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, |?",
+    ]
+
+    const greeting = greetings[Math.floor(Math.random() * greetings.length)];
+    const user = useNanostore$<StereoUser>(userInfo);
+
+    const splits = greeting.split("|");
+    
     return (
-        <div class="bg-blue-500">
+        <div class="py-4 rounded-lg">
-            <p>whats on the agenda today, @hexlocation?</p>
+            <p class="font-medium text-4xl text-stereo/45">
+                {splits[0]}
+                <span class="text-stereo">
+                    @{user.value?.username || "..."}
+                </span>
+                {splits[1]}
+            </p>
         </div>
     )
 })

src/lib/stores.ts

@@ -3,4 +3,10 @@ import { StereoFile, StereoUser } from "./types";
 
 export const areFilesLoaded = atom<boolean>(false);
 export const dashboardFiles = atom<StereoFile[]>([]);
-export const userInfo = atom<StereoUser>({} as StereoUser);
+export const userInfo = atom<StereoUser>({
+    id: "1",
+    username: "user",
+    blacklisted: false,
+    email: "user@example.com",
+    created_at: Date.now().toString(),
+});

src/routes/dashboard/index.tsx

@@ -26,11 +26,11 @@ export default component$(() => {
 	});
 
 	return (
-		<>
+		<div class="flex flex-col w-full h-screen p-8 bg-gradient-to-b from-stereo/20 to-transparent">
 			<TitleBar />
 			<Files files={files} loaded={loaded} />
 			<OSBar />
-		</>
+		</div>
 	);
 });
 

src/routes/layout.tsx

@@ -11,7 +11,6 @@ export default component$(() => {
 
 	useOnDocument("DOMContentLoaded", $(async () => {
 		info.value = await api.me()
-		console.log(info.value);
 
 		AOS.init({
 			once: true,