Add PWA update indicator.

src/components/common/UpdateIndicator.tsx

@@ -0,0 +1,25 @@
+import { updateSW } from "../../main";
+import IconButton from "../ui/IconButton";
+import { ThemeContext } from "../../context/Theme";
+import { Download } from "@styled-icons/boxicons-regular";
+import { internalSubscribe } from "../../lib/eventEmitter";
+import { useContext, useEffect, useState } from "preact/hooks";
+
+var pendingUpdate = false;
+
+export default function UpdateIndicator() {
+    const [ pending, setPending ] = useState(pendingUpdate);
+
+    useEffect(() => {
+        return internalSubscribe('PWA', 'update', () => setPending(true));
+    });
+
+    if (!pending) return;
+    const theme = useContext(ThemeContext);
+
+    return (
+        <IconButton onClick={() => updateSW(true)}>
+            <Download size={22} color={theme.success} />
+        </IconButton>
+    )
+}

src/lib/eventEmitter.ts

@@ -20,3 +20,4 @@ export function internalEmit(ns: string, event: string, ...args: any[]) {
 // - MessageBox/append
 // - TextArea/focus
 // - ReplyBar/add
+// - PWA/update

src/main.tsx

@@ -1,9 +1,9 @@
-import { registerSW } from 'virtual:pwa-register'
+import { registerSW } from 'virtual:pwa-register';
-const updateSW = registerSW({
+import { internalEmit } from './lib/eventEmitter';
+
+export const updateSW = registerSW({
     onNeedRefresh() {
-        // ! FIXME: temp
+        internalEmit('PWA', 'update');
-        updateSW(true);
-        // show a prompt to user
     },
     onOfflineReady() {
         console.info('Ready to work offline.');

src/pages/channels/actions/HeaderActions.tsx

@@ -4,6 +4,7 @@ import { ChannelHeaderProps } from "../ChannelHeader";
 import IconButton from "../../../components/ui/IconButton";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import UpdateIndicator from "../../../components/common/UpdateIndicator";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { VoiceContext, VoiceOperationsContext, VoiceStatus } from "../../../context/Voice";
 import { UserPlus, Cog, Sidebar as SidebarIcon, PhoneCall, PhoneOutgoing } from "@styled-icons/boxicons-regular";
@@ -15,6 +16,7 @@ export default function HeaderActions({ channel, toggleSidebar }: ChannelHeaderP
 
     return (
         <>
+            <UpdateIndicator />
             { channel.channel_type === "Group" && (
                 <>
                     <IconButton onClick={() =>