diff --git a/frontend/src/components/AnnouncementsDisplay.tsx b/frontend/src/components/AnnouncementsDisplay.tsx new file mode 100644 index 000000000..c6e6db1e4 --- /dev/null +++ b/frontend/src/components/AnnouncementsDisplay.tsx @@ -0,0 +1,123 @@ +import { DialogButton, Focusable, PanelSection } from '@decky/ui'; +import { useEffect, useMemo, useState } from 'react'; +import { FaTimes } from 'react-icons/fa'; + +import { Announcement, getAnnouncements } from '../store'; +import { useSetting } from '../utils/hooks/useSetting'; + +const SEVERITIES = { + High: { + color: '#bb1414', + text: '#fff', + }, + Medium: { + color: '#bbbb14', + text: '#fff', + }, + Low: { + color: '#1488bb', + text: '#fff', + }, +}; + +const welcomeAnnouncement: Announcement = { + id: 'welcomeAnnouncement', + title: 'Welcome to Decky!', + text: 'We hope you enjoy using Decky! If you have any questions or feedback, please let us know.', + created: Date.now().toString(), + updated: Date.now().toString(), +}; + +export function AnnouncementsDisplay() { + const [announcements, setAnnouncements] = useState([welcomeAnnouncement]); + // showWelcome will display a welcome motd, the welcome motd has an id of "welcome" and once that is saved to hiddenMotdId, it will not show again + const [hiddenAnnouncementIds, setHiddenAnnouncementIds] = useSetting('hiddenAnnouncementIds', []); + + function addAnnouncements(newAnnouncements: Announcement[]) { + // Removes any duplicates and sorts by created date + setAnnouncements((oldAnnouncements) => { + const newArr = [...oldAnnouncements, ...newAnnouncements]; + const setOfIds = new Set(newArr.map((a) => a.id)); + return ( + ( + Array.from(setOfIds) + .map((id) => newArr.find((a) => a.id === id)) + // Typescript doesn't type filter(Boolean) correctly, so I have to assert this + .filter(Boolean) as Announcement[] + ).sort((a, b) => { + return new Date(b.created).getTime() - new Date(a.created).getTime(); + }) + ); + }); + } + + async function fetchAnnouncement() { + const announcements = await getAnnouncements(); + announcements && addAnnouncements(announcements); + } + + useEffect(() => { + void fetchAnnouncement(); + }, []); + + const currentlyDisplayingAnnouncement: Announcement | null = useMemo(() => { + return announcements.find((announcement) => !hiddenAnnouncementIds.includes(announcement.id)) || null; + }, [announcements, hiddenAnnouncementIds]); + + function hideAnnouncement(id: string) { + setHiddenAnnouncementIds([...hiddenAnnouncementIds, id]); + void fetchAnnouncement(); + } + + if (!currentlyDisplayingAnnouncement) { + return null; + } + + // Severity is not implemented in the API currently + const severity = SEVERITIES['Low']; + + return ( + + +
+ {currentlyDisplayingAnnouncement.title} + hideAnnouncement(currentlyDisplayingAnnouncement.id)} + > + + +
+ {currentlyDisplayingAnnouncement.text} +
+
+ ); +} diff --git a/frontend/src/components/PluginView.tsx b/frontend/src/components/PluginView.tsx index 19afbca5f..88fe84f3d 100644 --- a/frontend/src/components/PluginView.tsx +++ b/frontend/src/components/PluginView.tsx @@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'; import { FaEyeSlash } from 'react-icons/fa'; import { Plugin } from '../plugin'; +import { AnnouncementsDisplay } from './AnnouncementsDisplay'; import { useDeckyState } from './DeckyState'; import NotificationBadge from './NotificationBadge'; import { useQuickAccessVisible } from './QuickAccessVisibleState'; @@ -42,6 +43,7 @@ const PluginView: FC = () => { paddingTop: '16px', }} > + {pluginList .filter((p) => p.content) diff --git a/frontend/src/store.tsx b/frontend/src/store.ts similarity index 76% rename from frontend/src/store.tsx rename to frontend/src/store.ts index 8ab8f50a3..7ce733358 100644 --- a/frontend/src/store.tsx +++ b/frontend/src/store.ts @@ -40,6 +40,14 @@ export interface PluginInstallRequest { installType: InstallType; } +export interface Announcement { + id: string; + title: string; + text: string; + created: string; + updated: string; +} + // name: version export type PluginUpdateMapping = Map; @@ -47,6 +55,47 @@ export async function getStore(): Promise { return await getSetting('store', Store.Default); } +export async function getAnnouncements(): Promise { + let version = await window.DeckyPluginLoader.updateVersion(); + let store = await getSetting('store', null); + let customURL = await getSetting( + 'announcements-url', + 'https://plugins.deckbrew.xyz/v1/announcements/-/current', + ); + + if (store === null) { + console.log('Could not get store, using Default.'); + await setSetting('store', Store.Default); + store = Store.Default; + } + + let resolvedURL; + switch (store) { + case Store.Default: + resolvedURL = 'https://plugins.deckbrew.xyz/v1/announcements/-/current'; + break; + case Store.Testing: + resolvedURL = 'https://testing.deckbrew.xyz/v1/announcements/-/current'; + break; + case Store.Custom: + resolvedURL = customURL; + break; + default: + console.error('Somehow you ended up without a standard URL, using the default URL.'); + resolvedURL = 'https://plugins.deckbrew.xyz/v1/announcements/-/current'; + break; + } + const res = await fetch(resolvedURL, { + method: 'GET', + headers: { + 'X-Decky-Version': version.current, + }, + }); + if (res.status !== 200) return []; + const json = await res.json(); + return json ?? []; +} + export async function getPluginList( sort_by: SortOptions | null = null, sort_direction: SortDirections | null = null,