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

templating dashboard & add user route to api client

Browse source
This commit is contained in:
grngxd 2025-06-21 17:02:52 +01:00
parent 0d29d59937
commit f47a1b2226
9 changed files with 58 additions and 329 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,8 @@
import { component$, useVisibleTask$ } from "@builder.io/qwik";
import { component$, Signal, useVisibleTask$ } from "@builder.io/qwik";
import { routeLoader$, type DocumentHead } from "@builder.io/qwik-city";
import Controlbar from "~/components/dashboard/Controlbar";
import OSBar from "~/components/dashboard/OSBar";
import TitleBar from "~/components/dashboard/TitleBar";
// import Dropzone from "~/components/Dropzone";
import File from "~/components/dashboard/File";
import { SolarUploadLinear, SvgSpinnersBarsRotateFade } from "~/components/misc/Icons";
import { useNanostore$ } from "~/hooks/nanostores";
import { api } from "~/lib/api";
import { OAUTH_LINK } from "~/lib/constants";
@ -23,50 +22,30 @@ export default component$(() => {
useVisibleTask$(async () => {
loaded.value = false;
files.value = await api.list();
console.log("Files loaded:", files.value);
loaded.value = true;
});
return (
<>
{/* <Dropzone /> */}
<Controlbar />
{!loaded.value ? (
<div class="absolute w-full h-screen flex justify-center items-center flex-col">
<p class="text-gray-500 text-8xl font-bold"><SvgSpinnersBarsRotateFade /></p>
<p class="text-gray-700 text-2xl font-light italic">loading your files...</p>
<span class="text-gray-700 text-lg font-light flex gap-[0.5ch] items-center">please wait... <span class="animate-spin">⏳</span></span>
</div>
) : (
files.value.length === 0 ? (
<div class="absolute w-full h-screen flex justify-center items-center flex-col">
<p class="text-gray-500 text-8xl font-bold">{
[
"┻━┻︵ \\(°□°)/ ︵ ┻━┻",
"┻━┻︵ヽ(`Д´)ﾉ︵ ┻━┻",
"ʕノ•ᴥ•ʔノ ︵ ┻━┻",
"(╯°Д°）╯︵ /(.□ . \\)",
"┬─┬ ︵ /(.□. \\）",
"(/ .□.)\\ ︵╰(゜Д゜)╯︵ /(.□. \\)"
].sort(() => Math.random() - 0.5)[0]
}</p>
<p class="text-gray-700 text-2xl font-light italic">you haven't uploaded any files yet!</p>
<span class="text-gray-700 text-lg font-light flex gap-[0.5ch] items-center">click the <span class="animate-bounce p-0.5 bg-gray-500 rounded-sm"><SolarUploadLinear /></span> button to get started</span>
</div>
)
: (
<div class="grid xl:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-3 p-6 mb-14">
{files.value.map((file) => (
<File key={file.Name} file={file} />
))}
</div>
)
)}
<TitleBar />
<Files files={files} loaded={loaded} />
<OSBar />
</>
);
});
const Files = component$<{
files: Signal<StereoFile[]>;
loaded: Signal<boolean>;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
}>(({ files, loaded }) => {
return (
<div class="flex flex-col flex-grow w-full h-full bg-green-500">
b
</div>
);
});
export const head: DocumentHead = {
title: "Welcome to Qwik",
meta: [

11
src/routes/layout.tsx
View file

@ -1,9 +1,18 @@
import { $, component$, Slot, useOnDocument } from '@builder.io/qwik';
import AOS from 'aos';
import 'aos/dist/aos.css';
import { useNanostore$ } from '~/hooks/nanostores';
import { api } from '~/lib/api';
import { userInfo } from '~/lib/stores';
import { StereoUser } from '~/lib/types';
export default component$(() => {
useOnDocument("DOMContentLoaded", $(() => {
const info = useNanostore$<StereoUser>(userInfo);
useOnDocument("DOMContentLoaded", $(async () => {
info.value = await api.me()
console.log(info.value);
AOS.init({
once: true,
duration: 1000,