initial commit

resources/views/content/index.blade.php

@@ -0,0 +1,112 @@
+@extends('layouts.app')
+
+@section('title', 'Content Board')
+@section('page-title', 'Content Board 🎬')
+@section('page-subtitle', 'Drag cards between columns to update status')
+
+@section('content')
+<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-5">
+    <div class="flex gap-2 flex-wrap">
+        @foreach(['instagram','tiktok','youtube'] as $p)
+            <a href="{{ request()->fullUrlWithQuery(['platform' => $p]) }}"
+               class="px-3 py-1.5 rounded-full text-xs font-semibold transition-colors
+                      {{ request('platform') === $p ? 'text-white' : 'bg-white text-gray-500 hover:bg-pink-50 border border-pink-100' }}"
+               style="{{ request('platform') === $p ? 'background:#FFB7C5' : '' }}">
+                {{ ['instagram'=>'📸','tiktok'=>'🎵','youtube'=>'▶️'][$p] }} {{ ucfirst($p) }}
+            </a>
+        @endforeach
+        @if(request('platform'))
+            <a href="{{ route('content.index') }}" class="px-3 py-1.5 rounded-full text-xs text-gray-400 hover:text-gray-600 border border-gray-200 bg-white">✕ Clear</a>
+        @endif
+    </div>
+    <a href="{{ route('content.create') }}" class="btn-sakura text-sm shrink-0">＋ New Brief</a>
+</div>
+
+{{--
+    Mobile  : grid grid-cols-1  → columns stack vertically, each full width
+    Desktop : flex flex-nowrap  → columns in a single horizontal row, each flex-1
+    x-sort:group is on the INNER items div (not the column div) to avoid
+    SortableJS mutating the outer layout container.
+--}}
+<div class="grid grid-cols-1 gap-4 lg:flex lg:flex-nowrap lg:gap-4"
+     x-data="kanban()">
+    @foreach($columns as $col)
+        @php $status = $col['status']; @endphp
+
+        {{-- Column shell — layout only, NOT the sort target --}}
+        <div class="{{ $status->colorClass() }} flex flex-col w-full lg:flex-1 lg:min-w-36 rounded-2xl p-3"
+             data-status="{{ $status->value }}">
+
+            {{-- Column header --}}
+            <div class="flex items-center justify-between mb-3">
+                <div class="flex items-center gap-1.5">
+                    <span class="text-base">{{ $status->icon() }}</span>
+                    <span class="font-bold text-gray-700 text-sm">{{ $status->label() }}</span>
+                </div>
+                <span class="text-xs bg-white rounded-full px-2 py-0.5 font-bold text-gray-500 shadow-sm">{{ count($col['items']) }}</span>
+            </div>
+
+            {{-- Sortable items container --}}
+            <div class="flex flex-col gap-2 flex-1 min-h-12"
+                 x-sort:group="kanban"
+                 @sort="moved($event, '{{ $status->value }}')"
+                 data-col-status="{{ $status->value }}">
+
+                @foreach($col['items'] as $brief)
+                    <div class="bg-white rounded-2xl p-3 shadow-sm border border-pink-50 select-none
+                                cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow"
+                         x-sort:item="{{ $brief->id }}"
+                         data-id="{{ $brief->id }}">
+                        <div class="flex items-start gap-2 mb-1.5">
+                            <span class="text-sm shrink-0">{{ $brief->platform_icon }}</span>
+                            <a href="{{ route('content.show', $brief) }}"
+                               class="font-semibold text-gray-800 text-xs leading-tight hover:text-pink-500 line-clamp-2 flex-1">
+                                {{ $brief->title }}
+                            </a>
+                        </div>
+                        @if($brief->client)
+                            <div class="text-xs text-gray-400 mb-1">👥 {{ $brief->client->name }}</div>
+                        @endif
+                        @if($brief->target_date)
+                            <div class="text-xs {{ $brief->target_date->isPast() && $brief->status->value !== 'posted' ? 'text-red-400 font-bold' : 'text-gray-400' }}">
+                                📅 {{ $brief->target_date->format('d M') }}
+                            </div>
+                        @endif
+                        <div class="flex justify-end mt-1.5">
+                            <a href="{{ route('content.edit', $brief) }}" class="text-xs text-gray-400 hover:text-pink-500">Edit</a>
+                        </div>
+                    </div>
+                @endforeach
+            </div>
+
+            {{-- Add button --}}
+            <a href="{{ route('content.create') }}?status={{ $status->value }}"
+               class="mt-3 text-xs text-gray-400 hover:text-pink-500 text-center py-2
+                      border-2 border-dashed border-pink-100 rounded-2xl hover:border-pink-300 transition-colors block">
+                ＋ Add
+            </a>
+        </div>
+    @endforeach
+</div>
+
+@push('scripts')
+<script>
+function kanban() {
+    return {
+        moved(event, targetStatus) {
+            const id = event.item?.dataset?.id;
+            if (!id) return;
+            fetch(`/content/${id}/status`, {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+                },
+                body: JSON.stringify({ status: targetStatus }),
+            }).then(r => { if (r.ok) window.KolManager.notify('Status updated! 🎬'); });
+        },
+    };
+}
+</script>
+@endpush
+@endsection