From f00db32cab91f5202e11ec5e97dcc9a1f2922b27 Mon Sep 17 00:00:00 2001 From: LynithDev <61880709+LynithDev@users.noreply.github.com> Date: Tue, 22 Oct 2024 22:09:28 +0200 Subject: [PATCH] fix: Ingress, should probably add more event listeners and more ingress types for better user feedback --- apps/frontend/package.json | 1 + .../notifications/NotificationComponent.tsx | 80 +++++-------------- .../notifications/NotificationOverlay.tsx | 6 +- .../notifications/NotificationPopup.tsx | 36 ++++----- apps/frontend/src/ui/hooks/useIngress.ts | 26 ------ .../frontend/src/ui/hooks/useNotifications.ts | 34 ++++++++ packages/core/src/game/mod.rs | 2 +- pnpm-lock.yaml | 23 ++++++ 8 files changed, 98 insertions(+), 110 deletions(-) delete mode 100644 apps/frontend/src/ui/hooks/useIngress.ts create mode 100644 apps/frontend/src/ui/hooks/useNotifications.ts diff --git a/apps/frontend/package.json b/apps/frontend/package.json index 677ee4ca..457719d4 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -23,6 +23,7 @@ "@leeoniya/ufuzzy": "^1.0.14", "@onelauncher/client": "workspace:*", "@solid-primitives/i18n": "^2.1.1", + "@solid-primitives/map": "^0.4.13", "@solid-primitives/refs": "^1.0.8", "@solidjs/router": "^0.14.7", "@t3-oss/env-core": "^0.11.0", diff --git a/apps/frontend/src/ui/components/overlay/notifications/NotificationComponent.tsx b/apps/frontend/src/ui/components/overlay/notifications/NotificationComponent.tsx index dad43ddd..968afcd7 100644 --- a/apps/frontend/src/ui/components/overlay/notifications/NotificationComponent.tsx +++ b/apps/frontend/src/ui/components/overlay/notifications/NotificationComponent.tsx @@ -1,45 +1,21 @@ -import type { IngressPayload, IngressType } from '@onelauncher/client/bindings'; import { PausableTimer } from '@onelauncher/client'; import { InfoCircleIcon } from '@untitled-theme/icons-solid'; -import { type ComponentProps, createEffect, createSignal, type JSX, Match, Show, Switch } from 'solid-js'; +import { createEffect, createSignal, type JSX, Match, Show, Switch } from 'solid-js'; -type NotificationComponentProps = IngressPayload & { +export interface NotificationData { + title: string; + message: string; + fraction?: number | undefined; +} + +export type NotificationComponentProps = NotificationData & { + icon?: () => JSX.Element; overlay: boolean; }; -function IconFromNotificationType(type: IngressType['type']): (props: ComponentProps<'svg'>) => JSX.Element { - switch (type) { - case 'initialize': - case 'download_java': - case 'download_loader': - case 'sync_cluster': - case 'copy_cluster': - case 'sync_config': - case 'archival': - case 'download_package': - case 'download_pack': - default: - return InfoCircleIcon; - } -} - -function ColorFromNotificationType(type: IngressType['type']): string { - switch (type) { - case 'initialize': - case 'download_java': - case 'download_loader': - case 'sync_cluster': - case 'copy_cluster': - case 'sync_config': - case 'archival': - case 'download_package': - case 'download_pack': - default: - return 'text-fg-primary'; - } -} - const TOTAL_SECONDS = 7; +const fractionEnded = (fraction: number | undefined) => fraction !== undefined && fraction >= 0.97; + function NotificationOverlayComponent(props: NotificationComponentProps) { const [disappearing, setDisappearing] = createSignal(true); const [timer, setTimer] = createSignal(); @@ -49,7 +25,7 @@ function NotificationOverlayComponent(props: NotificationComponentProps) { createEffect(() => { setDisappearing(props.fraction === undefined); - if (props.fraction !== null && props.fraction >= 1) { + if (fractionEnded(props.fraction)) { setVisible(false); return; } @@ -65,10 +41,6 @@ function NotificationOverlayComponent(props: NotificationComponentProps) { } }); - // onMount(() => { - // setVisible(true); - // }); - function onInterval() { if (secondsLeft() <= 0) { hide(); @@ -93,14 +65,6 @@ function NotificationOverlayComponent(props: NotificationComponentProps) { } return ( - //
- +
- // ); } function NotificationPopupComponent(props: NotificationComponentProps) { + // eslint-disable-next-line solid/reactivity -- Doesn't really matter here + const Icon = props.icon ?? InfoCircleIcon; + return (
- {IconFromNotificationType(props.event.type)({ - class: `w-6 h-6 ${ColorFromNotificationType(props.event.type)}`, - })} + -
- {props.message} - {props.message} +
+ {props.title} + {props.message}
@@ -147,12 +111,12 @@ function NotificationPopupComponent(props: NotificationComponentProps) {
- +
diff --git a/apps/frontend/src/ui/components/overlay/notifications/NotificationOverlay.tsx b/apps/frontend/src/ui/components/overlay/notifications/NotificationOverlay.tsx index 84105aed..19e3f8e6 100644 --- a/apps/frontend/src/ui/components/overlay/notifications/NotificationOverlay.tsx +++ b/apps/frontend/src/ui/components/overlay/notifications/NotificationOverlay.tsx @@ -1,10 +1,10 @@ -import useIngress from '~ui/hooks/useIngress'; +import useNotifications from '~ui/hooks/useNotifications'; import { For } from 'solid-js'; import Popup from '../Popup'; import NotificationComponent from './NotificationComponent'; export default function NotificationOverlay() { - const [ingress] = useIngress(); + const [notifications] = useNotifications(); return ( true} >
- + {notification => ( )} diff --git a/apps/frontend/src/ui/components/overlay/notifications/NotificationPopup.tsx b/apps/frontend/src/ui/components/overlay/notifications/NotificationPopup.tsx index dce2236e..17e9de53 100644 --- a/apps/frontend/src/ui/components/overlay/notifications/NotificationPopup.tsx +++ b/apps/frontend/src/ui/components/overlay/notifications/NotificationPopup.tsx @@ -1,37 +1,29 @@ import { Settings01Icon, Trash01Icon } from '@untitled-theme/icons-solid'; -import useIngress from '~ui/hooks/useIngress'; +import useNotifications from '~ui/hooks/useNotifications'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid'; -import { For, Match, Switch } from 'solid-js'; +import { createEffect, createMemo, For, Match, on, Switch } from 'solid-js'; import Button from '../../base/Button'; import Popup, { type PopupProps } from '../Popup'; import NotificationComponent from './NotificationComponent'; function NotificationPopup(props: PopupProps) { - const [ingress] = useIngress(updateSize); + const [notifications, setNotifications] = useNotifications(); let inner!: HTMLDivElement; let parent!: HTMLDivElement; - function updateSize() { + createEffect(on(notifications, () => { if (inner && parent) { const rect = inner.getBoundingClientRect(); parent.style.height = `${rect.height}px`; } - } + })); - // onMount(() => { - // document.addEventListener('keypress', async (e) => { - // if (e.key === 'n') { - // const progress = Math.random() > 0.0 ? { progress: 0.39 } : {}; - // const id = await manager.addNotification({ - // title: 'Test Notification', - // message: 'This is a test notification', - // notification_type: manager.NotificationType.Download, - // ...(progress), - // }); - // } - // }); - // }); + const memoedNotifications = createMemo(() => Object.values(notifications())); + + function clearNotifications() { + setNotifications({}); + } return ( @@ -40,10 +32,10 @@ function NotificationPopup(props: PopupProps) {

Notifications

- 0}> + 0}>
- + {noti => (
@@ -54,14 +46,14 @@ function NotificationPopup(props: PopupProps) {
- + You have no notifications
- diff --git a/apps/frontend/src/ui/hooks/useIngress.ts b/apps/frontend/src/ui/hooks/useIngress.ts deleted file mode 100644 index 9c2e167f..00000000 --- a/apps/frontend/src/ui/hooks/useIngress.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { events, type IngressPayload, type IngressType } from '@onelauncher/client/bindings'; -import { createSignal, onMount, type Signal } from 'solid-js'; - -type Ingresses = IngressPayload[]; -type OnUpdateFn = (event: IngressType['type']) => unknown; - -function useIngress(onUpdate?: OnUpdateFn): Signal { - const [ingresses, setIngresses] = createSignal([]); - - async function update(event: IngressType['type']) { - const ingress: Ingresses = []; // await manager.getNotifications(); - setIngresses(ingress); - - if (onUpdate) - onUpdate(event); - } - - onMount(() => { - update('initialize'); - events.ingressPayload.listen(e => update(e.payload.event.type)); - }); - - return [ingresses, setIngresses]; -} - -export default useIngress; diff --git a/apps/frontend/src/ui/hooks/useNotifications.ts b/apps/frontend/src/ui/hooks/useNotifications.ts new file mode 100644 index 00000000..97c3bc62 --- /dev/null +++ b/apps/frontend/src/ui/hooks/useNotifications.ts @@ -0,0 +1,34 @@ +import type { NotificationData } from '~ui/components/overlay/notifications/NotificationComponent'; +import { events } from '@onelauncher/client/bindings'; +import { createSignal, onMount, type Signal } from 'solid-js'; + +type Notifications = Record; +type OnUpdateFn = () => unknown; + +function useNotifications(onUpdate?: OnUpdateFn): Signal { + const [notifications, setNotifications] = createSignal({}); + + async function update(id: string, data: NotificationData) { + setNotifications((notifications) => { + notifications[id] = data; + return { + ...notifications, + }; + }); + + if (onUpdate) + onUpdate(); + } + + onMount(() => { + events.ingressPayload.listen(e => update(e.payload.ingress_uuid, { + title: e.payload.event.type.replaceAll('_', ' '), + message: e.payload.message, + fraction: e.payload.fraction ?? undefined, + })); + }); + + return [notifications, setNotifications]; +} + +export default useNotifications; diff --git a/packages/core/src/game/mod.rs b/packages/core/src/game/mod.rs index 657c6e0a..284db8e9 100644 --- a/packages/core/src/game/mod.rs +++ b/packages/core/src/game/mod.rs @@ -235,7 +235,7 @@ pub async fn install_minecraft( }) .await?; State::sync().await?; - send_ingress(&ingress, 1.0, Some("installed minecraft successfully")).await?; + send_ingress(&ingress, 100.0, Some("installed minecraft successfully")).await?; Ok(()) } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3b700d44..e3dfd552 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -100,6 +100,9 @@ importers: '@solid-primitives/i18n': specifier: ^2.1.1 version: 2.1.1(solid-js@1.9.1) + '@solid-primitives/map': + specifier: ^0.4.13 + version: 0.4.13(solid-js@1.9.1) '@solid-primitives/refs': specifier: ^1.0.8 version: 1.0.8(solid-js@1.9.1) @@ -1265,6 +1268,11 @@ packages: peerDependencies: solid-js: ^1.6.12 + '@solid-primitives/map@0.4.13': + resolution: {integrity: sha512-B1zyFbsiTQvqPr+cuPCXO72sRuczG9Swncqk5P74NCGw1VE8qa/Ry9GlfI1e/VdeQYHjan+XkbE3rO2GW/qKew==} + peerDependencies: + solid-js: ^1.6.12 + '@solid-primitives/memo@1.3.9': resolution: {integrity: sha512-OIlGcsEPXr6U23fDaSEm8iqezWDT4SNSjLTekWQVOu4qHostnMPlqU8xo1Jf0I7OgRuqA0wTMQ5cu0bYjeR/ZQ==} peerDependencies: @@ -1285,6 +1293,11 @@ packages: peerDependencies: solid-js: ^1.6.12 + '@solid-primitives/trigger@1.1.0': + resolution: {integrity: sha512-00BbAiXV66WwjHuKZc3wr0+GLb9C24mMUmi3JdTpNFgHBbrQGrIHubmZDg36c5/7wH+E0GQtOOanwQS063PO+A==} + peerDependencies: + solid-js: ^1.6.12 + '@solid-primitives/utils@6.2.3': resolution: {integrity: sha512-CqAwKb2T5Vi72+rhebSsqNZ9o67buYRdEJrIFzRXz3U59QqezuuxPsyzTSVCacwS5Pf109VRsgCJQoxKRoECZQ==} peerDependencies: @@ -5061,6 +5074,11 @@ snapshots: dependencies: solid-js: 1.9.1 + '@solid-primitives/map@0.4.13(solid-js@1.9.1)': + dependencies: + '@solid-primitives/trigger': 1.1.0(solid-js@1.9.1) + solid-js: 1.9.1 + '@solid-primitives/memo@1.3.9(solid-js@1.9.1)': dependencies: '@solid-primitives/scheduled': 1.4.3(solid-js@1.9.1) @@ -5080,6 +5098,11 @@ snapshots: dependencies: solid-js: 1.9.1 + '@solid-primitives/trigger@1.1.0(solid-js@1.9.1)': + dependencies: + '@solid-primitives/utils': 6.2.3(solid-js@1.9.1) + solid-js: 1.9.1 + '@solid-primitives/utils@6.2.3(solid-js@1.9.1)': dependencies: solid-js: 1.9.1