run-stage.sh

@@ -4,11 +4,23 @@
 # -------------------------------------------------------------
 set -e
 
+NEXUS_ONLY=false
+for arg in "$@"; do
+    case $arg in
+        --nexus-only|-n)
+            NEXUS_ONLY=true
+            ;;
+    esac
+done
+
 ENV_FILE=".env.stage"
 TEMPLATE_FILE=".env.stage.template"
 COMPOSE_FILE="docker-compose.stage.yml"
 
 echo "🏁 Starting staging environment orchestration..."
+if [ "$NEXUS_ONLY" = true ]; then
+    echo "ℹ️ Mode: --nexus-only (only the web/nexus application container will be modified)"
+fi
 
 # 1. Create .env.stage if it doesn't exist
 if [ ! -f "$ENV_FILE" ]; then
@@ -58,13 +70,24 @@ POSTGRES_PORT=${POSTGRES_PORT:-5438}
 WEB_PORT=${WEB_PORT:-5080}
 
 # 3. Stop any conflicting Docker Compose environments
+if [ "$NEXUS_ONLY" = true ]; then
+    echo "🧹 Stopping and removing only the web (nexus) container..."
+    docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" stop web || true
+    docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" rm -f web || true
+else
     echo "🧹 Stopping existing containers..."
     docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" down --remove-orphans || true
     docker compose down --remove-orphans 2>/dev/null || true
+fi
 
 # 4. Build and start containers
+if [ "$NEXUS_ONLY" = true ]; then
+    echo "🚀 Building and restarting only the web (nexus) container..."
+    docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" up -d --build web
+else
     echo "🚀 Building and starting staging containers..."
     docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" up -d --build
+fi
 
 # 5. Wait for Database to be healthy
 echo "⏳ Waiting for database (nexus-db-stage) to become healthy..."

src/NexusReader.UI.Shared/Pages/CreatorEdit.razor

@@ -6,15 +6,18 @@
 <div class="creator-edit-fullscreen-wrapper">
     
     <div class="chapters-sidebar">
+        <div class="sidebar-meta-header">
             <h2>Rozdziały</h2>
+        </div>
         <div class="chapters-list-wrapper">
             <div class="chapter-item active">
+                <div class="active-indicator"></div>
                 <i class="fa-solid fa-book-open chapter-icon"></i>
-                <span>1. Rozdział 1: Wprowadzenie do Zen Mode</span>
+                <span class="chapter-title-text">1. Rozdział 1: Wprowadzenie do Zen Mode</span>
             </div>
             <div class="chapter-item">
-                <i class="fa-solid fa-lock chapter-icon"></i>
-                <span>2. Rozdział 2: Zabezpieczenia i Architektura</span>
+                <i class="fa-solid fa-file-lines chapter-icon"></i>
+                <span class="chapter-title-text">2. Rozdział 2: Zabezpieczenia i Architektura</span>
             </div>
         </div>
     </div>
@@ -22,8 +25,10 @@
     <div class="editor-workspace-area">
         
         <div class="editor-header-row">
+            <div class="title-zone">
                 <h1 class="chapter-title">Rozdział 1: Wprowadzenie do Zen Mode</h1>
-            <div class="chapter-meta-zone">
+            </div>
+            <div class="telemetry-zone">
                 <span class="chapter-id-badge">ID: @ChapterId</span>
             </div>
         </div>
@@ -42,7 +47,7 @@
                 
                 <button class="btn-nexus-premium" @onclick="FetchContent">
                     <span>Fetch Markdown Content</span>
-                    <i class="fa-solid fa-arrow-right"></i>
+                    <i class="fa-solid fa-arrow-right-long"></i>
                 </button>
             </div>
 
@@ -57,7 +62,6 @@
 
     private async Task FetchContent()
     {
-        // Tutaj trafia Twoja logika wyciągania zawartości z edytora Milkdown
         await Task.CompletedTask;
     }
 }

src/NexusReader.UI.Shared/Pages/CreatorEdit.razor.css

@@ -1,150 +1,179 @@
 /* ==========================================================================
-   NEXUSREADER CREATOR EDIT MODE - PREMIUM SAAS CORE STYLES
+   NEXUSREADER CREATOR EDIT MODE - HIGH-FIDELITY SAAS PREMIUM DESIGN OVERRIDE
    ========================================================================== */
 
-/* 1. MASTER WRAPPER (Zgładzenie globalnego scrolla przeglądarki) */
+/* 1. ARCHITECTURAL BOUNDARY CONTROL */
 .creator-edit-fullscreen-wrapper {
     width: 100% !important;
     max-width: 100% !important;
-    height: calc(100vh - 4rem) !important; /* Sztywne cięcie pod wysokość topbaru platformy */
+    height: calc(100vh - 4rem) !important;
     margin: 0 !important;
     padding: 0 !important;
     display: flex !important;
-    overflow: hidden !important; /* Całkowity zakaz scrollowania okna głównego */
-    background-color: var(--bg-base);
+    overflow: hidden !important;
+    background-color: #121214;
     box-sizing: border-box;
 }
 
-/* 2. MATTE CHAPTERS SIDEBAR (Luksusowy panel boczny) */
+/* Dynamic theme bridge mapping for Warm Paper mode */
+.theme-light .creator-edit-fullscreen-wrapper {
+    background-color: #f4f1ea;
+}
+
+/* 2. UNIFIED SIDEBAR DESIGN (Eliminating layout color fragmentation) */
 .chapters-sidebar {
-    width: 290px !important;
+    width: 300px !important;
     flex-shrink: 0;
-    background-color: #141417 !important; /* Matowy głęboki antracyt z readera */
-    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
+    background-color: #16161a !important;
+    border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
     display: flex;
     flex-direction: column;
-    padding: 2rem 1.25rem !important;
+    padding: 2.5rem 1.5rem !important;
     box-sizing: border-box;
 }
 
 .theme-light .chapters-sidebar {
-    background-color: #ede9df !important; /* Dopasowanie do motywu Warm Paper */
-    border-right: 1px solid var(--border) !important;
+    background-color: #eae6db !important; /* Rich warm tone that remains fully cohesive with warm paper base */
+    border-right: 1px solid #dcd7cc !important;
 }
 
-.chapters-sidebar h2 {
-    font-size: 0.85rem;
+.sidebar-meta-header h2 {
+    font-size: 0.8rem;
     font-weight: 700;
     text-transform: uppercase;
-    letter-spacing: 1.5px;
-    color: var(--text-muted);
-    margin: 0 0 1.5rem 0;
-    padding-left: 0.5rem;
+    letter-spacing: 2px;
+    color: #a1a1aa;
+    margin: 0 0 1.75rem 0;
+}
+
+.theme-light .sidebar-meta-header h2 {
+    color: #78716c;
 }
 
 .chapters-list-wrapper {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 6px;
 }
 
-/* Elementy listy rozdziałów */
+/* Premium Navigation Links */
 .chapter-item {
+    position: relative;
     display: flex;
     align-items: center;
     gap: 12px;
-    padding: 12px 14px !important;
-    border-radius: 8px;
-    color: var(--text-muted);
+    padding: 12px 16px !important;
+    border-radius: 10px;
+    color: #a1a1aa;
     font-size: 0.95rem;
     cursor: pointer;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    border-left: 3px solid transparent !important;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.theme-light .chapter-item {
+    color: #78716c;
 }
 
 .chapter-item i.chapter-icon {
-    font-size: 0.9rem;
-    color: var(--text-muted);
+    font-size: 0.95rem;
+    color: #71717a;
+    transition: color 0.25s ease;
 }
 
-/* Aktywny stan unifikacji wizualnej */
+/* Active Indicator Node Alignment */
 .chapter-item.active {
-    background-color: rgba(0, 255, 153, 0.04) !important;
-    color: var(--accent) !important;
+    background-color: rgba(0, 255, 153, 0.05) !important;
+    color: #00ff99 !important;
     font-weight: 600;
-    border-left: 3px solid var(--accent) !important;
-}
-
-.chapter-item.active i.chapter-icon {
-    color: var(--accent) !important;
 }
 
 .theme-light .chapter-item.active {
     background-color: rgba(16, 185, 129, 0.06) !important;
+    color: #10b981 !important;
+}
+
+.chapter-item.active i.chapter-icon {
+    color: inherit !important;
 }
 
 .chapter-item:hover:not(.active) {
     background-color: rgba(255, 255, 255, 0.02);
-    color: var(--text-main);
+    color: #ffffff;
 }
 
-/* 3. WORKSPACE CORE (Główna oś edytora) */
+.theme-light .chapter-item:hover:not(.active) {
+    background-color: rgba(0, 0, 0, 0.02);
+    color: #2d2a26;
+}
+
+/* 3. WORKSPACE METRICS (Zen presentation spacing) */
 .editor-workspace-area {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     height: 100%;
-    padding: 2.5rem 3.5rem 2rem 3.5rem !important; /* Odpowiedni, dostojny margines Zen Mode */
+    padding: 3rem 4rem 2.5rem 4rem !important; /* Generous padding context for premium scale */
     box-sizing: border-box;
     overflow: hidden;
 }
 
-/* Nagłówek i ID bez ryzyka kolizji */
 .editor-header-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 1.5rem;
+    margin-bottom: 2rem;
     flex-shrink: 0;
     width: 100%;
 }
 
 .editor-workspace-area h1.chapter-title {
-    font-size: 2.2rem;
+    font-size: 2.4rem;
     font-weight: 700;
-    color: var(--text-main);
+    color: #ffffff;
     margin: 0;
-    letter-spacing: -0.5px;
+    letter-spacing: -0.75px;
+}
+
+.theme-light .editor-workspace-area h1.chapter-title {
+    color: #2d2a26;
 }
 
 .chapter-id-badge {
     font-family: 'Azeret Mono', monospace;
-    font-size: 0.75rem;
-    color: var(--text-muted);
-    background: rgba(255, 255, 255, 0.03);
-    padding: 5px 12px;
-    border-radius: 6px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    white-space: nowrap;
+    font-size: 0.72rem;
+    color: #71717a;
+    background: #1a1a1e;
+    padding: 6px 14px;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    letter-spacing: 0.2px;
 }
 
 .theme-light .chapter-id-badge {
-    background: rgba(0, 0, 0, 0.02);
-    border: 1px solid var(--border);
+    background: #ffffff;
+    color: #78716c;
+    border: 1px solid #dcd7cc;
 }
 
-/* 4. PREMIUM CANVAS CARD (Rozciąganie Flex na 100% wysokości) */
+/* 4. ELEVATED EDITOR CANVAS CARD (Introducing layered shadow mechanics) */
 .editor-canvas-card {
-    background-color: var(--bg-surface) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 16px;
-    padding: 2.5rem !important;
+    background-color: #1a1a1e !important;
+    border: 1px solid rgba(255, 255, 255, 0.04) !important;
+    border-radius: 20px;
+    padding: 3rem !important;
     display: flex;
     flex-direction: column;
-    flex-grow: 1; /* Wymusza rozciągnięcie do samego paska stopki */
+    flex-grow: 1;
     overflow: hidden;
     box-sizing: border-box;
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+    /* Soft diffuse structural shadows mimicking actual surface elevation */
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.theme-light .editor-canvas-card {
+    background-color: #ffffff !important;
+    border: 1px solid #dcd7cc !important;
+    box-shadow: 0 20px 50px rgba(45, 42, 38, 0.04), 0 4px 12px rgba(45, 42, 38, 0.02);
 }
 
 .milkdown-premium-container {
@@ -155,8 +184,7 @@
     width: 100%;
 }
 
-/* --- DEEP SELECTORS DLA PROSEMIRROR (MILKDOWN RENDER) --- */
-
+/* DEEP MOUNTING COMPONENT INTEROP */
 ::deep .milkdown {
     background: transparent !important;
     box-shadow: none !important;
@@ -169,51 +197,32 @@
 }
 
 ::deep .ProseMirror {
-    color: var(--text-main) !important;
+    color: #e4e1d9 !important;
     background-color: transparent !important;
-    font-family: inherit !important;
-    font-size: 1.1rem !important;
-    line-height: 1.75 !important;
+    font-size: 1.15rem !important;
+    line-height: 1.8 !important;
     flex-grow: 1;
-    overflow-y: auto !important; /* Scroll pojawia się TYLKO na tekście rozdziału */
-    padding-right: 15px !important;
+    overflow-y: auto !important;
+    padding-right: 24px !important;
     outline: none !important;
     box-sizing: border-box;
     width: 100%;
 }
 
-/* Kontekst zaznaczenia zunifikowany z readerem */
+.theme-light ::deep .ProseMirror {
+    color: #2d2a26 !important;
+}
+
+/* Precise matching text selection token */
 ::deep .ProseMirror ::selection {
-    background-color: rgba(0, 255, 153, 0.25) !important;
-    color: inherit !important;
+    background-color: rgba(0, 255, 153, 0.2) !important;
 }
 
 .theme-light ::deep .ProseMirror ::selection {
-    background-color: rgba(16, 185, 129, 0.2) !important;
+    background-color: rgba(16, 185, 129, 0.18) !important;
 }
 
-/* Popover / dymek formatowania zintegrowany z czytnikiem */
-::deep .milkdown .popover,
-::deep .milkdown-popover,
-::deep .prosemirror-bubble-menu {
-    background-color: #1e1e22 !important;
-    border: 1px solid rgba(255, 255, 255, 0.08) !important;
-    border-radius: 12px !important;
-    padding: 6px 10px !important;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
-    display: flex !important;
-    align-items: center !important;
-    gap: 12px !important;
-}
-
-.theme-light ::deep .milkdown .popover,
-.theme-light ::deep .prosemirror-bubble-menu {
-    background-color: #ffffff !important;
-    border: 1px solid var(--border) !important;
-    box-shadow: 0 10px 30px rgba(45, 42, 38, 0.06) !important;
-}
-
-/* Customowy, dyskretny scrollbar dla tekstu książki */
+/* Core webkit custom scrollbar mapping */
 ::deep .ProseMirror::-webkit-scrollbar {
     width: 6px;
 }
@@ -221,71 +230,96 @@
     background: transparent;
 }
 ::deep .ProseMirror::-webkit-scrollbar-thumb {
-    background: var(--border);
-    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 4px;
 }
 
-/* 5. FIXED FOOTER BAR (Zintegrowany dół pancernej karty) */
+.theme-light ::deep .ProseMirror::-webkit-scrollbar-thumb {
+    background: #dcd7cc;
+}
+
+/* 5. SEAMLESS INTEGRATED ACTIONS FOOTER BAR */
 .editor-footer-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-top: 1.5rem;
-    padding-top: 1.25rem;
-    border-top: 1px solid var(--border);
-    flex-shrink: 0; /* Gwarancja, że pasek nigdy nie ucieknie poza kartę */
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.04);
+    flex-shrink: 0;
     width: 100%;
 }
 
-/* Status zapisu w chmurze z pulsującą diodą akcentową */
+.theme-light .editor-footer-bar {
+    border-top: 1px solid #dcd7cc;
+}
+
+/* Telemetry cloud synchronization line */
 .cloud-status-container {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 12px;
 }
 
 .cloud-status-pulse {
-    width: 8px;
-    height: 8px;
-    background-color: var(--accent);
+    width: 7px;
+    height: 7px;
+    background-color: #00ff99;
     border-radius: 50%;
     display: inline-block;
-    box-shadow: 0 0 10px var(--accent);
-    position: relative;
+    box-shadow: 0 0 10px rgba(0, 255, 153, 0.8);
+}
+
+.theme-light .cloud-status-pulse {
+    background-color: #10b981;
+    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
 }
 
 .cloud-status-text {
     font-family: 'Azeret Mono', monospace;
-    font-size: 0.85rem;
-    color: var(--text-muted);
+    font-size: 0.82rem;
+    color: #71717a;
+    letter-spacing: 0.1px;
 }
 
-/* Przycisk akcji premium */
+/* Premium Tactile Operational Button Trigger */
 .btn-nexus-premium {
-    background-color: var(--accent) !important;
+    background-color: #00ff99 !important;
     color: #121214 !important;
     font-weight: 700;
-    font-size: 0.95rem;
-    padding: 10px 22px;
+    font-size: 0.9rem;
+    letter-spacing: -0.1px;
+    padding: 11px 24px;
     border: none !important;
-    border-radius: 8px;
+    border-radius: 10px;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 4px 14px var(--accent-glow);
+    box-shadow: 0 4px 20px rgba(0, 255, 153, 0.15);
 }
 
 .theme-light .btn-nexus-premium {
+    background-color: #10b981 !important;
     color: #ffffff !important;
+    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
+}
+
+.btn-nexus-premium i {
+    font-size: 0.85rem;
+    transition: transform 0.2s ease;
 }
 
 .btn-nexus-premium:hover {
     transform: translateY(-1px);
-    box-shadow: 0 6px 20px var(--accent-glow);
+    box-shadow: 0 8px 24px rgba(0, 255, 153, 0.3);
 }
 
-.btn-nexus-premium:active {
-    transform: translateY(0);
+.theme-light .btn-nexus-premium:hover {
+    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
+}
+
+.btn-nexus-premium:hover i {
+    transform: translateX(3px);
 }