From b009b0adab36ed10cf6257cf9b9d12d9507b2b7c Mon Sep 17 00:00:00 2001
From: Bruno Perel <brunoperel@gmail.com>
Date: Sun, 1 Sep 2024 22:39:54 +0200
Subject: [PATCH] whattheduck: Cleanup

---
 apps/web/src/App.vue                          |   4 +-
 apps/web/src/components/BookcasePopover.vue   |   2 +-
 apps/web/src/components/IssueList.story.vue   |   2 +-
 apps/web/src/components/IssueList.vue         |  35 ++++----
 apps/web/src/stores/coa.ts                    |  34 +++-----
 .../whattheduck/public/icons/ducksmanager.png | Bin 0 -> 6492 bytes
 .../whattheduck/src/components/Collection.vue |  18 ++--
 .../whattheduck/src/components/Navigation.vue |  16 ++--
 .../src/components/OwnedIssueCopies.vue       |   5 +-
 apps/whattheduck/src/stores/app.ts            |   8 +-
 apps/whattheduck/src/theme/global.scss        |   4 +
 apps/whattheduck/src/views/About.vue          |  80 +++++++++++-------
 apps/whattheduck/src/views/IssueList.vue      |  39 +++++----
 apps/whattheduck/src/views/Login.vue          |   2 +-
 apps/whattheduck/src/views/Suggestions.vue    |   2 +-
 apps/whattheduck/translations/en.json         |   1 +
 apps/whattheduck/translations/sv.json         |   1 +
 packages/api/services/coa/index.ts            |  14 +--
 .../api/services/coa/issue-details/index.ts   |  36 --------
 packages/api/services/coa/issues/index.ts     |  18 ++--
 packages/api/services/coa/stories/index.ts    |   7 +-
 packages/api/services/coa/types.ts            |  15 +---
 22 files changed, 168 insertions(+), 175 deletions(-)
 create mode 100644 apps/whattheduck/public/icons/ducksmanager.png

diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
index 397b47671..516a12998 100644
--- a/apps/web/src/App.vue
+++ b/apps/web/src/App.vue
@@ -26,11 +26,11 @@ getCurrentInstance()!.appContext.app.provide(
     },
   }),
 );
-console.log("provided");
+
 const { loadUser } = collection();
 const { isLoadingUser, user } = storeToRefs(collection());
 
-// loadUser();
+loadUser();
 </script>
 
 <style lang="scss">
diff --git a/apps/web/src/components/BookcasePopover.vue b/apps/web/src/components/BookcasePopover.vue
index 8d070b6d4..92647113c 100644
--- a/apps/web/src/components/BookcasePopover.vue
+++ b/apps/web/src/components/BookcasePopover.vue
@@ -4,7 +4,7 @@
     <template #content>
       <Bookcase
         :bookcase-textures="bookcaseTextures"
-        :sorted-bookcase="issuecodes"
+        :sorted-bookcase="issuecodes.map((issuecode) => ({ issuecode }))"
         embedded
       />
       <b-row>
diff --git a/apps/web/src/components/IssueList.story.vue b/apps/web/src/components/IssueList.story.vue
index 73812fba6..1cfeed808 100644
--- a/apps/web/src/components/IssueList.story.vue
+++ b/apps/web/src/components/IssueList.story.vue
@@ -16,7 +16,7 @@ import dayjs from "dayjs";
 
 import type { issue } from "~prisma-schemas/schemas/dm";
 
-const customIssues: issue[] = [
+const customIssues: (issue & { issuecode: string })[] = [
   {
     id: 167808,
     publicationcode: "fr/MP",
diff --git a/apps/web/src/components/IssueList.vue b/apps/web/src/components/IssueList.vue
index 5c176e9d9..2279d83c9 100644
--- a/apps/web/src/components/IssueList.vue
+++ b/apps/web/src/components/IssueList.vue
@@ -399,9 +399,13 @@ switch (contextMenuComponentName) {
     break;
 }
 
-const { fetchPublicationNames, fetchIssueNumbersWithTitles } = coa();
-const { publicationNames, coverUrls, issuesWithTitles, issuecodeDetails } =
-  storeToRefs(coa());
+const { fetchPublicationNames, fetchIssuecodesByPublicationcode } = coa();
+const {
+  publicationNames,
+  coverUrls,
+  issuecodesByPublicationcode,
+  issuecodeDetails,
+} = storeToRefs(coa());
 
 let hoveredIndex = $ref<number | null>(null);
 let loading = $ref(true);
@@ -470,7 +474,9 @@ const publicationName = $computed(
   () => publicationNames.value[publicationcode],
 );
 const isTouchScreen = window.matchMedia("(pointer: coarse)").matches;
-const coaIssues = $computed(() => issuesWithTitles.value[publicationcode]);
+const coaIssuecodes = $computed(
+  () => issuecodesByPublicationcode.value[publicationcode],
+);
 const filteredIssues = $computed(
   () =>
     issues
@@ -580,29 +586,27 @@ const loadIssues = async () => {
         ).dbValue,
       }));
 
-    await fetchIssueNumbersWithTitles([publicationcode]);
+    await fetchIssuecodesByPublicationcode([publicationcode]);
 
     if (groupUserCopies) {
-      issues = coaIssues.map((issue) => ({
-        ...issue,
+      issues = coaIssuecodes.map((issuecode) => ({
+        issuecode,
         userCopies: userIssuesForPublication!
-          .filter(
-            ({ issuecode: userIssuecode }) => userIssuecode === issue.issuecode,
-          )
+          .filter(({ issuecode: userIssuecode }) => userIssuecode === issuecode)
           .map((issue, copyIndex) => ({
             ...issue,
             copyIndex,
           })),
-        key: issue.issuecode,
+        key: issuecode,
       }));
     } else {
       const userIssuecodes = [
         ...new Set(userIssuesForPublication!.map(({ issuecode }) => issuecode)),
       ];
-      issues = coaIssues
-        .filter(({ issuecode }) => userIssuecodes.includes(issuecode))
+      issues = coaIssuecodes
+        .filter((issuecode) => userIssuecodes.includes(issuecode))
         .reduce<issueWithCopies[]>(
-          (acc, { issuecode }) => [
+          (acc, issuecode) => [
             ...acc,
             ...userIssuesForPublication!
               .filter(
@@ -646,9 +650,6 @@ const loadIssues = async () => {
       );
     }
 
-    const coaIssuecodes = issuesWithTitles.value[publicationcode].map(
-      ({ issuecode }) => issuecode,
-    );
     userIssuecodesNotFoundForPublication = userIssuesForPublication!
       .filter(({ issuecode }) => !coaIssuecodes.includes(issuecode))
       .map(({ issuecode }) => issuecode);
diff --git a/apps/web/src/stores/coa.ts b/apps/web/src/stores/coa.ts
index 95f7c53a8..3c0ad2bbf 100644
--- a/apps/web/src/stores/coa.ts
+++ b/apps/web/src/stores/coa.ts
@@ -53,12 +53,11 @@ export const coa = defineStore("coa", () => {
       CoaServices["getAuthorList"]
     > | null>(null),
     issuecodes = ref<string[]>([]),
-    issuesWithTitles = ref<EventReturnType<CoaServices["getIssuesWithTitles"]>>(
-      {},
-    ),
     issueDetails = ref<{ [issuecode: string]: InducksIssueDetails }>({}),
     isLoadingCountryNames = ref(false),
-    issuecodeDetails = ref<EventReturnType<CoaServices["getIssues"]>>({}),
+    issuecodeDetails = ref<
+      Exclude<EventReturnType<CoaServices["getIssues"]>, "error">
+    >({}),
     issuePopularities = ref<
       EventReturnType<CoaServices["getIssuePopularities"]>
     >({}),
@@ -171,26 +170,19 @@ export const coa = defineStore("coa", () => {
         })
       );
     },
-    fetchIssueNumbersWithTitles = async (publicationcodes: string[]) => {
-      const results = await coaServices.getIssuesWithTitles(
-        publicationcodes.filter(
-          (publicationcode) =>
-            !Object.keys(issuesWithTitles.value).includes(publicationcode),
-        ),
-      );
-      Object.assign(issuesWithTitles.value, results);
-    },
-    fetchIssuecodeDetails = async (issuecodes: string[]) => {
-      const existingIssuecodes = new Set(
-        Object.keys(issuecodeDetails.value || {}),
-      );
-      const newIssuecodes = issuecodes.filter(
-        (issuecode) => !existingIssuecodes.has(issuecode),
+    fetchIssuecodeDetails = async (
+      issuecodes: string[],
+      withTitles: boolean = false,
+    ) => {
+      const newIssuecodes = issuecodes.filter((issuecode) =>
+        withTitles
+          ? !("title" in (issuecodeDetails.value[issuecode] || {}))
+          : !issuecodeDetails.value[issuecode],
       );
       if (newIssuecodes.length) {
         Object.assign(
           issuecodeDetails.value,
-          await coaServices.getIssues(newIssuecodes),
+          await coaServices.getIssues(newIssuecodes, withTitles),
         );
       }
     },
@@ -274,7 +266,6 @@ export const coa = defineStore("coa", () => {
     fetchCoverUrlsByIssuecodes,
     fetchIssuecodeDetails,
     fetchIssuecodesByPublicationcode,
-    fetchIssueNumbersWithTitles,
     fetchIssuePopularities,
     fetchIssueQuotations,
     fetchIssueUrls,
@@ -291,7 +282,6 @@ export const coa = defineStore("coa", () => {
     issuePopularities: issuePopularities,
     issuecodes,
     issueQuotations,
-    issuesWithTitles,
     personNames,
     publicationNames,
     publicationNamesFullCountries,
diff --git a/apps/whattheduck/public/icons/ducksmanager.png b/apps/whattheduck/public/icons/ducksmanager.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed6176926f2dbeb6fcda570fecf179d110c6ff4f
GIT binary patch
literal 6492
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
U7INqEyAA-Tx}Ms572C-F0%gY#+5i9m

literal 0
HcmV?d00001

diff --git a/apps/whattheduck/src/components/Collection.vue b/apps/whattheduck/src/components/Collection.vue
index f87347942..558ab2df7 100644
--- a/apps/whattheduck/src/components/Collection.vue
+++ b/apps/whattheduck/src/components/Collection.vue
@@ -26,7 +26,7 @@
         >
       </ion-toolbar>
       <Navigation v-if="!isCameraPreviewShown" />
-      <template v-if="list?.hasItems && !isCameraPreviewShown">
+      <template v-if="(list?.hasItems || filterText || currentFilter.id !== 'all') && !isCameraPreviewShown">
         <ion-searchbar inputmode="text" autocapitalize="sentences" v-model="filterText" placeholder="Filter" />
         <FilterButton v-if="filterText.length < 1" />
       </template>
@@ -54,13 +54,21 @@ const { t } = useI18n();
 const list = ref<InstanceType<typeof CountryList | typeof PublicationList | typeof IssueList> | null>(null);
 
 const { total, ownedCountries, ownedPublications } = storeToRefs(wtdcollection());
-const { filterText, isCoaView, isCameraPreviewShown, countrycode, publicationcode, issuecodes, currentNavigationItem } =
-  storeToRefs(app());
+const {
+  filterText,
+  isCoaView,
+  isCameraPreviewShown,
+  countrycode,
+  publicationcode,
+  issuecodes,
+  currentNavigationItem,
+  currentFilter,
+} = storeToRefs(app());
 
 const { issuecodeDetails } = storeToRefs(coa());
 
 const componentName = computed(() =>
-  !currentNavigationItem.value
+  currentNavigationItem.value.type === 'all'
     ? CountryList
     : currentNavigationItem.value.type === 'countrycode'
       ? PublicationList
@@ -83,7 +91,7 @@ const backToCollection = () => {
       if (ownedCountries.value?.includes(countrycode.value!)) {
         currentNavigationItem.value = { type: 'countrycode', value: countrycode.value! };
       } else {
-        currentNavigationItem.value = null;
+        currentNavigationItem.value = { type: 'all', value: 'all' };
       }
     }
   }
diff --git a/apps/whattheduck/src/components/Navigation.vue b/apps/whattheduck/src/components/Navigation.vue
index d6ab40a10..060697206 100644
--- a/apps/whattheduck/src/components/Navigation.vue
+++ b/apps/whattheduck/src/components/Navigation.vue
@@ -1,5 +1,8 @@
 <template>
-  <ion-segment :model-value="currentNavigationItem?.type">
+  <ion-segment
+    :model-value="JSON.stringify(shownParts[shownParts.length - 1])"
+    @update:model-value="currentNavigationItem = JSON.parse($event)"
+  >
     <ion-col
       @click.stop="() => {}"
       :class="{ 'non-clickable': partIdx >= shownParts.length, scrollable: partIdx === 3 }"
@@ -7,7 +10,10 @@
       v-for="partIdx in maxParts"
       v-show="partIdx <= shownParts.length"
     >
-      <ion-segment-button :value="shownParts[partIdx - 1]?.type" @click="">
+      <ion-segment-button
+        :value="JSON.stringify(shownParts[partIdx - 1])"
+        @click="currentNavigationItem = shownParts[partIdx] as typeof currentNavigationItem"
+      >
         <globe-icon v-if="partIdx === 1" />
         <Country
           v-if="partIdx === 2 && countrycode"
@@ -47,14 +53,14 @@ const { countryNames, publicationNames } = storeToRefs(stores.coa());
 const maxParts = 4;
 
 const shownParts = computed(() => [
-  null,
-  ...Object.entries({
+  { type: 'all', value: 'all' },
+  ...(Object.entries({
     countrycode: countrycode.value,
     publicationcode: publicationcode.value,
     issuecodes: issuecodes.value,
   })
     .map(([type, value]) => (value ? { type, value } : null))
-    .filter(Boolean),
+    .filter(Boolean) as (typeof currentNavigationItem)['value'][]),
 ]);
 </script>
 
diff --git a/apps/whattheduck/src/components/OwnedIssueCopies.vue b/apps/whattheduck/src/components/OwnedIssueCopies.vue
index bc0ef0b21..e5d95a419 100644
--- a/apps/whattheduck/src/components/OwnedIssueCopies.vue
+++ b/apps/whattheduck/src/components/OwnedIssueCopies.vue
@@ -85,8 +85,9 @@ watch(
   issuecodes,
   async (newValue) => {
     if (newValue) {
-      const covers = await fetchCoverUrlsByIssuecodes(newValue);
-      fullUrl.value = covers.covers![newValue[0]]?.fullUrl;
+      const newIssuecodes = [...newValue];
+      const covers = await fetchCoverUrlsByIssuecodes(newIssuecodes);
+      fullUrl.value = covers.covers![newIssuecodes[0]]?.fullUrl;
     }
   },
   { immediate: true },
diff --git a/apps/whattheduck/src/stores/app.ts b/apps/whattheduck/src/stores/app.ts
index 3c0ae9efc..3edd1797c 100644
--- a/apps/whattheduck/src/stores/app.ts
+++ b/apps/whattheduck/src/stores/app.ts
@@ -34,15 +34,17 @@ export const app = defineStore('app', () => {
   const isCameraPreviewShown = ref(false);
 
   const currentNavigationItem = ref<
-    null | { type: 'countrycode' | 'publicationcode'; value: string } | { type: 'issuecodes'; value: string[] }
-  >(null);
+    | { type: 'all'; value: 'all' }
+    | { type: 'countrycode' | 'publicationcode'; value: string }
+    | { type: 'issuecodes'; value: string[] }
+  >({ type: 'all', value: 'all' });
 
   watch(
     () => route.hash,
     (newValue) => {
       const parts = newValue.replace('#', '').replaceAll('_', ' ').split('=');
       if (parts.length === 1) {
-        currentNavigationItem.value = null;
+        currentNavigationItem.value = { type: 'all', value: 'all' };
       } else {
         const [type, value] = parts as ['countrycode' | 'publicationcode' | 'issuecodes', string];
         if (type === 'issuecodes') {
diff --git a/apps/whattheduck/src/theme/global.scss b/apps/whattheduck/src/theme/global.scss
index 558effe31..a2a7b6de0 100644
--- a/apps/whattheduck/src/theme/global.scss
+++ b/apps/whattheduck/src/theme/global.scss
@@ -131,4 +131,8 @@ ion-checkbox {
 
 .searchbar-clear-button { 
    right: 1.5rem !important;
+}
+
+.flex {
+  display: flex !important
 }
\ No newline at end of file
diff --git a/apps/whattheduck/src/views/About.vue b/apps/whattheduck/src/views/About.vue
index 76c99ce0a..cb76ef6ad 100644
--- a/apps/whattheduck/src/views/About.vue
+++ b/apps/whattheduck/src/views/About.vue
@@ -1,27 +1,27 @@
 <template>
   <ion-page>
-    <ion-header>
-      <ion-title>{{ t('A propos') }}</ion-title>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button color="primary" />
+        </ion-buttons>
+        <ion-title>{{ t('A propos') }}</ion-title>
+      </ion-toolbar>
     </ion-header>
-    <ion-content>
-      <ion-item>{{ t('What The Duck version {version}', { version: getCurrentAppVersion() }) }}</ion-item>
-      <ion-item class="flex">
-        <ion-item>
-          <a :href="discordUrl"><img src="/icons/discord.png" /></a>
-        </ion-item>
-        <ion-item>
-          <a :href="facebookUrl"><img src="/icons/facebook.png" /></a>
-        </ion-item>
-        <ion-item>
-          <a :href="instagramUrl"><img src="/icons/instagram.png" /></a>
-        </ion-item>
-        <ion-item>
-          <a :href="youtubeUrl"><img src="/icons/youtube.png" /></a>
-        </ion-item>
-      </ion-item>
-      <ion-item style="border-bottom: 1px solid white">
-        {{ t('Notez What The Duck sur le Play Store :-)') }}
-      </ion-item>
+    <ion-content v-if="currentAppVersion">
+      <div>
+        <b>{{ t('What The Duck version {version}', { version: currentAppVersion }) }}</b>
+      </div>
+      <div>
+        <a :href="discordUrl"><img src="/icons/discord.png" /></a>
+        <a :href="facebookUrl"><img src="/icons/facebook.png" /></a>
+        <a :href="dmUrl"><img src="/icons/ducksmanager.png" /></a>
+        <a :href="instagramUrl"><img src="/icons/instagram.png" /></a>
+        <a :href="youtubeUrl"><img src="/icons/youtube.png" /></a>
+      </div>
+      <ion-button id="link-to-dm" expand="full" color="white" @click.prevent="() => {}">
+        <a :href="playStoreUrl"> {{ t("Notez What The Duck sur le Play Store si vous appréciez l'utiliser :-)") }}</a>
+      </ion-button>
     </ion-content></ion-page
   >
 </template>
@@ -32,17 +32,39 @@ import { AppUpdate } from '@capawesome/capacitor-app-update';
 
 const { t } = useI18n();
 
-const getCurrentAppVersion = async () => {
-  const result = await AppUpdate.getAppUpdateInfo();
-  if (Capacitor.getPlatform() === 'android') {
-    return result.currentVersionCode;
-  } else {
-    return result.currentVersionName;
-  }
-};
+const dmUrl = 'https://ducksmanager.net';
+const playStoreUrl = 'https://play.google.com/store/apps/details?id=net.ducksmanager.whattheduck';
+
+const currentAppVersion = ref<string | null>(null);
+
+AppUpdate.getAppUpdateInfo()
+  .then((result) => {
+    if (Capacitor.getPlatform() === 'android') {
+      currentAppVersion.value = result.currentVersionCode;
+    } else {
+      currentAppVersion.value = result.currentVersionName;
+    }
+  })
+  .catch(() => {
+    currentAppVersion.value = 'web';
+  });
 
 const discordUrl = import.meta.env.VITE_DISCORD_URL;
 const facebookUrl = import.meta.env.VITE_FACEBOOK_URL;
 const instagramUrl = import.meta.env.VITE_INSTAGRAM_URL;
 const youtubeUrl = import.meta.env.VITE_YOUTUBE_URL;
 </script>
+
+<style lang="scss" scoped>
+ion-content::part(scroll) {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+div {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+</style>
diff --git a/apps/whattheduck/src/views/IssueList.vue b/apps/whattheduck/src/views/IssueList.vue
index 59dac24b8..70442f11f 100644
--- a/apps/whattheduck/src/views/IssueList.vue
+++ b/apps/whattheduck/src/views/IssueList.vue
@@ -1,6 +1,6 @@
 <template>
   <List
-    v-if="coaIssues"
+    v-if="coaIssuecodes"
     :items="sortedItems"
     :get-item-text-fn="getItemTextFn"
     item-type="issuecode"
@@ -86,10 +86,10 @@ const colSize = computed(() => {
 });
 
 const { issues, user, purchasesById } = storeToRefs(wtdcollection());
-const { publicationcode, currentNavigationItem, isCoaView, currentIssueViewMode, selectedIssuecodes } =
+const { publicationcode, currentNavigationItem, isCoaView, currentIssueViewMode, selectedIssuecodes, currentFilter } =
   storeToRefs(app());
-const { issuesWithTitles, issuecodeDetails } = storeToRefs(webStores.coa());
-const { fetchCoverUrls, fetchIssueNumbersWithTitles } = webStores.coa();
+const { issuecodeDetails, issuecodesByPublicationcode } = storeToRefs(webStores.coa());
+const { fetchCoverUrls, fetchIssuecodesByPublicationcode, fetchIssuecodeDetails } = webStores.coa();
 
 const { bookcaseOptions, bookcaseUsername } = storeToRefs(bookcase());
 const { loadBookcaseOptions, loadBookcaseOrder } = bookcase();
@@ -107,8 +107,7 @@ const getIssueDate = (issue: issue) => {
   return !date ? date : (typeof date === 'string' ? date : date.toISOString()).split('T')?.[0];
 };
 
-const coaIssues = computed(() => issuesWithTitles.value[publicationcode.value!]);
-const coaIssuecodes = computed(() => coaIssues.value?.map(({ issuecode }) => issuecode));
+const coaIssuecodes = computed(() => issuecodesByPublicationcode.value[publicationcode.value!]);
 const coaIssuecodeDetails = computed<typeof issuecodeDetails.value>(() =>
   Object.entries(issuecodeDetails.value)
     .filter(([issuecode]) => coaIssuecodes.value.includes(issuecode))
@@ -117,6 +116,11 @@ const coaIssuecodeDetails = computed<typeof issuecodeDetails.value>(() =>
 const userIssues = computed(() =>
   (issues.value || [])
     .filter((issue) => issue.publicationcode === publicationcode.value)
+    .filter(
+      currentFilter.value.id === 'all'
+        ? () => true
+        : ({ isToRead }) => isToRead === (currentFilter.value.id === 'unreadBooksOnly'),
+    )
     .map((issue) => ({
       ...issue,
       issueDate: getIssueDate(issue),
@@ -132,26 +136,28 @@ type Item =
   | IssueWithIssuecodeOnly;
 
 const items = computed(() =>
-  coaIssues.value
+  coaIssuecodes.value
     ? isCoaView.value
-      ? coaIssues.value.reduce<
+      ? coaIssuecodes.value.reduce<
           {
             key: string;
             inducksItem: (typeof coaIssuecodeDetails.value)[string];
             item: Item;
           }[]
-        >((acc, item) => {
+        >((acc, issuecode) => {
           const userIssuesForThisIssue = userIssues.value.filter(
-            ({ issuecode: userIssuecode }) => item.issuecode === userIssuecode,
+            ({ issuecode: userIssuecode }) => issuecode === userIssuecode,
           );
 
           return [
             ...acc,
-            ...(userIssuesForThisIssue.length ? userIssuesForThisIssue : [item]).map((itemOrUserItem) => ({
-              key: itemOrUserItem.issuecode,
-              inducksItem: coaIssuecodeDetails.value[itemOrUserItem.issuecode],
-              item: itemOrUserItem,
-            })),
+            ...(userIssuesForThisIssue.length ? userIssuesForThisIssue : [issuecodeDetails.value[issuecode]]).map(
+              (itemOrUserItem) => ({
+                key: issuecode,
+                inducksItem: coaIssuecodeDetails.value[issuecode],
+                item: itemOrUserItem,
+              }),
+            ),
           ];
         }, [])
       : (userIssues.value || []).map((issue) => ({
@@ -233,7 +239,8 @@ watch(
 watch(
   [isCoaView, publicationcode],
   async () => {
-    await fetchIssueNumbersWithTitles([publicationcode.value!]);
+    await fetchIssuecodesByPublicationcode([publicationcode.value!]);
+    await fetchIssuecodeDetails(coaIssuecodes.value);
   },
   { immediate: true },
 );
diff --git a/apps/whattheduck/src/views/Login.vue b/apps/whattheduck/src/views/Login.vue
index db5b32391..c8d11f4bf 100644
--- a/apps/whattheduck/src/views/Login.vue
+++ b/apps/whattheduck/src/views/Login.vue
@@ -58,7 +58,7 @@
         </ion-col>
       </ion-row>
       <ion-row>
-        <ion-col size="6" push="6" style="display: flex" class="flex ion-justify-content-end">
+        <ion-col size="6" push="6" class="flex ion-justify-content-end">
           <ion-button @click="forgotPassword" size="small" :disabled="isOfflineMode">
             {{ t('Mot de passe oublié ?') }}
           </ion-button>
diff --git a/apps/whattheduck/src/views/Suggestions.vue b/apps/whattheduck/src/views/Suggestions.vue
index 79d323861..bbb4eada2 100644
--- a/apps/whattheduck/src/views/Suggestions.vue
+++ b/apps/whattheduck/src/views/Suggestions.vue
@@ -47,7 +47,7 @@
               :classes="['issue-title', 'ion-no-padding']"
             />
             <ion-col
-              class="ion-no-padding"
+              class="ion-no-padding flex"
               size="3"
               style="display: flex; flex-direction: column; align-items: start; justify-content: center"
             >
diff --git a/apps/whattheduck/translations/en.json b/apps/whattheduck/translations/en.json
index 0a361cc51..4a61338f8 100644
--- a/apps/whattheduck/translations/en.json
+++ b/apps/whattheduck/translations/en.json
@@ -136,6 +136,7 @@
   "Retirer de la collection": "Remove from collection",
   "Retirer ces {numberOfIssues} numéros de la collection": "Remove these {numberOfIssues} issues from collection",
   "Retour à ma collection": "Back to my collection",
+  "Retour aux résultats d'histoire": "Back to story search results",
   "Résultat": "Result",
   "Résultats de la recherche": "Search results",
   "Sans titre": "No title",
diff --git a/apps/whattheduck/translations/sv.json b/apps/whattheduck/translations/sv.json
index 417e391f8..499b26f0a 100644
--- a/apps/whattheduck/translations/sv.json
+++ b/apps/whattheduck/translations/sv.json
@@ -128,6 +128,7 @@
   "Progression de la collection": "Samlingens framfart",
   "Quelque chose ne fonctionne pas sur l'application ?\nDétaillez votre problème et nous essaierons de le résoudre dans une prochaine version :-)": "Är det något som inte fungerar i appen? Beskriv ditt problem så ska vi försöka lösa det i nästa version :-)",
   "Rechercher une histoire": "Hitta en berättelse",
+  "Retour aux résultats d'histoire": "Tillbaka till berättelsens sökresultat",
   "Résultat": "Resultat",
   "Sans titre": "Ingen titel",
   "Si l'adresse e-mail entrée correspond à un compte DucksManager, nous venons d'y envoyer un lien permettant la réinitialisation du mot de passe. Si l'e-mail ne vous parvient pas d'ici quelques minutes, veuillez vérifier votre dossier Spam.": "Om emailadressen överensstämmer med ett DucksManager konto skickas en länk för att återställa ditt lösenord. Om du inte får ett email inom några minter, kolla din Spam mapp.",
diff --git a/packages/api/services/coa/index.ts b/packages/api/services/coa/index.ts
index ae2fed88c..1c62f12b0 100644
--- a/packages/api/services/coa/index.ts
+++ b/packages/api/services/coa/index.ts
@@ -25,13 +25,14 @@ export default (io: Server) => {
   });
 };
 
-const getInducksIssueData = (issuecodes: string[]) =>
+const getInducksIssueData = (issuecodes: string[], withTitle: boolean) =>
   prismaCoa.inducks_issue
     .findMany({
       select: {
         publicationcode: true,
         issuenumber: true,
         issuecode: true,
+        title: withTitle,
       },
       where: {
         issuecode: {
@@ -45,8 +46,9 @@ export const augmentIssueObjectWithInducksData = <
   Entity extends { issuecode: string },
 >(
   issues: Record<string, Entity>,
+  withTitle: boolean = false,
 ) =>
-  getInducksIssueData(Object.keys(issues)).then((inducksIssues) =>
+  getInducksIssueData(Object.keys(issues), withTitle).then((inducksIssues) =>
     Object.entries(issues).reduce<typeof issues>(
       (acc, [issuecode, issue]) => ({
         ...acc,
@@ -60,10 +62,12 @@ export const augmentIssueArrayWithInducksData = async <
   Entity extends { issuecode: string },
 >(
   issues: Entity[],
+  withTitle: boolean = false,
 ) =>
-  getInducksIssueData([
-    ...new Set(issues.map(({ issuecode }) => issuecode)),
-  ]).then((inducksIssues) =>
+  getInducksIssueData(
+    [...new Set(issues.map(({ issuecode }) => issuecode))],
+    withTitle,
+  ).then((inducksIssues) =>
     issues.map((issue) => ({
       ...issue,
       ...inducksIssues[issue.issuecode],
diff --git a/packages/api/services/coa/issue-details/index.ts b/packages/api/services/coa/issue-details/index.ts
index 19b15771d..2770041fa 100644
--- a/packages/api/services/coa/issue-details/index.ts
+++ b/packages/api/services/coa/issue-details/index.ts
@@ -29,42 +29,6 @@ export const getPopularityByIssuecodes = async (issuecodes: string[]) =>
     .then((data) => data.groupBy("issuecode"));
 
 export default (socket: Socket<Events>) => {
-  socket.on("getIssuesWithTitles", async (publicationcodes, callback) =>
-    prismaCoa.inducks_issue
-      .findMany({
-        select: {
-          publicationcode: true,
-          issuecode: true,
-          issuenumber: true,
-          title: true,
-        },
-        where: {
-          publicationcode: {
-            in: publicationcodes,
-          },
-        },
-      })
-      .then((data) => {
-        callback(
-          data.reduce<Parameters<typeof callback>[0]>(
-            (acc, { publicationcode, issuenumber, title, issuecode }) => ({
-              ...acc,
-              [publicationcode!]: [
-                ...(acc[publicationcode!] || []),
-                {
-                  issuecode,
-                  publicationcode: publicationcode!,
-                  issuenumber: issuenumber!,
-                  title,
-                },
-              ],
-            }),
-            {},
-          ),
-        );
-      }),
-  );
-
   socket.on("getIssueDetails", async (issuecode, callback) => {
     const entries = await getEntries(issuecode);
     callback({
diff --git a/packages/api/services/coa/issues/index.ts b/packages/api/services/coa/issues/index.ts
index 5f0384740..6435d7d4b 100644
--- a/packages/api/services/coa/issues/index.ts
+++ b/packages/api/services/coa/issues/index.ts
@@ -4,20 +4,14 @@ import type { IssueWithIssuecodeOnly } from "~dm-types/IssueWithIssuecodeOnly";
 import { prismaClient as prismaCoa } from "~prisma-schemas/schemas/coa/client";
 
 import type Events from "../types";
+import { augmentIssueArrayWithInducksData } from "..";
 export default (socket: Socket<Events>) => {
-  socket.on("getIssues", (issuecodes, callback) =>
+  socket.on("getIssues", (issuecodes, withTitles, callback) =>
     issuecodes.length
-      ? prismaCoa.inducks_issue
-          .findMany({
-            select: {
-              publicationcode: true,
-              issuenumber: true,
-              issuecode: true,
-            },
-            where: {
-              issuecode: { in: issuecodes.filter((issuecode) => issuecode) },
-            },
-          })
+      ? augmentIssueArrayWithInducksData(
+          issuecodes.map((issuecode) => ({ issuecode })),
+          withTitles,
+        )
           .then((data) => data.groupBy("issuecode"))
           .then(callback)
       : callback({}),
diff --git a/packages/api/services/coa/stories/index.ts b/packages/api/services/coa/stories/index.ts
index 55d67de93..a16ede22d 100644
--- a/packages/api/services/coa/stories/index.ts
+++ b/packages/api/services/coa/stories/index.ts
@@ -77,9 +77,10 @@ export default (socket: Socket<Events>) => {
     if (withIssues) {
       const resultsWithIssues: StorySearchResults<true>["results"] = [];
       for (const idx of results.keys()) {
-        resultsWithIssues[idx].issues = await listIssuesFromStoryCode(
-          results[idx].storycode,
-        );
+        resultsWithIssues[idx] = {
+          ...results[idx],
+          issues: await listIssuesFromStoryCode(results[idx].storycode),
+        };
       }
 
       callback({
diff --git a/packages/api/services/coa/types.ts b/packages/api/services/coa/types.ts
index 7c7a2835c..972d71c3e 100644
--- a/packages/api/services/coa/types.ts
+++ b/packages/api/services/coa/types.ts
@@ -30,20 +30,6 @@ export default abstract class {
     callback: (value: Record<string, string>) => void,
   ) => void;
 
-  abstract getIssuesWithTitles: (
-    publicationcodes: string[],
-    callback: (
-      value: Record<
-        string,
-        {
-          issuecode: string;
-          publicationcode: string;
-          issuenumber: string;
-          title: string | null;
-        }[]
-      >,
-    ) => void,
-  ) => void;
   abstract getIssueDetails: (
     issuecode: string,
     callback: (value: { releaseDate?: string; entries: SimpleEntry[] }) => void,
@@ -74,6 +60,7 @@ export default abstract class {
   ) => void;
   abstract getIssues: (
     issuecodes: string[],
+    withTitles: boolean,
     callback: (value: Record<string, SimpleInducksIssue>) => void,
   ) => void;