diff --git a/external/lang b/external/lang index 8a9c21da..e03c9f3a 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 8a9c21da8527b9609404ad64205f6b876c9f53d2 +Subproject commit e03c9f3a9ef39b6d93a5890a3ee1a64cfb1ffec4 diff --git a/src/components/common/UpdateIndicator.tsx b/src/components/common/UpdateIndicator.tsx index 4c58c633..7cc752f1 100644 --- a/src/components/common/UpdateIndicator.tsx +++ b/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 ( +
updateSW(true)}> + +
+ ); + } + + if (window.isNative) return null; + return ( updateSW(true)}> diff --git a/src/components/native/Titlebar.tsx b/src/components/native/Titlebar.tsx index d547194d..6e17ee42 100644 --- a/src/components/native/Titlebar.tsx +++ b/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() { {window.native.getConfig().build === "dev" && } - {/*
- - New update available! -
*/}
-
- -
+ + +
diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index 019cb90a..5e564f6d 100644 --- a/src/pages/RevoltApp.tsx +++ b/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() { import("./login/Login")); const RevoltApp = lazy(() => import("./RevoltApp")); @@ -17,7 +17,9 @@ export function App() { return ( - {USE_TITLEBAR && } + {window.isNative && !window.native.getConfig().frame && ( + + )} {/* // @ts-expect-error */} }> diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx index 4451399e..7c117c38 100644 --- a/src/pages/channels/actions/HeaderActions.tsx +++ b/src/pages/channels/actions/HeaderActions.tsx @@ -33,7 +33,7 @@ export default function HeaderActions({ return ( <> - + {channel.channel_type === "Group" && ( <>