Enhance board and planner UI; implement smooth width transitions, update icons, and improve layout responsiveness

board.php

@@ -12,16 +12,28 @@ $userRole = $currentUser['role'] ?? 'MEMBER';
 $isAdmin = ($userRole === 'ADMIN');
 ?>
 
-<div class="space-y-6 max-w-[1600px] mx-auto px-2 sm:px-4">
+<style>
+/* Soepele overgang tussen standaard en gemaximaliseerde browserbreedte */
+#boardMainWrapper {
+    transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+}
+#boardMainWrapper.is-maximized {
+    max-width: 100% !important;
+    padding-left: 1.25rem !important;
+    padding-right: 1.25rem !important;
+}
+</style>
+
+<div id="boardMainWrapper" class="space-y-5 max-w-[1600px] mx-auto px-2 sm:px-4">
     
     <!-- Bovenbalk: Bord Titel, Filters & Actieknoppen -->
-    <div class="fociz-card p-5 sm:p-6">
+    <div class="fociz-card p-4 sm:p-5">
         <div class="flex flex-col xl:flex-row xl:items-center justify-between gap-4">
             
             <!-- Linkerkant: Bordkiezer & Titel -->
             <div class="flex items-center space-x-3.5">
                 <div class="w-10 h-10 rounded-2xl bg-gradient-to-tr from-indigo-600 to-sky-500 text-white flex items-center justify-center shadow-sm shadow-indigo-500/20 flex-shrink-0">
-                    <i data-lucide="trello" class="w-5 h-5"></i>
+                    <i data-lucide="kanban" class="w-5 h-5"></i>
                 </div>
                 <div>
                     <div class="flex items-center space-x-2">
@@ -39,7 +51,7 @@ $isAdmin = ($userRole === 'ADMIN');
             </div>
 
             <!-- Midden & Rechts: Filters & Actieknoppen -->
-            <div class="flex flex-wrap items-center gap-2.5">
+            <div class="flex flex-wrap items-center gap-2">
                 
                 <!-- Filter: Assignee / Collega -->
                 <div class="relative">
@@ -66,12 +78,23 @@ $isAdmin = ($userRole === 'ADMIN');
                     <input 
                         type="text" 
                         id="filterSearch" 
-                        placeholder="Zoeken op taak..." 
+                        placeholder="Zoeken..." 
                         oninput="renderCards()"
-                        class="pl-8 pr-3 py-2 text-xs bg-slate-50 dark:bg-[#0c0f17] border border-slate-200 dark:border-slate-800 rounded-xl text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/30 w-36 sm:w-44 shadow-2xs"
+                        class="pl-8 pr-3 py-2 text-xs bg-slate-50 dark:bg-[#0c0f17] border border-slate-200 dark:border-slate-800 rounded-xl text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/30 w-32 sm:w-40 shadow-2xs"
                     >
                 </div>
 
+                <!-- Knop: Maximaliseren / Volledige breedte (Toggle) -->
+                <button 
+                    id="btnToggleMaximize" 
+                    onclick="toggleBoardMaximize()" 
+                    title="Bord maximaliseren naar volledige schermbreedte"
+                    class="px-2.5 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800/80 dark:hover:bg-slate-700 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 text-xs font-semibold transition cursor-pointer shadow-2xs flex items-center gap-1.5"
+                >
+                    <i id="maximizeIcon" data-lucide="maximize-2" class="w-3.5 h-3.5"></i>
+                    <span id="maximizeText" class="hidden sm:inline text-xs font-medium">Maximaliseren</span>
+                </button>
+
                 <!-- Beheer knoppen -->
                 <button 
                     id="btnManageBoard" 
@@ -105,8 +128,8 @@ $isAdmin = ($userRole === 'ADMIN');
         </div>
     </div>
 
-    <!-- Kanban Board Container (Horizontaal scrollbaar) -->
+    <!-- Kanban Board Container (Horizontaal scrollbaar indien te smal, past automatisch in de breedte) -->
-    <div id="boardLanesContainer" class="flex gap-5 overflow-x-auto pb-8 pt-1 min-h-[650px] items-start select-none">
+    <div id="boardLanesContainer" class="flex gap-4 overflow-x-auto pb-8 pt-1 min-h-[650px] items-start select-none w-full transition-all duration-300">
         <div class="flex items-center justify-center w-full py-20 text-slate-400 text-sm">
             <i data-lucide="loader-2" class="w-5 h-5 animate-spin mr-2"></i>
             <span>Bord laden...</span>
@@ -606,9 +629,9 @@ function renderCards() {
 
         const dotColorClass = LANE_ACCENT_COLORS[lane.color] || 'bg-slate-500';
 
-        // Lane kolom HTML
+        // Lane kolom HTML (past zich automatisch aan de schermbreedte aan)
         const laneEl = document.createElement('div');
-        laneEl.className = 'flex-shrink-0 w-80 rounded-2xl bg-slate-100/70 dark:bg-[#0c0f17]/70 border border-slate-200/80 dark:border-slate-800/80 p-3.5 flex flex-col shadow-xs max-h-[82vh] transition';
+        laneEl.className = 'flex-1 min-w-[260px] rounded-2xl bg-slate-100/70 dark:bg-[#0c0f17]/70 border border-slate-200/80 dark:border-slate-800/80 p-3.5 flex flex-col shadow-xs max-h-[82vh] transition-all duration-200';
         laneEl.setAttribute('data-lane-id', lane.id);
 
         let cardsHtml = '';
@@ -1176,6 +1199,54 @@ function escapeHtml(str) {
         .replace(/"/g, '&quot;')
         .replace(/'/g, '&#039;');
 }
+
+// 10. Bord Maximaliseren & Verkleinen (Soepele breedte-overgang)
+let isBoardMaximized = localStorage.getItem('fociz_board_maximized') === 'true';
+
+function applyMaximizeState(isMax) {
+    const wrapper = document.getElementById('boardMainWrapper');
+    const icon = document.getElementById('maximizeIcon');
+    const text = document.getElementById('maximizeText');
+    const btn = document.getElementById('btnToggleMaximize');
+
+    if (!wrapper || !btn) return;
+
+    if (isMax) {
+        wrapper.classList.add('is-maximized');
+        if (text) text.innerText = 'Verkleinen';
+        btn.setAttribute('title', 'Bord verkleinen naar standaard breedte');
+        if (icon) {
+            icon.setAttribute('data-lucide', 'minimize-2');
+        }
+    } else {
+        wrapper.classList.remove('is-maximized');
+        if (text) text.innerText = 'Maximaliseren';
+        btn.setAttribute('title', 'Bord maximaliseren naar volledige schermbreedte');
+        if (icon) {
+            icon.setAttribute('data-lucide', 'maximize-2');
+        }
+    }
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function toggleBoardMaximize() {
+    isBoardMaximized = !isBoardMaximized;
+    localStorage.setItem('fociz_board_maximized', isBoardMaximized ? 'true' : 'false');
+    applyMaximizeState(isBoardMaximized);
+}
+
+// Pas bewaarde breedte-status direct toe bij het laden
+applyMaximizeState(isBoardMaximized);
+
+// Sneltoets Escape om gemaximaliseerd bord te verkleinen (mits geen modal openstaat)
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && isBoardMaximized) {
+        const anyModalOpen = document.querySelector('#cardModal:not(.hidden), #manageBoardModal:not(.hidden), #createBoardModal:not(.hidden)');
+        if (!anyModalOpen) {
+            toggleBoardMaximize();
+        }
+    }
+});
 </script>
 
 <?php require_once __DIR__ . '/includes/footer.php'; ?>

includes/header.php

@@ -174,16 +174,13 @@ require_once __DIR__ . '/env_badge.php';
                         </button>
                         <div class="absolute left-0 top-full pt-2 w-64 hidden group-hover/projects:block z-50 animate-in fade-in zoom-in-95 duration-150">
                             <div class="bg-white dark:bg-[#111624] border border-slate-200 dark:border-slate-800 rounded-2xl shadow-xl p-2 space-y-1 backdrop-blur-md">
-                                <!-- 1. Bord (Trello / Kanban) -->
+                                <!-- 1. Bord (Kanban) -->
                                 <a href="/board.php" class="flex items-start space-x-3 p-2.5 rounded-xl transition <?= $currentPage === 'board.php' ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300' : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/70' ?>">
                                     <div class="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400 flex items-center justify-center flex-shrink-0 mt-0.5">
-                                        <i data-lucide="trello" class="w-4 h-4"></i>
+                                        <i data-lucide="kanban" class="w-4 h-4"></i>
                                     </div>
                                     <div>
-                                        <div class="text-xs font-bold leading-tight flex items-center gap-1.5">
+                                        <div class="text-xs font-bold leading-tight">Bord</div>
-                                            <span>Bord</span>
-                                            <span class="text-[9px] font-bold px-1.5 py-0.5 rounded bg-indigo-100 text-indigo-700 dark:bg-indigo-900/60 dark:text-indigo-300">Nieuw</span>
-                                        </div>
                                         <div class="text-[11px] text-slate-500 dark:text-slate-400 leading-snug">Lanes, post-its & Outlook planning</div>
                                     </div>
                                 </a>
@@ -264,7 +261,7 @@ require_once __DIR__ . '/env_badge.php';
                 <span>Planning</span>
             </a>
             <a href="/board.php" class="flex flex-col items-center py-1 <?= $currentPage === 'board.php' ? 'text-indigo-600 dark:text-indigo-400 font-bold' : 'text-slate-500 dark:text-slate-400' ?>">
-                <i data-lucide="trello" class="w-4 h-4 mb-0.5"></i>
+                <i data-lucide="kanban" class="w-4 h-4 mb-0.5"></i>
                 <span>Bord</span>
             </a>
             <a href="/brainstorm.php" class="flex flex-col items-center py-1 <?= in_array($currentPage, ['brainstorm.php', 'brainstorm_canvas.php']) ? 'text-indigo-600 dark:text-indigo-400 font-bold' : 'text-slate-500 dark:text-slate-400' ?>">

planner.php

@@ -738,7 +738,7 @@ for ($h = $startHour; $h <= $endHour; $h++) {
             <div id="jiraPanel" class="fociz-card p-6">
                 <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800 mb-3">
                     <div class="flex items-center space-x-2">
-                        <i data-lucide="trello" class="w-4 h-4 text-sky-500"></i>
+                        <i data-lucide="ticket" class="w-4 h-4 text-sky-500"></i>
                         <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider">
                             Mijn Jira Tickets
                         </h3>