@brftech/filex-core 0.7.0 → 0.7.2

package/src/FileExplorer.vue

@@ -1341,9 +1341,11 @@ function openNodeInNewTab(n: FileNode) {
   void markRecent(n);
 }
 
-type ContextMode = 'selection' | 'breadcrumb';
+type ContextMode = 'selection' | 'breadcrumb' | 'pane' /* ui-fix — yan panel sağ-tık */;
 const ctxMode = ref<ContextMode>('selection');
 const breadcrumbCtxPath = ref<string>('');
+/* ui-fix — yan panel sağ-tık menüsünün hedef node'ları (pane selection). */
+const paneCtxTargets = ref<FileNode[]>([]);
 const breadcrumbCtxLabel = ref<string>('');
 
 const selectionMode = computed<SelectionMode>(() => {
@@ -1388,6 +1390,61 @@ function onCrumbContext(payload: { x: number; y: number; adapterPath: string; la
   ctxRef.value?.show({ clientX: payload.x, clientY: payload.y }, []);
 }
 
+/* ui-fix — yan (ikincil) panelde sağ-tık: pane'i aktifleştir, seçili
+ * node'lara göre menüyü aç. Pane "hafif" olduğundan (delete/rename modal'ları
+ * ana panelde) menü aç/yeni-sekme/indir/kopyala/kes/yapıştır ile sınırlı;
+ * hepsi pane-route'lu (dispatchPaneAction). */
+function onPaneContext(node: FileNode | null, ev: MouseEvent) {
+  activePane.value = 'split';
+  const sel = splitPaneRef.value?.selectedNodes() ?? [];
+  // node=null (boş alana sağ-tık): seçimsiz menü (yalnız Yapıştır). Aksi
+  // halde pane seçimi (yoksa tıklanan node) hedeftir.
+  paneCtxTargets.value = node ? (sel.length > 0 ? sel : [node]) : [];
+  ctxMode.value = 'pane';
+  ctxRef.value?.show({ clientX: ev.clientX, clientY: ev.clientY }, paneCtxTargets.value);
+}
+
+function paneActionList(sel: FileNode[]): ContextAction[] {
+  const single = sel.length === 1;
+  const isFile = single && sel[0]?.type === 'file';
+  const isDir = single && sel[0]?.type === 'dir';
+  const any = sel.length > 0;
+  return [
+    { key: 'open', label: t('ctx.open'), icon: '↗', hidden: !single },
+    { key: 'open-tab', label: t('ctx.open_new_tab'), icon: '⧉', hidden: !isDir } /* wiring:d1 */,
+    { key: 'download', label: t('ctx.download'), icon: '⬇', hidden: !single, disabled: !isFile },
+    { divider: true, key: 'psep', label: '', hidden: !any },
+    { key: 'copy', label: t('ctx.copy'), icon: '❐', hidden: !any },
+    { key: 'cut', label: t('ctx.cut'), icon: '✂', hidden: !any },
+    { key: 'paste', label: t('ctx.paste'), icon: '📋', disabled: !clipboard.value.mode },
+  ];
+}
+
+async function dispatchPaneAction(key: string, targets: FileNode[]) {
+  switch (key) {
+    case 'open':
+      if (targets[0]) openNodeInNewTab(targets[0]);
+      break;
+    case 'open-tab':
+      if (targets[0]) {
+        tabsApi.openTab(paneToUser(targets[0].path), { viewMode: viewMode.value, background: true });
+      }
+      break;
+    case 'download':
+      if (targets[0]) downloadFile(targets[0]);
+      break;
+    case 'copy':
+      paneCopy();
+      break;
+    case 'cut':
+      paneCut();
+      break;
+    case 'paste':
+      await panePaste();
+      break;
+  }
+}
+
 const contextActions = computed<ContextAction[]>(() => {
   if (ctxMode.value === 'breadcrumb') {
     return [
@@ -1395,6 +1452,9 @@ const contextActions = computed<ContextAction[]>(() => {
       { key: 'copy-path', label: t('breadcrumb.copy_path'), icon: '📋' },
     ];
   }
+  if (ctxMode.value === 'pane' /* ui-fix — yan panel menüsü */) {
+    return paneActionList(paneCtxTargets.value);
+  }
 
   const sel = selection.nodes.value;
   const any = sel.length > 0;
@@ -1517,6 +1577,10 @@ async function onContextAction(action: ContextAction, targets: FileNode[]) {
     }
     return;
   }
+  if (ctxMode.value === 'pane' /* ui-fix — yan panel aksiyonları pane-route */) {
+    await dispatchPaneAction(action.key, paneCtxTargets.value);
+    return;
+  }
   await dispatchItemAction(action.key, targets);
 }
 
@@ -1581,7 +1645,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 +2585,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 +2966,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 +2982,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 */"
@@ -2911,6 +2994,18 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
       @open-recents="showRecents = true"
     />
 
+    <!-- koru:k1 — fe__main lays the listing body and the inspector panel out
+         as flex siblings (row). Without the inspector open it is visually
+         identical to the previous direct-child fe__body. -->
+    <div class="fe__main" :class="{ 'fe__main--split': splitVisible } /* wiring:d1 */">
+    <!-- ui-fix — sol panelin başlığı (breadcrumb + durum şeritleri + body)
+         tek bir sarmalda: split modunda bu sarmal sol yarıya sığar, böylece
+         breadcrumb tüm sayfayı değil kendi panelini kaplar (SecondaryPane'in
+         kendi kırıntısıyla simetrik). Aktif-panel vurgusu da bu sarmalda. -->
+    <div
+      class="fe__primary"
+      :class="{ 'fe-pane--focus': mainPaneFocus } /* wiring:d1 — aktif panel vurgusu */"
+    >
     <Breadcrumb
       :dirname="dirname"
       :adapter="adapter"
@@ -2952,13 +3047,8 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
     </div>
     <!-- /wiring:e2 -->
 
-    <!-- koru:k1 — fe__main lays the listing body and the inspector panel out
-         as flex siblings (row). Without the inspector open it is visually
-         identical to the previous direct-child fe__body. -->
-    <div class="fe__main" :class="{ 'fe__main--split': splitVisible } /* wiring:d1 */">
     <div
       class="fe__body"
-      :class="{ 'fe-pane--focus': mainPaneFocus } /* wiring:d1 — aktif panel vurgusu */"
       @pointerdown.capture="setPaneMain() /* wiring:d1 */"
       @click.self="selection.clear()"
     >
@@ -3211,6 +3301,7 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
       />
       <!-- /wiring:d2 -->
     </div>
+    </div><!-- /fe__primary ui-fix -->
 
     <!-- wiring:d1 — tab başına split: sağ ikincil panel (dar modda kapalı).
          :key tab kimliğine bağlı — tab geçişinde pane kendi konumuyla temiz
@@ -3230,11 +3321,14 @@ 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"
       @open-tab="(p: string) => tabsApi.openTab(p, { viewMode: viewMode, background: true })"
       @transfer="onPaneTransfer"
+      @context="onPaneContext /* ui-fix — yan panel sağ-tık menüsü */"
     />
     <!-- /wiring:d1 -->
 
@@ -3476,7 +3570,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<{
@@ -58,9 +65,12 @@ const emit = defineEmits<{
   (e: 'close'): void;
   (e: 'open-tab', path: string): void;
   (e: 'transfer', p: { sources: string[]; targetWire: string; originWire?: string }): void;
+  /* ui-fix — yan panelde sağ-tık: menü ana bileşende (FileExplorer) açılır.
+   * node=null → boş alana sağ-tık (seçimsiz, yalnız Yapıştır). */
+  (e: 'context', node: FileNode | null, ev: MouseEvent): void;
 }>();
 
-const { t, formatSize, nodeDisplayName } = useLocale(() => props.locale);
+const { t } = useLocale(() => props.locale);
 
 const path = ref<string>('');
 const files = ref<FileNode[]>([]);
@@ -149,35 +159,52 @@ 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, then let the
+ * host open the pane context menu (its actions are pane-routed). Selecting
+ * first keeps the menu's targets on THIS pane, not the main panel. */
+function onViewContext(n: FileNode, ev: MouseEvent) {
+  ev.preventDefault();
+  ev.stopPropagation();
+  emit('activate');
+  if (!selected.value.has(n.path)) selected.value = new Set([n.path]);
+  emit('context', n, ev);
 }
 
-// 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 — boş alana (arka plan) sağ-tık: seçimsiz menü (yalnız Yapıştır)
+ * → boş klasöre / mevcut klasöre dosya yapıştırma. Satır menüsü stopProp
+ * ettiğinden bu yalnız gerçek boş alanda tetiklenir. */
+function onBgContext(ev: MouseEvent) {
+  ev.preventDefault();
+  ev.stopPropagation(); // FileExplorer kökündeki canvas menüsüne bubble etmesin
+  emit('activate');
+  selected.value = new Set();
+  emit('context', null, ev);
 }
 
-// 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();
+/* 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);
+}
+
+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 +239,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 +264,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 +278,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 +316,6 @@ function getPath(): string {
 }
 
 defineExpose({ reload, goUp, selectAll, openSelected, selectedNodes, getPath });
-
-function specialEmojiFor(n: FileNode): string | null {
-  return isStorageRow(n) ? '💾' : null;
-}
 </script>
 
 <template>
@@ -360,6 +359,7 @@ function specialEmojiFor(n: FileNode): string | null {
       class="fe-split__body"
       :class="{ 'is-dropover': dropBg }"
       @click.self="clearSelection"
+      @contextmenu="onBgContext"
       @dragover="onBgDragOver"
       @dragleave="onBgDragLeave"
       @drop="onBgDrop"
@@ -376,36 +376,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(),