Convert IPCContainer to Typescript; add electron utils accessible ove…

…r IPC

.github/copilot-instructions.md

@@ -0,0 +1,28 @@
+This is a music player made with Typescript, React, Electron, and some Rust. You are a superhuman-level AI specializing in these technologies.
+
+# Key principles
+
+- Use modern React and Typescript style. Prioritize readability over "clever" code.
+- Always write the complete code for every step. Don't ad placeholders, todos, or other missing pieces.
+- Use functional and declarative programming patterns, avoid classes and mutable state.
+- Use descriptive variable names with auxiliary verbs (e.g. `isPlaying`, `isPaused`, `hasError`).
+- Structure files according to the conventions you see in the existing code.
+- Never use `any` as a type. Always type things according to your best judgment. Use `unknown` only when it's logically permissible.
+- Use generic types when it's useful or necessary.
+
+# Syntax
+
+- Prefer arrow functions: () => {} over function expressions: function() {}.
+- If you're unsure, stick to the existing code style.
+
+# Style
+
+- Be fun, approachable, patient, and passionate.
+- Code should be professional.
+- Don't add comments unless you're asked for it. If you need to explain something, you can do it in the chat.
+- Class names in SCSS files use underscores, e.g. `.music_player`.
+- Most components have an `index.tsx` file that exports the component as the default export. Follow this convention.
+
+# Incentives
+
+- If you solve this problem correctly, you will receive a $100 prize.

packages/app/app/components/Downloads/DownloadsHeader/index.tsx

@@ -1,15 +1,16 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import _ from 'lodash';
 import {
   Button,
   Icon,
   Segment
 } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
+import { dialog, ipcRenderer } from 'electron';
 
 import { setStringOption } from '../../../actions/settings';
 import styles from './styles.scss';
-import { app, dialog } from 'electron';
+import { IpcEvents } from '@nuclear/core';
 
 type DownloadsHeaderProps = {
   directory: string;
@@ -21,6 +22,7 @@ const DownloadsHeader: React.FC<DownloadsHeaderProps> = ({
   setStringOption
 }) => {
   const { t } = useTranslation('settings');
+  const [downloadsDir, setDownloadsDir] = useState<string>('');
   const setDirectory = useCallback(async () => {
     const dialogResult = await dialog.showOpenDialog({
       properties: ['openDirectory']
@@ -30,15 +32,22 @@ const DownloadsHeader: React.FC<DownloadsHeaderProps> = ({
         'downloads.dir',
         _.head(dialogResult.filePaths)
       );
+      setDownloadsDir(_.head(dialogResult.filePaths));
     }
   }, [setStringOption]);
 
+  useEffect(() => {
+    ipcRenderer.invoke(IpcEvents.DOWNLOAD_GET_PATH).then((storedDownloadsDir) => {
+      setDownloadsDir(_.isEmpty(directory) ? storedDownloadsDir : directory);
+    });
+  }, []);
+
   return (
     <Segment className={styles.downloads_header}>
       <span className={styles.label}>
         {t('saving-in')}
         <span className={styles.directory}>
-          {_.isEmpty(directory) ? app.getPath('downloads') : directory}
+          {downloadsDir}
         </span>
       </span>
       <Button