VueFinder 4.4: Üç ayda neler değişti

VueFinder 'ın son birkaç sürümüyle (4.1 → 4.4) ilgili epey iş çıkardık. Bazıları görünür kullanıcı tarafı, bazıları altyapı. Bu yazıda 4.4'e kadar olan kümülatif değişiklikleri özetliyorum — bir release notes değil, "bunlar neden değişti" bakışıyla bir tur.

Tek tek release atmak yerine birikenleri birlikte bakalım: çünkü 4.1'den 4.4'e geçişte hem temel mimari (Composable API üzerine kurulu) korunup hem üstüne ciddi feature/polish geldi.

Önizleme

Gerçek bir editör: CodeMirror 6 (lazy-loaded)

Eski text önizleme <pre> ve <textarea> ile sınırlıydı; bir .json ya da .vue dosyasına bakmak için "ham metin" görüyordun. 4.4 ile CodeMirror 6 entegre edildi:

Syntax highlighting (json, js/ts/tsx/jsx, vue, html, css/scss, md, yaml, xml)
Satır numaraları, fold gutter, bracket matching, undo/redo, search (Ctrl+F)
Edit ↔ View modu (Compartment ile — editor yeniden yaratılmıyor)

Asıl önemli kısım: CodeMirror ana bundle'a girmedi. Dynamic import() ile ayrı chunk'lara split edildi, sadece kullanıcı bir text önizleme açtığında ~143 KB gzipped indiriliyor. Her dil paketi de kendi chunk'ında, sadece o uzantı açıldığında. Yani Monaco gibi 2 MB'lık bir geçişe gerek kalmadan editor deneyimi geldi.

Otomatik text algısı genişledi

Eskiden .vue, .tsx, .sh, .toml, .dockerfile gibi dosyalar "Bilinmeyen tür" Default önizlemeye düşüyordu. Şimdi:

vue, tsx, jsx, mjs, cjs, svelte, sh, bash, py, rb, php, go, rs,
java, kt, swift, c, h, cpp, cs, sql, graphql, toml, ini, conf,
env, dockerfile, gitignore, editorconfig, ...

Hepsi otomatik text olarak açılıyor, syntax highlight ile birlikte.

Sağ tık → "Preview as ▸ Text / Image"

Algılamanın yanıldığı veya kullanıcının zorlamak istediği durumlar var: yanlış MIME ile yüklenmiş bir log dosyası, garip uzantılı bir görsel. Sağ tıkla bir submenu açılıyor; aynı seçenek menubar'ın File menüsünde de var.

Bunu yapabilmek için context menu'ya submenu desteği ekledim — daha önce flat listeydi. Aynı altyapı ileride başka grupları (toplu işlemler, geliştirici araçları) genişletmek için hazır.

CSV / TSV için tablo görünümü

.csv ve .tsv dosyaları varsayılan olarak text gibi açılıyor (CodeMirror highlight'ı ile), ama header'da Edit butonunun yanında küçük bir "Table" toggle var. Tıklayınca:

Papaparse lazy chunk indirir (delimiter otomatik algılanır: , ; \t |)
Sticky header + sticky satır numarası kolonu ile tablo render edilir
1000 satır üzerinde "ilk 1000 gösteriliyor" notu (raw view tümünü gösterir)

Edit'e tıklayınca zorla raw view'a döner (HTML tablo edit'lenemez). Save sonrası yeniden parse edilir.

Image önizleme: zoom + pan

Görsel önizlemede zoom in / out / reset, mouse wheel zoom, klavye kısayolları (+ - 0), pan (zoom'luyken sürükleyerek). Zoom controls bir floating toolbar olarak görselin sağ-alt köşesinde — header'ı kalabalık etmiyor.

Önizleme navigasyonu yeniden yerleşti

Önceki sürümde sağ/sol ok butonları modal'ın içinde absolute konumdaydı ve preview'ı kapatıyordu. Şimdi:

Desktop: viewport'un sol/sağ kenarlarında floating (modal kutusunun dışında, Teleport ile body'ye)
Mobile: footer'da Close butonunun yanında grup buton [‹] [— Close —] [›] — preview alanı tamamen açık

Loading indicator

Eskiden "Loading..." metni modal'ın sol-altında, document flow içinde rastgele görünüyordu. Şimdi önizleme alanının ortasında, translucent chip içinde — temaya karşı okunabilir.

Arama

Sonuçlara sıralama

Search modal'da artık ayar dropdown'unda "Sort by" var: Name (A-Z/Z-A), Size, Date. Sıralama search modal'a özel — ana explorer'ın sort'unu etkilemez.

Folder sonuçları artık gezilebilir

Eskiden bir folder'ı search sonuçlarında bulduğunda "Open Containing Folder" ile sadece üst klasöre gidebiliyordun. Şimdi:

Folder satırına çift tık → klasörün içine girer + modal kapanır
Row menüsünde folder için "Open" aksiyonu (file için "Preview")

Pin'leme search'ten

50K klasörlü bir storage'da bir klasörü tree'den manuel bulmak imkânsız. Search ile bul → row menüsünden Pin Folder → o klasör tree panel'inin "Pinned Folders" bölümüne anlık eklenir. Bir sonraki tıkla doğrudan erişim. Pin'li klasör search sonuçlarında küçük amber bir badge ile gösterilir.

Stale request iptali

Hızlıca yazışta önceki search isteği AbortController ile iptal ediliyor — sonradan dönen cevap güncel sonuçları ezemez.

Dosya operasyonları

Upload dialog'unda inline rename

Her dosya satırının yanında kalem ikonu. Tıkla, name input'a dönüşür. Pending dosyalar lokal olarak rename ediliyor (uppy queue'da değiştirip yeniden ekleyerek), DONE durumdakiler için backend'e adapter.rename çağrılıyor.

İşin altında bir dosya kaybı bug'ı vardı (upstream PR'da): uppy rename'i reddederse — restriction, duplicate name, herhangi bir hata — dosya queue'dan komple kayboluyordu. Atomic recovery eklendi: hata varsa orijinal dosya geri konuluyor.

Archive / Unarchive için hedef klasör seçici

İki modal'a da inline tree-based folder picker eklendi. Default'u şu anki klasör (mevcut davranış değişmedi); ama kullanıcı açıp tree'den başka bir klasör seçebilir. Frontend wired; PHP backend desteği takip ediyor.

Filter-aware folder seçimi

Önceki versiyonlarda selectionFilterType="files" iken klasörler tamamen disabled görünüyordu — opacity 0.5, cursor not-allowed, dblclick bile çalışmıyordu. Şimdi:

Folder her zaman interactive (dblclick navigate eder)
Sadece selection setine eklenmez (filtre amacı bu zaten)
Folder'a tek tık → mevcut selection'ı temizler (boşluğa tıklamak gibi)

Görsel ve davranış uyumlu hale geldi.

UI ve davranış

Ayar persistence düzeltmesi (#161)

Daha önce :config prop'u her sayfa yüklemesinde localStorage'daki kullanıcı tercihlerini eziyordu. Yani kullanıcı view'i grid'den list'e çevirip sayfayı yenilerse, view geri grid'e dönüyordu — persistentAtom kullanmanın anlamı kalmıyordu.

stores/config.ts'te tek satırlık merge order düzeltmesi: prop = "ilk yüklemede default", localStorage = "kullanıcının tercihi". Tercih artık reload'da hayatta kalıyor. Forceful override gerekiyorsa app.config.set(...) composable API'sini kullanabilirsiniz.

URL değişiminde breadcrumb tüm öğeleri önce full-width render edip sonra hangileri sığıyor diye ölçüyor, sığmayanları dropdown'a aktarıyordu. Sonuç: her navigasyonda gözle görülebilir bir "hepsini göster sonra gizle" flash'ı.

Çözüm: segment width'lerini Map<basename, width> cache'le. Bilinen segment'lerde recompute synchronous → flash yok. Yeni segment'te eski "ölç ve daralt" davranışına düşülüyor ama ölçüm sonucu cache'leniyor, ikinci kez aynı klasörde flash olmuyor.

Altyapı

AbortSignal adapter API'sinde

Adapter arayüzünün list / search / save / getContent operasyonları artık opsiyonel signal?: AbortSignal parametresi alıyor. RemoteDriver bunu fetch'e iletir; AdapterManager TanStack Query'nin queryFn context signal'ını forward eder. Hızlı path değişiminde stale response'ların önüne geçmek için (search modal bunun ilk tüketicisi).

npm Trusted Publishing (OIDC)

Release script artık: gh release create vX.Y.Z → workflow tetiklenir → type-check + test + build + publish. Manuel npm publish yok.

CI gating

PR'larda artık sadece lint/prettier değil; type-check + vitest run + build de zorunlu. PR #164/#165 türü "dist commit'i sızıyor / format bozuk" durumların önüne geçer.

Test altyapısı

Vuefinder.spec.ts'te 13 test pre-existing olarak kırıktı — @nanostores/persistent mock'u subscribe method'unu implement etmediği için. Mock'u gerçek atom()'a delege ederek 19/19 passing'e çıkardım. Bonus: vitest 4.x'e bump (önceki vitest CVE'leri kapandı).

i18n

4.4.0 ile birlikte ~27 yeni İngilizce string eklendi (Sort by, Preview as, Table/Raw, Pin Folder etc.). 4.4.1 patch'inde 17 dilin tamamı için bu key'lerin çevirilerini yazdım. Şu an her locale en.js'e karşı 0 eksik key.

Sonraki adımlar

Roadmap'te beklenen birkaç önemli kalem var:

Zip dosyaları için inline preview (içerik listesi)
AWS S3 direkt upload (presigned multipart)
Signed URL desteği
List view'de extensible columns

Plus genel mimari soru: preview plugin architecture. CodeMirror'u entegre ederken yarı-yarıya tasarladım (dynamic import + Suspense pattern), ama gerçek bir registry/API olsa zip viewer, three.js .dwg/.dxf preview gibi şeyler buna oturabilir. Bu önümüzdeki sürümlerde olgunlaşacak.

VueFinder kullanıyorsanız npm install vuefinder@4.4.1 ile güncel sürüme geçebilirsiniz. Geri bildirim ve sorun bildirimleri için: github.com/n1crack/vuefinder. Bir sonraki release'de görüşmek üzere.