@brftech/filex-core 0.4.2 → 0.6.0

package/src/components/UploadProgress.vue

@@ -1,78 +1,70 @@
 <script setup lang="ts">
 /**
- * UploadProgress — floating footer showing active + recently-done uploads.
+ * UploadProgress — renderless upload publisher (wiring:c3).
+ *
+ * Historically this drew its own floating bottom-right footer. Since the
+ * unified operations center it renders NOTHING: it reconciles the host's
+ * `jobs` list into the shared useOperations store, and the visible UI is
+ * OperationsCenter's badge + panel. The original emit contract is kept —
+ * cancel/dismiss (and the new retry) still bubble to the host, which owns
+ * the actual upload machinery. Mount it exactly as before; just pass the
+ * store via `center`.
  */
-import { computed } from 'vue';
+import { watch } from 'vue';
 import type { UploadJob } from '../composables/useUploadChunked';
 import type { LocaleCode } from '../types/ExplorerConfig';
-import { useLocale } from '../composables/useLocale';
+import type { OperationsStore, OperationStatus } from '../composables/useOperations';
 
 const props = defineProps<{
   jobs: UploadJob[];
+  /** Kept for mount compatibility — strings now render in OperationsCenter. */
   locale: LocaleCode;
+  center: OperationsStore;
 }>();
 
 const emit = defineEmits<{
   (e: 'cancel', job: UploadJob): void;
   (e: 'dismiss', job: UploadJob): void;
+  (e: 'retry', job: UploadJob): void;
 }>();
 
-const { t, formatSize } = useLocale(() => props.locale);
-
-const visible = computed(() => props.jobs);
-
-function statusLabel(j: UploadJob): string {
-  switch (j.status) {
-    case 'done':
-      return t('upload.done');
-    case 'error':
-      return `${t('upload.error')}: ${j.error ?? ''}`;
-    case 'aborted':
-      return t('upload.aborted');
-    default:
-      return t('upload.progress');
-  }
+function mapStatus(s: UploadJob['status']): OperationStatus {
+  if (s === 'done') return 'done';
+  if (s === 'error') return 'error';
+  if (s === 'aborted') return 'aborted';
+  return 'running'; // pending | initializing | uploading | finalizing
 }
+
+watch(
+  () => props.jobs,
+  (jobs) => {
+    props.center.sync(
+      'upload',
+      jobs.map((j) => ({
+        input: {
+          id: j.id,
+          kind: 'upload' as const,
+          name: j.file.name,
+          percent: j.totalBytes > 0 || j.status === 'done' ? j.percent : null,
+          status: mapStatus(j.status),
+          error: j.error ?? null,
+          uploadedBytes: j.uploadedBytes,
+          totalBytes: j.totalBytes,
+          cancellable: j.status === 'uploading' || j.status === 'initializing',
+          retryable: j.status === 'error',
+        },
+        actions: {
+          cancel: () => emit('cancel', j),
+          dismiss: () => emit('dismiss', j),
+          retry: () => emit('retry', j),
+        },
+      })),
+    );
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
-  <transition name="fe-upload-slide">
-    <div v-if="visible.length > 0" class="fe-upload">
-      <div class="fe-upload__header">
-        <strong>{{ t('upload.progress') }}</strong>
-        <span class="fe-upload__count">{{ visible.length }}</span>
-      </div>
-      <ul class="fe-upload__list">
-        <li
-          v-for="j in visible"
-          :key="j.id"
-          class="fe-upload__item"
-          :class="`is-${j.status}`"
-        >
-          <div class="fe-upload__name" :title="j.file.name">{{ j.file.name }}</div>
-          <div class="fe-upload__bar" :aria-valuenow="j.percent" role="progressbar">
-            <div class="fe-upload__bar-fill" :style="{ width: j.percent + '%' }" />
-          </div>
-          <div class="fe-upload__meta">
-            <span>{{ statusLabel(j) }}</span>
-            <span>{{ formatSize(j.uploadedBytes) }} / {{ formatSize(j.totalBytes) }}</span>
-            <button
-              v-if="j.status === 'uploading' || j.status === 'initializing'"
-              type="button"
-              class="fe-upload__cancel"
-              @click="emit('cancel', j)"
-            >
-              {{ t('upload.cancel') }}
-            </button>
-            <button
-              v-else
-              type="button"
-              class="fe-upload__cancel"
-              @click="emit('dismiss', j)"
-            >×</button>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </transition>
+  <i v-if="false" />
 </template>

package/src/composables/useFileApi.ts

@@ -106,6 +106,23 @@ export interface UserSearchResponse {
   users: UserSuggestion[];
 }
 
+/* === calisma:d3 — node comments (inspector panel) === */
+
+/** Mirrors backend `model.NodeComment` (GET /api/files/comments?node_id=…). */
+export interface NodeComment {
+  id: number;
+  node_id: number;
+  user_id: number;
+  body: string;
+  created_at: string;
+  updated_at?: string;
+  /** Joined author display name (email fallback), filled by the backend. */
+  author_name?: string;
+  /** Whether the CURRENT caller may delete this row (author or admin). */
+  can_delete?: boolean;
+}
+/* === /calisma:d3 === */
+
 export interface InviteResponse {
   mode: 'granted' | 'user_created' | 'shared';
   user_id?: number;
@@ -741,6 +758,38 @@ export function useFileApi(config: ExplorerConfig) {
   }
   /* === /koru:k1 === */
 
+  /* === calisma:d3 — node comments (inspector panel) ===
+   * Same manager-URL derivation trick as versions/permissions so embedded
+   * proxies forwarding the whole /api/files/* subtree keep working.
+   *   GET    /api/files/comments?node_id=N → {comments, node_id}
+   *   POST   /api/files/comments           → {node_id, body}
+   *   DELETE /api/files/comments/{id}      → {ok}
+   */
+  function commentsUrl(sub = ''): string {
+    const base = endpoints.manager.replace(/\/manager(\?.*)?$/, '/comments');
+    return base + sub;
+  }
+  async function listComments(nodeId: number): Promise<NodeComment[]> {
+    const data = await jsonFetch<{ comments?: NodeComment[] | null }>(
+      commentsUrl() + '?node_id=' + encodeURIComponent(String(nodeId)),
+    );
+    return Array.isArray(data?.comments) ? data.comments : [];
+  }
+  async function addComment(nodeId: number, body: string): Promise<NodeComment> {
+    const data = await jsonFetch<{ comment: NodeComment }>(commentsUrl(), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ node_id: nodeId, body }),
+    });
+    return data.comment;
+  }
+  async function deleteComment(id: number): Promise<void> {
+    await jsonFetch(commentsUrl('/' + encodeURIComponent(String(id))), {
+      method: 'DELETE',
+    });
+  }
+  /* === /calisma:d3 === */
+
   // Mint a short-lived WebSocket auth ticket for the realtime layer. Derived
   // from the manager URL (so it flows through the same host proxy) and uses the
   // same auth/creds as every other call. Returns null on any failure (a backend
@@ -790,6 +839,10 @@ export function useFileApi(config: ExplorerConfig) {
     listVersions,
     restoreVersion,
     snapshotVersion,
+    // Node comments (calisma:d3 inspector)
+    listComments,
+    addComment,
+    deleteComment,
     // Permissions (RBAC panel)
     listPermissions,
     resolveEmail,