chore: widget css updates + empty transcription view

Author: haritabh-z01

.gitignore

@@ -39,6 +39,7 @@ yarn-error.log*
 CLAUDE.md
 .serena
 .local
+.claude
 
 # Temp files
 /tmp

apps/desktop/assets/dmg_bg.tiff

@@ -355,8 +355,10 @@ const config: ForgeConfig = {
     ), // Required for macOS auto-updates
     new MakerDMG(
       {
+        //! @see https://github.com/electron/forge/issues/3517#issuecomment-2428129194
         // macOS DMG files will be named like: Amical-0.0.1-arm64.dmg
         icon: "./assets/logo.icns",
+        background: "./assets/dmg_bg.tiff",
       },
       ["darwin"],
     ),

apps/desktop/forge.config.ts

@@ -1,6 +1,6 @@
 {
   "name": "@amical/desktop",
-  "version": "0.0.1",
+  "version": "0.0.5",
   "description": "Amical Desktop app",
   "main": ".vite/build/main.js",
   "productName": "Amical",
@@ -12,8 +12,10 @@
     "start": "pnpm build:swift-helper && electron-forge start",
     "start:onboarding": "FORCE_ONBOARDING=true pnpm start",
     "package": "pnpm build:swift-helper && electron-forge package",
-    "make": "pnpm build:swift-helper && electron-forge make --platform=darwin --arch=arm64,x64",
-    "make:dmg": "pnpm build:swift-helper && electron-forge make --targets=@electron-forge/maker-dmg --platform=darwin --arch=arm64",
+    "make": "pnpm build:swift-helper && electron-forge make --platform=darwin --arch=x64,arm64",
+    "make:arm64": "pnpm build:swift-helper && electron-forge make --platform=darwin --arch=arm64",
+    "make:x64": "pnpm build:swift-helper && electron-forge make --platform=darwin --arch=x64",
+    "make:dmg": "pnpm build:swift-helper && electron-forge make --targets=@electron-forge/maker-dmg --platform=darwin --arch=arm64,x64",
     "make:dmg:arm64": "pnpm build:swift-helper && electron-forge make --targets=@electron-forge/maker-dmg --platform=darwin --arch=arm64",
     "make:dmg:x64": "pnpm build:swift-helper && electron-forge make --targets=@electron-forge/maker-dmg --platform=darwin --arch=x64",
     "make:zip:arm64": "pnpm build:swift-helper && electron-forge make --targets=@electron-forge/maker-zip --platform=darwin --arch=arm64",

apps/desktop/package.json

@@ -36,6 +36,10 @@ export const TranscriptionsList: React.FC = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [openDropdownId, setOpenDropdownId] = useState<number | null>(null);
 
+  // Get shortcuts data
+  const shortcutsQuery = api.settings.getShortcuts.useQuery();
+  const pushToTalkShortcut = shortcutsQuery.data?.pushToTalk || "";
+
   // tRPC React Query hooks
   const transcriptionsQuery = api.transcriptions.getTranscriptions.useQuery(
     {
@@ -154,9 +158,8 @@ export const TranscriptionsList: React.FC = () => {
           <p className="text-sm text-muted-foreground max-w-sm">
             {searchTerm
               ? "Try adjusting your search terms."
-              : "Start recording to see your transcriptions here."}
+              : `Click on the widget to start dictation or press and hold the PTT shortcut key${pushToTalkShortcut ? ` (${pushToTalkShortcut})` : ""}.`}
           </p>
-          {!searchTerm && <Button className="mt-4">Start Recording</Button>}
         </div>
       </CardContent>
     </Card>

apps/desktop/src/renderer/main/pages/transcriptions/components/TranscriptionsList.tsx

@@ -13,16 +13,16 @@ const StopButton: React.FC<{ onClick: (e: React.MouseEvent) => void }> = ({
 }) => (
   <button
     onClick={onClick}
-    className="flex items-center justify-center w-[20px] h-[20px] bg-red-500 hover:bg-red-600 rounded transition-colors"
+    className="flex items-center justify-center w-[20px] h-[20px]rounded transition-colors"
     aria-label="Stop recording"
   >
-    <Square className="w-[12px] h-[12px] text-white fill-white" />
+    <Square className="w-[12px] h-[12px] text-red-500 fill-red-500" />
   </button>
 );
 
 // Separate component for the processing indicator
 const ProcessingIndicator: React.FC = () => (
-  <div className="flex gap-[4px] items-center justify-center">
+  <div className="flex gap-[4px] items-center justify-center flex-1 h-6">
     <div className="w-[4px] h-[4px] bg-blue-500 rounded-full animate-bounce [animation-delay:-0.3s]" />
     <div className="w-[4px] h-[4px] bg-blue-500 rounded-full animate-bounce [animation-delay:-0.15s]" />
     <div className="w-[4px] h-[4px] bg-blue-500 rounded-full animate-bounce" />
@@ -41,7 +41,7 @@ const WaveformVisualization: React.FC<{
         index={index}
         isRecording={isRecording}
         voiceDetected={voiceDetected}
-        baseHeight={100}
+        baseHeight={60}
         silentHeight={20}
       />
     ))}
@@ -138,11 +138,13 @@ export const FloatingButton: React.FC = () => {
     if (isHandsFreeMode && isRecording) {
       return (
         <>
-          <WaveformVisualization
-            isRecording={isRecording}
-            voiceDetected={voiceDetected}
-          />
-          <div className="ml-[4px]">
+          <div className="justify-center items-center flex flex-1 gap-1">
+            <WaveformVisualization
+              isRecording={isRecording}
+              voiceDetected={voiceDetected}
+            />
+          </div>
+          <div className="h-full items-center flex mr-2">
             <StopButton onClick={handleStopClick} />
           </div>
         </>
@@ -151,32 +153,37 @@ export const FloatingButton: React.FC = () => {
 
     // Show waveform visualization for all other states
     return (
-      <WaveformVisualization
-        isRecording={isRecording}
-        voiceDetected={voiceDetected}
-      />
+      <button
+        className="justify-center items-center flex flex-1 gap-1 h-full w-full"
+        role="button"
+        onClick={handleButtonClick}
+      >
+        <WaveformVisualization
+          isRecording={isRecording}
+          voiceDetected={voiceDetected}
+        />
+      </button>
     );
   };
 
   return (
-    <button
-      role="button"
-      onClick={handleButtonClick}
+    <div
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       className={`
         transition-all duration-200 ease-in-out
-        ${expanded ? "h-[32px] w-[112px]" : "h-[16px] w-[48px]"}
-        rounded-full border-2 border-text-muted bg-black/50 border-muted-foreground
+        ${expanded ? "h-[24px] w-[96px]" : "h-[8px] w-[48px]"}
+        bg-black/70 rounded-[24px] backdrop-blur-md ring-[1px] ring-black/60 shadow-[0px_0px_15px_0px_rgba(0,0,0,0.40)]
+        before:content-[''] before:absolute before:inset-[1px] before:rounded-[23px] before:outline before:outline-white/15 before:pointer-events-none
         mb-2 cursor-pointer select-none
       `}
       style={{ pointerEvents: "auto" }}
     >
       {expanded && (
-        <div className="flex gap-[2px] items-end h-[40%] justify-center w-full">
+        <div className="flex gap-[2px] h-full w-full justify-between">
           {renderWidgetContent()}
         </div>
       )}
-    </button>
+    </div>
   );
 };

apps/desktop/src/renderer/widget/pages/widget/components/FloatingButton.tsx

@@ -19,6 +19,9 @@
     "node": ">=24"
   },
   "pnpm": {
+    "overrides": {
+      "@electron-forge/maker-dmg": "https://registry.npmjs.org/@fellow/maker-dmg/-/maker-dmg-7.4.0.tgz"
+    },
     "ignoredBuiltDependencies": [
       "@tailwindcss/oxide",
       "core-js-pure",