@morscherlab/mint-sdk 1.2.0-beta.2 → 1.2.0-beta.20

package/src/components/FileBrowserModal.vue

@@ -0,0 +1,384 @@
+<script setup lang="ts">
+/** Modal picker over the read-only server mounts, recording paths rather than copying data. */
+import { computed } from 'vue'
+import { FILE_BROWSER_ICONS as ICON, formatBytes } from './fileBrowserPresentation'
+import FileBrowserToolbarInternal from './internal/FileBrowserToolbarInternal.vue'
+import FileBrowserListingInternal from './internal/FileBrowserListingInternal.vue'
+import type { ModalSize } from '../types'
+import type {
+  FileBrowserSortKey,
+  FileEntry,
+  FilePathCrumb,
+  FileSelection,
+  ServerMount,
+} from '../types/fileBrowserTypes'
+import { useListSelection } from '../composables/useListSelection'
+import BaseButton from './BaseButton.vue'
+import IconButton from './IconButton.vue'
+import FileBrowserDialogInternal from './internal/FileBrowserDialogInternal.vue'
+
+interface Props {
+  modelValue: boolean
+  /** Mounts in the location strip; nested `children` follow their parent. */
+  mounts?: ServerMount[]
+  /** Mount the listing belongs to. */
+  mountId?: string
+  /** Mount-relative path of the directory being shown. */
+  path?: string
+  /** Parent path, or null at a mount root. */
+  parent?: string | null
+  entries?: FileEntry[]
+  breadcrumbs?: FilePathCrumb[]
+  /** Controlled selection, mirroring DataFrame's selectedKeys contract. */
+  selected?: FileSelection[]
+  /** Extensions the caller cares about, shown as a chip in the toolbar. */
+  typeRules?: string[]
+  search?: string
+  sort?: FileBrowserSortKey
+  /** Directory size before any search filter. */
+  totalCount?: number | null
+  /** How many entries satisfy the type rules. */
+  matchCount?: number | null
+  /** True when the server capped the listing. */
+  truncated?: boolean
+  loading?: boolean
+  error?: string | null
+  title?: string
+  /** Free-form context line, e.g. the experiment this data is for. */
+  subtitle?: string
+  /** Monospace prefix on the context line, e.g. an experiment code. */
+  contextCode?: string
+  /** Dim entries that fail the type rules instead of showing them plainly. */
+  dimNonMatching?: boolean
+  /** Offer the hand-off to the system file picker for local, never-uploaded files. */
+  showLocalPicker?: boolean
+  confirmLabel?: string
+  size?: ModalSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mounts: () => [],
+  mountId: '',
+  path: '',
+  parent: null,
+  entries: () => [],
+  breadcrumbs: () => [],
+  selected: () => [],
+  typeRules: () => [],
+  search: '',
+  sort: 'name',
+  totalCount: null,
+  matchCount: null,
+  truncated: false,
+  loading: false,
+  error: null,
+  title: 'Select data',
+  subtitle: '',
+  contextCode: '',
+  dimNonMatching: true,
+  showLocalPicker: true,
+  confirmLabel: '',
+  size: 'full',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'update:selected': [selection: FileSelection[]]
+  'update:search': [value: string]
+  'update:sort': [value: FileBrowserSortKey]
+  /** A directory was opened — the caller fetches and feeds back a new listing. */
+  navigate: [location: { mount_id: string; path: string }]
+  /** The directory currently being viewed was taken as the input. */
+  selectFolder: [location: { mount_id: string; path: string }]
+  /** Hand off to the system picker; local files are read in-browser, never uploaded. */
+  chooseLocal: []
+  confirm: [selection: FileSelection[]]
+  cancel: []
+  /** Retry or reload the current location (bind to useFileBrowser.refresh). */
+  refresh: []
+}>()
+
+/** A selection is identified by mount and path, so the same name under two mounts stays distinct. */
+function selectionKey(mountId: string, path: string): string {
+  return JSON.stringify([mountId, path])
+}
+
+const selection = useListSelection<FileSelection, string>({
+  selected: () => props.selected.map((item) => selectionKey(item.mount_id, item.path)),
+  items: () => props.selected,
+  getValue: (item) => selectionKey(item.mount_id, item.path),
+})
+
+const selectedCount = computed(() => props.selected.length)
+const folderCount = computed(
+  () => props.selected.filter((item) => item.kind === 'directory').length,
+)
+const fileCount = computed(() => selectedCount.value - folderCount.value)
+const selectedBytes = computed(() =>
+  props.selected.reduce((total, item) => total + (item.size_bytes ?? 0), 0),
+)
+
+const confirmText = computed(
+  () =>
+    props.confirmLabel ||
+    `Select ${selectedCount.value} item${selectedCount.value === 1 ? '' : 's'}`,
+)
+
+/** Flat locations with their tree depth, preserving the parent-child order. */
+interface MountRow {
+  mount: ServerMount
+  depth: number
+}
+
+const mountRows = computed<MountRow[]>(() => flattenMounts(props.mounts, 0))
+
+function flattenMounts(mounts: ServerMount[], depth: number): MountRow[] {
+  return mounts.flatMap((mount) => [
+    { mount, depth },
+    ...flattenMounts(mount.children ?? [], depth + 1),
+  ])
+}
+
+function toSelection(entry: FileEntry): FileSelection {
+  return {
+    mount_id: props.mountId,
+    path: entry.path,
+    name: entry.name,
+    kind: entry.kind,
+    child_count: entry.child_count ?? null,
+    size_bytes: entry.size_bytes ?? null,
+  }
+}
+
+function toggleEntry(entry: FileEntry): void {
+  if (props.loading || props.error || !props.mountId) return
+  const key = selectionKey(props.mountId, entry.path)
+  const next = selection.isSelected(key)
+    ? props.selected.filter((item) => selectionKey(item.mount_id, item.path) !== key)
+    : [...props.selected, toSelection(entry)]
+  emit('update:selected', next)
+}
+
+/**
+ * Clicking a row opens a directory; it never selects. Ticking the checkbox
+ * selects the whole directory; it never navigates. Two gestures, one row.
+ */
+function handleRowClick(entry: FileEntry): void {
+  if (props.loading || props.error || !props.mountId || entry.kind !== 'directory') return
+  emit('navigate', { mount_id: props.mountId, path: entry.path })
+}
+
+function handleMountClick(mount: ServerMount): void {
+  if (mount.available === false) return
+  emit('navigate', { mount_id: mount.id, path: '' })
+}
+
+function removeSelection(item: FileSelection): void {
+  const key = selectionKey(item.mount_id, item.path)
+  emit(
+    'update:selected',
+    props.selected.filter((candidate) => selectionKey(candidate.mount_id, candidate.path) !== key),
+  )
+}
+
+function handleClose(): void {
+  emit('cancel')
+  emit('update:modelValue', false)
+}
+
+function handleConfirm(): void {
+  if (!selectedCount.value) return
+  emit('confirm', props.selected)
+  emit('update:modelValue', false)
+}
+
+function mountIcon(row: MountRow): string {
+  return row.depth === 0 ? ICON.disk : ICON.folder
+}
+
+function chipNote(item: FileSelection): string {
+  if (item.kind !== 'directory') return item.name
+  return item.child_count === null || item.child_count === undefined
+    ? item.name
+    : `${item.name} · whole folder, ${item.child_count} item${item.child_count === 1 ? '' : 's'}`
+}
+
+const selectionSummary = computed(() => {
+  const parts: string[] = []
+  if (fileCount.value) parts.push(`${fileCount.value} file${fileCount.value === 1 ? '' : 's'}`)
+  if (folderCount.value)
+    parts.push(`${folderCount.value} folder${folderCount.value === 1 ? '' : 's'}`)
+  if (selectedBytes.value) parts.push(formatBytes(selectedBytes.value))
+  return parts.join(' · ')
+})
+</script>
+
+<template>
+  <FileBrowserDialogInternal :open="modelValue" :label="title" :size="size" @close="handleClose">
+    <template #header>
+      <div class="mint-file-browser__heading">
+        <h2 class="mint-file-browser__title">{{ title }}</h2>
+        <p v-if="contextCode || subtitle" class="mint-file-browser__context">
+          <code v-if="contextCode">{{ contextCode }}</code>
+          <span v-if="contextCode && subtitle"> · </span>{{ subtitle }}
+        </p>
+      </div>
+      <BaseButton
+        v-if="showLocalPicker"
+        variant="secondary"
+        size="sm"
+        class="mint-file-browser__local"
+        @click="emit('chooseLocal')"
+      >
+        Choose local files…
+      </BaseButton>
+    </template>
+
+    <div class="mint-file-browser">
+      <nav v-if="mountRows.length" class="mint-file-browser__mounts" aria-label="Server mounts">
+        <span class="mint-file-browser__mounts-label">Locations</span>
+        <div class="mint-file-browser__mount-options">
+          <BaseButton
+            v-for="row in mountRows"
+            :key="row.mount.id"
+            size="sm"
+            :variant="row.mount.id === mountId ? 'secondary' : 'ghost'"
+            class="mint-file-browser__mount"
+            :class="{ 'mint-file-browser__mount--active': row.mount.id === mountId }"
+            :aria-pressed="row.mount.id === mountId"
+            :title="row.mount.label"
+            :disabled="row.mount.available === false"
+            @click="handleMountClick(row.mount)"
+          >
+            <svg
+              class="mint-file-browser__icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.8"
+              aria-hidden="true"
+            >
+              <path :d="mountIcon(row)" />
+            </svg>
+            <span class="mint-file-browser__mount-label"
+              >{{ row.depth ? '↳ ' : '' }}{{ row.mount.label }}</span
+            >
+            <span
+              v-if="row.mount.available === false || row.mount.count != null"
+              class="mint-file-browser__mount-count"
+            >
+              {{ row.mount.available === false ? 'offline' : row.mount.count }}
+            </span>
+          </BaseButton>
+        </div>
+      </nav>
+      <FileBrowserToolbarInternal
+        :mount-id="mountId"
+        :path="path"
+        :parent="parent"
+        :breadcrumbs="breadcrumbs"
+        :search="search"
+        :sort="sort"
+        :type-rules="typeRules"
+        :loading="loading"
+        :error="error"
+        @navigate="emit('navigate', $event)"
+        @select-folder="emit('selectFolder', $event)"
+        @update:search="emit('update:search', $event)"
+        @update:sort="emit('update:sort', $event)"
+        @refresh="emit('refresh')"
+      />
+      <FileBrowserListingInternal
+        :mount-id="mountId"
+        :entries="entries"
+        :selected="selected"
+        :loading="loading"
+        :error="error"
+        :dim-non-matching="dimNonMatching"
+        :total-count="totalCount"
+        :match-count="matchCount"
+        :truncated="truncated"
+        :search="search"
+        :has-mounts="mountRows.length > 0"
+        :has-available-mounts="mountRows.some((row) => row.mount.available !== false)"
+        @toggle="toggleEntry"
+        @open="handleRowClick"
+        @refresh="emit('refresh')"
+      />
+    </div>
+
+    <template #footer>
+      <div class="mint-file-browser__tray">
+        <div class="mint-file-browser__tray-main">
+          <div class="mint-file-browser__tray-head">
+            <span class="mint-file-browser__tray-count">{{ selectedCount }} selected</span>
+            <span class="mint-file-browser__tray-summary">{{ selectionSummary }}</span>
+            <BaseButton
+              v-if="selectedCount"
+              variant="ghost"
+              size="sm"
+              class="mint-file-browser__clear"
+              @click="emit('update:selected', [])"
+              >Clear</BaseButton
+            >
+          </div>
+          <div v-if="selectedCount" class="mint-file-browser__chips" aria-label="Selected paths">
+            <span
+              v-for="item in selected"
+              :key="selectionKey(item.mount_id, item.path)"
+              class="mint-file-browser__chip"
+              :title="`${item.mount_id} / ${item.path}`"
+            >
+              <svg
+                class="mint-file-browser__icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.8"
+                aria-hidden="true"
+              >
+                <path :d="item.kind === 'directory' ? ICON.folder : ICON.file" />
+              </svg>
+              <span class="mint-file-browser__chip-label">{{ chipNote(item) }}</span>
+              <IconButton
+                size="sm"
+                class="mint-file-browser__chip-remove"
+                :label="`Remove ${item.name} from the selection`"
+                @click="removeSelection(item)"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  aria-hidden="true"
+                >
+                  <path d="M6 6l12 12M18 6L6 18" />
+                </svg>
+              </IconButton>
+            </span>
+          </div>
+          <span v-else class="mint-file-browser__selection-hint"
+            >Select files or whole folders to continue.</span
+          >
+        </div>
+        <div class="mint-file-browser__actions">
+          <BaseButton
+            variant="secondary"
+            size="sm"
+            class="mint-file-browser__cancel"
+            @click="handleClose"
+            >Cancel</BaseButton
+          >
+          <BaseButton
+            size="sm"
+            class="mint-file-browser__confirm"
+            :disabled="!selectedCount"
+            @click="handleConfirm"
+            >{{ confirmText }}</BaseButton
+          >
+        </div>
+      </div>
+    </template>
+  </FileBrowserDialogInternal>
+</template>

package/src/components/FilePicker.story.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseButton from './BaseButton.vue'
+import FilePicker from './FilePicker.vue'
+import type { PickerAdapter, PickerNode } from '../types/filePicker'
+
+const open = ref(true)
+const hideRestricted = ref(true)
+const nodes: PickerNode[] = [
+  { kind: 'folder', path: 'shared', name: 'Shared data' },
+  { kind: 'folder', path: 'restricted', name: 'Restricted data' },
+  { kind: 'file', path: 'shared/run.raw', parentPath: 'shared', name: 'run.raw', format: 'raw', bytes: 4096 },
+  { kind: 'file', path: 'restricted/private.raw', parentPath: 'restricted', name: 'private.raw', format: 'raw', bytes: 2048 },
+]
+const adapter: PickerAdapter = {
+  listRoot: async () => nodes.filter((node) => !node.parentPath),
+  listChildren: async (path) => nodes.filter((node) => node.parentPath === path),
+  search: async (query, scope) => nodes.filter((node) =>
+    (scope.recursive ? !scope.path || node.path.startsWith(`${scope.path}/`) : (node.parentPath ?? '') === scope.path)
+    && node.name.toLowerCase().includes(query.toLowerCase()),
+  ),
+}
+// The host owns this rule; its server must also enforce access independently.
+const systemFilter = (node: PickerNode) => !hideRestricted.value || !node.path.startsWith('restricted')
+</script>
+
+<template>
+  <Story title="Forms/FilePicker">
+    <Variant title="Local upload and system filter">
+      <div style="padding: 2rem; max-width: 600px;">
+        <BaseButton @click="open = true">Choose data</BaseButton>
+        <FilePicker
+          v-model:open="open"
+          :adapter="adapter"
+          :sources="['localFile', 'server']"
+          :system-filter="systemFilter"
+        />
+      </div>
+      <template #controls>
+        <HstCheckbox v-model="hideRestricted" title="Hide restricted server data" />
+      </template>
+    </Variant>
+  </Story>
+</template>