ALL41 SQUADRON — SITE
Dev Log
Chronological record of changes to the ALL41 site. Newest first.
Supply Depot — Supabase Integration
- —depot_items fetched from Supabase on mount; replaces hardcoded items.
- —saveEdit upserts to depot_items; new items append, edits update in place.
- —Image upload to depot-images bucket (public); thumbnail shown in edit modal and cards.
- —File upload to depot-files bucket (private); download button generates a 60-second signed URL.
- —Edit buttons and + ADD ITEM gated to officer+ role.
Supply Depot — UX
- —Compact gallery view (5 per row): square thumbnails, name, price, download arrow; mobile falls back to 2 columns.
- —auto-NEW badge for items added in the last 14 days; store defaults to newest-first sort.
- —Custom sort dropdown (newest/oldest) and custom category dropdown replace native <select> elements.
- —Edit modal restructured to two-column horizontal layout.
- —DropZone moved to module level; upload errors surfaced in the UI.
Shared Nav Components
- —HomepageHeader extracted as a single source of truth for the homepage-style nav; sign-in dropdown passed as a renderSignIn render prop; duplicate TOPBAR_NAV constant removed from page.tsx.
- —DashboardHeader and DashboardFooter extracted as shared components used across the dashboard, devlog, and other authenticated pages.
- —Dashboard icon link added to the homepage nav for authenticated users.
Homepage — Rich Text Editing
- —Rules section body converted to Tiptap rich text (same RecruitmentEditor component).
- —Recruitment editor gains an Oswald display font option via the font picker.
Supply Depot — Edit Modal & Views
- —Edit modal added to Supply Depot items; portal-rendered to escape the animated stacking context.
- —List / grid view toggle added to the Supply Depot sub-page.
Dashboard — Content Reorganisation
- —Global Activity (timezone SVG map + clock cards) moved from homepage to dashboard HQ grid and HQ dropdown.
- —WT Icon Builder moved from homepage nav to dashboard HQ dropdown.
- —Supply Depot section removed from the homepage (now lives in the dashboard).
- —72rem max-width applied to the dashboard grid (HQ and branch views).
- —Smooth fade transitions between dashboard sub-pages.
Homepage — Layout & Design
- —Rules and Recruitment section cards widened to 44rem to match Members width.
- —PNG favicon added with dark background.
- —SettingsDropdown Display tab width fixed to always be 20rem.
Recruitment — Rich Text Editor
- —Tiptap rich text editor replaces the plain textarea for Recruitment body content.
- —Font picker added; Oswald display font available as an option.
3D Scene — Interaction
- —Drag-to-rotate: authenticated users can drag the 3D model; auto-spin resumes 10s after release.
- —Animation freezes on any page interaction (click, scroll, keypress); resumes 15s after idle.
3D Scene — Models
- —Pfalz D.III added (replaces Merlin placeholder).
- —Ki-61 Hien added (replaces MiG-21C placeholder).
Settings — Display Tab Redesign
- —2-column layout: Font Size on the left, Scheme + Theme on the right.
- —Tab width fixed to 20rem, auto-scales with root font size, no horizontal scroll.
- —Font size labels renamed: Standard → Med, Large → Lrg.
Traffic Log — Overhaul
- —Sessions grouped by IP + 30-minute gap; one card per visit.
- —Session header shows flag, location, IP tag, session number, device icon (desktop/mobile/tablet), and browser icon (Brave/Chrome/Firefox/Edge/Safari/Opera).
- —Hit rows show date, time, referrer label (or "No referring link"), and full URL.
- —Multi-dimension filter system: IP, Country, OS, Device, Screen — ▸ Include / ✕ Exclude per row; OR within a dimension, AND across dimensions.
- —Screen size captured client-side via ScreenLogger, POSTed to /api/log-screen and stored in traffic_log.
- —All page visits including public paths now logged.
Avatar Dropdown — USER / ROLE Tabs
- —USER tab: existing profile header, nav items, sign out.
- —ROLE tab: abilities checklist with rank thresholds.
- —Commanders get View As Role (visitor/agent/private/officer/major/commander pill buttons) and View As User (username input).
- —Active view-as shows a banner in the USER tab and a dot indicator on the ROLE tab button; avatar border highlights when view-as is active.
Devlog — Main Nav
- —Devlog page now has the full main nav: pills, SettingsDropdown, AvatarMenu or Sign In / Enlist dropdown.
- —LIVE-BETA banner moved from the topnav to the page body header.
- —β nav label changed to [ β ] with a DevLog tooltip in both the homepage and devlog navs.
Dashboard — Profile Deep-Link
- —?view=profile query param on dashboard mount navigates directly to the profile sub-page.
- —AvatarMenu profile header now links to /dashboard?view=profile.
Homepage — Click-Target Fixes
- —Traffic Log and Settings items in the avatar dropdown restored to full clickability.
- —HeroModel wrapper unlocked to prevent it from blocking nav click targets.
Homepage — Global Activity Window
- —New section: world timezone SVG map showing the squadron global activity window.
- —Globe icon added to topnav; section and nav item visible to authenticated users only.
- —IntersectionObserver tracks the section for active nav state.
Traffic Log
- —Server-side page view capture in middleware using Vercel edge geo headers: IP, country, city, region, lat/lon, path, UA, referrer.
- —Stored in traffic_log Supabase table; capture in middleware bypasses ad blockers.
- —Log viewer at /traffic-log gated to officer+ and accessible from the avatar dropdown.
- —IP tagging: click any IP to assign a label; inline editor with Enter to save, Esc to cancel, DEL to remove.
- —SEND TEST ENTRY button confirms the middleware → API → Supabase pipeline.
Dashboard & Homepage — Inline Sub-Pages
- —Settings and Traffic Log now open inline in the dashboard via AvatarMenu (subPage pattern).
- —WT Icon Builder opens as a full-page content swap on the homepage; nav links defer scroll until builder closes.
- —SettingsContent and TrafficLogContent extracted as reusable components.
3D Scene — Models & Controls
- —Tiger I model added with ON/OFF toggle in the Scene header row.
- —B-2 Spirit, IS-4, Cruiser, and PAC-3 added in a second selector row (8 models total).
- —Model selector visible to all users; interactive only when authenticated.
- —Scene toggle slider dims all 3D controls when scene is off.
- —HeroModel padlock toggle: fixed-background vs scroll-with-content mode.
- —Canvas uses setViewOffset so the model stays pixel-identical in size while extending below the hero section.
- —T-34-85 model replaced with a cleaner low-poly version with manual geometry edits.
3D Hero Background — Initial Build
- —Three.js / React Three Fiber canvas in the hero section: wireframe model via EdgesGeometry, transparent, z-indexed behind content.
- —HeroModelConfig type covers rotation presets (Tumble/Roll/Drift/Gyro), speed multiplier, per-axis sliders, opacity, camera FOV/Z, wireframe/solid, edge threshold.
- —Default: Drift preset at 0.5× speed, opacity 0.15, FOV 25, camera Z 2.2.
3D Hero Background — Settings Dropdown Refactor
- —Settings dropdown split into DISPLAY tab (Font Size, Scheme, Theme) and 3D SCENE tab.
- —3D SCENE tab uses a 4-column horizontal layout with no vertical scroll.
- —Standalone ThreeDCtrl nav dropdown removed; all controls consolidated into settings.
- —3D controls visible only to authenticated users when the scene is enabled.
3D Hero Background — Models & Fullscreen
- —P-51 Mustang added; T-34 added then replaced with low-poly T-34-85.
- —Scene selector: OFF / JET1 / P-51 / T-34.
- —Fullscreen mode: expand icon in Scene header, ESC to exit; overlay uses grid background, scroll locked.
- —Canvas DPR capped at 1.5 to reduce GPU fill-rate cost.
Auth — Inline Sign-In / Enlist Dropdowns
- —Sign In button in the public nav opens an inline dropdown: username+password form and Enlist section.
- —/api/signin route resolves username → email via admin client, then calls signInWithPassword.
- —Middleware updated to allow /api/signin; username lookup is case-insensitive.
- —Separate Sign Up nav button removed; signup content merged into Sign In dropdown.
Dashboard — Topnav Redesign
- —Sidebar removed; logo moves to topnav.
- —4 branch tabs: HQ (dropdown: Stats / Rec Room / Forums / Quartermaster), Aviation, Ground, Naval.
- —HQ tab label reflects the current sub-page name.
- —Dashboard layout save routed through /api to bypass RLS.
Dashboard — Profile Grid View
- —Profile sub-page rebuilt as a react-grid-layout with 7 panels: Identity, Service Record, Combat Summary, Air Record, Ground Record, Arsenal, Stat Sync.
- —Layout persists to localStorage; PowerUse toggle controls editing.
- —Panel overflow fixed: overflow:hidden moved to .react-grid-item CSS rule (single clipping boundary).
Stats — WT Callsign vs Site Username Fix
- —player_stats.username stores the WT in-game name, not the site slug.
- —Stats panel now queries by warthunder_name; previously stats failed for users whose callsign differed from their site username.
WT Icon Builder
- —New page at /wt-icons: left/right icon pickers, callsign text input, live preview with size scale.
- —155 War Thunder in-game PNG icons grouped by category in wt-icon-data.ts.
- —WCAG-compliant custom listbox: role=listbox/option, keyboard nav (↑↓ Enter Esc), filter input.
- —◈ nav link added to the homepage topnav (auth-only).
Settings — Scheme / Theme Split
- —Color scheme section renamed "Scheme" to distinguish it from upcoming full visual themes.
- —"Blueprint" color scheme key renamed to "Blues" to avoid collision with the new "Theme" category.
- —New "Theme" category added to the settings dropdown — "Blueprint" reserved as the first full visual theme.
- —AppThemeKey type and localStorage key (all41_app_theme) introduced in useSettings.
Hero — Logo Glitch Pulse
- —Micro-animation added to the hero emblem: a brief signal-dropout flicker fires every 8–20 seconds at random.
- —Effect uses opacity drop, horizontal jitter, and brightness spike — styled after a CRT/radar signal loss.
- —Ring layers remain stable; only the inner emblem plate animates.
Roster — Service Column Alignment
- —"Service" column header corrected to left-aligned, matching all other column headers.
Settings — Layout Persistence
- —Settings panel layout saves to localStorage (all41_settings_layout) on drag/resize stop and when exiting PowerUse mode.
- —Layout reloads from storage on mount, so arrangement survives navigation.
Settings — Page & Security Panel
- —Settings page rebuilt to match dashboard structure: sticky sidebar, react-grid-layout panels, PowerUse drag/resize mode, breadcrumb.
- —Three panels: Security (active), Notifications (coming soon), Display (coming soon).
- —Security panel contains backup password explanation copy and change-password form.
- —AvatarMenu Settings item activated. Breadcrumb component introduced as a shared component.
Authentication Steps — Splash Page
- —Added a 3-step procedure block before the Discord CTA, visible only to unauthenticated users.
- —Steps: Discord Identity Check → Profile Initialisation → Backup Access Code.
Login & Setup-Password — Font Scaling
- —Both pages now use min(92vw, Xrem) card widths and rem-based padding so layout scales with root font size.
Dossier Scheme — WCAG Fixes
- —Background darkened to raise contrast baseline.
- —stampText and noteText opacity raised — both now pass WCAG AA (≥4.5:1).
Global EditButton Component
- —EditButton component created: pencil icon + "Edit" label, established as the global rule for all editable areas.
Recruitment Section
- —New section on the home page backed by the page_content Supabase table.
- —Inline editing gated to commander, deputy, and officer roles.
Sidebar Logo Navigation
- —Home page sidebar logo links to #top with smooth scroll.
- —Dashboard and Settings sidebar logos link to /.
Roster
- —Roster section moved to home page (was a separate /roster route).
- —Sort headers, per-page dropdown, avatar lookup from roster_avatars view.
- —Wider layout, full date, service tenure column, Discord avatar sync.
- —Lazy-loaded on scroll with skeleton loader.
Field Orders — Sidebar Offset
- —Field Orders section padding and max-width respect sidebar open/collapsed state.
- —Rem-based max-width applied for font-scale-aware layout.
Dashboard — react-grid-layout v2
- —Full modular dashboard with react-grid-layout v2 custom wrapper.
- —PowerUse mode: toggles drag/resize; panel highlight in editing mode.
- —Layout saved to profiles.dashboard_layout in Supabase on interaction stop.
- —Responsive: 4-col desktop, 2-col tablet, 1-col mobile.
Schemes (then called Themes)
- —Signal scheme (renamed from Polymer): ISC industrial palette.
- —Dossier scheme (renamed from Light): editorial paper palette.
- —Blues scheme: deep blue grid palette.
- —WCAG audit pass across all four schemes.
Font Scaling
- —Rem-based font scaling system: applyRootFontSize() sets CSS root size.
- —FS constants (heroTitle, h1, h2, body, label, meta, micro) used everywhere — no hardcoded px for text.
- —Sidebar width is rem-based so it scales with font size.
Auth Flow
- —Discord OAuth with identify scope only (no email collection).
- —Callback exchanges code for session, refreshes Discord avatar in profiles.
- —Redirects to /setup-password on first login, else /dashboard.
- —Middleware protects all non-public routes by checking session cookie.
Homepage
- —Floating sidebar with public nav pages.
- —Active section tracking via IntersectionObserver.
- —Smooth scroll on anchor navigation.
Initial Build
- —Next.js App Router project scaffolded.
- —ALL41 splash page with grid background and corner bracket motif.
- —Login page with Discord OAuth button.
- —Supabase browser/server client split.
- —Shared theme system with token-based color properties.
- —War Thunder stats scraper and browser extension for stat sync.
- —Rank system: Agent → Private → Officer → Major → Commander.