@brftech/filex-core 0.30.1 → 0.31.0

package/src/components/Breadcrumb.vue

@@ -21,7 +21,7 @@
  */
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import { hasInternalDrag } from '../lib/dragOut';
-import { VIRTUAL_SEGMENTS } from '../lib/listing';
+import { virtualSegmentLabel } from '../lib/listing';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
 
@@ -125,7 +125,9 @@ const crumbs = computed<Crumb[]>(() => {
     // gezinti:g1 — the sentinel segments the virtual views park in `dirname`
     // (`.trash` predates them). Without a mapping the crumb reads ".starred",
     // which is a filename the user never typed and cannot navigate to.
-    const label = VIRTUAL_SEGMENTS[part] ? t(VIRTUAL_SEGMENTS[part]) : part;
+    // etiket:t1 — via the shared resolver, which also knows the tag view's
+    // `.tag~<name>` segment; the raw map only covers the fixed-label views.
+    const label = virtualSegmentLabel(part, t) || part;
     out.push({ label, adapterPath: `${adapterPrefix}${acc}` });
   }
   return out;

package/src/components/E2eRecoveryUnlockModal.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+/**
+ * E2eRecoveryUnlockModal — open an encrypted folder without its password.
+ *
+ * Two doors, and the dialog is explicit about which one you are using
+ * because they are not equivalent:
+ *
+ *   - the USER RECOVERY KEY, shown once when the folder was created. Opens
+ *     the folder and nobody is told, because it is your key.
+ *   - the ESCROW KEY, held by the operator of this installation. Opening a
+ *     folder with it NOTIFIES the folder's owner. The dialog says so before
+ *     the key is typed, not after.
+ *
+ * The component collects input and validates its shape. All crypto and all
+ * network calls happen in the parent (FileExplorer), which owns the marker
+ * and the key ring — same division as the password lock screen.
+ */
+import { computed, ref, watch } from 'vue';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+import { parseRecoveryKey } from '../lib/e2ecrypto';
+import Modal from '../modals/Modal.vue';
+
+const props = defineProps<{
+  open: boolean;
+  locale: LocaleCode;
+  /** The folder has a user recovery key slot (v2 markers created since 0.31). */
+  hasRecovery: boolean;
+  /** The folder has an escrow slot AND this installation has escrow enabled. */
+  hasEscrow: boolean;
+  /** Short id of the escrow key the folder was sealed to. */
+  escrowKid?: string | null;
+  busy?: boolean;
+  /** Set by the parent after a failed attempt. */
+  error?: string | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'submit', payload: { mode: 'recovery' | 'escrow'; value: string }): void;
+}>();
+
+const { t } = useLocale(() => props.locale);
+const mode = ref<'recovery' | 'escrow'>('recovery');
+const recoveryValue = ref('');
+const escrowValue = ref('');
+const localErr = ref<string | null>(null);
+
+watch(
+  () => props.open,
+  (v) => {
+    if (v) {
+      mode.value = props.hasRecovery ? 'recovery' : 'escrow';
+      recoveryValue.value = '';
+      escrowValue.value = '';
+      localErr.value = null;
+    }
+  },
+);
+
+/** A folder with neither slot is a pre-0.31 folder: the password is the
+ *  only way in, and saying so is more useful than an empty dialog. */
+const nothingAvailable = computed(() => !props.hasRecovery && !props.hasEscrow);
+
+const shownError = computed(() => localErr.value || props.error || null);
+
+function submit() {
+  if (props.busy || nothingAvailable.value) return;
+  localErr.value = null;
+  if (mode.value === 'recovery') {
+    // Check the shape locally so a typo reads as a typo rather than as a
+    // wrong key — the two failures call for different next steps.
+    if (!parseRecoveryKey(recoveryValue.value)) {
+      localErr.value = t('e2e.recover.bad_format');
+      return;
+    }
+    emit('submit', { mode: 'recovery', value: recoveryValue.value });
+    return;
+  }
+  if (!escrowValue.value.trim()) {
+    localErr.value = t('e2e.recover.escrow_required');
+    return;
+  }
+  emit('submit', { mode: 'escrow', value: escrowValue.value });
+}
+</script>
+
+<template>
+  <Modal :open="open" :title="t('e2e.recover.title')" size="sm" @close="emit('close')">
+    <div class="fe-e2e-recover">
+      <p v-if="nothingAvailable" class="fe-e2e-recover__none">
+        {{ t('e2e.recover.none') }}
+      </p>
+
+      <template v-else>
+        <div v-if="hasRecovery && hasEscrow" class="fe-e2e-recover__tabs" role="tablist">
+          <button
+            type="button"
+            role="tab"
+            class="fe-e2e-recover__tab"
+            :class="{ 'fe-e2e-recover__tab--on': mode === 'recovery' }"
+            :aria-selected="mode === 'recovery'"
+            @click="mode = 'recovery'"
+          >
+            {{ t('e2e.recover.tab_recovery') }}
+          </button>
+          <button
+            type="button"
+            role="tab"
+            class="fe-e2e-recover__tab"
+            :class="{ 'fe-e2e-recover__tab--on': mode === 'escrow' }"
+            :aria-selected="mode === 'escrow'"
+            @click="mode = 'escrow'"
+          >
+            {{ t('e2e.recover.tab_escrow') }}
+          </button>
+        </div>
+
+        <form v-if="mode === 'recovery'" class="fe-e2e-form" @submit.prevent="submit">
+          <p class="fe-e2e-recover__hint">{{ t('e2e.recover.recovery_hint') }}</p>
+          <input
+            v-model="recoveryValue"
+            type="text"
+            class="fe-input fe-e2e-recover__key"
+            :placeholder="t('e2e.recover.recovery_placeholder')"
+            autocomplete="off"
+            spellcheck="false"
+            :disabled="busy"
+          />
+        </form>
+
+        <form v-else class="fe-e2e-form" @submit.prevent="submit">
+          <div class="fe-e2e-warn" role="alert">
+            <strong>{{ t('e2e.recover.escrow_warn_title') }}</strong>
+            <p>{{ t('e2e.recover.escrow_warn_body') }}</p>
+          </div>
+          <p v-if="escrowKid" class="fe-e2e-recover__hint">
+            {{ t('e2e.recover.escrow_kid') }}: <code>{{ escrowKid }}</code>
+          </p>
+          <textarea
+            v-model="escrowValue"
+            class="fe-input fe-e2e-recover__escrow"
+            rows="5"
+            :placeholder="t('e2e.recover.escrow_placeholder')"
+            autocomplete="off"
+            spellcheck="false"
+            :disabled="busy"
+          ></textarea>
+        </form>
+      </template>
+
+      <p v-if="shownError" class="fe-form__error">{{ shownError }}</p>
+    </div>
+    <template #actions>
+      <button type="button" class="fe-btn" :disabled="busy" @click="emit('close')">
+        {{ t('modal.newfolder.cancel') }}
+      </button>
+      <button
+        type="button"
+        class="fe-btn fe-btn--primary"
+        :disabled="busy || nothingAvailable"
+        @click="submit"
+      >
+        {{ busy ? t('e2e.recover.busy') : t('e2e.recover.unlock') }}
+      </button>
+    </template>
+  </Modal>
+</template>

package/src/components/EncryptedFolderModal.vue

@@ -20,6 +20,10 @@ const props = defineProps<{
   locale: LocaleCode;
   /** True while the parent is creating the folder + uploading the marker. */
   busy?: boolean;
+  /** Short id of this installation's E2E escrow key, when one is configured.
+   *  Shown BEFORE the folder is created: escrow means the operator can open
+   *  it without the password, and that is not a detail to discover later. */
+  escrowKid?: string | null;
 }>();
 
 const emit = defineEmits<{
@@ -107,6 +111,12 @@ function submit() {
         <strong>{{ t('e2e.create.warn_title') }}</strong>
         <p>{{ t('e2e.create.warn_body') }}</p>
       </div>
+      <!-- wiring:e2 recovery — disclosure, not a setting. The user cannot
+           turn escrow off for their folder; they can only know about it. -->
+      <div v-if="escrowKid" class="fe-e2e-rk__escrow" role="note">
+        <strong>{{ t('e2e.create.escrow_title') }}</strong>
+        <p>{{ t('e2e.create.escrow_body') }}</p>
+      </div>
       <label class="fe-e2e-ack">
         <input v-model="ack" type="checkbox" :disabled="busy" />
         <span>{{ t('e2e.create.ack') }}</span>

package/src/components/GalleryView.vue

@@ -14,6 +14,7 @@ import type { FileNode } from '../types/FileNode';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
 import { fileIconSvg } from '../lib/fileIcons';
+import StarButton from './StarButton.vue';
 import { applyDragGhost } from '../lib/dragGhost';
 
 const props = defineProps<{
@@ -27,6 +28,19 @@ const props = defineProps<{
    *  GridView: raw `thumb_url` is root-relative and unauthenticated, so
    *  embedded hosts NEED this. null = icon fallback. */
   thumbSrc?: (n: FileNode) => string | null;
+  /**
+   * Starring on a card. Same contract as ListView: the id set the explorer
+   * keeps, plus the API wiring StarButton needs. Absent apiBase → no star is
+   * rendered at all, exactly as in the list.
+   *
+   * ⚠ Not list-only. The Starred VIEW shipped before starring was reachable
+   * from anywhere but the list, so a user in grid view — the mode the panel's
+   * own screenshots show — had a view they could not fill.
+   */
+  starredIds?: Set<number>;
+  apiBase?: string;
+  authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
+  authCredentials?: RequestCredentials;
 }>();
 
 const emit = defineEmits<{
@@ -35,6 +49,7 @@ const emit = defineEmits<{
   (e: 'context-card', node: FileNode, ev: MouseEvent): void;
   (e: 'item-drag-start', node: FileNode, ev: DragEvent): void;
   (e: 'item-drop-into', target: FileNode, ev: DragEvent): void;
+  (e: 'star-change', node: FileNode, value: boolean): void;
 }>();
 
 const { t, formatSize, nodeDisplayName } = useLocale(() => props.locale);
@@ -43,6 +58,12 @@ function thumbOf(n: FileNode): string | null {
   return props.thumbSrc ? props.thumbSrc(n) : (n.thumb_url ?? null);
 }
 
+/** A card carries a star when the host wired the API and the node is a file
+ *  with a server id — the same rule the list row uses. */
+function canStar(n: FileNode): boolean {
+  return props.apiBase !== undefined && typeof n.id === 'number' && n.type === 'file';
+}
+
 function isSelected(n: FileNode): boolean {
   return props.selected.has(n.path);
 }
@@ -196,6 +217,22 @@ function metaFor(n: FileNode): string {
         <span v-else-if="specialEmojiFor(n)" class="fe-gal__icon">{{ specialEmojiFor(n) }}</span>
         <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
         <span v-else class="fe-gal__icon fe-gal__icon--svg" v-html="fileIconSvg(n)"></span>
+        <!-- Same star chip as the grid, same component, same rule: painted
+             when starred, on hover/focus otherwise. It sits above .fe-gal__meta
+             (which is aria-hidden and covers the tile's foot on hover). -->
+        <div v-if="canStar(n)" class="fe-gal__star" @click.stop @dblclick.stop>
+          <StarButton
+            :starred="!!starredIds?.has(n.id!)"
+            :node-id="n.id!"
+            :api-base="apiBase"
+            :auth-headers="authHeaders"
+            :auth-credentials="authCredentials"
+            :locale="locale"
+            compact
+            card
+            @change="(val: boolean) => emit('star-change', n, val)"
+          />
+        </div>
         <div class="fe-gal__meta" aria-hidden="true">
           <span v-if="metaFor(n)" class="fe-gal__meta-line">{{ metaFor(n) }}</span>
           <span

package/src/components/GridView.vue

@@ -8,6 +8,7 @@ import { hasInternalDrag } from '../lib/dragOut';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
 import { fileIconSvg } from '../lib/fileIcons';
+import StarButton from './StarButton.vue';
 import { snippetSegments } from '../lib/snippet'; /* bul:s3 */
 import { applyDragGhost } from '../lib/dragGhost'; /* wiring:c4 */
 
@@ -25,6 +26,19 @@ const props = defineProps<{
   /** Desktop selective sync: availability badge per tile. Absent on the
    *  web — no badge renders at all. */
   keepBadgeFor?: (n: FileNode) => 'kept' | 'syncing' | 'cloud' | 'partial' | null;
+  /**
+   * Starring on a card. Same contract as ListView: the id set the explorer
+   * keeps, plus the API wiring StarButton needs. Absent apiBase → no star is
+   * rendered at all, exactly as in the list.
+   *
+   * ⚠ Not list-only. The Starred VIEW shipped before starring was reachable
+   * from anywhere but the list, so a user in grid view — the mode the panel's
+   * own screenshots show — had a view they could not fill.
+   */
+  starredIds?: Set<number>;
+  apiBase?: string;
+  authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
+  authCredentials?: RequestCredentials;
 }>();
 
 const emit = defineEmits<{
@@ -33,6 +47,7 @@ const emit = defineEmits<{
   (e: 'context-card', node: FileNode, ev: MouseEvent): void;
   (e: 'item-drag-start', node: FileNode, ev: DragEvent): void;
   (e: 'item-drop-into', target: FileNode, ev: DragEvent): void;
+  (e: 'star-change', node: FileNode, value: boolean): void;
 }>();
 
 const { t, formatSize, nodeDisplayName } = useLocale(() => props.locale);
@@ -43,6 +58,12 @@ function thumbOf(n: FileNode): string | null {
   return props.thumbSrc ? props.thumbSrc(n) : (n.thumb_url ?? null);
 }
 
+/** A card carries a star when the host wired the API and the node is a file
+ *  with a server id — the same rule the list row uses. */
+function canStar(n: FileNode): boolean {
+  return props.apiBase !== undefined && typeof n.id === 'number' && n.type === 'file';
+}
+
 function isSelected(n: FileNode): boolean {
   return props.selected.has(n.path);
 }
@@ -213,6 +234,24 @@ function snippetTitle(snippet: string): string {
         <span v-else-if="specialEmojiFor(n)" class="fe-grid__icon">{{ specialEmojiFor(n) }}</span>
         <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
         <span v-else class="fe-grid__icon fe-grid__icon--svg" v-html="fileIconSvg(n)"></span>
+        <!-- Star, ON the tile. A hover-only affordance would be invisible to
+             the person looking for what they starred, so the chip is always
+             painted once the file IS starred and only appears on hover/focus
+             otherwise (see .fe-grid__star in styles/base.css). @click.stop so
+             starring never doubles as a card selection. -->
+        <div v-if="canStar(n)" class="fe-grid__star" @click.stop @dblclick.stop>
+          <StarButton
+            :starred="!!starredIds?.has(n.id!)"
+            :node-id="n.id!"
+            :api-base="apiBase"
+            :auth-headers="authHeaders"
+            :auth-credentials="authCredentials"
+            :locale="locale"
+            compact
+            card
+            @change="(val: boolean) => emit('star-change', n, val)"
+          />
+        </div>
       </div>
       <div class="fe-grid__label" :title="n.basename">
         {{ nodeDisplayName(n) }}

package/src/components/ListView.vue

@@ -396,6 +396,7 @@ const segments = computed<Segment[]>(() => {
             :api-base="apiBase"
             :auth-headers="authHeaders"
             :auth-credentials="authCredentials"
+            :locale="locale"
             compact
             @change="(val: boolean) => emit('star-change', n, val)"
           />

package/src/components/RecoveryKeyModal.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+/**
+ * RecoveryKeyModal — shows a folder recovery key, exactly once (wiring:e2).
+ *
+ * This is the only moment the key exists anywhere outside the user's own
+ * records. filex does not store it, cannot recompute it, and will never be
+ * able to show it again — so the dialog is deliberately hard to dismiss by
+ * accident: no backdrop close, no cancel button, and an acknowledgement the
+ * user has to tick.
+ *
+ * ⚠ The key must not leave this component. No logging, no analytics, no
+ * emit carrying its value. Copy and download are both local.
+ *
+ * Crypto scheme: docs/E2E-ENCRYPTION.md and lib/e2ecrypto.ts.
+ */
+import { computed, ref, watch } from 'vue';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+import Modal from '../modals/Modal.vue';
+
+const props = defineProps<{
+  open: boolean;
+  locale: LocaleCode;
+  /** The key itself. Shown, copied, downloaded — never emitted or stored. */
+  recoveryKey: string;
+  /** Folder name, for the downloaded file and the dialog copy. */
+  folderName?: string;
+  /** Set when this installation holds an escrow key for the folder too. */
+  escrowKid?: string | null;
+  /** 'created' = a new folder; 'upgraded' = an existing folder gained recovery. */
+  variant?: 'created' | 'upgraded';
+}>();
+
+const emit = defineEmits<{ (e: 'close'): void }>();
+
+const { t } = useLocale(() => props.locale);
+const ack = ref(false);
+const copied = ref(false);
+
+watch(
+  () => props.open,
+  (v) => {
+    if (v) {
+      ack.value = false;
+      copied.value = false;
+    }
+  },
+);
+
+const title = computed(() =>
+  props.variant === 'upgraded' ? t('e2e.recovery.title_upgraded') : t('e2e.recovery.title'),
+);
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(props.recoveryKey);
+    copied.value = true;
+    window.setTimeout(() => (copied.value = false), 2000);
+  } catch {
+    // Clipboard permission denied (or a non-secure origin). The key is on
+    // screen and selectable, so this is a convenience, not the only route.
+    copied.value = false;
+  }
+}
+
+function download() {
+  const name = props.folderName || 'folder';
+  const body =
+    `filex recovery key\n` +
+    `folder: ${name}\n` +
+    `\n${props.recoveryKey}\n\n` +
+    `This key opens the encrypted folder without its password.\n` +
+    `Anyone holding it can read the folder. Store it like a password.\n` +
+    `filex does not keep a copy and cannot show it again.\n`;
+  const url = URL.createObjectURL(new Blob([body], { type: 'text/plain' }));
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `filex-recovery-${name}.txt`;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 30_000);
+}
+
+function done() {
+  if (!ack.value) return;
+  emit('close');
+}
+</script>
+
+<template>
+  <!-- No backdrop close, and ESC only lands once the box is ticked: the key
+       cannot be shown again, so an accidental dismissal is data loss. -->
+  <Modal :open="open" :title="title" size="sm" :close-on-backdrop="false" @close="done">
+    <div class="fe-e2e-rk">
+      <p class="fe-e2e-rk__lead">
+        {{ variant === 'upgraded' ? t('e2e.recovery.lead_upgraded') : t('e2e.recovery.lead') }}
+      </p>
+
+      <output class="fe-e2e-rk__key" aria-label="recovery key">{{ recoveryKey }}</output>
+
+      <div class="fe-e2e-rk__actions">
+        <button type="button" class="fe-btn" @click="copy">
+          {{ copied ? t('e2e.recovery.copied') : t('e2e.recovery.copy') }}
+        </button>
+        <button type="button" class="fe-btn" @click="download">
+          {{ t('e2e.recovery.download') }}
+        </button>
+      </div>
+
+      <div class="fe-e2e-warn" role="alert">
+        <strong>{{ t('e2e.recovery.warn_title') }}</strong>
+        <p>{{ t('e2e.recovery.warn_body') }}</p>
+      </div>
+
+      <div v-if="escrowKid" class="fe-e2e-rk__escrow" role="note">
+        <strong>{{ t('e2e.recovery.escrow_title') }}</strong>
+        <p>{{ t('e2e.recovery.escrow_body') }}</p>
+        <p class="fe-e2e-rk__kid">{{ t('e2e.recovery.escrow_kid') }}: <code>{{ escrowKid }}</code></p>
+      </div>
+
+      <label class="fe-e2e-ack">
+        <input v-model="ack" type="checkbox" />
+        <span>{{ t('e2e.recovery.ack') }}</span>
+      </label>
+    </div>
+    <template #actions>
+      <button type="button" class="fe-btn fe-btn--primary" :disabled="!ack" @click="done">
+        {{ t('e2e.recovery.done') }}
+      </button>
+    </template>
+  </Modal>
+</template>