diff --git a/external/lang b/external/lang index 9406c734..03b206f6 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 9406c734ca2cb7b65eefcf926d9e829f9a2056d7 +Subproject commit 03b206f608b071eb26a099657d9619d32f2bb264 diff --git a/src/components/common/Tooltip.tsx b/src/components/common/Tooltip.tsx index 9bf320e5..86be55cc 100644 --- a/src/components/common/Tooltip.tsx +++ b/src/components/common/Tooltip.tsx @@ -1,3 +1,5 @@ +import { Text } from "preact-i18n"; +import styled from "styled-components"; import { Children } from "../../types/Preact"; import Tippy, { TippyProps } from '@tippyjs/react'; @@ -17,3 +19,24 @@ export default function Tooltip(props: Props) { ); } + +const PermissionTooltipBase = styled.div` + display: flex; + align-items: center; + flex-direction: column; + + code { + font-family: 'Fira Mono'; + } +`; + +export function PermissionTooltip(props: Omit & { permission: string }) { + const { permission, ...tooltipProps } = props; + + return ( + + + { permission } + } {...tooltipProps} /> + ) +} diff --git a/src/components/common/UpdateIndicator.tsx b/src/components/common/UpdateIndicator.tsx new file mode 100644 index 00000000..982b73da --- /dev/null +++ b/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 ( + updateSW(true)}> + + + ) +} diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index 404e48e1..a8bd6302 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -1,6 +1,6 @@ import { ulid } from "ulid"; import { Text } from "preact-i18n"; -import Tooltip from "../Tooltip"; +import Tooltip, { PermissionTooltip } from "../Tooltip"; import { Channel } from "revolt.js"; import styled from "styled-components"; import { defer } from "../../../lib/defer"; @@ -90,9 +90,9 @@ function MessageBox({ channel, draft, dispatcher }: Props) { return ( - Permissions Required
Send messages
} placement="top"> + -
+
diff --git a/src/lib/eventEmitter.ts b/src/lib/eventEmitter.ts index 669ad37a..ae0ae52e 100644 --- a/src/lib/eventEmitter.ts +++ b/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 diff --git a/src/main.tsx b/src/main.tsx index fbb4a2bc..02c4364b 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,9 +1,9 @@ -import { registerSW } from 'virtual:pwa-register' -const updateSW = registerSW({ +import { registerSW } from 'virtual:pwa-register'; +import { internalEmit } from './lib/eventEmitter'; + +export const updateSW = registerSW({ onNeedRefresh() { - // ! FIXME: temp - updateSW(true); - // show a prompt to user + internalEmit('PWA', 'update'); }, onOfflineReady() { console.info('Ready to work offline.'); diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx index d3f7eeea..e0bfcdd0 100644 --- a/src/pages/channels/actions/HeaderActions.tsx +++ b/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 ( <> + { channel.channel_type === "Group" && ( <>