@brftech/filex-core 0.31.0 → 0.32.0

package/src/components/InspectorPanel.vue

@@ -24,7 +24,7 @@
  * The panel is mounted with v-if by the host — closed state leaves zero DOM.
  */
 import { computed, ref, watch } from 'vue';
-import type { FileApi, NodeVersion } from '../composables/useFileApi';
+import type { FileApi, Grant, NodeVersion } from '../composables/useFileApi';
 import type { FileNode, ShareInfo } from '../types/FileNode';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
@@ -45,10 +45,28 @@ const props = defineProps<{
   narrow?: boolean;
   /** Authenticated thumbnail resolver (useThumbs.src). Optional. */
   thumbSrc?: (n: FileNode) => string | null;
+  /* === surucu:d1 — the Drive shell's details panel ===================== */
+  /**
+   * Split the panel into **Details** and **Activity** tabs, and draw the two
+   * sections the mockups add: who has access, and the share link with a
+   * "Create link" button. `uiProfile: 'drive'` turns it on; absent/false is
+   * the flat scroll of sections this panel has always been, with no extra
+   * request made.
+   *
+   * ⚠ "Activity" is version history + comments, and nothing else, because
+   * nothing else exists: there is no per-file activity endpoint. The audit log
+   * is admin-only, has no path filter, and stores an EMPTY `target_id` for
+   * every file action (auth/audit_middleware.go) — so "Ayşe renamed this on
+   * Tuesday" cannot be answered by this server, and a timeline that made it up
+   * would be worse than the two real feeds.
+   */
+  tabs?: boolean;
 }>();
 
 const emit = defineEmits<{
   (e: 'close'): void;
+  /** surucu:d1 — a share link was minted from the panel. */
+  (e: 'share-created', payload: { path: string; url: string }): void;
   (e: 'manage-permissions', node: FileNode): void;
   (e: 'toast', message: string): void;
   /** Fired after a successful restore/snapshot so the host can reload. */
@@ -239,6 +257,107 @@ async function takeSnapshot(): Promise<void> {
   }
 }
 
+/* === surucu:d1 — tabs, people with access, the share-link row ==========
+ *
+ * The tab strip is presentation only: every section below is the same section,
+ * rendered under Details or under Activity. Nothing is fetched twice, and
+ * nothing new is fetched at all unless `tabs` is on.
+ */
+type InspectorTab = 'details' | 'activity';
+const tab = ref<InspectorTab>('details');
+
+/** People with access — `GET /api/files/permissions?path=…`.
+ *
+ * ⚠ Owner-gated on the server (handlers/grants.go `requireOwner`), so an
+ * editor or a viewer gets a 403 for a file they can perfectly well see. That
+ * is the server's call, not something to route around: the section hides,
+ * exactly the way the shares list already hides for the same class of caller.
+ * What it must NOT do is render an empty "People with access" and let the
+ * reader conclude that nobody has any.
+ */
+const peopleState = ref<SectionState>('hidden');
+const people = ref<Grant[]>([]);
+let peopleSeq = 0;
+
+async function loadPeople(): Promise<void> {
+  const seq = ++peopleSeq;
+  const node = single.value;
+  if (!props.tabs || !node) {
+    peopleState.value = 'hidden';
+    people.value = [];
+    return;
+  }
+  peopleState.value = 'loading';
+  try {
+    const r = await props.api.listPermissions(node.path);
+    if (seq !== peopleSeq) return;
+    // RBAC off on this storage → there are no grants, and a section reading
+    // "nobody" would misdescribe a drive where everyone can already read it.
+    if (!r.storage_rbac) {
+      peopleState.value = 'hidden';
+      people.value = [];
+      return;
+    }
+    people.value = [...(r.direct ?? []), ...(r.inherited ?? [])];
+    peopleState.value = 'ok';
+  } catch {
+    if (seq !== peopleSeq) return;
+    people.value = [];
+    peopleState.value = 'hidden';
+  }
+}
+
+function personName(g: Grant): string {
+  return g.user_display_name || g.user_email || `#${g.user_id}`;
+}
+
+function personInitial(g: Grant): string {
+  const n = personName(g).trim();
+  return n ? n[0].toUpperCase() : '?';
+}
+
+/** The share-link row: the first live link, or the Create button. */
+const primaryShare = computed(() => (shares.value.length ? shares.value[0] : null));
+const shareBusy = ref(false);
+
+async function createLink(): Promise<void> {
+  const node = single.value;
+  if (!node || shareBusy.value) return;
+  shareBusy.value = true;
+  try {
+    const r = await props.api.createShare({ path: node.path });
+    const url = r.share?.url ?? '';
+    // Re-read the list rather than push the response into it: the LIST
+    // endpoint is what a later copy or revoke acts on, and its `uuid` is the
+    // numeric id the DELETE route wants — not the token the create response
+    // carries under that name.
+    const { shares: list } = await props.api.listShares(node.path);
+    shares.value = Array.isArray(list) ? list : [];
+    sharesState.value = 'ok';
+    if (url) {
+      emit('share-created', { path: node.path, url });
+      await copyText(url);
+    }
+  } catch (err) {
+    emit('toast', (err as Error).message);
+  } finally {
+    shareBusy.value = false;
+  }
+}
+
+watch(
+  () => [props.nodes.map((n) => n.path).join('|'), props.tabs] as const,
+  () => void loadPeople(),
+  { immediate: true },
+);
+
+/* Versions and comments are the two real feeds; when a selection has neither,
+ * the Activity tab says so instead of showing two empty headings. */
+const activityUsable = computed(
+  () => versionsState.value !== 'hidden' || commentsState.value !== 'hidden',
+);
+/* === /surucu:d1 === */
+
 watch(
   () => props.nodes.map((n) => n.path).join(''),
   () => void refresh(),
@@ -372,9 +491,32 @@ watch(
       >×</button>
     </header>
 
+    <!-- surucu:d1 — Details / Activity. Rendered only in the drive shell; the
+         classic panel keeps its single flat scroll of sections. -->
+    <div v-if="tabs" class="fe-inspector__tabs" role="tablist" :aria-label="t('inspector.title')">
+      <button
+        type="button"
+        class="fe-inspector__tab"
+        :class="{ 'is-active': tab === 'details' }"
+        role="tab"
+        :aria-selected="tab === 'details'"
+        data-testid="inspector-tab-details"
+        @click="tab = 'details'"
+      >{{ t('inspector.tab.details') }}</button>
+      <button
+        type="button"
+        class="fe-inspector__tab"
+        :class="{ 'is-active': tab === 'activity' }"
+        role="tab"
+        :aria-selected="tab === 'activity'"
+        data-testid="inspector-tab-activity"
+        @click="tab = 'activity'"
+      >{{ t('inspector.tab.activity') }}</button>
+    </div>
+
     <div class="fe-inspector__scroll">
       <!-- ══ Genel ══ -->
-      <section class="fe-inspector__section">
+      <section v-if="!tabs || tab === 'details'" class="fe-inspector__section">
         <h3 class="fe-inspector__heading">{{ t('inspector.section.general') }}</h3>
 
         <!-- Multi selection → summary -->
@@ -457,7 +599,7 @@ watch(
 
       <!-- ══ Sürümler ══ -->
       <section
-        v-if="versionsState === 'ok' || versionsState === 'error'"
+        v-if="(versionsState === 'ok' || versionsState === 'error') && (!tabs || tab === 'activity')"
         class="fe-inspector__section"
       >
         <h3 class="fe-inspector__heading">{{ t('inspector.section.versions') }}</h3>
@@ -519,7 +661,21 @@ watch(
       </section>
 
       <!-- ══ İzinler ══ -->
-      <section v-if="single && effectivePerm" class="fe-inspector__section">
+      <!-- ⚠ surucu:d1 — stands down when "People with access" is on screen. The
+           two say the same thing there (your own row is in the roster, with the
+           same level) and each carries its own button into the SAME modal —
+           two doors into one room, six lines apart. It stays for every other
+           case, which is exactly the case where People is hidden: RBAC off on
+           the storage, or the server refusing the grant list to a non-owner. -->
+      <section
+        v-if="
+          single &&
+          effectivePerm &&
+          (!tabs || tab === 'details') &&
+          !(tabs && peopleState === 'ok')
+        "
+        class="fe-inspector__section"
+      >
         <h3 class="fe-inspector__heading">{{ t('inspector.section.permissions') }}</h3>
         <div class="fe-inspector__permrow">
           <span
@@ -535,10 +691,62 @@ watch(
         </div>
       </section>
 
+      <!-- ══ surucu:d1 — People with access ══
+           Real grants from `GET /api/files/permissions`; hidden entirely when
+           the caller is not an owner (403) or the storage has RBAC off, rather
+           than drawn empty. -->
+      <section
+        v-if="tabs && tab === 'details' && peopleState === 'ok'"
+        class="fe-inspector__section"
+        data-testid="inspector-people"
+      >
+        <h3 class="fe-inspector__heading">{{ t('inspector.people') }}</h3>
+        <p v-if="people.length === 0" class="fe-inspector__empty">
+          {{ t('inspector.people.empty') }}
+        </p>
+        <ul v-else class="fe-inspector__people">
+          <li v-for="g in people" :key="`${g.id}-${g.user_id}`" class="fe-inspector__person">
+            <span class="fe-inspector__avatar" aria-hidden="true">{{ personInitial(g) }}</span>
+            <span class="fe-inspector__person-main">
+              <span class="fe-inspector__person-name" :title="g.user_email">{{ personName(g) }}</span>
+              <span class="fe-inspector__person-sub">
+                {{ permLabel(g.level) }}<template v-if="g.inherited"> · {{ t('inspector.people.inherited') }}</template>
+              </span>
+            </span>
+          </li>
+        </ul>
+        <button
+          v-if="canManagePerms && single"
+          type="button"
+          class="fe-btn fe-btn--sm"
+          @click="emit('manage-permissions', single)"
+        >{{ t('inspector.people.manage') }}</button>
+      </section>
+
       <!-- ══ Paylaşımlar ══ -->
-      <section v-if="sharesState === 'ok'" class="fe-inspector__section">
-        <h3 class="fe-inspector__heading">{{ t('inspector.section.shares') }}</h3>
-        <p v-if="shares.length === 0" class="fe-inspector__empty">
+      <section
+        v-if="sharesState === 'ok' && (!tabs || tab === 'details')"
+        class="fe-inspector__section"
+        data-testid="inspector-shares"
+      >
+        <h3 class="fe-inspector__heading">
+          {{ tabs ? t('inspector.link') : t('inspector.section.shares') }}
+        </h3>
+        <!-- surucu:d1 — the mockup's link row: what the state IS, and the one
+             button that changes it. Only when there is no link yet; the list
+             below is what an item that HAS links has always shown. -->
+        <div v-if="tabs && shares.length === 0" class="fe-inspector__linkrow">
+          <span class="fe-inspector__linkicon" aria-hidden="true">🔗</span>
+          <span class="fe-inspector__linknone">{{ t('inspector.link.none') }}</span>
+          <button
+            type="button"
+            class="fe-btn fe-btn--sm"
+            :disabled="shareBusy || !single"
+            data-testid="inspector-create-link"
+            @click="createLink"
+          >{{ t('inspector.link.create') }}</button>
+        </div>
+        <p v-else-if="shares.length === 0" class="fe-inspector__empty">
           {{ t('inspector.shares.empty') }}
         </p>
         <ul v-else class="fe-inspector__shares">
@@ -561,7 +769,7 @@ watch(
 
       <!-- ══ calisma:d3 — Yorumlar ══ -->
       <section
-        v-if="commentsState === 'ok' || commentsState === 'error'"
+        v-if="(commentsState === 'ok' || commentsState === 'error') && (!tabs || tab === 'activity')"
         class="fe-inspector__section"
       >
         <h3 class="fe-inspector__heading">
@@ -620,6 +828,21 @@ watch(
         </template>
       </section>
       <!-- ══ /calisma:d3 ══ -->
+
+      <!-- surucu:d1 — the Activity tab with nothing behind it. It says which
+           two feeds fill it, because there is no third one to wait for: this
+           server keeps no per-file audit trail (target_id is empty for every
+           file action, and the log is admin-only). -->
+      <section
+        v-if="tabs && tab === 'activity' && !activityUsable"
+        class="fe-inspector__section"
+        data-testid="inspector-activity-empty"
+      >
+        <p class="fe-inspector__empty">
+          {{ single ? t('inspector.activity.empty') : t('inspector.activity.select') }}
+        </p>
+        <p v-if="single" class="fe-inspector__hint">{{ t('inspector.activity.hint') }}</p>
+      </section>
     </div>
   </aside>
 </template>

package/src/components/ListView.vue

@@ -33,6 +33,15 @@ const props = defineProps<{
   /** Set of node IDs flagged starred by the user — render an inline
    *  filled star indicator and let the user toggle it from the row. */
   starredIds?: Set<number>;
+  /**
+   * Offer the star affordance at all. Follows the Starred view: when the panel
+   * leaves that view out — a shared app token has no single person behind it,
+   * so "your starred files" is one list shown to strangers — offering to star
+   * something is offering to write into that same shared list. Owner's call,
+   * 2026-09-05: "yıldızlı yeri gözükmüyorsa o zaman yıldızla/yıldızı kaldır da
+   * gözükmemeli".
+   */
+  starEnabled?: boolean;
   /** Backend base URL + auth header builder forwarded to StarButton
    *  so it can POST /api/files/manager/star on click. Optional —
    *  embedders without auth wire-up pass nothing and the star column
@@ -390,7 +399,7 @@ const segments = computed<Segment[]>(() => {
       >
         <div class="fe-list__col fe-list__col--star" role="gridcell" @click.stop>
           <StarButton
-            v-if="typeof n.id === 'number' && n.type === 'file'"
+            v-if="starEnabled !== false && typeof n.id === 'number' && n.type === 'file'"
             :starred="!!starredIds?.has(n.id)"
             :node-id="n.id"
             :api-base="apiBase"

package/src/components/SecondaryPane.vue

@@ -64,6 +64,13 @@ const props = defineProps<{
   /** ui-fix — mirror the main panel's virtual `.trash` row at storage root
    *  so both split panes list identical rows (no row-offset). Defaults on. */
   trashVisible?: boolean;
+  /**
+   * The navigation panel is already offering Trash, so neither pane draws the
+   * virtual row. Passed down rather than worked out here: the panel belongs to
+   * the host explorer, and a pane that guessed at it is how the two halves of a
+   * split end up listing different rows.
+   */
+  navOffersTrash?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -114,7 +121,14 @@ async function loadPane(target?: string): Promise<void> {
     // Same internal-entry filter + virtual `.trash` row as the main panel
     // (shared helpers → both split panes list identical rows, no offset).
     files.value = filterListing(resp.files);
-    if (injectTrashRow(files.value, resp.adapter, resp.dirname, props.trashVisible !== false)) {
+    if (
+      injectTrashRow(files.value, resp.adapter, resp.dirname, props.trashVisible !== false, {
+        // ⚠ The panel is a sibling of BOTH panes. If it is offering Trash, this
+        // pane must drop the row too — otherwise the duplication is not removed,
+        // it just moves to the right-hand half of a split.
+        navOffersTrash: props.navOffersTrash,
+      })
+    ) {
       void hydrateTrashRow(files.value, resp.adapter, props.api);
     }
     path.value = props.toUser(resp.dirname);

package/src/components/SideNav.vue

@@ -30,7 +30,8 @@
  */
 import { computed, ref } from 'vue';
 import { useLocale } from '../composables/useLocale';
-import type { LocaleCode } from '../types/ExplorerConfig';
+import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
+import ContextMenu, { type ContextAction } from './ContextMenu.vue';
 
 /** The virtual listings the panel can open. '' = an ordinary folder. */
 export type NavView = '' | 'recent' | 'starred' | 'shared' | 'trash' | 'tag';
@@ -98,6 +99,37 @@ const props = defineProps<{
   /** RBAC/root state — false hides the write affordances. */
   canWrite?: boolean;
   locale: LocaleCode;
+  /* === surucu:d1 — the Drive shell ==================================== */
+  /**
+   * Fold the primary actions into ONE "+ New" menu (`uiProfile: 'drive'`).
+   *
+   * Absent/false keeps the two-button block every other profile has had since
+   * v0.30.1 — Upload as the primary, New folder one step quieter — so this is
+   * additive and nothing that mounts the package today moves.
+   *
+   * ⚠ The menu holds what the explorer can ALREADY do: upload files, make a
+   * folder (the modal offers the encrypted variant from inside itself), and
+   * ask somebody else for files. There is deliberately no "Upload folder": the
+   * upload path takes a flat `File[]` and would have to create the intermediate
+   * directories itself, and an entry that quietly flattens someone's folder into
+   * one heap is worse than an entry that is not there.
+   */
+  newMenu?: boolean;
+  /** Offer "Request files" in that menu — a folder we may write to and share. */
+  canRequestFiles?: boolean;
+  /**
+   * The signed-in person's storage line, from `GET /api/files/quota/me`. Null
+   * (the default) renders nothing at all.
+   *
+   * ⚠ It is a PER-USER figure, not this storage's — `quota.Snapshot` sums
+   * `nodes.size WHERE owner_id = me`, and there is no per-provider quota
+   * (internal/quota/service.go). The mockup labels it with the drive's name;
+   * that would be a lie about which number this is, so the label says
+   * "Storage" and the drive name stays out of it.
+   */
+  quota?: { used: number; total: number; unlimited: boolean } | null;
+  /** Resolved theme — the teleported New menu leaves the `.fe` variable scope. */
+  theme?: ThemeMode;
 }>();
 
 const emit = defineEmits<{
@@ -110,6 +142,8 @@ const emit = defineEmits<{
   (e: 'new-folder'): void;
   (e: 'open-connections'): void;
   (e: 'open-tokens'): void;
+  /* surucu:d1 — "Request files": the access modal on THIS folder, drop tab. */
+  (e: 'request-files'): void;
   /** Drawer scrim / Esc — narrow mode only. */
   (e: 'close'): void;
 }>();
@@ -168,6 +202,74 @@ const hiddenTagCount = computed(() => Math.max(0, allTags.value.length - visible
  * answer is still in flight. */
 const showTags = computed(() => !!props.tagsLoaded || allTags.value.length > 0);
 
+/* === surucu:d1 — the "+ New" menu ====================================
+ * One primary action instead of two buttons, the shape the reporter drew and
+ * the shape Drive/FileRun/Nextcloud share. It is the SAME ContextMenu the
+ * right-click menu uses — teleported to <body>, so the panel's own scroll
+ * container cannot clip it, and one keyboard/focus behaviour for both. */
+const newBtnEl = ref<HTMLElement | null>(null);
+const newMenuRef = ref<InstanceType<typeof ContextMenu> | null>(null);
+
+const newActions = computed<ContextAction[]>(() => {
+  const list: ContextAction[] = [
+    { key: 'upload', label: t('drive.new.upload'), icon: '⬆', disabled: !writable.value },
+    { key: 'new-folder', label: t('drive.new.folder'), icon: '📁', disabled: !writable.value },
+  ];
+  // Only when there is a real folder to hang a drop link on. Rendered as a
+  // disabled row rather than dropped, so the menu does not change height
+  // between folders — a menu whose items move is a menu people misclick.
+  list.push({ divider: true, key: 'new-sep', label: '' });
+  list.push({
+    key: 'request-files',
+    label: t('drive.new.request'),
+    icon: '🔗',
+    disabled: !props.canRequestFiles,
+  });
+  return list;
+});
+
+function openNewMenu() {
+  const r = newBtnEl.value?.getBoundingClientRect();
+  newMenuRef.value?.show(
+    { clientX: r ? r.left : 0, clientY: r ? r.bottom + 6 : 0 } as MouseEvent,
+    [],
+  );
+}
+
+function onNewSelect(a: ContextAction) {
+  if (a.key === 'upload') emit('upload');
+  else if (a.key === 'new-folder') emit('new-folder');
+  else if (a.key === 'request-files') emit('request-files');
+}
+
+/* === surucu:d1 — the storage line =================================== */
+function formatBytes(n: number): string {
+  if (!Number.isFinite(n) || n < 0) return '—';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+  let v = n;
+  let i = 0;
+  while (v >= 1024 && i < units.length - 1) {
+    v /= 1024;
+    i += 1;
+  }
+  const digits = v < 10 && i > 0 ? 1 : 0;
+  return `${v.toFixed(digits)} ${units[i]}`;
+}
+
+const quotaPercent = computed(() => {
+  const q = props.quota;
+  if (!q || q.unlimited || q.total <= 0) return 0;
+  return Math.max(0, Math.min(100, Math.round((q.used / q.total) * 100)));
+});
+
+const quotaText = computed(() => {
+  const q = props.quota;
+  if (!q) return '';
+  return q.unlimited || q.total <= 0
+    ? t('drive.storage.used_unlimited', { used: formatBytes(q.used) })
+    : t('drive.storage.used', { used: formatBytes(q.used), total: formatBytes(q.total) });
+});
+
 const toggleLabel = computed(() =>
   props.narrow
     ? t('sidenav.close')
@@ -238,7 +340,35 @@ const toggleLabel = computed(() =>
          that appears and disappears makes every row below it jump by 90px each
          time the user opens a view, which reads as the panel reloading. -->
     <div class="fe-sidenav__primary">
+      <!-- surucu:d1 — one primary action, the shape #14's mockups draw. The
+           two-button block below is what every other profile still renders. -->
+      <button
+        v-if="newMenu"
+        ref="newBtnEl"
+        type="button"
+        class="fe-sidenav__new"
+        aria-haspopup="menu"
+        :title="t('drive.new')"
+        :aria-label="t('drive.new')"
+        data-testid="sidenav-new"
+        @click="openNewMenu"
+      >
+        <svg
+          class="fe-ficon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path d="M12 5v14M5 12h14" />
+        </svg>
+        <span v-if="showLabels" class="fe-sidenav__text">{{ t('drive.new') }}</span>
+      </button>
       <button
+        v-if="!newMenu"
         type="button"
         class="fe-sidenav__upload"
         :disabled="!writable"
@@ -265,6 +395,7 @@ const toggleLabel = computed(() =>
         <span v-if="showLabels" class="fe-sidenav__text">{{ t('toolbar.upload') }}</span>
       </button>
       <button
+        v-if="!newMenu"
         type="button"
         class="fe-sidenav__secondary"
         :disabled="!writable"
@@ -568,5 +699,34 @@ const toggleLabel = computed(() =>
         </ul>
       </div>
     </div>
+
+    <!-- surucu:d1 — the storage line. Under the navigation, above nothing:
+         it is the last thing in the panel because it is a status, not a
+         destination. Hidden entirely when the server did not answer (an app
+         token has no person to have a quota) rather than drawn empty. -->
+    <div v-if="quota" class="fe-sidenav__quota" data-testid="sidenav-quota">
+      <p v-if="showLabels" class="fe-sidenav__quota-label">{{ t('drive.storage.label') }}</p>
+      <div
+        class="fe-sidenav__quota-bar"
+        role="progressbar"
+        :aria-valuenow="quotaPercent"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        :aria-label="quotaText"
+        :title="quotaText"
+      >
+        <span class="fe-sidenav__quota-fill" :style="{ width: quotaPercent + '%' }"></span>
+      </div>
+      <p v-if="showLabels" class="fe-sidenav__quota-text">{{ quotaText }}</p>
+    </div>
+
+    <ContextMenu
+      v-if="newMenu"
+      ref="newMenuRef"
+      :locale="locale"
+      :theme="theme"
+      :actions="newActions"
+      @select="onNewSelect"
+    />
   </nav>
 </template>