✨ Refactor release workflow and enhance update checker UI

Author: damien-schneider

.github/workflows/build-test.yml

@@ -3,9 +3,46 @@ name: "Release"
 on: workflow_dispatch
 
 jobs:
+  build-validation:
+    permissions:
+      contents: write
+    strategy:
+      fail-fast: true
+      matrix:
+        include:
+          - platform: "macos-latest"
+            args: "--target aarch64-apple-darwin"
+            target: "aarch64-apple-darwin"
+          - platform: "macos-latest"
+            args: "--target x86_64-apple-darwin"
+            target: "x86_64-apple-darwin"
+          - platform: "ubuntu-22.04"
+            args: "--bundles deb"
+            target: "x86_64-unknown-linux-gnu"
+          - platform: "ubuntu-24.04"
+            args: "--bundles appimage,rpm"
+            target: "x86_64-unknown-linux-gnu"
+          - platform: "windows-latest"
+            args: ""
+            target: "x86_64-pc-windows-msvc"
+          - platform: "windows-11-arm"
+            args: "--target aarch64-pc-windows-msvc"
+            target: "aarch64-pc-windows-msvc"
+    uses: ./.github/workflows/build.yml
+    with:
+      platform: ${{ matrix.platform }}
+      target: ${{ matrix.target }}
+      build-args: ${{ matrix.args }}
+      sign-binaries: ${{ !contains(matrix.platform, 'windows') }}
+      asset-prefix: "echo"
+      upload-artifacts: false
+      is-debug-build: false
+    secrets: inherit
+
   create-release:
     permissions:
       contents: write
+    needs: build-validation
     runs-on: ubuntu-latest
     outputs:
       release-id: ${{ steps.create-release.outputs.result }}

.github/workflows/release.yml

@@ -1,7 +1,7 @@
 {
   "name": "echo-app",
   "private": true,
-  "version": "0.3.0",
+  "version": "0.3.1",
   "workspaces": [
     "apps/*"
   ],

package.json

@@ -1,6 +1,6 @@
 [package]
 name = "echo-app"
-version = "0.3.0"
+version = "0.3.1"
 description = "Echo"
 authors = ["Damien Schneider <damien-schneider>"]
 edition = "2021"

src-tauri/Cargo.lock

@@ -2,7 +2,7 @@
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Echo",
   "mainBinaryName": "echo-app",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "identifier": "com.damien-schneider.echo",
   "build": {
     "beforeDevCommand": "bun run dev",

src-tauri/Cargo.toml

@@ -1,7 +1,30 @@
+import { getVersion } from "@tauri-apps/api/app";
+import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { getNormalizedOsPlatform } from "@/lib/os";
+import UpdateChecker from "./update-checker/update-checker";
+
+const isMacOS = getNormalizedOsPlatform() === "mac";
+
 export function AppHeader() {
+  const [version, setVersion] = useState("");
+
+  useEffect(() => {
+    getVersion()
+      .then(setVersion)
+      .catch(() => setVersion(""));
+  }, []);
+
   return (
-    <div className="fixed top-0 right-0 z-30 flex items-center gap-2 p-2">
-      {/* Intentionally empty - reserved for future header actions */}
+    <div
+      className={`fixed top-1 z-30 inline-flex items-center gap-1 ${isMacOS ? "right-2" : "left-2"}`}
+    >
+      <UpdateChecker />
+      {version && (
+        <Badge className="text-muted-foreground" size="sm" variant="outline">
+          v{version}
+        </Badge>
+      )}
     </div>
   );
 }

src-tauri/tauri.conf.json

@@ -1,4 +1,3 @@
-import { getVersion } from "@tauri-apps/api/app";
 import {
   AudioLines,
   Box,
@@ -9,11 +8,9 @@ import {
   Speech,
 } from "lucide-react";
 import type React from "react";
-import { useEffect, useState } from "react";
 import { FileTranscriptionCenter } from "@/components/file-transcription-center";
 import EchoLogo from "@/components/icons/echo-logo";
 import { ThemeSwitcher } from "@/components/theme-switcher";
-import { Badge } from "@/components/ui/badge";
 import {
   Sidebar,
   SidebarContent,
@@ -37,7 +34,6 @@ import { ModelsSettings } from "./settings/models/models-settings";
 import { PostProcessingSettings } from "./settings/post-processing/post-processing-settings";
 import { TranscriptionSettings } from "./settings/transcription/transcription-settings";
 import { TtsSettingsPage } from "./settings/tts-settings-page";
-import UpdateChecker from "./update-checker/update-checker";
 
 export type SidebarSection = keyof typeof SECTIONS_CONFIG;
 
@@ -90,22 +86,6 @@ export const SECTIONS_CONFIG = {
 } as const satisfies Record<string, SectionConfig>;
 
 function SidebarVersionFooter() {
-  const [version, setVersion] = useState("");
-
-  useEffect(() => {
-    const fetchVersion = async () => {
-      try {
-        const appVersion = await getVersion();
-        setVersion(appVersion);
-      } catch (error) {
-        console.error("Failed to get app version:", error);
-        setVersion("0.1.2");
-      }
-    };
-
-    fetchVersion();
-  }, []);
-
   return (
     <SidebarFooter className="select-none" data-tauri-drag-region>
       <SidebarMenu>
@@ -116,16 +96,8 @@ function SidebarVersionFooter() {
           <FileTranscriptionCenter />
         </SidebarMenuItem>
         <SidebarMenuItem>
-          <div className="flex items-center justify-between py-1.5">
-            <div className="flex items-center gap-2">
-              <AboutDialog />
-              <div className="flex items-center gap-1 group-data-[collapsible=icon]:hidden">
-                <UpdateChecker />
-                <Badge size="sm" variant="outline">
-                  v{version}
-                </Badge>
-              </div>
-            </div>
+          <div className="flex items-center py-1.5">
+            <AboutDialog />
           </div>
         </SidebarMenuItem>
       </SidebarMenu>

src/components/app-header.tsx

@@ -1,19 +1,25 @@
 import { listen } from "@tauri-apps/api/event";
 import { relaunch } from "@tauri-apps/plugin-process";
 import { check } from "@tauri-apps/plugin-updater";
+import { RefreshCw } from "lucide-react";
 import type React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import ProgressBar from "@/components/shared/progress-bar";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 interface UpdateCheckerProps {
   className?: string;
 }
 
 const UpdateChecker: React.FC<UpdateCheckerProps> = ({ className = "" }) => {
-  // Update checking state
   const [isChecking, setIsChecking] = useState(false);
   const [updateAvailable, setUpdateAvailable] = useState(false);
   const [isInstalling, setIsInstalling] = useState(false);
@@ -28,7 +34,6 @@ const UpdateChecker: React.FC<UpdateCheckerProps> = ({ className = "" }) => {
   const downloadedBytesRef = useRef(0);
   const contentLengthRef = useRef(0);
 
-  // Update checking functions
   const checkForUpdates = useCallback(async () => {
     if (isCheckingRef.current) {
       return;
@@ -72,7 +77,6 @@ const UpdateChecker: React.FC<UpdateCheckerProps> = ({ className = "" }) => {
   useEffect(() => {
     checkForUpdates();
 
-    // Listen for update check events
     const updateUnlisten = listen("check-for-updates", () => {
       handleManualUpdateCheck();
     });
@@ -130,23 +134,6 @@ const UpdateChecker: React.FC<UpdateCheckerProps> = ({ className = "" }) => {
     }
   };
 
-  // Update status functions
-  const getUpdateStatusText = () => {
-    if (isInstalling) {
-      if (downloadProgress > 0 && downloadProgress < 100) {
-        return `Downloading... ${downloadProgress.toString().padStart(3)}%`;
-      }
-      return downloadProgress === 100 ? "Installing..." : "";
-    }
-    if (showUpToDate) {
-      return "Up to date";
-    }
-    if (updateAvailable) {
-      return "Update available";
-    }
-    return "Check for updates";
-  };
-
   const getUpdateStatusAction = () => {
     if (updateAvailable && !isInstalling) {
       return installUpdate;
@@ -162,40 +149,72 @@ const UpdateChecker: React.FC<UpdateCheckerProps> = ({ className = "" }) => {
     !isUpdateDisabled && (updateAvailable || !isChecking);
 
   const showSpinner = isChecking || (isInstalling && downloadProgress === 0);
+  const isDownloading =
+    isInstalling && downloadProgress > 0 && downloadProgress < 100;
+  const showStatusText = updateAvailable || showUpToDate;
+
+  const renderIconButton = () => (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            className="text-muted-foreground hover:text-foreground"
+            disabled={!isUpdateClickable}
+            onClick={getUpdateStatusAction()}
+            size="xs"
+            variant="ghost"
+          >
+            {showSpinner ? (
+              <Spinner className="size-3!" />
+            ) : (
+              <RefreshCw className="size-3!" />
+            )}
+            <span className="sr-only">Check for updates</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          {showSpinner ? "Checking..." : "Check for updates"}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
 
-  return (
-    <div className={cn("flex items-center gap-3", className)}>
-      <Button
-        className={cn(
-          "min-w-32 items-center gap-2",
-          updateAvailable
-            ? "font-medium text-brand hover:text-brand/80"
-            : "text-text/60 hover:text-text/80"
-        )}
-        disabled={!isUpdateClickable}
-        onClick={getUpdateStatusAction()}
-        size="xs"
-        variant="ghost"
-      >
-        {showSpinner ? (
-          <Spinner className="size-3" />
-        ) : (
-          <span className="tabular-nums">{getUpdateStatusText()}</span>
-        )}
-      </Button>
-
-      {isInstalling && downloadProgress > 0 && downloadProgress < 100 && (
-        <ProgressBar
-          progress={[
-            {
-              id: "update",
-              percentage: downloadProgress,
-            },
-          ]}
-          size="large"
-        />
+  const renderStatusText = () => (
+    <Button
+      className={cn(
+        "items-center gap-2",
+        updateAvailable
+          ? "text-brand hover:text-brand/80"
+          : "text-muted-foreground"
       )}
-    </div>
+      disabled={!isUpdateClickable}
+      onClick={getUpdateStatusAction()}
+      size="xs"
+      variant="ghost"
+    >
+      {updateAvailable ? "Update available" : "Up to date"}
+    </Button>
+  );
+
+  const renderProgressBar = () => (
+    <ProgressBar
+      progress={[{ id: "update", percentage: downloadProgress }]}
+      size="large"
+    />
+  );
+
+  const renderContent = () => {
+    if (isDownloading) {
+      return renderProgressBar();
+    }
+    if (showStatusText) {
+      return renderStatusText();
+    }
+    return renderIconButton();
+  };
+
+  return (
+    <div className={cn("flex items-center", className)}>{renderContent()}</div>
   );
 };