move some files to src/components/

src/App.svelte

@@ -2,9 +2,9 @@
   import IndexPage from "./IndexPage.svelte";
   import ChannelHome from "./ChannelHome.svelte";
   import ChannelPageAt from "./ChannelPageAt.svelte";
-  import Footer from "./Footer.svelte";
-  import GithubBadge from "./GithubBadge.svelte";
-  import NotFound from "./NotFound.svelte";
+  import Footer from "./components/Footer.svelte";
+  import GithubBadge from "./components/GithubBadge.svelte";
+  import NotFound from "./components/NotFound.svelte";
 
   import { Router } from "./libs/router.svelte";
 </script>

src/ChannelHome.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import Header from "./Header.svelte";
+  import Button from "./components/PaginationButton.svelte";
+  import Header from "./components/Header.svelte";
+  import PageLoader from "./components/PageLoader.svelte";
   import Table from "./ChannelView.svelte";
-  import PageLoader from "./spinners/PageLoader.svelte";
-  import Button from "./PaginationButton.svelte";
   import { getLatest } from "./libs/couch.svelte";
   import { config } from "./libs/config";
 

src/ChannelPageAt.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import Header from "./Header.svelte";
+  import Button from "./components/PaginationButton.svelte";
+  import Header from "./components/Header.svelte";
+  import PageLoader from "./components/PageLoader.svelte";
   import Table from "./ChannelView.svelte";
-  import PageLoader from "./spinners/PageLoader.svelte";
-  import Button from "./PaginationButton.svelte";
   import { getPage } from "./libs/couch.svelte";
   import { oportunisticParsePemalink } from "./libs/slugs";
   import { Router } from "./libs/router.svelte";

src/IndexPage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Header from "./Header.svelte";
-  import PageLoader from "./spinners/PageLoader.svelte";
+  import Header from "./components/Header.svelte";
+  import PageLoader from "./components/PageLoader.svelte";
   import { fetchChannelList } from "./libs/couch-api";
 </script>
 

src/components/Footer.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { config } from "../libs/config";
+  let online = $state(true);
+  let popover: HTMLElement;
+</script>
+
+<svelte:window bind:online />
+
+<footer class:offline={!online}>
+  <a href={config.homePage}>irclog home page</a> | ver:
+  <button title="Build Info" onclick={() => popover.showPopover()}>{config.version}</button>
+  <div id="build-info" popover="auto" bind:this={popover}>
+    Artefact: {config.githubArchive}<br />
+    Project: {config.projectUrl}
+  </div>
+</footer>
+
+<style>
+  footer {
+    padding: 8px 6px 10px;
+    background-color: #efefef;
+    border-top: 1px dashed #aaaaaa;
+    color: #555555;
+    margin-top: 1rem;
+  }
+
+  footer a {
+    text-decoration: none;
+    color: #555555;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  footer button {
+    all: unset;
+    anchor-name: --build-info-btn;
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  footer #build-info {
+    position: fixed;
+    position-anchor: --build-info-btn;
+    bottom: anchor(--build-info-btn top);
+    left: anchor(--build-info-btn left);
+    top: unset;
+    margin: 0;
+    border-width: 1px;
+  }
+
+  footer.offline {
+    border-top: 2px solid red;
+  }
+</style>

src/components/Modal.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  let visible = false;
+  function showPopup() {
+    visible = true;
+    document.addEventListener("keydown", handleModalKeydown);
+  }
+  function hidePopup() {
+    document.removeEventListener("keydown", handleModalKeydown);
+    visible = false;
+  }
+
+  function handleGlobalKeydown(ev: KeyboardEvent) {
+    // Do nothing if the event was already processed
+    if (ev.defaultPrevented) return;
+    if (ev.key === "/") {
+      ev.preventDefault();
+      showPopup();
+    }
+  }
+
+  function handleCloseKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.preventDefault();
+      hidePopup();
+    }
+  }
+
+  function handleModalKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Escape") {
+      ev.preventDefault();
+      hidePopup();
+    }
+    if (ev.key === "Tab") {
+      const focusableElements =
+        document
+          .getElementById("modal-container")
+          ?.querySelectorAll<HTMLElement>('input, textarea, button, [aria-label="Close"]') ?? [];
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      if (!ev.shiftKey && document.activeElement === lastElement) {
+        ev.preventDefault();
+        firstElement.focus();
+      } else if (ev.shiftKey && document.activeElement === firstElement) {
+        ev.preventDefault();
+        lastElement.focus();
+      }
+    }
+  }
+</script>
+
+<svelte:document on:keydown={handleGlobalKeydown} />
+{#if visible}
+  <div id="modal-container" class="overlay" tabindex="-1">
+    <div class="modal-dialog" aria-modal="true" role="dialog">
+      <!--slot /-->
+      <h2>Search:</h2>
+      <input />
+      <p>Some text in the Modal..</p>
+      <span aria-label="Close" role="button" tabindex="0" on:click={hidePopup} on:keydown={handleCloseKeydown}
+        >&times;</span
+      >
+    </div>
+  </div>
+{/if}
+
+<style>
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(139, 139, 139, 0.462);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+  }
+
+  .modal-dialog {
+    background-color: #fff;
+    width: 400px;
+    padding: 20px;
+    border-radius: 5px;
+    text-align: center;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    position: relative;
+  }
+
+  [aria-label="Close"] {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+  }
+  [aria-label="Close"]:focus-visible {
+    outline: none;
+  }
+</style>

src/PaginationButton.svelte → src/components/PaginationButton.svelte

@@ -37,15 +37,15 @@
     border: 1px solid #8181a8;
     border-radius: 6px;
     outline: none;
-  }
-  button:hover {
-    color: #555;
-    background-color: #e0e0e0;
-  }
-  button.disabled {
-    color: #555;
-    background-color: #e0e0e0;
-    animation: glowing 5000ms infinite;
+    &:hover {
+      color: #555;
+      background-color: #e0e0e0;
+    }
+    &.disabled {
+      color: #555;
+      background-color: #e0e0e0;
+      animation: glowing 5000ms infinite;
+    }
   }
 
   @keyframes glowing {