@brftech/filex-core 0.30.1 → 0.32.0

package/src/components/SideNav.vue

@@ -28,12 +28,13 @@
  * hash does not match in the web-component build, so the rules silently stop
  * applying in every embed (measured on the share dialog: raw unstyled HTML).
  */
-import { computed } from 'vue';
+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';
+export type NavView = '' | 'recent' | 'starred' | 'shared' | 'trash' | 'tag';
 
 export interface NavStorage {
   name: string;
@@ -61,6 +62,20 @@ const props = defineProps<{
   sharedStorages?: string[];
   /** Show the Trash entry (mirrors ExplorerConfig.trashVisible). */
   trashVisible?: boolean;
+  /* === etiket:t1 — the Tags section ==================================
+   * "Tagged files should show up inside the tag." Tags are the one
+   * navigation family whose entries are USER data: unbounded in number and
+   * dynamic in name. Still presentational here — the host fetches
+   * `tags/all` (once, cached) and hands the list over, exactly as it does
+   * for storages. */
+  /** Every tag that exists, alphabetical. Empty → the section shows its own
+   *  "no tags yet" line rather than disappearing. */
+  tags?: string[];
+  /** False until the first answer arrives, so "no tags yet" is never shown
+   *  to somebody who is simply still waiting. */
+  tagsLoaded?: boolean;
+  /** The tag currently on screen (activeView === 'tag'). */
+  activeTag?: string;
   /**
    * Show the Connections entries — "How to connect" and "API keys".
    * ⚠ Never derived from a role here or anywhere: the backend decides what a
@@ -68,20 +83,67 @@ const props = defineProps<{
    * accounts that need it (see ExplorerConfig.connections).
    */
   showConnections?: boolean;
+  /**
+   * Draw the surfaces that only mean something for ONE person: API keys,
+   * Recent, Starred, Shared with me. False when the caller is an app token —
+   * a host proxy's shared credential, where "your keys" would be the proxy's
+   * own and "your Recent" would be the token owner's history shown to a
+   * stranger (see ExplorerConfig.callerKind).
+   *
+   * ⚠ This is a KIND check, not the role check the comment above forbids, and
+   * it is not the whole panel: Upload, the storages, Trash and "How to
+   * connect" stay — an embed's users still upload and still mount. An embedder
+   * who wants no panel at all already has `sideNav: false`.
+   */
+  showIdentitySurfaces?: boolean;
   /** 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<{
   (e: 'toggle'): void;
-  (e: 'open-view', view: Exclude<NavView, ''>): void;
+  (e: 'open-view', view: Exclude<NavView, '' | 'tag'>): void;
+  (e: 'open-tag', tag: string): void;
   (e: 'open-storage', name: string): void;
   (e: 'open-root'): void;
   (e: 'upload'): void;
   (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;
 }>();
@@ -95,18 +157,119 @@ const showLabels = computed(() => props.expanded || !!props.narrow);
 
 const sharedSet = computed(() => new Set(props.sharedStorages ?? []));
 
+/** The views that answer "what did *I* do" — dropped for an app token. */
+const IDENTITY_VIEWS = new Set<string>(['recent', 'starred', 'shared']);
+
 const views = computed(() => {
-  const list: Array<{ key: Exclude<NavView, ''>; label: string }> = [
+  const list: Array<{ key: Exclude<NavView, '' | 'tag'>; label: string }> = [
     { key: 'recent', label: t('sidenav.recent') },
     { key: 'starred', label: t('sidenav.starred') },
     { key: 'shared', label: t('sidenav.shared') },
   ];
   if (props.trashVisible !== false) list.push({ key: 'trash', label: t('sidenav.trash') });
+  // Filtered at the end rather than built conditionally: Trash is shared by
+  // everyone and the list keeps growing, so one rule at the bottom beats a
+  // condition wrapped around each entry.
+  if (props.showIdentitySurfaces === false) return list.filter((v) => !IDENTITY_VIEWS.has(v.key));
   return list;
 });
 
 const writable = computed(() => props.canWrite !== false);
 
+/* === etiket:t1 — an unbounded list in a fixed panel ====================
+ * A user with sixty tags must not push Storages and Connections off the
+ * bottom of the panel, and must not be handed sixty identical glyphs on a
+ * 56px rail either.
+ *
+ *   expanded / drawer → the first TAG_PEEK, then "Show all (N)". Both states
+ *                       scroll (.fe-sidenav__scroll), so this is about the
+ *                       sections BELOW staying reachable, not about overflow.
+ *   rail             → ONE "Tags" button that opens the panel. Sixty rail
+ *                       icons would be sixty copies of the same glyph with no
+ *                       label — the rail's contract is "every destination one
+ *                       click away", and this keeps it with one click more.
+ */
+const TAG_PEEK = 8;
+const tagsExpanded = ref(false);
+const allTags = computed(() => props.tags ?? []);
+const visibleTags = computed(() =>
+  tagsExpanded.value ? allTags.value : allTags.value.slice(0, TAG_PEEK),
+);
+const hiddenTagCount = computed(() => Math.max(0, allTags.value.length - visibleTags.value.length));
+/* The section is rendered as soon as the panel knows there ARE tags, and also
+ * once the answer came back empty — an empty section that says why is how a
+ * user learns the feature exists at all. It stays hidden only while the first
+ * 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')
@@ -177,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"
@@ -204,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"
@@ -278,6 +470,105 @@ const toggleLabel = computed(() =>
         </li>
       </ul>
 
+      <!-- etiket:t1 — Tags. Between the views and the storages because a tag
+           IS a view (a listing with no folder behind it), not a place files
+           live. On the rail it collapses to one button that opens the panel:
+           sixty tags would otherwise be sixty copies of one glyph with no
+           label, and the rail's promise is that every destination stays one
+           click away. -->
+      <div v-if="showTags" class="fe-sidenav__section">
+        <template v-if="showLabels">
+          <p class="fe-sidenav__heading">{{ t('sidenav.tags') }}</p>
+          <ul class="fe-sidenav__group" :aria-label="t('sidenav.tags')">
+            <li v-for="tag in visibleTags" :key="tag">
+              <button
+                type="button"
+                class="fe-sidenav__item fe-sidenav__item--tag"
+                :class="{ 'is-active': activeView === 'tag' && activeTag === tag }"
+                :aria-current="activeView === 'tag' && activeTag === tag ? 'page' : undefined"
+                :title="tag"
+                :aria-label="tag"
+                :data-testid="`sidenav-tag-${tag}`"
+                @click="emit('open-tag', tag)"
+              >
+                <svg
+                  class="fe-ficon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.8"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  focusable="false"
+                >
+                  <path d="M4 4.5h7l9 9-6.5 6.5-9-9z" />
+                  <circle cx="8" cy="8.5" r="1.4" />
+                </svg>
+                <span class="fe-sidenav__text">{{ tag }}</span>
+              </button>
+            </li>
+            <!-- Nothing tagged yet: the section stays, and says how tags get
+                 made. A section that only exists once you already know the
+                 feature teaches nobody. -->
+            <li v-if="allTags.length === 0">
+              <p class="fe-sidenav__hint">{{ t('sidenav.tags.empty') }}</p>
+            </li>
+            <li v-if="hiddenTagCount > 0">
+              <button
+                type="button"
+                class="fe-sidenav__more"
+                data-testid="sidenav-tags-more"
+                @click="tagsExpanded = true"
+              >
+                {{ t('sidenav.tags.more', { count: hiddenTagCount }) }}
+              </button>
+            </li>
+            <li v-else-if="tagsExpanded && allTags.length > 8">
+              <button
+                type="button"
+                class="fe-sidenav__more"
+                data-testid="sidenav-tags-less"
+                @click="tagsExpanded = false"
+              >
+                {{ t('sidenav.tags.less') }}
+              </button>
+            </li>
+          </ul>
+        </template>
+        <template v-else>
+          <hr class="fe-sidenav__rule" aria-hidden="true" />
+          <ul class="fe-sidenav__group" :aria-label="t('sidenav.tags')">
+            <li>
+              <button
+                type="button"
+                class="fe-sidenav__item"
+                :class="{ 'is-active': activeView === 'tag' }"
+                :title="t('sidenav.tags')"
+                :aria-label="t('sidenav.tags')"
+                data-testid="sidenav-tags-rail"
+                @click="emit('toggle')"
+              >
+                <svg
+                  class="fe-ficon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.8"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  focusable="false"
+                >
+                  <path d="M4 4.5h7l9 9-6.5 6.5-9-9z" />
+                  <circle cx="8" cy="8.5" r="1.4" />
+                </svg>
+              </button>
+            </li>
+          </ul>
+        </template>
+      </div>
+
       <div v-if="storages.length" class="fe-sidenav__section">
         <p v-if="showLabels" class="fe-sidenav__heading">{{ t('sidenav.storages') }}</p>
         <hr v-else class="fe-sidenav__rule" aria-hidden="true" />
@@ -375,7 +666,10 @@ const toggleLabel = computed(() =>
               <span v-if="showLabels" class="fe-sidenav__text">{{ t('sidenav.connect') }}</span>
             </button>
           </li>
-          <li>
+          <!-- API keys is the person half of this section: "How to connect"
+               stays for an app token (mount instructions are not identity),
+               the keys go. -->
+          <li v-if="showIdentitySurfaces !== false">
             <button
               type="button"
               class="fe-sidenav__item"
@@ -405,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>

package/src/components/StarButton.vue

@@ -6,7 +6,10 @@
  * `POST /api/files/manager/star`). Optimistic update — flips the local
  * state immediately and rolls back on API error.
  */
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
+import { setNodeStarred } from '../lib/star';
+import { useLocale } from '../composables/useLocale';
+import type { LocaleCode } from '../types/ExplorerConfig';
 
 const props = defineProps<{
   starred: boolean;
@@ -21,6 +24,17 @@ const props = defineProps<{
   authCredentials?: RequestCredentials;
   /** Compact mode for grid view (no label, just the icon). */
   compact?: boolean;
+  /**
+   * Card mode — the same button sitting ON a grid/gallery tile instead of in
+   * a list cell: a round translucent chip in the tile's corner. It is the SAME
+   * component, deliberately: a card star written separately is a second
+   * starring path, and the two drift the first time one of them is fixed.
+   */
+  card?: boolean;
+  /** Locale for the title/label. ⚠ The strings used to be hardcoded English
+   *  ("Star"/"Unstar"), which is a Turkish user's only untranslated control in
+   *  the row. */
+  locale?: LocaleCode;
 }>();
 
 const emit = defineEmits<{
@@ -31,22 +45,18 @@ const emit = defineEmits<{
 const local = ref(props.starred);
 watch(() => props.starred, (v) => { local.value = v; });
 
+const { t } = useLocale(() => props.locale ?? 'tr');
+const label = computed(() => t(local.value ? 'ctx.unstar' : 'ctx.star'));
+
 async function toggle() {
   const next = !local.value;
   local.value = next; // optimistic
   try {
-    const headers = {
-      'Content-Type': 'application/json',
-      ...(await (props.authHeaders ?? (() => ({})))()),
-    };
-    const base = props.apiBase ?? '';
-    const res = await fetch(`${base}/api/files/manager/star`, {
-      method: 'POST',
-      headers,
-      credentials: props.authCredentials ?? 'same-origin',
-      body: JSON.stringify({ node_id: props.nodeId, starred: next }),
+    await setNodeStarred(props.nodeId, next, {
+      apiBase: props.apiBase,
+      authHeaders: props.authHeaders,
+      authCredentials: props.authCredentials,
     });
-    if (!res.ok) throw new Error(`star toggle failed: ${res.status}`);
     emit('change', next);
   } catch (err) {
     local.value = !next; // rollback
@@ -59,9 +69,11 @@ async function toggle() {
   <button
     type="button"
     class="filex-star-btn"
-    :class="{ 'is-starred': local, 'is-compact': compact }"
+    :class="{ 'is-starred': local, 'is-compact': compact, 'is-card': card }"
     :aria-pressed="local"
-    :title="local ? 'Unstar' : 'Star'"
+    :title="label"
+    :aria-label="label"
+    data-testid="star-toggle"
     @click.stop="toggle"
   >
     <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
@@ -73,7 +85,7 @@ async function toggle() {
         d="M12 2.5l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 18.27l-6.18 3.23L7 14.63 2 9.76l6.91-1z"
       />
     </svg>
-    <span v-if="!compact" class="filex-star-label">{{ local ? 'Starred' : 'Star' }}</span>
+    <span v-if="!compact" class="filex-star-label">{{ label }}</span>
   </button>
 </template>