Improve parent page button

src/components/AppLayout/components/Topbar/components/ParentPageLink.astro

@@ -7,18 +7,21 @@ interface Props {
 }
 
 const { parentPage } = Astro.props;
-const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
+const { getLocalizedMatch, getLocalizedUrl, t } = await getI18n(Astro.locals.currentLocale);
 
 const translation = getLocalizedMatch(parentPage.translations);
 
 let href = "";
+let collectionLabel = "";
 switch (parentPage.collection) {
   case Collections.Folders:
     href = getLocalizedUrl(`/folders/${parentPage.slug}`);
+    collectionLabel = t("header.nav.parentPages.collections.folder");
     break;
 
   case Collections.Collectibles:
     href = getLocalizedUrl(`/collectibles/${parentPage.slug}`);
+    collectionLabel = t("header.nav.parentPages.collections.collectible");
     break;
 
   default:
@@ -29,9 +32,7 @@ switch (parentPage.collection) {
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-{/* TODO: Not use the tag but actual translation */}
-
-<a href={href}><span>{parentPage.tag}</span>{translation.name}</a>
+<a href={href}><div>{collectionLabel}</div><p>{translation.name}</p></a>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
@@ -39,12 +40,30 @@ switch (parentPage.collection) {
   a {
     display: flex;
     place-items: center;
+    gap: 0.5em;
 
-    & > span {
-      background-color: var(--color-base-250);
+    & > p {
+      text-decoration: underline dotted 0.1em;
+      text-decoration-color: transparent;
+
+      transition-duration: 150ms;
+      transition-property: text-decoration-color, color;
+    }
+
+    &:hover > p {
+      color: var(--color-base-750);
+      text-decoration-color: var(--color-base-650);
+    }
+
+    &:active > p {
+      color: var(--color-base-650);
+      text-decoration-color: var(--color-base-550);
+    }
+
+    & > div {
+      background-color: var(--color-base-300);
       border-radius: 9999px;
       padding: 0.5em 0.6em;
-      margin-right: 0.5em;
       font-size: 80%;
     }
   }

src/components/AppLayout/components/Topbar/components/ParentPagesButton.astro

@@ -4,6 +4,7 @@ import type { ParentPage } from "src/shared/payload/payload-sdk";
 import ParentPageLink from "./ParentPageLink.astro";
 import { Icon } from "astro-icon/components";
 import { getI18n } from "src/i18n/i18n";
+import ReturnToButton from "./ReturnToButton.astro";
 
 interface Props {
   parentPages: ParentPage[];
@@ -16,23 +17,29 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<Tooltip trigger="click">
-  <div id="tooltip-content" slot="tooltip-content">
-    {/* TODO: Translate */}
-    <p>This content is part of these pages:</p>
-    {parentPages.map((parentPage) => <ParentPageLink parentPage={parentPage} />)}
-  </div>
-  <div class="pressable-label">
-    <Icon name="material-symbols:keyboard-return" />
-    <p>
-      {
-        t("header.nav.parentPages.label", {
-          count: parentPages.length,
-        })
-      }
-    </p>
-  </div>
-</Tooltip>
+{
+  parentPages.length === 1 && parentPages[0] ? (
+    <ReturnToButton parentPage={parentPages[0]} />
+  ) : (
+    <Tooltip trigger="click">
+      <div id="tooltip-content" slot="tooltip-content">
+        {/* TODO: Translate */}
+        <p>{t("header.nav.parentPages.tooltip")}</p>
+        {parentPages.map((parentPage) => (
+          <ParentPageLink parentPage={parentPage} />
+        ))}
+      </div>
+      <div class="pressable-label">
+        <Icon name="material-symbols:keyboard-return" />
+        <p>
+          {t("header.nav.parentPages.label", {
+            count: parentPages.length,
+          })}
+        </p>
+      </div>
+    </Tooltip>
+  )
+}
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 

src/components/AppLayout/components/Topbar/components/ReturnToButton.astro

@@ -0,0 +1,65 @@
+---
+import { Icon } from "astro-icon/components";
+import { getI18n } from "src/i18n/i18n";
+import { Collections, type ParentPage } from "src/shared/payload/payload-sdk";
+
+interface Props {
+  parentPage: ParentPage;
+}
+
+const { parentPage } = Astro.props;
+const { getLocalizedMatch, getLocalizedUrl, t } = await getI18n(Astro.locals.currentLocale);
+
+const translation = getLocalizedMatch(parentPage.translations);
+
+let href = "";
+let collectionLabel = "";
+switch (parentPage.collection) {
+  case Collections.Folders:
+    href = getLocalizedUrl(`/folders/${parentPage.slug}`);
+    collectionLabel = t("header.nav.parentPages.collections.folder");
+    break;
+
+  case Collections.Collectibles:
+    href = getLocalizedUrl(`/collectibles/${parentPage.slug}`);
+    collectionLabel = t("header.nav.parentPages.collections.collectible");
+    break;
+
+  default:
+    href = "/404";
+    break;
+}
+---
+
+{/* ------------------------------------------- HTML ------------------------------------------- */}
+
+<a href={href}>
+  <div class="pressable-label">
+    <Icon name="material-symbols:keyboard-return" />
+    <p>
+      <span>{collectionLabel}</span>
+      {translation.name}
+    </p>
+  </div>
+</a>
+
+{/* ------------------------------------------- CSS -------------------------------------------- */}
+
+<style>
+  div {
+    height: 16px;
+
+    & > p {
+      display: flex;
+      place-items: center;
+      gap: 0.5em;
+
+      span {
+        border: 1px solid var(--color-base-1000);
+        border-radius: 9999px;
+        padding: 0.3em 0.5em;
+        font-size: 80%;
+      }
+    }
+  }
+</style>

src/i18n/wordings-keys.ts

@@ -79,4 +79,7 @@ export type WordingKey =
   | "global.credits.translators"
   | "global.credits.proofreaders"
   | "global.credits.authors"
-  | "pages.tableOfContent";
+  | "pages.tableOfContent"
+  | "header.nav.parentPages.collections.folder"
+  | "header.nav.parentPages.collections.collectible"
+  | "header.nav.parentPages.tooltip";