▲ PromNET

SÚGÓ › Kezdési útmutató

Desktop-mode — ablakos UX a PromNET dashboard-on

A klasszikus oldal-alapú dashboard helyett ablakos, drag/resize, dock-os, glassmorphic kezelőfelület — "operációs-rendszer-élmény" a böngészőben.

A PromNET dashboard két módban használható:

  • Klasszikus — oldal-alapú navigáció, sidebar + tartalom
  • Desktop-mode — ablakos UX, drag/resize, dock, glassmorphic stílus

A desktop-mode a /app/desktop URL-en érhető el, és egy operációs-rendszer-szerű élményt ad: több app párhuzamosan, ablak-átméretezés, minimize/maximize, dock-bar.

1. Mire jó?

  • Több projekt párhuzamos kezelése — pl. fájl-szerkesztő + analytics egyszerre, mint Mac-en a Stage Manager
  • Másik képernyő látvány-élménye — a dashboard mintha egy desktop-OS lenne, nagyobb monitorra leírva
  • Multi-tasking — chatbot-konfigurálás közben pillantasz a forint-egyenlegre egy másik ablakban
  • Power-user-élmény — ha sok funkciót használsz egyszerre, a klasszikus navigáció lassú

2. Mire NEM jó?

  • Mobile — desktop-mode-on csak desktop-on jó. Mobil-on a klasszikus felület ad sokkal jobb UX-et. (Az UI-mode-választón mobile alapból blocked.)
  • Egyszerű, lineáris feladatok — ha csak az analytics-szet nézed, a klasszikus 1 oldal egyszerűbb
  • Lassabb gép — a glassmorphic blur-effektek és az drag-animációk GPU-igényesek; régi laptopon lassú lehet

3. Hogyan kapcsold be?

3 helyen:

a) Onboarding 6. lépés

Ha új user vagy, a regisztráció után az onboarding-flow 6. lépésében megkérdezzük: “Klasszikus felület vagy Desktop-mode?”. 1-klikk választás. Ld. UI-mode-választó súgó.

b) Profil-oldalon utólag

Bármikor át tudsz váltani a /app/profil oldalon → “UI mód” szekció:

  • Klasszikus — a megszokott oldal-alapú dashboard
  • Desktop — ablakos környezet

A választás localStorage + szerver-oldali profil-mezőben (ui_mode) mentődik, így az összes eszközöden konzisztens.

c) Direkt URL-en

A /app/desktop URL mindig desktop-mode-ot tölt be, függetlenül a profil-beállítástól. Hasznos, ha gyorsan ki akarod próbálni.

4. Komponens-architektúra

A desktop-mode a következő elemekből áll:

flowchart TB
  Desktop[Desktop háttér] --> Window1[Ablak: Cloud-projektek]
  Desktop --> Window2[Ablak: Fájl-szerkesztő]
  Desktop --> Window3[Ablak: Analytics]
  Desktop --> Dock[Dock-bar alul]
  Dock --> Icon1[Cloud]
  Dock --> Icon2[Fájl]
  Dock --> Icon3[Analytics]
  Dock --> Icon4[Plugins]
  Dock --> Icon5[Profil]
  • Desktop-háttér — sötét gradient, glassmorphic blur a dock alatt
  • Ablakok — drag a fejlécen, resize a sarok-fogantyún, minimize/maximize/close 3-pontos gombokkal (mac-os style)
  • Dock-bar alul — kattintásra megnyitja az adott “app”-ot új ablakban
  • Z-index — a fókuszban lévő ablak felülre kerül

5. Drag & Resize

  • Mozgatás: a fejlécre kattintva húzd
  • Átméretezés: a jobb-alsó sarok-fogantyúra kattintva húzd
  • Minimize: a sárga pont az ablak fejlécében — a dock-ra kerül a “minimal-jelzéssel”
  • Maximize: a zöld pont — teljes-kép-méretű, második kattintásra vissza
  • Close: a piros pont — bezárja, dock-ról is eltűnik

A pozíció + méret ablakonként a localStorage-ben mentődik, legközelebbi megnyitásnál ugyanott lesz, ahol elhagytad.

6. Glassmorphic stílus

A vizuális stílus glassmorphism: minden ablak átlátszó-üveges, blur-effekttel a háttér felé. CSS-szabály:

.window {
  backdrop-filter: blur(20px);
  background: rgba(20, 20, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

A blur-effekt GPU-gyorsított, modern Chrome / Safari / Edge / Firefox-on gond nélkül megy.

7. Mit lehet az “ablakokban”?

A klasszikus oldalak mindegyike behívható ablakba:

  • Cloud-projektek — projekt-lista, létrehozás, szerkesztés
  • Fájl-szerkesztő — Monaco-Editor egy projekt fájljainak
  • Analytics — látogatás-statisztikák
  • Plugins — plugin-katalógus + aktiválás
  • Profil — fiók-adatok, preferenciák
  • Számlázás — kredit-egyenleg, számla-lista
  • Domain-ek — domain-lista, DNS-konfiguráció

Az ablakok iframe-ben töltik be a klasszikus oldalt, így a teljes funkcionalitás megvan, csak ablak-keretben.

8. Billentyűparancsok

Tervezett (még nincs élesben, de roadmap-en):

  • Cmd+Tab — ablak-váltás (mint mac-en)
  • Cmd+W — aktív ablak bezárása
  • Cmd+M — aktív ablak minimize
  • Cmd+Q — kijelentkezés (a teljes desktop-bezárás)

Egyelőre csak egér + touchpad.

9. Vissza klasszikusra

Ha mégsem tetszik, bármikor vissza:

  • /app/profil → “UI mód” → “Klasszikus”
  • vagy a desktop-mode dock-jában a “Profil” → “Vissza klasszikusra”

A két mód között váltás azonnali — nincs reset, nincs adatvesztés. A háttérben ugyanaz a dashboard van, csak más a renderer.

10. Roadmap

A desktop-mode aktív fejlesztés alatt áll. Tervezett:

  • Több-monitor-támogatás — ha 2 monitorod van, az ablakokat a kettő közt mozgathatod
  • Snap-zónák — ablak az egyik szélre dobva fél-képernyő-szélességű
  • Egyedi háttér — saját kép háttérnek
  • Fastest dock — a dock-ra dobott projektre direkt-launch
  • Widget-ek — kis “jelzők” a desktop-on (pl. forint-egyenleg, projekt-szám)

Szavazz a /roadmap oldalon, melyik kell előbb!

← Kezdési útmutató Frissítve: 2026. 05. 08.