@brftech/filex-core 0.4.2 → 0.5.0

package/src/components/Toolbar.vue

@@ -86,6 +86,8 @@ const emit = defineEmits<{
   (e: 'open-recents'): void;
   (e: 'update:density', v: Density): void;
   (e: 'toggle-inspector'): void /* koru:k1 */;
+  (e: 'open-theme'): void /* wiring:c1 — tema galerisi */;
+  (e: 'open-shortcut-settings'): void /* wiring:c2 */;
 }>();
 
 // Density toggle — the toolbar owns the persisted preference; the parent
@@ -226,6 +228,10 @@ const moreActions = computed<ContextAction[]>(() => {
   );
   /* koru:k1 — inspector toggle also reachable from the narrow overflow menu */
   list.push({ key: 'inspector', label: t('toolbar.inspector'), icon: 'ℹ' });
+  /* wiring:c1 — tema galerisi de dar modda ⋯ menüsünden açılır */
+  list.push({ key: 'theme', label: t('theme.menu'), icon: '🎨' });
+  list.push({ key: 'shortcut-settings', label: t('shortcuts.settings.menu'), icon: '⌨' }) /* wiring:c2 */;
+  list.push({ key: 'tour', label: t('tour.restart'), icon: '🎓' }); /* wiring:c4 */
   return list;
 });
 
@@ -254,6 +260,15 @@ function onMoreSelect(a: ContextAction) {
     case 'inspector' /* koru:k1 */:
       emit('toggle-inspector');
       break;
+    case 'theme' /* wiring:c1 */:
+      emit('open-theme');
+      break;
+    case 'shortcut-settings' /* wiring:c2 */:
+      emit('open-shortcut-settings');
+      break;
+    case 'tour' /* wiring:c4 — bubbles to the FileExplorer root listener */:
+      moreBtnEl.value?.dispatchEvent(new CustomEvent('fe:tour-restart', { bubbles: true }));
+      break;
     default:
       fire(a.key);
   }
@@ -331,7 +346,7 @@ function onMoreSelect(a: ContextAction) {
           class="fe-search__input"
           :placeholder="t('toolbar.search.placeholder')"
           :value="localSearch"
-          aria-label="Search"
+          :aria-label="t('toolbar.search') /* wiring:c4 — was hardcoded EN */"
           @input="onSearchInput"
         />
       </div>
@@ -340,17 +355,19 @@ function onMoreSelect(a: ContextAction) {
         type="button"
         class="fe-btn fe-btn--icon-only"
         :title="t('toolbar.upload')"
+        :aria-label="t('toolbar.upload') /* wiring:c4 */"
         @click="emit('upload')"
       >
-        <span class="fe-icon">⬆</span>
+        <span class="fe-icon" aria-hidden="true">⬆</span>
       </button>
       <button
         type="button"
         class="fe-btn fe-btn--icon-only"
         :title="t('toolbar.refresh')"
+        :aria-label="t('toolbar.refresh') /* wiring:c4 */"
         @click="emit('refresh')"
       >
-        <span class="fe-icon">↻</span>
+        <span class="fe-icon" aria-hidden="true">↻</span>
       </button>
     </div>
 
@@ -418,7 +435,34 @@ function onMoreSelect(a: ContextAction) {
       </svg>
     </button>
 
-    <div class="fe-toolbar__view" role="tablist" aria-label="View">
+    <!-- wiring:c1 — tema galerisi (palet ikonu) -->
+    <button
+      type="button"
+      class="fe-btn fe-btn--icon-only fe-toolbar__theme"
+      :title="t('theme.menu')"
+      :aria-label="t('theme.menu')"
+      @click="emit('open-theme')"
+    >
+      <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="M12 3a9 9 0 1 0 0 18h1.4a2.1 2.1 0 0 0 1.5-3.6 2.1 2.1 0 0 1 1.5-3.6H19a2 2 0 0 0 2-2A9 9 0 0 0 12 3z" />
+        <circle cx="7.8" cy="10.2" r="1.15" fill="currentColor" stroke="none" />
+        <circle cx="11.6" cy="7.2" r="1.15" fill="currentColor" stroke="none" />
+        <circle cx="16" cy="8.6" r="1.15" fill="currentColor" stroke="none" />
+      </svg>
+    </button>
+    <!-- /wiring:c1 -->
+
+    <div class="fe-toolbar__view" role="tablist" :aria-label="t('toolbar.view_label') /* wiring:c4 — was hardcoded EN */">
       <button
         type="button"
         class="fe-btn fe-btn--icon-only"
@@ -426,9 +470,10 @@ function onMoreSelect(a: ContextAction) {
         role="tab"
         :aria-selected="viewMode === 'list'"
         :title="t('toolbar.view.list')"
+        :aria-label="t('toolbar.view.list') /* wiring:c4 */"
         @click="emit('update:viewMode', 'list')"
       >
-        <span class="fe-icon">☰</span>
+        <span class="fe-icon" aria-hidden="true">☰</span>
       </button>
       <button
         type="button"
@@ -437,9 +482,10 @@ function onMoreSelect(a: ContextAction) {
         role="tab"
         :aria-selected="viewMode === 'grid'"
         :title="t('toolbar.view.grid')"
+        :aria-label="t('toolbar.view.grid') /* wiring:c4 */"
         @click="emit('update:viewMode', 'grid')"
       >
-        <span class="fe-icon">▦</span>
+        <span class="fe-icon" aria-hidden="true">▦</span>
       </button>
     </div>
     </template>

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>