@brftech/filex-core 0.7.0 → 0.7.1

package/src/FileExplorer.vue

@@ -1581,7 +1581,10 @@ async function dispatchItemAction(key: string, targets: FileNode[]) {
       flashToast('Kopyala → Yapıştır hazır');
       break;
     case 'paste':
-      await paste();
+      /* ui-fix — sağ-klik menüsünden yapıştırma da aktif panele gider
+       * (klavye kısayolu zaten pane-route'luydu; menü değildi). */
+      if (paneIsActive.value) await panePaste();
+      else await paste();
       break;
     case 'delete':
       showDelete.value = true;
@@ -2518,14 +2521,30 @@ function toggleSplit() {
     return;
   }
   if (isNarrow.value) return;
-  tabsApi.setSplit({ path: currentPath.value ?? '' });
+  tabsApi.setSplit({ path: currentPath.value ?? '', viewMode: viewMode.value });
 }
 function closeSplit() {
   tabsApi.setSplit(null);
   activePane.value = 'main';
 }
 function onPaneNavigate(p: string) {
-  tabsApi.setSplit({ path: p });
+  tabsApi.setSplit({ ...(activeSplit.value ?? {}), path: p });
+}
+/* ui-fix — pane'in KENDİ görünüm modu: split açılırken ana panelinkini
+ * devralır, sonrasında bağımsız. Toolbar'ın görünüm değiştiricisi ve palet
+ * toggle'ı AKTİF panele yazar (Burak: "B tıklıyken ikon değiştir dersem
+ * B'nin değişmesi lazım"). */
+const paneViewMode = computed<ViewMode>(() => activeSplit.value?.viewMode ?? viewMode.value);
+function setPaneViewMode(v: ViewMode) {
+  if (!activeSplit.value) return;
+  tabsApi.setSplit({ ...activeSplit.value, viewMode: v });
+}
+const displayedViewMode = computed<ViewMode>(() =>
+  paneIsActive.value ? paneViewMode.value : viewMode.value,
+);
+function setDisplayedViewMode(v: ViewMode) {
+  if (paneIsActive.value) setPaneViewMode(v);
+  else viewMode.value = v;
 }
 
 // Aktif panel: kısayollar aktif panele gider; panel tıklamayla aktifleşir.
@@ -2883,7 +2902,7 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
     <!-- /wiring:d1 -->
     <Toolbar
       ref="toolbarRef"
-      :view-mode="viewMode"
+      :view-mode="displayedViewMode /* ui-fix — aktif panelin modu */"
       :search-query="searchQuery"
       :trash-active="trashActive"
       :actions="toolbarActions"
@@ -2899,7 +2918,7 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
       :inspector-open="showInspector /* koru:k1 */"
       @toggle-inspector="toggleInspector /* koru:k1 */"
       @open-theme="showThemeGallery = true /* wiring:c1 */"
-      @update:view-mode="viewMode = $event"
+      @update:view-mode="setDisplayedViewMode($event) /* ui-fix — aktif panele */"
       @update:search-query="searchQuery = $event"
       @update:density="density = $event"
       @open-shortcut-settings="showShortcutSettings = true /* wiring:c2 */"
@@ -3230,6 +3249,8 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
       :multi-root="multiStorageRoot"
       :virtual-rows="virtualStorageRows"
       :active="paneIsActive"
+      :view-mode="paneViewMode /* ui-fix */"
+      :thumb-src="thumbs.src /* ui-fix */"
       @navigate="onPaneNavigate"
       @activate="activePane = 'split'"
       @close="closeSplit"
@@ -3476,7 +3497,7 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
       @navigate="(p: string) => load(p)"
       @new-folder="showNewFolder = true"
       @upload="triggerUpload"
-      @toggle-view="viewMode = viewMode === 'list' ? 'grid' : viewMode === 'grid' ? 'gallery' : 'list' /* wiring:d2 — 3 mod döngüsü */"
+      @toggle-view="setDisplayedViewMode(displayedViewMode === 'list' ? 'grid' : displayedViewMode === 'grid' ? 'gallery' : 'list') /* wiring:d2 + ui-fix — 3 mod döngüsü, aktif panele */"
       @open-trash="loadTrash"
       @refresh="() => load()"
       @go-up="goUp"

package/src/components/SecondaryPane.vue

@@ -18,10 +18,12 @@
  */
 import { computed, ref } from 'vue';
 import type { FileApi } from '../composables/useFileApi';
-import type { FileNode } from '../types/FileNode';
+import type { FileNode, ViewMode } from '../types/FileNode';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
-import { fileIconSvg } from '../lib/fileIcons';
+import ListView from './ListView.vue';
+import GridView from './GridView.vue';
+import GalleryView from './GalleryView.vue';
 
 // Same literals ListView/GridView already hardcode for the internal DnD
 // channel; `-src` carries the origin directory so the host can move (and
@@ -50,6 +52,11 @@ const props = defineProps<{
   virtualRows?: () => FileNode[];
   /** Active-panel highlight (keyboard target). */
   active?: boolean;
+  /** ui-fix — the pane renders the SAME view components as the main
+   *  panel (list/grid/gallery) instead of its own flat list. */
+  viewMode?: ViewMode;
+  /** ui-fix — authenticated thumb resolver, forwarded to grid/gallery. */
+  thumbSrc?: (n: FileNode) => string | null;
 }>();
 
 const emit = defineEmits<{
@@ -60,7 +67,7 @@ const emit = defineEmits<{
   (e: 'transfer', p: { sources: string[]; targetWire: string; originWire?: string }): void;
 }>();
 
-const { t, formatSize, nodeDisplayName } = useLocale(() => props.locale);
+const { t } = useLocale(() => props.locale);
 
 const path = ref<string>('');
 const files = ref<FileNode[]>([]);
@@ -149,35 +156,40 @@ function crumbGo(target: string) {
 // Selection + navigation
 // ------------------------------------------------------------------
 
-function onRowClick(n: FileNode, ev: MouseEvent) {
+/* ui-fix — adapter for the shared view components' click contract
+ * ({ctrl, shift} mod object instead of a MouseEvent). Shift behaves as
+ * ctrl here: the pane keeps a simple Set, no range anchor. */
+function onViewClick(n: FileNode, mod: { ctrl: boolean; shift: boolean }) {
   emit('activate');
-  const multi = ev.ctrlKey || ev.metaKey;
+  const multi = mod.ctrl || mod.shift;
   const next = new Set<string>(multi ? selected.value : []);
   if (multi && next.has(n.path)) next.delete(n.path);
   else next.add(n.path);
   selected.value = next;
 }
 
-function onRowDbl(n: FileNode) {
-  if (n.type !== 'dir') return;
-  void loadPane(isStorageRow(n) ? n.path : props.toUser(n.path));
+/* ui-fix — right-click on a pane item: activate + select it, no menu
+ * (the pane has no item menu; letting the main panel's menu open here
+ * would act on the WRONG panel's selection). */
+function onViewContext(n: FileNode, ev: MouseEvent) {
+  ev.preventDefault();
+  ev.stopPropagation();
+  emit('activate');
+  if (!selected.value.has(n.path)) selected.value = new Set([n.path]);
 }
 
-// Middle-button mousedown must be cancelled on rows: in a scrollable body
-// Chromium's autoscroll takes over and auxclick is never generated.
-function onRowMiddleDown(ev: MouseEvent) {
-  if (ev.button === 1) ev.preventDefault();
+/* ui-fix — drop-into from the shared views: same payload path as the
+ * old flat rows (dir check + wire-qualified row paths). */
+function onViewDropInto(target: FileNode, ev: DragEvent) {
+  dropBg.value = false;
+  if (target.type !== 'dir' || isStorageRow(target)) return;
+  if (!acceptDrag(ev)) return;
+  handleDropPayload(ev, target.path);
 }
 
-// Middle-click on a folder opens it in a NEW TAB (same convention as the
-// main listing). stopPropagation keeps the host's delegated auxclick
-// listener from double-handling it.
-function onRowAux(n: FileNode, ev: MouseEvent) {
-  if (ev.button !== 1) return;
-  ev.preventDefault();
-  ev.stopPropagation();
+function onRowDbl(n: FileNode) {
   if (n.type !== 'dir') return;
-  emit('open-tab', isStorageRow(n) ? n.path : props.toUser(n.path));
+  void loadPane(isStorageRow(n) ? n.path : props.toUser(n.path));
 }
 
 function clearSelection() {
@@ -212,7 +224,6 @@ function onRowDragStart(n: FileNode, ev: DragEvent) {
 // Drop target (dir rows + pane background)
 // ------------------------------------------------------------------
 
-const dropPath = ref<string | null>(null);
 const dropBg = ref(false);
 
 function acceptDrag(ev: DragEvent): boolean {
@@ -238,28 +249,6 @@ function handleDropPayload(ev: DragEvent, targetWire: string) {
   emit('transfer', { sources, targetWire, originWire: origin });
 }
 
-function onRowDragOver(n: FileNode, ev: DragEvent) {
-  if (n.type !== 'dir' || isStorageRow(n)) return;
-  if (!acceptDrag(ev)) return;
-  ev.preventDefault();
-  ev.stopPropagation();
-  if (ev.dataTransfer) ev.dataTransfer.dropEffect = 'move';
-  dropPath.value = n.path;
-  dropBg.value = false;
-}
-
-function onRowDragLeave(n: FileNode) {
-  if (dropPath.value === n.path) dropPath.value = null;
-}
-
-function onRowDrop(n: FileNode, ev: DragEvent) {
-  dropPath.value = null;
-  dropBg.value = false;
-  if (n.type !== 'dir' || isStorageRow(n)) return;
-  if (!acceptDrag(ev)) return;
-  handleDropPayload(ev, n.path); // real rows are wire-qualified
-}
-
 function onBgDragOver(ev: DragEvent) {
   if (!acceptDrag(ev) || atVirtualRoot.value) return;
   ev.preventDefault();
@@ -274,7 +263,6 @@ function onBgDragLeave() {
 
 function onBgDrop(ev: DragEvent) {
   dropBg.value = false;
-  dropPath.value = null;
   if (!acceptDrag(ev) || atVirtualRoot.value) return;
   handleDropPayload(ev, props.qualify(path.value));
 }
@@ -313,10 +301,6 @@ function getPath(): string {
 }
 
 defineExpose({ reload, goUp, selectAll, openSelected, selectedNodes, getPath });
-
-function specialEmojiFor(n: FileNode): string | null {
-  return isStorageRow(n) ? '💾' : null;
-}
 </script>
 
 <template>
@@ -376,36 +360,46 @@ function specialEmojiFor(n: FileNode): string | null {
       <div v-else-if="files.length === 0" class="fe-split__state">
         {{ t('empty.folder') }}
       </div>
-      <div v-else class="fe-split__list" role="listbox" aria-multiselectable="true">
-        <div
-          v-for="n in files"
-          :key="n.path"
-          class="fe-split__row"
-          :class="{
-            'is-selected': selected.has(n.path),
-            'is-dir': n.type === 'dir',
-            'is-droptarget': dropPath === n.path,
-          }"
-          role="option"
-          :aria-selected="selected.has(n.path) ? 'true' : 'false'"
-          tabindex="0"
-          draggable="true"
-          @click="onRowClick(n, $event)"
-          @dblclick="onRowDbl(n)"
-          @mousedown="onRowMiddleDown($event)"
-          @auxclick="onRowAux(n, $event)"
-          @dragstart="onRowDragStart(n, $event)"
-          @dragover="onRowDragOver(n, $event)"
-          @dragleave="onRowDragLeave(n)"
-          @drop="onRowDrop(n, $event)"
-        >
-          <span v-if="specialEmojiFor(n)" class="fe-split__icon" aria-hidden="true">{{ specialEmojiFor(n) }}</span>
-          <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
-          <span v-else class="fe-split__icon" aria-hidden="true" v-html="fileIconSvg(n)"></span>
-          <span class="fe-split__name" :title="n.basename">{{ nodeDisplayName(n) }}</span>
-          <span class="fe-split__size">{{ n.type === 'dir' ? '' : formatSize(n.size) }}</span>
-        </div>
-      </div>
+      <!-- ui-fix — aynı görünüm bileşenleri (list/grid/gallery), pane'in
+           kendi viewMode'uyla; eski düz fe-split__list kalktı. -->
+      <ListView
+        v-else-if="(viewMode ?? 'list') === 'list'"
+        :files="files"
+        :selected="selected"
+        :locale="locale"
+        :loading="loading"
+        @click-row="onViewClick"
+        @dbl-row="onRowDbl"
+        @context-row="onViewContext"
+        @item-drag-start="onRowDragStart"
+        @item-drop-into="onViewDropInto"
+      />
+      <GridView
+        v-else-if="viewMode === 'grid'"
+        :files="files"
+        :selected="selected"
+        :locale="locale"
+        :loading="loading"
+        :thumb-src="thumbSrc"
+        @click-card="onViewClick"
+        @dbl-card="onRowDbl"
+        @context-card="onViewContext"
+        @item-drag-start="onRowDragStart"
+        @item-drop-into="onViewDropInto"
+      />
+      <GalleryView
+        v-else
+        :files="files"
+        :selected="selected"
+        :locale="locale"
+        :loading="loading"
+        :thumb-src="thumbSrc"
+        @click-card="onViewClick"
+        @dbl-card="onRowDbl"
+        @context-card="onViewContext"
+        @item-drag-start="onRowDragStart"
+        @item-drop-into="onViewDropInto"
+      />
     </div>
   </section>
 </template>

package/src/components/Toolbar.vue

@@ -152,6 +152,74 @@ const mode = computed<SelectionMode>(() => props.selectionMode ?? 'none');
 // context menu uses, the two menus are guaranteed to match.
 const toolbarItems = computed(() => props.actions.filter((a) => !a.divider && !a.hidden));
 
+/* === ui-fix — wide-mode action folding ===============================
+ * Long selection-action rows used to wrap the whole toolbar and push the
+ * search / view controls onto a second line. The row is now single-line:
+ * actions that do not fit fold into a "⋯" menu. Widths come from a
+ * hidden measurement strip (all actions always rendered there), so the
+ * calculation never mutates what it measures. */
+const primaryEl = ref<HTMLElement | null>(null);
+const measureEl = ref<HTMLElement | null>(null);
+const wideMoreBtnEl = ref<HTMLElement | null>(null);
+const wideMoreRef = ref<InstanceType<typeof ContextMenu> | null>(null);
+const visibleActionCount = ref(Number.MAX_SAFE_INTEGER);
+const visibleToolbarItems = computed(() => toolbarItems.value.slice(0, visibleActionCount.value));
+const overflowToolbarItems = computed(() => toolbarItems.value.slice(visibleActionCount.value));
+const WIDE_MORE_BTN_W = 40;
+
+function recalcFold() {
+  if (props.narrow) return;
+  const cont = primaryEl.value;
+  const meas = measureEl.value;
+  if (!cont || !meas) {
+    visibleActionCount.value = toolbarItems.value.length;
+    return;
+  }
+  const gap = parseFloat(getComputedStyle(cont).gap) || 8;
+  let fixed = 0;
+  for (const child of Array.from(cont.children) as HTMLElement[]) {
+    if (child === meas || child === wideMoreBtnEl.value) continue;
+    if (child.classList.contains('fe-btn--fold')) continue;
+    if (child.offsetWidth > 0) fixed += child.offsetWidth + gap;
+  }
+  const widths = (Array.from(meas.children) as HTMLElement[]).map((c) => c.offsetWidth + gap);
+  const total = widths.reduce((s, w) => s + w, 0);
+  const avail = cont.clientWidth - fixed;
+  if (total <= avail) {
+    visibleActionCount.value = widths.length;
+    return;
+  }
+  let used = WIDE_MORE_BTN_W + gap;
+  let count = 0;
+  for (const w of widths) {
+    if (used + w > avail) break;
+    used += w;
+    count += 1;
+  }
+  visibleActionCount.value = count;
+}
+
+let foldRo: ResizeObserver | undefined;
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined' && primaryEl.value) {
+    foldRo = new ResizeObserver(() => recalcFold());
+    foldRo.observe(primaryEl.value);
+  }
+  void nextTick(recalcFold);
+});
+onBeforeUnmount(() => foldRo?.disconnect());
+watch(
+  () => [toolbarItems.value, props.narrow, props.trashActive, mode.value] as const,
+  () => void nextTick(recalcFold),
+  { deep: false },
+);
+
+function openWideMore() {
+  const r = wideMoreBtnEl.value?.getBoundingClientRect();
+  wideMoreRef.value?.show({ clientX: r ? r.right : 0, clientY: r ? r.bottom + 4 : 0 } as MouseEvent, []);
+}
+/* === /ui-fix ========================================================= */
+
 function fire(key: string) {
   emit('action', key);
 }
@@ -291,7 +359,7 @@ function onMoreSelect(a: ContextAction) {
   >
     <!-- bag:b4 — wide layout, untouched; renders exactly as before when not narrow -->
     <template v-if="!narrow">
-    <div class="fe-toolbar__primary">
+    <div ref="primaryEl" class="fe-toolbar__primary">
       <button
         v-if="canGoUp"
         type="button"
@@ -315,10 +383,10 @@ function onMoreSelect(a: ContextAction) {
       </button>
 
       <button
-        v-for="a in toolbarItems"
+        v-for="a in visibleToolbarItems"
         :key="a.key"
         type="button"
-        class="fe-btn"
+        class="fe-btn fe-btn--fold"
         :class="{ 'fe-btn--danger': a.danger, 'is-disabled': a.disabled }"
         :disabled="a.disabled"
         :title="a.label"
@@ -328,6 +396,36 @@ function onMoreSelect(a: ContextAction) {
         <span class="fe-btn__label">{{ a.label }}</span>
       </button>
 
+      <!-- ui-fix — sığmayan aksiyonlar tek satırı korumak için ⋯ menüsüne
+           katlanır (arama/görünüm kontrolleri artık alt satıra düşmez). -->
+      <button
+        v-if="overflowToolbarItems.length > 0"
+        ref="wideMoreBtnEl"
+        type="button"
+        class="fe-btn fe-btn--icon-only"
+        :title="t('toolbar.more')"
+        :aria-label="t('toolbar.more')"
+        aria-haspopup="menu"
+        @click="openWideMore"
+      >
+        <span class="fe-icon">⋯</span>
+      </button>
+
+      <!-- Görünmez ölçüm şeridi: TÜM aksiyonlar her zaman burada render
+           edilir; katlama hesabı gerçek genişliklerden yapılır. -->
+      <div ref="measureEl" class="fe-toolbar__measure" aria-hidden="true">
+        <button
+          v-for="a in toolbarItems"
+          :key="'m-' + a.key"
+          type="button"
+          class="fe-btn"
+          tabindex="-1"
+        >
+          <span class="fe-icon">{{ a.icon }}</span>
+          <span class="fe-btn__label">{{ a.label }}</span>
+        </button>
+      </div>
+
       <button
         v-if="pasteEnabled && mode === 'none' && !trashActive && !atVirtualRoot && canWrite !== false"
         type="button"
@@ -589,5 +687,16 @@ function onMoreSelect(a: ContextAction) {
         @select="onMoreSelect"
       />
     </template>
+
+    <!-- ui-fix — wide modda katlanan aksiyonların ⋯ menüsü -->
+    <ContextMenu
+      v-if="!narrow"
+      ref="wideMoreRef"
+      :locale="locale"
+      :theme="theme || 'auto'"
+      :sheet="false"
+      :actions="overflowToolbarItems"
+      @select="(a) => fire(a.key)"
+    />
   </div>
 </template>

package/src/composables/useKeyboardShortcuts.ts

@@ -341,6 +341,12 @@ export function useKeyboardShortcuts(rootEl: Ref<HTMLElement | null>, handlers:
     const root = rootEl.value;
     if (!root) return;
 
+    /* ui-fix — while a context menu is open, global shortcuts stay quiet
+     * (except Esc, which the menu scopes itself). Otherwise e.g. Delete
+     * opens a modal UNDER the menu backdrop and the UI wedges: the
+     * backdrop intercepts every click on the new dialog. */
+    if (e.key !== 'Escape' && document.querySelector('.fe-ctx-backdrop')) return;
+
     // Skip when the event originates inside a form control — don't
     // want `Delete` while editing a filename, `/` while typing in the
     // search box, etc. Escape always goes through so modals can close.

package/src/composables/useTabs.ts

@@ -30,6 +30,9 @@ import type { ViewMode } from '../types/FileNode';
 /** Per-tab split state — the secondary pane's own location. */
 export interface TabSplit {
   path: string;
+  /** ui-fix — the pane's OWN view mode (list/grid/gallery); undefined
+   *  inherits the main panel's mode at split time. */
+  viewMode?: ViewMode;
 }
 
 export interface TabState {
@@ -82,10 +85,16 @@ export function useTabs(opts: UseTabsOptions) {
         // gallery wave) must survive a round-trip through an older schema.
         const vm =
           typeof t.viewMode === 'string' && t.viewMode ? (t.viewMode as ViewMode) : 'list';
-        const rawSplit = t.split as { path?: unknown } | null | undefined;
+        const rawSplit = t.split as { path?: unknown; viewMode?: unknown } | null | undefined;
         const split =
           rawSplit && typeof rawSplit === 'object' && typeof rawSplit.path === 'string'
-            ? { path: rawSplit.path }
+            ? {
+                path: rawSplit.path,
+                viewMode:
+                  typeof rawSplit.viewMode === 'string' && rawSplit.viewMode
+                    ? (rawSplit.viewMode as ViewMode)
+                    : undefined,
+              }
             : null;
         clean.push({
           id: typeof t.id === 'string' && t.id ? t.id : makeId(),

package/src/styles/base.css

@@ -4,6 +4,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
   min-height: 420px;
   height: 100%;
   background: var(--fe-bg);
@@ -3099,7 +3100,12 @@ filex-explorer {
   flex: 1 1 auto;
   min-width: 0;
   overflow-x: auto;
-  scrollbar-width: thin;
+  /* Tab overflow scrolls (wheel / drag / keyboard) but never shows a
+   * scrollbar strip under the tabs — the 30px bar cannot fit one. */
+  scrollbar-width: none;
+}
+.fe-tabs__scroll::-webkit-scrollbar {
+  display: none;
 }
 .fe-tabs__tab {
   display: flex;
@@ -3708,3 +3714,29 @@ filex-explorer {
   text-decoration: underline;
 }
 /* === /wiring:e2 === */
+
+/* === ui-fix — toolbar tek satır + katlama + ölçüm şeridi ============= */
+.fe:not(.fe--narrow) .fe-toolbar {
+  flex-wrap: nowrap;
+}
+.fe:not(.fe--narrow) .fe-toolbar__primary {
+  flex: 1 1 auto;
+  min-width: 0;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  position: relative;
+}
+.fe-toolbar__measure {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  height: 0;
+  overflow: hidden;
+  display: flex;
+  gap: 8px;
+  white-space: nowrap;
+}
+.fe-toolbar__measure .fe-btn {
+  flex: none;
+}
+/* === /ui-fix ========================================================= */

package/src/styles/variables.css

@@ -13,7 +13,7 @@
   --fe-text: #1a1e27;
   --fe-text-muted: #5a6475;
   --fe-text-on-primary: #ffffff;
-  --fe-primary: #3b82f6;
+  --fe-primary: #2f6fe0; /* ui-fix: beyaz metinle WCAG AA (eski #3b82f6 = 3.68) */
   --fe-primary-hover: #2563eb;
   --fe-danger: #dc2626;
   --fe-danger-hover: #b91c1c;
@@ -102,7 +102,7 @@
   --fe-icon-archive: #78716c;
   --fe-icon-code: #4f46e5;
   --fe-icon-text: #64748b;
-  --fe-icon-unknown: #94a3b8;
+  --fe-icon-unknown: #64748b; /* ui-fix: acik temada 3:1 UI kontrasti */
 }
 
 /* Dark values — same selector strategy as the palette blocks above. */