reorder-app-cards

webapp/src/views/ReportChoose.vue

@@ -28,6 +28,52 @@
     </v-row>
 
     <v-row justify="center">
+      <!-- App Card - shown first when enabled -->
+      <v-col 
+        v-if="isIosAppEnabled" 
+        cols="12" 
+        md="5" 
+        class="pa-4"
+      >
+        <div class="app-card-container">
+          <v-card
+            class="mx-auto h-100 d-flex flex-column"
+            elevation="4"
+            hover
+            to="/app"
+          > 
+            <v-card-item class="bg-green-darken-3">
+              <v-card-title class="text-h5 font-weight-bold text-white">
+                DeFlock App
+              </v-card-title>
+              <v-card-subtitle class="pt-2">
+                for iOS and Android
+              </v-card-subtitle>
+            </v-card-item>
+          
+            <v-img cover :aspect-ratio="1.5" class="mx-auto mt-5" src="/app-screenshots/df-app.webp" style="width: 90%; border-radius: 8px;" />
+          
+            <v-card-text class="text-body-1">
+              <p class="mb-4 sans-serif">The <b>DeFlock App</b> provides a simple mobile interface that's easy to use while walking around.</p>
+            </v-card-text>
+          
+            <v-card-actions class="pa-4">
+              <v-btn
+                block
+                color="green-darken-2"
+                variant="elevated"
+                size="large"
+                to="/app"
+              >
+                Download App
+                <v-icon icon="mdi-arrow-right" end></v-icon>
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </div>
+      </v-col>
+
+      <!-- Legacy Editor Card -->
       <v-col cols="12" md="5" class="pa-4">
         <v-card
           class="mx-auto h-100 d-flex flex-column"
@@ -65,14 +111,17 @@
         </v-card>
       </v-col>
 
-      <v-col cols="12" md="5" class="pa-4">
+      <!-- App Card - shown second when disabled (with coming soon banner) -->
+      <v-col 
+        v-if="!isIosAppEnabled" 
+        cols="12" 
+        md="5" 
+        class="pa-4"
+      >
         <div class="app-card-container">
           <v-card
-            class="mx-auto h-100 d-flex flex-column"
+            class="mx-auto h-100 d-flex flex-column app-card-disabled"
-            :class="{ 'app-card-disabled': !isIosAppEnabled }"
             elevation="4"
-            :hover="isIosAppEnabled"
-            :to="isIosAppEnabled ? '/app' : undefined"
           > 
             <v-card-item class="bg-green-darken-3">
               <v-card-title class="text-h5 font-weight-bold text-white">
@@ -95,17 +144,16 @@
                 color="green-darken-2"
                 variant="elevated"
                 size="large"
-                :disabled="!isIosAppEnabled"
+                disabled
-                :to="isIosAppEnabled ? '/app' : undefined"
               >
-                {{ isIosAppEnabled ? 'Download App' : 'Download App' }}
+                Download App
                 <v-icon icon="mdi-arrow-right" end></v-icon>
               </v-btn>
             </v-card-actions>
           </v-card>
           
           <!-- Coming Soon Banner -->
-          <div v-if="shouldShowComingSoon" class="coming-soon-banner">
+          <div class="coming-soon-banner">
             <v-chip
               color="warning"
               variant="elevated"
@@ -131,7 +179,6 @@ const { flags } = useFeatureFlags();
 
 // Computed properties for iOS app state
 const isIosAppEnabled = computed(() => flags.value?.iosApp.enabled ?? false);
-const shouldShowComingSoon = computed(() => !isIosAppEnabled.value);
 </script>
 
 <style scoped>