From e67675b5a9a0187189f4c739fdbcd0cecf45d914 Mon Sep 17 00:00:00 2001
From: Belar <belar@belardesign.com>
Date: Wed, 11 Sep 2024 11:33:43 +0000
Subject: [PATCH] feat: add links to issues and suggestions

---
 src/App.css       | 15 +++++++++++++++
 src/App.tsx       | 24 ++++++++++++++++++++++--
 tests/app.spec.ts | 18 ++++++++++++++++++
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/App.css b/src/App.css
index 12386d2..52e9598 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,3 +5,18 @@
 
   padding-bottom: 30px;
 }
+
+.icon-menu {
+  display: flex;
+  gap: 0.5rem;
+
+  padding: 0 0.5rem;
+}
+
+[data-theme="dark"] .icon-menu a {
+  color: var(--df-secondary);
+}
+
+[data-theme="light"] .icon-menu a {
+  color: var(--lf-secondary);
+}
diff --git a/src/App.tsx b/src/App.tsx
index 960a35d..b00170f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,7 +16,7 @@ import {
 import Select from "./Select";
 import LinkTag from "./LinkTag";
 import { toSortedBy } from "./sort";
-import { ChevronDown, ChevronRight } from "lucide-react";
+import { Bug, ChevronDown, ChevronRight, Lightbulb } from "lucide-react";
 import { sendMessage } from "./window";
 
 function App() {
@@ -245,8 +245,28 @@ function App() {
           onChange={setSearchPhrase}
         />
       </ControlsBar>
-      <ControlsBar stickTo={"bottom"}>
+      <ControlsBar stickTo={"bottom"} growFirstItem={true}>
         <p className="body-s">{metaBreadcrumbs || ""}</p>
+        <div className="icon-menu">
+          <a
+            href="https://github.com/author-more/all-icons/issues"
+            title="Report an issue"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Bug aria-hidden="true" size={16} />{" "}
+            <span className="visually-hidden">Report an issue</span>
+          </a>
+          <a
+            href="https://github.com/author-more/all-icons/discussions"
+            title="Suggest a feature"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Lightbulb aria-hidden="true" size={16} />{" "}
+            <span className="visually-hidden">Suggest a feature</span>
+          </a>
+        </div>
       </ControlsBar>
       {iconGrids}
       <p className="caption">
diff --git a/tests/app.spec.ts b/tests/app.spec.ts
index 2df6454..12206f2 100644
--- a/tests/app.spec.ts
+++ b/tests/app.spec.ts
@@ -40,4 +40,22 @@ test.describe("app", () => {
     const iconButtons = page.getByRole("button", { name: /(Insert icon:).*/ });
     expect(await iconButtons.count()).toBeGreaterThan(1);
   });
+
+  test("has links to report issues and suggest features", async ({ page }) => {
+    const reportIssueLink = page.getByRole("link", { name: /Report an issue/ });
+    await expect(reportIssueLink).toBeInViewport();
+    await expect(reportIssueLink).toHaveAttribute(
+      "href",
+      "https://github.com/author-more/all-icons/issues",
+    );
+
+    const suggestFeatureLink = page.getByRole("link", {
+      name: /Suggest a feature/,
+    });
+    await expect(suggestFeatureLink).toBeInViewport();
+    await expect(suggestFeatureLink).toHaveAttribute(
+      "href",
+      "https://github.com/author-more/all-icons/discussions",
+    );
+  });
 });