show the extension version and a link to open issues at the bottom of the sidebar

Author: ghazi-git

src/devtools/components/sidebar/AboutExtension.module.css

@@ -0,0 +1,13 @@
+.about {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 0 var(--size-2);
+
+  a {
+    color: var(--text-2);
+    text-align: center;
+    line-height: normal;
+  }
+}

src/devtools/components/sidebar/AboutExtension.tsx

@@ -0,0 +1,23 @@
+import pkg from "../../../../package.json";
+import styles from "./AboutExtension.module.css";
+
+export default function AboutExtension() {
+  return (
+    <div class={styles.about}>
+      <a
+        href="https://github.com/ghazi-git/indexeddb-browser/releases"
+        title="https://github.com/ghazi-git/indexeddb-browser/releases"
+        target="_blank"
+      >
+        v{pkg.version}
+      </a>
+      <a
+        href="https://github.com/ghazi-git/indexeddb-browser/issues"
+        title="https://github.com/ghazi-git/indexeddb-browser/issues"
+        target="_blank"
+      >
+        (Report an issue)
+      </a>
+    </div>
+  );
+}

src/devtools/components/sidebar/Sidebar.module.css

@@ -34,6 +34,11 @@
   border-inline-end: none;
 }
 
+.sidebar > :last-child {
+  margin-block-start: auto;
+  padding-inline: var(--sidebar-padding-inline);
+}
+
 .no-databases {
   padding-inline: var(--sidebar-padding-inline);
 }

src/devtools/components/sidebar/Sidebar.tsx

@@ -1,6 +1,7 @@
 import { Match, Show, Switch } from "solid-js";
 
 import { useIndexedDBContext } from "@/devtools/components/indexeddb-context";
+import AboutExtension from "@/devtools/components/sidebar/AboutExtension";
 import DatabaseTree from "@/devtools/components/sidebar/database-tree/DatabaseTree";
 import { useSidebarContext } from "@/devtools/components/sidebar/sidebar-context";
 import SidebarHeader from "@/devtools/components/sidebar/SidebarHeader";
@@ -48,6 +49,7 @@ export default function Sidebar() {
           )}
         </Match>
       </Switch>
+      <AboutExtension />
     </aside>
   );
 }