fix(ui): resolve state_referenced_locally warnings and add folder picker
- Fix Svelte state_referenced_locally warning in +page.svelte and repos/[id]/+page.svelte by initializing $state with empty defaults and syncing via $effect - Add FolderPicker component with server-side filesystem browser (single-click to navigate, double-click or "Select This Folder" to confirm) - Git repos highlighted with orange folder icon and "git" badge - Add GET /api/v1/fs/browse endpoint listing subdirectories - Wire FolderPicker into AddRepositoryModal for local source type - Auto-fills title from the selected folder name Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Giancarmine Salucci
210
src/lib/components/FolderPicker.svelte
Normal file
210
src/lib/components/FolderPicker.svelte
Normal file
@@ -0,0 +1,210 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
value = $bindable(''),
|
||||
onselect
|
||||
}: {
|
||||
value?: string;
|
||||
onselect?: (path: string) => void;
|
||||
} = $props();
|
||||
|
||||
interface Entry {
|
||||
name: string;
|
||||
path: string;
|
||||
isGitRepo: boolean;
|
||||
}
|
||||
|
||||
let browsePath = $state('');
|
||||
let entries = $state<Entry[]>([]);
|
||||
let parent = $state<string | null>(null);
|
||||
let browseError = $state<string | null>(null);
|
||||
let loading = $state(false);
|
||||
let open = $state(false);
|
||||
|
||||
async function browse(targetPath: string) {
|
||||
loading = true;
|
||||
browseError = null;
|
||||
try {
|
||||
const res = await fetch(`/api/v1/fs/browse?path=${encodeURIComponent(targetPath)}`);
|
||||
const data = await res.json();
|
||||
browsePath = data.path;
|
||||
entries = data.entries ?? [];
|
||||
parent = data.parent;
|
||||
browseError = data.error ?? null;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openPicker() {
|
||||
open = true;
|
||||
browse(value || '~');
|
||||
}
|
||||
|
||||
function selectEntry(entry: Entry) {
|
||||
value = entry.path;
|
||||
onselect?.(entry.path);
|
||||
open = false;
|
||||
}
|
||||
|
||||
function selectCurrent() {
|
||||
value = browsePath;
|
||||
onselect?.(browsePath);
|
||||
open = false;
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') open = false;
|
||||
}
|
||||
|
||||
function handleBackdropClick(e: MouseEvent) {
|
||||
if (e.target === e.currentTarget) open = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={handleKeydown} />
|
||||
|
||||
<div class="relative">
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
bind:value
|
||||
placeholder="/home/user/projects/my-sdk"
|
||||
class="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onclick={openPicker}
|
||||
class="flex items-center gap-1.5 rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
|
||||
title="Browse folders"
|
||||
>
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
|
||||
/>
|
||||
</svg>
|
||||
Browse
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if open}
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<div
|
||||
role="presentation"
|
||||
class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
|
||||
onclick={handleBackdropClick}
|
||||
>
|
||||
<div class="flex w-full max-w-lg flex-col rounded-xl bg-white shadow-xl" style="max-height: 70vh">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between border-b border-gray-200 px-4 py-3">
|
||||
<h3 class="text-sm font-semibold text-gray-900">Select Folder</h3>
|
||||
<button
|
||||
onclick={() => (open = false)}
|
||||
class="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
|
||||
aria-label="Close"
|
||||
>
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Current path breadcrumb -->
|
||||
<div class="flex items-center gap-2 border-b border-gray-100 bg-gray-50 px-4 py-2">
|
||||
{#if parent}
|
||||
<button
|
||||
onclick={() => browse(parent!)}
|
||||
class="rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700"
|
||||
title="Go up"
|
||||
aria-label="Go to parent directory"
|
||||
>
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
<span class="flex-1 truncate font-mono text-xs text-gray-600" title={browsePath}>
|
||||
{browsePath}
|
||||
</span>
|
||||
{#if loading}
|
||||
<svg
|
||||
class="h-4 w-4 animate-spin text-gray-400"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
||||
></path>
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Directory listing -->
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
{#if browseError}
|
||||
<div class="px-4 py-8 text-center text-sm text-red-600">{browseError}</div>
|
||||
{:else if entries.length === 0 && !loading}
|
||||
<div class="px-4 py-8 text-center text-sm text-gray-500">No subdirectories found</div>
|
||||
{:else}
|
||||
<ul class="py-1">
|
||||
{#each entries as entry (entry.path)}
|
||||
<li>
|
||||
<button
|
||||
class="flex w-full items-center gap-3 px-4 py-2 text-left text-sm hover:bg-blue-50"
|
||||
onclick={() => browse(entry.path)}
|
||||
ondblclick={() => selectEntry(entry)}
|
||||
title="Click to navigate, double-click to select"
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4 shrink-0 {entry.isGitRepo ? 'text-orange-400' : 'text-yellow-400'}"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="flex-1 truncate text-gray-800">{entry.name}</span>
|
||||
{#if entry.isGitRepo}
|
||||
<span class="shrink-0 rounded bg-orange-100 px-1.5 py-0.5 text-xs text-orange-700">
|
||||
git
|
||||
</span>
|
||||
{/if}
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="flex items-center justify-between border-t border-gray-200 px-4 py-3">
|
||||
<span class="truncate font-mono text-xs text-gray-500">{browsePath}</span>
|
||||
<div class="flex shrink-0 gap-2">
|
||||
<button
|
||||
onclick={() => (open = false)}
|
||||
class="rounded-lg border border-gray-200 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onclick={selectCurrent}
|
||||
class="rounded-lg bg-blue-600 px-3 py-1.5 text-sm text-white hover:bg-blue-700"
|
||||
>
|
||||
Select This Folder
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user