feat: Generic purpose LeftSidebar component

feat: Add BrowsePageDisplayList, LeftSidebar and StateWrapper to ext components

feat: Add useLocation hook for ext

fix: Use react-router-dom typings for useLocation and useNavigate

feat: Add StateWrapper around Activity, to prevent preloading of components but still keep state when hidden. Prevents perf cost of never seen Activity components

feat: Add typings for TaskState and LogsState for ext RootState

Author: colin969

src/back/extensions/ApiImplementation.ts

@@ -26,16 +26,15 @@ import { BackOut } from '@shared/back/types';
 import { CURATIONS_FOLDER_WORKING } from '@shared/constants';
 import { CurationMeta } from '@shared/curate/types';
 import { getContentFolderByKey } from '@shared/curate/util';
-import { Task } from '@shared/interfaces';
 import { langTemplate } from '@shared/lang';
 import { PreferencesFile } from '@shared/preferences/PreferencesFile';
 import { overwritePreferenceData } from '@shared/preferences/util';
 import { formatString } from '@shared/utils/StringFormatter';
 import * as flashpoint from 'flashpoint-launcher';
-import { CurationTemplate, Game, IExtensionManifest } from 'flashpoint-launcher';
-import * as fs from 'node:fs';
+import { CurationTemplate, Game, IExtensionManifest, Task } from 'flashpoint-launcher';
 import * as fsExtra from 'fs-extra';
 import { extractFull } from 'node-7z';
+import * as fs from 'node:fs';
 import * as path from 'node:path';
 import * as stream from 'stream';
 import uuid from 'uuid';

src/renderer/components/ActivityRoutes.tsx

@@ -1,6 +1,6 @@
 import { Paths } from '@shared/Paths';
-import { CustomRoute } from 'flashpoint-launcher-renderer';
-import { Activity, ReactNode } from 'react';
+import { CustomRoute, StateWrapperProps } from 'flashpoint-launcher-renderer';
+import { Activity, ReactNode, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { DynamicComponent } from './DynamicComponent';
 import { CuratePage } from './pages/CuratePage';
@@ -58,7 +58,25 @@ function ActivityRoute({ path, children, exact }: ActivityRouteProps) {
     pathname.startsWith(path);
 
   return (
-    <Activity mode={showChildren ? 'visible' : 'hidden'}>
+    <StateWrapper show={showChildren}>
+      {children}
+    </StateWrapper>
+  );
+}
+
+export function StateWrapper({ show, children }: StateWrapperProps) {
+  const [shownOnce, setShownOnce] = useState(false);
+
+  if (!shownOnce && !show) {
+    return <></>;
+  }
+
+  if (!shownOnce && show) {
+    setShownOnce(true);
+  }
+
+  return (
+    <Activity mode={show ? 'visible' : 'hidden'}>
       {children}
     </Activity>
   );

src/renderer/components/LeftSidebar.tsx

@@ -0,0 +1,61 @@
+import { LeftSidebarItem, LeftSidebarProps } from 'flashpoint-launcher-renderer';
+import { List, RowComponentProps } from 'react-window';
+import { InputField } from './InputField';
+import { SizeProvider } from './SizeProvider';
+
+export function LeftSidebar({ items, selected, onSelect, rowHeight }: LeftSidebarProps) {
+  return (
+    <div className='leftsidebar'>
+      <SizeProvider height={rowHeight}>
+        <List
+          rowComponent={LeftSidebarRow}
+          rowCount={items.length}
+          rowProps={{
+            items,
+            selected,
+            onSelect
+          }}
+          rowHeight={rowHeight}
+          overscanCount={10}/>
+      </SizeProvider>
+    </div>
+  );
+}
+
+type LeftSidebarRowProps = {
+  items: LeftSidebarItem[];
+  selected?: string;
+  onSelect?: (key: string) => void;
+}
+
+function LeftSidebarRow({ items, selected, onSelect, index, style }: RowComponentProps<LeftSidebarRowProps>) {
+  const { key, title, icon } = items[index];
+  let className = 'leftsidebar-item';
+  if (key === selected) { className += ' leftsidebar-item--selected'; }
+  let titleClassName = 'leftsidebar-item-title';
+  if (key === selected) { titleClassName += ' leftsidebar-item-title--selected'; }
+
+  return (
+    <>
+      <div
+        className={className}
+        style={style}>
+        {/* Drag Overlay */}
+        <div className='playlist-list-item__drag-overlay' />
+        {/* Head */}
+        <div
+          className='playlist-list-item__head'
+          onClick={() => onSelect && onSelect(key)}>
+          {/* Icon */}
+          {icon}
+          {/* Title */}
+          <div className='playlist-list-item__title simple-center'>
+            <InputField
+              text={title}
+              className={titleClassName}/>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/renderer/components/app.tsx

@@ -32,8 +32,8 @@ import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { toast, ToastContainer } from 'react-toastify';
 import { axios } from '../Util';
 import { LangContext } from '../util/lang';
-import { ActivityRoutes } from './ActivityRoutes';
-import { BrowsePageDisplayGrid } from './BrowsePageDisplay';
+import { ActivityRoutes, StateWrapper } from './ActivityRoutes';
+import { BrowsePageDisplayGrid, BrowsePageDisplayList } from './BrowsePageDisplay';
 import { Dialog } from './Dialog';
 import { GameComponentDropdownSelectField, GameComponentInputField } from './DisplayComponent';
 import { DynamicComponent } from './DynamicComponent';
@@ -44,6 +44,7 @@ import { Footer } from './Footer';
 import { SortableColumn } from './GameListHeader';
 import { Header } from './Header';
 import { HomePageBox } from './HomePageBox';
+import { LeftSidebar } from './LeftSidebar';
 import { AboutPage } from './pages/AboutPage';
 import { BrowsePage } from './pages/BrowsePage';
 import { ConfigPage } from './pages/ConfigPage';
@@ -439,10 +440,14 @@ function addExtIntercepts() {
     SizeProvider,
     RandomGames,
     BrowsePageDisplayGrid,
+    BrowsePageDisplayList,
+    LeftSidebar,
+    StateWrapper,
   } satisfies typeof import('flashpoint-launcher-renderer-ext/components');
 
   (window as any)['flashpoint-launcher-renderer-ext/hooks'] = {
     useNavigate,
+    useLocation,
     useAppDispatch,
     useAppSelector,
     useContextMenu,

src/renderer/components/pages/CuratePage.tsx

@@ -8,11 +8,10 @@ import { axios, getCurationPostURL, getPlatformIconURL, openUrlInWindow } from '
 import { BackIn } from '@shared/back/types';
 import { EditCurationMeta } from '@shared/curate/OLD_types';
 import { eventResponseDebouncerFactory } from '@shared/eventResponseDebouncer';
-import { Task } from '@shared/interfaces';
 import { getFileServerURL } from '@shared/Util';
 import { formatString } from '@shared/utils/StringFormatter';
 import { uuid } from '@shared/utils/uuid';
-import { AppPreferencesData, CurationState, GameLaunchOverride, TagSuggestion } from 'flashpoint-launcher';
+import { AppPreferencesData, CurationState, GameLaunchOverride, TagSuggestion, Task } from 'flashpoint-launcher';
 import * as path from 'node:path';
 import * as React from 'react';
 import { useShortcut } from 'react-keybind';

src/renderer/containers/withLogs.tsx

@@ -1,6 +1,7 @@
 import { useAppSelector } from '@renderer/hooks/useAppSelector';
-import { logsActions, LogsState } from '@renderer/store/logs/slice';
+import { logsActions } from '@renderer/store/logs/slice';
 import { Subtract } from '@shared/interfaces';
+import { LogsState } from 'flashpoint-launcher-renderer';
 import { useDispatch } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 

src/renderer/store/logs/slice.ts

@@ -1,11 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { ILogEntry } from 'flashpoint-launcher';
-
-export type LogsState = {
-  offset: number;
-  longestSource: number;
-  entries: ILogEntry[];
-}
+import { LogsState } from 'flashpoint-launcher-renderer';
 
 const initialState: LogsState = {
   offset: 0,

src/renderer/store/tasks/slice.ts

@@ -1,10 +1,6 @@
-import { Task } from '@shared/interfaces';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-
-type TaskState = {
-  tasks: Task[];
-  taskBarOpen: boolean;
-}
+import { Task } from 'flashpoint-launcher';
+import { TaskState } from 'flashpoint-launcher-renderer';
 
 const initialState: TaskState = {
   tasks: [],

src/shared/interfaces.ts

@@ -146,12 +146,3 @@ export type SuggestionProps = (
 export type GamePropSuggestions = {
   [P in SuggestionProps]: string[];
 }
-
-export type Task = {
-  id: string;
-  name: string;
-  status: string;
-  finished: boolean;
-  error?: string;
-  progress?: number;
-}

static/window/styles/core.css

@@ -2179,6 +2179,12 @@ body {
   margin: 0 auto;
 }
 
+/* --- Left Sidebar --- */
+.leftsidebar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 
 /* ------ Playlist ------ */
 .playlist-list__message {