stereo.cat/frontend
2
1
Fork 0
Code Issues 4 Pull requests Projects 1 Releases Packages Wiki Activity Actions

refactor: replace OSBar with Actionbar and update TitleBar to Titlebar with more personalized greetings

Browse source
This commit is contained in:
grngxd 2025-07-29 23:08:18 +01:00
parent c0563b844a
commit f25e096063
3 changed files with 35 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

0
src/components/dashboard/OSBar.tsx → src/components/dashboard/Actionbar.tsx
View file

47
src/components/dashboard/TitleBar.tsx
View file

@ -5,27 +5,42 @@ import { StereoUser } from "~/lib/types";
export default component$(() => { export default component$(() => {
const greetings = [ const greetings = [
"what's on the agenda today, |?", "what's on the agenda today, <username>?",
"what's on your mind, |?", "what's on your mind, <username>?",
"what's the plan, |?", "what's the plan, <username>?",
"ready to rock, |?", "ready to rock, <username>?",
"what's brewing, |?", "what's brewing, <username>?",
"what's the latest, |?", "what's the latest, <username>?",
"how's your day going, |?", "how's your day going, <username>?",
"need some inspiration, |?", "need some inspiration, <username>?",
"let's make some noise, |!", "let's make some noise, <username>!",
"welcome back, |!", "welcome back, <username>!",
"good to see you, |!", "good to see you, <username>!",
"what are we making today, |?", "what are we making today, <username>?",
"time to make some magic, |!", "time to make some magic, <username>!",
"let's get creative, |?", "let's get creative, <username>!",
"what's the vibe today, |?", "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 greeting = greetings[Math.floor(Math.random() * greetings.length)];
const user = useNanostore$<StereoUser>(userInfo); const user = useNanostore$<StereoUser>(userInfo);
const splits = greeting.split("|"); const splits = greeting.split("<username>");
useTask$(({ track }) => { useTask$(({ track }) => {
track(() => user.value); track(() => user.value);

8
src/routes/dashboard/index.tsx
View file

@ -1,8 +1,8 @@
import { component$, Signal, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik"; import { component$, Signal, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik";
import { routeLoader$, type DocumentHead } from "@builder.io/qwik-city"; 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 Settings from "~/components/dashboard/Settings";
import TitleBar from "~/components/dashboard/TitleBar"; import Titlebar from "~/components/dashboard/Titlebar";
// import Dropzone from "~/components/Dropzone"; // import Dropzone from "~/components/Dropzone";
import { useNanostore$ } from "~/hooks/nanostores"; import { useNanostore$ } from "~/hooks/nanostores";
import { api } from "~/lib/api"; import { api } from "~/lib/api";
@ -30,9 +30,9 @@ export default component$(() => {
<> <>
<Settings /> <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"> <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} /> <Files files={files} loaded={loaded} />
<OSBar /> <Actionbar />
</div> </div>
</> </>
); );