macOS Tahoe, tarayıcıda

Bu, macOS Tahoe'nun Liquid Glass görünümünü tarayıcıda yeniden kurduğum bir masaüstü. Gerçek bir Mac'teki gibi pencereleri sürükleyip boyutlandırabilir, uygulamaları Dock'tan açabilir, Finder'da dosya taşıyabilir, Terminal'de komut çalıştırabilirsin. Dosyaların, notların ve ayarların tarayıcıda saklanıyor, bu yüzden sayfayı yenilesen de kaybolmuyorlar.

İçinde on uygulama var: Finder, Terminal, TextEdit, Safari, Notes, Preview, Music, Calendar, Calculator ve System Settings. Çevrelerinde de Spotlight, Launchpad, Control Center, Mission Control ve ⌘Tab uygulama değiştirici duruyor. Menü çubuğundaki saate tıklarsan hava durumu ve takvim widget'larının olduğu bir Bildirim Merkezi açılıyor. Dock'taki bir ikona sağ tıkladığında da macOS'taki menü çıkıyor: pencere listesi, Keep in Dock, Show All Windows, Hide ve Quit.

Projede Apple'a ait tek bir dosya bile yok. İkonları, dalgalar ve dağ manzarası dahil duvar kâğıtlarını ve logoyu kodla çizdim. Logo Apple'ınkini andırıyor ama ısırığı olmayan sade bir meyve silueti. Kodu React 19, TypeScript, Tailwind CSS 4, zustand ve react-rnd ile yazdım; geliştirme sunucusu ve paketleme için Bun kullanıyorum.

Bir kayıt, bir uygulama

src/os/apps.ts içindeki APPS listesi her uygulamayı tek bir kayıtla tanımlıyor. Bir kayıtta şunlar var: React.lazy ile yüklenen bileşen (production derlemesinde her uygulama ayrı bir chunk oluyor), pencerenin açılış ve en küçük boyutu, uygulama ikinci kez açıldığında var olan pencerenin öne gelip gelmeyeceği, menü çubuğundaki menüler ve uygulamanın açtığı MIME türleri. Info ve About This Mac gibi yardımcı pencereler de aynı listede ama Dock'ta görünmüyorlar. Bazı uygulamalar da başlık çubuğu yerine trafik ışıklarının altına kendi araç çubuğunu çiziyor.

Dock, Launchpad, Spotlight ve menü çubuğu uygulamaları bu listeden kendiliğinden görüyor. Yani yeni bir uygulama eklemek için bir bileşen, bir kayıt ve bir SVG ikonu yetiyor. Bir dosyayı açtığında uygun uygulama da buradan bulunuyor: klasörler Finder'da, metin ve JSON TextEdit'te, resimler Preview'da, sesler Music'te açılıyor.

Menü öğeleri kısayolu ekranda göründüğü haliyle ("⇧⌘N" gibi) tutuyor, src/os/hotkeys.ts de aynı metni ayrıştırıyor. Böylece menüde yazan kısayol ile gerçekten çalışan kısayol birbirinden kopamıyor. Pencere yöneticisinin komutlarını (about, settings, new-window, quit, close, minimize, zoom gibi) runCommand kendisi yürütüyor, geri kalanını odaktaki pencereye iletiyor; uygulamalar da bunları useCommand hook'uyla dinliyor. macOS dışında ⌘ yerine Ctrl, ⌃ ve ⌥ yerine de Alt kullanılıyor. Metin alanları, değiştirici tuş olmadan yapılan basışları, Backspace'i ve ok tuşlarını kendilerine ayırıyor; menü kısayolları ancak bunların dışında devreye giriyor.

Pencereler ve disk

Pencere yöneticisi de bir zustand store'u. Her pencere kaydında konum, boyut, z-sırası, küçültülmüş, gizli ve büyütülmüş durumları ve kaydedilmemiş değişiklikleri gösteren dirty bayrağı var. dirty olan bir pencereyi kapatmaya çalışırsan "değişiklikler kaydedilsin mi?" sayfası açılıyor. Aynı uygulamanın yeni pencereleri 26 piksel kaydırılarak basamak basamak açılıyor. src/os/system.ts ise oturumun hangi aşamada olduğunu (açılış, giriş, masaüstü, uyku, kapalı) ve aynı anda yalnızca birinin açık olabildiği tam ekran katmanını tutuyor; Spotlight, Launchpad, Mission Control, Control Center ve bildirimler bu katmanı paylaşıyor. Mission Control'ü yalnızca tek bir uygulamanın pencereleriyle de açabilirsin.

Dosya sistemini iç içe bir ağaç olarak değil, her biri kendi parentId'sini bilen düğümlerden oluşan düz bir tablo olarak tuttum; yollar bu bağlardan türetiliyor. Metin ve SVG içeriği düz metin, ikili dosyalar data URL, uygulama kısayolları da uygulama kimliği olarak saklanıyor. Çöp Kutusu'na taşıdığın bir öğe eski klasörünü hatırlıyor, yani onu geri yükleyebiliyorsun. Bir klasörü kendi içine taşımak ise engelleniyor. Masaüstü ikonlarının konumu bile düğümün üzerinde tutuluyor. Diski localStorage yerine IndexedDB'ye yazıyorum, çünkü içe aktarılan resimler ve sesler yaklaşık 5 MB'lık localStorage kotasını çabucak dolduruyor. IndexedDB yoksa localStorage'a geri düşülüyor. Notlar, takvim, Safari yer imleri ve ayarlar ise localStorage'da.

Spotlight, Terminal ve cam

Spotlight'ın arkasında bulanık eşleştirme ve satır içi bir hesap makinesi var. Hesap makinesi eval kullanmıyor; 2*(3+4)^2 / sqrt(16) gibi ifadeleri özyinelemeli inişle (recursive descent) kendisi çözüyor ve sqrt, sin, cos, tan, log, ln, abs, pi ve e'yi tanıyor. Terminal'de yazdığın ls, cd, mkdir, mv, cp, cat, open ve neofetch gibi komutlar da Finder'ın kullandığı dosya sistemi üzerinde çalışıyor, yani Terminal'de oluşturduğun bir klasörü Finder'da da görüyorsun.

Cam efekti index.html içindeki bir SVG filtresine (feDisplacementMap) dayanıyor. main.tsx kırılma değişkenini yalnızca navigator.userAgentData bulunan tarayıcılarda bu filtreye bağlıyor; backdrop-filter önce kırılmayı, ardından bulanıklık ve doygunluğu uyguluyor. Diğer tarayıcılarda cam düz bir bulanıklıkla çiziliyor. Bildirim Merkezi'ndeki hava durumu Open-Meteo'dan geliyor. Konum izni istemiyor: şehri saat diliminden tahmin ediyor (Europe/Istanbul → Istanbul) ve yalnızca şehir adını gönderiyor.

Tarayıcının sınırlarına takılan yerler de var. Çoğu site iframe içinde açılmayı reddediyor, bu yüzden Safari her sayfayı gösteremiyor; her sayfada bir "yeni sekmede aç" bağlantısı var. Adres çubuğuna düz kelimeler yazarsan arama Wikipedia'da yapılıyor, çünkü Wikipedia çerçevelenmeye izin veriyor. Windows ve Linux'ta Ctrl+W gibi tarayıcının kendine ayırdığı kısayollar sayfaya ulaşmıyor; bu komutları menüden çalıştırabilirsin. Camdaki kırılma yalnızca Chrome, Edge ve Arc gibi Chromium tabanlı tarayıcılarda görünüyor. Masaüstü de telefonda kullanışlı değil.

Pencere yöneticisini ve dosya sistemini tarayıcıda yazdığım diğer işletim sistemleriyle ayrı bir yazıda karşılaştırdım.