Move update indicator to titlebar on desktop.

external/lang

@@ -1 +1 @@
-Subproject commit 8a9c21da8527b9609404ad64205f6b876c9f53d2
+Subproject commit e03c9f3a9ef39b6d93a5890a3ee1a64cfb1ffec4

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>
+                <Tooltip
-                    <CloudDownload size={22} color={`var(--success)`} />
+                    content="A new update is available!"
-                </div>
+                    placement="bottom">
+                    <UpdateIndicator style="titlebar" />
+                </Tooltip>
             </div>
             <div class="actions">
                 <div onClick={window.native.min}>

src/pages/RevoltApp.tsx

@@ -10,7 +10,6 @@ import Notifications from "../context/revoltjs/Notifications";
 import StateMonitor from "../context/revoltjs/StateMonitor";
 import SyncManager from "../context/revoltjs/SyncManager";
 
-import { USE_TITLEBAR } from "../components/native/Titlebar";
 import BottomNavigation from "../components/navigation/BottomNavigation";
 import LeftSidebar from "../components/navigation/LeftSidebar";
 import RightSidebar from "../components/navigation/RightSidebar";
@@ -47,7 +46,7 @@ export default function App() {
             <OverlappingPanels
                 width="100vw"
                 height={
-                    USE_TITLEBAR
+                    window.isNative && !window.native.getConfig().frame
                         ? "calc(var(--app-height) - var(--titlebar-height))"
                         : "var(--app-height)"
                 }

src/pages/app.tsx

@@ -8,7 +8,7 @@ import { CheckAuth } from "../context/revoltjs/CheckAuth";
 import Masks from "../components/ui/Masks";
 import Preloader from "../components/ui/Preloader";
 
-import { Titlebar, USE_TITLEBAR } from "../components/native/Titlebar";
+import { Titlebar } from "../components/native/Titlebar";
 
 const Login = lazy(() => import("./login/Login"));
 const RevoltApp = lazy(() => import("./RevoltApp"));
@@ -17,7 +17,9 @@ export function App() {
     return (
         <Context>
             <Masks />
-            {USE_TITLEBAR && <Titlebar />}
+            {window.isNative && !window.native.getConfig().frame && (
+                <Titlebar />
+            )}
             {/* 
             // @ts-expect-error */}
             <Suspense fallback={<Preloader type="spinner" />}>

src/pages/channels/actions/HeaderActions.tsx

@@ -33,7 +33,7 @@ export default function HeaderActions({
 
     return (
         <>
-            <UpdateIndicator />
+            <UpdateIndicator style="channel" />
             {channel.channel_type === "Group" && (
                 <>
                     <IconButton