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

refactor: update file handling and improve component structure

Browse source 
- fix api client
- make controlbar look better
- fix api client again
This commit is contained in:
grngxd 2025-06-10 00:10:59 +01:00
parent 50b1bc2b24
commit 98a582c8d4
10 changed files with 62 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/Controlbar.tsx
View file

@ -1,12 +1,14 @@
import { $, component$, noSerialize, NoSerialize, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import { useNanostore$ } from "~/hooks/nanostores";
import { api } from "~/lib/api";
import { DashboardFiles } from "~/lib/stores";
import { areFilesLoaded, dashboardFiles } from "~/lib/stores";
import { StereoFile } from "~/lib/types";
import { SolarUploadLinear } from "./Icons";
import { SolarUploadLinear, SvgSpinnersBarsRotateFade } from "./Icons";
import StereoLogo from "./StereoLogo";
export default component$(() => {
const files = useNanostore$<StereoFile[]>(DashboardFiles);
const loaded = useNanostore$<boolean>(areFilesLoaded);
const files = useNanostore$<StereoFile[]>(dashboardFiles);
const fileInputRef = useSignal<HTMLInputElement>();
const uploadingFile = useSignal<NoSerialize<File> | undefined>();
const now = useSignal(new Date());
@ -28,7 +30,7 @@ export default component$(() => {
const unsafe = uploadingFile.value as File;
const name = unsafe.name.replace(/[^a-zA-Z0-9_.-]/g, "_");
const f = new File([unsafe], name, { type: unsafe.type });
await api.upload(f);
files.value = await api.list();
} catch (error) {
@ -36,7 +38,7 @@ export default component$(() => {
}
})
return (
<div class="z-[999999999] fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-neutral-950/50 backdrop-blur-3xl w-1/3 p-2 rounded-lg flex items-center justify-between">
<div class="z-[999999999] fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-neutral-700/10 backdrop-blur-3xl w-1/3 p-2 pr-4 rounded-lg flex items-center justify-between">
<input
type="file"
ref={fileInputRef}
@ -47,7 +49,26 @@ export default component$(() => {
}}
/>
<div class="flex items-center gap-1">
<div class="flex items-center gap-2">
<button
class="duration-100 hover:bg-white text-white hover:text-black p-2 rounded-lg"
onClick$={async () => {
loaded.value = false;
files.value = await api.list()
loaded.value = true;
}}
>
{
loaded.value ? (
<StereoLogo class="w-6 h-6" />
) : (
<SvgSpinnersBarsRotateFade class="w-6 h-6" />
)
}
</button>
<p class="text-white/25 font-light text-xl"> | </p>
<button
class="duration-100 hover:bg-white text-white hover:text-black p-2 rounded-lg"
onClick$={() => { fileInputRef.value?.click() }}