From f82bc660b0d231ac178033399169d9d618492eb3 Mon Sep 17 00:00:00 2001
From: bkimmel <brentkimmel@brentkimmel.com>
Date: Tue, 18 Mar 2025 00:06:38 -0400
Subject: [PATCH 1/4] add a label to theme icon

---
 src/components/ThemeSwitcher.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
index c662eda2..dc1eec4a 100644
--- a/src/components/ThemeSwitcher.tsx
+++ b/src/components/ThemeSwitcher.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { useTheme } from "../core/hooks/useTheme.ts";
 import { cn } from "../core/utils/cn.ts";
 import { Monitor, Moon, Sun } from "lucide-react";
@@ -10,6 +11,7 @@ export default function ThemeSwitcher({
   className?: string;
 }) {
   const { theme, preference, setPreference } = useTheme();
+  const [isFocused, setIsFocused] = useState(false);
 
   const themeIcons = {
     light: <Sun className="size-5" />,
@@ -24,6 +26,17 @@ export default function ThemeSwitcher({
     setPreference(nextPreference);
   };
 
+  const labelStyle = {
+    display: "block",
+    margin: "0 auto",
+    fontSize: ".65rem",
+    width: "100%",
+    position: "absolute",
+    top: isFocused ? "-2em" : "2em",
+    left: "0",
+    opacity: isFocused ? "100" : "0"
+  };
+
   return (
     <button
       type="button"
@@ -32,10 +45,11 @@ export default function ThemeSwitcher({
         className,
       )}
       onClick={toggleTheme}
-      aria-label={preference === "system"
-        ? `System theme (currently ${theme}). Click to change theme.`
-        : `Current theme: ${theme}. Click to change theme.`}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      aria-description={'Current theme'}
     >
+      <span style={labelStyle}>{preference}</span>
       {themeIcons[preference]}
     </button>
   );

From 9634e1ce39e3a8a5f0b1207188dc3284334179d5 Mon Sep 17 00:00:00 2001
From: bkimmel <brentkimmel@brentkimmel.com>
Date: Tue, 18 Mar 2025 22:52:58 -0400
Subject: [PATCH 2/4] PR Feedback: h/t Dan & Hunter

---
 src/components/ThemeSwitcher.tsx | 21 ++++-----------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
index dc1eec4a..de34aee4 100644
--- a/src/components/ThemeSwitcher.tsx
+++ b/src/components/ThemeSwitcher.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { useTheme } from "../core/hooks/useTheme.ts";
 import { cn } from "../core/utils/cn.ts";
 import { Monitor, Moon, Sun } from "lucide-react";
@@ -11,7 +10,6 @@ export default function ThemeSwitcher({
   className?: string;
 }) {
   const { theme, preference, setPreference } = useTheme();
-  const [isFocused, setIsFocused] = useState(false);
 
   const themeIcons = {
     light: <Sun className="size-5" />,
@@ -26,30 +24,19 @@ export default function ThemeSwitcher({
     setPreference(nextPreference);
   };
 
-  const labelStyle = {
-    display: "block",
-    margin: "0 auto",
-    fontSize: ".65rem",
-    width: "100%",
-    position: "absolute",
-    top: isFocused ? "-2em" : "2em",
-    left: "0",
-    opacity: isFocused ? "100" : "0"
-  };
+  const [firstCharOfPreference="", ...restOfPreference] = preference;
 
   return (
     <button
       type="button"
       className={cn(
-        "transition-all duration-300 scale-100 cursor-pointer m-6 p-2",
+        "transition-all duration-300 scale-100 cursor-pointer m-6 p-2 focus:*:data-label:opacity-100",
         className,
       )}
       onClick={toggleTheme}
-      onFocus={() => setIsFocused(true)}
-      onBlur={() => setIsFocused(false)}
-      aria-description={'Current theme'}
+      aria-description={'Change current theme'}
     >
-      <span style={labelStyle}>{preference}</span>
+      <span data-label className="transition-all block absolute w-full mb-auto mt-auto ml-0 mr-0 text-xs left-0 -top-5 opacity-0 rounded-lg">{firstCharOfPreference.toLocaleUpperCase() + restOfPreference.join("")}</span>
       {themeIcons[preference]}
     </button>
   );

From f2d6daa9fc57ac32218a8feb8eac365845f3a432 Mon Sep 17 00:00:00 2001
From: bkimmel <brentkimmel@brentkimmel.com>
Date: Tue, 18 Mar 2025 22:57:22 -0400
Subject: [PATCH 3/4] safety coalesce

---
 src/components/ThemeSwitcher.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
index de34aee4..2f456d4b 100644
--- a/src/components/ThemeSwitcher.tsx
+++ b/src/components/ThemeSwitcher.tsx
@@ -36,7 +36,7 @@ export default function ThemeSwitcher({
       onClick={toggleTheme}
       aria-description={'Change current theme'}
     >
-      <span data-label className="transition-all block absolute w-full mb-auto mt-auto ml-0 mr-0 text-xs left-0 -top-5 opacity-0 rounded-lg">{firstCharOfPreference.toLocaleUpperCase() + restOfPreference.join("")}</span>
+      <span data-label className="transition-all block absolute w-full mb-auto mt-auto ml-0 mr-0 text-xs left-0 -top-5 opacity-0 rounded-lg">{firstCharOfPreference.toLocaleUpperCase() + (restOfPreference ?? []).join("")}</span>
       {themeIcons[preference]}
     </button>
   );

From 1f109d161f24be20343dd417864a96c4a9ee6ee4 Mon Sep 17 00:00:00 2001
From: bkimmel <brentkimmel@brentkimmel.com>
Date: Tue, 18 Mar 2025 23:28:44 -0400
Subject: [PATCH 4/4] deno format

---
 src/components/ThemeSwitcher.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
index 2f456d4b..ee075793 100644
--- a/src/components/ThemeSwitcher.tsx
+++ b/src/components/ThemeSwitcher.tsx
@@ -24,7 +24,7 @@ export default function ThemeSwitcher({
     setPreference(nextPreference);
   };
 
-  const [firstCharOfPreference="", ...restOfPreference] = preference;
+  const [firstCharOfPreference = "", ...restOfPreference] = preference;
 
   return (
     <button
@@ -34,9 +34,15 @@ export default function ThemeSwitcher({
         className,
       )}
       onClick={toggleTheme}
-      aria-description={'Change current theme'}
+      aria-description={"Change current theme"}
     >
-      <span data-label className="transition-all block absolute w-full mb-auto mt-auto ml-0 mr-0 text-xs left-0 -top-5 opacity-0 rounded-lg">{firstCharOfPreference.toLocaleUpperCase() + (restOfPreference ?? []).join("")}</span>
+      <span
+        data-label
+        className="transition-all block absolute w-full mb-auto mt-auto ml-0 mr-0 text-xs left-0 -top-5 opacity-0 rounded-lg"
+      >
+        {firstCharOfPreference.toLocaleUpperCase() +
+          (restOfPreference ?? []).join("")}
+      </span>
       {themeIcons[preference]}
     </button>
   );