From b36d3b76a124caa5a96a25320e47d518819aa15c Mon Sep 17 00:00:00 2001 From: grngxd <36968271+grngxd@users.noreply.github.com> Date: Sat, 21 Jun 2025 20:27:32 +0100 Subject: [PATCH 1/2] Enhance dashboard components with new icons, layout adjustments, and improved file display --- src/components/dashboard/OSBar.tsx | 40 +++++++++++- src/components/dashboard/TitleBar.tsx | 8 ++- src/components/landing/Footer.tsx | 4 +- src/components/landing/Navbar.tsx | 4 +- src/components/landing/Testimonials.tsx | 7 +- src/components/misc/Icons.tsx | 85 ++++++++++++++++++++++++- src/components/misc/StereoLogo.tsx | 9 --- src/routes/dashboard/index.tsx | 21 +++++- src/routes/layout.tsx | 7 +- 9 files changed, 159 insertions(+), 26 deletions(-) delete mode 100644 src/components/misc/StereoLogo.tsx diff --git a/src/components/dashboard/OSBar.tsx b/src/components/dashboard/OSBar.tsx index 4607fcf..44f6698 100644 --- a/src/components/dashboard/OSBar.tsx +++ b/src/components/dashboard/OSBar.tsx @@ -1,9 +1,45 @@ import { component$ } from "@builder.io/qwik"; +import { SolarLibraryLinear, SolarRoundedMagniferLinear, SolarSettingsLinear, SolarUploadMinimalisticLinear, StereoCircularProgress, StereoLogoLinear } from "../misc/Icons"; export default component$(() => { + const used = 3.8; + const total = 15; return ( -
- a +
+
+ +

{used} / {total} GB

+
+ +
+ + + + + +
+ +
+ ? +
) }) \ No newline at end of file diff --git a/src/components/dashboard/TitleBar.tsx b/src/components/dashboard/TitleBar.tsx index ba9caa5..c26af60 100644 --- a/src/components/dashboard/TitleBar.tsx +++ b/src/components/dashboard/TitleBar.tsx @@ -1,4 +1,4 @@ -import { component$ } from "@builder.io/qwik"; +import { component$, useTask$ } from "@builder.io/qwik"; import { useNanostore$ } from "~/hooks/nanostores"; import { userInfo } from "~/lib/stores"; import { StereoUser } from "~/lib/types"; @@ -26,9 +26,13 @@ export default component$(() => { const user = useNanostore$(userInfo); const splits = greeting.split("|"); + + useTask$(({ track }) => { + track(() => user.value); + }) return ( -
+

{splits[0]} diff --git a/src/components/landing/Footer.tsx b/src/components/landing/Footer.tsx index 16fef9d..363619f 100644 --- a/src/components/landing/Footer.tsx +++ b/src/components/landing/Footer.tsx @@ -1,5 +1,5 @@ import { component$ } from "@builder.io/qwik"; -import StereoLogo from "../misc/StereoLogo"; +import { StereoLogoBold } from "../misc/Icons"; export default component$(() => { return ( @@ -7,7 +7,7 @@ export default component$(() => {

- + stereo.cat diff --git a/src/components/landing/Navbar.tsx b/src/components/landing/Navbar.tsx index 85fb716..4e23a25 100644 --- a/src/components/landing/Navbar.tsx +++ b/src/components/landing/Navbar.tsx @@ -1,5 +1,5 @@ import { component$ } from "@builder.io/qwik"; -import StereoLogo from "../misc/StereoLogo"; +import { StereoLogoBold } from "../misc/Icons"; export default component$(() => { const items = [ @@ -17,7 +17,7 @@ export default component$(() => { data-aos-duration="1000" class="fixed flex items-center justify-start top-6 left-1/2 transform -translate-x-1/2 bg-neutral-950 p-8 h-10 rounded-full lg:w-2/3 md:w-4/5 w-4/5 z-[9999999] shadow-lg">
- +

diff --git a/src/components/misc/Icons.tsx b/src/components/misc/Icons.tsx index 5500ae1..73511c1 100644 --- a/src/components/misc/Icons.tsx +++ b/src/components/misc/Icons.tsx @@ -1,5 +1,7 @@ import { QwikIntrinsicElements } from "@builder.io/qwik"; +// Solar - https://icones.js.org/collection/solar + export function SolarUploadLinear(props: QwikIntrinsicElements['svg'], key: string) { return ( @@ -26,7 +28,6 @@ export function SolarLinkRoundBold(props: QwikIntrinsicElements['svg'], key: str ) } - export function SolarDownloadMinimalisticBold(props: QwikIntrinsicElements['svg'], key: string) { return ( @@ -36,4 +37,86 @@ export function SvgSpinnersBarsRotateFade(props: QwikIntrinsicElements['svg'], k return ( ) +} + +export function SolarLibraryLinear(props: QwikIntrinsicElements['svg'], key: string) { + return ( + + ) +} + +export function SolarUploadMinimalisticLinear(props: QwikIntrinsicElements['svg'], key: string) { + return ( + + ) +} + + +export function SolarRoundedMagniferLinear(props: QwikIntrinsicElements['svg'], key: string) { + return ( + + ) +} + + +export function SolarSettingsLinear(props: QwikIntrinsicElements['svg'], key: string) { + return ( + + ) +} + +// Stereo + +export function StereoLogoBold(props: QwikIntrinsicElements['svg'], key: string) { + return ( + + ) +} + +export function StereoLogoLinear(props: QwikIntrinsicElements['svg'], key: string) { + return ( + + ) +} + +export function StereoCircularProgress( + { value, ...svgProps }: QwikIntrinsicElements['svg'] & { value: number }, + key: string +) { + const radius = 10; + const circumference = 2 * Math.PI * radius; + const dashOffset = circumference * (1 - value); + + return ( + + + + + ); } \ No newline at end of file diff --git a/src/components/misc/StereoLogo.tsx b/src/components/misc/StereoLogo.tsx deleted file mode 100644 index 892ea95..0000000 --- a/src/components/misc/StereoLogo.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { component$, QwikIntrinsicElements } from "@builder.io/qwik"; - -export default component$((props: QwikIntrinsicElements['svg']) => { - return ( - - - - ) -}) \ No newline at end of file diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx index 10aa70b..5bd769c 100644 --- a/src/routes/dashboard/index.tsx +++ b/src/routes/dashboard/index.tsx @@ -26,7 +26,7 @@ export default component$(() => { }); return ( -

+
@@ -39,9 +39,24 @@ const Files = component$<{ loaded: Signal; // eslint-disable-next-line @typescript-eslint/no-unused-vars }>(({ files, loaded }) => { + + const File = component$(({ file }: { file: StereoFile }) => { + return ( +
+ {file.Name} +
+ ) + }) + return ( -
- b +
+
+ {files.value.map((file) => ( + Array.from({ length: 15 }).map((_, i) => ( + + )) + ))} +
); }); diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx index 9ed7b73..0d156ac 100644 --- a/src/routes/layout.tsx +++ b/src/routes/layout.tsx @@ -1,4 +1,4 @@ -import { $, component$, Slot, useOnDocument } from '@builder.io/qwik'; +import { $, component$, Slot, useOnDocument, useVisibleTask$ } from '@builder.io/qwik'; import AOS from 'aos'; import 'aos/dist/aos.css'; import { useNanostore$ } from '~/hooks/nanostores'; @@ -9,8 +9,11 @@ import { StereoUser } from '~/lib/types'; export default component$(() => { const info = useNanostore$(userInfo); + useVisibleTask$(async () => { + info.value = await api.me(); + }) + useOnDocument("DOMContentLoaded", $(async () => { - info.value = await api.me() AOS.init({ once: true, From 3217373024ae14edd39f3667eebb0bc702bacc52 Mon Sep 17 00:00:00 2001 From: grngxd <36968271+grngxd@users.noreply.github.com> Date: Sat, 21 Jun 2025 21:58:33 +0100 Subject: [PATCH 2/2] q icon to osbar --- src/components/dashboard/OSBar.tsx | 6 +++--- src/components/misc/Icons.tsx | 7 +++++++ src/routes/dashboard/index.tsx | 6 ++---- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/dashboard/OSBar.tsx b/src/components/dashboard/OSBar.tsx index 44f6698..47206ac 100644 --- a/src/components/dashboard/OSBar.tsx +++ b/src/components/dashboard/OSBar.tsx @@ -1,5 +1,5 @@ import { component$ } from "@builder.io/qwik"; -import { SolarLibraryLinear, SolarRoundedMagniferLinear, SolarSettingsLinear, SolarUploadMinimalisticLinear, StereoCircularProgress, StereoLogoLinear } from "../misc/Icons"; +import { SolarLibraryLinear, SolarQuestionCircleLinear, SolarRoundedMagniferLinear, SolarSettingsLinear, SolarUploadMinimalisticLinear, StereoCircularProgress, StereoLogoLinear } from "../misc/Icons"; export default component$(() => { const used = 3.8; @@ -37,8 +37,8 @@ export default component$(() => { 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-2 text-white text-xl"> - ? + }} class="flex items-center justify-center px-5 py-5 gap-2 text-white text-3xl h-full"> +
) diff --git a/src/components/misc/Icons.tsx b/src/components/misc/Icons.tsx index 73511c1..6718fbe 100644 --- a/src/components/misc/Icons.tsx +++ b/src/components/misc/Icons.tsx @@ -65,6 +65,13 @@ export function SolarSettingsLinear(props: QwikIntrinsicElements['svg'], key: st ) } + +export function SolarQuestionCircleLinear(props: QwikIntrinsicElements['svg'], key: string) { + return ( + + ) +} + // Stereo export function StereoLogoBold(props: QwikIntrinsicElements['svg'], key: string) { diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx index 5bd769c..b6f48e8 100644 --- a/src/routes/dashboard/index.tsx +++ b/src/routes/dashboard/index.tsx @@ -49,12 +49,10 @@ const Files = component$<{ }) return ( -
+
{files.value.map((file) => ( - Array.from({ length: 15 }).map((_, i) => ( - - )) + ))}