From c53dda317d1610afaf3a21623df0435df69c175d Mon Sep 17 00:00:00 2001
From: Sebastian-ubs <141921979+Sebastian-ubs@users.noreply.github.com>
Date: Tue, 10 Sep 2024 16:02:45 +0200
Subject: [PATCH] add explanations to preview app (#1121)

* add explanations to preview app

* add a little more styling

* remove unneeded comment
---
 .../src/preview/app.component.tsx             |  7 +++--
 .../pages/components/advanced.component.tsx   | 15 ++++-------
 .../pages/components/basics.component.tsx     |  5 +++-
 .../basics/alert.examples.component.tsx       |  4 +--
 .../basics/button.examples.component.tsx      | 11 ++++----
 .../basics/card.examples.component.tsx        |  4 +--
 .../basics/checkbox.examples.component.tsx    |  5 ++--
 .../src/preview/pages/guide.component.tsx     |  7 ++++-
 .../pages/guide/direction.guide.component.tsx |  5 ++--
 .../preview/pages/guide/howto.component.tsx   | 24 +++++++++++++++++
 .../contact-buttons.component.tsx             | 27 +++++++++++++++++++
 ...gle.tsx => direction-toggle.component.tsx} |  1 +
 .../discord-logo.component.tsx                | 17 ++++++++++++
 .../theme-toggle.component.tsx                |  2 ++
 14 files changed, 106 insertions(+), 28 deletions(-)
 create mode 100644 lib/platform-bible-react/src/preview/pages/guide/howto.component.tsx
 create mode 100644 lib/platform-bible-react/src/preview/preview-components/contact-buttons.component.tsx
 rename lib/platform-bible-react/src/preview/preview-components/{direction-toggle.tsx => direction-toggle.component.tsx} (95%)
 create mode 100644 lib/platform-bible-react/src/preview/preview-components/discord-logo.component.tsx

diff --git a/lib/platform-bible-react/src/preview/app.component.tsx b/lib/platform-bible-react/src/preview/app.component.tsx
index c6cc3555b1..6989fc8b86 100644
--- a/lib/platform-bible-react/src/preview/app.component.tsx
+++ b/lib/platform-bible-react/src/preview/app.component.tsx
@@ -5,9 +5,10 @@ import Basics from './pages/components/basics.component';
 import Guide from './pages/guide.component';
 import Layouts from './pages/layouts.component';
 import Playground from './pages/playground.component';
-import { DirToggle, Direction } from './preview-components/direction-toggle';
+import { DirToggle, Direction } from './preview-components/direction-toggle.component';
 import { ThemeProvider } from './preview-components/theme-provider.component';
 import { ThemeButton } from './preview-components/theme-toggle.component';
+import ContactButtons from './preview-components/contact-buttons.component';
 
 function App() {
   const [direction, setDirection] = useState<Direction>('ltr');
@@ -20,8 +21,10 @@ function App() {
           <DirToggle direction={direction} onChangeDirection={changeDirectionHandler} />
           <ThemeButton />
         </div>
+        <div className="pr-fixed pr-bottom-2 pr-right-4 pr-flex pr-gap-2">
+          <ContactButtons />
+        </div>
         <h1 className="pr-pb-4 pr-uppercase">platform-bible-react Preview</h1>
-        <p>Edit lib/platform-bible-react/src/preview/components/... and save to see updates</p>
         <Tabs defaultValue="Playground" className="pr-pt-4" dir={direction}>
           <TabsList>
             <TabsTrigger value="Basics">Basic Components</TabsTrigger>
diff --git a/lib/platform-bible-react/src/preview/pages/components/advanced.component.tsx b/lib/platform-bible-react/src/preview/pages/components/advanced.component.tsx
index b4dd87df23..12573e9781 100644
--- a/lib/platform-bible-react/src/preview/pages/components/advanced.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/advanced.component.tsx
@@ -74,18 +74,17 @@ function Compositions({ direction }: HasDirection) {
           <VerticalTabsTrigger value="Book Chapter Control">
             Book Chapter Control
           </VerticalTabsTrigger>
-          <VerticalTabsTrigger value="Scroll Group Selector">
-            Scroll Group Selector
-          </VerticalTabsTrigger>
-          <VerticalTabsTrigger value="Theme Toggle">Theme Toggle</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Data Table">Data Table</VerticalTabsTrigger>
-          <VerticalTabsTrigger value="Marketplace">Marketplace</VerticalTabsTrigger>
-          <VerticalTabsTrigger value="Result List">Result List</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Inventory">Inventory</VerticalTabsTrigger>
+          <VerticalTabsTrigger value="Marketplace">Marketplace</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Navigation Content Search">
             Navigation Content Search
           </VerticalTabsTrigger>
+          <VerticalTabsTrigger value="Result List">Result List</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Settings List">Settings Components</VerticalTabsTrigger>
+          <VerticalTabsTrigger value="Scroll Group Selector">
+            Scroll Group Selector
+          </VerticalTabsTrigger>
         </VerticalTabsList>
 
         <VerticalTabsContent value="Book Chapter Control">
@@ -102,10 +101,6 @@ function Compositions({ direction }: HasDirection) {
           <div>Scroll Group Id: {`${scrollGroupId}`}</div>
         </VerticalTabsContent>
 
-        <VerticalTabsContent value="Theme Toggle">
-          <ThemeToggle />
-        </VerticalTabsContent>
-
         <VerticalTabsContent value="Data Table">
           <DataTable enablePagination showPaginationControls columns={columns} data={data} />
         </VerticalTabsContent>
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics.component.tsx
index 79b3a710e8..efce6bbede 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics.component.tsx
@@ -67,7 +67,10 @@ function Basics({ direction }: HasDirection) {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Search Bar">
-          <SearchBar onSearch={(search) => alert(`you searched for ${search}`)} /> &larr; type here
+          <div className="pr-flex pr-gap-2">
+            <SearchBar onSearch={(search) => alert(`you searched for ${search}`)} />{' '}
+            {direction === 'rtl' ? <>&rarr;</> : <>&larr;</>} type here
+          </div>
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Select">
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/alert.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/alert.examples.component.tsx
index 865ff4ae24..0225d98506 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/alert.examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/alert.examples.component.tsx
@@ -3,7 +3,7 @@ import { AlertCircle, Terminal } from 'lucide-react';
 
 export default function ExampleAlerts() {
   return (
-    <>
+    <div className="pr-flex pr-flex-col pr-gap-2">
       <Alert>
         <Terminal className="pr-h-4 pr-w-4" />
         <AlertTitle>Heads up!</AlertTitle>
@@ -24,6 +24,6 @@ export default function ExampleAlerts() {
       <Alert className="pr-max-w-64">
         Alert! With nothing else in it, this looks like a Card 🤔
       </Alert>
-    </>
+    </div>
   );
 }
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/button.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/button.examples.component.tsx
index 2a2af68f99..86225130a9 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/button.examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/button.examples.component.tsx
@@ -5,10 +5,11 @@ export default function ButtonExamples() {
     <table>
       <tbody>
         <tr>
-          <td>variant</td>
-          <td>
-            <Button onClick={() => alert('Hello World')}>Shadcn Button</Button>
-            <Button variant="default">default</Button>
+          <td className="pr-pe-2">variant</td>
+          <td className="pr-flex pr-gap-2">
+            <Button onClick={() => alert('Hello World')} variant="default">
+              default
+            </Button>
             <Button variant="destructive">destructive</Button>
             <Button variant="outline">outline</Button>
             <Button variant="secondary">secondary</Button>
@@ -17,7 +18,7 @@ export default function ButtonExamples() {
           </td>
         </tr>
         <tr>
-          <td>size</td>
+          <td className="pr-pe-2">size</td>
           <td>
             <span className="pr-mx-2">default:</span>
             <Button size="default">AAA</Button>
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/card.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/card.examples.component.tsx
index 467c00c224..ef46b69350 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/card.examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/card.examples.component.tsx
@@ -27,7 +27,7 @@ export default function CardExamples({ direction }: HasDirection) {
   );
 
   return (
-    <>
+    <div className="pr-flex pr-flex-col pr-gap-2">
       <Card>Card only</Card>
 
       <Card>
@@ -99,6 +99,6 @@ export default function CardExamples({ direction }: HasDirection) {
           </Button>
         </CardFooter>
       </Card>
-    </>
+    </div>
   );
 }
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/checkbox.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/checkbox.examples.component.tsx
index 94f47453a4..a4318edf21 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/checkbox.examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/checkbox.examples.component.tsx
@@ -3,9 +3,8 @@ import { Label } from '@/components/shadcn-ui/label';
 
 export default function CheckboxExamples() {
   return (
-    <>
+    <div className="pr-flex pr-flex-col pr-gap-2">
       <p>Note: that the bug of checkboxes jumping up and down is already coming from Shadcn</p>
-      <br />
       <div>
         <Checkbox id="selectable" />
         <Label htmlFor="selectable" className="pr-ms-2">
@@ -30,6 +29,6 @@ export default function CheckboxExamples() {
           disabled
         </Label>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/lib/platform-bible-react/src/preview/pages/guide.component.tsx b/lib/platform-bible-react/src/preview/pages/guide.component.tsx
index 18008fc8c6..39f805a482 100644
--- a/lib/platform-bible-react/src/preview/pages/guide.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/guide.component.tsx
@@ -9,6 +9,7 @@ import { DirectionProps } from '@/preview/preview-components/direction-toggle';
 import DirectionGuide from './guide/direction.guide.component';
 import ThemeColorDisplay from './guide/theme-color-display.component';
 import ThemingGuide from './guide/theming.guide.component';
+import HowToGuide from './guide/howto.component';
 
 function Guide({ direction, onChangeDirection: setDirection }: DirectionProps) {
   return (
@@ -16,13 +17,17 @@ function Guide({ direction, onChangeDirection: setDirection }: DirectionProps) {
       <p className="pr-mb-2 pr-text-muted-foreground">
         A place to look up and learn about some concepts
       </p>
-      <VerticalTabs dir={direction} defaultValue="Direction">
+      <VerticalTabs dir={direction} defaultValue="Howto">
         <VerticalTabsList>
+          <VerticalTabsTrigger value="Howto">How to use</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Direction">Direction</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Theming">Theming</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Theme">Current Theme Colors</VerticalTabsTrigger>
         </VerticalTabsList>
 
+        <VerticalTabsContent value="Howto">
+          <HowToGuide />
+        </VerticalTabsContent>
         <VerticalTabsContent value="Direction">
           <DirectionGuide direction={direction} onChangeDirection={setDirection} />
         </VerticalTabsContent>
diff --git a/lib/platform-bible-react/src/preview/pages/guide/direction.guide.component.tsx b/lib/platform-bible-react/src/preview/pages/guide/direction.guide.component.tsx
index d00093930e..3bf18c8d1f 100644
--- a/lib/platform-bible-react/src/preview/pages/guide/direction.guide.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/guide/direction.guide.component.tsx
@@ -1,7 +1,7 @@
 import { History } from 'lucide-react';
 import { Button } from '@/components/shadcn-ui/button';
 import { Input } from '@/components/shadcn-ui/input';
-import { DirectionProps, DirToggle } from '@/preview/preview-components/direction-toggle';
+import { DirectionProps, DirToggle } from '@/preview/preview-components/direction-toggle.component';
 
 export default function DirectionGuide({
   direction,
@@ -94,10 +94,11 @@ export default function DirectionGuide({
         Good: <code>pr-text-end</code>
       </p>
       <h2 className="pr-py-2 pr-font-bold">Another bad example</h2>
+      <p>In left-to-right the icon should appear at the left</p>
       <div className="pr-flex">
         <div className="pr-relative">
           <Input
-            value="icon not to stay right"
+            value=""
             className="pr-box-border pr-gap-2.5 pr-rounded-lg pr-border pr-border-solid pr-border-black pr-bg-white pr-py-2 pr-pl-4 pr-pr-3 pr-font-medium pr-text-slate-900 pr-shadow-none pr-outline-none"
           />
           <History className="pr-absolute pr-right-3 pr-top-1/2 pr-h-4 pr-w-4 pr--translate-y-1/2 pr-transform pr-cursor-pointer pr-text-gray-500" />
diff --git a/lib/platform-bible-react/src/preview/pages/guide/howto.component.tsx b/lib/platform-bible-react/src/preview/pages/guide/howto.component.tsx
new file mode 100644
index 0000000000..c3b4f6cf37
--- /dev/null
+++ b/lib/platform-bible-react/src/preview/pages/guide/howto.component.tsx
@@ -0,0 +1,24 @@
+export default function HowToGuide() {
+  return (
+    <>
+      <p>
+        To make changes to this preview edit files under{' '}
+        <code>lib/platform-bible-react/src/preview/pages</code>. On saving a file your changes will
+        show up immediately.
+      </p>
+      <br />
+      <p>
+        For detailed explanation what to consider for developing components see{' '}
+        <a
+          target="_blank"
+          rel="noreferrer"
+          className="pr-text-blue-600 hover:pr-underline"
+          href="https://github.com/paranext/paranext/wiki/Component-usage-and-creation"
+        >
+          the component creation page
+        </a>{' '}
+        in the wiki.
+      </p>
+    </>
+  );
+}
diff --git a/lib/platform-bible-react/src/preview/preview-components/contact-buttons.component.tsx b/lib/platform-bible-react/src/preview/preview-components/contact-buttons.component.tsx
new file mode 100644
index 0000000000..3f95b6d7b8
--- /dev/null
+++ b/lib/platform-bible-react/src/preview/preview-components/contact-buttons.component.tsx
@@ -0,0 +1,27 @@
+import { Button } from '@/components/shadcn-ui/button';
+import { Mail } from 'lucide-react';
+import DiscordLogo from './discord-logo.component';
+
+export default function ContactButtons() {
+  return (
+    <>
+      <span className="pr-leading-9">Get in contact with the UX Team</span>
+
+      <Button variant="outline" size="icon" title="Discord">
+        <a
+          target="_blank"
+          rel="noreferrer"
+          href="https://discord.com/channels/1064938364597436416/1082713526780575845"
+        >
+          <DiscordLogo />
+        </a>
+      </Button>
+
+      <Button variant="outline" size="icon" title="email">
+        <a href="mailto:feedback@paratext.org">
+          <Mail />
+        </a>
+      </Button>
+    </>
+  );
+}
diff --git a/lib/platform-bible-react/src/preview/preview-components/direction-toggle.tsx b/lib/platform-bible-react/src/preview/preview-components/direction-toggle.component.tsx
similarity index 95%
rename from lib/platform-bible-react/src/preview/preview-components/direction-toggle.tsx
rename to lib/platform-bible-react/src/preview/preview-components/direction-toggle.component.tsx
index 7f837d53cc..5917f80ca2 100644
--- a/lib/platform-bible-react/src/preview/preview-components/direction-toggle.tsx
+++ b/lib/platform-bible-react/src/preview/preview-components/direction-toggle.component.tsx
@@ -17,6 +17,7 @@ export const DirToggle = React.forwardRef<HTMLButtonElement, ButtonProps & Direc
         onClick={() => {
           changeDirection(oppositeDirection);
         }}
+        title="Toggle layout direction"
         {...props}
       >
         {direction}
diff --git a/lib/platform-bible-react/src/preview/preview-components/discord-logo.component.tsx b/lib/platform-bible-react/src/preview/preview-components/discord-logo.component.tsx
new file mode 100644
index 0000000000..5e0719701e
--- /dev/null
+++ b/lib/platform-bible-react/src/preview/preview-components/discord-logo.component.tsx
@@ -0,0 +1,17 @@
+export default function DiscordLogo() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width="100"
+      height="100"
+      viewBox="0 0 50 50"
+      stroke="currentColor"
+      fill="currentColor"
+      className="pr-h-8 pr-w-8"
+    >
+      <path d="M 18.90625 7 C 18.90625 7 12.539063 7.4375 8.375 10.78125 C 8.355469 10.789063 8.332031 10.800781 8.3125 10.8125 C 7.589844 11.480469 7.046875 12.515625 6.375 14 C 5.703125 15.484375 4.992188 17.394531 4.34375 19.53125 C 3.050781 23.808594 2 29.058594 2 34 C 1.996094 34.175781 2.039063 34.347656 2.125 34.5 C 3.585938 37.066406 6.273438 38.617188 8.78125 39.59375 C 11.289063 40.570313 13.605469 40.960938 14.78125 41 C 15.113281 41.011719 15.429688 40.859375 15.625 40.59375 L 18.0625 37.21875 C 20.027344 37.683594 22.332031 38 25 38 C 27.667969 38 29.972656 37.683594 31.9375 37.21875 L 34.375 40.59375 C 34.570313 40.859375 34.886719 41.011719 35.21875 41 C 36.394531 40.960938 38.710938 40.570313 41.21875 39.59375 C 43.726563 38.617188 46.414063 37.066406 47.875 34.5 C 47.960938 34.347656 48.003906 34.175781 48 34 C 48 29.058594 46.949219 23.808594 45.65625 19.53125 C 45.007813 17.394531 44.296875 15.484375 43.625 14 C 42.953125 12.515625 42.410156 11.480469 41.6875 10.8125 C 41.667969 10.800781 41.644531 10.789063 41.625 10.78125 C 37.460938 7.4375 31.09375 7 31.09375 7 C 31.019531 6.992188 30.949219 6.992188 30.875 7 C 30.527344 7.046875 30.234375 7.273438 30.09375 7.59375 C 30.09375 7.59375 29.753906 8.339844 29.53125 9.40625 C 27.582031 9.09375 25.941406 9 25 9 C 24.058594 9 22.417969 9.09375 20.46875 9.40625 C 20.246094 8.339844 19.90625 7.59375 19.90625 7.59375 C 19.734375 7.203125 19.332031 6.964844 18.90625 7 Z M 18.28125 9.15625 C 18.355469 9.359375 18.40625 9.550781 18.46875 9.78125 C 16.214844 10.304688 13.746094 11.160156 11.4375 12.59375 C 11.074219 12.746094 10.835938 13.097656 10.824219 13.492188 C 10.816406 13.882813 11.039063 14.246094 11.390625 14.417969 C 11.746094 14.585938 12.167969 14.535156 12.46875 14.28125 C 17.101563 11.410156 22.996094 11 25 11 C 27.003906 11 32.898438 11.410156 37.53125 14.28125 C 37.832031 14.535156 38.253906 14.585938 38.609375 14.417969 C 38.960938 14.246094 39.183594 13.882813 39.175781 13.492188 C 39.164063 13.097656 38.925781 12.746094 38.5625 12.59375 C 36.253906 11.160156 33.785156 10.304688 31.53125 9.78125 C 31.59375 9.550781 31.644531 9.359375 31.71875 9.15625 C 32.859375 9.296875 37.292969 9.894531 40.3125 12.28125 C 40.507813 12.460938 41.1875 13.460938 41.8125 14.84375 C 42.4375 16.226563 43.09375 18.027344 43.71875 20.09375 C 44.9375 24.125 45.921875 29.097656 45.96875 33.65625 C 44.832031 35.496094 42.699219 36.863281 40.5 37.71875 C 38.5 38.496094 36.632813 38.84375 35.65625 38.9375 L 33.96875 36.65625 C 34.828125 36.378906 35.601563 36.078125 36.28125 35.78125 C 38.804688 34.671875 40.15625 33.5 40.15625 33.5 C 40.570313 33.128906 40.605469 32.492188 40.234375 32.078125 C 39.863281 31.664063 39.226563 31.628906 38.8125 32 C 38.8125 32 37.765625 32.957031 35.46875 33.96875 C 34.625 34.339844 33.601563 34.707031 32.4375 35.03125 C 32.167969 35 31.898438 35.078125 31.6875 35.25 C 29.824219 35.703125 27.609375 36 25 36 C 22.371094 36 20.152344 35.675781 18.28125 35.21875 C 18.070313 35.078125 17.8125 35.019531 17.5625 35.0625 C 16.394531 34.738281 15.378906 34.339844 14.53125 33.96875 C 12.234375 32.957031 11.1875 32 11.1875 32 C 10.960938 31.789063 10.648438 31.699219 10.34375 31.75 C 9.957031 31.808594 9.636719 32.085938 9.53125 32.464844 C 9.421875 32.839844 9.546875 33.246094 9.84375 33.5 C 9.84375 33.5 11.195313 34.671875 13.71875 35.78125 C 14.398438 36.078125 15.171875 36.378906 16.03125 36.65625 L 14.34375 38.9375 C 13.367188 38.84375 11.5 38.496094 9.5 37.71875 C 7.300781 36.863281 5.167969 35.496094 4.03125 33.65625 C 4.078125 29.097656 5.0625 24.125 6.28125 20.09375 C 6.90625 18.027344 7.5625 16.226563 8.1875 14.84375 C 8.8125 13.460938 9.492188 12.460938 9.6875 12.28125 C 12.707031 9.894531 17.140625 9.296875 18.28125 9.15625 Z M 18.5 21 C 15.949219 21 14 23.316406 14 26 C 14 28.683594 15.949219 31 18.5 31 C 21.050781 31 23 28.683594 23 26 C 23 23.316406 21.050781 21 18.5 21 Z M 31.5 21 C 28.949219 21 27 23.316406 27 26 C 27 28.683594 28.949219 31 31.5 31 C 34.050781 31 36 28.683594 36 26 C 36 23.316406 34.050781 21 31.5 21 Z M 18.5 23 C 19.816406 23 21 24.265625 21 26 C 21 27.734375 19.816406 29 18.5 29 C 17.183594 29 16 27.734375 16 26 C 16 24.265625 17.183594 23 18.5 23 Z M 31.5 23 C 32.816406 23 34 24.265625 34 26 C 34 27.734375 32.816406 29 31.5 29 C 30.183594 29 29 27.734375 29 26 C 29 24.265625 30.183594 23 31.5 23 Z" />
+    </svg>
+  );
+}
diff --git a/lib/platform-bible-react/src/preview/preview-components/theme-toggle.component.tsx b/lib/platform-bible-react/src/preview/preview-components/theme-toggle.component.tsx
index c1d5a2870c..cc49819e86 100644
--- a/lib/platform-bible-react/src/preview/preview-components/theme-toggle.component.tsx
+++ b/lib/platform-bible-react/src/preview/preview-components/theme-toggle.component.tsx
@@ -57,6 +57,7 @@ export const ThemeButton = React.forwardRef<
         <Button
           variant="outline"
           size="icon"
+          title="Toggle theme"
           onClick={() =>
             setTheme(
               // string replacement should always end up with a value of 'Theme', but ESLint cannot know or guarantee it
@@ -74,6 +75,7 @@ export const ThemeButton = React.forwardRef<
         <Button
           variant="outline"
           size="icon"
+          title="Toggle dark/light mode"
           onClick={() =>
             setTheme(
               // string replacement should always end up with a value of 'Theme', but ESLint cannot know or guarantee it