@brftech/filex-core 0.7.1 → 0.7.3

package/src/FileExplorer.vue

@@ -438,6 +438,9 @@ const showDelete = ref(false);
 const showShare = ref(false);
 const showPreview = ref(false);
 const renameTarget = ref<FileNode | null>(null);
+/* ui-fix — açık olan rename/delete/new-folder modal'ı yan panele mi ait?
+ * (menü ana panelle aynı; mutasyonlar doğru panele yönlensin diye.) */
+const mutationInPane = ref(false);
 const shareTarget = ref<FileNode | null>(null);
 const activeShare = ref<(ShareInfo & { url: string; filename?: string }) | null>(null);
 const previewTarget = ref<FileNode | null>(null);
@@ -891,6 +894,20 @@ function wireParent(p: string): string {
   return slash === -1 ? prefix : prefix + rel.slice(0, slash);
 }
 
+/* ui-fix — iki wire yolun AYNI dizini gösterip göstermediği (trailing-slash
+ * ve kök `adapter://` güvenli). Bir öğeyi ZATEN bulunduğu klasöre bırakma
+ * (source parent === target) no-op olmalı; aksi halde backend "kendine
+ * kopyala" 400'ü döner. */
+function sameDir(a: string, b: string): boolean {
+  const norm = (s: string) => {
+    const i = s.indexOf('://');
+    const pre = i === -1 ? '' : s.slice(0, i + 3);
+    const rel = (i === -1 ? s : s.slice(i + 3)).replace(/\/+$/, '');
+    return pre + rel;
+  };
+  return norm(a) === norm(b);
+}
+
 function wireJoin(dir: string, name: string): string {
   if (!dir) return name;
   return dir.endsWith('://') || dir.endsWith('/') ? dir + name : `${dir}/${name}`;
@@ -1105,11 +1122,30 @@ async function openSearchHit(hit: GlobalSearchHit) {
 
 useKeyboardShortcuts(rootEl, {
   onDelete: () => {
-    if (!selection.isEmpty.value) showDelete.value = true;
+    /* ui-fix — kısayol da aktif panele gider (menüyle tutarlı). */
+    if (paneIsActive.value) {
+      const psel = splitPaneRef.value?.selectedNodes() ?? [];
+      if (psel.length) {
+        paneCtxTargets.value = psel;
+        mutationInPane.value = true;
+        showDelete.value = true;
+      }
+    } else if (!selection.isEmpty.value) {
+      mutationInPane.value = false;
+      showDelete.value = true;
+    }
   },
   onRename: () => {
-    if (selection.nodes.value.length === 1) {
+    if (paneIsActive.value) {
+      const psel = splitPaneRef.value?.selectedNodes() ?? [];
+      if (psel.length === 1) {
+        renameTarget.value = psel[0];
+        mutationInPane.value = true;
+        showRename.value = true;
+      }
+    } else if (selection.nodes.value.length === 1) {
       renameTarget.value = selection.nodes.value[0];
+      mutationInPane.value = false;
       showRename.value = true;
     }
   },
@@ -1341,9 +1377,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 +1426,19 @@ 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 + menüyü aç.
+ * Menü ana panelle BİREBİR aynı (selectionActionList tek kaynak); aksiyonlar
+ * dispatchItemAction'a gider ve ctxMode==='pane' iken pane-route'lanır. */
+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ü (Yeni Klasör + 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);
+}
+
 const contextActions = computed<ContextAction[]>(() => {
   if (ctxMode.value === 'breadcrumb') {
     return [
@@ -1395,6 +1446,17 @@ const contextActions = computed<ContextAction[]>(() => {
       { key: 'copy-path', label: t('breadcrumb.copy_path'), icon: '📋' },
     ];
   }
+  if (ctxMode.value === 'pane' /* ui-fix — yan panel menüsü ana panelle BİREBİR aynı */) {
+    const psel = paneCtxTargets.value;
+    if (psel.length === 0) {
+      // Boş alana sağ-tık: ana paneldeki canvas menüsüyle aynı.
+      return [
+        { key: 'new-folder', label: t('toolbar.new_folder'), icon: '📁' },
+        { key: 'paste', label: t('ctx.paste'), icon: '📋', disabled: !clipboard.value.mode },
+      ];
+    }
+    return selectionActionList(psel);
+  }
 
   const sel = selection.nodes.value;
   const any = sel.length > 0;
@@ -1517,6 +1579,10 @@ async function onContextAction(action: ContextAction, targets: FileNode[]) {
     }
     return;
   }
+  if (ctxMode.value === 'pane' /* ui-fix — yan panel: aynı dispatch, pane-route */) {
+    await dispatchItemAction(action.key, paneCtxTargets.value);
+    return;
+  }
   await dispatchItemAction(action.key, targets);
 }
 
@@ -1569,30 +1635,40 @@ async function dispatchItemAction(key: string, targets: FileNode[]) {
     case 'rename':
       if (targets[0]) {
         renameTarget.value = targets[0];
+        mutationInPane.value = ctxMode.value === 'pane'; /* ui-fix */
         showRename.value = true;
       }
       break;
     case 'cut':
-      clipboard.value = { mode: 'cut', items: targets, sourcePath: currentPath.value };
-      flashToast('Kes → Yapıştır hazır');
+      /* ui-fix — pane bağlamında pano kaynağı pane'in dizini olmalı. */
+      if (ctxMode.value === 'pane') paneCut();
+      else {
+        clipboard.value = { mode: 'cut', items: targets, sourcePath: currentPath.value };
+        flashToast('Kes → Yapıştır hazır');
+      }
       break;
     case 'copy':
-      clipboard.value = { mode: 'copy', items: targets, sourcePath: currentPath.value };
-      flashToast('Kopyala → Yapıştır hazır');
+      if (ctxMode.value === 'pane') paneCopy();
+      else {
+        clipboard.value = { mode: 'copy', items: targets, sourcePath: currentPath.value };
+        flashToast('Kopyala → Yapıştır hazır');
+      }
       break;
     case '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();
+      if (ctxMode.value === 'pane' || paneIsActive.value) await panePaste();
       else await paste();
       break;
     case 'delete':
+      mutationInPane.value = ctxMode.value === 'pane'; /* ui-fix */
       showDelete.value = true;
       break;
     case 'restore':
       if (targets.length > 0) await restoreSelection(targets);
       break;
     case 'new-folder':
+      mutationInPane.value = ctxMode.value === 'pane'; /* ui-fix */
       showNewFolder.value = true;
       break;
     case 'duplicate':
@@ -1675,10 +1751,13 @@ function downloadFile(n: FileNode) {
 // ------- Modals -------
 
 async function submitNewFolder(name: string) {
+  const inPane = mutationInPane.value; /* ui-fix — yan panelde yeni klasör */
   try {
-    await api.newFolder(qualify(currentPath.value), name);
+    const dirWire = inPane ? qualify(splitPaneRef.value?.getPath() ?? '') : qualify(currentPath.value);
+    await api.newFolder(dirWire, name);
     showNewFolder.value = false;
-    await load();
+    if (inPane) await splitPaneRef.value?.reload();
+    else await load();
   } catch (err) {
     emit('error', { message: (err as Error).message, context: { op: 'newfolder' } });
   }
@@ -1687,14 +1766,16 @@ async function submitNewFolder(name: string) {
 async function submitRename(name: string) {
   const target = renameTarget.value;
   if (!target) return;
+  const inPane = mutationInPane.value; /* ui-fix — yan panelden yeniden adlandırma */
   try {
-    const dirWire = qualify(currentPath.value);
+    const dirWire = inPane ? qualify(splitPaneRef.value?.getPath() ?? '') : qualify(currentPath.value);
     const oldPath = target.path; // qualified
     const oldName = target.basename;
     await api.rename(dirWire, oldPath, name);
     showRename.value = false;
     renameTarget.value = null;
-    await load();
+    if (inPane) await splitPaneRef.value?.reload();
+    else await load();
     // Clean inverse: rename the new path back to the old basename.
     if (name && name !== oldName) {
       const newPath = wireJoin(wireParent(oldPath), name);
@@ -1716,7 +1797,10 @@ async function confirmDelete() {
     flashToast('Çöpteki öğeler saklama süresi sonunda otomatik silinir. Kalıcı silme yönetici panelinden yapılır.');
     return;
   }
-  const targets = selection.nodes.value;
+  /* ui-fix — yan panelden silme: hedefler + dizin + tazeleme pane'e ait. */
+  const inPane = mutationInPane.value;
+  const targets = inPane ? paneCtxTargets.value : selection.nodes.value;
+  const dirWire = inPane ? qualify(splitPaneRef.value?.getPath() ?? '') : qualify(currentPath.value);
   const items = targets.map((n) => n.path);
   if (items.length === 0) {
     showDelete.value = false;
@@ -1737,19 +1821,21 @@ async function confirmDelete() {
       : null;
   try {
     if (api.endpoints.deleteAsync) {
-      const { op } = await api.deleteAsync(items, qualify(currentPath.value));
+      const { op } = await api.deleteAsync(items, dirWire);
       if (restoreUndo) {
         opUndo.set(op.id, { message: t('toast.trashed'), fn: restoreUndo });
       }
       pendingOps.register(op);
       flashToast('Silme kuyruğa alındı');
     } else {
-      await api.deleteItems(qualify(currentPath.value), items);
-      await load();
+      await api.deleteItems(dirWire, items);
+      if (inPane) await splitPaneRef.value?.reload();
+      else await load();
       if (restoreUndo) undoToast(t('toast.trashed'), restoreUndo);
     }
     showDelete.value = false;
-    selection.clear();
+    if (inPane) void splitPaneRef.value?.reload();
+    else selection.clear();
   } catch (err) {
     emit('error', { message: (err as Error).message, context: { op: 'delete' } });
   }
@@ -2116,11 +2202,10 @@ async function onItemDropInto(target: FileNode, ev: DragEvent) {
   const targetDir = target.path; // qualified
   const sources = items
     .map((i) => i.path)
-    .filter((p) => p && p !== targetDir && !targetDir.startsWith(p + '/'));
-  if (sources.length === 0) {
-    flashToast('Aynı klasöre taşınamaz');
-    return;
-  }
+    // ui-fix — öğe zaten targetDir'in içindeyse (parent===target) atla: yerinde
+    // bırakma no-op, backend "kendine kopyala" 400'ü tetiklemez.
+    .filter((p) => p && p !== targetDir && !targetDir.startsWith(p + '/') && !sameDir(wireParent(p), targetDir));
+  if (sources.length === 0) return; // sessiz no-op (yerinde bırakma)
   await transferItems(sources, targetDir, dndOrigin(ev)); /* wiring:d1 — depo-farkında aktarım */
 }
 
@@ -2138,7 +2223,8 @@ async function onCrumbDropInto(adapterPath: string, ev: DragEvent) {
   const targetDir = adapterPath; // already qualified by breadcrumb
   const sources = items
     .map((i) => i.path)
-    .filter((p) => p && p !== targetDir && !targetDir.startsWith(p + '/'));
+    // ui-fix — kırıntıya (aynı klasöre) yerinde bırakma no-op.
+    .filter((p) => p && p !== targetDir && !targetDir.startsWith(p + '/') && !sameDir(wireParent(p), targetDir));
   if (sources.length === 0) return;
   await transferItems(sources, targetDir, dndOrigin(ev)); /* wiring:d1 — depo-farkında aktarım */
 }
@@ -2622,7 +2708,11 @@ async function transferItems(
   originWire?: string,
   forceCopy = false,
 ): Promise<void> {
-  const list = sources.filter((p) => p && p !== targetWire && !targetWire.startsWith(p + '/'));
+  // ui-fix — yerinde bırakma (source parent === target) no-op: backend
+  // "kendine kopyala" 400'ü engellenir (paneller arası + pano yolu).
+  const list = sources.filter(
+    (p) => p && p !== targetWire && !targetWire.startsWith(p + '/') && !sameDir(wireParent(p), targetWire),
+  );
   if (list.length === 0 || !targetWire) return;
   const targetAdapter = wireAdapterOf(targetWire);
   const cross = list.some((p) => wireAdapterOf(p) !== targetAdapter);
@@ -2930,6 +3020,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"
@@ -2971,13 +3073,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()"
     >
@@ -3230,6 +3327,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
@@ -3256,6 +3354,7 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
       @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 -->
 

package/src/components/SecondaryPane.vue

@@ -65,6 +65,9 @@ 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 } = useLocale(() => props.locale);
@@ -168,14 +171,26 @@ function onViewClick(n: FileNode, mod: { ctrl: boolean; shift: boolean }) {
   selected.value = next;
 }
 
-/* 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). */
+/* 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);
+}
+
+/* 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);
 }
 
 /* ui-fix — drop-into from the shared views: same payload path as the
@@ -344,6 +359,7 @@ defineExpose({ reload, goUp, selectAll, openSelected, selectedNodes, getPath });
       class="fe-split__body"
       :class="{ 'is-dropover': dropBg }"
       @click.self="clearSelection"
+      @contextmenu="onBgContext"
       @dragover="onBgDragOver"
       @dragleave="onBgDragLeave"
       @drop="onBgDrop"

package/src/styles/base.css

@@ -266,6 +266,9 @@ filex-explorer {
   gap: 4px;
   flex-wrap: wrap;
   padding: 6px 12px;
+  /* ui-fix — split'te yan panel .fe-split__crumbs ile aynı yükseklik (ana
+     panelin "Yola Git" ✏ butonu yoksa da satırlar aynı y'den başlasın). */
+  min-height: 37px;
   background: var(--fe-bg);
   border-bottom: 1px solid var(--fe-border);
   font-size: 13px;
@@ -3220,9 +3223,23 @@ filex-explorer {
   display: none;
 }
 
+/* ui-fix — sol panel sarmalı: breadcrumb + durum şeritleri + body bir
+   flex-column. Split olmadan tüm genişlik; split olunca sol yarı (böylece
+   breadcrumb kendi panelini kaplar, SecondaryPane ile simetrik). */
+.fe__primary {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+.fe__primary > .fe__body {
+  min-width: 0;
+}
+
 /* Split layout — equal halves inside fe__main; the inspector (koru:k1)
    keeps its fixed width to the right of both. */
-.fe__main--split > .fe__body {
+.fe__main--split > .fe__primary {
   flex: 1 1 50%;
 }
 .fe-split {
@@ -3236,11 +3253,11 @@ filex-explorer {
   color: var(--fe-text);
 }
 /* Active-panel accent: a thin top line on whichever pane owns the keyboard. */
-.fe__main--split > .fe__body,
+.fe__main--split > .fe__primary,
 .fe-split {
   box-shadow: inset 0 2px 0 transparent;
 }
-.fe__main--split > .fe__body.fe-pane--focus,
+.fe__main--split > .fe__primary.fe-pane--focus,
 .fe-split.fe-pane--focus {
   box-shadow: inset 0 2px 0 var(--fe-primary);
 }
@@ -3248,11 +3265,14 @@ filex-explorer {
 .fe-split__crumbs {
   display: flex;
   align-items: center;
-  gap: 2px;
+  /* ui-fix — ana panel .fe-breadcrumb ile BİREBİR aynı ölçüler (gap/padding/
+     font) → split'te iki breadcrumb tam hizalı, ince kayma yok. */
+  gap: 4px;
   flex: 0 0 auto;
-  padding: 6px 8px;
+  padding: 6px 12px;
+  min-height: 37px; /* ui-fix — ana panel .fe-breadcrumb ile aynı yükseklik */
   border-bottom: 1px solid var(--fe-border);
-  font-size: 12px;
+  font-size: 13px;
   color: var(--fe-text-muted);
   overflow: hidden;
   white-space: nowrap;
@@ -3262,8 +3282,8 @@ filex-explorer {
   background: transparent;
   color: inherit;
   font: inherit;
-  padding: 2px 5px;
-  border-radius: 5px;
+  padding: 2px 6px; /* ui-fix — .fe-breadcrumb__crumb ile aynı */
+  border-radius: var(--fe-radius-sm);
   cursor: pointer;
   max-width: 140px;
   overflow: hidden;