Add folder path validation in windows application search settings (#1370

)
oliverschwendener · Feb 15, 2025 · 134bf97 · 134bf97
1 parent d3349e6
commit 134bf97
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 33 deletions.
diff --git a/src/main/Extensions/ApplicationSearch/ApplicationSearch.ts b/src/main/Extensions/ApplicationSearch/ApplicationSearch.ts
@@ -71,6 +71,18 @@ export class ApplicationSearch implements Extension {
                 openApplicationAsAdministrator: "Open as admin",
                 copyFilePathToClipboard: "Copy file path to clipboard",
                 advanced: "Advanced",
+
+                // Settings
+                general: "General",
+                folders: "Folders",
+                fileExtensions: "File extensions",
+                folderDoesNotExist: "Folder does not exist",
+                add: "Add",
+                remove: "Remove",
+                addFolder: "Add folder",
+                chooseFolder: "Chooser folder",
+                addFileExtension: "Add file extension",
+                includeAppsFromWindowsStore: "Include apps from Windows Store",
             },
             "de-CH": {
                 extensionName: "Anwendungssuche",
@@ -79,6 +91,18 @@ export class ApplicationSearch implements Extension {
                 openApplicationAsAdministrator: "Anwendung als Administrator starten",
                 copyFilePathToClipboard: "Dateipfad in Zwischenablage kopieren",
                 advanced: "Erweitert",
+
+                // Settings
+                general: "Allgemein",
+                folders: "Ordner",
+                fileExtensions: "Dateierweiterungen",
+                folderDoesNotExist: "Ordner existiert nicht",
+                add: "Hinzufügen",
+                remove: "Entfernen",
+                addFolder: "Ordner hinzufügen",
+                chooseFolder: "Ordner auswählen",
+                addFileExtension: "Dateierweiterung hinzufügen",
+                includeAppsFromWindowsStore: "Apps aus dem Windows Store einbeziehen",
             },
         };
     }

diff --git a/src/renderer/Extensions/ApplicationSearch/Windows/FileExtensions.tsx b/src/renderer/Extensions/ApplicationSearch/Windows/FileExtensions.tsx
@@ -2,8 +2,11 @@ import { useExtensionSetting } from "@Core/Hooks";
 import { Button, Input, Tooltip } from "@fluentui/react-components";
 import { AddRegular, DismissRegular } from "@fluentui/react-icons";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export const FileExtensions = () => {
+    const { t } = useTranslation("extension[ApplicationSearch]");
+
     const [newFileExtension, setNewFileExtension] = useState<string>("");
 
     const { value: fileExtensions, updateValue: setFileExtensions } = useExtensionSetting<string[]>({
@@ -27,7 +30,7 @@ export const FileExtensions = () => {
                     readOnly
                     value={fileExtension}
                     contentAfter={
-                        <Tooltip content="Remove" relationship="label" withArrow>
+                        <Tooltip content={t("remove")} relationship="label" withArrow>
                             <Button
                                 size="small"
                                 appearance="subtle"
@@ -40,10 +43,10 @@ export const FileExtensions = () => {
             ))}
             <Input
                 value={newFileExtension}
-                placeholder="Add another file extension"
+                placeholder={t("addFileExtension")}
                 onChange={(_, { value }) => setNewFileExtension(value)}
                 contentAfter={
-                    <Tooltip content="Add" relationship="label" withArrow>
+                    <Tooltip content={t("add")} relationship="label" withArrow>
                         <Button
                             appearance="subtle"
                             size="small"

diff --git a/src/renderer/Extensions/ApplicationSearch/Windows/Folders.tsx b/src/renderer/Extensions/ApplicationSearch/Windows/Folders.tsx
@@ -1,9 +1,12 @@
 import { useExtensionSetting } from "@Core/Hooks";
-import { Button, Input, Tooltip } from "@fluentui/react-components";
+import { Button, Field, Input, Tooltip } from "@fluentui/react-components";
 import { AddRegular, DismissRegular, FolderRegular } from "@fluentui/react-icons";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export const Folders = () => {
+    const { t } = useTranslation("extension[ApplicationSearch]");
+
     const { value: folders, updateValue: setFolders } = useExtensionSetting<string[]>({
         extensionId: "ApplicationSearch",
         key: "windowsFolders",
@@ -27,14 +30,16 @@ export const Folders = () => {
         }
     };
 
+    const newFolderExists = window.ContextBridge.fileExists(newFolder);
+
     return (
         <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
             {folders.map((folder) => (
                 <Input
                     readOnly
                     value={folder}
                     contentAfter={
-                        <Tooltip content="Remove" relationship="label" withArrow>
+                        <Tooltip content={t("remove")} relationship="label" withArrow>
                             <Button
                                 size="small"
                                 appearance="subtle"
@@ -45,31 +50,39 @@ export const Folders = () => {
                     }
                 />
             ))}
-            <Input
-                value={newFolder}
-                placeholder="Add another folder"
-                onChange={(_, { value }) => setNewFolder(value)}
-                contentAfter={
-                    <>
-                        <Tooltip content="Choose folder" relationship="label" withArrow>
-                            <Button
-                                appearance="subtle"
-                                size="small"
-                                icon={<FolderRegular />}
-                                onClick={() => chooseFolder()}
-                            />
-                        </Tooltip>
-                        <Tooltip content="Add" relationship="label" withArrow>
-                            <Button
-                                appearance="subtle"
-                                size="small"
-                                icon={<AddRegular />}
-                                onClick={() => addFolder(newFolder)}
-                            />
-                        </Tooltip>
-                    </>
+            <Field
+                validationMessage={
+                    newFolder.length === 0 ? undefined : newFolderExists ? undefined : t("folderDoesNotExist")
                 }
-            />
+                validationState={newFolder.length === 0 ? undefined : newFolderExists ? "success" : "error"}
+            >
+                <Input
+                    value={newFolder}
+                    placeholder={t("addFolder")}
+                    onChange={(_, { value }) => setNewFolder(value)}
+                    contentAfter={
+                        <>
+                            <Tooltip content={t("chooseFolder")} relationship="label" withArrow>
+                                <Button
+                                    appearance="subtle"
+                                    size="small"
+                                    icon={<FolderRegular />}
+                                    onClick={() => chooseFolder()}
+                                />
+                            </Tooltip>
+                            <Tooltip content={t("add")} relationship="label" withArrow>
+                                <Button
+                                    appearance="subtle"
+                                    size="small"
+                                    icon={<AddRegular />}
+                                    disabled={newFolder.length === 0 || !newFolderExists}
+                                    onClick={() => addFolder(newFolder)}
+                                />
+                            </Tooltip>
+                        </>
+                    }
+                />
+            </Field>
         </div>
     );
 };
diff --git a/src/renderer/Extensions/ApplicationSearch/Windows/WindowsSettings.tsx b/src/renderer/Extensions/ApplicationSearch/Windows/WindowsSettings.tsx
@@ -3,20 +3,23 @@ import { Setting } from "@Core/Settings/Setting";
 import { SettingGroup } from "@Core/Settings/SettingGroup";
 import { SettingGroupList } from "@Core/Settings/SettingGroupList";
 import { Switch } from "@fluentui/react-components";
+import { useTranslation } from "react-i18next";
 import { FileExtensions } from "./FileExtensions";
 import { Folders } from "./Folders";
 
 export const WindowsSettings = () => {
+    const { t } = useTranslation("extension[ApplicationSearch]");
+
     const { value: includeWindowsStoreApps, updateValue: setIncludeWindowsStoreApps } = useExtensionSetting<boolean>({
         extensionId: "ApplicationSearch",
         key: "includeWindowsStoreApps",
     });
 
     return (
         <SettingGroupList>
-            <SettingGroup title="General">
+            <SettingGroup title={t("general")}>
                 <Setting
-                    label="Include Apps from Windows Store"
+                    label={t("includeAppsFromWindowsStore")}
                     control={
                         <Switch
                             checked={includeWindowsStoreApps}
@@ -25,10 +28,10 @@ export const WindowsSettings = () => {
                     }
                 />
             </SettingGroup>
-            <SettingGroup title="Folders">
+            <SettingGroup title={t("folders")}>
                 <Folders />
             </SettingGroup>
-            <SettingGroup title="File Extensions">
+            <SettingGroup title={t("fileExtensions")}>
                 <FileExtensions />
             </SettingGroup>
         </SettingGroupList>