mock dashboard + 2 way sync in nanostores (i hate ctx)

src/routes/index.tsx

@@ -1,57 +1,32 @@
-import { $, component$, noSerialize, NoSerialize, useSignal, useVisibleTask$ } from "@builder.io/qwik";
+import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
 import type { DocumentHead } from "@builder.io/qwik-city";
 import Controlbar from "~/components/Controlbar";
 import File from "~/components/File";
+import { useNanostore$ } from "~/hooks/nanostores";
 import { api } from "~/lib/api";
 import { OAUTH_LINK } from "~/lib/constants";
+import { DashboardFiles } from "~/lib/stores";
 import { StereoFile } from "~/lib/types";
 
 // TODO: move this to dashboard/index.tsx
 
 export default component$(() => {
-	const files = useSignal<StereoFile[]>([]);
+	const files = useNanostore$<StereoFile[]>(DashboardFiles);
 	const loaded = useSignal(false);
 
-	const uploadingFile = useSignal<NoSerialize<File> | undefined>();
-
 	useVisibleTask$(async () => {
 		loaded.value = false;
 		files.value = await api.list();
+		console.log("Files loaded:", files.value);
 		loaded.value = true;
-	})
-
-	const uploadFile = $(
-		async () => {
-			if (!uploadingFile.value) {
-				console.error("No file selected for upload.");
-				return;
-			}
-
-			try {
-				await api.upload(uploadingFile.value as File)
-				files.value = await api.list();
-			} catch (error) {
-				console.error("Error uploading file:", error);
-			}
-		}
-	)
+	});
 
 	return (
 		<>
 			<Controlbar />
 			<a href={OAUTH_LINK}>oauth</a>
-			<input
-				onChange$={(e: Event) => uploadingFile.value = noSerialize((e.target as HTMLInputElement).files![0])}
-				type="file"
-			/>
 
-			<button
-				onClick$={uploadFile}
-			>
-				upload
-			</button>
-
-			<div class="grid grid-cols-3 gap-4 p-4">
+			<div class="grid grid-cols-4 gap-4 p-4 mb-18">
 				{/* TODO: make ts better :broken_heart: */}
 				{!loaded.value ? <p>Loading...</p> : (
 					files.value.length === 0 ? ( <p> no files found fr </p> )