Layout change and show/hide functionality

resources/views/kanban-board.blade.php

@@ -1,4 +1,6 @@
 <x-filament-panels::page>
+    <div id="hiddenItems" class="flex gap-5 bg-white rounded-lg p-2">{{ __('Hidden columns') }}:</div>
+
     <div x-data wire:ignore.self class="md:flex overflow-x-auto overflow-y-hidden gap-4 pb-4">
         @foreach($statuses as $status)
             @include(static::$statusView)

resources/views/kanban-header.blade.php

@@ -1,4 +1,19 @@
-<h3 class="mb-2 px-4 font-semibold text-lg text-gray-400">
-    <span class="text-primary-400">❖</span>
+@php
+    $icon = $status['icon'];
+    $color = $status['color'];
+@endphp
+
+<h3 @class(['mb-2 font-semibold text-sm',
+    'text-'.$color => $color,
+    'text-primary-400' => !$color,
+    ])
+>
+<span class="inline-block align-middle">
+    @if ($icon)
+        @svg($icon)
+    @else
+        ❖
+    @endif
+</span>
     {{ $status['title'] }}
 </h3>

resources/views/kanban-record.blade.php

@@ -1,18 +1,17 @@
-<div
-    id="{{ $record->getKey() }}"
-    wire:click="recordClicked('{{ $record->getKey() }}', {{ @json_encode($record) }})"
-    class="record bg-white dark:bg-gray-700 rounded-lg px-4 py-2 cursor-grab font-medium text-gray-600 dark:text-gray-200"
-    @if($record->timestamps && now()->diffInSeconds($record->{$record::UPDATED_AT}) < 3)
-        x-data
-        x-init="
-            $el.classList.add('animate-pulse-twice', 'bg-primary-100', 'dark:bg-primary-800')
-            $el.classList.remove('bg-white', 'dark:bg-gray-700')
-            setTimeout(() => {
-                $el.classList.remove('bg-primary-100', 'dark:bg-primary-800')
-                $el.classList.add('bg-white', 'dark:bg-gray-700')
-            }, 3000)
-        "
-    @endif
+<div id="{{ $record->getKey() }}" wire:click="recordClicked('{{ $record->getKey() }}', {{ @json_encode($record) }})"
+     class="record shadow bg-[#f4f4f4] dark:bg-[#262e40] px-4 py-2 cursor-grab rounded-lg mb-5 space-y-3 text-sm"
+     @if($record->timestamps && now()->diffInSeconds($record->{$record::UPDATED_AT}) < 3)
+             x-data
+             x-init="
+                $el.classList.add('animate-pulse-twice', 'bg-primary-100', 'dark:bg-primary-800')
+                $el.classList.remove('bg-[#f4f4f4]', 'dark:bg-[#262e40]')
+                setTimeout(() => {
+                    $el.classList.remove('bg-primary-100', 'dark:bg-primary-800')
+                    $el.classList.add('bg-[#f4f4f4]', 'dark:bg-[#262e40]')
+                }, 3000)"
+        @endif
 >
-    {{ $record->{static::$recordTitleAttribute} }}
-</div>
+        <div class="font-semibold mb-2">
+                {{ $record->{static::$recordTitleAttribute} }}
+        </div>
+</div>

resources/views/kanban-status.blade.php

@@ -1,14 +1,50 @@
 @props(['status'])
 
-<div class="md:w-[24rem] flex-shrink-0 mb-5 md:min-h-full flex flex-col">
-    @include(static::$headerView)
-
-    <div
-        data-status-id="{{ $status['id'] }}"
-        class="flex flex-col flex-1 gap-2 p-3 bg-gray-200 dark:bg-gray-800 rounded-xl"
-    >
-        @foreach($status['records'] as $record)
-            @include(static::$recordView)
-        @endforeach
+@php
+    $title = $status['title'] ?? '';
+    $color = $status['color'] ?? '';
+@endphp
+
+<div class="panel flex-1 mb-5 md:min-h-full flex flex-col" id="{{ $status['id'] }}">
+    <div class="min-h-[150px]">
+        <div class="flex justify-between">
+            @include(static::$headerView)
+
+            <div x-on:click="hideElement('{{ $status['id'] }}', '{{ $title }}', '{{ $color }}');">
+                @svg('heroicon-o-eye-slash', ['class' => 'text-gray-400 w-5 h-5'])
+            </div>
+        </div>
+
+        <div
+                data-status-id="{{ $status['id'] }}"
+                class="flex flex-col flex-1"
+        >
+            @foreach($status['records'] as $record)
+                @include(static::$recordView)
+            @endforeach
+        </div>
     </div>
 </div>
+
+<script>
+  function hideElement(status, title, color) {
+    const visibleElement = document.getElementById(status);
+
+    visibleElement.classList.add('hidden');
+
+    const textnode = `<span class="flex items-center" id="hidden_`+ status +`" x-on:click="showElement('`+ status +`');">
+                @svg('heroicon-o-eye', ['class' => 'text-`+ color +` w-5 h-5']) <span class="pl-1 text-`+ color +`">`+ title +`</span>
+        </span>`;
+
+    document.getElementById("hiddenItems")
+      .innerHTML += textnode;
+  }
+
+  function showElement(status) {
+    const hiddenElement = document.getElementById(status);
+    hiddenElement.classList.remove('hidden');
+
+    const removeHidden = document.getElementById('hidden_' + status);
+    removeHidden.remove();
+  }
+</script>