clean up the accessibility panel.

src/App.tsx

@@ -1,51 +1,13 @@
-import { useEffect, useState } from "react";
 import "./App.css";
 import { Settings } from "./components/settings/Settings";
-import {
-  checkAccessibilityPermissions,
-  requestAccessibilityPermissions,
-} from "tauri-plugin-macos-permissions-api";
 import HandyTextLogo from "./components/icons/HandyTextLogo";
+import AccessibilityPermissions from "./components/AccessibilityPermissions";
 
 function App() {
-  const [hasAccessibility, setHasAccessibility] = useState(false);
-
-  const checkPermissions = () => {
-    checkAccessibilityPermissions().then((hasPermissions) => {
-      if (!hasPermissions) {
-        requestAccessibilityPermissions().then((permissions) => {
-          setHasAccessibility(permissions);
-        });
-        return;
-      }
-      setHasAccessibility(hasPermissions);
-    });
-  };
-
-  useEffect(() => {
-    checkPermissions();
-  }, []);
-
   return (
-    <div className="min-h-screen flex flex-col items-center pt-6 w-full">
-      {!hasAccessibility && (
-        <div className="bg-yellow-50 p-4 w-full">
-          <div className="flex justify-between items-center">
-            <div className="ml-3">
-              <p className="text-sm font-medium">
-                Accessibility permissions are required for keyboard shortcuts.
-              </p>
-            </div>
-            <button
-              onClick={checkPermissions}
-              className="bg-yellow-200 hover:bg-yellow-300 font-medium py-1 px-3 rounded text-sm mr-4"
-            >
-              Recheck Permissions
-            </button>
-          </div>
-        </div>
-      )}
+    <div className="min-h-screen flex flex-col items-center pt-6 w-full gap-4 px-4">
       <HandyTextLogo width={300} />
+      <AccessibilityPermissions />
       <Settings />
     </div>
   );

src/components/AccessibilityPermissions.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+import {
+  checkAccessibilityPermissions,
+  requestAccessibilityPermissions,
+} from "tauri-plugin-macos-permissions-api";
+
+// Define permission state type
+type PermissionState = "request" | "verify" | "granted";
+
+// Define button configuration type
+interface ButtonConfig {
+  text: string;
+  className: string;
+}
+
+const AccessibilityPermissions: React.FC = () => {
+  const [hasAccessibility, setHasAccessibility] = useState<boolean>(false);
+  const [permissionState, setPermissionState] =
+    useState<PermissionState>("request");
+
+  // Check permissions without requesting
+  const checkPermissions = async (): Promise<boolean> => {
+    const hasPermissions: boolean = await checkAccessibilityPermissions();
+    setHasAccessibility(hasPermissions);
+    setPermissionState(hasPermissions ? "granted" : "verify");
+    return hasPermissions;
+  };
+
+  // Handle the unified button action based on current state
+  const handleButtonClick = async (): Promise<void> => {
+    if (permissionState === "request") {
+      try {
+        await requestAccessibilityPermissions();
+        // After system prompt, transition to verification state
+        setPermissionState("verify");
+      } catch (error) {
+        console.error("Error requesting permissions:", error);
+        setPermissionState("verify");
+      }
+    } else if (permissionState === "verify") {
+      // State is "verify" - check if permission was granted
+      await checkPermissions();
+    }
+  };
+
+  // On app boot - check permissions
+  useEffect(() => {
+    const initialSetup = async (): Promise<void> => {
+      const hasPermissions: boolean = await checkAccessibilityPermissions();
+      setHasAccessibility(hasPermissions);
+      setPermissionState(hasPermissions ? "granted" : "request");
+    };
+
+    initialSetup();
+  }, []);
+
+  if (hasAccessibility) {
+    return null;
+  }
+
+  // Configure button text and style based on state
+  const buttonConfig: Record<PermissionState, ButtonConfig | null> = {
+    request: {
+      text: "Grant",
+      className:
+        "px-2 py-1 text-sm font-semibold bg-mid-gray/10 border  border-mid-gray/80 hover:bg-logo-primary/10 rounded cursor-pointer hover:border-logo-primary",
+    },
+    verify: {
+      text: "Verify",
+      className:
+        "bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-3 rounded text-sm flex items-center justify-center cursor-pointer",
+    },
+    granted: null,
+  };
+
+  const config = buttonConfig[permissionState] as ButtonConfig;
+
+  return (
+    <div className="p-4 w-full rounded-lg border border-mid-gray">
+      <div className="flex justify-between items-center gap-2">
+        <div className="">
+          <p className="text-sm font-medium">
+            Please grant accessibility permissions for Handy
+          </p>
+        </div>
+        <button
+          onClick={handleButtonClick}
+          className={`min-h-10 ${config.className}`}
+        >
+          {config.text}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default AccessibilityPermissions;

src/components/settings/Settings.tsx

@@ -4,12 +4,10 @@ import { KeyboardShortcuts } from "./KeyboardShortcuts";
 
 export const Settings: React.FC = () => {
   return (
-    <div className="py-4 px-4 w-full">
-      <div className="max-w-3xl mx-auto space-y-4">
-        <div className="">
-          <h2 className="text-xl font-semibold mb-2">Keyboard Shortcuts</h2>
-          <KeyboardShortcuts />
-        </div>
+    <div className="max-w-3xl w-full mx-auto space-y-4">
+      <div className="">
+        <h2 className="text-xl font-semibold mb-2">Keyboard Shortcuts</h2>
+        <KeyboardShortcuts />
       </div>
     </div>
   );