chore: widget css updates + empty transcription view

2025-07-11 19:05:11 +05:30 · 2025-07-11 19:05:11 +05:30 · c71241d264
commit c71241d264
parent b32064c53c
8 changed files with 101 additions and 55 deletions
--- a/.gitignore
+++ b/.gitignore
@ -39,6 +39,7 @@ yarn-error.log*
 CLAUDE.md
 .serena
 .local
+.claude

 # Temp files
 /tmp
--- a/apps/desktop/assets/dmg_bg.tiff
+++ b/apps/desktop/assets/dmg_bg.tiff
--- a/apps/desktop/forge.config.ts
+++ b/apps/desktop/forge.config.ts
@ -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"],
    ),
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@ -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",
--- a/apps/desktop/src/renderer/main/pages/transcriptions/components/TranscriptionsList.tsx
+++ b/apps/desktop/src/renderer/main/pages/transcriptions/components/TranscriptionsList.tsx
@ -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>
--- a/apps/desktop/src/renderer/widget/pages/widget/components/FloatingButton.tsx
+++ b/apps/desktop/src/renderer/widget/pages/widget/components/FloatingButton.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>
  );
 };
--- a/package.json
+++ b/package.json
@ -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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -4,6 +4,9 @@ settings:
  autoInstallPeers: true
  excludeLinksFromLockfile: false

+overrides:
+  '@electron-forge/maker-dmg': https://registry.npmjs.org/@fellow/maker-dmg/-/maker-dmg-7.4.0.tgz
+
 importers:

  .:
@ -274,8 +277,8 @@ importers:
        specifier: ^7.8.1
        version: 7.8.1
      '@electron-forge/maker-dmg':
-        specifier: ^7.8.1
-        version: 7.8.1
+        specifier: https://registry.npmjs.org/@fellow/maker-dmg/-/maker-dmg-7.4.0.tgz
+        version: '@fellow/maker-dmg@7.4.0'
      '@electron-forge/maker-rpm':
        specifier: ^7.8.1
        version: 7.8.1
@ -872,6 +875,10 @@ packages:
    resolution: {integrity: sha512-jkh0QPW5p0zmruu1E8+2XNufc4UMxy13WLJcm7hn9jbaXKLkMbKuEvhrN1tH/9uGp1mhr/t8sC4N67gP+gS87w==}
    engines: {node: '>= 16.4.0'}

+  '@electron-forge/maker-base@7.4.0':
+    resolution: {integrity: sha512-LwWS4VPdwjISl1KpLhmM1Qr1M3sRTTQ/RsX+GlFd7cQ1W/FsgxMjaTG4Od1d+a5CGVTh3s6X2g99TSUfxjOveg==}
+    engines: {node: '>= 16.4.0'}
+
  '@electron-forge/maker-base@7.8.1':
    resolution: {integrity: sha512-GUZqschGuEBzSzE0bMeDip65IDds48DZXzldlRwQ+85SYVA6RMU2AwDDqx3YiYsvP2OuxKruuqIJZtOF5ps4FQ==}
    engines: {node: '>= 16.4.0'}
@ -880,10 +887,6 @@ packages:
    resolution: {integrity: sha512-tjjeesQtCP5Xht1X7gl4+K9bwoETPmQfBkOVAY/FZIxPj40uQh/hOUtLX2tYENNGNVZ1ryDYRs8TuPi+I41Vfw==}
    engines: {node: '>= 16.4.0'}

-  '@electron-forge/maker-dmg@7.8.1':
-    resolution: {integrity: sha512-l449QvY2Teu+J9rHnjkTHEm/wOJ1LRfmrQ2QkGtFoTRcqvFWdUAEN8nK2/08w3j2h6tvOY3QSUjRzXrhJZRNRA==}
-    engines: {node: '>= 16.4.0'}
-
  '@electron-forge/maker-rpm@7.8.1':
    resolution: {integrity: sha512-TF6wylft3BHkw9zdHcxmjEPBZYgTIc0jE31skFnMEQ/aExbNRiNaCZvsXy+7ptTWZxhxUKRc9KHhLFRMCmOK8g==}
    engines: {node: '>= 16.4.0'}
@ -922,6 +925,10 @@ packages:
    resolution: {integrity: sha512-hjRSJ3/JwKHgUNuvJo4vTPBJQQyvF72QOudHr+WSXMSAPasTwfDhvGaTS54mQqcKlOQ53cwHQjWO0xVEwQYQ0g==}
    engines: {node: '>= 16.4.0'}

+  '@electron-forge/shared-types@7.4.0':
+    resolution: {integrity: sha512-5Ehy6enUjBaU08odf9u9TOhmOVXlqobzMvKUixtkdAWgV1XZAUJmn+p21xhj0IkO92MQiXMGv66w9pDNjRT8uQ==}
+    engines: {node: '>= 16.4.0'}
+
  '@electron-forge/shared-types@7.8.1':
    resolution: {integrity: sha512-guLyGjIISKQQRWHX+ugmcjIOjn2q/BEzCo3ioJXFowxiFwmZw/oCZ2KlPig/t6dMqgUrHTH5W/F0WKu0EY4M+Q==}
    engines: {node: '>= 16.4.0'}
@ -946,6 +953,10 @@ packages:
    resolution: {integrity: sha512-DA77o9kTCHrq+W211pyNP49DyAt0d1mzMp2gisyNz7a+iKvlv2DsMAeRieLoCQ44akb/z8ZsL0YLteSjKLy4AA==}
    engines: {node: '>= 16.4.0'}

+  '@electron-forge/tracer@7.4.0':
+    resolution: {integrity: sha512-F4jbnDn4yIZjmky1FZ6rgBKTM05AZQQfHkyJW2hdS4pDKJjdKAqWytoZKDi1/S6Cr6tN+DD0TFGD3V0i6HPHYQ==}
+    engines: {node: '>= 14.17.5'}
+
  '@electron-forge/tracer@7.8.1':
    resolution: {integrity: sha512-r2i7aHVp2fylGQSPDw3aTcdNfVX9cpL1iL2MKHrCRNwgrfR+nryGYg434T745GGm1rNQIv5Egdkh5G9xf00oWA==}
    engines: {node: '>= 14.17.5'}
@ -1478,6 +1489,10 @@ packages:
    resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
    engines: {node: '>=14'}

+  '@fellow/maker-dmg@7.4.0':
+    resolution: {integrity: sha512-xyjpqqni/wIADudqI1gDru/16Jekoidip3GVpXdc1h7dU5cHDpwQjRWefZoWBZpTBe7eevCHI2icuA/VZO5a4g==}
+    engines: {node: '>= 16.4.0'}
+
  '@floating-ui/core@1.7.0':
    resolution: {integrity: sha512-FRdBLykrPPA6P76GGGqlex/e7fbe0F1ykgxHYNXQsH/iTEtjMj/f9bpY5oQqbjt5VgZvgz/uKXbGuROijh3VLA==}

@ -3209,9 +3224,6 @@ packages:
    resolution: {integrity: sha512-Kqo+gKJleFB+GkKiSHCCb4RB46VDBTWRKdp08RQ4rtL60+SU89M6F7gpTGG/4nL2eYD98mOKp3Lyzfk/Auht7A==}
    hasBin: true

-  '@types/appdmg@0.5.5':
-    resolution: {integrity: sha512-G+n6DgZTZFOteITE30LnWj+HRVIGr7wMlAiLWOO02uJFWVEitaPU9JVXm9wJokkgshBawb2O1OykdcsmkkZfgg==}
-
  '@types/better-sqlite3@7.6.13':
    resolution: {integrity: sha512-NMv9ASNARoKksWtsq/SHakpYAYnhBrQgGD8zkLYk/jaK8jUGn08CfEdTRgYhMypUQAfzSP8W6gNLe0q19/t4VA==}

@ -4422,9 +4434,9 @@ packages:
    os: [darwin, linux]
    hasBin: true

-  electron-installer-dmg@5.0.1:
-    resolution: {integrity: sha512-qOa1aAQdX57C+vzhDk3549dd/PRlNL4F8y736MTD1a43qptD+PvHY97Bo9gSf+OZ8iUWE7BrYSpk/FgLUe40EA==}
-    engines: {node: '>= 16'}
+  electron-installer-dmg@4.0.0:
+    resolution: {integrity: sha512-g3W6XnyUa7QGrAF7ViewHdt6bXV2KYU1Pm1CY3pZpp+H6mOjCHHAhf/iZAxtaX1ERCb+SQHz7xSsAHuNH9I8ZQ==}
+    engines: {node: '>= 12.13.0'}
    hasBin: true

  electron-installer-redhat@3.4.0:
@ -8920,6 +8932,15 @@ snapshots:
      - encoding
      - supports-color

+  '@electron-forge/maker-base@7.4.0':
+    dependencies:
+      '@electron-forge/shared-types': 7.4.0
+      fs-extra: 10.1.0
+      which: 2.0.2
+    transitivePeerDependencies:
+      - bluebird
+      - supports-color
+
  '@electron-forge/maker-base@7.8.1':
    dependencies:
      '@electron-forge/shared-types': 7.8.1
@ -8939,17 +8960,6 @@ snapshots:
      - bluebird
      - supports-color

-  '@electron-forge/maker-dmg@7.8.1':
-    dependencies:
-      '@electron-forge/maker-base': 7.8.1
-      '@electron-forge/shared-types': 7.8.1
-      fs-extra: 10.1.0
-    optionalDependencies:
-      electron-installer-dmg: 5.0.1
-    transitivePeerDependencies:
-      - bluebird
-      - supports-color
-
  '@electron-forge/maker-rpm@7.8.1':
    dependencies:
      '@electron-forge/maker-base': 7.8.1
@ -9048,6 +9058,16 @@ snapshots:
      - encoding
      - supports-color

+  '@electron-forge/shared-types@7.4.0':
+    dependencies:
+      '@electron-forge/tracer': 7.4.0
+      '@electron/packager': 18.3.6
+      '@electron/rebuild': 3.7.2
+      listr2: 7.0.2
+    transitivePeerDependencies:
+      - bluebird
+      - supports-color
+
  '@electron-forge/shared-types@7.8.1':
    dependencies:
      '@electron-forge/tracer': 7.8.1
@ -9106,6 +9126,10 @@ snapshots:
      - bluebird
      - supports-color

+  '@electron-forge/tracer@7.4.0':
+    dependencies:
+      chrome-trace-event: 1.0.4
+
  '@electron-forge/tracer@7.8.1':
    dependencies:
      chrome-trace-event: 1.0.4
@ -9534,6 +9558,16 @@ snapshots:

  '@fastify/busboy@2.1.1': {}

+  '@fellow/maker-dmg@7.4.0':
+    dependencies:
+      '@electron-forge/maker-base': 7.4.0
+      '@electron-forge/shared-types': 7.4.0
+    optionalDependencies:
+      electron-installer-dmg: 4.0.0
+    transitivePeerDependencies:
+      - bluebird
+      - supports-color
+
  '@floating-ui/core@1.7.0':
    dependencies:
      '@floating-ui/utils': 0.2.9
@ -11380,11 +11414,6 @@ snapshots:
      semver: 7.6.2
      update-check: 1.5.4

-  '@types/appdmg@0.5.5':
-    dependencies:
-      '@types/node': 22.15.12
-    optional: true
-
  '@types/better-sqlite3@7.6.13':
    dependencies:
      '@types/node': 22.15.12
@ -12588,9 +12617,8 @@ snapshots:
      - supports-color
    optional: true

-  electron-installer-dmg@5.0.1:
+  electron-installer-dmg@4.0.0:
    dependencies:
-      '@types/appdmg': 0.5.5
      debug: 4.4.1
      minimist: 1.2.8
    optionalDependencies: