nanostores hook & upload btn

src/components/Controlbar.tsx

@@ -1,10 +1,35 @@
-import { component$ } from "@builder.io/qwik";
+import { component$, useSignal } from "@builder.io/qwik";
+import { atom } from "nanostores";
+import { SolarUploadLinear } from "./Icons";
+
+const a = atom(0);
 
-// TODO: add upload button and other stuff fr
 export default component$(() => {
+    const fileInputRef = useSignal<HTMLInputElement>();
+    
     return (
-        <div class="absolute fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-red-400 w-1/4 p-4 rounded-lg flex items-center justify-center">
-            hi
+        <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 */}
+            <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]);
+                    }
+                }}
+            />
+            
+            {/* 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>
     )
 })