From 957e80448e597109075075f01dbe47150bbc5b7b Mon Sep 17 00:00:00 2001 From: Tormak <63308171+Tormak9970@users.noreply.github.com> Date: Sun, 7 Jan 2024 19:54:14 -0500 Subject: [PATCH] chore: split qam and docs markup into --- src/components/QuickAccessContent.tsx | 177 ++++++++++++++++++++ src/components/docs/DocsRouter.tsx | 50 ++++++ src/index.tsx | 226 +------------------------- 3 files changed, 233 insertions(+), 220 deletions(-) create mode 100644 src/components/QuickAccessContent.tsx create mode 100644 src/components/docs/DocsRouter.tsx diff --git a/src/components/QuickAccessContent.tsx b/src/components/QuickAccessContent.tsx new file mode 100644 index 0000000..e674061 --- /dev/null +++ b/src/components/QuickAccessContent.tsx @@ -0,0 +1,177 @@ +import { + ButtonItem, + DialogButton, + Field, + Focusable, + Navigation, + PanelSection, + ReorderableEntry, + ReorderableList, + showContextMenu, + GamepadEvent, + GamepadButton +} from "decky-frontend-lib"; +import { VFC, useState } from "react"; + +import { FaCircleExclamation } from "react-icons/fa6"; +import { PiListPlusBold } from "react-icons/pi"; + +import { useTabMasterContext } from "../state/TabMasterContext"; + +import { QamStyles } from "./styles/QamStyles"; +import { showModalNewTab } from "./modals/EditTabModal"; +import { TabActionsButton } from "./TabActions"; +import { LogController } from "../lib/controllers/LogController"; +import { PresetMenu } from './menus/PresetMenu'; +import { TabListLabel } from './TabListLabel'; +import { MicroSDeckInstallState, MicroSDeckInterop, microSDeckLibVersion } from '../lib/controllers/MicroSDeckInterop'; +import { MicroSDeckNotice } from './MicroSDeckNotice'; +import { CustomTabContainer } from './CustomTabContainer'; +import { SnapshotMenu } from './menus/SnapshotMenu'; + + +export type TabIdEntryType = { + id: string; +}; + +interface TabEntryInteractablesProps { + entry: ReorderableEntry; +} + +/** + * The Quick Access Menu content for TabMaster. + */ +export const QuickAccessContent: VFC<{}> = ({ }) => { + const [microSDeckNoticeHidden, setMicroSDeckNoticeHidden] = useState(MicroSDeckInterop.noticeHidden); + const { visibleTabsList, hiddenTabsList, tabsMap, tabMasterManager } = useTabMasterContext(); + + const microSDeckInstallState = MicroSDeckInterop.getInstallState(); + const isMicroSDeckInstalled = microSDeckInstallState === MicroSDeckInstallState['good']; + const hasSdTabs = !!visibleTabsList.find(tabContainer => (tabContainer as CustomTabContainer).dependsOnMicroSDeck); + + function TabEntryInteractables({ entry }: TabEntryInteractablesProps) { + const tabContainer = tabsMap.get(entry.data!.id)!; + return (); + } + + const entries = visibleTabsList.map((tabContainer) => { + return { + label: , + position: tabContainer.position, + data: { id: tabContainer.id } + }; + }); + + return ( +
+ {LogController.errorFlag &&
+

+ + Tab Master encountered an error +

+ +
} + {hasSdTabs && !isMicroSDeckInstalled && !microSDeckNoticeHidden && ( +
+ + +
+ { + MicroSDeckInterop.noticeHidden = true; + setMicroSDeckNoticeHidden(true); + }} + > + Hide Notice + +
+ +
+ )} + + { + if(evt.detail.button === GamepadButton.SELECT) { + showContextMenu(); + } + }} + onMenuButton={() => { Navigation.CloseSideMenus(); Navigation.Navigate("/tab-master-docs"); }} + > +
+ Here you can add, re-order, or remove tabs from the library. +
+ + + + showModalNewTab(tabMasterManager)} onOKActionDescription={'Add Tab'}> + Add Tab + + + {tabMasterManager.hasSettingsLoaded && + + showContextMenu()} + > + + + } + + + +
+ {tabMasterManager.hasSettingsLoaded ? ( + + entries={entries} + interactables={TabEntryInteractables} + onSave={(entries: ReorderableEntry[]) => { + tabMasterManager.reorderTabs(entries.map(entry => entry.data!.id)); + }} + /> + ) : ( +
+ Loading... +
+ )} + + +
+ { + hiddenTabsList.map(tabContainer => +
+ } + onClick={() => tabMasterManager.showTab(tabContainer.id)} + onOKActionDescription="Unhide tab" + > + Show + +
+ ) + } + + {hasSdTabs && !isMicroSDeckInstalled && microSDeckNoticeHidden && ( + { }}> + + + )} + +
+ ); +}; diff --git a/src/components/docs/DocsRouter.tsx b/src/components/docs/DocsRouter.tsx new file mode 100644 index 0000000..51f8b90 --- /dev/null +++ b/src/components/docs/DocsRouter.tsx @@ -0,0 +1,50 @@ +import { SidebarNavigation } from "decky-frontend-lib"; +import { VFC, ReactNode } from "react"; + +import { MdNumbers } from "react-icons/md"; +import { DocPage } from "./DocsPage"; + +type DocRouteEntry = { + title: string, + content: ReactNode, + route: string, + icon: ReactNode, + hideTitle: boolean; +}; + +type DocRoutes = { + [pageName: string]: DocRouteEntry; +}; + +type DocsRouterProps = { + docs: DocPages; +}; + +/** + * The documentation pages router for TabMaster. + */ +export const DocsRouter: VFC = ({ docs }) => { + const docPages: DocRoutes = {}; + Object.entries(docs).map(([pageName, doc]) => { + docPages[pageName] = { + title: pageName, + content: , + route: `/tab-master-docs/${pageName.toLowerCase().replace(/ /g, "-")}`, + icon: , + hideTitle: true + }; + }); + + return ( + + ); +}; diff --git a/src/index.tsx b/src/index.tsx index 432be6b..1ad60c6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,49 +1,26 @@ import { - ButtonItem, definePlugin, - DialogButton, - Field, - Focusable, - Navigation, - PanelSection, - ReorderableEntry, - ReorderableList, RoutePatch, ServerAPI, - showContextMenu, - SidebarNavigation, staticClasses, - GamepadEvent, - GamepadButton } from "decky-frontend-lib"; -import { VFC, ReactNode, useState } from "react"; import { TbLayoutNavbarExpand } from "react-icons/tb"; -import { FaCircleExclamation } from "react-icons/fa6"; -import { PiListPlusBold } from "react-icons/pi"; -import { MdNumbers } from "react-icons/md"; import { PluginController } from "./lib/controllers/PluginController"; import { PythonInterop } from "./lib/controllers/PythonInterop"; -import { TabMasterContextProvider, useTabMasterContext } from "./state/TabMasterContext"; +import { TabMasterContextProvider } from "./state/TabMasterContext"; import { TabMasterManager } from "./state/TabMasterManager"; import { patchLibrary } from "./patches/LibraryPatch"; import { patchSettings } from "./patches/SettingsPatch"; -import { QamStyles } from "./components/styles/QamStyles"; -import { showModalNewTab } from "./components/modals/EditTabModal"; -import { TabActionsButton } from "./components/TabActions"; import { LogController } from "./lib/controllers/LogController"; -import { DocPage } from "./components/docs/DocsPage"; -import { PresetMenu } from './components/menus/PresetMenu'; -import { TabListLabel } from './components/TabListLabel'; import { MicroSDeck } from "@cebbinghaus/microsdeck"; -import { MicroSDeckInstallState, MicroSDeckInterop, microSDeckLibVersion } from './lib/controllers/MicroSDeckInterop'; -import { MicroSDeckNotice } from './components/MicroSDeckNotice'; -import { CustomTabContainer } from './components/CustomTabContainer'; -import { SnapshotMenu } from './components/menus/SnapshotMenu'; +import { MicroSDeckInterop } from './lib/controllers/MicroSDeckInterop'; +import { QuickAccessContent } from "./components/QuickAccessContent"; +import { DocsRouter } from "./components/docs/DocsRouter"; declare global { let DeckyPluginLoader: { pluginReloadQueue: { name: string; version?: string; }[]; }; @@ -58,197 +35,6 @@ declare global { let settingsStore: SettingsStore; } -export type TabIdEntryType = { - id: string; -}; - -interface TabEntryInteractablesProps { - entry: ReorderableEntry; -} - -/** - * The Quick Access Menu content for TabMaster. - */ -const Content: VFC<{}> = ({ }) => { - const [microSDeckNoticeHidden, setMicroSDeckNoticeHidden] = useState(MicroSDeckInterop.noticeHidden); - const { visibleTabsList, hiddenTabsList, tabsMap, tabMasterManager } = useTabMasterContext(); - - const microSDeckInstallState = MicroSDeckInterop.getInstallState(); - const isMicroSDeckInstalled = microSDeckInstallState === MicroSDeckInstallState['good']; - const hasSdTabs = !!visibleTabsList.find(tabContainer => (tabContainer as CustomTabContainer).dependsOnMicroSDeck); - - function TabEntryInteractables({ entry }: TabEntryInteractablesProps) { - const tabContainer = tabsMap.get(entry.data!.id)!; - return (); - } - - const entries = visibleTabsList.map((tabContainer) => { - return { - label: , - position: tabContainer.position, - data: { id: tabContainer.id } - }; - }); - - return ( -
- {LogController.errorFlag &&
-

- - Tab Master encountered an error -

- -
} - {hasSdTabs && !isMicroSDeckInstalled && !microSDeckNoticeHidden && ( -
- - -
- { - MicroSDeckInterop.noticeHidden = true; - setMicroSDeckNoticeHidden(true); - }} - > - Hide Notice - -
- -
- )} - - { - if(evt.detail.button === GamepadButton.SELECT) { - showContextMenu(); - } - }} - onMenuButton={() => { Navigation.CloseSideMenus(); Navigation.Navigate("/tab-master-docs"); }} - > -
- Here you can add, re-order, or remove tabs from the library. -
- - - - showModalNewTab(tabMasterManager)} onOKActionDescription={'Add Tab'}> - Add Tab - - - {tabMasterManager.hasSettingsLoaded && - - showContextMenu()} - > - - - } - - - -
- {tabMasterManager.hasSettingsLoaded ? ( - - entries={entries} - interactables={TabEntryInteractables} - onSave={(entries: ReorderableEntry[]) => { - tabMasterManager.reorderTabs(entries.map(entry => entry.data!.id)); - }} - /> - ) : ( -
- Loading... -
- )} - - -
- { - hiddenTabsList.map(tabContainer => -
- } - onClick={() => tabMasterManager.showTab(tabContainer.id)} - onOKActionDescription="Unhide tab" - > - Show - -
- ) - } - - {hasSdTabs && !isMicroSDeckInstalled && microSDeckNoticeHidden && ( - { }}> - - - )} - -
- ); -}; - -type DocRouteEntry = { - title: string, - content: ReactNode, - route: string, - icon: ReactNode, - hideTitle: boolean; -}; - -type DocRoutes = { - [pageName: string]: DocRouteEntry; -}; - -type TabMasterDocsRouterProps = { - docs: DocPages; -}; - -/** - * The documentation pages router for TabMaster. - */ -const TabMasterDocsRouter: VFC = ({ docs }) => { - const docPages: DocRoutes = {}; - Object.entries(docs).map(([pageName, doc]) => { - docPages[pageName] = { - title: pageName, - content: , - route: `/tab-master-docs/${pageName.toLowerCase().replace(/ /g, "-")}`, - icon: , - hideTitle: true - }; - }); - - return ( - - ); -}; - export default definePlugin((serverAPI: ServerAPI) => { let libraryPatch: RoutePatch; @@ -274,7 +60,7 @@ export default definePlugin((serverAPI: ServerAPI) => { } else { serverAPI.routerHook.addRoute("/tab-master-docs", () => ( - + )); } @@ -284,7 +70,7 @@ export default definePlugin((serverAPI: ServerAPI) => { title:
TabMaster
, content: - + , icon: , onDismount: () => {