From ded41a63a16e5cbc57c92873db7c32bd2291068d Mon Sep 17 00:00:00 2001
From: Bhathiya Vicum <bathiyavicum0@gmail.com>
Date: Fri, 24 Apr 2026 10:16:00 +0530
Subject: [PATCH 1/4] feat: always show Swap/Reset buttons and disable when
 inputs are empty

---
 components/compare-form.tsx | 41 +++++++++++++++++--------------------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/components/compare-form.tsx b/components/compare-form.tsx
index cc79df4..56c4d5a 100644
--- a/components/compare-form.tsx
+++ b/components/compare-form.tsx
@@ -39,6 +39,7 @@ export function CompareForm({
   }, []);
 
   const canSubmit = Boolean(username1.trim() && username2.trim() && !loading);
+  const isEmpty = !username1.trim() && !username2.trim();
 
   const handleSwap = () => {
     setUsername1(username2);
@@ -90,28 +91,24 @@ export function CompareForm({
             >
               {loading ? t("form.compare.ing") : t("form.compare")}
             </Button>
-            {data && (
-              <>
-                <Button
-                  onClick={handleSwap}
-                  disabled={loading}
-                  type="button"
-                  title={t("form.swap")}
-                  className="shadow-sm transition-transform hover:-translate-y-0.5"
-                >
-                  <ArrowLeftRight className="h-4 w-4" />
-                </Button>
-                <Button
-                  onClick={handleReset}
-                  disabled={loading}
-                  title={t("form.reset")}
-                  type="button"
-                  className="shadow-sm transition-transform hover:-translate-y-0.5"
-                >
-                  <RefreshCw className="h-4 w-4" />
-                </Button>
-              </>
-            )}
+            <Button
+              onClick={handleSwap}
+              type="button"
+              disabled={isEmpty || loading}
+              title={t("form.swap")}
+              className="shadow-sm transition-transform hover:-translate-y-0.5"
+            >
+              <ArrowLeftRight className="h-4 w-4" />
+            </Button>
+            <Button
+              onClick={handleReset}
+              title={t("form.reset")}
+              disabled={isEmpty || loading}
+              type="button"
+              className="shadow-sm transition-transform hover:-translate-y-0.5"
+            >
+              <RefreshCw className="h-4 w-4" />
+            </Button>
           </div>
           {error && (
             <Alert variant="destructive" className="mt-4">

From 0e1a36692a06af345996f04f331e4766c17925ca Mon Sep 17 00:00:00 2001
From: Bhathiya Vicum <bathiyavicum0@gmail.com>
Date: Sat, 25 Apr 2026 10:28:23 +0530
Subject: [PATCH 2/4] refactor: extract GitHub link into reusable component and
 remove Icon

Co-authored-by: Copilot <copilot@github.com>
---
 components/app-footer.tsx   | 17 ++---------------
 components/github-link.tsx  | 24 ++++++++++++++++++++++++
 components/theme-toggle.tsx | 18 +++---------------
 components/ui/button.tsx    | 11 +----------
 4 files changed, 30 insertions(+), 40 deletions(-)
 create mode 100644 components/github-link.tsx

diff --git a/components/app-footer.tsx b/components/app-footer.tsx
index 95c1c47..63ea598 100644
--- a/components/app-footer.tsx
+++ b/components/app-footer.tsx
@@ -2,8 +2,7 @@
 
 import { useTranslation } from "@/components/language-provider";
 import { cn } from "@/lib/utils";
-import { Icon } from "./ui/button";
-import { FaGithub } from "react-icons/fa";
+import { GithubLink } from "./github-link";
 
 export function AppFooter() {
   const { t, dir } = useTranslation();
@@ -57,19 +56,7 @@ export function AppFooter() {
             >
               {t("footer.note")}
             </p>
-            <a href="https://github.com/O2sa/DevImpact"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="GitHub Repository">
-              <Icon
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="flex items-center gap-2"
-              >
-                <FaGithub className="text-black dark:text-white" />
-              </Icon>
-            </a>
+            <GithubLink />
           </div>
         </div>
 
diff --git a/components/github-link.tsx b/components/github-link.tsx
new file mode 100644
index 0000000..22ff1fb
--- /dev/null
+++ b/components/github-link.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { Button } from "./ui/button";
+import { FaGithub } from "react-icons/fa";
+
+export function GithubLink() {
+  return (
+    <a
+      href="https://github.com/O2sa/DevImpact"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="GitHub Repository"
+    >
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className="flex items-center gap-2"
+      >
+        <FaGithub className="text-black dark:text-white" />
+      </Button>
+    </a>
+  );
+}
\ No newline at end of file
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
index 3d47fd9..6a2cab1 100644
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@@ -2,10 +2,10 @@
 
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-import { Button, Icon } from "./ui/button";
 import { useSyncExternalStore } from "react";
 import { useTranslation } from "./language-provider";
-import { FaGithub } from "react-icons/fa";
+import { Button } from "./ui/button";
+import { GithubLink } from "./github-link";
 
 const emptySubscribe = () => () => { };
 
@@ -44,19 +44,7 @@ export function ThemeToggle() {
       >
         {mounted && current === "dark" ? <Sun size={16} /> : <Moon size={16} />}
       </Button>
-      <a href="https://github.com/O2sa/DevImpact"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="GitHub Repository">
-        <Icon
-          type="button"
-          variant="ghost"
-          size="sm"
-          className="flex items-center gap-2"
-        >
-          <FaGithub className="text-black dark:text-white" />
-        </Icon>
-      </a>
+      <GithubLink />
 
 
     </div>
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 8cf0297..bec75c3 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -37,13 +37,4 @@ export function Button({ className, variant, size, ...props }: ButtonProps) {
       {...props}
     />
   );
-}
-
-export function Icon({ className, variant, size, ...props }: ButtonProps) {
-  return (
-    <button
-      className={cn(buttonVariants({ variant, size }), className)}
-      {...props}
-    />
-  );
-}
+}
\ No newline at end of file

From 5b2ba76505b1a0816539b15d63350c964850613f Mon Sep 17 00:00:00 2001
From: Bhathiya Vicum <bathiyavicum0@gmail.com>
Date: Sun, 26 Apr 2026 09:19:17 +0530
Subject: [PATCH 3/4] 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 85a0ddf91adaddd5e02cd3693caba939e0df46eb 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 4/4] 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"
             >