file-manager ciode-box fix

app/Http/Controllers/Settings/PasswordController.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Controllers\Settings;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Validation\Rules\Password;
+use Illuminate\View\View;
+
+class PasswordController extends Controller
+{
+    public function edit(): View
+    {
+        return view('settings.password');
+    }
+
+    public function update(Request $request): RedirectResponse
+    {
+        $validated = $request->validateWithBag('updatePassword', [
+            'current_password' => ['required', 'current_password'],
+            'password'         => ['required', Password::defaults(), 'confirmed'],
+        ]);
+
+        $request->user()->update([
+            'password' => Hash::make($validated['password']),
+        ]);
+
+        return back()->with('status', 'password-updated');
+    }
+}

app/Http/Controllers/Settings/ProfileController.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Http\Controllers\Settings;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\View\View;
+
+class ProfileController extends Controller
+{
+    public function edit(Request $request): View
+    {
+        return view('settings.profile', [
+            'user'              => $request->user(),
+            'mustVerifyEmail'   => $request->user() instanceof MustVerifyEmail,
+            'status'            => session('status'),
+        ]);
+    }
+
+    public function update(Request $request): RedirectResponse
+    {
+        $data = $request->validate([
+            'name'  => ['required', 'string', 'max:255'],
+            'email' => ['required', 'string', 'lowercase', 'email', 'max:255',
+                        'unique:users,email,' . $request->user()->id],
+        ]);
+
+        $request->user()->fill($data);
+
+        if ($request->user()->isDirty('email')) {
+            $request->user()->email_verified_at = null;
+        }
+
+        $request->user()->save();
+
+        return back()->with('status', 'profile-updated');
+    }
+
+    public function destroy(Request $request): RedirectResponse
+    {
+        $request->validateWithBag('userDeletion', [
+            'password' => ['required', 'current_password'],
+        ]);
+
+        $user = $request->user();
+        Auth::logout();
+        $user->delete();
+
+        $request->session()->invalidate();
+        $request->session()->regenerateToken();
+
+        return redirect('/');
+    }
+}

app/Livewire/FileManager.php

@@ -167,6 +167,7 @@ public function saveFile(string $content): void
 
         $this->fileContent = $content;
         $this->isDirty     = false;
+        $this->dispatch('file-saved');   // Alpine resets dirty indicator
         $this->showFlash('Saved ✓');
     }
 

resources/css/app.css

@@ -11,6 +11,8 @@
 @theme {
     --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
                  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+    /* ── Zinc scale ───────────────────────────────────────────────────── */
     --color-zinc-50:  #fafafa;
     --color-zinc-100: #f5f5f5;
     --color-zinc-200: #e5e5e5;
@@ -22,16 +24,31 @@
     --color-zinc-800: #262626;
     --color-zinc-900: #171717;
     --color-zinc-950: #0a0a0a;
-    --color-accent:             var(--color-neutral-800);
-    --color-accent-content:     var(--color-neutral-800);
+
+    /* ── Brand color (indigo-based, customize here) ───────────────────── */
+    --color-brand-50:  #eef2ff;
+    --color-brand-100: #e0e7ff;
+    --color-brand-200: #c7d2fe;
+    --color-brand-300: #a5b4fc;
+    --color-brand-400: #818cf8;
+    --color-brand-500: #6366f1;
+    --color-brand-600: #4f46e5;
+    --color-brand-700: #4338ca;
+    --color-brand-800: #3730a3;
+    --color-brand-900: #312e81;
+    --color-brand-950: #1e1b4b;
+
+    /* ── Flux accent (maps to brand) ─────────────────────────────────── */
+    --color-accent:             var(--color-brand-500);
+    --color-accent-content:     var(--color-brand-500);
     --color-accent-foreground:  var(--color-white);
 }
 
 @layer theme {
     .dark {
-        --color-accent:             var(--color-white);
-        --color-accent-content:     var(--color-white);
-        --color-accent-foreground:  var(--color-neutral-800);
+        --color-accent:             var(--color-brand-400);
+        --color-accent-content:     var(--color-brand-400);
+        --color-accent-foreground:  var(--color-zinc-950);
     }
 }
 
@@ -43,8 +60,19 @@
     ::file-selector-button {
         border-color: var(--color-gray-200, currentColor);
     }
+
+    /* Smooth theme transition */
+    html {
+        color-scheme: light dark;
+    }
+
+    html.transitioning,
+    html.transitioning * {
+        transition: background-color 0.2s ease, color 0.15s ease, border-color 0.15s ease !important;
+    }
 }
 
+/* ── Flux field/label overrides ─────────────────────────────────────────── */
 [data-flux-field]:not(ui-radio, ui-checkbox) {
     @apply grid gap-2;
 }
@@ -59,13 +87,13 @@ select:focus[data-flux-control] {
     @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
 }
 
-/* ── CodeMirror 6 ─────────────────────────────────────────────────────────── */
+/* ── CodeMirror 6 ───────────────────────────────────────────────────────── */
 .cm-editor {
     height: 100%;
     font-size: 0.85rem;
 }
 
 .cm-scroller {
     overflow: auto;
-    font-family: ui-monospace, 'Cascadia Code', 'JetBrains Mono', monospace;
+    font-family: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, monospace;
 }

resources/js/file-manager.js

@@ -104,7 +104,9 @@ function createEditor(content, lang) {
                 EditorView.updateListener.of(update => {
                     if (update.selectionSet) publishCursor(update.state);
                     if (!update.docChanged) return;
-                    getWire()?.set('isDirty', true);
+                    // Dispatch to Alpine only — never call $wire.set() here.
+                    // $wire.set() triggers a full Livewire re-render which destroys #cm-host.
+                    window.dispatchEvent(new CustomEvent('cm-dirty'));
                     clearTimeout(saveDebounce);
                     saveDebounce = setTimeout(triggerSave, 1200);
                 }),
@@ -135,6 +137,9 @@ document.addEventListener('alpine:init', () => {
         // Drag-and-drop state
         dragOver: false,
 
+        // Dirty state — tracked purely in Alpine, never via $wire.set()
+        dirty: false,
+
         // ── Modal helpers ────────────────────────────────────────────────
         openModal(name)  { this.modal = name; },
         closeModal()     { this.modal = null; },
@@ -168,12 +173,21 @@ document.addEventListener('alpine:init', () => {
 
         // ── Init ─────────────────────────────────────────────────────────
         init() {
-            // CodeMirror events
+            // CodeMirror cursor position
             window.addEventListener('cm-cursor', e => { this.cursor = e.detail; });
+
+            // Editor content changed — mark dirty in Alpine only (never via $wire.set)
+            window.addEventListener('cm-dirty', () => { this.dirty = true; });
+
+            // File opened — reset dirty and create editor
             window.addEventListener('load-editor', e => {
+                this.dirty = false;
                 createEditor(e.detail.content, e.detail.language);
             });
 
+            // Livewire saved successfully — reset dirty
+            window.addEventListener('file-saved', () => { this.dirty = false; });
+
             // Livewire → Alpine modal control
             window.addEventListener('open-modal',  e => this.openModal(e.detail?.name));
             window.addEventListener('close-modal', () => this.closeModal());

resources/views/components/app-layout.blade.php

@@ -7,64 +7,90 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <title>{{ $title }}</title>
+    {{-- Dark mode bootstrap: runs before CSS paint to prevent flash --}}
+    <script>
+        (function () {
+            const t = localStorage.getItem('theme');
+            if (t === 'dark' || (!t && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.classList.add('dark');
+            }
+        })();
+    </script>
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @livewireStyles
     @stack('head')
 </head>
-<body class="min-h-full bg-white dark:bg-zinc-900 font-sans antialiased">
+<body class="min-h-full bg-white dark:bg-zinc-900 font-sans antialiased text-zinc-800 dark:text-zinc-200 transition-colors">
 
-    <flux:header class="border-b border-zinc-200 dark:border-zinc-700">
-        <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
+<nav class="border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 sticky top-0 z-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 h-14 flex items-center gap-4">
+        <a href="{{ route('dashboard') }}"
+           class="font-bold text-base tracking-tight text-brand-600 dark:text-brand-400 shrink-0">
+            {{ config('app.name') }}
+        </a>
 
-        <flux:brand href="{{ route('dashboard') }}" name="{{ config('app.name') }}" />
-
-        <flux:spacer />
-
-        <flux:navbar>
-            <flux:navbar.item href="{{ route('dashboard') }}"
-                              :current="request()->routeIs('dashboard')">
+        <div class="flex items-center gap-1 flex-1">
+            <a href="{{ route('dashboard') }}"
+               class="px-3 py-1.5 text-sm rounded-md transition
+                      {{ request()->routeIs('dashboard') ? 'text-zinc-900 dark:text-white bg-zinc-100 dark:bg-white/10 font-medium' : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-white/8' }}">
                 Dashboard
-            </flux:navbar.item>
-        </flux:navbar>
-
-        <flux:spacer />
+            </a>
+            <a href="{{ route('settings.profile') }}"
+               class="px-3 py-1.5 text-sm rounded-md transition
+                      {{ request()->routeIs('settings.*') ? 'text-zinc-900 dark:text-white bg-zinc-100 dark:bg-white/10 font-medium' : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-white/8' }}">
+                Settings
+            </a>
+        </div>
 
-        <flux:button href="{{ route('pages.create') }}" variant="primary" size="sm" icon="plus">
-            New Page
-        </flux:button>
+        <div class="flex items-center gap-2">
+            <x-theme-toggle />
 
-        <form method="POST" action="{{ route('logout') }}" class="ml-2">
-            @csrf
-            <flux:button type="submit" variant="ghost" size="sm">Logout</flux:button>
-        </form>
-    </flux:header>
+            <a href="{{ route('pages.create') }}"
+               class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-lg
+                      bg-brand-600 hover:bg-brand-500 text-white transition">
+                <flux:icon.plus class="size-3.5" />
+                New Page
+            </a>
 
-    @if (session('success'))
-        <div x-data="{ show: true }"
-             x-show="show"
-             x-transition
-             x-init="setTimeout(() => show = false, 4000)"
-             class="border-b border-green-200 bg-green-50 dark:bg-green-950 dark:border-green-800
-                    text-green-800 dark:text-green-300 px-6 py-3 text-sm flex justify-between">
-            <span>{{ session('success') }}</span>
-            <button x-on:click="show = false" class="opacity-60 hover:opacity-100 ml-4">✕</button>
+            <form method="POST" action="{{ route('logout') }}" class="inline">
+                @csrf
+                <button type="submit"
+                        class="px-3 py-1.5 text-sm rounded-md text-zinc-500 dark:text-zinc-400
+                               hover:text-zinc-800 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-white/8 transition">
+                    Logout
+                </button>
+            </form>
         </div>
-    @endif
+    </div>
+</nav>
 
-    @if ($errors->any())
-        <div class="border-b border-red-200 bg-red-50 dark:bg-red-950
-                    text-red-700 dark:text-red-300 px-6 py-3 text-sm">
-            <ul class="list-disc list-inside space-y-0.5">
-                @foreach ($errors->all() as $error)
-                    <li>{{ $error }}</li>
-                @endforeach
-            </ul>
-        </div>
-    @endif
+@if (session('success'))
+    <div x-data="{ show: true }"
+         x-show="show" x-transition
+         x-init="setTimeout(() => show = false, 4000)"
+         class="border-b border-green-200 dark:border-green-800
+                bg-green-50 dark:bg-green-950/50
+                text-green-800 dark:text-green-300 px-6 py-3 text-sm flex justify-between">
+        <span>{{ session('success') }}</span>
+        <button x-on:click="show = false" class="opacity-50 hover:opacity-100 ml-4">✕</button>
+    </div>
+@endif
+
+@if ($errors->any())
+    <div class="border-b border-red-200 dark:border-red-800
+                bg-red-50 dark:bg-red-950/50
+                text-red-700 dark:text-red-300 px-6 py-3 text-sm">
+        <ul class="list-disc list-inside space-y-0.5">
+            @foreach ($errors->all() as $error)
+                <li>{{ $error }}</li>
+            @endforeach
+        </ul>
+    </div>
+@endif
 
-    <main>{{ $slot }}</main>
+<main>{{ $slot }}</main>
 
-    @livewireScripts
-    @stack('scripts')
+@livewireScripts
+@stack('scripts')
 </body>
 </html>