From 348e0fa045e2a642d3404ef9e18616ab0abcc9f9 Mon Sep 17 00:00:00 2001
From: Joakim Olsson <joakim@unbound.se>
Date: Wed, 25 Feb 2026 17:53:41 +0100
Subject: [PATCH] fix(app): replace Vuetify 2 legacy props with proper V3 API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace deprecated V2 props that were being silently ignored:
- v-layout → v-row, grid-list-md removed, xs → cols on v-col
- v-tooltip top → location="top", v-list dense → density="compact"
- v-app-bar app/scroll-off-screen → scroll-behavior="hide"
- append-outer-icon → append-icon, remove primary-title
- headline class → text-h6, remove wrap from v-row

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/components/pages/events/event-card.vue   | 11 +++--------
 app/components/pages/events/event-list.vue   |  4 ++--
 app/components/pages/events/event-page.vue   | 20 ++++++++++----------
 app/components/pages/filters/filter-list.vue |  2 +-
 app/components/pages/filters/filter-page.vue | 12 ++++++------
 app/components/pages/origins/origin-page.vue | 20 ++++++++++----------
 app/layouts/default.vue                      |  6 +++---
 7 files changed, 35 insertions(+), 40 deletions(-)

diff --git a/app/components/pages/events/event-card.vue b/app/components/pages/events/event-card.vue
index 022e845..4a5818a 100644
--- a/app/components/pages/events/event-card.vue
+++ b/app/components/pages/events/event-card.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card flat variant="outlined" rounded="xl">
-    <v-card-title v-if="event.band" primary-title>
-      <h3 class="headline mb-0">
+    <v-card-title v-if="event.band">
+      <h3 class="text-h6 mb-0">
         <v-icon
           v-if="hasUser"
           class="ml-1 mr-1 text-medium-emphasis"
@@ -17,7 +17,6 @@
       <v-row dense>
         <v-col
           cols="12"
-          xs="12"
           sm="6"
         >
           <strong class="mr-1" v-text="t('events.date')" />{{
@@ -25,7 +24,7 @@
           }}
           ({{ weekday }} {{ daysUntil }})
         </v-col>
-        <v-col v-if="event.time" cols="12" xs="12" sm="6">
+        <v-col v-if="event.time" cols="12" sm="6">
           <strong class="mr-1" v-text="t('events.time')" />{{
             event.time
           }}
@@ -34,7 +33,6 @@
       <v-row v-if="event.danceHall" dense>
         <v-col
           cols="12"
-          xs="12"
           sm="6"
         >
           <strong class="mr-1" v-text="t('events.hall')" />
@@ -50,7 +48,6 @@
         </v-col>
         <v-col
           cols="12"
-          xs="12"
           sm="6"
         >
           <strong class="mr-1" v-text="t('events.city')" />
@@ -66,7 +63,6 @@
         </v-col>
         <v-col
           cols="12"
-          xs="12"
           sm="6"
         >
           <strong class="mr-1" v-text="t('events.municipality')" />
@@ -84,7 +80,6 @@
         </v-col>
         <v-col
           cols="12"
-          xs="12"
           sm="6"
         >
           <strong class="mr-1" v-text="t('events.state')" />
diff --git a/app/components/pages/events/event-list.vue b/app/components/pages/events/event-list.vue
index 9515387..dffea2f 100644
--- a/app/components/pages/events/event-list.vue
+++ b/app/components/pages/events/event-list.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <v-row v-for="event in events" :key="event.id" wrap>
-      <v-col xs="12">
+    <v-row v-for="event in events" :key="event.id">
+      <v-col cols="12">
         <event-card
           :event="event"
           :has-user="hasUser"
diff --git a/app/components/pages/events/event-page.vue b/app/components/pages/events/event-page.vue
index b872781..b5d431e 100644
--- a/app/components/pages/events/event-page.vue
+++ b/app/components/pages/events/event-page.vue
@@ -1,13 +1,13 @@
 <template>
   <div :key="isAuthenticated ? 'true' : 'false'">
-    <v-container :key="range" fluid grid-list-md class="app-fade-in">
-      <v-row v-if="!isAuthenticated" wrap>
-        <v-col xs="12">
+    <v-container :key="range" fluid class="app-fade-in">
+      <v-row v-if="!isAuthenticated">
+        <v-col cols="12">
           <p><b v-text="t('events.login')" /></p>
         </v-col>
       </v-row>
-      <v-row wrap>
-        <v-col xs="12">
+      <v-row>
+        <v-col cols="12">
           <v-text-field
             v-model="origin"
             variant="underlined"
@@ -16,7 +16,7 @@
             :placeholder="t('origins.geolocation')"
           >
             <template #append>
-              <v-tooltip top>
+              <v-tooltip location="top">
                 <template #activator="{ props }">
                   <v-icon
                     icon='mdi-crosshairs-gps'
@@ -28,7 +28,7 @@
               </v-tooltip>
             </template>
             <template #prepend>
-              <v-tooltip v-if="isAuthenticated" top>
+              <v-tooltip v-if="isAuthenticated" location="top">
                 <template #activator="{ props }">
                   <v-icon
                     icon='mdi-bookmark-plus-outline'
@@ -43,7 +43,7 @@
           </v-text-field>
         </v-col>
       </v-row>
-      <v-row wrap>
+      <v-row>
         <v-col>
           <v-btn-toggle
             v-if="smAndUp"
@@ -65,12 +65,12 @@
           />
         </v-col>
       </v-row>
-      <v-row wrap>
+      <v-row>
         <v-col cols="12" sm="8">
           <v-text-field
             v-model="state.search"
             variant="underlined"
-            append-outer-icon="mdi-magnify"
+            append-icon="mdi-magnify"
             :label="t('events.filter')"
             :placeholder="t('events.filter')"
             hide-details
diff --git a/app/components/pages/filters/filter-list.vue b/app/components/pages/filters/filter-list.vue
index 327e3bc..bdd0ca8 100644
--- a/app/components/pages/filters/filter-list.vue
+++ b/app/components/pages/filters/filter-list.vue
@@ -7,7 +7,7 @@
       <v-list-item v-for="item in model" :key="item" :title="item">
         <template #prepend>
           <v-list-item-action @click="toggleIgnore(type, item)">
-            <v-tooltip top>
+            <v-tooltip location="top">
               <template #activator="{ props }">
                 <v-icon icon='mdi-delete-outline' v-bind="props" />
               </template>
diff --git a/app/components/pages/filters/filter-page.vue b/app/components/pages/filters/filter-page.vue
index 7a13e43..b129da5 100644
--- a/app/components/pages/filters/filter-page.vue
+++ b/app/components/pages/filters/filter-page.vue
@@ -1,12 +1,12 @@
 <template>
   <div :key="isAuthenticated ? 'true' : 'false'">
-    <v-container fluid grid-list-md class="app-fade-in">
-      <v-row wrap>
+    <v-container fluid class="app-fade-in">
+      <v-row>
         <v-col cols="12">
           <v-card>
-            <v-container fluid grid-list-md>
-              <v-row wrap>
-                <v-col xs="12" sm="12" md="4" lg="4">
+            <v-container fluid>
+              <v-row>
+                <v-col cols="12" sm="12" md="4" lg="4">
                   <list
                     :model="bands || []"
                     title-key="filters.band"
@@ -14,7 +14,7 @@
                     :toggle-ignore="toggleIgnore"
                   />
                 </v-col>
-                <v-col xs="12" sm="12" md="4" lg="4">
+                <v-col cols="12" sm="12" md="4" lg="4">
                   <v-row>
                     <v-col cols="12">
                       <list
diff --git a/app/components/pages/origins/origin-page.vue b/app/components/pages/origins/origin-page.vue
index 3bc1b62..867329e 100644
--- a/app/components/pages/origins/origin-page.vue
+++ b/app/components/pages/origins/origin-page.vue
@@ -1,8 +1,8 @@
 <template>
   <div :key="isAuthenticated ? 'true' : 'false'">
-    <v-container fluid grid-list-md class="app-fade-in">
-      <v-layout row wrap>
-        <v-col xs="12">
+    <v-container fluid class="app-fade-in">
+      <v-row>
+        <v-col cols="12">
           <v-text-field
             v-model="origin"
             variant="underlined"
@@ -10,7 +10,7 @@
             :placeholder="t('origins.geolocation')"
           >
             <template #append>
-              <v-tooltip top>
+              <v-tooltip location="top">
                 <template #activator="{ props }">
                   <v-icon
                     icon='mdi-crosshairs-gps'
@@ -22,7 +22,7 @@
               </v-tooltip>
             </template>
             <template #prepend>
-              <v-tooltip top>
+              <v-tooltip location="top">
                 <template #activator="{ props }">
                   <v-icon
                     icon='mdi-bookmark-plus-outline'
@@ -36,10 +36,10 @@
             </template>
           </v-text-field>
         </v-col>
-      </v-layout>
-      <v-layout v-for="o in origins" :key="o" row wrap>
-        <v-col xs="12">
-          <v-tooltip top>
+      </v-row>
+      <v-row v-for="o in origins" :key="o">
+        <v-col cols="12">
+          <v-tooltip location="top">
             <template #activator="{ props }">
               <v-icon
                 icon='mdi-delete-outline'
@@ -51,7 +51,7 @@
           </v-tooltip>
           <span>{{ o }}</span>
         </v-col>
-      </v-layout>
+      </v-row>
     </v-container>
     <v-snackbar
       v-model="snackbar.active"
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index b94aa91..4dcaf3b 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app :key='locale + isAuthenticated'>
-    <v-navigation-drawer v-model='nav' temporary app>
-      <v-list dense>
+    <v-navigation-drawer v-model='nav' temporary>
+      <v-list density="compact">
         <v-list-item v-if='isAuthenticated && user' :title='user.name' :prepend-avatar='user.picture' />
         <v-list-item>
           <v-switch v-model='darkMode' color='primary' :label="t('app.darkMode')" hide-details class='ms-1' />
@@ -35,7 +35,7 @@ v-if='isAuthenticated' link :title="t('app.logout')" prepend-icon='mdi-logout'
                      @click='doLogout' />
       </v-list>
     </v-navigation-drawer>
-    <v-app-bar app scroll-off-screen>
+    <v-app-bar scroll-behavior="hide">
       <v-app-bar-nav-icon @click='nav = !nav' />
       <v-toolbar-title :title='title' />
       <v-spacer />