From d732f8491b961c3f880db53bd78e8b531ad84e73 Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Tue, 7 Jul 2026 13:39:57 +0200
Subject: [PATCH 1/3] pinia persist state

---
 src/stores/events.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/stores/events.js b/src/stores/events.js
index 2c88873..690807f 100644
--- a/src/stores/events.js
+++ b/src/stores/events.js
@@ -38,4 +38,11 @@ export const useEventsStore = defineStore('events', () => {
     fetchEvents,
     getEventById
   }
+},
+{
+  persist: {
+    key: 'events-store',
+    storage: localStorage,
+    paths: ['events', 'eventsCount', 'eventsLastSyncDate']
+  }
 })

From e7bd2a3fd13dfc0a4e81ab046b42be8859697976 Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Tue, 7 Jul 2026 14:00:49 +0200
Subject: [PATCH 2/3] banner to refresh if data older than 1 day

---
 src/App.vue                      |  4 ++-
 src/components/Footer.vue        | 10 +++---
 src/components/RefreshAppBar.vue | 52 ++++++++++++++++++++++++++++++++
 src/views/Home.vue               |  1 +
 4 files changed, 60 insertions(+), 7 deletions(-)
 create mode 100644 src/components/RefreshAppBar.vue

diff --git a/src/App.vue b/src/App.vue
index 61c8532..da3d9ba 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,6 +11,7 @@
         </v-row>
         <template v-else>
           <Breadcrumbs />
+          <RefreshAppBar />
           <router-view />
         </template>
       </v-container>
@@ -26,11 +27,12 @@
 
 <script setup>
 import { onMounted, ref } from 'vue'
+import { useEventsStore } from './stores/events.js'
 import { useSnackbar } from './composables/useSnackbar.js'
 import Header from './components/Header.vue'
 import Breadcrumbs from './components/Breadcrumbs.vue'
 import Footer from './components/Footer.vue'
-import { useEventsStore } from './stores/events.js'
+import RefreshAppBar from './components/RefreshAppBar.vue'
 
 const eventsStore = useEventsStore()
 const isPreloadingEvents = ref(true)
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index a8a55a3..f22210a 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -3,7 +3,7 @@
     <v-row no-gutters>
       <v-col class="text-center">
         <p>
-          {{ eventsCount }} séances.
+          {{ eventsStore.eventsCount }} séances.
           <br v-if="!display.smAndUp.value" />
           Dernière mise à jour {{ relativeLastSyncDate }}.
         </p>
@@ -16,21 +16,19 @@
 
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { storeToRefs } from 'pinia'
 import { useDisplay } from 'vuetify'
-import dateUtils from '../utils/date.js'
 import { useEventsStore } from '../stores/events.js'
+import dateUtils from '../utils/date.js'
 
 const eventsStore = useEventsStore()
-const { eventsCount, eventsLastSyncDate } = storeToRefs(eventsStore)
 const display = useDisplay()
 const now = ref(Date.now())
 let intervalId = null
 
 const relativeLastSyncDate = computed(() => {
   now.value
-  return eventsLastSyncDate.value
-    ? dateUtils.formatRelativeTime(eventsLastSyncDate.value)
+  return eventsStore.eventsLastSyncDate
+    ? dateUtils.formatRelativeTime(eventsStore.eventsLastSyncDate)
     : 'N/A'
 })
 
diff --git a/src/components/RefreshAppBar.vue b/src/components/RefreshAppBar.vue
new file mode 100644
index 0000000..e5fdcee
--- /dev/null
+++ b/src/components/RefreshAppBar.vue
@@ -0,0 +1,52 @@
+<template>
+  <v-app-bar v-if="isStale" class="mb-4" color="secondary" variant="tonal" height="40" style="cursor: pointer;" @click="refresh">
+    <v-app-bar-title class="text-body-2">
+      Dernière mise à jour {{ relativeLastSyncDate }}
+    </v-app-bar-title>
+    <v-btn icon="mdi-refresh" variant="text" aria-label="Rafraîchir" />
+  </v-app-bar>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useEventsStore } from '../stores/events.js'
+import dateUtils from '../utils/date.js'
+
+const eventsStore = useEventsStore()
+const now = ref(Date.now())
+const hoursBeforeStale = 24
+let intervalId = null
+
+const relativeLastSyncDate = computed(() => {
+  now.value
+  return eventsStore.eventsLastSyncDate
+    ? dateUtils.formatRelativeTime(eventsStore.eventsLastSyncDate)
+    : 'N/A'
+})
+
+const isStale = computed(() => {
+  if (!eventsStore.eventsLastSyncDate) return false
+  const diffHours = (now.value - new Date(eventsStore.eventsLastSyncDate).getTime()) / 36e5
+  return diffHours > hoursBeforeStale
+})
+
+const refresh = () => {
+  eventsStore.fetchEvents({ forceRefresh: true })
+    .catch((error) => {
+      console.error('Error refreshing events:', error)
+    })
+}
+
+onMounted(() => {
+  // Update the "now" value every 10 seconds to keep the relative time display accurate
+  intervalId = window.setInterval(() => {
+    now.value = Date.now()
+  }, 1000 * 10)
+})
+
+onUnmounted(() => {
+  if (intervalId) {
+    window.clearInterval(intervalId)
+  }
+})
+</script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index fe58385..865dec2 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -14,6 +14,7 @@
   <v-btn :block="display.smAndDown.value" color="primary" to="/events">Trouver une séance</v-btn>
 
   <br />
+  <br v-if="display.smAndUp.value" />
 
   <h2 class="text-h6 font-weight-bold">Dernières séances ajoutées</h2>
 

From fb11781ba6bab0cfb9dfc934423be259f7c35808 Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Tue, 7 Jul 2026 14:32:22 +0200
Subject: [PATCH 3/3] cleanup

---
 src/components/RefreshAppBar.vue | 22 ++++++++++++++++------
 src/constants.js                 |  1 +
 src/stores/events.js             |  7 +++++--
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/RefreshAppBar.vue b/src/components/RefreshAppBar.vue
index e5fdcee..0f35fc1 100644
--- a/src/components/RefreshAppBar.vue
+++ b/src/components/RefreshAppBar.vue
@@ -1,20 +1,25 @@
 <template>
-  <v-app-bar v-if="isStale" class="mb-4" color="secondary" variant="tonal" height="40" style="cursor: pointer;" @click="refresh">
+  <v-app-bar v-if="isStale && !isRefreshAppBarDismissed" class="mb-4" color="secondary" variant="tonal" height="40" @click="refreshEvents">
     <v-app-bar-title class="text-body-2">
-      Dernière mise à jour {{ relativeLastSyncDate }}
+      <span v-if="!display.smAndDown.value">Dernière mise à jour {{ relativeLastSyncDate }}. Cliquez pour rafraîchir la liste.</span>
+      <span v-else>Dernière màj {{ relativeLastSyncDate }}. Cliquez pour rafraîchir.</span>
     </v-app-bar-title>
-    <v-btn icon="mdi-refresh" variant="text" aria-label="Rafraîchir" />
+    <v-btn icon="mdi-close" variant="text" @click.stop="dismissRefreshAppBar" aria-label="Fermer" />
   </v-app-bar>
 </template>
 
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useDisplay } from 'vuetify'
 import { useEventsStore } from '../stores/events.js'
 import dateUtils from '../utils/date.js'
 
 const eventsStore = useEventsStore()
+const { isRefreshAppBarDismissed } = storeToRefs(eventsStore)
+const display = useDisplay()
 const now = ref(Date.now())
-const hoursBeforeStale = 24
+const hoursForStale = 24
 let intervalId = null
 
 const relativeLastSyncDate = computed(() => {
@@ -24,13 +29,18 @@ const relativeLastSyncDate = computed(() => {
     : 'N/A'
 })
 
+// Determine if the events list is stale (older than 24 hours)
 const isStale = computed(() => {
   if (!eventsStore.eventsLastSyncDate) return false
   const diffHours = (now.value - new Date(eventsStore.eventsLastSyncDate).getTime()) / 36e5
-  return diffHours > hoursBeforeStale
+  return diffHours > hoursForStale
 })
 
-const refresh = () => {
+const dismissRefreshAppBar = () => {
+  eventsStore.isRefreshAppBarDismissed = true
+}
+
+const refreshEvents = () => {
   eventsStore.fetchEvents({ forceRefresh: true })
     .catch((error) => {
       console.error('Error refreshing events:', error)
diff --git a/src/constants.js b/src/constants.js
index f0dac22..7722584 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -4,6 +4,7 @@ export default {
   APP_NAME: 'CinéPleinAir',
   APP_DESCRIPTION: 'Trouvez et partagez les séances de cinéma en plein air près de chez vous.',
   APP_URL: 'https://cinepleinair.org',
+  APP_STORE_PREFIX: 'cinepleinair',
   APP_GITHUB_URL: 'https://github.com/raphodn/open-air-events',
   OEDB_WIKI_URL: 'https://wiki.openstreetmap.org/wiki/OpenEventDatabase',
   OEDB_API_URL: 'https://api.openeventdatabase.org',
diff --git a/src/stores/events.js b/src/stores/events.js
index 690807f..93a9497 100644
--- a/src/stores/events.js
+++ b/src/stores/events.js
@@ -1,11 +1,13 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 import oedbService from '../services/openeventdatabase.js'
+import constants from '../constants.js'
 
 export const useEventsStore = defineStore('events', () => {
   const events = ref([])
   const eventsCount = ref(0)
   const eventsLastSyncDate = ref(null)
+  const isRefreshAppBarDismissed = ref(false)
 
   const upcomingEvents = computed(() => {
     const now = new Date()
@@ -33,6 +35,7 @@ export const useEventsStore = defineStore('events', () => {
     events,
     eventsCount,
     eventsLastSyncDate,
+    isRefreshAppBarDismissed,
     upcomingEvents,
     pastEvents,
     fetchEvents,
@@ -41,8 +44,8 @@ export const useEventsStore = defineStore('events', () => {
 },
 {
   persist: {
-    key: 'events-store',
+    key: `${constants.APP_STORE_PREFIX}-events`,
     storage: localStorage,
-    paths: ['events', 'eventsCount', 'eventsLastSyncDate']
+    paths: ['events', 'eventsCount', 'eventsLastSyncDate', 'isRefreshAppBarDismissed']
   }
 })