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

Enhance dashboard components with new icons, layout adjustments, and improved file display

Browse source
This commit is contained in:
grngxd 2025-06-21 20:27:32 +01:00
parent f164351011
commit b36d3b76a1
9 changed files with 159 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -26,7 +26,7 @@ export default component$(() => {
});
return (
<div class="flex flex-col w-full h-screen p-8 bg-gradient-to-b from-stereo/20 to-transparent">
<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 />
<Files files={files} loaded={loaded} />
<OSBar />
@ -39,9 +39,24 @@ const Files = component$<{
loaded: Signal<boolean>;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
}>(({ files, loaded }) => {
const File = component$(({ file }: { file: StereoFile }) => {
return (
<div class="bg-stereo/15 h-84 rounded-3xl flex items-center justify-center">
{file.Name}
</div>
)
})
return (
<div class="flex flex-col flex-grow w-full h-full bg-green-500">
b
<div class="mb-6 flex flex-col w-full max-h-full overflow-y-scroll overflow-x-hidden mask-clip-content rounded-3xl">
<div class="w-full h-full grid grid-cols-4 gap-2">
{files.value.map((file) => (
Array.from({ length: 15 }).map((_, i) => (
<File file={file} key={`${file.ID}-${i}`} />
))
))}
</div>
</div>
);
});

7
src/routes/layout.tsx
View file

@ -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$<StereoUser>(userInfo);
useVisibleTask$(async () => {
info.value = await api.me();
})
useOnDocument("DOMContentLoaded", $(async () => {
info.value = await api.me()
AOS.init({
once: true,