feat: Edit playlist notes without editable (wip)

fix: Reimplement exit code for Electron

Author: colin969

src/renderer/components/DisplayComponent.tsx

@@ -2,10 +2,14 @@ import { GameComponentDropdownSelectFieldProps, GameComponentInputFieldProps } f
 import { InputField } from './InputField';
 import { DropdownInputFieldMapped } from './DropdownInputField';
 
-export function GameComponentInputField({ header, onClick, multiline, text, placeholder, onChange, editable }: GameComponentInputFieldProps) {
+export function GameComponentInputField(props: GameComponentInputFieldProps) {
+  const { header, onClick, multiline, text, placeholder, onChange, editable, HeaderComponent } = props;
+  const headerRender = HeaderComponent ? <HeaderComponent {...props}/> : <p className='browse-right-sidebar__row-header-text'>{header}: </p>;
   return (
     <div className={`browse-right-sidebar__row ${!multiline ? 'browse-right-sidebar__row--one-line' : ''}`}>
-      <p>{header}: </p>
+      <div className='browse-right-sidebar__row-header'>
+        {headerRender}
+      </div>
       <InputField
         text={text}
         placeholder={placeholder}

src/renderer/components/GameComponents.tsx

@@ -1,7 +1,7 @@
 import { ModelUtils } from '@shared/game/util';
 import { deepCopy, generateTagFilterGroup } from '@shared/Util';
 import { AdditionalApp, Game, Platform, Tag, TagSuggestion } from 'flashpoint-launcher';
-import { GameComponentProps } from 'flashpoint-launcher-renderer';
+import { GameComponentInputFieldProps, GameComponentProps } from 'flashpoint-launcher-renderer';
 import { GameComponentInputField } from './DisplayComponent';
 import { DropdownInputField, DropdownInputFieldMapped } from './DropdownInputField';
 import { RightBrowseSidebarAddApp } from './RightBrowseSidebarAddApp';
@@ -333,7 +333,26 @@ export function GameComponentAddApps(props: GameComponentProps) {
 
 export function GameComponentPlaylistNotes(props: GameComponentProps) {
   const { playlistGame, updatePlaylistNotes } = props;
+  const upperEditable = props.editable;
   const lang = useContext(LangContext);
+  const [editableOverride, setEditableOverride] = useState(false);
+  const editable = editableOverride || upperEditable;
+  console.log(upperEditable);
+
+  const HeaderComponent = (props: GameComponentInputFieldProps) => {
+    return (
+      <>
+        <p className='browse-right-sidebar__row-header-text'>{props.header}: </p>
+        {!upperEditable && (
+          <>
+            <div onClick={() => setEditableOverride(!editableOverride)}>
+              <OpenIcon icon={editable ? 'check' : 'pencil'}/>
+            </div>
+          </>
+        )}
+      </>
+    );
+  };
 
   if (playlistGame) {
     return (
@@ -343,7 +362,9 @@ export function GameComponentPlaylistNotes(props: GameComponentProps) {
         placeholder={lang.browse.noPlaylistNotes}
         multiline={true}
         onChange={(value) => updatePlaylistNotes(value)}
-        {...props} />
+        {...props}
+        editable={editable}
+        HeaderComponent={HeaderComponent} />
     );
   } else {
     return (<></>);

src/renderer/components/app.tsx

@@ -647,35 +647,47 @@ function initApp(dispatch: AppDispatch) {
   };
 
   // Load FPFSS user info and check that profile works
-  (() => {
-    const userBase64 = localStorage.getItem('fpfss_user');
-    if (userBase64) {
-      try {
-        const user = JSON.parse(Buffer.from(userBase64, 'base64').toString('utf-8')) as FpfssUser;
-        // Test profile uri
-        const profileUrl = `${window.Shared.initialPreferences.fpfssBaseUrl}/api/profile`;
-        axios.get(profileUrl, {
-          headers: {
-            'Authorization': `Bearer ${user.accessToken}`
-          }
-        })
-        .then((res) => {
-          // Success, use most recent info and save to storage and state
-          user.username = res.data['Username'];
-          user.avatarUrl = res.data['AvatarURL'];
-          user.roles = res.data['Roles'];
-          dispatch(setFpfssUser(user));
-        })
-        .catch(() => {
-          // Failed auth
-          localStorage.removeItem('fpfss_user');
-        });
-      } catch (err) {
-        log.error('Launcher', 'Fpfss saved auth was invalid, clearing...');
+  const userBase64 = localStorage.getItem('fpfss_user');
+  if (userBase64) {
+    try {
+      const user = JSON.parse(Buffer.from(userBase64, 'base64').toString('utf-8')) as FpfssUser;
+      // Test profile uri
+      const profileUrl = `${window.Shared.initialPreferences.fpfssBaseUrl}/api/profile`;
+      axios.get(profileUrl, {
+        headers: {
+          'Authorization': `Bearer ${user.accessToken}`
+        }
+      })
+      .then((res) => {
+        // Success, use most recent info and save to storage and state
+        user.username = res.data['Username'];
+        user.avatarUrl = res.data['AvatarURL'];
+        user.roles = res.data['Roles'];
+        dispatch(setFpfssUser(user));
+      })
+      .catch(() => {
+        // Failed auth
         localStorage.removeItem('fpfss_user');
-      }
+      });
+    } catch (err) {
+      log.error('Launcher', 'Fpfss saved auth was invalid, clearing...');
+      localStorage.removeItem('fpfss_user');
     }
-  })();
+  }
+
+  if (window.electronAPI !== undefined) {
+    // Only exit after window closure if we're running under Electron
+    window.onbeforeunload = (event: BeforeUnloadEvent) => {
+      event.stopPropagation();
+      setTimeout(() => {
+        window.Shared.back.allowDeath();
+        window.Shared.back.request(BackIn.QUIT)
+        .finally(() => {
+          window.close();
+        });
+      }, 100);
+    };
+  }
 
   registerWebsocketListeners(dispatch);
 }

static/window/styles/core.css

@@ -1707,10 +1707,17 @@ body {
   font-weight: bold;
   font-size: 1.05em;
 }
-.browse-right-sidebar__row p {
+.browse-right-sidebar__row-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.browse-right-sidebar__row-header-text {
   display: inline;
   cursor: default;
   align-self: baseline;
+  font-weight: bold;
+  font-size: 1.05em;
 }
 .browse-right-sidebar--edit-enabled {
   user-select: none; /* Can not select text while editing is enabled */

typings/flashpoint-launcher.d.ts

@@ -2694,6 +2694,7 @@ declare module 'flashpoint-launcher-renderer' {
     onClick?: () => void;
     /** Called whenever the text input changes (must update text value yourself, usually with updateGame) */
     onChange: (value: string) => void;
+    HeaderComponent?: (props: GameComponentInputFieldProps) => React.ReactNode;
   };
 
   type GameComponentDropdownSelectFieldProps = GameComponentProps & {