slightly better ui

src-tauri/capabilities/default.json

@@ -9,6 +9,7 @@
     "global-shortcut:allow-is-registered",
     "global-shortcut:allow-register",
     "global-shortcut:allow-unregister",
+    "global-shortcut:allow-unregister-all",
     "macos-permissions:default"
   ]
 }

src-tauri/src/lib.rs

@@ -102,7 +102,7 @@ pub fn run() {
 
                 app.handle().plugin(
                     tauri_plugin_global_shortcut::Builder::new()
-                        .with_shortcuts(["alt+space"])? // Register "alt+space"
+                        .with_shortcuts(["alt+space", "ctrl+d"])? // Register "alt+space"
                         .with_handler(move |app_handle_from_plugin, shortcut, event| {
                             // Retrieve managers from state
                             let recording_manager_state =

src-tauri/tauri.conf.json

@@ -13,7 +13,7 @@
     "windows": [
       {
         "title": "Handy",
-        "width": 800,
+        "width": 400,
         "height": 600
       }
     ],

src/App.css

@@ -1,15 +1,15 @@
 @import "tailwindcss";
 
-@font-face {
+/* @font-face {
   src: url("/src/assets/fonts/ShortStack-Regular.ttf");
   font-family: 'Short Stack';
   font-weight: 400;
   font-style: normal;
   font-display: swap;
-}
+} */
 
 :root {
-  font-family: 'Short Stack', sans-serif;
+  /* font-family: 'Short Stack', sans-serif; */
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;

src/App.tsx

@@ -6,6 +6,7 @@ import {
   requestAccessibilityPermissions,
 } from "tauri-plugin-macos-permissions-api";
 import { register } from "@tauri-apps/plugin-global-shortcut";
+import HandyTextLogo from "./components/icons/HandyTextLogo";
 
 function App() {
   const [hasAccessibility, setHasAccessibility] = useState(false);
@@ -20,16 +21,12 @@ function App() {
       }
       setHasAccessibility(hasPermissions);
     });
-
-    register("ctrl+d", () => {
-      console.log("Ctrl+D pressed");
-    });
   }, []);
 
   return (
-    <div className="min-h-screen bg-gray-100">
+    <div className="min-h-screen bg-gray-100 flex flex-col items-center pt-6 w-full">
       {!hasAccessibility && (
-        <div className="bg-yellow-50 p-4">
+        <div className="bg-yellow-50 p-4 w-full">
           <div className="flex">
             <div className="ml-3">
               <p className="text-sm font-medium text-yellow-800">
@@ -39,6 +36,7 @@ function App() {
           </div>
         </div>
       )}
+      <HandyTextLogo width={250} />
       <Settings />
     </div>
   );

src/components/settings/KeyboardShortcuts.tsx

@@ -14,20 +14,8 @@ export const KeyboardShortcuts: React.FC = () => {
       id: "transcribe",
       name: "Transcribe",
       description: "Convert speech to text",
-      keys: ["⌃", "⌘"],
+      keys: ["⌃", "Space"],
     },
-    // {
-    //   id: 'instruct',
-    //   name: 'AI Chat',
-    //   description: 'Start a conversation with AI',
-    //   keys: ['⇧', '⌥'],
-    // },
-    // {
-    //   id: 'code',
-    //   name: 'Generate Code',
-    //   description: 'Generate code from voice input',
-    //   keys: ['⌃', '⌥', '⌘'],
-    // },
   ];
 
   return (
@@ -57,17 +45,6 @@ export const KeyboardShortcuts: React.FC = () => {
           </div>
         </div>
       ))}
-
-      <div className="mt-4 rounded-md bg-yellow-50 p-4">
-        <div className="flex">
-          <div className="ml-3">
-            <p className="text-sm text-yellow-700">
-              Note: Keyboard shortcuts are currently managed by the system.
-              Custom configuration will be available in a future update.
-            </p>
-          </div>
-        </div>
-      </div>
     </div>
   );
 };

src/components/settings/Settings.tsx

@@ -4,21 +4,10 @@ import { KeyboardShortcuts } from "./KeyboardShortcuts";
 
 export const Settings: React.FC = () => {
   return (
-    <div className="min-h-screen bg-gray-100 py-8 px-4">
+    <div className="bg-gray-100 py-4 px-4 w-full">
-      <div className="max-w-3xl mx-auto space-y-8">
+      <div className="max-w-3xl mx-auto space-y-4">
-        <h1 className="text-3xl font-bold text-gray-900">Settings</h1>
+        <div className="">
-
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">
-        {/* AI Configuration Section */}
-        <div className="bg-white shadow rounded-lg p-6">
-          <h2 className="text-xl font-semibold text-gray-900 mb-4">
-            AI Configuration
-          </h2>
-          {/* <AIConfig /> */}
-        </div>
-
-        {/* Keyboard Shortcuts Section */}
-        <div className="bg-white shadow rounded-lg p-6">
-          <h2 className="text-xl font-semibold text-gray-900 mb-4">
             Keyboard Shortcuts
           </h2>
           <KeyboardShortcuts />