fix: Flex scaling from last commit

feat: Component row render

Author: colin969

extensions/core-manager/src/commands.ts

@@ -1,2 +1,3 @@
 export const DownloadExtCommand = 'core-manager.download-extension';
 export const UninstallExtCommand = 'core-manager.uninstall-extension';
+export const ReadInstalledComponents = 'core-manager.read-installed-components';

extensions/core-manager/src/components/ComponentSubsection.tsx

@@ -1,25 +1,24 @@
 import axios from 'axios';
 import { XMLParser } from 'fast-xml-parser';
 import { useAppSelector } from 'flashpoint-launcher-renderer-ext/hooks';
-import fs from 'fs';
-import path from 'path';
+import { runCommand } from 'flashpoint-launcher-renderer-ext/utils';
 import { useEffect, useState } from 'react';
+import { ReadInstalledComponents } from '../commands';
 import { selectComponentRootUrls } from '../select';
 
 export function ComponentSubsection() {
   const [remoteInfo, setRemoteInfo] = useState<ManagerComponentRemoteInfo[]>([]);
-  const [installedInfo, setInstalledInfo] = useState<Record<string, ManagerInstalledComponentInfo>>({});
+  const [installedInfo, setInstalledInfo] = useState<ManagerInstalledComponentInfo[]>([]);
   const [ready, setReady] = useState(false);
-  const componentsPath = useAppSelector(state => path.join(state.main.config.flashpointPath, 'Components'));
   const remoteComponentUrlsRaw = useAppSelector(selectComponentRootUrls);
 
   useEffect(() => {
-    readInstalledComponents(componentsPath)
+    readInstalledComponents()
     .then((data) => {
       setInstalledInfo(data);
       setReady(true);
     })
-  }, [componentsPath]);
+  }, []);
 
   useEffect(() => {
     const repoUrls = remoteComponentUrlsRaw
@@ -33,60 +32,61 @@ export function ComponentSubsection() {
     })
   }, [remoteComponentUrlsRaw]);
 
-  const componentList: Record<string, ManagerComponent> = {};
-  if (ready) {
-    for (const key in installedInfo) {
-      componentList[key] = {
-        installed: installedInfo[key],
-        canUpdate: false,
-        updateDiff: 0,
-      };
+  const componentList: ManagerComponent[] = installedInfo.map(comp => {
+    return {
+      id: comp.id,
+      installed: comp,
+      canUpdate: false,
+      updateDiff: 0
     }
+  });
+  if (ready) {
     for (const remote of remoteInfo) {
-      const comp = componentList[remote.id];
-      if (comp) {
+      const existingIdx = componentList.findIndex(c => c.id === c.id);
+      if (existingIdx === -1) {
+        componentList.push({
+          id: remote.id,
+          remote,
+          canUpdate: true,
+          updateDiff: remote.installSize
+        });
+      } else {
+        const comp = componentList[existingIdx];
         comp.remote = remote;
         const installedSize = comp.installed ? comp.installed.size : 0;
         const installedHash = comp.installed ? comp.installed.hash : '';
         if (installedHash.toLowerCase() !== remote.hash.toLowerCase()) {
           comp.canUpdate = true;
           comp.updateDiff = installedSize - remote.installSize;
         }
-      } else {
-        componentList[remote.id] = {
-          remote,
-          canUpdate: true,
-          updateDiff: remote.installSize
-        }
       }
     }
   }
 
+  return <div className='manager-page-subsection'>
+    <div className='manager-page-subsection-header'>Components</div>
+    <div className='manager-page-subsection-list simple-scroll'>
+      { componentList.length > 0 ? componentList.map((comp, index) => {
+        return (
+          <ComponentRow
+            comp={comp}
+            index={index} />
+        );
+      }) : <div>Loading...</div>}
+    </div>
+  </div>;
 }
 
-async function readInstalledComponents(componentsPath: string): Promise<Record<string, ManagerInstalledComponentInfo>> { 
-  await fs.promises.mkdir(componentsPath, { recursive: true });
-  const files = await fs.promises.readdir(componentsPath);
-  const components: Record<string, ManagerInstalledComponentInfo> = {};
-  for (const file of files) {
-    try {
-      const filePath = path.join(componentsPath, file);
-      const content = await fs.promises.readFile(filePath, { encoding: 'utf-8' });
-      const lines = content.split('\n');
-      const [hash, size] = lines[0].split(' ');
-      if (hash.length !== 8) {
-        throw 'Hash length invalid';
-      }
-      components[file] = {
-        size: parseInt(size),
-        hash,
-        fileCount: lines.length - 1
-      };
-    } catch (err) {
-      log.error('Manager', 'Failed to read component: ' + file);
-    }
-  }
-  return components;
+function ComponentRow({ comp, index }: ComponentRowProps) {
+  return (
+    <div className='manager-component-row'>
+      {comp.id}
+    </div>
+  );
+}
+
+async function readInstalledComponents(): Promise<ManagerInstalledComponentInfo[]> { 
+  return runCommand(ReadInstalledComponents);
 }
 
 async function getRemoteFromIndex(indexUrl: string): Promise<ManagerComponentRemoteInfo[]> {
@@ -141,27 +141,7 @@ async function getRemoteFromIndex(indexUrl: string): Promise<ManagerComponentRem
   return components;
 }
 
-type ManagerComponent = {
-  installed?: ManagerInstalledComponentInfo;
-  remote?: ManagerComponentRemoteInfo;
-  canUpdate: boolean;
-  updateDiff: number;
-}
-
-type ManagerInstalledComponentInfo = {
-  size: number;
-  hash: string;
-  fileCount: number;
-}
-
-type ManagerComponentRemoteInfo = {
-  id: string;
-  title: string;
-  description: string;
-  dateModified: string;
-  downloadSize: number;
-  installSize: number;
-  path: string;
-  hash: string;
-  downloadUrl: string;
+export type ComponentRowProps = {
+  comp: ManagerComponent;
+  index: number;
 }

extensions/core-manager/src/components/ManagerPage.tsx

@@ -1,6 +1,7 @@
 import { LeftSidebarItem } from 'flashpoint-launcher-renderer';
 import { LeftSidebar, StateWrapper } from 'flashpoint-launcher-renderer-ext/components';
 import { useState } from 'react';
+import { ComponentSubsection } from './ComponentSubsection';
 import { ExtensionSubsection } from './ExtensionSubsection';
 import { SubsectionSettings } from './SettingsSubsection';
 
@@ -45,7 +46,7 @@ export default function ManagerPage() {
           <ExtensionSubsection/>
         </StateWrapper>
         <StateWrapper show={subsection === 'support-packs'}>
-          <SubsectionSupportPacks/>
+          <ComponentSubsection/>
         </StateWrapper>
         <StateWrapper show={subsection === 'utilities'}>
           <SubsectionUtilities/>

extensions/core-manager/src/extension.ts

@@ -1,15 +1,44 @@
 import axios from 'axios';
-import { commands, Disposable, ExtensionContext, installExtension, log, registerDisposable, uninstallExtension } from 'flashpoint-launcher';
+import { commands, config, Disposable, ExtensionContext, installExtension, log, registerDisposable, uninstallExtension } from 'flashpoint-launcher';
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
-import { DownloadExtCommand, UninstallExtCommand } from './commands';
+import { DownloadExtCommand, ReadInstalledComponents, UninstallExtCommand } from './commands';
 
 export async function activate(context: ExtensionContext): Promise<void> {
   const register = (disp: Disposable) => {
     registerDisposable(context.subscriptions, disp);
   };
 
+  register(
+    commands.registerCommand(ReadInstalledComponents, async () => {
+      const componentsPath = path.join(config.flashpointPath, 'Components');
+      await fs.promises.mkdir(componentsPath, { recursive: true });
+      const files = await fs.promises.readdir(componentsPath);
+      const components: ManagerInstalledComponentInfo[] = [];
+      for (const file of files) {
+        try {
+          const filePath = path.join(componentsPath, file);
+          const content = await fs.promises.readFile(filePath, { encoding: 'utf-8' });
+          const lines = content.split('\n');
+          const [hash, size] = lines[0].split(' ');
+          if (hash.length !== 8) {
+            throw 'Hash length invalid';
+          }
+          components.push({
+            id: file,
+            size: parseInt(size),
+            hash,
+            fileCount: lines.length - 1
+          });
+        } catch (err) {
+          log.error('Failed to read component: ' + file);
+        }
+      }
+      return components;
+    })
+  );
+
   register(
     commands.registerCommand(DownloadExtCommand, async (extId: string, url: string) => {
       // Uninstall extension if it exists

extensions/core-manager/src/type.ts

@@ -0,0 +1,26 @@
+type ManagerComponent = {
+  id: string;
+  installed?: ManagerInstalledComponentInfo;
+  remote?: ManagerComponentRemoteInfo;
+  canUpdate: boolean;
+  updateDiff: number;
+}
+
+type ManagerInstalledComponentInfo = {
+  id: string;
+  size: number;
+  hash: string;
+  fileCount: number;
+}
+
+type ManagerComponentRemoteInfo = {
+  id: string;
+  title: string;
+  description: string;
+  dateModified: string;
+  downloadSize: number;
+  installSize: number;
+  path: string;
+  hash: string;
+  downloadUrl: string;
+}

extensions/core-manager/static/core-manager.css

@@ -41,6 +41,7 @@
   flex-grow: 1;
 }
 
+.manager-component-row,
 .manager-extension-row {
   padding: 0.5rem;
   display: flex;

src/renderer/components/SplashScreen.tsx

@@ -62,7 +62,7 @@ export function SplashScreen(props: SplashScreenProps) {
   ) : undefined;
 
   return (
-    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }}>
+    <div className='main-wrapper'>
       {splashScreen}
       {loadedAll ? props.children : undefined}
     </div>

static/window/styles/core.css

@@ -445,17 +445,25 @@ body {
   width: 100%;
   height: 100%;
 }
+.main-wrapper {
+  width: 100%;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
 .main {
   display: flex;
   width: 100%;
-  height: 100%;
-  flex: 1;
+  flex-grow: 1;
   overflow: hidden;
 }
 
 
 /* ------ TitleBar ------ */
 .title-bar {
+  flex-shrink: 0;
   padding: 4px 0 0 4px;
   -webkit-user-select: none; /* Disable text selection */
   z-index: 1001; /* Hacky way of displaying it in from of the splash screen. */