Remember uploaded images

app/pages/index.vue

@@ -7,12 +7,14 @@ watch(loggedIn, () => refresh());
 
 <template>
   <h1 class="text-primary text-3xl">{{ $t('hello') }}</h1>
-  <VaButton icon="refresh" @click="refresh" :disabled="pending" />
+  <VaButton icon="refresh" @click="refresh" :disabled="pending">{{
+    $t('layouts.refresh')
+  }}</VaButton>
 
   <div v-if="data">
     <div v-if="data.own !== null">
       <h2 class="my-4 text-2xl font-bold">Joined hunts:</h2>
-      <div class="lg-grid-cols-3 grid grid-cols-1 gap-4 md:grid-cols-2">
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
         <VaCard
           v-for="hunt in data.own"
           :key="hunt.id"
@@ -20,6 +22,12 @@ watch(loggedIn, () => refresh());
           :to="$localePath(`/hunt/${sluggy(hunt)}`)"
         >
           <VaCardTitle>{{ hunt.name }}</VaCardTitle>
+
+          <ClickableImage
+            v-if="hunt.picture"
+            :src="hunt.picture?.url"
+            :title="hunt.name"
+          />
           <VaCardContent>
             <h3 class="text-xl">{{ hunt.name }}</h3>
             {{ hunt.description }}
@@ -62,13 +70,18 @@ watch(loggedIn, () => refresh());
     <div class="mt-8">
       <VaDivider />
       <h2 class="my-4 text-2xl font-bold">Open to join hunts:</h2>
-      <div class="lg-grid-cols-3 grid grid-cols-1 gap-4 md:grid-cols-2">
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
         <VaCard
           v-for="hunt in data.others"
           :key="hunt.id"
           :to="$localePath(`/hunt/${sluggy(hunt)}`)"
         >
           <VaCardTitle>{{ hunt.name }}</VaCardTitle>
+          <ClickableImage
+            v-if="hunt.picture"
+            :src="hunt.picture?.url"
+            :title="hunt.name"
+          />
           <VaCardContent>
             <h3 class="text-xl">{{ hunt.name }}</h3>
             {{ hunt.description }}