Update template

Author: spookyuser

components/hover-template.ts

@@ -1,23 +1,31 @@
 import { LaconicError, type Trope, darkModeEnabled } from "./api";
 import { html } from "common-tags";
 
-/** A small function that generates the custom HTML tippy will show when hovering on a trope
- *
- * It changes the title's color depending on whether dark mode
- * is enabled. The trope's title and laconic description
- * are interpolated into the html.
- */
+function renderHeader(title?: string) {
+  return html`
+    <p style="color: ${darkModeEnabled() ? "#71e1bc" : "#0849ab"}">${title}</p>
+    <hr class="laconic-hr" />
+  `;
+}
+
+function renderReturnTo(htmlReturnTo?: string) {
+  if (!htmlReturnTo) {
+    return null;
+  }
+
+  return html`
+    <hr class="tvtropes-hr" />
+    ${htmlReturnTo}
+    <hr class="tvtropes-hr" />
+  `;
+}
+
 export function hoverTemplate(trope: Trope) {
   return html`
     <div class="laconic-hover">
-      <p style="color: ${darkModeEnabled() ? "#71e1bc" : "#0849ab"}">
-        ${trope.title}
-      </p>
-      <hr class="laconic-hr" />
+      ${renderHeader(trope.title)}
       <p>${trope.laconic}</p>
-      <hr class="tvtropes-hr" />
-      ${trope.returnTo}
-      <hr class="tvtropes-hr" />
+      ${renderReturnTo(trope.returnTo)}
     </div>
   `;
 }
@@ -26,19 +34,14 @@ export function errorHoverTemplate(error: Error, trope?: Trope) {
   if (error instanceof LaconicError && error.category === "NO_LACONIC") {
     return html`
       <div class="laconic-hover">
-        <p style="color: ${darkModeEnabled() ? "#71e1bc" : "#0849ab"}">
-          ${trope?.title}
-        </p>
-        <hr class="laconic-hr" />
+        ${renderHeader(trope?.title)}
         <p class="error-message">${LaconicError.messages.NO_LACONIC}</p>
       </div>
     `;
   }
   return html`
     <div class="laconic-hover">
-      <p style="color: ${darkModeEnabled() ? "#71e1bc" : "#0849ab"}">
-        ${trope?.title}
-      </p>
+      ${renderHeader(trope?.title)}
       ${error.message &&
       html`
         <hr class="laconic-hr" />