better cache selector

src/main/main.ts

@@ -24,6 +24,7 @@ import {
     BrowserWindowConstructorOptions,
     protocol,
     net,
+    dialog,
 } from 'electron';
 import electronLocalShortcut from 'electron-localshortcut';
 import log from 'electron-log';
@@ -663,6 +664,26 @@ ipcMain.on(
     },
 );
 
+ipcMain.handle('cache-open-dialog', async (): Promise<string | null> => {
+    const window = getMainWindow();
+    if (window) {
+        const response = await dialog.showOpenDialog(window, {
+            defaultPath: app.getPath('userData'),
+            properties: ['openDirectory', 'showHiddenFiles'],
+        });
+        if (response.canceled) {
+            return null;
+        }
+
+        return response.filePaths[0];
+    }
+    return null;
+});
+
+ipcMain.handle('cache-open-path', async (_event, path: string) => {
+    return shell.openPath(path);
+});
+
 app.on('before-quit', () => {
     getMpvInstance()?.stop();
     getMpvInstance()?.quit();

src/main/preload/cache.ts

@@ -3,6 +3,7 @@ import { access, lstat, writeFile } from 'fs/promises';
 import { join } from 'path';
 import { Song } from '/@/renderer/api/types';
 import { localSettings } from '/@/main/preload/local-settings';
+import { ipcRenderer } from 'electron';
 
 let cachePath: string;
 
@@ -42,10 +43,20 @@ export const setCachePath = (path: string): void => {
     localSettings.set('cache.path', path);
 };
 
+export const openCacheDialog = (): Promise<string | null> => {
+    return ipcRenderer.invoke('cache-open-dialog');
+};
+
+export const openCachePath = (path: string) => {
+    ipcRenderer.invoke('cache-open-path', path);
+};
+
 export const cache = {
     cacheFile,
     getPath,
     isValidDirectory,
+    openCacheDialog,
+    openCachePath,
     setCachePath,
 };
 

src/renderer/features/settings/components/playback/cache-settings.tsx

@@ -1,9 +1,11 @@
-import { Switch, TextInput, toast } from '/@/renderer/components';
+import { Stack } from '@mantine/core';
+import { Button, Switch } from '/@/renderer/components';
 import {
     SettingOption,
     SettingsSection,
 } from '/@/renderer/features/settings/components/settings-section';
 import { useCacheSettings, useSettingsStoreActions } from '/@/renderer/store';
+import { RiExternalLinkLine } from 'react-icons/ri';
 
 const cache = window.electron.cache;
 const localSettings = window.electron.localSettings;
@@ -35,27 +37,33 @@ export const CacheSettings = () => {
         },
         {
             control: (
-                <TextInput
-                    defaultValue={settings.path}
-                    w={300}
-                    onChange={async (e) => {
-                        const path = e.currentTarget.value;
-
-                        if (await cache.isValidDirectory(path)) {
-                            setSettings({
-                                cache: {
-                                    ...settings,
-                                    path,
-                                },
-                            });
-                        } else {
-                            toast.error({
-                                message: `${path} is not a directory or does not exist`,
-                                title: 'Invalid path',
-                            });
-                        }
-                    }}
-                />
+                <Stack>
+                    <Button
+                        variant="filled"
+                        onClick={async () => {
+                            const path = await cache.openCacheDialog();
+                            if (path) {
+                                setSettings({
+                                    cache: {
+                                        ...settings,
+                                        path,
+                                    },
+                                });
+                            }
+                        }}
+                    >
+                        Set cache path
+                    </Button>
+                    <Button
+                        rightIcon={<RiExternalLinkLine />}
+                        variant="default"
+                        onClick={() => {
+                            cache.openCachePath(settings.path);
+                        }}
+                    >
+                        {settings.path}
+                    </Button>
+                </Stack>
             ),
             description: 'Path to store tracks',
             title: 'Cache location',