From 260c267af4d92eabf5d62182f26ff61585363c6e Mon Sep 17 00:00:00 2001
From: GeorgeCodec <89489744+DavidCodec@users.noreply.github.com>
Date: Sun, 26 Apr 2026 15:39:27 -0400
Subject: [PATCH 1/3] feat(i18n): replace native language select with custom
 dropdown (#117)

---
 components/language-switcher.tsx | 109 +++++++++++++++++++++++++++----
 1 file changed, 98 insertions(+), 11 deletions(-)

diff --git a/components/language-switcher.tsx b/components/language-switcher.tsx
index d4e7d37..2984c07 100644
--- a/components/language-switcher.tsx
+++ b/components/language-switcher.tsx
@@ -1,23 +1,110 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "./language-provider";
 import { cn } from "../lib/utils";
 
 export function LanguageSwitcher() {
   const { locale, setLocale, locales, dir } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const currentLocale = locales.find((item) => item.value === locale);
+
+  useEffect(() => {
+    function onPointerDown(event: MouseEvent) {
+      if (!wrapperRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+
+    function onEscape(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onEscape);
+
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onEscape);
+    };
+  }, []);
+
+  function onSelect(nextLocale: (typeof locales)[number]["value"]) {
+    setLocale(nextLocale);
+    setOpen(false);
+  }
+
   return (
-    <div className={cn("flex items-center gap-2 text-sm", dir === "rtl" && "flex-row-reverse")}>
-      <select
-        className="h-9 rounded-lg border border-input bg-background px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/60"
-        value={locale}
-        onChange={(e) => setLocale(e.target.value as any)}
+    <div
+      ref={wrapperRef}
+      dir={dir}
+      className={cn("relative flex items-center gap-2 text-sm", dir === "rtl" && "flex-row-reverse")}
+    >
+      <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label="Select language"
+        className={cn(
+          "flex h-9 min-w-[140px] items-center justify-between rounded-lg border border-input bg-background px-3 text-sm text-foreground transition-colors",
+          "focus:outline-none focus:ring-2 focus:ring-primary/60",
+          open && "ring-2 ring-primary/60"
+        )}
+        onClick={() => setOpen((prev) => !prev)}
       >
-        {locales.map((l) => (
-          <option key={l.value} value={l.value}>
-            {l.label}
-          </option>
-        ))}
-      </select>
+        <span>{currentLocale?.label ?? locale}</span>
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+          className={cn("h-4 w-4 transition-transform", open && "rotate-180")}
+        >
+          <path
+            d="M6 9L12 15L18 9"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+
+      {open && (
+        <ul
+          role="listbox"
+          aria-label="Language options"
+          className={cn(
+            "absolute top-full z-30 mt-1 max-h-60 min-w-[140px] overflow-auto rounded-lg border border-input bg-background p-1 text-sm text-popover-foreground shadow-md flex flex-col gap-1",
+            dir === "rtl" ? "left-0" : "right-0"
+          )}
+        >
+          {locales.map((item) => {
+            const isSelected = item.value === locale;
+            return (
+              <li key={item.value}>
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected={isSelected}
+                  className={cn(
+                    "flex w-full items-center rounded-md px-2 py-1.5 text-left transition-colors",
+                    "hover:bg-accent hover:text-accent-foreground",
+                    "focus:outline-none focus:ring-2 focus:ring-primary/40",
+                    isSelected && "bg-accent text-accent-foreground"
+                  )}
+                  onClick={() => onSelect(item.value)}
+                >
+                  {item.label}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
     </div>
   );
 }

From 862241388444e80508247d15890459453018c8e5 Mon Sep 17 00:00:00 2001
From: Bhathiya Vicum <bathiyavicum0@gmail.com>
Date: Sun, 26 Apr 2026 09:19:17 +0530
Subject: [PATCH 2/3] fix: enable swap and reset buttons when data is present

---
 components/compare-form.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/compare-form.tsx b/components/compare-form.tsx
index 56c4d5a..ef9e3ca 100644
--- a/components/compare-form.tsx
+++ b/components/compare-form.tsx
@@ -94,7 +94,7 @@ export function CompareForm({
             <Button
               onClick={handleSwap}
               type="button"
-              disabled={isEmpty || loading}
+              disabled={(!data && isEmpty) || loading}
               title={t("form.swap")}
               className="shadow-sm transition-transform hover:-translate-y-0.5"
             >
@@ -103,7 +103,7 @@ export function CompareForm({
             <Button
               onClick={handleReset}
               title={t("form.reset")}
-              disabled={isEmpty || loading}
+              disabled={(!data && isEmpty) || loading}
               type="button"
               className="shadow-sm transition-transform hover:-translate-y-0.5"
             >

From 4c5aa397813b9e4af940b7de9d8d8ece147c9994 Mon Sep 17 00:00:00 2001
From: Osama Mabkhot <99215291+O2sa@users.noreply.github.com>
Date: Sun, 26 Apr 2026 22:50:58 +0300
Subject: [PATCH 3/3] refactor: enhance isEmpty logic

---
 components/compare-form.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/compare-form.tsx b/components/compare-form.tsx
index ef9e3ca..fe89b40 100644
--- a/components/compare-form.tsx
+++ b/components/compare-form.tsx
@@ -39,7 +39,7 @@ export function CompareForm({
   }, []);
 
   const canSubmit = Boolean(username1.trim() && username2.trim() && !loading);
-  const isEmpty = !username1.trim() && !username2.trim();
+  const isEmpty = (!username1.trim() && !username2.trim()) && !data;
 
   const handleSwap = () => {
     setUsername1(username2);
@@ -94,7 +94,7 @@ export function CompareForm({
             <Button
               onClick={handleSwap}
               type="button"
-              disabled={(!data && isEmpty) || loading}
+              disabled={isEmpty || loading}
               title={t("form.swap")}
               className="shadow-sm transition-transform hover:-translate-y-0.5"
             >
@@ -103,7 +103,7 @@ export function CompareForm({
             <Button
               onClick={handleReset}
               title={t("form.reset")}
-              disabled={(!data && isEmpty) || loading}
+              disabled={isEmpty || loading}
               type="button"
               className="shadow-sm transition-transform hover:-translate-y-0.5"
             >