Open scan on page init

app/create-card/create-card-form.tsx

@@ -116,6 +116,10 @@ export default function CreateCardForm() {
     };
   }, []);
 
+  useEffect(() => {
+    cameraModalRef.current?.showModal();
+  }, []);
+
   return (
     <>
       <form
@@ -223,19 +227,19 @@ export default function CreateCardForm() {
           </button>
         </footer>
       </form>
-      <dialog id="camera-modal" className="modal" ref={cameraModalRef}>
+      <dialog className="modal" ref={cameraModalRef}>
         <div className="modal-box w-full h-full max-h-full max-w-full overflow-clip lg:w-11/12 lg:h-5/6 lg:max-w-5xl lg:max-h-5xl">
           <div className="grid justify-between items-center pb-4 grid-cols-[auto_1fr_auto] gap-4">
             <button
-              className="btn btn-sm btn-circle btn-ghost"
+              className="btn btn-square btn-ghost"
               onClick={() => cameraModalRef.current?.close()}
             >
               <IconX className="w-6 h-6" />
             </button>
             <h3 className="font-bold text-lg">Scan your code!</h3>
             {devices.length > 1 ? (
               <button
-                className="btn btn-sm btn-circle btn-ghost"
+                className="btn btn-square btn-ghost"
                 onClick={() => {
                   dispatch({
                     type: CreateCardFormActionTypes.TOGGLE_ACTIVE_DEVICE,

app/create-card/scanner.tsx

@@ -91,6 +91,7 @@ export default function Scanner({
   }, [getCameraDevices]);
 
   useEffect(() => {
+    console.log('use effect called');
     let cleanup: () => void;
     if (activeDevice?.id) {
       cleanup = startScanning(activeDevice.id);
@@ -104,8 +105,8 @@ export default function Scanner({
     <div
       className="max-w-full overflow-clip"
       style={{
-        height: 'calc(100% - 2.5rem)',
-        maxHeight: 'calc(100% - 2.5rem)',
+        height: 'calc(100% - 4rem)',
+        maxHeight: 'calc(100% - 4rem)',
       }}
       ref={parentDiv}
     >

plan.md

@@ -30,6 +30,8 @@ Features:
 - [x] _Scan code page_
   - [x] _implement barcode scan_
   - [x] _implement navigation to qrcode scan + scan itself_
+  - [x] open scan dialog on create card page init
+  - [ ] add notification/info, when camera permission is denied
 - [ ] **Create card page**
   - [x] **implement form**
   - [x] _implement navigation to scan code page_