Canary rendering flow change

apps/desktop/package.json

@@ -5,9 +5,10 @@
   "type": "module",
   "scripts": {
     "start": "tauri dev",
+    "start:canary": "tauri dev --config src-tauri/tauri.conf.canary.json",
     "dev": "vite",
     "build": "tsc && vite build",
-    "build:canary": "cargo tauri build --config 'src-tauri/tauri.conf.canary.json'",
+    "build:canary": " tauri build --config 'src-tauri/tauri.conf.canary.json'",
     "lint": "eslint",
     "clean": "rm -rf dist .turbo node_modules",
     "check:format": "prettier --check 'src/**/*.{ts,js,tsx,jsx}'",

apps/desktop/src/components/nav-bar.tsx

@@ -8,13 +8,12 @@ import {
   ChevronsRightLeft,
   type LucideIcon,
 } from "lucide-react";
-
+import { usePlatformInfo } from "@/hooks/use-platform-info";
 import React from "react";
 import { invoke } from "@tauri-apps/api";
 import overlayedConfig, { type DirectionLR } from "../config";
 import { useAppStore } from "../store";
 import { useState } from "react";
-
 const mapping = {
   left: 0,
   center: 1,
@@ -66,6 +65,7 @@ export const NavBar = ({
   const showUpdateButton = location.pathname !== "/settings" && isUpdateAvailable;
 
   const routesToShowOn = ["/channel", "/error", "/"];
+  const { canary } = usePlatformInfo();
   if (!routesToShowOn.includes(location.pathname)) return null;
 
   return (
@@ -75,7 +75,13 @@ export const NavBar = ({
     >
       <div data-tauri-drag-region className="flex justify-between">
         <div className="flex items-center">
-          <img src="/img/32x32.png" alt="logo" data-tauri-drag-region className="w-8 h-8 mr-2" />
+          <img
+            src={canary ? "/img/32x32-canary.png " : "/img/32x32.png"}
+            alt="logo"
+            data-tauri-drag-region
+            className="w-8 h-8 mr-2"
+          />
+
           {location.pathname === "/channel" ? (
             <div data-tauri-drag-region className="hidden md:inline">
               {currentChannel?.name}
@@ -86,7 +92,7 @@ export const NavBar = ({
         </div>
         {location.pathname !== "/settings" && (
           <div className="hidden gap-4 md:flex">
-            {showUpdateButton && (
+            {!canary && showUpdateButton && (
               <button>
                 <Download
                   className="text-green-500"

apps/desktop/src/hooks/use-platform-info.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-import { getTauriVersion, getVersion } from "@tauri-apps/api/app";
+import { getName, getTauriVersion, getVersion } from "@tauri-apps/api/app";
 import { appConfigDir } from "@tauri-apps/api/path";
 import { platform as getPlatform, version as getKernalVersion, arch as getArch } from "@tauri-apps/api/os";
 
@@ -11,30 +11,40 @@ export const usePlatformInfo = () => {
     os: "",
     kernalVersion: "",
     arch: "",
+    name: "",
+    canary: false,
     configDir: "",
   });
 
   useEffect(() => {
-    const allPromises = [getTauriVersion(), getVersion(), getPlatform(), getKernalVersion(), getArch(), appConfigDir()];
+    const allPromises = [
+      getTauriVersion(),
+      getVersion(),
+      getPlatform(),
+      getKernalVersion(),
+      getArch(),
+      appConfigDir(),
+      getName(),
+    ];
 
     // get all the dataz
     Promise.allSettled(allPromises).then(results => {
-      const [tauriVersion = "", appVersion = "", os = "", kernalVersion = "", arch = "", configDir = ""] = results.map(
-        result => {
+      const [tauriVersion = "", appVersion = "", os = "", kernalVersion = "", arch = "", configDir = "", name = ""] =
+        results.map(result => {
           if (result.status === "fulfilled") {
             return result.value;
           }
           return "";
-        }
-      );
-
+        });
       setPlatformInfo({
         tauriVersion,
         appVersion,
         os,
         kernalVersion,
         arch,
         configDir,
+        name,
+        canary: name.includes("Canary"),
       });
     });
   }, []);

apps/desktop/src/views/settings/index.tsx

@@ -4,12 +4,14 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Account } from "./account";
 import { JoinHistory } from "./join-history";
 import { useState } from "react";
+import { usePlatformInfo } from "@/hooks/use-platform-info";
 
 export const SettingsView = ({
   update,
 }: {
   update: { isAvailable: boolean; status: UpdateStatus | null; error: string };
 }) => {
+  const { canary } = usePlatformInfo();
   const [currentTab, setCurrentTab] = useState("account");
   return (
     <div className="bg-zinc-900 w-[calc(100vw)] h-full">
@@ -23,7 +25,12 @@ export const SettingsView = ({
           <TabsTrigger value="account">General</TabsTrigger>
           <TabsTrigger value="join-history">Join History</TabsTrigger>
         </TabsList>
-        {update.isAvailable && <Updater update={update} />}
+        <div className="py-2 h-[48px] bg-orange-800">
+          <div className="!text-white text-lg font-bold cursor-pointer flex gap-2 items-center justify-center">
+            <p>Canary build careful...</p>
+          </div>
+        </div>
+        {canary && update.isAvailable && <Updater update={update} />}
         <div className="p-4 pt-0">
           <TabsContent tabIndex={-1} value="account">
             <Account />
@@ -34,7 +41,7 @@ export const SettingsView = ({
             </div>
           </TabsContent>
         </div>
-        <div className="h-10 pl-4 absolute bottom-0 w-full bg-zinc-800 text-gray-400 flex items-center">
+        <div className="absolute bottom-0 flex items-center w-full h-10 pl-4 text-gray-400 bg-zinc-800">
           <p>
             Found a bug? Please report them on the{" "}
             <a className="text-blue-400" target="_blank" rel="noreferrer" href="https://github.com/Hacksore/overlayed">