Repository: oliverschwendener/ueli
Pull request #1359 (2025-02-09 19:15:10)

Add detailed search result list item
This PR adds the following things:

- The option to change between a "compact" and "detailed" search result list (see screenshots)
- An optional `details` property to the search result item
- The file search extension will always use the "detailed" search result list because there it makes sense to show the full file path

To all extension owners: please review the changes in your extension and give feedback about those changes.

Screenshots:
|Compact|Detailed|
|---|---|
|![image](https://github.com/user-attachments/assets/bbe81c26-8b6e-4930-b340-d4837b25d8dd)|![image](https://github.com/user-attachments/assets/417feedc-9f9d-494c-919a-7b2458245ee5)|


Patch:
diff --git a/src/common/Core/SearchResultItem.ts b/src/common/Core/SearchResultItem.ts
index 0ad407a6..31efc35c 100644
--- a/src/common/Core/SearchResultItem.ts
+++ b/src/common/Core/SearchResultItem.ts
@@ -25,6 +25,11 @@ export type SearchResultItem = {
      */
     descriptionTranslation?: { key: string; namespace: string };
 
+    /**
+     * The details of the search result item.
+     */
+    details?: string;
+
     /**
      * The image of the search result item. This image will be used in the search result list.
      */
diff --git a/src/main/Extensions/ApplicationSearch/Linux/LinuxApplication.ts b/src/main/Extensions/ApplicationSearch/Linux/LinuxApplication.ts
index f5b8a1ab..85a01113 100644
--- a/src/main/Extensions/ApplicationSearch/Linux/LinuxApplication.ts
+++ b/src/main/Extensions/ApplicationSearch/Linux/LinuxApplication.ts
@@ -18,6 +18,7 @@ export class LinuxApplication implements Application {
                 key: "searchResultItemDescription",
                 namespace: "extension[ApplicationSearch]",
             },
+            details: this.filePath,
             id: this.getId(),
             name: this.name,
             image: this.image,
diff --git a/src/main/Extensions/ApplicationSearch/Windows/WindowsApplication.ts b/src/main/Extensions/ApplicationSearch/Windows/WindowsApplication.ts
index 28c99ee6..e4226e5f 100644
--- a/src/main/Extensions/ApplicationSearch/Windows/WindowsApplication.ts
+++ b/src/main/Extensions/ApplicationSearch/Windows/WindowsApplication.ts
@@ -21,6 +21,7 @@ export class WindowsApplication implements Application {
                 key: "searchResultItemDescription",
                 namespace: "extension[ApplicationSearch]",
             },
+            details: this.filePath,
             id: this.getId(),
             name: this.name,
             image: this.image,
diff --git a/src/main/Extensions/ApplicationSearch/macOS/MacOsApplication.ts b/src/main/Extensions/ApplicationSearch/macOS/MacOsApplication.ts
index 060eac0d..f004d021 100644
--- a/src/main/Extensions/ApplicationSearch/macOS/MacOsApplication.ts
+++ b/src/main/Extensions/ApplicationSearch/macOS/MacOsApplication.ts
@@ -21,6 +21,7 @@ export class MacOsApplication implements Application {
                 key: "searchResultItemDescription",
                 namespace: "extension[ApplicationSearch]",
             },
+            details: this.filePath,
             id: this.getId(),
             name: this.name,
             image: this.image,
diff --git a/src/main/Extensions/BrowserBookmarks/BrowserBookmarks.ts b/src/main/Extensions/BrowserBookmarks/BrowserBookmarks.ts
index 5759beab..826faa52 100644
--- a/src/main/Extensions/BrowserBookmarks/BrowserBookmarks.ts
+++ b/src/main/Extensions/BrowserBookmarks/BrowserBookmarks.ts
@@ -60,9 +60,10 @@ export class BrowserBookmarks implements Extension {
             Windows: { copyUrlToClipboard: "Ctrl+C" },
         };
 
-        const toSearchResultItem = (browserBookmark: BrowserBookmark, browserName: Browser) => {
+        const toSearchResultItem = (browserBookmark: BrowserBookmark, browserName: Browser): SearchResultItem => {
             return {
                 description: t("searchResultItemDescription", { browserName }),
+                details: browserBookmark.getUrl(),
                 defaultAction: createOpenUrlSearchResultAction({
                     url: browserBookmark.getUrl(),
                 }),
diff --git a/src/main/Extensions/ColorConverter/ColorConversionResult.ts b/src/main/Extensions/ColorConverter/ColorConversionResult.ts
index 47175d3b..078e37e7 100644
--- a/src/main/Extensions/ColorConverter/ColorConversionResult.ts
+++ b/src/main/Extensions/ColorConverter/ColorConversionResult.ts
@@ -1,4 +1,5 @@
 export type ColorConversionResult = {
     format: string;
     value: string;
+    name: string;
 };
diff --git a/src/main/Extensions/ColorConverter/ColorConverterExtension.ts b/src/main/Extensions/ColorConverter/ColorConverterExtension.ts
index 3e20d387..f39a09c6 100644
--- a/src/main/Extensions/ColorConverter/ColorConverterExtension.ts
+++ b/src/main/Extensions/ColorConverter/ColorConverterExtension.ts
@@ -74,7 +74,7 @@ export class ColorConverterExtension implements Extension {
             after: this.colorConverter
                 .convertFromString(searchTerm)
                 .filter(({ format }) => this.getEnabledColorFormats().includes(format))
-                .map(({ format, value }) => {
+                .map(({ format, value, name: details }) => {
                     const hexColor = this.colorConverter.getRgbColor(value);
 
                     return {
@@ -87,6 +87,7 @@ export class ColorConverterExtension implements Extension {
                             },
                         }),
                         description: t("color", { format }),
+                        details,
                         id: `color-${value}-${format}`,
                         image: hexColor ? this.getColorImage(hexColor) : this.getImage(),
                         name: value,
diff --git a/src/main/Extensions/ColorConverter/QixColorConverter.ts b/src/main/Extensions/ColorConverter/QixColorConverter.ts
index 87ea0bd0..826c3344 100644
--- a/src/main/Extensions/ColorConverter/QixColorConverter.ts
+++ b/src/main/Extensions/ColorConverter/QixColorConverter.ts
@@ -6,11 +6,13 @@ export class QixColorConverter implements ColorConverter {
     public convertFromString(value: string): ColorConversionResult[] {
         const color = this.extractColorFromString(value);
 
+        const name = color?.keyword() ?? "";
+
         return color
             ? [
-                  { format: "HEX", value: color.hex() },
-                  { format: "HSL", value: color.hsl().string() },
-                  { format: "RGB", value: color.rgb().string() },
+                  { format: "HEX", value: color.hex(), name },
+                  { format: "HSL", value: color.hsl().string(), name },
+                  { format: "RGB", value: color.rgb().string(), name },
               ]
             : [];
     }
diff --git a/src/main/Extensions/CustomWebSearch/CustomWebSearchExtension.ts b/src/main/Extensions/CustomWebSearch/CustomWebSearchExtension.ts
index 0c30177f..150b4076 100644
--- a/src/main/Extensions/CustomWebSearch/CustomWebSearchExtension.ts
+++ b/src/main/Extensions/CustomWebSearch/CustomWebSearchExtension.ts
@@ -39,6 +39,7 @@ export class CustomWebSearchExtension implements Extension {
         return {
             name: engine.name,
             description: `Search in ${engine.name}`,
+            details: searchUrl,
             id: `${engine.name}:instantResult`,
             image: this.urlImageGenerator.getImage(new URL(searchUrl).origin),
             defaultAction: {
diff --git a/src/main/Extensions/FileSearch/FileSearch.ts b/src/main/Extensions/FileSearch/FileSearch.ts
index eee91277..fb3ab784 100644
--- a/src/main/Extensions/FileSearch/FileSearch.ts
+++ b/src/main/Extensions/FileSearch/FileSearch.ts
@@ -13,7 +13,7 @@ import {
 import { getExtensionSettingKey } from "@common/Core/Extension";
 import type { Image } from "@common/Core/Image";
 import type { App } from "electron";
-import { basename } from "path";
+import { basename, dirname } from "path";
 import type { FileSearcher } from "./FileSearcher";
 import type { Settings } from "./Settings";
 
@@ -121,6 +121,7 @@ export class FileSearch implements Extension {
                     description: `Open ${isDirectory ? "Folder" : "File"}`,
                 }),
                 description: isDirectory ? "Folder" : "File",
+                details: dirname(filePath),
                 id: `file-search-result:${Buffer.from(filePath).toString("base64")}`,
                 image: { url: filePathIconMap[filePath] },
                 name: basename(filePath),
diff --git a/src/main/Extensions/JetBrainsToolbox/JetBrainsToolboxExtension.ts b/src/main/Extensions/JetBrainsToolbox/JetBrainsToolboxExtension.ts
index 24717999..119f214b 100644
--- a/src/main/Extensions/JetBrainsToolbox/JetBrainsToolboxExtension.ts
+++ b/src/main/Extensions/JetBrainsToolbox/JetBrainsToolboxExtension.ts
@@ -176,6 +176,7 @@ export class JetBrainsToolboxExtension implements Extension {
             id: "jetbrains-toolbox-" + path,
             name: recent.name,
             description,
+            details: path,
             image: img,
             defaultAction: {
                 handlerId: "Commandline",
diff --git a/src/main/Extensions/SimpleFileSearch/SimpleFileSearchExtension.ts b/src/main/Extensions/SimpleFileSearch/SimpleFileSearchExtension.ts
index da5091b9..68abdeca 100644
--- a/src/main/Extensions/SimpleFileSearch/SimpleFileSearchExtension.ts
+++ b/src/main/Extensions/SimpleFileSearch/SimpleFileSearchExtension.ts
@@ -11,7 +11,7 @@ import type { FileImageGenerator } from "@Core/ImageGenerator";
 import type { Logger } from "@Core/Logger";
 import type { SettingsManager } from "@Core/SettingsManager";
 import type { Translator } from "@Core/Translator";
-import { basename } from "path";
+import { basename, dirname } from "path";
 
 export class SimpleFileSearchExtension implements Extension {
     public readonly id = "SimpleFileSearch";
@@ -71,6 +71,7 @@ export class SimpleFileSearchExtension implements Extension {
                     id: `simple-file-search-${filePath}`,
                     name: basename(filePath),
                     description: types[filePath] === "folder" ? t("folder") : t("file"),
+                    details: dirname(filePath),
                     image: images[filePath] ?? this.getDefaultIcon(),
                     defaultAction: createOpenFileAction({
                         filePath,
diff --git a/src/main/Extensions/SystemCommands/Linux/LinuxSystemCommand.ts b/src/main/Extensions/SystemCommands/Linux/LinuxSystemCommand.ts
index c1658e79..1b1383f6 100644
--- a/src/main/Extensions/SystemCommands/Linux/LinuxSystemCommand.ts
+++ b/src/main/Extensions/SystemCommands/Linux/LinuxSystemCommand.ts
@@ -6,20 +6,23 @@ export class LinuxSystemCommand implements SystemCommand {
     public static create({
         name,
         description,
+        details,
         image,
         invoke,
     }: {
         name: string;
         description: string;
+        details: string;
         image: Image;
         invoke: () => Promise<void>;
     }): LinuxSystemCommand {
-        return new LinuxSystemCommand(name, description, image, invoke);
+        return new LinuxSystemCommand(name, description, details, image, invoke);
     }
 
     private constructor(
         private readonly name: string,
         private readonly description: string,
+        private readonly details: string,
         private readonly image: Image,
         public readonly invoke: () => Promise<void>,
     ) {}
@@ -38,6 +41,7 @@ export class LinuxSystemCommand implements SystemCommand {
                 hideWindowAfterInvocation: true,
             },
             description: this.description,
+            details: this.details,
             id: this.getId(),
             image: this.image,
             name: this.name,
diff --git a/src/main/Extensions/SystemCommands/Linux/LinuxSystemCommandRepository.ts b/src/main/Extensions/SystemCommands/Linux/LinuxSystemCommandRepository.ts
index afd05dbe..7cf0d44e 100644
--- a/src/main/Extensions/SystemCommands/Linux/LinuxSystemCommandRepository.ts
+++ b/src/main/Extensions/SystemCommands/Linux/LinuxSystemCommandRepository.ts
@@ -21,6 +21,7 @@ export class LinuxSystemCommandRepository implements SystemCommandRepository {
         return [
             LinuxSystemCommand.create({
                 description: t("searchResultItemDescription"),
+                details: "rm -rf ~/.local/share/Trash/*",
                 image: this.getImage({ fileName: "trash.png" }),
                 invoke: async () => {
                     await this.commandlineUtility.executeCommand("rm -rf ~/.local/share/Trash/*");
diff --git a/src/main/Extensions/SystemCommands/Windows/WindowsSystemCommand.ts b/src/main/Extensions/SystemCommands/Windows/WindowsSystemCommand.ts
index 5ce82cb5..c8f8cbc7 100644
--- a/src/main/Extensions/SystemCommands/Windows/WindowsSystemCommand.ts
+++ b/src/main/Extensions/SystemCommands/Windows/WindowsSystemCommand.ts
@@ -6,22 +6,25 @@ export class WindowsSystemCommand implements SystemCommand {
     public static create({
         name,
         description,
+        details,
         image,
         invoke,
         requiresConfirmation,
     }: {
         name: string;
         description: string;
+        details: string;
         image: Image;
         invoke: () => Promise<void>;
         requiresConfirmation?: boolean;
     }): WindowsSystemCommand {
-        return new WindowsSystemCommand(name, description, image, invoke, requiresConfirmation);
+        return new WindowsSystemCommand(name, description, details, image, invoke, requiresConfirmation);
     }
 
     private constructor(
         private readonly name: string,
         private readonly description: string,
+        private readonly details: string,
         private readonly image: Image,
         public readonly invoke: () => Promise<void>,
         private readonly requiresConfirmation?: boolean,
@@ -41,6 +44,7 @@ export class WindowsSystemCommand implements SystemCommand {
                 hideWindowAfterInvocation: true,
             },
             description: this.description,
+            details: this.details,
             id: this.getId(),
             image: this.image,
             name: this.name,
diff --git a/src/main/Extensions/SystemCommands/Windows/WindowsSystemCommandRepository.ts b/src/main/Extensions/SystemCommands/Windows/WindowsSystemCommandRepository.ts
index 0456e0c2..ba2deac4 100644
--- a/src/main/Extensions/SystemCommands/Windows/WindowsSystemCommandRepository.ts
+++ b/src/main/Extensions/SystemCommands/Windows/WindowsSystemCommandRepository.ts
@@ -25,6 +25,7 @@ export class WindowsSystemCommandRepository implements SystemCommandRepository {
             WindowsSystemCommand.create({
                 name: t("shutdown"),
                 description: t("searchResultItemDescription"),
+                details: "shutdown -s -t 0",
                 image: this.getImage({ fileName: "windows-11-system-command.png" }),
                 invoke: async () => {
                     await this.commandlineUtility.executeCommand("shutdown -s -t 0");
@@ -34,6 +35,7 @@ export class WindowsSystemCommandRepository implements SystemCommandRepository {
             WindowsSystemCommand.create({
                 name: t("restart"),
                 description: t("searchResultItemDescription"),
+                details: "shutdown -r -t 0",
                 image: this.getImage({ fileName: "windows-11-system-command.png" }),
                 invoke: async () => {
                     await this.commandlineUtility.executeCommand("shutdown -r -t 0");
@@ -43,6 +45,7 @@ export class WindowsSystemCommandRepository implements SystemCommandRepository {
             WindowsSystemCommand.create({
                 name: t("signOut"),
                 description: t("searchResultItemDescription"),
+                details: "shutdown /l",
                 image: this.getImage({ fileName: "windows-11-system-command.png" }),
                 invoke: async () => {
                     await this.commandlineUtility.executeCommand("shutdown /l");
@@ -52,6 +55,7 @@ export class WindowsSystemCommandRepository implements SystemCommandRepository {
             WindowsSystemCommand.create({
                 name: t("lock"),
                 description: t("searchResultItemDescription"),
+                details: "rundll32 user32.dll,LockWorkStation",
                 image: this.getImage({ fileName: "windows-11-system-command.png" }),
                 invoke: async () => {
                     await this.commandlineUtility.executeCommand("rundll32 user32.dll,LockWorkStation");
@@ -61,6 +65,7 @@ export class WindowsSystemCommandRepository implements SystemCommandRepository {
             WindowsSystemCommand.create({
                 name: t("sleep"),
                 description: t("searchResultItemDescription"),
+                details: "Custom Powershell Script",
                 image: this.getImage({ fileName: "windows-11-system-command.png" }),
                 invoke: async () => {
                     await this.commandlineUtility.executeCommand(
@@ -72,6 +77,7 @@ export class WindowsSystemCommandRepository implements SystemCommandRepository {
             WindowsSystemCommand.create({
                 name: t("hibernate"),
                 description: t("searchResultItemDescription"),
+                details: "shutdown /h",
                 image: this.getImage({ fileName: "windows-11-system-command.png" }),
                 invoke: async () => {
                     await this.commandlineUtility.executeCommand("shutdown /h");
@@ -81,6 +87,7 @@ export class WindowsSystemCommandRepository implements SystemCommandRepository {
             WindowsSystemCommand.create({
                 name: t("emptyTrash"),
                 description: t("searchResultItemDescription"),
+                details: "Powershell: Clear-RecycleBin -Force",
                 image: this.getImage({ fileName: "windows-11-system-command.png" }),
                 invoke: async () => {
                     await this.powershellUtility.executeCommand("Clear-RecycleBin -Force");
diff --git a/src/main/Extensions/SystemCommands/macOS/MacOsSystemCommand.ts b/src/main/Extensions/SystemCommands/macOS/MacOsSystemCommand.ts
index 5c61095c..953cf0c6 100644
--- a/src/main/Extensions/SystemCommands/macOS/MacOsSystemCommand.ts
+++ b/src/main/Extensions/SystemCommands/macOS/MacOsSystemCommand.ts
@@ -6,22 +6,25 @@ export class MacOsSystemCommand implements SystemCommand {
     public static create({
         name,
         description,
+        details,
         image,
         invoke,
         requiresConfirmation,
     }: {
         name: string;
         description: string;
+        details: string;
         image: Image;
         invoke: () => Promise<void>;
         requiresConfirmation?: boolean;
     }): MacOsSystemCommand {
-        return new MacOsSystemCommand(name, description, image, invoke, requiresConfirmation);
+        return new MacOsSystemCommand(name, description, details, image, invoke, requiresConfirmation);
     }
 
     private constructor(
         private readonly name: string,
         private readonly description: string,
+        private readonly details: string,
         private readonly image: Image,
         public readonly invoke: () => Promise<void>,
         private readonly requiresConfirmation?: boolean,
@@ -41,6 +44,7 @@ export class MacOsSystemCommand implements SystemCommand {
                 hideWindowAfterInvocation: true,
             },
             description: this.description,
+            details: this.details,
             id: this.getId(),
             image: this.image,
             name: this.name,
diff --git a/src/main/Extensions/SystemCommands/macOS/MacOsSystemCommandRepository.ts b/src/main/Extensions/SystemCommands/macOS/MacOsSystemCommandRepository.ts
index c12cb35e..a2cbd9a6 100644
--- a/src/main/Extensions/SystemCommands/macOS/MacOsSystemCommandRepository.ts
+++ b/src/main/Extensions/SystemCommands/macOS/MacOsSystemCommandRepository.ts
@@ -23,6 +23,7 @@ export class MacOsSystemCommandRepository implements SystemCommandRepository {
             MacOsSystemCommand.create({
                 name: t("shutdown"),
                 description: t("searchResultItemDescription"),
+                details: 'tell app "System Events" to shut down',
                 image: this.getImage({
                     fileName: "macos-system-command.png",
                     fileNameOnDarkBackground: "macos-shutdown-on-dark.png",
@@ -36,6 +37,7 @@ export class MacOsSystemCommandRepository implements SystemCommandRepository {
             MacOsSystemCommand.create({
                 name: t("restart"),
                 description: t("searchResultItemDescription"),
+                details: 'tell app "System Events" to restart',
                 image: this.getImage({
                     fileName: "macos-system-command.png",
                     fileNameOnDarkBackground: "macos-restart-on-dark.png",
@@ -49,6 +51,7 @@ export class MacOsSystemCommandRepository implements SystemCommandRepository {
             MacOsSystemCommand.create({
                 name: t("logOut"),
                 description: t("searchResultItemDescription"),
+                details: 'tell application "System Events" to log out',
                 image: this.getImage({
                     fileName: "macos-system-command.png",
                     fileNameOnDarkBackground: "macos-logout-on-dark.png",
@@ -62,6 +65,7 @@ export class MacOsSystemCommandRepository implements SystemCommandRepository {
             MacOsSystemCommand.create({
                 name: t("sleep"),
                 description: t("searchResultItemDescription"),
+                details: 'tell application "System Events" to sleep',
                 image: this.getImage({
                     fileName: "macos-system-command.png",
                     fileNameOnDarkBackground: "macos-sleep-on-dark.png",
@@ -75,6 +79,7 @@ export class MacOsSystemCommandRepository implements SystemCommandRepository {
             MacOsSystemCommand.create({
                 name: t("lock"),
                 description: t("searchResultItemDescription"),
+                details: 'tell application "System Events" to keystroke "q" using {control down, command down}',
                 image: this.getImage({
                     fileName: "macos-system-command.png",
                     fileNameOnDarkBackground: "macos-lock-on-dark.png",
@@ -90,6 +95,7 @@ export class MacOsSystemCommandRepository implements SystemCommandRepository {
             MacOsSystemCommand.create({
                 name: t("emptyTrash"),
                 description: t("searchResultItemDescription"),
+                details: 'tell application "Finder" to if ((count of items in trash) > 0) then empty trash',
                 image: this.getImage({
                     fileName: "macos-system-command.png",
                     fileNameOnDarkBackground: "macos-lock-on-dark.png",
diff --git a/src/main/Extensions/SystemSettings/MacOsSystemSetting.ts b/src/main/Extensions/SystemSettings/MacOsSystemSetting.ts
index 87b2bdaf..8abfd156 100644
--- a/src/main/Extensions/SystemSettings/MacOsSystemSetting.ts
+++ b/src/main/Extensions/SystemSettings/MacOsSystemSetting.ts
@@ -17,6 +17,7 @@ export class MacOsSystemSetting implements SystemSetting {
                 filePath: this.filePath,
                 description: "Open System Setting",
             }),
+            details: this.filePath,
             image: { url: this.getImageUrl() },
         };
     }
diff --git a/src/main/Extensions/SystemSettings/WindowsSystemSetting.ts b/src/main/Extensions/SystemSettings/WindowsSystemSetting.ts
index ffce1b3a..a65a1e67 100644
--- a/src/main/Extensions/SystemSettings/WindowsSystemSetting.ts
+++ b/src/main/Extensions/SystemSettings/WindowsSystemSetting.ts
@@ -18,6 +18,7 @@ export class WindowsSystemSetting implements SystemSetting {
                 fluentIcon: "OpenRegular",
             },
             description: "System Setting",
+            details: this.settingsUrl,
             id: this.getId(),
             image: {
                 url: `file://${this.imageFilePath}`,
diff --git a/src/main/Extensions/VSCode/VSCodeExtension.ts b/src/main/Extensions/VSCode/VSCodeExtension.ts
index 440b97b0..234a16e3 100644
--- a/src/main/Extensions/VSCode/VSCodeExtension.ts
+++ b/src/main/Extensions/VSCode/VSCodeExtension.ts
@@ -269,6 +269,7 @@ export class VSCodeExtension implements Extension {
             id: `vscode-${recent.fileType}-${recent.uri}`,
             name: (recent.label ?? Path.basename(recent.path)) + (showPath ? ` (${recent.path})` : ""),
             description: recent.fileType,
+            details: recent.path,
             image: recent.img,
             defaultAction: {
                 handlerId: "Commandline",
diff --git a/src/main/Extensions/WebSearch/WebSearchExtension.ts b/src/main/Extensions/WebSearch/WebSearchExtension.ts
index 11e8ce3d..9cfb6e10 100644
--- a/src/main/Extensions/WebSearch/WebSearchExtension.ts
+++ b/src/main/Extensions/WebSearch/WebSearchExtension.ts
@@ -151,11 +151,12 @@ export class WebSearchExtension implements Extension {
         locale: string,
         webSearchEngine: WebSearchEngine,
     ): SearchResultItem {
+        const searchUrl = webSearchEngine.getSearchUrl(searchTerm, locale);
+
         return {
-            defaultAction: createOpenUrlSearchResultAction({
-                url: webSearchEngine.getSearchUrl(searchTerm, locale),
-            }),
+            defaultAction: createOpenUrlSearchResultAction({ url: searchUrl }),
             description: webSearchEngine.getName(),
+            details: searchUrl,
             id: `search-${webSearchEngine.getName()}`,
             name: `Search "${searchTerm}"`,
             image: { url: this.getSearchResultImageUrl(webSearchEngine) },
diff --git a/src/main/Extensions/Workflow/WorkflowExtension.ts b/src/main/Extensions/Workflow/WorkflowExtension.ts
index 42a352e7..42dddc33 100644
--- a/src/main/Extensions/Workflow/WorkflowExtension.ts
+++ b/src/main/Extensions/Workflow/WorkflowExtension.ts
@@ -50,6 +50,7 @@ export class WorkflowExtension implements Extension {
                     hideWindowAfterInvocation: true,
                 },
                 description: t("searchResultItemDescription"),
+                details: workflow.actions.map((action) => action.name).join(", "),
                 id: workflow.id,
                 image: this.getImage(),
                 name: workflow.name,
diff --git a/src/renderer/Core/I18n/getCoreResources.ts b/src/renderer/Core/I18n/getCoreResources.ts
index 44f849fa..26262c2d 100644
--- a/src/renderer/Core/I18n/getCoreResources.ts
+++ b/src/renderer/Core/I18n/getCoreResources.ts
@@ -119,6 +119,9 @@ export const getCoreResources = (): { namespace: string; resources: Resources<Tr
                     "searchBarAppearance.underline": "Underline",
                     "searchBarAppearance.filled-darker": "Filled darker",
                     "searchBarAppearance.filled-lighter": "Filled lighter",
+                    searchResultListLayout: "Search result list layout",
+                    "searchResultListLayout.compact": "Compact",
+                    "searchResultListLayout.detailed": "Detailed",
                     searchBarPlaceholderText: "Placeholder text",
                     searchBarPlaceholderTextReset: "Reset",
                     searchBarShowIcon: "Show search icon",
@@ -141,6 +144,9 @@ export const getCoreResources = (): { namespace: string; resources: Resources<Tr
                     "searchBarAppearance.underline": "Unterstrichen",
                     "searchBarAppearance.filled-darker": "Gefüllt dunkler",
                     "searchBarAppearance.filled-lighter": "Gefüllt heller",
+                    searchResultListLayout: "Suchresultatliste-Layout",
+                    "searchResultListLayout.compact": "Kompakt",
+                    "searchResultListLayout.detailed": "Detailliert",
                     searchBarPlaceholderText: "Platzhaltertext",
                     searchBarPlaceholderTextReset: "Zurücksetzen",
                     searchBarShowIcon: "Suchsymbol anzeigen",
diff --git a/src/renderer/Core/Search/DetailedSearchResultItem.tsx b/src/renderer/Core/Search/DetailedSearchResultItem.tsx
index 5229ff41..7f1ded5e 100644
--- a/src/renderer/Core/Search/DetailedSearchResultItem.tsx
+++ b/src/renderer/Core/Search/DetailedSearchResultItem.tsx
@@ -27,7 +27,14 @@ export const DetailedSearchResultListItem = ({ searchResultItem }: DetailedSearc
             <div style={{ flexShrink: 0, marginLeft: 2 }}>
                 <SearchResultItemImage image={searchResultItem.image} altText={searchResultItem.name} size={24} />
             </div>
-            <div style={{ display: "flex", flexDirection: "column", flexGrow: 1, overflow: "hidden" }}>
+            <div
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    flexGrow: 1,
+                    overflow: "hidden",
+                }}
+            >
                 <Text
                     weight="semibold"
                     style={{
@@ -38,16 +45,18 @@ export const DetailedSearchResultListItem = ({ searchResultItem }: DetailedSearc
                 >
                     {searchResultItem.name}
                 </Text>
-                <Text
-                    size={200}
-                    style={{
-                        whiteSpace: "nowrap",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                    }}
-                >
-                    Here go the details of the search resul item
-                </Text>
+                {searchResultItem.details && (
+                    <Text
+                        size={200}
+                        style={{
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                        }}
+                    >
+                        {searchResultItem.details}
+                    </Text>
+                )}
             </div>
             <div style={{ flexShrink: 0, display: "flex" }}>
                 <Badge color="subtle" size="small">
diff --git a/src/renderer/Core/Search/Search.tsx b/src/renderer/Core/Search/Search.tsx
index be1bea11..b685e708 100644
--- a/src/renderer/Core/Search/Search.tsx
+++ b/src/renderer/Core/Search/Search.tsx
@@ -18,6 +18,7 @@ import type { SearchBarSize } from "./SearchBarSize";
 import { SearchHistory } from "./SearchHistory";
 import { useSearchHistoryController } from "./SearchHistoryController";
 import { SearchResultList } from "./SearchResultList";
+import type { SearchResultListLayout } from "./SearchResultListLayout";
 import { useSearchViewController } from "./SearchViewController";
 
 type SearchProps = {
@@ -279,6 +280,11 @@ export const Search = ({
         defaultValue: true,
     });
 
+    const { value: layout } = useSetting<SearchResultListLayout>({
+        key: "appearance.searchResultListLayout",
+        defaultValue: "compact",
+    });
+
     const { status: rescanStatus } = useRescanStatus();
 
     return (
@@ -354,7 +360,7 @@ export const Search = ({
                                         searchTerm={searchTerm.value}
                                         onSearchResultItemClick={handleSearchResultItemClickEvent}
                                         onSearchResultItemDoubleClick={handleSearchResultItemDoubleClickEvent}
-                                        layout="compact"
+                                        layout={layout}
                                     />
                                 </div>
                             ))}
diff --git a/src/renderer/Core/Settings/Pages/Appearance/Appearance.tsx b/src/renderer/Core/Settings/Pages/Appearance/Appearance.tsx
index cd197fc6..9fae150d 100644
--- a/src/renderer/Core/Settings/Pages/Appearance/Appearance.tsx
+++ b/src/renderer/Core/Settings/Pages/Appearance/Appearance.tsx
@@ -7,6 +7,7 @@ import { SettingGroup } from "../../SettingGroup";
 import { SettingGroupList } from "../../SettingGroupList";
 import { ThemeOption } from "../ThemeOption";
 import { SearchBarSettings } from "./SearchBarSettings";
+import { SearchResultListSettings } from "./SearchResultListSettings";
 
 export const Appearance = () => {
     const { t } = useTranslation("settingsAppearance");
@@ -28,6 +29,7 @@ export const Appearance = () => {
     return (
         <SettingGroupList>
             <SearchBarSettings />
+            <SearchResultListSettings />
             <SettingGroup title="Colors">
                 <Setting
                     label={t("themeName")}
diff --git a/src/renderer/Core/Settings/Pages/Appearance/SearchResultListSettings.tsx b/src/renderer/Core/Settings/Pages/Appearance/SearchResultListSettings.tsx
new file mode 100644
index 00000000..184c5c73
--- /dev/null
+++ b/src/renderer/Core/Settings/Pages/Appearance/SearchResultListSettings.tsx
@@ -0,0 +1,44 @@
+import { useSetting } from "@Core/Hooks";
+import { Setting } from "@Core/Settings/Setting";
+import { SettingGroup } from "@Core/Settings/SettingGroup";
+import { Dropdown, Option } from "@fluentui/react-components";
+import { useTranslation } from "react-i18next";
+
+export const SearchResultListSettings = () => {
+    const { t } = useTranslation("settingsAppearance");
+
+    const options: Record<string, string> = {
+        compact: t("searchResultListLayout.compact"),
+        detailed: t("searchResultListLayout.detailed"),
+    };
+
+    const { value: layout, updateValue: setLayout } = useSetting({
+        key: "appearance.searchResultListLayout",
+        defaultValue: "compact",
+    });
+
+    return (
+        <SettingGroup title="Search Result List">
+            <Setting
+                label="Layout"
+                control={
+                    <Dropdown
+                        value={options[layout]}
+                        selectedOptions={[layout]}
+                        onOptionSelect={(_, { optionValue }) => {
+                            if (optionValue) {
+                                setLayout(optionValue);
+                            }
+                        }}
+                    >
+                        {Object.keys(options).map((key) => (
+                            <Option key={key} value={key}>
+                                {options[key]}
+                            </Option>
+                        ))}
+                    </Dropdown>
+                }
+            />
+        </SettingGroup>
+    );
+};
diff --git a/src/renderer/Extensions/FileSearch/FileSearch.tsx b/src/renderer/Extensions/FileSearch/FileSearch.tsx
index 707bd45e..bc621d39 100644
--- a/src/renderer/Extensions/FileSearch/FileSearch.tsx
+++ b/src/renderer/Extensions/FileSearch/FileSearch.tsx
@@ -27,5 +27,7 @@ export const FileSearch = ({ contextBridge, goBack }: ExtensionProps) => {
         );
     }
 
-    return <BasicSearch getSearchResultItems={getSearchResultItems} showGoBackButton />;
+    return (
+        <BasicSearch getSearchResultItems={getSearchResultItems} showGoBackButton searchResultListLayout="detailed" />
+    );
 };


Test patch:
diff --git a/src/main/Extensions/ColorConverter/QixColorConverter.test.ts b/src/main/Extensions/ColorConverter/QixColorConverter.test.ts
index 9369738b..9889ddec 100644
--- a/src/main/Extensions/ColorConverter/QixColorConverter.test.ts
+++ b/src/main/Extensions/ColorConverter/QixColorConverter.test.ts
@@ -21,29 +21,29 @@ describe(QixColorConverter, () => {
 
         it("should be able to parse hex colors", () => {
             expect(new QixColorConverter().convertFromString("#fff")).toEqual(<ColorConversionResult[]>[
-                { format: "HEX", value: "#FFFFFF" },
-                { format: "HSL", value: "hsl(0, 0%, 100%)" },
-                { format: "RGB", value: "rgb(255, 255, 255)" },
+                { format: "HEX", value: "#FFFFFF", name: "white" },
+                { format: "HSL", value: "hsl(0, 0%, 100%)", name: "white" },
+                { format: "RGB", value: "rgb(255, 255, 255)", name: "white" },
             ]);
 
             expect(new QixColorConverter().convertFromString("#ffffff")).toEqual(<ColorConversionResult[]>[
-                { format: "HEX", value: "#FFFFFF" },
-                { format: "HSL", value: "hsl(0, 0%, 100%)" },
-                { format: "RGB", value: "rgb(255, 255, 255)" },
+                { format: "HEX", value: "#FFFFFF", name: "white" },
+                { format: "HSL", value: "hsl(0, 0%, 100%)", name: "white" },
+                { format: "RGB", value: "rgb(255, 255, 255)", name: "white" },
             ]);
         });
 
         it("should be able to parse rgb colors", () => {
             expect(new QixColorConverter().convertFromString("rgb(255,255,255)")).toEqual(<ColorConversionResult[]>[
-                { format: "HEX", value: "#FFFFFF" },
-                { format: "HSL", value: "hsl(0, 0%, 100%)" },
-                { format: "RGB", value: "rgb(255, 255, 255)" },
+                { format: "HEX", value: "#FFFFFF", name: "white" },
+                { format: "HSL", value: "hsl(0, 0%, 100%)", name: "white" },
+                { format: "RGB", value: "rgb(255, 255, 255)", name: "white" },
             ]);
 
             expect(new QixColorConverter().convertFromString("rgba(255,255,255,1)")).toEqual(<ColorConversionResult[]>[
-                { format: "HEX", value: "#FFFFFF" },
-                { format: "HSL", value: "hsl(0, 0%, 100%)" },
-                { format: "RGB", value: "rgb(255, 255, 255)" },
+                { format: "HEX", value: "#FFFFFF", name: "white" },
+                { format: "HSL", value: "hsl(0, 0%, 100%)", name: "white" },
+                { format: "RGB", value: "rgb(255, 255, 255)", name: "white" },
             ]);
         });
     });
diff --git a/src/main/Extensions/WebSearch/WebSearchExtension.test.ts b/src/main/Extensions/WebSearch/WebSearchExtension.test.ts
index 6e2b6ef2..f198e455 100644
--- a/src/main/Extensions/WebSearch/WebSearchExtension.test.ts
+++ b/src/main/Extensions/WebSearch/WebSearchExtension.test.ts
@@ -87,6 +87,7 @@ describe(WebSearchExtension, () => {
                 <SearchResultItem>{
                     defaultAction: createOpenUrlSearchResultAction({ url: "mySearchUrl" }),
                     description: "searchEngine1",
+                    details: "mySearchUrl",
                     id: "search-searchEngine1",
                     image: { url: "file://myAssetFilePath" },
                     name: `Search "my search term"`,
@@ -229,6 +230,7 @@ describe(WebSearchExtension, () => {
                     url: "search-url-mySearchTerm-de-CH",
                 }),
                 description: "MyEngine",
+                details: "search-url-mySearchTerm-de-CH",
                 id: `search-MyEngine`,
                 name: `Search "mySearchTerm"`,
                 image: { url: "file://assets/asset.png" },