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

src/components/Controlbar.tsx

@@ -1,35 +1,57 @@
-import { component$, useSignal } from "@builder.io/qwik";
-import { atom } from "nanostores";
+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 { StereoFile } from "~/lib/types";
 import { SolarUploadLinear } from "./Icons";
 
-const a = atom(0);
-
 export default component$(() => {
+    const files = useNanostore$<StereoFile[]>(DashboardFiles);
     const fileInputRef = useSignal<HTMLInputElement>();
-    
+    const uploadingFile = useSignal<NoSerialize<File> | undefined>();
+    const now = useSignal(new Date());
+
+    useVisibleTask$(() => {
+        const interval = setInterval(() => {
+            now.value = new Date();
+        }, 500);
+        return () => clearInterval(interval);
+    });
+
+    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 (
-        <div class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-red-400 w-1/3 p-2 rounded-lg flex items-center justify-start">
-            {/* Hidden file input */}
+        <div class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gray-950/50 backdrop-blur-3xl w-1/3 p-2 rounded-lg flex items-center justify-between">
             <input 
                 type="file" 
                 ref={fileInputRef}
                 style="display: none;"
-                onChange$={(e) => {
-                    // You can handle the selected file here or emit an event
-                    const files = (e.target as HTMLInputElement).files;
-                    if (files && files.length > 0) {
-                        console.log("File selected:", files[0]);
-                    }
+                onChange$={async (e: Event) => {
+                    uploadingFile.value = noSerialize((e.target as HTMLInputElement).files![0]);
+                    await uploadFile();
                 }}
             />
             
-            {/* Button that triggers the file dialog */}
-            <button
-                class="duration-100 hover:bg-white p-2 rounded-lg"
-                onClick$={() => { fileInputRef.value?.click() }}
-            >
-                <SolarUploadLinear class="w-6 h-6 text-black" />
-            </button>
+            <div class="flex items-center gap-1">
+                <button
+                    class="duration-100 hover:bg-white text-white hover:text-black p-2 rounded-lg"
+                    onClick$={() => { fileInputRef.value?.click() }}
+                >
+                    <SolarUploadLinear class="w-6 h-6" />
+                </button>
+            </div>
+            <p class="text-white font-medium">{now.value.toLocaleTimeString()}</p>
         </div>
     )
 })