nanostores hook & upload btn

bun.lock

@@ -5,6 +5,7 @@
       "name": "my-qwik-empty-starter",
       "dependencies": {
         "ky": "^1.8.1",
+        "nanostores": "^1.0.1",
       },
       "devDependencies": {
         "@builder.io/qwik": "^1.14.1",
@@ -751,6 +752,8 @@
 
     "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
+    "nanostores": ["nanostores@1.0.1", "", {}, "sha512-kNZ9xnoJYKg/AfxjrVL4SS0fKX++4awQReGqWnwTRHxeHGZ1FJFVgTqr/eMrNQdp0Tz7M7tG/TDaX8QfHDwVCw=="],
+
     "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
 
     "nth-check": ["nth-check@2.1.1", "", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="],

package.json

@@ -42,6 +42,7 @@
     "vite-tsconfig-paths": "^4.2.1"
   },
   "dependencies": {
-    "ky": "^1.8.1"
+    "ky": "^1.8.1",
+    "nanostores": "^1.0.1"
   }
 }

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>
     )
 })

src/components/Icons.tsx

@@ -0,0 +1,7 @@
+import { QwikIntrinsicElements } from "@builder.io/qwik";
+
+export function SolarUploadLinear(props: QwikIntrinsicElements['svg'], key: string) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props} key={key}><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M17 9.002c2.175.012 3.353.109 4.121.877C22 10.758 22 12.172 22 15v1c0 2.829 0 4.243-.879 5.122C20.243 22 18.828 22 16 22H8c-2.828 0-4.243 0-5.121-.878C2 20.242 2 18.829 2 16v-1c0-2.828 0-4.242.879-5.121c.768-.768 1.946-.865 4.121-.877"></path><path stroke-linejoin="round" d="M12 15V2m0 0l3 3.5M12 2L9 5.5"></path></g></svg>
+  )
+}

src/hooks/nanostores.ts

@@ -0,0 +1,17 @@
+import { isServer, noSerialize, useSignal, type NoSerialize } from '@builder.io/qwik';
+import type { ReadableAtom } from 'nanostores';
+
+export function useNanostore<T>(atom: ReadableAtom<T>) {
+    if (isServer) return
+
+    const state = useSignal<T>(atom.get());
+    const store = useSignal<NoSerialize<ReadableAtom<T>> | undefined>(undefined);
+
+    store.value = noSerialize(atom);
+    const unsubscribe = atom.subscribe((value) => {
+        state.value = value;
+    });
+
+    window.addEventListener('beforeunload', () => unsubscribe());
+    return state;
+}