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

50
src/components/dashboard/Actionbar.tsx Normal file
View file

@ -0,0 +1,50 @@
import { component$ } from "@builder.io/qwik";
import { useNanostore$ } from "~/hooks/nanostores";
import { isSettingsOpen } from "~/lib/stores";
import { SolarLibraryLinear, SolarQuestionCircleLinear, SolarRoundedMagniferLinear, SolarSettingsLinear, SolarUploadMinimalisticLinear, StereoCircularProgress, StereoLogoLinear } from "../misc/Icons";
export default component$(() => {
const used = 3.8;
const total = 15;
const settingsOpen = useNanostore$<boolean>(isSettingsOpen);
return (
<div class="absolute bottom-0 left-0 flex items-center justify-between py-7 px-16 w-full">
<div style={{
borderRadius: "999px",
border: "0.5px solid #FF264E",
background: "rgba(255, 38, 78, 0.15)",
boxShadow: "0px 4px 20px 0px rgba(255, 38, 78, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 1px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(255, 38, 78, 0.12) inset, 0px 1px 3px 0px rgba(255, 38, 78, 0.24) inset",
backdropFilter: "blur(12px)",
}} class="flex items-center justify-center px-6 py-4 h-full gap-2 text-white text-xl">
<StereoCircularProgress value={used/total} class="text-2xl"/>
<p class="hidden md:block">{used} / {total} GB</p>
</div>
<div style={{
borderRadius: "999px",
border: "0.5px solid #FF264E",
background: "rgba(255, 38, 78, 0.15)",
boxShadow: "0px 4px 20px 0px rgba(255, 38, 78, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 1px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(255, 38, 78, 0.12) inset, 0px 1px 3px 0px rgba(255, 38, 78, 0.24) inset",
backdropFilter: "blur(12px)",
}} class="flex items-center justify-center px-6 py-4 gap-5 text-white text-3xl absolute left-1/2 transform -translate-x-1/2">
<a onClick$={() => settingsOpen.value = true}><StereoLogoLinear /></a>
<SolarLibraryLinear />
<SolarUploadMinimalisticLinear />
<SolarRoundedMagniferLinear />
<SolarSettingsLinear />
</div>
<div style={{
borderRadius: "999px",
border: "0.5px solid #FF264E",
background: "rgba(255, 38, 78, 0.15)",
boxShadow: "0px 4px 20px 0px rgba(255, 38, 78, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 1px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(255, 38, 78, 0.12) inset, 0px 1px 3px 0px rgba(255, 38, 78, 0.24) inset",
backdropFilter: "blur(12px)",
}} class="flex items-center justify-center p-4 gap-2 text-white text-3xl h-full">
<SolarQuestionCircleLinear />
</div>
</div>
)
})