From 3bd4d7ba523996019e86aa70c64951350cf3336c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Mon, 4 Dec 2023 22:46:23 +0100
Subject: [PATCH] Lepsi verejna cast, ssr, lepsi prace s fotkamaa

---
 src/boot/apollo.js                            |   2 +-
 src/components/ContentCard.vue                |  32 ++++++
 .../aircrafts/AircraftDetailCard.vue          |  66 -----------
 .../aircrafts/AircraftDetailSkeleton.vue      |   6 +-
 src/components/aircrafts/AircraftForm.vue     |  13 +--
 src/components/aircrafts/AircraftInfo.vue     |  30 +++++
 src/components/aircrafts/AircraftsList.vue    |   4 +-
 .../copilots/CopilotDetailSkeleton.vue        |   2 +-
 src/components/flights/FlightBasicInfo.vue    |  37 +++++-
 src/components/flights/FlightTrackMap.vue     |   6 +-
 src/components/flights/FlightsList.vue        |  33 +++---
 .../photos/BatchPhotoFormDialog.vue           |  34 ++++--
 src/components/photos/PhotoFormDialog.vue     |  29 ++++-
 src/components/photos/PhotoGallery.vue        |  89 ++++++++++-----
 src/components/photos/PhotosEditorList.vue    |  74 +++++++-----
 .../photos/TitlePhotoWithGallery.vue          |  31 +++++
 src/css/quasar.variables.scss                 |   2 +-
 src/graphql/fragments/aircraft.js             |  37 ++++--
 src/graphql/fragments/aircraft_basic.js       |  14 +++
 src/graphql/fragments/copilot.js              |   5 +
 src/graphql/fragments/flight.js               |  51 +++++----
 src/graphql/fragments/flight_list.js          |   6 +-
 src/graphql/fragments/organization.js         |   2 +-
 src/graphql/fragments/photo.js                |   9 +-
 src/graphql/fragments/poi.js                  |  37 ++++--
 src/graphql/mutations/aircrafts.js            |  10 +-
 src/graphql/mutations/flight.js               |  10 +-
 src/graphql/mutations/poi.js                  |  10 +-
 src/graphql/queries/aircrafts.js              |  18 +--
 src/graphql/queries/copilots.js               |  16 +++
 src/graphql/queries/event.js                  |   2 +-
 src/graphql/queries/flights.js                |  31 ++++-
 src/graphql/queries/photo.js                  |  20 ++++
 src/graphql/queries/poi.js                    |  22 +++-
 src/layouts/ProfileLayout.vue                 |   7 +-
 .../profile/aircraft/AircraftDetailPage.vue   |  73 ++++++++----
 .../profile/aircraft/EditAircraftPage.vue     |  69 ++++++++---
 .../profile/copilot/CopilotDetailPage.vue     |  48 ++++++--
 src/pages/profile/event/EventDetailPage.vue   |   2 +-
 src/pages/profile/flight/EditFlightPage.vue   |  98 +++++++++-------
 src/pages/profile/flight/FlightDetailPage.vue | 107 +++++++++---------
 src/pages/profile/flight/FlightsPage.vue      |   2 +-
 src/pages/profile/flight/PhotoEditorPage.vue  |   2 +-
 .../profile/poi/EditPointOfInterestPage.vue   |  53 ++++++++-
 .../profile/poi/PointOfInterestDetailPage.vue |  69 +++++++----
 src/pages/public/AircraftDetailPage.vue       |  72 ++++++++++++
 src/pages/public/PilotProfilePage.vue         |   4 +-
 .../public/PointOfInterestDetailPage.vue      |  64 +++++++++++
 src/pages/public/PointsOfInterestMapPage.vue  |   7 ++
 .../public/pilotProfile/CopilotDetailPage.vue |  58 +++++++---
 .../public/pilotProfile/EventDetailPage.vue   |   2 +-
 .../public/pilotProfile/FlightDetailPage.vue  |  41 +++----
 .../public/pilotProfile/FlightsListPage.vue   |   7 +-
 src/router/routes.js                          |   7 +-
 src/stores/Aircrafts.js                       |  17 ++-
 src/stores/Copilots.js                        |  12 +-
 src/stores/Flights.js                         |  88 +++++++-------
 src/stores/Photo.js                           |  79 -------------
 src/stores/Photos.js                          |  93 +++++++++++++++
 src/stores/PointsOfInterest.js                |  76 +++++++------
 src/stores/User.js                            |   1 +
 src/stores/helpers.js                         |   2 +-
 62 files changed, 1331 insertions(+), 619 deletions(-)
 create mode 100644 src/components/ContentCard.vue
 delete mode 100644 src/components/aircrafts/AircraftDetailCard.vue
 create mode 100644 src/components/aircrafts/AircraftInfo.vue
 create mode 100644 src/components/photos/TitlePhotoWithGallery.vue
 create mode 100644 src/graphql/fragments/aircraft_basic.js
 create mode 100644 src/pages/public/AircraftDetailPage.vue
 create mode 100644 src/pages/public/PointOfInterestDetailPage.vue
 create mode 100644 src/pages/public/PointsOfInterestMapPage.vue
 delete mode 100644 src/stores/Photo.js
 create mode 100644 src/stores/Photos.js

diff --git a/src/boot/apollo.js b/src/boot/apollo.js
index dfd699a..00cce77 100644
--- a/src/boot/apollo.js
+++ b/src/boot/apollo.js
@@ -7,7 +7,7 @@ import {Notify} from "quasar";
 import {errorObject, warningObject} from "src/composables/dialog";
 
 const handleRefreshToken = (store, forward, operation) => {
-  if (!operation._refreshUnauthorizedUser) return;
+  if (!operation.query?._refreshUnauthorizedUser) return;
 
   return fromPromise(useUserStore(store).refreshAccessToken()
     .catch((error) => {
diff --git a/src/components/ContentCard.vue b/src/components/ContentCard.vue
new file mode 100644
index 0000000..d277fdd
--- /dev/null
+++ b/src/components/ContentCard.vue
@@ -0,0 +1,32 @@
+<script setup>
+import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
+
+const props = defineProps({
+  titlePhoto: {
+    type: Object,
+    required: false
+  },
+  title: {
+    type: String,
+    required: false
+  }
+})
+
+</script>
+
+<template>
+  <q-card class="flight-detail-card q-mb-lg">
+    <TitlePhotoWithGallery
+      v-if="titlePhoto"
+      :photo="titlePhoto"
+      :title="title"
+    />
+
+    <q-card-actions>
+      <slot name="actions" />
+    </q-card-actions>
+
+    <slot name="content"/>
+
+  </q-card>
+</template>
diff --git a/src/components/aircrafts/AircraftDetailCard.vue b/src/components/aircrafts/AircraftDetailCard.vue
deleted file mode 100644
index 02e0d1f..0000000
--- a/src/components/aircrafts/AircraftDetailCard.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script setup>
-import {confirmObject} from "src/composables/dialog";
-import {useQuasar} from "quasar";
-import {storeToRefs} from "pinia";
-import {useUserStore} from "stores/User";
-
-const props = defineProps({
-  aircraft: {
-    type: Object,
-    required: true
-  }
-});
-
-const emits = defineEmits(["delete"]);
-const $q = useQuasar();
-
-const loggedUser = storeToRefs(useUserStore()).user;
-
-const confirmDelete = (aircraftId) => {
-  $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
-    .onOk(() => {
-      emits("delete", aircraftId);
-    });
-};
-</script>
-
-<template>
-  <q-card class="q-mx-md q-my-md flight-detail-card">
-    <q-img :src="aircraft.photoUrl" v-if="aircraft.photoUrl"/>
-
-    <q-card-actions class="q-my-md" v-if="aircraft.createdById === loggedUser.id">
-      <div class="col-grow">
-        <q-btn
-          flat
-          :to='{name: "aircraftEdit", params: {id: aircraft.id}}'
-          icon="edit"
-          text-color="primary"
-          label="Upravit"
-        />
-      </div>
-      <q-btn @click="confirmDelete(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
-    </q-card-actions>
-
-    <q-card-section>
-      <q-list>
-
-        <q-item v-if="aircraft.organization">
-          Provozovatel: {{ aircraft.organization.name }}
-        </q-item>
-
-        <q-item v-if="aircraft.manufacturer">
-          Výrobce: {{ aircraft.manufacturer }}
-        </q-item>
-        <q-item v-if="aircraft.model">
-          Model: {{ aircraft.model }}
-        </q-item>
-        <q-item v-if="aircraft.seats">
-          Počet míst: {{ aircraft.seats }}
-        </q-item>
-      </q-list>
-    </q-card-section>
-    <q-card-section>
-      <article v-html="aircraft.description" class="q-my-md"/>
-    </q-card-section>
-  </q-card>
-</template>
diff --git a/src/components/aircrafts/AircraftDetailSkeleton.vue b/src/components/aircrafts/AircraftDetailSkeleton.vue
index 2368f8f..73e18e4 100644
--- a/src/components/aircrafts/AircraftDetailSkeleton.vue
+++ b/src/components/aircrafts/AircraftDetailSkeleton.vue
@@ -15,9 +15,9 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
     <q-card-section class="q-my-md">
       <BasicTextSkeleton :paragraphs="1" :lines="2"/>
     </q-card-section>
-  </q-card>
 
-  <q-card class="flight-detail-card" flat>
-    <BasicListSkeleton :items-count-min="1" :items-count-max="4"/>
+
+    <h3>Lety</h3>
+    <BasicListSkeleton :items="5" />
   </q-card>
 </template>
diff --git a/src/components/aircrafts/AircraftForm.vue b/src/components/aircrafts/AircraftForm.vue
index 6451bb7..9efe705 100644
--- a/src/components/aircrafts/AircraftForm.vue
+++ b/src/components/aircrafts/AircraftForm.vue
@@ -14,8 +14,8 @@ const formData = reactive({
   seats: null,
   manufacturer: "",
   description: "",
-  photo: null,
-  organization: null
+  organization: null,
+  isPublic: false
 });
 
 const props = defineProps({
@@ -84,8 +84,6 @@ onMounted(() => {
       v-bind="commonProps"
     />
 
-
-
     <q-input
       type="textarea"
       v-model="formData.description"
@@ -93,10 +91,7 @@ onMounted(() => {
       v-bind="commonProps"
     />
 
-    <q-file v-model="formData.photo" label="Fotografie" v-bind="commonProps">
-      <template #prepend>
-        <q-icon name="upload"/>
-      </template>
-    </q-file>
+    <q-checkbox v-model="formData.isPublic" label="Veřejné?" v-bind="commonProps"/>
+
   </FormWrapper>
 </template>
diff --git a/src/components/aircrafts/AircraftInfo.vue b/src/components/aircrafts/AircraftInfo.vue
new file mode 100644
index 0000000..5e3717e
--- /dev/null
+++ b/src/components/aircrafts/AircraftInfo.vue
@@ -0,0 +1,30 @@
+<script setup>
+import {useQuasar} from "quasar";
+
+const props = defineProps({
+  aircraft: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+    <q-list>
+      <q-item v-if="aircraft.organization">
+        Provozovatel: {{ aircraft.organization.name }}
+      </q-item>
+
+      <q-item v-if="aircraft.manufacturer">
+        Výrobce: {{ aircraft.manufacturer }}
+      </q-item>
+      <q-item v-if="aircraft.model">
+        Model: {{ aircraft.model }}
+      </q-item>
+      <q-item v-if="aircraft.seats">
+        Počet míst: {{ aircraft.seats }}
+      </q-item>
+    </q-list>
+
+    <article v-html="aircraft.description" class="q-my-md"/>
+</template>
diff --git a/src/components/aircrafts/AircraftsList.vue b/src/components/aircrafts/AircraftsList.vue
index e0cb78c..cf55784 100644
--- a/src/components/aircrafts/AircraftsList.vue
+++ b/src/components/aircrafts/AircraftsList.vue
@@ -21,8 +21,8 @@ useAppStore().setPageTitle("Letadla");
       v-for="aircraft of props.items" :key="aircraft"
     >
       <q-item-section avatar>
-        <q-avatar v-if="aircraft.photoUrl">
-          <img :src="aircraft.photoUrl" alt=""/>
+        <q-avatar v-if="aircraft.titlePhoto">
+          <img :src="aircraft.titlePhoto.url" alt=""/>
         </q-avatar>
         <q-avatar color="teal" text-color="white" icon="flight" v-else/>
       </q-item-section>
diff --git a/src/components/copilots/CopilotDetailSkeleton.vue b/src/components/copilots/CopilotDetailSkeleton.vue
index a58eca0..3f0e335 100644
--- a/src/components/copilots/CopilotDetailSkeleton.vue
+++ b/src/components/copilots/CopilotDetailSkeleton.vue
@@ -4,5 +4,5 @@ import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 
 <template>
   <q-skeleton type="rect" class="q-my-lg" style="width: 200px; height: 40px" />
-    <BasicListSkeleton :items-count-min="1" :items-count-max="5"/>
+    <BasicListSkeleton :items="4"/>
 </template>
diff --git a/src/components/flights/FlightBasicInfo.vue b/src/components/flights/FlightBasicInfo.vue
index dade41b..3e2f944 100644
--- a/src/components/flights/FlightBasicInfo.vue
+++ b/src/components/flights/FlightBasicInfo.vue
@@ -11,7 +11,18 @@ const props = defineProps({
     type: Object,
     required: false,
     default: null
+  },
+  aircraftDetailRoute: {
+    type: Object,
+    required: false,
+    default: null
+  },
+  poiDetailRoute: {
+    type: Object,
+    required: false,
+    default: null
   }
+
 })
 </script>
 
@@ -22,7 +33,15 @@ const props = defineProps({
         <q-icon name="flight"/>
       </q-item-section>
       <q-item-section>
-        {{ flight.aircraft.callSign }}
+        <router-link
+            :to="{...aircraftDetailRoute, params: {...aircraftDetailRoute.params, id: flight.aircraft.id}}"
+            v-if="aircraftDetailRoute"
+        >
+          {{ flight.aircraft.callSign }}
+        </router-link>
+        <template v-else>
+          {{ flight.aircraft.callSign }}
+        </template>
       </q-item-section>
     </q-item>
 
@@ -53,12 +72,18 @@ const props = defineProps({
 
         <q-item v-for="poi in flight.track" :key="poi.id">
           <q-item-section avatar>
-            <q-icon name="place" v-if="poi.pointOfInterest" />
-            <q-icon name="local_airport" v-if="poi.airport" />
+            <q-icon name="place" v-if="poi.pointOfInterest"/>
+            <q-icon name="local_airport" v-if="poi.airport"/>
           </q-item-section>
           <q-item-section>
             <template v-if="poi.pointOfInterest">
-              {{ poi.pointOfInterest.name }}
+              <router-link
+                  :to="{name: poiDetailRoute.name, params: {...poiDetailRoute.params, id: poi.pointOfInterest.id}}"
+                  v-if="poi.pointOfInterest.isPublic"
+              >
+                {{ poi.pointOfInterest.name }}
+              </router-link>
+              <template v-else>{{ poi.pointOfInterest.name }}</template>
             </template>
             <span v-if="poi.airport">
               <strong>{{ poi.airport.icaoCode }}</strong> ({{ poi.airport.name }}),
@@ -98,8 +123,8 @@ const props = defineProps({
           </q-item-section>
           <q-item-section>
             <router-link
-              v-if="copilotDetailRoute"
-              :to="{name: copilotDetailRoute.name, params: {...copilotDetailRoute.params, id: copilot.id}}"
+                v-if="copilotDetailRoute"
+                :to="{name: copilotDetailRoute.name, params: {...copilotDetailRoute.params, id: copilot.id}}"
             >
               {{ copilot.name }}
             </router-link>
diff --git a/src/components/flights/FlightTrackMap.vue b/src/components/flights/FlightTrackMap.vue
index 38ba255..c3cc94d 100644
--- a/src/components/flights/FlightTrackMap.vue
+++ b/src/components/flights/FlightTrackMap.vue
@@ -7,11 +7,15 @@ const props = defineProps({
   flight: {
     type: Object,
     required: true
+  },
+  photos: {
+    type: Array,
+    required: false,
   }
 })
 
 
-const mapPhotos = computed(() => props.flight.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
+const mapPhotos = computed(() => props.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
 const poisWithGPS = computed(() => props.flight.track.map(poi => poi.pointOfInterest || poi.airport));
 
 const mapMarkers = [props.flight.takeoffAirport].concat(poisWithGPS.value).concat([props.flight.landingAirport]);
diff --git a/src/components/flights/FlightsList.vue b/src/components/flights/FlightsList.vue
index c27966e..62503a6 100644
--- a/src/components/flights/FlightsList.vue
+++ b/src/components/flights/FlightsList.vue
@@ -8,18 +8,18 @@ const props = defineProps({
     type: Array,
     required: true
   },
-  routeDetail: {
-    type: Object,
-    required: false,
-    default: () => ({name: 'flightDetail', params: {}})
-  },
-  displayVisibilityInfo: {
+  public: {
     type: Boolean,
-    required: false,
-    default: true
-  }
+    required: true
+  },
 });
 
+const routeDetail = (flight) => {
+  if (props.public)
+    return {name: "publicFlightDetail", params: {username: flight.pilot.publicUsername, id: flight.id}}
+  else
+    return {name: "flightDetail", params: {id: flight.id}}
+};
 </script>
 
 <template>
@@ -28,16 +28,22 @@ const props = defineProps({
       v-for="flight of items" :key="flight"
       ripple
       clickable
-      :to="{name: routeDetail.name, params: {...routeDetail.params, id: flight.id}}"
+      :to="routeDetail(flight)"
     >
       <q-item-section avatar>
-        <AvatarFromPhoto :size="120" v-if="flight.coverPhoto" :src="flight.coverPhoto.thumbnailUrl"/>
+        <AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
       </q-item-section>
       <q-item-section>
         <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
 
+        <div class="text-secondary" v-if="props.public">
+          <q-icon name="support_agent"/>
+          @{{flight.pilot.publicUsername}}
+        </div>
+
         <div class="text-secondary" v-if="flight.copilot">
           <q-icon name="person"/>
+          {{ flight.pilot.name }}
           {{ flight.copilot.name }}
         </div>
 
@@ -51,12 +57,13 @@ const props = defineProps({
         </div>
 
         <div class="text-secondary" v-if="flight.event">
-          <q-icon name="event" />
+          <q-icon name="event"/>
           {{ flight.event.name }}
         </div>
       </q-item-section>
 
-      <q-item-section side top v-if="flight.isPublic && displayVisibilityInfo">
+      <q-item-section side top v-if="flight.isPublic && !props.public">
+        <!-- Zobraz jen v adminu -->
         <q-icon name="visibility"></q-icon>
       </q-item-section>
     </q-item>
diff --git a/src/components/photos/BatchPhotoFormDialog.vue b/src/components/photos/BatchPhotoFormDialog.vue
index 72a9919..dd9024e 100644
--- a/src/components/photos/BatchPhotoFormDialog.vue
+++ b/src/components/photos/BatchPhotoFormDialog.vue
@@ -12,13 +12,21 @@ const props = defineProps({
   },
   locations: {
     type: Array
-  }
+  },
+  aircraft: {
+    type: Object
+  },
+  copilots: {
+    type: Array
+  },
 });
 
 const formData = ref({
   name: "",
   description: "",
   pointOfInterest: null,
+  copilots: [],
+  isAircraft: false,
   photoIds: []
 });
 
@@ -34,23 +42,33 @@ const setup = () => {
 <template>
   <DialogWrapper :formData="formData" @show="setup()">
     <q-card-section class="text-center">
-<!--      <q-scroll-area style="min-height: 80px; max-height: 150px">-->
         <q-img :src="photo.thumbnailUrl" width="80px" class="q-ma-sm" v-for="photo in photos" :key="photo.thumbnailUrl"/>
-<!--        {{ photos }}-->
-<!--      </q-scroll-area>-->
     </q-card-section>
     <q-card-section>
       <FormWrapper :save-button="false">
-        <q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
-        <q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
-
         <ComboboxInput
             :options="locations"
             v-bind="commonProps"
             v-model="formData.pointOfInterest"
             :enable-new-values="false"
-            label="POI"
+            label="Místo"
         />
+
+         <q-select
+          v-if="copilots.length > 0"
+          :options="copilots"
+          v-model="formData.copilots"
+          v-bind="commonProps"
+          label="Kopiloti"
+          option-label="name"
+          option-value="id"
+          multiple
+        />
+
+        <q-checkbox v-model="formData.isAircraft" :label="`Letadlo (${aircraft.callSign})`"/>
+
+        <q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
+        <q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
       </FormWrapper>
     </q-card-section>
   </DialogWrapper>
diff --git a/src/components/photos/PhotoFormDialog.vue b/src/components/photos/PhotoFormDialog.vue
index 6404f6f..ecc666e 100644
--- a/src/components/photos/PhotoFormDialog.vue
+++ b/src/components/photos/PhotoFormDialog.vue
@@ -12,6 +12,12 @@ const props = defineProps({
   },
   locations: {
     type: Array
+  },
+  aircraft: {
+    type: Object
+  },
+  copilots: {
+    type: Array
   }
 });
 
@@ -20,7 +26,8 @@ const formData = ref({
   name: "",
   description: "",
   pointOfInterest: null,
-  isFlightCover: false
+  copilots: [],
+  isAircraft: false,
 });
 
 const setup = (() => {
@@ -33,17 +40,27 @@ const setup = (() => {
     <q-img :src="photo.thumbnailUrl"/>
     <q-card-section>
       <FormWrapper :save-button="false">
-        <q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
-        <q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
-
         <ComboboxInput
           :options="locations"
           v-bind="commonProps"
           v-model="formData.pointOfInterest"
-          label="POI"
+          label="Místo"
         />
 
-        <q-checkbox v-model="formData.isFlightCover" label="Úvodní fotografie k letu?"/>
+        <q-select
+          v-if="copilots.length > 0"
+          :options="copilots"
+          v-model="formData.copilots"
+          v-bind="commonProps"
+          label="Kopiloti"
+          option-label="name"
+          option-value="id"
+          multiple
+        />
+
+        <q-checkbox v-model="formData.isAircraft" :label="`Letadlo (${aircraft.callSign})`"/>
+        <q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
+        <q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
       </FormWrapper>
     </q-card-section>
   </DialogWrapper>
diff --git a/src/components/photos/PhotoGallery.vue b/src/components/photos/PhotoGallery.vue
index 1f27a27..85eaab3 100644
--- a/src/components/photos/PhotoGallery.vue
+++ b/src/components/photos/PhotoGallery.vue
@@ -1,17 +1,19 @@
 <script setup>
-import {onMounted, onUnmounted} from "vue";
+import {computed, onMounted, onUnmounted, ref, watch} from "vue";
 import 'photoswipe/style.css';
 import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
 import PhotoSwipeDynamicCaption from "../../../node_modules/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm";
 import PhotoCaption from "components/photos/PhotoCaption.vue";
 import PhotoSwipeLightbox from "../../../node_modules/photoswipe/dist/photoswipe-lightbox.esm"
-
+import PhotoSwipe from "../../../node_modules/photoswipe/dist/photoswipe.esm"
+import {useRoute, useRouter} from "vue-router";
+import {usePhotosStore} from "stores/Photos";
 
 const props = defineProps({
   galleryId: {
     type: String,
     required: false,
-    default: () => "randomGalleryId"
+    default: () => "photogallery"
   },
   photos: {
     type: Array,
@@ -19,46 +21,79 @@ const props = defineProps({
   }
 })
 
-let $lightbox = null;
+
+const route = useRoute();
+const $router = useRouter();
+
+let $lightbox = ref(null);
+
+const initLightbox = () => {
+  if ($lightbox.value && $lightbox.value.pswp) {
+    // lightbox already initialized
+    return
+  }
+
+  $lightbox.value = new PhotoSwipeLightbox({
+    gallery: '#' + props.galleryId,
+    children: 'a',
+    pswpModule: () => PhotoSwipe,
+  });
+
+  let captionPlugin = new PhotoSwipeDynamicCaption($lightbox.value, {
+    type: 'auto',
+  });
+
+  $lightbox.value.init();
+}
 
 onMounted(() => {
-  if (!$lightbox) {
-    $lightbox = new PhotoSwipeLightbox({
-      gallery: '#' + props.galleryId,
-      children: 'a',
-      pswpModule: () => import('photoswipe'),
-    });
+  initLightbox();
 
-    let captionPlugin = new PhotoSwipeDynamicCaption($lightbox, {
-      type: 'auto',
-    });
+  // todo: tohle nefunguje, sice se galerie zavre, ale i tak se user presmeruje na predchozi stranku
+  window.onpopstate = function (e) {
+    if (!$lightbox.value || !$lightbox.value.pswp) {
+      initLightbox();
+    }
 
-    $lightbox.init();
-  }
+    if ($lightbox.value && $lightbox.value.pswp)
+      $lightbox.value.pswp.close();
+  };
 });
+
 onUnmounted(() => {
-  if ($lightbox) {
-    $lightbox.destroy();
-    $lightbox = null;
+  if ($lightbox.value) {
+    $lightbox.value.destroy();
+    $lightbox.value = null;
   }
 });
+
+const openedPhoto = computed(() => usePhotosStore().openedPhoto);
+watch(() => [openedPhoto.value, $lightbox.value], () => {
+  if (!$lightbox.value || !openedPhoto.value) return;
+
+  const idx = props.photos.findIndex(p => p.id === openedPhoto.value.id);
+  if (idx >= 0) {
+    $lightbox.value.loadAndOpen(idx);
+    usePhotosStore().setOpenedPhoto(null);
+  }
+}, {immediate: true})
 </script>
 
 <template>
   <div :id="galleryId" class="row">
     <div class="col-6 col-sm-4 col-md-4 col-lg-3 q-pa-sm" v-for="photo in photos" :key="photo.id">
       <a
-          :href="photo.url"
-          :data-pswp-width="photo.width"
-          :data-pswp-height="photo.height"
-          target="_blank"
-          rel="noreferrer"
+        :href="photo.url"
+        :data-pswp-width="photo.width"
+        :data-pswp-height="photo.height"
+        target="_blank"
+        rel="noreferrer"
       >
         <q-img
-            spinner-color="primary"
-            class="rounded-borders"
-            :src="photo.thumbnailUrl"
-            alt=""
+          spinner-color="primary"
+          class="rounded-borders"
+          :src="photo.thumbnailUrl"
+          alt=""
         >
           <div class="absolute-bottom" v-if="photo.name !== ''">
             {{ photo.name }}
diff --git a/src/components/photos/PhotosEditorList.vue b/src/components/photos/PhotosEditorList.vue
index 4fc1344..d131a63 100644
--- a/src/components/photos/PhotosEditorList.vue
+++ b/src/components/photos/PhotosEditorList.vue
@@ -3,24 +3,29 @@ import {computed, onMounted, reactive, ref, watch} from "vue";
 import {useQuasar} from "quasar";
 import {confirmObject} from "src/composables/dialog";
 
-const $q = useQuasar();
-
-
 const props = defineProps({
   photos: {
     type: Array
   },
-});
-
-const batchEdit = ref({});
-
-onMounted(() => {
-  for (const photo of props.photos) {
-    batchEdit.value[photo.id] = false;
+  titlePhoto: {
+    type: Object,
+  },
+  showActions: {
+    type: Boolean,
+    required: false,
+    default: true
   }
 });
 
-const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate"])
+const $q = useQuasar();
+
+
+const batchEdit = ref({});
+for (const photo of props.photos) {
+  batchEdit.value[photo.id] = false;
+}
+
+const emits = defineEmits(["edit", "delete", "set-title-photo", "batch-edit", "batch-rotate"])
 
 const openEdit = (photo) => {
   emits("edit", photo);
@@ -29,20 +34,20 @@ const openEdit = (photo) => {
 
 const confirmPhotoDelete = (id) => {
   $q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
-      .onOk(() => {
-        emits("delete", id);
-      });
+    .onOk(() => {
+      emits("delete", id);
+    });
 }
 
 const confirmBatchPhotoDelete = () => {
   $q.dialog(confirmObject("Opravdu chces smazat vybrané fotky?"))
-      .onOk(() => {
-        for (const id in batchEdit.value) {
-          if (!batchEdit.value[id]) continue;
-          emits("delete", parseInt(id));
-          batchEdit.value[id] = false;
-        }
-      });
+    .onOk(() => {
+      for (const id in batchEdit.value) {
+        if (!batchEdit.value[id]) continue;
+        emits("delete", parseInt(id));
+        batchEdit.value[id] = false;
+      }
+    });
 }
 
 const handleImageClick = (photo, idx) => {
@@ -108,6 +113,10 @@ const batchOptionsProps = computed(() => ({
   class: "q-ml-lg",
   disable: !isBatchEditAllowed.value
 }));
+
+const setFlightCover = (titlePhoto) => {
+  emits("set-title-photo", titlePhoto);
+}
 </script>
 
 <template>
@@ -115,6 +124,15 @@ const batchOptionsProps = computed(() => ({
     <div class="col-6 col-sm-4 col-md-4 col-lg-3" v-for="(photo, idx) in photos" :key="photo.id">
       <q-card :class='{"q-ma-sm": true, "shadow-1": !batchEdit[photo.id], "shadow-10": batchEdit[photo.id]}'>
         <q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)" style="cursor: pointer">
+          <div class="absolute-top bg-transparent text-right">
+            <q-btn
+              icon="star"
+              :color="titlePhoto?.id === photo.id ? 'amber-9' : 'grey-6'"
+              round
+              @click.stop.prevent="setFlightCover(photo)"
+            />
+          </div>
+
           <div class="absolute-bottom" v-if="photo.name !== '' || photo.description !== ''">
             <div class="text-h6" v-if="photo.name !== ''">
               {{ photo.name }}
@@ -125,24 +143,26 @@ const batchOptionsProps = computed(() => ({
           </div>
         </q-img>
 
-        <q-card-actions align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}">
+        <q-card-actions align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}" v-if="showActions">
           <div class="col-grow">
             <q-checkbox v-model="batchEdit[photo.id]"/>
-            <q-icon name="star" v-if="photo.isFlightCover" color="red"/>
+
+            <q-icon name="flight" v-if="photo.isAircraft" size="xs" color="grey-5" />
+            <q-icon name="person" v-if="photo.copilots.length > 0" size="xs" color="grey-5" />
           </div>
-          <q-btn flat icon="edit" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}"/>
-          <q-btn flat icon="info" color="blue" @click="openEdit(photo)"/>
+          <q-btn flat icon="edit" color="blue" @click="openEdit(photo)"/>
+          <q-btn flat icon="tune" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}"/>
           <q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)"/>
         </q-card-actions>
       </q-card>
     </div>
   </div>
 
-  <q-page-sticky :offset="[50, 50]" position="bottom" v-if="photos.length > 0">
+  <q-page-sticky :offset="[50, 50]" position="bottom" v-if="photos.length > 0 && showActions">
     <q-card>
       <q-card-actions>
         <q-checkbox v-model="checkAll" label="Vybrat vše"/>
-        <q-btn v-bind="batchOptionsProps" icon="info" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
+        <q-btn v-bind="batchOptionsProps" icon="edit" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
         <q-btn v-bind="batchOptionsProps" icon="rotate_90_degrees_ccw" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('counterClockwise')"/>
         <q-btn v-bind="batchOptionsProps" icon="rotate_90_degrees_cw" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('clockwise')"/>
         <q-btn v-bind="batchOptionsProps" icon="delete" :color="isBatchEditAllowed ? 'red' : 'grey'" @click="confirmBatchPhotoDelete"/>
diff --git a/src/components/photos/TitlePhotoWithGallery.vue b/src/components/photos/TitlePhotoWithGallery.vue
new file mode 100644
index 0000000..a0413e5
--- /dev/null
+++ b/src/components/photos/TitlePhotoWithGallery.vue
@@ -0,0 +1,31 @@
+<script setup>
+import {useRoute, useRouter} from "vue-router";
+import {usePhotosStore} from "stores/Photos";
+
+const props = defineProps({
+  photo: {
+    type: Object,
+    required: true
+  },
+  title: {
+    type: String,
+    required: false
+  }
+});
+
+const route = useRoute();
+const $router = useRouter();
+const openGallery = (photo) => {
+  usePhotosStore().setOpenedPhoto(photo);
+}
+</script>
+
+<template>
+  <q-img :src="photo.url" fit="cover" :ratio="4/3" @click="openGallery(photo)" class="cursor-pointer" v-if="photo">
+    <div class="absolute-bottom custom-caption" v-if="title && title !== ''">
+      <div class="text-h5">
+        {{ title }}
+      </div>
+    </div>
+  </q-img>
+</template>
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 0c57e61..30a19c1 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -12,7 +12,7 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-$primary   : #87c8ec; //#1976D2;
+$primary   : #469ccc; //#1976D2;
 $secondary : #26A69A;
 $accent    : #9C27B0;
 
diff --git a/src/graphql/fragments/aircraft.js b/src/graphql/fragments/aircraft.js
index 5ebd0d2..1c362f7 100644
--- a/src/graphql/fragments/aircraft.js
+++ b/src/graphql/fragments/aircraft.js
@@ -1,4 +1,6 @@
 import gql from "graphql-tag";
+import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
+import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
 
 export const FRAGMENT_AIRCRAFT_FULL_INFO = gql`
 fragment aircraftFullInfo on Aircraft {
@@ -7,9 +9,15 @@ fragment aircraftFullInfo on Aircraft {
   model
   description
   manufacturer
-  photoUrl
   seats
+
   createdById
+  isPublic
+
+  titlePhoto {
+    id
+    url
+  }
 
   organization {
     id
@@ -18,15 +26,24 @@ fragment aircraftFullInfo on Aircraft {
 }
 `;
 
-export const FRAGMENT_AIRCRAFT_BASIC_INFO = gql`
-fragment aircraftBasicInfo on Aircraft {
-  id
-  callSign
-  manufacturer
+export const FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO = gql`
+fragment aircraftFullPrivateInfo on Aircraft {
+    ...aircraftFullInfo
+    photos {
+      ...photoFullInfo
 
-  organization {
-    id
-    name
-  }
+      copilots {
+          id
+          name
+      }
+    }
+
+    flights {
+      ...flightListInfo
+    }
 }
+
+${FRAGMENT_AIRCRAFT_FULL_INFO}
+${FRAGMENT_PHOTO_FULL_INFO}
+${FRAGMENT_FLIGHT_LIST_INFO}
 `;
diff --git a/src/graphql/fragments/aircraft_basic.js b/src/graphql/fragments/aircraft_basic.js
new file mode 100644
index 0000000..ec00e16
--- /dev/null
+++ b/src/graphql/fragments/aircraft_basic.js
@@ -0,0 +1,14 @@
+import gql from "graphql-tag";
+
+export const FRAGMENT_AIRCRAFT_BASIC_INFO = gql`
+fragment aircraftBasicInfo on Aircraft {
+  id
+  callSign
+  manufacturer
+
+  organization {
+    id
+    name
+  }
+}
+`;
diff --git a/src/graphql/fragments/copilot.js b/src/graphql/fragments/copilot.js
index 4d454b1..21bca89 100644
--- a/src/graphql/fragments/copilot.js
+++ b/src/graphql/fragments/copilot.js
@@ -11,5 +11,10 @@ export const FRAGMENT_COPILOT_FULL_INFO = gql`
 fragment copilotFullInfo on Copilot {
   id
   name
+
+  titlePhoto {
+    id
+    url
+  }
 }
 `;
diff --git a/src/graphql/fragments/flight.js b/src/graphql/fragments/flight.js
index 2cde488..aec3731 100644
--- a/src/graphql/fragments/flight.js
+++ b/src/graphql/fragments/flight.js
@@ -28,15 +28,28 @@ fragment flightFullInfo on Flight {
   durationMinCalculated
   isPublic
 
-  coverPhoto {
+  titlePhoto {
     thumbnailUrl
     url
+    id
   }
 
   takeoffAirport {
     ...airportInfo
   }
 
+  landingAirport {
+    ...airportInfo
+  }
+
+  landingWeatherInfo {
+    ...weatherFullInfo
+  }
+
+  takeoffWeatherInfo {
+    ...weatherFullInfo
+  }
+
   copilots {
     id
     name
@@ -73,30 +86,30 @@ fragment flightFullInfo on Flight {
     landingDuration
   }
 
-  landingAirport {
-    ...airportInfo
-  }
-
-  landingWeatherInfo {
-    ...weatherFullInfo
-  }
-
-  takeoffWeatherInfo {
-    ...weatherFullInfo
-  }
-
   aircraft {
     ...aircraftFullInfo
   }
-
-  photos {
-    ...photoFullInfo
-  }
 }
-
-${FRAGMENT_PHOTO_FULL_INFO}
 ${FRAGMENT_AIRCRAFT_FULL_INFO}
 ${FRAGMENT_AIRPORT_INFO}
 ${FRAGMENT_POI_FULL_INFO}
 ${FRAGMENT_WEATHER_FULL_INFO}
 `;
+
+
+export const FRAGMENT_FLIGHT_FULL_PRIVATE_INFO = gql`
+fragment flightFullPrivateInfo on Flight {
+    ...flightFullInfo
+    photos {
+        ...photoFullInfo
+
+        copilots {
+            id
+            name
+        }
+      }
+}
+
+${FRAGMENT_FLIGHT_FULL_INFO}
+${FRAGMENT_PHOTO_FULL_INFO}
+    `;
diff --git a/src/graphql/fragments/flight_list.js b/src/graphql/fragments/flight_list.js
index b0a03f4..2e5eb25 100644
--- a/src/graphql/fragments/flight_list.js
+++ b/src/graphql/fragments/flight_list.js
@@ -1,6 +1,6 @@
 import gql from "graphql-tag";
 import {FRAGMENT_AIRPORT_INFO} from "src/graphql/fragments/airport";
-import {FRAGMENT_AIRCRAFT_BASIC_INFO} from "src/graphql/fragments/aircraft";
+import {FRAGMENT_AIRCRAFT_BASIC_INFO} from "src/graphql/fragments/aircraft_basic";
 
 export const FRAGMENT_FLIGHT_LIST_INFO = gql`
 fragment flightListInfo on Flight {
@@ -11,13 +11,15 @@ fragment flightListInfo on Flight {
   durationMinCalculated
   isPublic
 
-  coverPhoto {
+  titlePhoto {
     thumbnailUrl
   }
 
   track {
     pointOfInterest {
+      id
       name
+      isPublic
     }
     airport {
       icaoCode
diff --git a/src/graphql/fragments/organization.js b/src/graphql/fragments/organization.js
index edf2409..d83478b 100644
--- a/src/graphql/fragments/organization.js
+++ b/src/graphql/fragments/organization.js
@@ -1,5 +1,5 @@
 import gql from "graphql-tag";
-import {FRAGMENT_AIRCRAFT_BASIC_INFO} from "src/graphql/fragments/aircraft";
+import {FRAGMENT_AIRCRAFT_BASIC_INFO} from "src/graphql/fragments/aircraft_basic";
 
 export const FRAGMENT_ORGANIZATION_LIST_INFO = gql`
 fragment organizationListInfo on Organization {
diff --git a/src/graphql/fragments/photo.js b/src/graphql/fragments/photo.js
index fbf2749..2c20bc0 100644
--- a/src/graphql/fragments/photo.js
+++ b/src/graphql/fragments/photo.js
@@ -9,10 +9,7 @@ export const FRAGMENT_PHOTO_FULL_INFO = gql`
     name
     description
     flightId
-    pointOfInterest {
-      id
-      name
-    }
+    isAircraft
     width
     height
     isFlightCover
@@ -21,4 +18,8 @@ export const FRAGMENT_PHOTO_FULL_INFO = gql`
     gpsAltitude
     terrainElevation
     exposedAt
+    copilots {
+      id
+      name
+    }
 }`;
diff --git a/src/graphql/fragments/poi.js b/src/graphql/fragments/poi.js
index ac8f1a6..ef7421d 100644
--- a/src/graphql/fragments/poi.js
+++ b/src/graphql/fragments/poi.js
@@ -1,6 +1,8 @@
 import gql from "graphql-tag";
+import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
 import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
 
+
 export const FRAGMENT_POI_LIST_INFO = gql`
 fragment pointOfInterestListInfo on PointOfInterest {
   id
@@ -22,20 +24,37 @@ fragment pointOfInterestFullInfo on PointOfInterest {
   gpsLatitude
   gpsLongitude
   createdById
+
+  titlePhoto {
+    id
+    url
+  }
+
   type {
     id
     name
   }
-  flights {
-    ...flightListInfo
-  }
-  photos {
-    thumbnailUrl
-    url
-    name
-    description
-  }
+}
+`;
+
+export const FRAGMENT_POI_FULL_PRIVATE_INFO = gql`
+fragment pointOfInterestFullPrivateInfo on PointOfInterest {
+    ...pointOfInterestFullInfo
+    flights {
+      ...flightListInfo
+    }
+
+    photos {
+      ...photoFullInfo
+
+      copilots {
+          id
+          name
+      }
+    }
 }
 
+${FRAGMENT_POI_FULL_INFO}
+${FRAGMENT_PHOTO_FULL_INFO}
 ${FRAGMENT_FLIGHT_LIST_INFO}
 `;
diff --git a/src/graphql/mutations/aircrafts.js b/src/graphql/mutations/aircrafts.js
index c33f0de..39b513f 100644
--- a/src/graphql/mutations/aircrafts.js
+++ b/src/graphql/mutations/aircrafts.js
@@ -1,24 +1,24 @@
 import gql from "graphql-tag";
-import {FRAGMENT_AIRCRAFT_FULL_INFO} from "src/graphql/fragments/aircraft";
+import {FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO} from "src/graphql/fragments/aircraft";
 
 export const CREATE_AIRCRAFT = gql`
   mutation createAircraft($input: CreateAircraftInput!) {
     createAircraft(input: $input) {
-      ...aircraftFullInfo
+      ...aircraftFullPrivateInfo
     }
   }
 
-  ${FRAGMENT_AIRCRAFT_FULL_INFO}
+  ${FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO}
 `;
 
 export const EDIT_AIRCRAFT = gql`
 mutation editAircraft($id: Int!, $input: EditAircraftInput!) {
   editAircraft(id: $id, input: $input) {
-    ...aircraftFullInfo
+    ...aircraftFullPrivateInfo
   }
 }
 
-  ${FRAGMENT_AIRCRAFT_FULL_INFO}
+  ${FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO}
 `;
 export const DELETE_AIRCRAFT = gql`
 mutation deleteAircraft($id: Int!) {
diff --git a/src/graphql/mutations/flight.js b/src/graphql/mutations/flight.js
index b6425f7..d4d0ad6 100644
--- a/src/graphql/mutations/flight.js
+++ b/src/graphql/mutations/flight.js
@@ -1,23 +1,23 @@
 import gql from "graphql-tag";
-import {FRAGMENT_FLIGHT_FULL_INFO} from "src/graphql/fragments/flight";
+import {FRAGMENT_FLIGHT_FULL_PRIVATE_INFO} from "src/graphql/fragments/flight";
 
 export const CREATE_FLIGHT = gql`
 mutation createFlight($input: CreateFlightInput!) {
     createFlight(input: $input) {
-      ...flightFullInfo
+      ...flightFullPrivateInfo
     }
   }
-  ${FRAGMENT_FLIGHT_FULL_INFO}
+  ${FRAGMENT_FLIGHT_FULL_PRIVATE_INFO}
 `;
 
 export const EDIT_FLIGHT = gql`
 mutation editFlight($id: Int!, $input: EditFlightInput!) {
     editFlight(id: $id, input: $input) {
-      ...flightFullInfo
+      ...flightFullPrivateInfo
     }
   }
 
-  ${FRAGMENT_FLIGHT_FULL_INFO}
+  ${FRAGMENT_FLIGHT_FULL_PRIVATE_INFO}
 `;
 
 
diff --git a/src/graphql/mutations/poi.js b/src/graphql/mutations/poi.js
index ab44170..887f534 100644
--- a/src/graphql/mutations/poi.js
+++ b/src/graphql/mutations/poi.js
@@ -1,22 +1,22 @@
 import gql from "graphql-tag";
-import {FRAGMENT_POI_FULL_INFO, FRAGMENT_POI_LIST_INFO} from "src/graphql/fragments/poi";
+import {FRAGMENT_POI_FULL_PRIVATE_INFO} from "src/graphql/fragments/poi";
 
 export const CREATE_POI = gql`
   mutation createPointOfInterest($input: CreatePointOfInterestInput!) {
     createPointOfInterest(input: $input) {
-      ...pointOfInterestFullInfo
+      ...pointOfInterestFullPrivateInfo
     }
   }
 
-  ${FRAGMENT_POI_FULL_INFO}
+  ${FRAGMENT_POI_FULL_PRIVATE_INFO}
 `;
 
 export const EDIT_POI = gql`
   mutation editPointOfInterest($id: Int!, $input: EditPointOfInterestInput!) {
     editPointOfInterest(id: $id, input: $input) {
-      ...pointOfInterestFullInfo
+      ...pointOfInterestFullPrivateInfo
     }
   }
 
-  ${FRAGMENT_POI_FULL_INFO}
+  ${FRAGMENT_POI_FULL_PRIVATE_INFO}
 `;
diff --git a/src/graphql/queries/aircrafts.js b/src/graphql/queries/aircrafts.js
index fa5553a..9416347 100644
--- a/src/graphql/queries/aircrafts.js
+++ b/src/graphql/queries/aircrafts.js
@@ -1,6 +1,5 @@
 import gql from "graphql-tag";
-import {FRAGMENT_AIRCRAFT_FULL_INFO} from "src/graphql/fragments/aircraft";
-import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
+import {FRAGMENT_AIRCRAFT_FULL_INFO, FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO} from "src/graphql/fragments/aircraft";
 
 export const AIRCRAFTS_LIST = gql`
 query AircraftsList {
@@ -16,14 +15,17 @@ ${FRAGMENT_AIRCRAFT_FULL_INFO}
 export const AIRCRAFT_DETAIL = gql`
 query AircraftDetail($id: Int!) {
   aircraft(id: $id) {
+    ...aircraftFullPrivateInfo
+  }
+}
+${FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO}
+`;
+
+export const AIRCRAFT_PUBLIC_DETAIL = gql`
+query AircraftDetail($id: Int!) {
+  aircraft(id: $id, public: true) {
     ...aircraftFullInfo
-
-    flights {
-      ...flightListInfo
-    }
-
   }
 }
 ${FRAGMENT_AIRCRAFT_FULL_INFO}
-${FRAGMENT_FLIGHT_LIST_INFO}
 `;
diff --git a/src/graphql/queries/copilots.js b/src/graphql/queries/copilots.js
index 517fd3a..29b1e4b 100644
--- a/src/graphql/queries/copilots.js
+++ b/src/graphql/queries/copilots.js
@@ -1,6 +1,7 @@
 import gql from "graphql-tag";
 import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
 import {FRAGMENT_COPILOT_FULL_INFO, FRAGMENT_COPILOT_LIST_INFO} from "src/graphql/fragments/copilot";
+import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
 
 export const COPILOTS_LIST = gql`
 query copilotsList {
@@ -17,12 +18,27 @@ query copilot($id: Int!, $pilotUsername: String) {
   copilot(id: $id, pilotUsername: $pilotUsername) {
     ...copilotFullInfo
 
+    photos {
+    ...photoFullInfo
+    }
+
     flights {
       ...flightListInfo
     }
   }
 }
 
+${FRAGMENT_PHOTO_FULL_INFO}
 ${FRAGMENT_COPILOT_FULL_INFO}
 ${FRAGMENT_FLIGHT_LIST_INFO}
 `;
+
+export const COPILOT_PUBLIC_DETAIL = gql`
+query copilot($id: Int!, $pilotUsername: String) {
+  copilot(id: $id, pilotUsername: $pilotUsername) {
+    ...copilotFullInfo
+  }
+}
+
+${FRAGMENT_COPILOT_FULL_INFO}
+`;
diff --git a/src/graphql/queries/event.js b/src/graphql/queries/event.js
index 6ecddee..b0dfd63 100644
--- a/src/graphql/queries/event.js
+++ b/src/graphql/queries/event.js
@@ -8,7 +8,7 @@ query eventsList($username: String) {
     ...eventListInfo
 
     flights {
-      coverPhoto {
+      titlePhoto {
         thumbnailUrl
       }
     }
diff --git a/src/graphql/queries/flights.js b/src/graphql/queries/flights.js
index 8c9489c..66ff632 100644
--- a/src/graphql/queries/flights.js
+++ b/src/graphql/queries/flights.js
@@ -1,19 +1,44 @@
 import gql from "graphql-tag";
-import {FRAGMENT_FLIGHT_FULL_INFO} from "src/graphql/fragments/flight";
+import {FRAGMENT_FLIGHT_FULL_INFO, FRAGMENT_FLIGHT_FULL_PRIVATE_INFO} from "src/graphql/fragments/flight";
 import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
+import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
 
 export const FLIGHTS_LIST = gql`
-query FlightsList($username: String) {
-  flights(username: $username) {
+query FlightsList {
+  flights {
     ...flightListInfo
   }
 }
 ${FRAGMENT_FLIGHT_LIST_INFO}
 `;
 
+export const FLIGHTS_PUBLIC_LIST = gql`
+query FlightsPublicList($username: String, $aircraftId: Int, $copilotId: Int, $pointOfInterestId: Int) {
+  flights(username: $username, aircraftId: $aircraftId, copilotId: $copilotId, pointOfInterestId: $pointOfInterestId, public: true) {
+    ...flightListInfo
+
+    pilot {
+      id
+      publicUsername
+    }
+  }
+}
+${FRAGMENT_FLIGHT_LIST_INFO}
+`;
+
 export const FLIGHT_DETAIL = gql`
 query FlightDetail($id: Int!, $username: String) {
   flight(id: $id, username: $username) {
+    ...flightFullPrivateInfo
+  }
+}
+
+${FRAGMENT_FLIGHT_FULL_PRIVATE_INFO}
+`;
+
+export const FLIGHT_PUBLIC_DETAIL = gql`
+query FlightPublicDetail($id: Int!, $username: String) {
+  flight(id: $id, username: $username, public: true) {
     ...flightFullInfo
   }
 }
diff --git a/src/graphql/queries/photo.js b/src/graphql/queries/photo.js
index df51a9d..c43a9f4 100644
--- a/src/graphql/queries/photo.js
+++ b/src/graphql/queries/photo.js
@@ -7,6 +7,15 @@ query photo($id: Int!) {
   photo(id: $id) {
     ...photoFullInfo
 
+    pointOfInterest {
+      id
+      name
+    }
+    copilots {
+      id
+      name
+    }
+
     adjustment {
       contrast
       saturation
@@ -28,3 +37,14 @@ query photo($id: Int!) {
 ${FRAGMENT_PHOTO_FULL_INFO}
 ${FRAGMENT_FLIGHT_LIST_INFO}
 `;
+
+export const PHOTOS_PUBLIC_LIST = gql`
+query photos($flightId: Int, $pointOfInterestId: Int, $aircraftId: Int, $copilotId: Int) {
+  photos(public: true, flightId: $flightId, pointOfInterestId: $pointOfInterestId, aircraftId: $aircraftId, copilotId: $copilotId) {
+    ...photoFullInfo
+  }
+}
+
+${FRAGMENT_PHOTO_FULL_INFO}
+`;
+
diff --git a/src/graphql/queries/poi.js b/src/graphql/queries/poi.js
index 0e943c8..d0ebfd0 100644
--- a/src/graphql/queries/poi.js
+++ b/src/graphql/queries/poi.js
@@ -1,5 +1,5 @@
 import gql from "graphql-tag";
-import {FRAGMENT_POI_FULL_INFO, FRAGMENT_POI_LIST_INFO} from "src/graphql/fragments/poi";
+import {FRAGMENT_POI_FULL_INFO, FRAGMENT_POI_FULL_PRIVATE_INFO, FRAGMENT_POI_LIST_INFO} from "src/graphql/fragments/poi";
 
 export const POI_LIST = gql`
 query poiList {
@@ -11,9 +11,29 @@ query poiList {
 ${FRAGMENT_POI_LIST_INFO}
 `;
 
+export const POI_PUBLIC_LIST = gql`
+query poiList {
+  pointsOfInterest(public: true) {
+    ...pointOfInterestListInfo
+  }
+}
+
+${FRAGMENT_POI_LIST_INFO}
+`;
+
 export const POI_DETAIL = gql`
 query poiDetail($id: Int!) {
   pointOfInterest(id: $id) {
+    ...pointOfInterestFullPrivateInfo
+  }
+}
+
+${FRAGMENT_POI_FULL_PRIVATE_INFO}
+`;
+
+export const POI_PUBLIC_DETAIL = gql`
+query poiDetail($id: Int!) {
+  pointOfInterest(id: $id, public: true) {
     ...pointOfInterestFullInfo
   }
 }
diff --git a/src/layouts/ProfileLayout.vue b/src/layouts/ProfileLayout.vue
index c99d30e..49eda5c 100644
--- a/src/layouts/ProfileLayout.vue
+++ b/src/layouts/ProfileLayout.vue
@@ -48,11 +48,12 @@ import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
 import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
 import {useAppStore} from "stores/App";
-import {useQuasar} from "quasar";
+import {useMeta, useQuasar} from "quasar";
 import {useRouter} from "vue-router";
 import {successObject} from "src/composables/dialog";
 import SidebarNavigation from "components/navigation/SidebarNavigation.vue";
 import TopMenuButton from "components/navigation/TopMenuButton.vue";
+import {metaData} from "src/composables/meta";
 
 const $q = useQuasar();
 const $router = useRouter();
@@ -69,6 +70,10 @@ onMounted(() => {
 })
 const {isQueryRunning, user} = storeToRefs(useUserStore());
 
+useMeta(() => metaData({
+  title: pageTitle.value
+}));
+
 const logout = () => {
   useUserStore().logout().then(() => {
     $q.notify(successObject("Odhlášení bylo úspěšné"));
diff --git a/src/pages/profile/aircraft/AircraftDetailPage.vue b/src/pages/profile/aircraft/AircraftDetailPage.vue
index 38aa8d0..3e7536c 100644
--- a/src/pages/profile/aircraft/AircraftDetailPage.vue
+++ b/src/pages/profile/aircraft/AircraftDetailPage.vue
@@ -1,28 +1,33 @@
 <script setup>
-import {onMounted, watch} from "vue";
-import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
-import {useQuasar} from "quasar";
+import {useMeta, useQuasar} from "quasar";
 import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
-import {successObject} from "src/composables/dialog";
+import {confirmObject, successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
 import FlightsList from "components/flights/FlightsList.vue";
-import AircraftDetailCard from "components/aircrafts/AircraftDetailCard.vue";
+import AircraftDetailCard from "components/aircrafts/AircraftInfo.vue";
 import {storeToRefs} from "pinia";
+import {useAircraftsStore} from "stores/Aircrafts";
+import {computed, watch} from "vue";
+import {metaData} from "src/composables/meta";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
+import ContentCard from "components/ContentCard.vue";
+import AircraftInfo from "components/aircrafts/AircraftInfo.vue";
+import {useUserStore} from "stores/User";
 
 const $q = useQuasar();
 const $router = useRouter();
 
 const aircraftId = parseInt(useRoute().params.id);
-onMounted(() => {
-  useAircraftsStore().fetchDetail(aircraftId);
-})
-
+useAircraftsStore().fetchDetail(aircraftId);
+const loggedUser = storeToRefs(useUserStore()).user;
 const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
 watch(() => aircraft.value, (newVal) => {
   if (!newVal) return;
 
   useAppStore().setPageTitle(newVal.callSign);
+  useMeta(() => metaData({title: newVal.callSign}));
   useAppStore().setBreadcrumbs([
     {label: "Letadla", to: {name: "aircrafts"}},
     {label: newVal.callSign}
@@ -30,29 +35,47 @@ watch(() => aircraft.value, (newVal) => {
 });
 
 const deleteAircraft = (id) => {
-  useAircraftsStore().destroy(id).then(() => {
-    $router.push({name: "aircrafts"});
-    $q.notify(successObject("Letadlo úspěšně odstraněno"));
-  });
-}
+  $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
+    .onOk(() => {
+      useAircraftsStore().destroy(id).then(() => {
+        $router.push({name: "aircrafts"});
+        $q.notify(successObject("Letadlo úspěšně odstraněno"));
+      });
+    });
+};
 </script>
 
 <template>
   <AircraftDetailSkeleton v-if="isQueryRunning || !aircraft"/>
 
   <template v-else>
-    <AircraftDetailCard
-      :aircraft="aircraft"
-      @delete="deleteAircraft"
-    />
+    <ContentCard :title-photo="aircraft.titlePhoto" :title="aircraft.callSign">
+      <template #actions v-if="aircraft.createdById === loggedUser?.id">
+        <div class="col-grow">
+          <q-btn
+            flat
+            :to='{name: "aircraftEdit", params: {id: aircraft.id}}'
+            icon="edit"
+            text-color="primary"
+            label="Upravit"
+          />
+        </div>
+        <q-btn @click="deleteAircraft(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
+      </template>
+      <template #content>
+        <q-card-section>
+          <AircraftInfo :aircraft="aircraft"/>
+
+          <PhotoGallery :photos="aircraft.photos"/>
+          <h3>Lety</h3>
+          <q-banner v-if="aircraft.flights.length === 0" class="bg-light-blue text-white">
+            Zatím žádné lety.
+          </q-banner>
+          <FlightsList :items="aircraft.flights" :public="false" v-else/>
+        </q-card-section>
+      </template>
+    </ContentCard>
 
-    <q-card class="flight-detail-card" flat>
-      <h3>Lety</h3>
-      <q-banner v-if="aircraft.flights.length === 0" class="bg-light-blue text-white">
-        Zatím žádné lety.
-      </q-banner>
-      <FlightsList :items="aircraft.flights" v-else/>
-    </q-card>
   </template>
 
 
diff --git a/src/pages/profile/aircraft/EditAircraftPage.vue b/src/pages/profile/aircraft/EditAircraftPage.vue
index e5e70f3..7dfbebb 100644
--- a/src/pages/profile/aircraft/EditAircraftPage.vue
+++ b/src/pages/profile/aircraft/EditAircraftPage.vue
@@ -3,13 +3,17 @@ import AircraftForm from "components/aircrafts/AircraftForm.vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
 import {useQuasar} from "quasar";
-import {onMounted} from "vue";
+import {computed, onMounted} from "vue";
 import AircraftEditSkeleton from "components/aircrafts/AircraftEditSkeleton.vue";
 import {successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
 import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
 import {storeToRefs} from "pinia";
 import {useUserStore} from "stores/User";
+import POIForm from "components/poi/POIForm.vue";
+import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
+import PhotosEditorList from "components/photos/PhotosEditorList.vue";
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 
 
 const $router = useRouter();
@@ -36,25 +40,64 @@ onMounted(() => {
   });
 });
 
+const setTitlePhoto = (titlePhoto) => {
+  useAircraftsStore().update(aircraftId, {titlePhotoId: titlePhoto.id}).then(() => {
+    $q.notify(successObject("Úvodní fotka nastavena"));
+  })
+}
+
+const formStep = computed(() => useRoute().params.step || "basic");
 </script>
 
 <template>
   <AircraftEditSkeleton v-if="isQueryRunning || !aircraft"/>
 
   <AccessDeniedBanner
-    v-else-if="aircraft.createdById !== loggedUser.id"
-    :route-back="{name: 'aircraftDetail', params: {id: aircraftId}}"
+      v-else-if="aircraft.createdById !== loggedUser.id"
+      :route-back="{name: 'aircraftDetail', params: {id: aircraftId}}"
   />
-
-  <q-card v-else class="q-mx-md">
-    <q-card-section>
-      <AircraftForm
-        @save="handleSave"
-        :default-values="aircraft"
-        :organizations="loggedUser.organizations"
-        :is-request-pending="isMutationRunning"
+  <template v-else>
+    <q-tabs active-color="primary" class="q-mb-lg" v-if="aircraft.photos.length > 0">
+      <q-route-tab
+          icon="edit"
+          label="Informace"
+          replace
+          :to="{name: 'aircraftEdit', params: {id: aircraft?.id, step: 'basic'}}"
+          exact
       />
-    </q-card-section>
-  </q-card>
+      <q-route-tab
+          icon="add_a_photo"
+          label="Fotky"
+          replace
+          :to="{name: 'aircraftEdit', params: {id: aircraft?.id, step: 'photo'}}"
+          exact
+      />
+    </q-tabs>
 
+    <template v-if="formStep === 'basic'">
+      <q-card class="q-mx-md">
+      <q-card-section>
+        <AircraftForm
+            @save="handleSave"
+            :default-values="aircraft"
+            :organizations="loggedUser.organizations"
+            :is-request-pending="isMutationRunning"
+        />
+      </q-card-section>
+    </q-card>
+    </template>
+    <template v-else-if="formStep === 'photo'">
+
+      <q-spinner v-if="isQueryRunning || !aircraft"/>
+
+      <PhotosEditorList
+          v-else
+          :photos="aircraft.photos"
+          :title-photo="aircraft.titlePhoto"
+          :show-actions="false"
+          @set-title-photo="setTitlePhoto"
+      />
+    </template>
+
+  </template>
 </template>
diff --git a/src/pages/profile/copilot/CopilotDetailPage.vue b/src/pages/profile/copilot/CopilotDetailPage.vue
index 8ac73ee..d4dd692 100644
--- a/src/pages/profile/copilot/CopilotDetailPage.vue
+++ b/src/pages/profile/copilot/CopilotDetailPage.vue
@@ -1,12 +1,15 @@
 <script setup>
 import {useRoute} from "vue-router";
-import {onMounted} from "vue";
+import {computed, onMounted} from "vue";
 import CopilotDetailSkeleton from "components/copilots/CopilotDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import {useCopilotsStore} from "stores/Copilots";
 import {storeToRefs} from "pinia";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
+import ContentCard from "components/ContentCard.vue";
 
 const copilotId = parseInt(useRoute().params.id);
 onMounted(() => {
@@ -20,20 +23,51 @@ onMounted(() => {
 });
 
 const {isQueryRunning, copilot} = storeToRefs(useCopilotsStore());
+
+const copilotTitlePhoto = computed(() => {
+  if (!copilot.value || copilot.value.photos.length === 0) return null;
+
+  return copilot.value.photos[0];
+});
+
 </script>
 
 <template>
   <CopilotDetailSkeleton v-if="isQueryRunning || !copilot"/>
 
   <template v-else>
-    <h3>Společné lety</h3>
 
-    <q-banner v-if="copilot.flights.length === 0" class="bg-light-blue text-white">
-      Zatím tu nemáš uložené žádné společné lety.
-    </q-banner>
+    <ContentCard :title-photo="copilotTitlePhoto" :title="copilot.name">
+      <template #actions>
+        <div class="col-grow">
+          <q-btn
+            flat
+            :to="{name: 'copilotEdit', params: {id: copilotId}}"
+            icon="edit"
+            text-color="primary"
+            label="Upravit"
+          />
+        </div>
+      </template>
+      <template #content>
+        <q-card-section>
+          <PhotoGallery :photos="copilot.photos" v-if="copilot.photos.length > 0"/>
+          <q-banner v-else class="bg-light-blue text-white">
+            Zatím tu nemáš žádné společné fotky. Po nahrání fotky můžeš označit tuto osobu a takto označené
+            fotografie se zobrazí v galerii.
+          </q-banner>
 
-    <FlightsList :items="copilot.flights" v-else/>
+          <h3>Společné lety</h3>
+
+          <q-banner v-if="copilot.flights.length === 0" class="bg-light-blue text-white">
+            Zatím tu nemáš uložené žádné společné lety.
+          </q-banner>
+
+          <FlightsList :items="copilot.flights" :public="false" v-else/>
+        </q-card-section>
+      </template>
+
+    </ContentCard>
 
-    <FAB mode="edit" :router-link="{name: 'copilotEdit', params: {id: copilotId}}"/>
   </template>
 </template>
diff --git a/src/pages/profile/event/EventDetailPage.vue b/src/pages/profile/event/EventDetailPage.vue
index 240e6b0..02f353d 100644
--- a/src/pages/profile/event/EventDetailPage.vue
+++ b/src/pages/profile/event/EventDetailPage.vue
@@ -49,7 +49,7 @@ const {isQueryRunning, event} = storeToRefs(useEventsStore());
       Zatím tu nemáš uložené žádné lety.
     </q-banner>
 
-    <FlightsList :items="event.flights" v-else/>
+    <FlightsList :items="event.flights" :public="false" v-else/>
 
     <FAB mode="edit" :router-link="{name: 'eventEdit', params: {id: eventId}}"/>
   </template>
diff --git a/src/pages/profile/flight/EditFlightPage.vue b/src/pages/profile/flight/EditFlightPage.vue
index 4e71349..d3d21a2 100644
--- a/src/pages/profile/flight/EditFlightPage.vue
+++ b/src/pages/profile/flight/EditFlightPage.vue
@@ -1,6 +1,6 @@
 <script setup>
 import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
-import {onMounted, ref, watch} from "vue";
+import {computed, onMounted, ref, watch} from "vue";
 import {useRoute} from "vue-router";
 import {useFlightsStore} from "stores/Flights";
 import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
@@ -14,8 +14,8 @@ import FlightFormCopilot from "components/flights/form/FlightFormCopilot.vue";
 import {useCopilotsStore} from "stores/Copilots";
 import FlightFormNotes from "components/flights/form/FlightFormNotes.vue";
 import FlightFormPhotos from "components/flights/form/FlightFormPhotos.vue";
-import {usePhotosStore} from "stores/Photo";
-import PhotosList from "components/photos/PhotosEditorList.vue";
+import {usePhotosStore} from "stores/Photos";
+import PhotosEditorList from "components/photos/PhotosEditorList.vue";
 import {errorObject, successObject, warningObject} from "src/composables/dialog";
 import PhotoFormDialog from "components/photos/PhotoFormDialog.vue";
 import FlightFormTrack from "components/flights/form/FlightFormTrack.vue";
@@ -67,7 +67,6 @@ const handleFlightEdit = (data) => {
 const isRequestPending = storeToRefs(useFlightsStore()).isMutationRunning;
 const uploadInProgress = ref(false);
 
-
 const handlePhotosUpload = (data) => {
   // todo udelat batch napr. po 5 requestech
   // TODO: udelat batch i pro rotace a davkove upravy (info)
@@ -101,6 +100,12 @@ const deletePhoto = (id) => {
   });
 }
 
+const setTitlePhoto = (photo) => {
+  useFlightsStore().update(flight.value.id, {titlePhotoId: photo.id}).then(f => {
+    $q.notify(successObject("Úvodní fotografie úspěšně nastavena"));
+  });
+}
+
 const rotatePhotos = ({photos, direction}) => {
   const promises = [];
   for (const photo of photos) {
@@ -123,11 +128,15 @@ const rotatePhotos = ({photos, direction}) => {
   });
 }
 
-const updateSinglePhoto = (id, formData) => usePhotosStore().update(id, formData).then((data) => {
-  const idx = _findPhotoIndex(data.id);
-  flight.value.photos[idx] = data;
-  usePointsOfInterestStore().fetch();
-});
+const updateSinglePhoto = (id, formData) => {
+  formData.copilots = formData.copilots.map(c => ({id: c.id, name: c.name}));
+
+  return usePhotosStore().update(id, formData).then((data) => {
+    const idx = _findPhotoIndex(data.id);
+    flight.value.photos[idx] = data;
+    usePointsOfInterestStore().fetch();
+  });
+}
 
 const handlePhotoUpdate = (flightId, formData) => {
   const photoId = formData.id;
@@ -170,13 +179,14 @@ const handleBatchPhotoEdit = async (flightId, data) => {
 
   const promises = [];
   for (const id of photoIds) {
-    const updateData = {};
+    const updateData = {
+      isAircraft: data.isAircraft,
+      copilots: data.copilots.map(c => ({id: c.id, name: c.name}))
+    };
     if (data.name !== '') updateData.name = data.name;
     if (data.description !== '') updateData.description = data.description;
     if (data.pointOfInterest) updateData.pointOfInterest = data.pointOfInterest;
 
-    if (Object.keys(updateData).length === 0) continue;
-
     promises.push(updateSinglePhoto(id, data));
   }
 
@@ -191,7 +201,6 @@ const handleBatchPhotoEdit = async (flightId, data) => {
     if (error > 0) $q.notify(errorObject(`Nepovedlo se uložit ${error} fotografií`))
   });
 }
-
 </script>
 
 <template>
@@ -203,11 +212,11 @@ const handleBatchPhotoEdit = async (flightId, data) => {
     <q-tab-panels v-model="formStep">
       <q-tab-panel name="basic">
         <FlightFormBasic
-            @save="handleFlightEdit"
-            :flight="flight"
-            :locations="pointsOfInterest"
-            :airports="airports"
-            :aircrafts="aircrafts"
+          @save="handleFlightEdit"
+          :flight="flight"
+          :locations="pointsOfInterest"
+          :airports="airports"
+          :aircrafts="aircrafts"
         />
       </q-tab-panel>
 
@@ -217,43 +226,50 @@ const handleBatchPhotoEdit = async (flightId, data) => {
 
       <q-tab-panel name="track">
         <FlightFormTrack
-            v-if="pointsOfInterest"
-            :flight="flight"
-            :locations="pointsOfInterest"
-            :airports="airports"
-            @save="handleFlightEdit"
+          v-if="pointsOfInterest"
+          :flight="flight"
+          :locations="pointsOfInterest"
+          :airports="airports"
+          @save="handleFlightEdit"
         />
       </q-tab-panel>
 
       <q-tab-panel name="photos">
         <FlightFormPhotos
-            :flight="flight"
-            :is-request-pending="isRequestPending || uploadInProgress"
-            @save="handlePhotosUpload"
+          :flight="flight"
+          :is-request-pending="isRequestPending || uploadInProgress"
+          @save="handlePhotosUpload"
         />
 
-        <PhotosList
-            :photos="flight.photos"
-            @edit="openPhotoEdit"
-            @batch-edit="openBatchPhotoForm"
-            @batch-rotate="rotatePhotos"
-            @delete="deletePhoto"
+        <PhotosEditorList
+          :title-photo="flight.titlePhoto"
+          :photos="flight.photos"
+          :show-actions="true"
+          @edit="openPhotoEdit"
+          @batch-edit="openBatchPhotoForm"
+          @batch-rotate="rotatePhotos"
+          @delete="deletePhoto"
+          @set-title-photo="setTitlePhoto"
         />
 
         <!-- Dialogs for photo edit -->
         <PhotoFormDialog
-            v-model="openEdit"
-            :locations="pointsOfInterest"
-            :photo="editPhoto"
-            @save="handlePhotoUpdate(flightId, $event)"
+          v-model="openEdit"
+          :copilots="flight.copilots"
+          :aircraft="flight.aircraft"
+          :locations="pointsOfInterest"
+          :photo="editPhoto"
+          @save="handlePhotoUpdate(flightId, $event)"
         />
 
         <BatchPhotoFormDialog
-            v-model="openBatchEdit"
-            :locations="pointsOfInterest"
-            :photos="editBatchPhotos"
-            @save="handleBatchPhotoEdit(flightId, $event)"
-            @delete="deletePhoto"
+          v-model="openBatchEdit"
+          :locations="pointsOfInterest"
+          :photos="editBatchPhotos"
+          :copilots="flight.copilots"
+          :aircraft="flight.aircraft"
+          @save="handleBatchPhotoEdit(flightId, $event)"
+          @delete="deletePhoto"
         />
       </q-tab-panel>
 
diff --git a/src/pages/profile/flight/FlightDetailPage.vue b/src/pages/profile/flight/FlightDetailPage.vue
index ec8627c..50f9c25 100644
--- a/src/pages/profile/flight/FlightDetailPage.vue
+++ b/src/pages/profile/flight/FlightDetailPage.vue
@@ -13,13 +13,15 @@ import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
+import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
+import ContentCard from "components/ContentCard.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
 const flightId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useUserStore()).user;
 
-onMounted(() => {flight.value
+onMounted(() => {
   useFlightsStore().fetchDetail(flightId).then(f => {
     const flightNameFormatted = flightName(f);
     useAppStore().setPageTitle(flightNameFormatted);
@@ -40,7 +42,6 @@ const handleDeleteAndRedirect = () => {
     });
 }
 
-
 const togglePublicVisibility = () => {
   const newVisibility = !flight.value.isPublic;
   useFlightsStore()
@@ -67,19 +68,14 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 <template>
   <FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
 
-  <q-card class="flight-detail-card" v-else>
-    <q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
-      <div class="absolute-bottom custom-caption">
-        <div class="text-h5"> {{ flightName(flight) }}</div>
-      </div>
-    </q-img>
+  <ContentCard :title-photo="flight.titlePhoto" :title="flightName(flight)" v-else>
 
-    <q-card-actions class="q-my-md">
+    <template #actions>
       <div class="col-grow">
         <q-btn
           @click="togglePublicVisibility"
           :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
-          :disable="!loggedUser.publicUsername"
+          :disable="!loggedUser?.publicUsername"
           flat
           :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
         />
@@ -93,53 +89,58 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
         />
       </div>
       <q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
-    </q-card-actions>
+    </template>
 
-    <q-card-section>
-      <div class="text-right">
-        <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
-      </div>
-      <FlightBasicInfo
-        :flight="flight"
-        :copilot-detail-route="{name: 'copilotDetail'}"
-      />
+    <template #content>
+      <q-card-section>
+        <div class="text-right">
+          <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
+        </div>
+        <FlightBasicInfo
+          :flight="flight"
+          :aircraft-detail-route="{name: 'aircraftDetail'}"
+          :copilot-detail-route="{name: 'copilotDetail'}"
+        />
 
-      <div class="text-right">
-        <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>
-      </div>
-      <article class="q-my-lg" v-html="flight.description"/>
+        <div class="text-right">
+          <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>
+        </div>
+        <article class="q-my-lg" v-html="flight.description"/>
 
-      <q-separator/>
+        <q-separator/>
 
-      <div class="text-right">
-        <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
-      </div>
-      <BasicInfoBanner
-        v-if="flight.photos.length === 0"
-        :route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
-      >
-        U tohoto letu nemáš nahrané žádné fotografie.
-      </BasicInfoBanner>
-      <PhotoGallery
-        v-else
-        :photos="flight.photos"
-      />
+        <div class="text-right">
+          <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
+        </div>
+        <BasicInfoBanner
+          v-if="flight.photos.length === 0"
+          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
+        >
+          U tohoto letu nemáš nahrané žádné fotografie.
+        </BasicInfoBanner>
+        <PhotoGallery
+          v-else
+          :photos="flight.photos"
+        />
 
-      <q-separator/>
+        <q-separator/>
+
+        <div class="text-right">
+          <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
+        </div>
+        <BasicInfoBanner
+          v-if="flight.track.length === 0 && !flight.gpxTrack"
+          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
+        >
+          Nemáš nastavenou žádnou trasu.
+        </BasicInfoBanner>
+        <FlightTrackMap
+          v-else
+          :flight="flight"
+          :photos="flight.photos"
+        />
+      </q-card-section>
+    </template>
+  </ContentCard>
 
-      <div class="text-right">
-        <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
-      </div>
-      <BasicInfoBanner
-        v-if="flight.track.length === 0 && !flight.gpxTrack"
-        :route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
-      >
-        Nemáš nastavenou žádnou trasu.
-      </BasicInfoBanner>
-      <FlightTrackMap
-        v-else
-        :flight="flight"
-      />
-    </q-card-section>
-  </q-card>
 </template>
diff --git a/src/pages/profile/flight/FlightsPage.vue b/src/pages/profile/flight/FlightsPage.vue
index c5b4a60..c981c6e 100644
--- a/src/pages/profile/flight/FlightsPage.vue
+++ b/src/pages/profile/flight/FlightsPage.vue
@@ -32,7 +32,7 @@ const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
     Nemáš zaznamenaný žádný let.
   </BasicInfoBanner>
 
-  <FlightsList v-else :items="flights"/>
+  <FlightsList v-else :items="flights" :public="false" />
 
   <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>
diff --git a/src/pages/profile/flight/PhotoEditorPage.vue b/src/pages/profile/flight/PhotoEditorPage.vue
index 4268ca0..4f530f9 100644
--- a/src/pages/profile/flight/PhotoEditorPage.vue
+++ b/src/pages/profile/flight/PhotoEditorPage.vue
@@ -1,7 +1,7 @@
 <script setup>
 import {useRoute} from "vue-router";
 import {onMounted, ref, watch} from "vue";
-import {usePhotosStore} from "stores/Photo";
+import {usePhotosStore} from "stores/Photos";
 import {useAppStore} from "stores/App";
 import {flightName} from "src/composables/flight";
 import VuePictureCropper from 'vue-picture-cropper';
diff --git a/src/pages/profile/poi/EditPointOfInterestPage.vue b/src/pages/profile/poi/EditPointOfInterestPage.vue
index fdc7095..e754d88 100644
--- a/src/pages/profile/poi/EditPointOfInterestPage.vue
+++ b/src/pages/profile/poi/EditPointOfInterestPage.vue
@@ -1,6 +1,6 @@
 <script setup>
 import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
-import {onMounted} from "vue";
+import {computed, onMounted} from "vue";
 import {useRoute, useRouter} from "vue-router";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {useAppStore} from "stores/App";
@@ -11,6 +11,8 @@ import {storeToRefs} from "pinia";
 import POIForm from "components/poi/POIForm.vue";
 import {useUserStore} from "stores/User";
 import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
+import PhotoEditorSkeleton from "components/photos/PhotoEditorSkeleton.vue";
+import PhotosEditorList from "components/photos/PhotosEditorList.vue";
 
 const poiId = parseInt(useRoute().params.id);
 
@@ -27,7 +29,7 @@ onMounted(() => {
   usePointsOfInterestTypeStore().fetch();
 })
 
-const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).items;
+const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).types;
 const loggedUser = storeToRefs(useUserStore()).user;
 const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());
 
@@ -39,13 +41,54 @@ const handleSave = (data) => {
     router.push({name: "poiDetail", params: {id: poiId}});
   });
 }
+
+const setTitlePhoto = (titlePhoto) => {
+  usePointsOfInterestStore().update(poiId, {titlePhotoId: titlePhoto.id}).then(() => {
+    $q.notify(successObject("Úvodní fotka nastavena"));
+  })
+}
+
+const formStep = computed(() => useRoute().params.step || "basic");
 </script>
 
 <template>
-  <POIEditSkeleton v-if="isQueryRunning"/>
+
   <AccessDeniedBanner
-    v-else-if="pointOfInterest.createdById !== loggedUser.id"
+    v-if="pointOfInterest && !isQueryRunning && pointOfInterest.createdById !== loggedUser?.id"
     :route-back="{name: 'poiDetail', params: {id: poiId}}"
   />
-  <POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
+
+  <q-tabs active-color="primary" class="q-mb-lg">
+    <q-route-tab
+      icon="edit"
+      label="Informace"
+      replace
+      :to="{name: 'poiEdit', params: {id: pointOfInterest?.id, step: 'basic'}}"
+      exact
+    />
+    <q-route-tab
+      icon="add_a_photo"
+      label="Fotky"
+      replace
+      :to="{name: 'poiEdit', params: {id: pointOfInterest?.id, step: 'photo'}}"
+      exact
+    />
+  </q-tabs>
+
+  <template v-if="formStep === 'basic'">
+    <POIEditSkeleton v-if="isQueryRunning || !pointOfInterest"/>
+    <POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
+  </template>
+  <template v-else-if="formStep === 'photo'">
+
+    <q-spinner v-if="isQueryRunning || !pointOfInterest"/>
+
+    <PhotosEditorList
+      v-else
+      :photos="pointOfInterest.photos"
+      :title-photo="pointOfInterest.titlePhoto"
+      :show-actions="false"
+      @set-title-photo="setTitlePhoto"
+    />
+  </template>
 </template>
diff --git a/src/pages/profile/poi/PointOfInterestDetailPage.vue b/src/pages/profile/poi/PointOfInterestDetailPage.vue
index 834fda1..22dfcc0 100644
--- a/src/pages/profile/poi/PointOfInterestDetailPage.vue
+++ b/src/pages/profile/poi/PointOfInterestDetailPage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted} from "vue";
+import {computed, onMounted} from "vue";
 import {useRoute} from "vue-router";
 import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
 import FAB from "components/FAB.vue";
@@ -11,6 +11,8 @@ import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
+import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
+import ContentCard from "components/ContentCard.vue";
 
 const loggedUser = storeToRefs(useUserStore()).user;
 
@@ -25,36 +27,61 @@ onMounted(() => {
 });
 
 const {isQueryRunning, pointOfInterest} = storeToRefs(usePointsOfInterestStore());
+
+const titlePhoto = computed(() => {
+  if (!pointOfInterest.value || pointOfInterest.value.photos.length === 0) return null;
+
+  return pointOfInterest.value.titlePhoto || pointOfInterest.value.photos[0];
+});
 </script>
 
 <template>
   <POIDetailSkeleton v-if="isQueryRunning || !pointOfInterest"/>
 
   <template v-else>
-    <article v-html="pointOfInterest.description" class="q-my-lg" />
 
-    <EmbeddedMap
-      v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
-      :gps-latitude="pointOfInterest.gpsLatitude"
-      :gps-longitude="pointOfInterest.gpsLongitude"
-      :zoom="13"
-    />
-    <BasicInfoBanner v-else>
-      Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
-    </BasicInfoBanner>
+    <ContentCard :title-photo="titlePhoto" :title="pointOfInterest.name">
+      <template #actions v-if="pointOfInterest.createdById === loggedUser.id">
+        <div class="col-grow">
+          <q-btn
+            flat
+            :to="{name: 'poiEdit', params:{id: pointOfInterest.id}}"
+            icon="edit"
+            text-color="primary"
+            label="Upravit"
+          />
+        </div>
+      </template>
 
-    <PhotoGallery
-      :photos="pointOfInterest.photos"
-      v-if="pointOfInterest.photos.length > 0"
-    />
+      <template #content>
+        <q-card-section>
+          <article v-html="pointOfInterest.description" class="q-my-lg"/>
 
-    <BasicInfoBanner v-else>
-      Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
-    </BasicInfoBanner>
+          <EmbeddedMap
+            v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
+            :gps-latitude="pointOfInterest.gpsLatitude"
+            :gps-longitude="pointOfInterest.gpsLongitude"
+            :zoom="13"
+          />
+          <BasicInfoBanner v-else>
+            Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
+          </BasicInfoBanner>
 
-    <FlightsList :items="pointOfInterest.flights" v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"/>
+          <PhotoGallery
+            :photos="pointOfInterest.photos"
+            v-if="pointOfInterest.photos.length > 0"
+          />
+          <BasicInfoBanner v-else>
+            Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
+          </BasicInfoBanner>
 
-    <FAB v-if="pointOfInterest.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: pointOfInterest.id}}" mode="edit"/>
+          <FlightsList
+            :items="pointOfInterest.flights"
+            :public="false"
+            v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"
+          />
+        </q-card-section>
+      </template>
+    </ContentCard>
   </template>
-
 </template>
diff --git a/src/pages/public/AircraftDetailPage.vue b/src/pages/public/AircraftDetailPage.vue
new file mode 100644
index 0000000..f902a68
--- /dev/null
+++ b/src/pages/public/AircraftDetailPage.vue
@@ -0,0 +1,72 @@
+<script>
+import {useAircraftsStore} from "stores/Aircrafts";
+
+export default {
+  preFetch({currentRoute}) {
+    return useAircraftsStore().fetchPublicDetail(currentRoute.params.id);
+  }
+}
+</script>
+
+<script setup>
+import {useRouter} from "vue-router";
+import {useMeta, useQuasar} from "quasar";
+import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
+import {confirmObject, successObject} from "src/composables/dialog";
+import {useAppStore} from "stores/App";
+import FlightsList from "components/flights/FlightsList.vue";
+import {storeToRefs} from "pinia";
+import {computed, onMounted, watch} from "vue";
+import {metaData} from "src/composables/meta";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+import ContentCard from "components/ContentCard.vue";
+import AircraftInfo from "components/aircrafts/AircraftInfo.vue";
+import {useUserStore} from "stores/User";
+import {usePhotosStore} from "stores/Photos";
+import {useFlightsStore} from "stores/Flights";
+
+const $q = useQuasar();
+const $router = useRouter();
+
+const loggedUser = storeToRefs(useUserStore()).user;
+const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
+const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+
+usePhotosStore().fetchPublic({aircraftId: aircraft.value.id});
+useFlightsStore().fetchPublic({aircraftId: aircraft.value.id})
+
+useAppStore().setPageTitle(aircraft.value.callSign);
+useMeta(() => metaData({
+  title: aircraft.value.callSign,
+  image: aircraft.value.titleImage?.url
+}));
+useAppStore().setBreadcrumbs([
+  {label: "Polétání.cz", to: {name: "homepage"}},
+  {label: aircraft.value.callSign}
+]);
+
+</script>
+
+<template>
+  <AircraftDetailSkeleton v-if="isQueryRunning || !aircraft"/>
+
+  <template v-else>
+    <ContentCard :title-photo="aircraft.titlePhoto" :title="aircraft.callSign">
+      <template #content>
+        <q-card-section>
+          <AircraftInfo :aircraft="aircraft"/>
+
+          <PhotoGallery :photos="photos"/>
+
+          <h3>Lety</h3>
+
+          <FlightsList :items="flights" :public="true" />
+        </q-card-section>
+      </template>
+    </ContentCard>
+
+  </template>
+
+
+</template>
diff --git a/src/pages/public/PilotProfilePage.vue b/src/pages/public/PilotProfilePage.vue
index a4a5669..f143ca5 100644
--- a/src/pages/public/PilotProfilePage.vue
+++ b/src/pages/public/PilotProfilePage.vue
@@ -2,8 +2,8 @@
 import {useUserStore} from "stores/User";
 
 export default {
-  preFetch({currentRoute}) {
-    return useUserStore().fetchPublicUserDetail(currentRoute.params.username);
+  preFetch({store, currentRoute}) {
+    return useUserStore(store).fetchPublicUserDetail(currentRoute.params.username);
   },
 }
 </script>
diff --git a/src/pages/public/PointOfInterestDetailPage.vue b/src/pages/public/PointOfInterestDetailPage.vue
new file mode 100644
index 0000000..35b3f4c
--- /dev/null
+++ b/src/pages/public/PointOfInterestDetailPage.vue
@@ -0,0 +1,64 @@
+<script>
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+
+export default {
+  preFetch({currentRoute, store}) {
+    return usePointsOfInterestStore(store).fetchPublicDetail(currentRoute.params.id);
+  }
+}
+</script>
+
+<script setup>
+import {storeToRefs} from "pinia";
+import {usePhotosStore} from "stores/Photos";
+import ContentCard from "components/ContentCard.vue";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+import {useFlightsStore} from "stores/Flights";
+import EmbeddedMap from "components/map/EmbeddedMap.vue";
+import FlightsList from "components/flights/FlightsList.vue";
+import {useAppStore} from "stores/App";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";
+
+const {pointOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
+const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+
+usePhotosStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
+useFlightsStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
+
+useAppStore().setPageTitle(pointOfInterest.value.name);
+useMeta(() => metaData({
+  title: pointOfInterest.value.name,
+  image: pointOfInterest.value.titlePhoto.url,
+  description: pointOfInterest.value.description,
+}))
+
+</script>
+
+<template>
+  <q-spinner v-if="isQueryRunning || !pointOfInterest"/>
+  <ContentCard :title-photo="pointOfInterest.titlePhoto" :title="pointOfInterest.name" v-else>
+    <template #content>
+
+      <q-card-section>
+
+        <article v-html="pointOfInterest.description"/>
+
+        <EmbeddedMap
+            v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
+            :gps-latitude="pointOfInterest.gpsLatitude"
+            :gps-longitude="pointOfInterest.gpsLongitude"
+            :zoom="13"
+          />
+
+        <PhotoGallery :photos="photos"/>
+
+
+        <h3>Lety</h3>
+
+        <FlightsList :public="true" :items="flights" />
+      </q-card-section>
+    </template>
+  </ContentCard>
+</template>
diff --git a/src/pages/public/PointsOfInterestMapPage.vue b/src/pages/public/PointsOfInterestMapPage.vue
new file mode 100644
index 0000000..c92a483
--- /dev/null
+++ b/src/pages/public/PointsOfInterestMapPage.vue
@@ -0,0 +1,7 @@
+<script setup>
+
+</script>
+
+<template>
+  poi
+</template>
diff --git a/src/pages/public/pilotProfile/CopilotDetailPage.vue b/src/pages/public/pilotProfile/CopilotDetailPage.vue
index e385dac..f3eeaa2 100644
--- a/src/pages/public/pilotProfile/CopilotDetailPage.vue
+++ b/src/pages/public/pilotProfile/CopilotDetailPage.vue
@@ -2,8 +2,8 @@
 import {useCopilotsStore} from "stores/Copilots";
 
 export default {
-  preFetch({currentRoute}) {
-    return useCopilotsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username);
+  preFetch({store, currentRoute}) {
+    return useCopilotsStore(store).fetchPublicDetail(currentRoute.params.id, currentRoute.params.username);
   }
 }
 </script>
@@ -13,6 +13,14 @@ import FlightsList from "components/flights/FlightsList.vue";
 import {useAppStore} from "stores/App";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import {storeToRefs} from "pinia";
+import {onMounted} from "vue";
+import {useFlightsStore} from "stores/Flights";
+import {usePhotosStore} from "stores/Photos";
+import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
+import ContentCard from "components/ContentCard.vue";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";
 
 const props = defineProps({
   pilot: {
@@ -22,25 +30,47 @@ const props = defineProps({
 });
 
 const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
 
-useAppStore().setPageTitle(`${pilot.name} + ${copilot.value.name}`);
+useAppStore().setPageTitle(`${props.pilot.name} + ${copilot.value.name}`);
 useAppStore().setBreadcrumbs([
   {to: {name: 'homepage'}, label: "Polétání.cz"},
-  {to: {name: "publicProfileDetail", params: {username: props.username}}, label: `@${props.username}`},
-  {label: props.pilot.name}
+  {to: {name: "publicProfileDetail", params: {username: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
+  {label: copilot.value.name}
 ]);
 
+useMeta(() => metaData({
+  title: copilot.value.name,
+  keywords: ["kopilot", "výlet", "fotogalerie", copilot.value.name, "létání", "fotografie"],
+  description: `Společné polétání: ${props.pilot.name} + ${copilot.value.name}.`,
+  image: copilot.value.titleImage?.url
+}));
+
+useFlightsStore().fetchPublic({copilotId: copilot.value.id});
+usePhotosStore().fetchPublic({copilotId: copilot.value.id})
 </script>
 
 <template>
-  <BasicListSkeleton v-if="isQueryRunning || !copilot" class="q-mb-md"/>
 
-  <template v-else>
-    <h3>Společné lety</h3>
-    <FlightsList
-      :items="copilot.flights"
-      :route-detail="{name: 'publicFlightDetail', params: {username: pilot.publicUsername}}"
-      class="q-mb-md"
-    />
-  </template>
+  <ContentCard v-if="!isQueryRunning" :title-photo="copilot.titlePhoto" :title="copilot.name">
+    <template #content>
+      <q-card-section>
+
+        <q-spinner v-if="arePhotosLoading"/>
+        <PhotoGallery :photos="photos" v-else/>
+
+        <h3>Společné lety</h3>
+        <FlightsListSkeleton v-if="areFlightsLoading && flights.length === 0"/>
+        <FlightsList
+          v-else
+          :items="flights"
+          :public="true"
+          class="q-mb-md"
+        />
+      </q-card-section>
+    </template>
+  </ContentCard>
+
+
 </template>
diff --git a/src/pages/public/pilotProfile/EventDetailPage.vue b/src/pages/public/pilotProfile/EventDetailPage.vue
index d26dc65..6fb457b 100644
--- a/src/pages/public/pilotProfile/EventDetailPage.vue
+++ b/src/pages/public/pilotProfile/EventDetailPage.vue
@@ -66,8 +66,8 @@ watch(() => event.value, (newVal) => {
       <FlightsList
         v-else
         :items="event.flights"
+        :public="true"
         class="q-my-lg"
-        :route-detail="{name: 'publicFlightDetail', params: {username: routeParams.username}}"
       />
 
     </template>
diff --git a/src/pages/public/pilotProfile/FlightDetailPage.vue b/src/pages/public/pilotProfile/FlightDetailPage.vue
index 32fe9fa..d925187 100644
--- a/src/pages/public/pilotProfile/FlightDetailPage.vue
+++ b/src/pages/public/pilotProfile/FlightDetailPage.vue
@@ -2,8 +2,8 @@
 import {useFlightsStore} from "stores/Flights";
 
 export default {
-  preFetch({currentRoute}) {
-    return useFlightsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username)
+  preFetch({store, currentRoute}) {
+    return useFlightsStore(store).fetchPublicDetail(currentRoute.params.id, currentRoute.params.username)
   }
 }
 </script>
@@ -19,12 +19,18 @@ import {useRoute} from "vue-router";
 import {useUserStore} from "stores/User";
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
+import ContentCard from "components/ContentCard.vue";
+import {usePhotosStore} from "stores/Photos";
+import {onMounted} from "vue";
 
 const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 const routeParams = useRoute().params;
 
 const pilot = storeToRefs(useUserStore()).publicUser;
 
+usePhotosStore().fetchPublic({flightId: flight.value.id});
+const {isQueryRunning: arePhotosLoading, photos: flightPhotos} = storeToRefs(usePhotosStore());
+
 const flightNameFormatted = flightName(flight.value);
 useAppStore().setPageTitle(flightNameFormatted);
 useAppStore().setBreadcrumbs([
@@ -37,40 +43,35 @@ useMeta(() => metaData({
     title: `${flightNameFormatted} - ${pilot.value.name}`,
     keywords: ["let", "výlet", "letadlo", pilot.value.name, flight.value.aircraft.callSign],
     description: flight.description,
-    image: flight.coverPhoto?.url
+    image: flight.titlePhoto?.url
   }
-))
+));
 </script>
 
 <template>
   <div>
     <FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
 
-    <template v-else>
-      <q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!flight.isPublic">
-        Pozor! Tento let není publikován a nebude tak dostupný pro ostatní!
-      </q-banner>
-
-      <q-card class="q-mx-md q-my-md flight-detail-card">
-        <q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
-          <div class="absolute-bottom custom-caption">
-            <div class="text-h5">{{ flightName(flight) }}</div>
-          </div>
-        </q-img>
-
+    <ContentCard :title-photo="flight.titlePhoto" :title="flightName(flight)" v-else>
+      <template #content>
         <q-card-section>
           <FlightBasicInfo
             :flight="flight"
+            :poi-detail-route="{name: 'publicPOIDetail'}"
+            :aircraft-detail-route="flight.aircraft.isPublic ? {name: 'publicAircraftDetail'} : null"
             :copilot-detail-route="{name: 'publicCopilotDetail', params: {username: routeParams.username}}"
           />
 
           <article class="q-my-lg" v-html="flight.description"/>
 
-          <PhotoGallery :photos="flight.photos"/>
+          <q-no-ssr>
+            <q-inner-loading v-if="arePhotosLoading"/>
+            <PhotoGallery :photos="flightPhotos" v-else/>
+          </q-no-ssr>
 
-          <FlightTrackMap :flight="flight"/>
+          <FlightTrackMap :flight="flight" :photos="flightPhotos"/>
         </q-card-section>
-      </q-card>
-    </template>
+      </template>
+    </ContentCard>
   </div>
 </template>
diff --git a/src/pages/public/pilotProfile/FlightsListPage.vue b/src/pages/public/pilotProfile/FlightsListPage.vue
index 19c9574..7b6ac8e 100644
--- a/src/pages/public/pilotProfile/FlightsListPage.vue
+++ b/src/pages/public/pilotProfile/FlightsListPage.vue
@@ -29,7 +29,7 @@ useAppStore().setBreadcrumbs([
   {label: `@${props.pilot.publicUsername}`},
 ])
 
-useFlightsStore().fetch(props.pilot.publicUsername);
+useFlightsStore().fetchPublic({username: props.pilot.publicUsername});
 const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 const loggedUser = storeToRefs(useUserStore()).user;
 </script>
@@ -37,7 +37,7 @@ const loggedUser = storeToRefs(useUserStore()).user;
 <template>
   <PublicFlightEventSwitcher :username="pilot?.publicUsername"/>
 
-  <FlightsListSkeleton v-if="areFlightsLoading"/>
+  <FlightsListSkeleton v-if="areFlightsLoading && flights?.length === 0"/>
 
   <q-banner class="bg-primary text-white" v-else-if="!areFlightsLoading && flights.length === 0">
     Tento pilot zatím nepublikoval žádný let.
@@ -46,8 +46,7 @@ const loggedUser = storeToRefs(useUserStore()).user;
   <template v-else>
     <FlightsList
       :items="flights"
-      :displayVisibilityInfo="loggedUser?.id === pilot?.id"
-      :route-detail="{name: 'publicFlightDetail', params: {username: pilot?.publicUsername}}"
+      :public="true"
       class="q-mb-md"
     />
   </template>
diff --git a/src/router/routes.js b/src/router/routes.js
index 0156520..fb68769 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -23,6 +23,9 @@ const routes = [
           {path: 'udalosti/:id', name: "publicEventDetail", component: () => import('pages/public/pilotProfile/EventDetailPage.vue')},
         ]
       },
+      {path: 'letadlo/:id', name: "publicAircraftDetail", component: () => import('pages/public/AircraftDetailPage.vue')},
+      {path: 'mista', name: "publicPOIs", component: () => import('pages/public/PointsOfInterestMapPage.vue')},
+      {path: 'mista/:id', name: "publicPOIDetail", component: () => import('pages/public/PointOfInterestDetailPage.vue')},
 
     ]
   },
@@ -41,7 +44,7 @@ const routes = [
       {path: 'poi', name: "poi", component: () => import('pages/profile/poi/PointsOfInterestPage.vue')},
       {path: 'poi/novy', name: "addPOI", component: () => import('pages/profile/poi/NewPointOfInterestPage.vue')},
       {path: 'poi/:id', name: "poiDetail", component: () => import('pages/profile/poi/PointOfInterestDetailPage.vue')},
-      {path: 'poi/:id/edit', name: "poiEdit", component: () => import('pages/profile/poi/EditPointOfInterestPage.vue')},
+      {path: 'poi/:id/edit/:step?', name: "poiEdit", component: () => import('pages/profile/poi/EditPointOfInterestPage.vue')},
       {path: 'kopiloti', name: "copilots", component: () => import('pages/profile/copilot/CopilotsPage.vue')},
       {path: 'kopiloti/novy', name: "addCopilot", component: () => import('pages/profile/copilot/NewCopilotPage.vue')},
       {path: 'kopiloti/:id', name: "copilotDetail", component: () => import('pages/profile/copilot/CopilotDetailPage.vue')},
@@ -49,7 +52,7 @@ const routes = [
       {path: 'letadla', name: "aircrafts", component: () => import('pages/profile/aircraft/AircraftsPage.vue')},
       {path: 'letadla/nove', name: "addAircraft", component: () => import('pages/profile/aircraft/NewAircraftsPage.vue')},
       {path: 'letadla/:id', name: "aircraftDetail", component: () => import('pages/profile/aircraft/AircraftDetailPage.vue')},
-      {path: 'letadla/:id/edit', name: "aircraftEdit", component: () => import('pages/profile/aircraft/EditAircraftPage.vue')},
+      {path: 'letadla/:id/edit/:step?', name: "aircraftEdit", component: () => import('pages/profile/aircraft/EditAircraftPage.vue')},
 
       {path: 'foto-editor/:id', name: "photoEditor", component: () => import("pages/profile/flight/PhotoEditorPage.vue")},
 
diff --git a/src/stores/Aircrafts.js b/src/stores/Aircrafts.js
index e57c2d1..77fb913 100644
--- a/src/stores/Aircrafts.js
+++ b/src/stores/Aircrafts.js
@@ -1,6 +1,6 @@
 import {defineStore} from "pinia";
 import {ref} from "vue";
-import {AIRCRAFT_DETAIL, AIRCRAFTS_LIST} from "src/graphql/queries/aircrafts";
+import {AIRCRAFT_DETAIL, AIRCRAFT_PUBLIC_DETAIL, AIRCRAFTS_LIST} from "src/graphql/queries/aircrafts";
 import {deleteFromItems, mutate, query, updateInItems} from "stores/helpers";
 import {CREATE_AIRCRAFT, EDIT_AIRCRAFT, DELETE_AIRCRAFT} from "src/graphql/mutations/aircrafts";
 
@@ -18,6 +18,14 @@ export const useAircraftsStore = defineStore('Aircrafts', () => {
       }).then(item => aircraft.value = item);
     };
 
+    const fetchPublicDetail = (id) => {
+      return query({
+        isQueryRunning,
+        query: AIRCRAFT_PUBLIC_DETAIL,
+        variables: {id, public: true},
+      }).then(item => aircraft.value = item);
+    };
+
     const fetch = () => {
       return query({
         isQueryRunning,
@@ -38,7 +46,10 @@ export const useAircraftsStore = defineStore('Aircrafts', () => {
         isMutationRunning,
         mutation: EDIT_AIRCRAFT,
         variables: {id, input}
-      }).then(item => updateInItems(aircrafts.value, 'id', item))
+      }).then(item => {
+          updateInItems(aircrafts.value, 'id', item);
+          aircraft.value = item;
+      })
     }
 
     const destroy = (id) => {
@@ -51,7 +62,7 @@ export const useAircraftsStore = defineStore('Aircrafts', () => {
 
     return {
       aircrafts, aircraft, isQueryRunning, isMutationRunning, fetchDetail, fetch, create,
-      update, destroy
+      update, destroy, fetchPublicDetail
     }
   }
 );
diff --git a/src/stores/Copilots.js b/src/stores/Copilots.js
index eda45fa..82d139d 100644
--- a/src/stores/Copilots.js
+++ b/src/stores/Copilots.js
@@ -1,5 +1,5 @@
 import {defineStore} from 'pinia'
-import {COPILOT_DETAIL, COPILOTS_LIST} from "src/graphql/queries/copilots";
+import {COPILOT_DETAIL, COPILOT_PUBLIC_DETAIL, COPILOTS_LIST} from "src/graphql/queries/copilots";
 import {CREATE_COPILOT, EDIT_COPILOT} from "src/graphql/mutations/copilot";
 import {mutate, query, updateInItems} from "stores/helpers";
 import {ref} from "vue";
@@ -18,6 +18,14 @@ export const useCopilotsStore = defineStore('Copilots', () => {
     }).then(item => copilot.value = item);
   };
 
+  const fetchPublicDetail = (id, username) => {
+    return query({
+      isQueryRunning,
+      query: COPILOT_PUBLIC_DETAIL,
+      variables: {id, pilotUsername: username},
+    }).then(item => copilot.value = item);
+  };
+
   const fetch = () => {
     return query({
       isQueryRunning,
@@ -43,6 +51,6 @@ export const useCopilotsStore = defineStore('Copilots', () => {
 
   return {
     copilot, copilots, isMutationRunning, isQueryRunning,
-    fetch, fetchDetail, create, update
+    fetch, fetchDetail, create, update, fetchPublicDetail
   }
 })
diff --git a/src/stores/Flights.js b/src/stores/Flights.js
index c606d14..53e2a0b 100644
--- a/src/stores/Flights.js
+++ b/src/stores/Flights.js
@@ -1,5 +1,5 @@
 import {defineStore} from 'pinia'
-import {FLIGHT_DETAIL, FLIGHTS_LIST} from "src/graphql/queries/flights";
+import {FLIGHT_DETAIL, FLIGHT_PUBLIC_DETAIL, FLIGHTS_LIST, FLIGHTS_PUBLIC_LIST} from "src/graphql/queries/flights";
 import {EDIT_FLIGHT, CREATE_FLIGHT, DELETE_FLIGHT} from "src/graphql/mutations/flight";
 import {deleteFromItems, mutate, query, updateInItems} from "stores/helpers";
 import {ref} from "vue";
@@ -10,54 +10,56 @@ export const useFlightsStore = defineStore('Flights', () => {
   const isMutationRunning = ref(false);
   const isQueryRunning = ref(false);
 
-   const fetchDetail = (id, username) => {
-    return query({
-      isQueryRunning,
-      query: FLIGHT_DETAIL,
-      variables: {username, id},
-    }).then(item => flight.value = item);
-  };
+  const fetchDetail = (id, username) => query({
+    isQueryRunning,
+    query: FLIGHT_DETAIL,
+    variables: {username, id},
+  }).then(item => flight.value = item);
 
-  const fetch = (username = undefined) => {
-    return query({
-      isQueryRunning,
-      query: FLIGHTS_LIST,
-      variables: {username}
-    }).then(items => flights.value = items);
-  }
+  const fetchPublicDetail = (id, username) => query({
+    isQueryRunning,
+    query: FLIGHT_PUBLIC_DETAIL,
+    variables: {username, id}
+  }).then(item => flight.value = item);
 
+  const fetch = (username = undefined) => query({
+    isQueryRunning,
+    query: FLIGHTS_LIST,
+    variables: {username}
+  }).then(items => flights.value = items);
 
-  const create = (input) => {
-    return mutate({
-      isMutationRunning,
-      mutation: CREATE_FLIGHT,
-      variables: {input},
-    }).then(item => {
-      flights.value.push(item);
-      return item;
-    })
-  }
+  const fetchPublic = ({username, aircraftId, copilotId, pointOfInterestId}) => query({
+    isQueryRunning,
+    query: FLIGHTS_PUBLIC_LIST,
+    variables: {username, aircraftId, copilotId, pointOfInterestId}
+  }).then(items => flights.value = items);
 
-  const update = (id, input) => {
-    return mutate({
-      isMutationRunning,
-      mutation: EDIT_FLIGHT,
-      variables: {id, input}
-    }).then(item => {
-      updateInItems(flights.value, 'id', item);
-      flight.value = item;
-    })
-  }
+  const create = (input) => mutate({
+    isMutationRunning,
+    mutation: CREATE_FLIGHT,
+    variables: {input},
+  }).then(item => {
+    flights.value.push(item);
+    return item;
+  })
 
-   const destroy = (id) => {
-      return mutate({
-        isMutationRunning,
-        mutation: DELETE_FLIGHT,
-        variables: {id}
-      }).then(item => deleteFromItems(flights.value, 'id', item))
-    }
+  const update = (id, input) => mutate({
+    isMutationRunning,
+    mutation: EDIT_FLIGHT,
+    variables: {id, input}
+  }).then(item => {
+    updateInItems(flights.value, 'id', item);
+    flight.value = item;
+  })
+
+  const destroy = (id) => mutate({
+    isMutationRunning,
+    mutation: DELETE_FLIGHT,
+    variables: {id}
+  }).then(item => deleteFromItems(flights.value, 'id', item))
 
   return {
-    flight, flights, isMutationRunning, isQueryRunning, fetchDetail, fetch, create, update, destroy
+    flight, flights, isMutationRunning, isQueryRunning, fetchDetail, fetchPublicDetail, fetch, create, update, destroy,
+    fetchPublic
   }
 });
diff --git a/src/stores/Photo.js b/src/stores/Photo.js
deleted file mode 100644
index ca46b63..0000000
--- a/src/stores/Photo.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import {defineStore} from "pinia";
-import {ADJUST_PHOTO, CHANGE_PHOTO_ORIENTATION, DELETE_PHOTO, EDIT_PHOTO, UPLOAD_PHOTO} from "src/graphql/mutations/photo";
-import {PHOTO_DETAIL} from "src/graphql/queries/photo";
-import {ref} from "vue";
-import {mutate, query} from "stores/helpers";
-
-export const usePhotosStore = defineStore('Photos', () => {
-    const photo = ref(null);
-    const isMutationRunning = ref(false);
-    const isQueryRunning = ref(false);
-
-    const fetchDetail = (id) => query({
-        isQueryRunning,
-        query: PHOTO_DETAIL,
-        variables: {id}
-    }).then(item => photo.value = item);
-
-    const upload = (flightId, input) => {
-        if (!flightId) {
-            console.error("No flightId specified for photo upload! Aborting");
-            return;
-        }
-
-        input.flightId = flightId;
-
-        if (!input.name) {
-            input.name = "";
-        }
-
-        if (!input.description) {
-            input.description = "";
-        }
-
-        // TODO: ^^ patri tohle do storu?
-
-        return mutate({
-            isMutationRunning,
-            mutation: UPLOAD_PHOTO,
-            variables: {input}
-        })
-    };
-
-    const update = (id, input) => mutate({
-        isMutationRunning,
-        mutation: EDIT_PHOTO,
-        variables: {id, input}
-    }).then(item => {
-        photo.value = item;
-        return item;
-    })
-
-    const changeOrientation = (id, direction) => mutate({
-        isMutationRunning,
-        mutation: CHANGE_PHOTO_ORIENTATION,
-        variables: {id, direction}
-    }).then(item => {
-        photo.value = item;
-        return item;
-    });
-
-    const adjust = (id, adjustment) => mutate({
-        isMutationRunning,
-        mutation: ADJUST_PHOTO,
-        variables: {id, adjustment}
-    }).then(item => {
-        photo.value = item;
-        return item;
-    });
-
-    const destroy = (id) => mutate({
-        isMutationRunning,
-        mutation: DELETE_PHOTO,
-        variables: {id}
-    });
-
-    return {
-        photo, isMutationRunning, isQueryRunning, fetchDetail, upload, update, changeOrientation, adjust, destroy
-    }
-});
diff --git a/src/stores/Photos.js b/src/stores/Photos.js
new file mode 100644
index 0000000..8f0cf63
--- /dev/null
+++ b/src/stores/Photos.js
@@ -0,0 +1,93 @@
+import {defineStore} from "pinia";
+import {ADJUST_PHOTO, CHANGE_PHOTO_ORIENTATION, DELETE_PHOTO, EDIT_PHOTO, UPLOAD_PHOTO} from "src/graphql/mutations/photo";
+import {PHOTOS_PUBLIC_LIST, PHOTO_DETAIL} from "src/graphql/queries/photo";
+import {ref} from "vue";
+import {mutate, query} from "stores/helpers";
+
+export const usePhotosStore = defineStore('Photos', () => {
+  const photo = ref(null);
+  const photos = ref([]);
+  const openedPhoto = ref(null);
+  const isMutationRunning = ref(false);
+  const isQueryRunning = ref(false);
+
+  const setOpenedPhoto = (photoObject) => {
+    openedPhoto.value = photoObject;
+  }
+
+  const fetchDetail = (id) => query({
+    isQueryRunning,
+    query: PHOTO_DETAIL,
+    variables: {id}
+  }).then(item => photo.value = item);
+
+  const fetchPublic = ({flightId, pointOfInterestId, aircraftId, copilotId}) => query({
+    isQueryRunning,
+    query: PHOTOS_PUBLIC_LIST,
+    variables: {flightId, pointOfInterestId, aircraftId, copilotId}
+  }).then(items => photos.value = items);
+
+  const upload = (flightId, input) => {
+    if (!flightId) {
+      console.error("No flightId specified for photo upload! Aborting");
+      return;
+    }
+
+    input.flightId = flightId;
+
+    if (!input.name) {
+      input.name = "";
+    }
+
+    if (!input.description) {
+      input.description = "";
+    }
+
+    // TODO: ^^ patri tohle do storu?
+
+    return mutate({
+      isMutationRunning,
+      mutation: UPLOAD_PHOTO,
+      variables: {input}
+    })
+  };
+
+  const update = (id, input) => mutate({
+    isMutationRunning,
+    mutation: EDIT_PHOTO,
+    variables: {id, input}
+  }).then(item => {
+    photo.value = item;
+    return item;
+  })
+
+  const changeOrientation = (id, direction) => mutate({
+    isMutationRunning,
+    mutation: CHANGE_PHOTO_ORIENTATION,
+    variables: {id, direction}
+  }).then(item => {
+    photo.value = item;
+    return item;
+  });
+
+  const adjust = (id, adjustment) => mutate({
+    isMutationRunning,
+    mutation: ADJUST_PHOTO,
+    variables: {id, adjustment}
+  }).then(item => {
+    photo.value = item;
+    return item;
+  });
+
+  const destroy = (id) => mutate({
+    isMutationRunning,
+    mutation: DELETE_PHOTO,
+    variables: {id}
+  });
+
+  return {
+    photo, photos, isMutationRunning, isQueryRunning, fetchDetail, fetchPublic, upload, update,
+    changeOrientation, adjust, destroy,
+    openedPhoto, setOpenedPhoto
+  }
+});
diff --git a/src/stores/PointsOfInterest.js b/src/stores/PointsOfInterest.js
index 5984309..6ae6b5f 100644
--- a/src/stores/PointsOfInterest.js
+++ b/src/stores/PointsOfInterest.js
@@ -1,49 +1,55 @@
 import {defineStore} from 'pinia'
-import {POI_DETAIL, POI_LIST} from "src/graphql/queries/poi";
+import {POI_DETAIL, POI_LIST, POI_PUBLIC_DETAIL, POI_PUBLIC_LIST} from "src/graphql/queries/poi";
 import {CREATE_POI, EDIT_POI} from "src/graphql/mutations/poi";
 import {mutate, query, updateInItems} from "stores/helpers";
 import {ref} from "vue";
 
 
 export const usePointsOfInterestStore = defineStore('PointsOfInterest', () => {
+  const pointOfInterest = ref(null);
+  const pointsOfInterest = ref([]);
+  const isMutationRunning = ref(false);
+  const isQueryRunning = ref(false);
 
-    const pointOfInterest = ref(null);
-    const pointsOfInterest = ref([]);
-    const isMutationRunning = ref(false);
-    const isQueryRunning = ref(false);
+  const fetchDetail = (id) => query({
+    isQueryRunning,
+    query: POI_DETAIL,
+    variables: {id},
+  }).then(item => pointOfInterest.value = item);
 
-    const fetchDetail = (id) => {
-        return query({
-            isQueryRunning,
-            query: POI_DETAIL,
-            variables: {id},
-        }).then(item => pointOfInterest.value = item);
-    };
+  const fetchPublicDetail = (id) => query({
+    isQueryRunning,
+    query: POI_PUBLIC_DETAIL,
+    variables: {id},
+  }).then(item => pointOfInterest.value = item);
 
-    const fetch = () => {
-        return query({
-            isQueryRunning,
-            query: POI_LIST,
-        }).then(items => pointsOfInterest.value = items);
-    }
+  const fetch = () => query({
+    isQueryRunning,
+    query: POI_LIST,
+  }).then(items => pointsOfInterest.value = items);
 
-    const create = (input) => {
-        return mutate({
-            isMutationRunning,
-            mutation: CREATE_POI,
-            variables: {input},
-        }).then(item => pointsOfInterest.value.push(item))
-    }
+  const fetchPublic = () => query({
+    isQueryRunning,
+    query: POI_PUBLIC_LIST,
+  }).then(items => pointsOfInterest.value = items);
 
-    const update = (id, input) => {
-        return mutate({
-            isMutationRunning,
-            mutation: EDIT_POI,
-            variables: {id, input}
-        }).then(item => updateInItems(pointsOfInterest.value, 'id', item))
-    }
+  const create = (input) => mutate({
+    isMutationRunning,
+    mutation: CREATE_POI,
+    variables: {input},
+  }).then(item => pointsOfInterest.value.push(item))
 
-    return {
-        pointOfInterest, pointsOfInterest, isMutationRunning, isQueryRunning, fetch, fetchDetail, create, update
-    }
+  const update = (id, input) => mutate({
+    isMutationRunning,
+    mutation: EDIT_POI,
+    variables: {id, input}
+  }).then(item => {
+    updateInItems(pointsOfInterest.value, 'id', item);
+    pointOfInterest.value = item;
+  })
+
+  return {
+    pointOfInterest, pointsOfInterest, isMutationRunning, isQueryRunning, fetch, fetchPublic, fetchDetail,
+    fetchPublicDetail, create, update
+  }
 })
diff --git a/src/stores/User.js b/src/stores/User.js
index 23b9a78..c318467 100644
--- a/src/stores/User.js
+++ b/src/stores/User.js
@@ -68,6 +68,7 @@ export const useUserStore = defineStore('LoggedUser', () => {
   };
 
   const getAccessToken = () => {
+    // TODO: https://dev.to/quasar/quasar-ssr-using-cookies-with-other-libs-services-4nkl
     if (typeof localStorage === 'undefined') return null;
 
     const tokenValidity = localStorage.getItem("accessTokenValidity");
diff --git a/src/stores/helpers.js b/src/stores/helpers.js
index 3ebbe37..d259423 100644
--- a/src/stores/helpers.js
+++ b/src/stores/helpers.js
@@ -22,7 +22,7 @@ export const query = ({isQueryRunning, query, variables, refreshUnauthorized}) =
     variables.id = parseInt(variables.id);
   }
 
-  query._refreshUnauthorizedUser = refreshUnauthorized;
+  query._refreshUnauthorizedUser = typeof refreshUnauthorized === 'undefined' ? true : refreshUnauthorized;
 
   isQueryRunning.value = true;
   const queryName = query.definitions[0].selectionSet.selections[0].name.value;