windmill-components 1.623.1 → 1.623.2

package/package/components/jobs/JobPreview.svelte

@@ -13,8 +13,9 @@ import { Badge } from '../common';
 import { forLater } from '../../forLater';
 import DurationMs from '../DurationMs.svelte';
 import { workspaceStore } from '../../stores';
+import { twMerge } from 'tailwind-merge';
 const POPUP_HEIGHT = 320;
-let { id, children } = $props();
+let { id, children, class: clazz } = $props();
 let job = $state(undefined);
 let hovered = $state(false);
 let timeout;
@@ -83,11 +84,51 @@ onDestroy(() => {
 	{#if open}
 		<div
 			transition:fade|local={{ duration: 50 }}
-			class="absolute z-50 {popupOnTop ? 'bottom-[35px]' : 'top-[35px]'} -left-10 bg-surface rounded
-			border shadow-xl flex justify-start items-start w-[600px] h-80
-			overflow-hidden"
+			class={twMerge(
+				'absolute z-50  -left-10 bg-surface rounded border shadow-md flex flex-col gap-4 items-start w-[600px] h-80 overflow-hidden',
+				popupOnTop ? 'bottom-[35px]' : 'top-[35px]',
+				clazz
+			)}
 		>
-			<div class="absolute bottom-0 right-1 flex justify-end gap-2 pb-0.5 z-50 bg-surface-primary">
+			<div class="w-full flex flex-row grow min-h-0 gap-2">
+				<div class="w-1/2 h-full overflow-auto space-y-1">
+					<span class="text-xs font-normal text-secondary">Arguments</span>
+					<JobArgs
+						id={job?.id}
+						workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
+						args={job?.args}
+					/>
+				</div>
+				<div class="w-1/2 h-full overflow-auto space-y-1">
+					{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
+						<div class="text-xs font-semibold text-emphasis mb-1">
+							<div>Job is scheduled for</div>
+							<div>{new Date(job?.['scheduled_for']).toLocaleString()}</div>
+						</div>
+					{/if}
+					{#if job?.type === 'CompletedJob'}
+						<span class="text-xs font-normal text-secondary mb-1">Result</span>
+						<DisplayResult
+							workspaceId={job?.workspace_id}
+							jobId={job?.id}
+							{result}
+							disableExpand
+							language={job?.language}
+						/>
+					{:else if job && `running` in job ? job.running : false}
+						<div class="text-sm font-semibold text-primary mb-1"> Job is still running </div>
+						<LogViewer
+							jobId={job?.id}
+							duration={job?.['duration_ms']}
+							mem={job?.['mem_peak']}
+							content={job?.logs}
+							isLoading={job?.['running'] == false}
+							tag={job?.tag}
+						/>
+					{/if}
+				</div>
+			</div>
+			<div class="flex justify-end gap-2 pb-0.5 z-50 bg-surface-primary">
 				{#if job?.started_at}
 					<Badge>{new Date(job?.['started_at']).toLocaleString()}</Badge>
 				{/if}
@@ -107,40 +148,6 @@ onDestroy(() => {
 					{/each}
 				{/if}
 			</div>
-			<div class="w-1/2 h-full overflow-auto">
-				<JobArgs
-					id={job?.id}
-					workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
-					args={job?.args}
-				/>
-			</div>
-			<div class="w-1/2 h-full overflow-auto p-2">
-				{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
-					<div class="text-xs font-semibold text-emphasis mb-1">
-						<div>Job is scheduled for</div>
-						<div>{new Date(job?.['scheduled_for']).toLocaleString()}</div>
-					</div>
-				{/if}
-				{#if job?.type === 'CompletedJob'}
-					<DisplayResult
-						workspaceId={job?.workspace_id}
-						jobId={job?.id}
-						{result}
-						disableExpand
-						language={job?.language}
-					/>
-				{:else if job && `running` in job ? job.running : false}
-					<div class="text-sm font-semibold text-primary mb-1"> Job is still running </div>
-					<LogViewer
-						jobId={job?.id}
-						duration={job?.['duration_ms']}
-						mem={job?.['mem_peak']}
-						content={job?.logs}
-						isLoading={job?.['running'] == false}
-						tag={job?.tag}
-					/>
-				{/if}
-			</div>
 		</div>
 	{/if}
 </div>

package/package/components/jobs/JobPreview.svelte.d.ts

@@ -2,6 +2,7 @@ export declare const openStore: import("svelte/store").Writable<string>;
 interface Props {
     id: string;
     children?: import('svelte').Snippet<[any]>;
+    class?: string;
 }
 declare const JobPreview: import("svelte").Component<Props, {}, "">;
 type JobPreview = ReturnType<typeof JobPreview>;

package/package/components/monacoLanguagesOptions.js

@@ -1,17 +1,18 @@
-import { languages } from 'monaco-editor';
 import processStdContent from '../process.d.ts.txt?raw';
+import { jsonDefaults } from '@codingame/monaco-vscode-standalone-json-language-features';
+import { javascriptDefaults, JsxEmit, ModuleResolutionKind, ScriptTarget, typescriptDefaults } from '@codingame/monaco-vscode-standalone-typescript-language-features';
 let jsonInitialized = false;
 export function setMonacoJsonOptions() {
     if (jsonInitialized)
         return;
     jsonInitialized = true;
-    languages.json.jsonDefaults.setDiagnosticsOptions({
+    jsonDefaults.setDiagnosticsOptions({
         validate: true,
         allowComments: false,
         schemas: [],
         enableSchemaRequest: true
     });
-    languages.json.jsonDefaults.setModeConfiguration({
+    jsonDefaults.setModeConfiguration({
         documentRangeFormattingEdits: false,
         documentFormattingEdits: true,
         hovers: true,
@@ -29,8 +30,8 @@ export function setMonacoTypescriptOptions() {
     if (typescriptInitialized)
         return;
     typescriptInitialized = true;
-    languages.typescript.typescriptDefaults.addExtraLib(processStdContent, 'process.d.ts');
-    languages.typescript.typescriptDefaults.setModeConfiguration({
+    typescriptDefaults.addExtraLib(processStdContent, 'process.d.ts');
+    typescriptDefaults.setModeConfiguration({
         completionItems: true,
         hovers: true,
         documentSymbols: true,
@@ -46,21 +47,21 @@ export function setMonacoTypescriptOptions() {
         inlayHints: true
     });
     // languages.typescript.javascriptDefaults.setEagerModelSync(true)
-    languages.typescript.typescriptDefaults.setEagerModelSync(true);
+    typescriptDefaults.setEagerModelSync(true);
     // languages.typescript.javascriptDefaults.setDiagnosticsOptions({
     // 	noSemanticValidation: false,
     // 	noSyntaxValidation: false,
     // 	noSuggestionDiagnostics: false,
     // 	diagnosticCodesToIgnore: [1108]
     // })
-    languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    typescriptDefaults.setDiagnosticsOptions({
         noSemanticValidation: false,
         noSyntaxValidation: false,
         noSuggestionDiagnostics: false,
         diagnosticCodesToIgnore: [1108, 7006, 7034, 7019, 7005]
     });
-    languages.typescript.typescriptDefaults.setCompilerOptions({
-        target: languages.typescript.ScriptTarget.Latest,
+    typescriptDefaults.setCompilerOptions({
+        target: ScriptTarget.Latest,
         allowNonTsExtensions: true,
         noSemanticValidation: false,
         noSyntaxValidation: false,
@@ -84,8 +85,8 @@ export function setMonacoTypescriptOptions() {
         noLib: false,
         allowImportingTsExtensions: true,
         allowSyntheticDefaultImports: true,
-        moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs,
-        jsx: languages.typescript.JsxEmit.React
+        moduleResolution: ModuleResolutionKind.NodeJs,
+        jsx: JsxEmit.React
     });
 }
 let javascriptInitialized = false;
@@ -93,14 +94,14 @@ export function setMonacoJavascriptOptions() {
     if (javascriptInitialized)
         return;
     javascriptInitialized = true;
-    languages.typescript.javascriptDefaults.setCompilerOptions({
-        target: languages.typescript.ScriptTarget.Latest,
+    javascriptDefaults.setCompilerOptions({
+        target: ScriptTarget.Latest,
         allowNonTsExtensions: true,
         noSemanticValidation: false,
         noLib: true,
-        moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
+        moduleResolution: ModuleResolutionKind.NodeJs
     });
-    languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+    javascriptDefaults.setDiagnosticsOptions({
         noSemanticValidation: false,
         noSyntaxValidation: false,
         noSuggestionDiagnostics: false,

package/package/components/propertyPicker/PropPicker.svelte

@@ -13,6 +13,8 @@ export let error = false;
 export let allowCopy = false;
 export let previousId = undefined;
 export let flow_env = undefined;
+export let result = undefined;
+export let extraResults = undefined;
 let variables = {};
 let resources = {};
 let displayVariable = false;
@@ -45,7 +47,9 @@ function onSearch(search) {
                 ? pickableProperties.priorIds
                 : keepByKey(pickableProperties.priorIds, search);
         flowEnvFiltered =
-            search === EMPTY_STRING ? pickableProperties.flow_env : keepByKey(pickableProperties.flow_env, search);
+            search === EMPTY_STRING
+                ? pickableProperties.flow_env
+                : keepByKey(pickableProperties.flow_env, search);
     }, 50);
 }
 $: suggestedPropsFiltered =
@@ -176,7 +180,7 @@ async function updateState() {
     await filterPickableProperties();
     await updateCollapsable();
 }
-$: search, $inputMatches, $propPickerConfig, pickableProperties, updateState();
+$: (search, $inputMatches, $propPickerConfig, pickableProperties, updateState());
 onDestroy(() => {
     clearTimeout(timeout);
 });
@@ -204,6 +208,16 @@ const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 				<Badge small>filter: {filteringFlowInputsOrResult}</Badge>
 			</div>
 		{/if}
+		{#if result != undefined}
+			<span class={categoryTitleClasses}>Step Result</span>
+			<div class={categoryContentClasses}>
+				<ObjectViewer
+					{allowCopy}
+					json={{ result, ...(extraResults ? extraResults : {}) }}
+					on:select
+				/>
+			</div>
+		{/if}
 		{#if flowInputsFiltered && (Object.keys(flowInputsFiltered ?? {}).length > 0 || !filterActive)}
 			<span class={categoryTitleClasses}>Flow Input</span>
 			<div class={categoryContentClasses}>

package/package/components/propertyPicker/PropPicker.svelte.d.ts

@@ -19,6 +19,8 @@ declare const PropPicker: $$__sveltets_2_IsomorphicComponent<{
     allowCopy?: boolean;
     previousId?: string | undefined;
     flow_env?: Record<string, any> | undefined;
+    result?: any | undefined;
+    extraResults?: any;
 }, {
     select: any;
 } & {

package/package/components/raw_apps/DefaultDatabaseSelector.svelte

@@ -3,6 +3,7 @@ import Popover from '../meltComponents/Popover.svelte';
 import Select from '../select/Select.svelte';
 import { workspaceStore } from '../../stores';
 import { createDatatablesResource, createSchemasResource, toDatatableItems, toSchemaItems } from './datatableUtils.svelte';
+import { Button } from '../common';
 let { datatable, schema, onChange, description = 'Set the default datatable and schema for new tables. This is where AI will create new tables when needed.' } = $props();
 // Load available datatables and schemas using shared utilities
 const datatables = createDatatablesResource(() => $workspaceStore);
@@ -22,15 +23,18 @@ $effect(() => {
 
 <Popover>
 	<svelte:fragment slot="trigger">
-		<button
-			class="pt-1.5 pb-0.5 px-1 hover:bg-surface-hover rounded transition-colors"
+		<Button
 			title="Configure default datatable & schema"
+			unifiedSize="xs"
+			variant="subtle"
+			nonCaptureEvent
+			btnClasses="px-1"
 		>
-			<Settings size={12} class="text-tertiary" />
-		</button>
+			<Settings size={12} />
+		</Button>
 	</svelte:fragment>
 	<svelte:fragment slot="content">
-		<div class="flex flex-col gap-3 p-2 min-w-64 max-w-80">
+		<div class="flex flex-col gap-3 p-4 min-w-64 max-w-80">
 			<div class="text-xs font-medium text-primary">Default Datatable & Schema</div>
 
 			<p class="text-2xs text-tertiary leading-relaxed">

package/package/components/raw_apps/FileEditorIcon.svelte

@@ -1,24 +1,29 @@
+<script lang="ts" module>export const SUPPORTED_EXTENSIONS = ['tsx', 'json', 'ts', 'js', 'vue', 'css', 'svelte'];
+</script>
+
 <script lang="ts">import TypeScript from '../common/languageIcons/TypeScript.svelte';
 import JavaScriptIcon from '../icons/JavaScriptIcon.svelte';
 import JsonIcon from '../icons/JsonIcon.svelte';
 import ReactIcon from '../icons/ReactIcon.svelte';
 import SvelteIcon from '../icons/SvelteIcon.svelte';
 import VueIcon from '../icons/VueIcon.svelte';
-let { file } = $props();
+let { file, size = 16 } = $props();
+const width = $derived(size.toString() + 'px');
+const height = $derived(size.toString() + 'px');
 </script>
 
 {#if file.endsWith('.tsx')}
-	<ReactIcon width="16px" height="16px" />
+	<ReactIcon {width} {height} />
 {:else if file.endsWith('.json')}
-	<JsonIcon width="16px" height="16px" />
+	<JsonIcon {width} {height} />
 {:else if file.endsWith('.ts')}
-	<TypeScript width={16} height={16} />
+	<TypeScript width={size} height={size} />
 {:else if file.endsWith('.js')}
-	<JavaScriptIcon width="16px" height="16px" />
+	<JavaScriptIcon {width} {height} />
 {:else if file.endsWith('.vue')}
-	<VueIcon width="16px" height="16px" />
+	<VueIcon {width} {height} />
 {:else if file.endsWith('.css')}
 	<span class="text-blue-600 ml-0.5" style="font-size: 16px;">#</span>
 {:else if file.endsWith('.svelte')}
-	<SvelteIcon width="16px" height="16px" />
+	<SvelteIcon {width} {height} />
 {/if}

package/package/components/raw_apps/FileEditorIcon.svelte.d.ts

@@ -1,5 +1,7 @@
+export declare const SUPPORTED_EXTENSIONS: string[];
 interface Props {
     file: string;
+    size?: number;
 }
 declare const FileEditorIcon: import("svelte").Component<Props, {}, "">;
 type FileEditorIcon = ReturnType<typeof FileEditorIcon>;

package/package/components/raw_apps/FileTreeNode.svelte

@@ -1,15 +1,41 @@
-<script lang="ts">import { ChevronRight, ChevronDown, File, Folder, FileJson, FileCode, ImageIcon, Palette, Pencil, Trash2, Lock } from 'lucide-svelte';
+<script lang="ts">import { ChevronRight, ChevronDown, File, Folder, Pencil, Trash2, Lock, Ellipsis, ImageIcon } from 'lucide-svelte';
 import Self from './FileTreeNode.svelte';
-let { node, onFileClick, onAddFile, onAddFolder, onRename, onDelete, selectedPath, pathToRename, pathToExpand, noEdit = false, level = 0 } = $props();
-let expanded = $state(level === 0); // Root folders start expanded
+import { twMerge } from 'tailwind-merge';
+import DropdownV2 from '../DropdownV2.svelte';
+import { Button } from '../common';
+import TextInput from '../text_input/TextInput.svelte';
+import TypeScript from '../common/languageIcons/TypeScript.svelte';
+import JavaScriptIcon from '../icons/JavaScriptIcon.svelte';
+import JsonIcon from '../icons/JsonIcon.svelte';
+import ReactIcon from '../icons/ReactIcon.svelte';
+import SvelteIcon from '../icons/SvelteIcon.svelte';
+import VueIcon from '../icons/VueIcon.svelte';
+import CssIcon from '../icons/CssIcon.svelte';
+import SassIcon from '../icons/SassIcon.svelte';
+import LessIcon from '../icons/LessIcon.svelte';
+import HtmlIcon from '../icons/HtmlIcon.svelte';
+import MarkdownIcon from '../icons/MarkdownIcon.svelte';
+import YamlIcon from '../icons/YamlIcon.svelte';
+import { tick } from 'svelte';
+let { node, onFileClick, onAddFile, onAddFolder, onRename, onDelete, onRequestEdit, onCancelEdit, selectedPath, pathToEdit, noEdit = false, level = 0 } = $props();
+let userExpanded = $state(null); // null = not set by user
 let isHovered = $state(false);
-let isEditing = $state(false);
 let editValue = $state(node.name);
-let inputElement = $state();
+let textInputElement = $state();
+let dropdownOpen = $state(false);
 const isSelected = $derived(selectedPath === node.path);
+const isEditing = $derived(pathToEdit === node.path);
+const expanded = $derived(
+// Auto-expand for editing nested paths takes priority
+pathToEdit && node.isFolder && pathToEdit.startsWith(node.path)
+    ? true
+    : userExpanded !== null
+        ? userExpanded
+        : level === 0 // Default: root expanded
+);
 function toggleExpanded() {
     if (node.isFolder) {
-        expanded = !expanded;
+        userExpanded = !expanded;
     }
 }
 function handleClick() {
@@ -22,61 +48,43 @@ function handleClick() {
 }
 function handleEdit(e) {
     e.stopPropagation();
-    isEditing = true;
-    editValue = node.name;
+    onRequestEdit?.(node.path);
 }
 function handleDelete(e) {
     e.stopPropagation();
     onDelete?.(node.path);
 }
 function finishEdit() {
-    if (isEditing && editValue.trim() && editValue !== node.name) {
+    if (isEditing && editValue.trim()) {
+        // Always call onRename - parent handles whether it's a new file or actual rename
         onRename?.(node.path, editValue.trim());
     }
-    isEditing = false;
+    else {
+        onCancelEdit?.();
+    }
 }
 function handleInputKeydown(e) {
     if (e.key === 'Enter') {
         finishEdit();
     }
     else if (e.key === 'Escape') {
-        isEditing = false;
-        editValue = node.name;
+        editValue = node.name; // Reset to original
+        onCancelEdit?.();
     }
 }
-function handleInputBlur() {
+function handleInputBlur(e) {
     finishEdit();
 }
+// Single effect for DOM operations only
 $effect(() => {
-    if (isEditing && inputElement) {
-        inputElement.focus();
-        inputElement.select();
-    }
-});
-// Automatically enter edit mode for newly created files
-$effect(() => {
-    if (pathToRename === node.path && !isEditing) {
-        isEditing = true;
+    if (isEditing && textInputElement) {
+        // Reset edit value when entering edit mode
         editValue = node.name;
-        // If this is a folder, expand it
-        if (node.isFolder) {
-            expanded = true;
-        }
-    }
-});
-// Expand parent folders when a child needs to be renamed
-$effect(() => {
-    if (pathToRename && node.isFolder && pathToRename.startsWith(node.path + '/')) {
-        expanded = true;
-    }
-});
-// Expand folder when pathToExpand matches this node or a parent of pathToExpand
-$effect(() => {
-    if (pathToExpand && node.isFolder) {
-        // Expand if this folder is the target or an ancestor of the target
-        if (node.path === pathToExpand || pathToExpand.startsWith(node.path + '/')) {
-            expanded = true;
-        }
+        // Focus and select input (DOM side effects)
+        tick().then(() => {
+            textInputElement?.focus();
+            textInputElement?.select();
+        });
     }
 });
 const sortedChildren = $derived(node.children?.slice().sort((a, b) => {
@@ -97,22 +105,26 @@ const fileIcon = $derived.by(() => {
     const ext = getFileExtension(node.name);
     switch (ext) {
         case 'json':
-            return { icon: FileJson, className: 'text-yellow-500' };
+            return { icon: JsonIcon };
         case 'tsx':
+            return { icon: ReactIcon };
         case 'jsx':
-            return { icon: FileCode, className: 'text-blue-500' };
+            return { icon: ReactIcon };
         case 'ts':
+            return { icon: TypeScript };
         case 'js':
-            return { icon: FileCode, className: 'text-blue-400' };
+            return { icon: JavaScriptIcon };
         case 'svelte':
-            return { icon: FileCode, className: 'text-orange-500' };
+            return { icon: SvelteIcon };
         case 'vue':
-            return { icon: FileCode, className: 'text-green-500' };
+            return { icon: VueIcon };
         case 'css':
+            return { icon: CssIcon };
         case 'scss':
         case 'sass':
+            return { icon: SassIcon };
         case 'less':
-            return { icon: Palette, className: 'text-pink-500' };
+            return { icon: LessIcon };
         case 'png':
         case 'jpg':
         case 'jpeg':
@@ -121,6 +133,15 @@ const fileIcon = $derived.by(() => {
         case 'webp':
         case 'ico':
             return { icon: ImageIcon, className: 'text-purple-500' };
+        case 'html':
+        case 'htm':
+            return { icon: HtmlIcon };
+        case 'md':
+        case 'markdown':
+            return { icon: MarkdownIcon };
+        case 'yaml':
+        case 'yml':
+            return { icon: YamlIcon };
         default:
             return { icon: File, className: 'text-tertiary' };
     }
@@ -136,7 +157,7 @@ const fileIcon = $derived.by(() => {
 	>
 		{#if isEditing}
 			<div
-				class="w-full flex items-center gap-1 px-2 py-1 text-xs rounded {isSelected
+				class="w-full flex items-center gap-1 px-2 min-h-6 text-xs rounded {isSelected
 					? 'bg-blue-100 dark:bg-blue-900/30'
 					: ''}"
 				style="padding-left: {level * 12}px"
@@ -150,26 +171,28 @@ const fileIcon = $derived.by(() => {
 							<ChevronRight size={12} />
 						{/if}
 					</span>
-					<IconComponent size={12} class="flex-shrink-0 {fileIcon.className}" />
+					<IconComponent size={14} class="flex-shrink-0 {fileIcon.className}" />
 				{:else}
 					{@const IconComponent = fileIcon.icon}
 					<span class="flex-shrink-0"></span>
-					<IconComponent size={12} class="flex-shrink-0 {fileIcon.className}" />
+					<IconComponent size={14} class="flex-shrink-0 {fileIcon.className}" />
 				{/if}
-				<input
-					bind:this={inputElement}
+				<TextInput
+					bind:this={textInputElement}
 					bind:value={editValue}
-					onkeydown={handleInputKeydown}
-					onblur={handleInputBlur}
-					class="flex-1 min-w-0 bg-surface border border-blue-500 rounded px-1 text-primary font-mono focus:outline-none focus:ring-1 focus:ring-blue-500"
-					type="text"
+					inputProps={{
+						onkeydown: handleInputKeydown,
+						onblur: (e) => handleInputBlur(e),
+						type: 'text'
+					}}
+					size="xs"
 				/>
 			</div>
 		{:else}
 			<button
 				onclick={handleClick}
 				class="w-full flex items-center gap-1 px-2 py-1 text-xs hover:bg-surface-hover transition-colors rounded text-left {isSelected
-					? 'bg-blue-100 dark:bg-blue-900/30'
+					? 'bg-surface-accent-selected'
 					: ''}"
 				style="padding-left: {level * 12}px"
 			>
@@ -188,32 +211,44 @@ const fileIcon = $derived.by(() => {
 					<span class="flex-shrink-0"></span>
 					<IconComponent size={12} class="flex-shrink-0 {fileIcon.className}" />
 				{/if}
-				<span class="truncate text-primary font-mono">{node.name}</span>
+				<span class={twMerge('truncate text-primary font-normal', isSelected ? 'text-accent' : '')}
+					>{node.name}</span
+				>
 			</button>
 
-			{#if isHovered && !isEditing}
-				<div
-					class="absolute right-1 top-1 flex gap-0.5 bg-surface rounded shadow-sm border border-gray-200 dark:border-gray-700"
-				>
-					{#if !noEdit}
-						<button
-							onclick={handleEdit}
-							class="p-0.5 hover:bg-surface-hover rounded transition-colors"
-							title="Rename"
-						>
-							<Pencil size={12} class="text-secondary" />
-						</button>
-						<button
-							onclick={handleDelete}
-							class="p-0.5 hover:bg-surface-hover rounded transition-colors"
-							title="Delete"
-						>
-							<Trash2 size={12} class="text-red-500" />
-						</button>
-					{:else}
-						<Lock size={12} class="text-secondary" />
-					{/if}
-				</div>
+			{#if isHovered || dropdownOpen}
+				{#if !noEdit}
+					<DropdownV2
+						items={[
+							{
+								displayName: 'Rename',
+								icon: Pencil,
+								action: handleEdit
+							},
+							{
+								displayName: 'Delete',
+								icon: Trash2,
+								action: handleDelete,
+								type: 'delete'
+							}
+						]}
+						placement="bottom-end"
+						class="absolute -translate-y-1/2 top-1/2 right-1"
+						bind:open={dropdownOpen}
+					>
+						{#snippet buttonReplacement()}
+							<Button
+								iconOnly
+								unifiedSize="xs"
+								variant="subtle"
+								nonCaptureEvent
+								startIcon={{ icon: Ellipsis }}
+							></Button>
+						{/snippet}
+					</DropdownV2>
+				{:else}
+					<Lock size={12} class="text-secondary absolute -translate-y-1/2 top-1/2 right-2" />
+				{/if}
 			{/if}
 		{/if}
 	</div>
@@ -227,9 +262,10 @@ const fileIcon = $derived.by(() => {
 				{onAddFolder}
 				{onRename}
 				{onDelete}
+				{onRequestEdit}
+				{onCancelEdit}
 				{selectedPath}
-				{pathToRename}
-				{pathToExpand}
+				{pathToEdit}
 				level={level + 1}
 			/>
 		{/each}