Commit Graph

3 Commits (b9cd20002e5b55b19743123099cfdc103effbb6a)

Author SHA1 Message Date
Boban Blaskovic da90b39085 Fix: chart.js race, burger desktop visibility, modal glass-themed
User-reported issues + browser-verified:

1. **Chart.js race condition** — inline @push('scripts') ran before
   the @vite type=module script that imports Chart. Wrapped Chart init
   in a poll loop that retries every 30ms until window.Chart resolves.
   Re-fires on livewire:navigated for SPA navigation.

2. **Hamburger always visible on desktop** — .clu-icon-btn defined
   display:grid AFTER .clu-burger {display:none}. Chained selector
   '.clu-burger.clu-icon-btn' (specificity 0,2,0) now wins both at
   default and inside the <920px media query.

3. **Modal in CluPilot glass style** —
   - app/Livewire/Modals/ConfirmDelete.php (class extends ModalComponent)
     with title/message/confirmLabel/confirmEvent/payload props,
     confirm() dispatches the named event + closes the modal.
   - resources/views/livewire/modals/confirm-delete.blade.php
     renders clu-modal-card with icon + title/message head + foot
     containing cancel (clu-ghost-btn) + delete (clu-btn-primary
     clu-btn-danger with red gradient).
   - CSS overrides for the wire-elements default Tailwind v2 markup:
     bg-gray-500 backdrop dimmer, transparent modal-container, z-index
     bumped to 100 so it sits above sticky topbar + sidebar.
   - @source hints in app.css so Tailwind v4 scans
     vendor/wire-elements/modal blade templates and generates the
     sm:inline-block / sm:h-screen utilities the modal needs to center.
   - Demo: Settings → Danger Zone → 'Workspace löschen' opens modal.

4. **AppServiceProvider Vite::usePreloadTagAttributes(false)** kept.

5. Browser console clean across dashboard / sites / sites/{id} /
   settings + open modal (verified via Chrome MCP).
2026-05-31 23:33:07 +02:00
Boban Blaskovic 665ca4e40b UI: sidebar fixed-header/scroll-mid/fixed-foot + mobile drawer + ChartJS
Sidebar layout (per user request: header+footer fix, only nav scrollable):
- Restructured clu-sidebar into 3 flex-children: clu-sidebar-head (brand +
  ws-switch fixed at top), clu-sidebar-scroll (nav, overflow-y:auto in
  middle), clu-sidebar-foot (plan-box fixed at bottom).

Mobile sidebar (per user request: drawer + hamburger):
- <920px: sidebar position fixed, translateX(-110%) hidden, .open class
  slides in. clu-sidebar-backdrop overlay dimms main + click-to-close.
- New x-clu.burger component with hamburger icon, visible only <920px
  via display:grid in media query. Injected into all 9 topbars.
- Alpine state sidebarOpen on <body>, nav-item click closes drawer
  after navigation.

Linking (per user request: sites detail unreachable):
- Sites index table + dashboard top-sites table: domain cell now <a>
  to route('sites.show', $site) with wire:navigate.

Charts (per user request: chart.js):
- composer/npm: chart.js ^4.5.
- resources/js/app.js: register all chart.js plugins, expose window.Chart
  for inline page scripts.
- Dashboard: added Traffic-24h line chart (Chart.js line+gradient fill)
  between metrics and 2-col row. Init re-runs on livewire:navigated for
  wire:navigate compatibility.

Modal (per user request: wire-elements):
- @livewire('wire-elements-modal') already in layouts/app.blade.php
  master layout per wire-elements/modal v3 docs (single mount). Open
  pattern: wire:click="$dispatch('openModal', { component: 'name' })".

Full Pest regression: 47/47 green.
2026-05-31 23:17:29 +02:00
Boban Blaskovic d57d456d02 Pages: Backups + Team + Security + Settings (14 Pest tests)
- backups: 4 metrics (last/storage/recovery/failed), recent backups
  table with pagination, sticky config card (toggles for daily/snapshots/
  replication + storage meter). 4 tests.
- team: 4 metrics (members/admins/invites/2fa), members table with
  avatar+role+scope+2fa+last-active, open invitations table with
  resend/revoke actions. 3 tests.
- security: 4 metrics (blocked24h/firewall-rules/ssl-expiring/2fa),
  advisories panel (high+critical events), threat feed (live), SSL
  certificates table with days-to-expiry. 3 tests.
- settings: 2-col layout with sticky left nav (workspace/notifications/
  billing/api/danger), reactive section switching, workspace form,
  billing card with quota meter, danger-zone with delete CTA. 4 tests.
- CSS additions: clu-settings-grid, clu-settings-nav, clu-danger.
- Routes: 4 Volt routes (backups/team/security/settings).
2026-05-31 23:04:18 +02:00