Move update indicator to titlebar on desktop.

src/components/common/UpdateIndicator.tsx

@@ -1,4 +1,5 @@
 import { Download } from "@styled-icons/boxicons-regular";
+import { CloudDownload } from "@styled-icons/boxicons-regular";
 
 import { useContext, useEffect, useState } from "preact/hooks";
 
@@ -13,7 +14,11 @@ import { updateSW } from "../../main";
 let pendingUpdate = false;
 internalSubscribe("PWA", "update", () => (pendingUpdate = true));
 
-export default function UpdateIndicator() {
+interface Props {
+    style: "titlebar" | "channel";
+}
+
+export default function UpdateIndicator({ style }: Props) {
     const [pending, setPending] = useState(pendingUpdate);
 
     useEffect(() => {
@@ -23,6 +28,16 @@ export default function UpdateIndicator() {
     if (!pending) return null;
     const theme = useContext(ThemeContext);
 
+    if (style === "titlebar") {
+        return (
+            <div onClick={() => updateSW(true)}>
+                <CloudDownload size={22} color={theme.success} />
+            </div>
+        );
+    }
+
+    if (window.isNative) return null;
+
     return (
         <IconButton onClick={() => updateSW(true)}>
             <Download size={22} color={theme.success} />

src/components/native/Titlebar.tsx

@@ -1,8 +1,9 @@
-import { X, Minus, Square, CloudDownload } from "@styled-icons/boxicons-regular";
+import { X, Minus, Square } from "@styled-icons/boxicons-regular";
 import { Wrench } from "@styled-icons/boxicons-solid";
 import styled from "styled-components";
 
-export const USE_TITLEBAR = window.isNative && !window.native.getConfig().frame;
+import Tooltip from "../common/Tooltip";
+import UpdateIndicator from "../common/UpdateIndicator";
 
 const TitlebarBase = styled.div`
     height: var(--titlebar-height);
@@ -30,17 +31,6 @@ const TitlebarBase = styled.div`
         }
     }
 
-    .update-bar {
-        background: var(--success);
-        margin: 16px;
-        font-size: 12px;
-        border-radius: 60px;
-        padding: 2px 10px;
-        display: flex;
-        align-items: center;
-        gap: 2px;
-    }
-
     .actions {
         z-index: 100;
         display: flex;
@@ -54,6 +44,7 @@ const TitlebarBase = styled.div`
 
             display: grid;
             place-items: center;
+            transition: 0.2s ease color;
             transition: 0.2s ease background-color;
 
             &:hover {
@@ -84,14 +75,12 @@ export function Titlebar() {
                 </svg>
                 {window.native.getConfig().build === "dev" && <Wrench />}
             </div>
-            {/*<div class="update-bar">
-                <CloudDownload size={16} />
-                New update available!
-            </div>*/}
             <div class="actions">
-                <div>
-                    <CloudDownload size={22} color={`var(--success)`} />
-                </div>
+                <Tooltip
+                    content="A new update is available!"
+                    placement="bottom">
+                    <UpdateIndicator style="titlebar" />
+                </Tooltip>
             </div>
             <div class="actions">
                 <div onClick={window.native.min}>