style: reorder v-model and v-bind directives

Changes:
- Move v-model directives before other attributes
- Move v-bind directives before event handlers
- Reorder attributes for better readability
- Fix template attribute ordering across components
- Improve eslint rules
- add default vite config for testing (handles nostr error too)
This follows Vue.js style guide recommendations for attribute
ordering and improves template consistency.

src/components/PhotoDialog.vue

@@ -28,7 +28,7 @@
       <div v-else-if="blob">
         <div v-if="crop">
           <VuePictureCropper
-            :boxStyle="{
+            :box-style="{
               backgroundColor: '#f8f8f8',
               margin: 'auto',
             }"
@@ -56,8 +56,8 @@
         </div>
         <div class="absolute bottom-[1rem] left-[1rem] px-2 py-1">
           <button
-            @click="uploadImage"
             class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-1 px-2 rounded-md"
+            @click="uploadImage"
           >
             <span>Upload</span>
           </button>
@@ -67,8 +67,8 @@
           class="absolute bottom-[1rem] right-[1rem] px-2 py-1"
         >
           <button
-            @click="retryImage"
             class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-1 px-2 rounded-md"
+            @click="retryImage"
           >
             <span>Retry</span>
           </button>
@@ -81,17 +81,17 @@
           :resolution="{ width: 375, height: 812 }"
         -->
         <camera
-          facingMode="environment"
-          autoplay
           ref="camera"
+          facing-mode="environment"
+          autoplay
           @started="cameraStarted()"
         >
           <div
             class="absolute portrait:bottom-0 portrait:left-0 portrait:right-0 portrait:pb-2 landscape:right-0 landscape:top-0 landscape:bottom-0 landscape:pr-4 flex landscape:flex-row justify-center items-center"
           >
             <button
-              @click="takeImage()"
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
+              @click="takeImage()"
             >
               <font-awesome icon="camera" class="w-[1em]"></font-awesome>
             </button>
@@ -100,16 +100,16 @@
             class="absolute portrait:bottom-2 portrait:right-16 landscape:right-0 landscape:bottom-16 landscape:pr-4 flex justify-center items-center"
           >
             <button
-              @click="swapMirrorClass()"
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
+              @click="swapMirrorClass()"
             >
               <font-awesome icon="left-right" class="w-[1em]"></font-awesome>
             </button>
           </div>
           <div v-if="numDevices > 1" class="absolute bottom-2 right-4">
             <button
-              @click="switchCamera()"
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
+              @click="switchCamera()"
             >
               <font-awesome icon="rotate" class="w-[1em]"></font-awesome>
             </button>