Refactor TasksBoard to replace Flex with CardFlex for improved layout and responsiveness

Author: ManukMinasyan

resources/views/components/card-flex.blade.php

@@ -0,0 +1,85 @@
+@php
+    use Filament\Actions\Action;
+    use Filament\Actions\ActionGroup;
+    use Filament\Schemas\Components\Component;
+
+    $gap = $getGap();
+    $wrap = $shouldWrap();
+    $justify = $getJustify();
+    $align = $getAlign();
+@endphp
+
+<div
+    {{
+        $attributes
+            ->merge($getExtraAttributes(), escape: false)
+            ->class([
+                'flex',
+                // Gap classes optimized for cards
+                'gap-1' => $gap === 'xs',
+                'gap-2' => $gap === 'sm',
+                'gap-3' => $gap === 'md',
+                'gap-4' => $gap === 'lg',
+                // Wrap settings
+                'flex-wrap' => $wrap,
+                'flex-nowrap' => !$wrap,
+                // Justify settings
+                'justify-start' => $justify === 'start',
+                'justify-center' => $justify === 'center',
+                'justify-end' => $justify === 'end',
+                'justify-between' => $justify === 'between',
+                'justify-around' => $justify === 'around',
+                'justify-evenly' => $justify === 'evenly',
+                // Align settings
+                'items-start' => $align === 'start',
+                'items-center' => $align === 'center',
+                'items-end' => $align === 'end',
+                'items-baseline' => $align === 'baseline',
+                'items-stretch' => $align === 'stretch',
+            ])
+    }}
+>
+    @foreach ($getChildSchema()->getComponents() as $component)
+        @if (($component instanceof Action) || ($component instanceof ActionGroup))
+            <div class="flex-shrink-0">
+                {{ $component }}
+            </div>
+        @else
+            @php
+                $hiddenJs = $component->getHiddenJs();
+                $visibleJs = $component->getVisibleJs();
+                $componentStatePath = $component->getStatePath();
+            @endphp
+
+            <div
+                x-data="filamentSchemaComponent({
+                    path: @js($componentStatePath),
+                    containerPath: @js($statePath),
+                    isLive: @js($schemaComponent->isLive()),
+                    $wire,
+                })"
+                @if ($afterStateUpdatedJs = $schemaComponent->getAfterStateUpdatedJs())
+                    x-init="{!! implode(';', array_map(
+                        fn (string $js): string => '$wire.watch(' . Js::from($componentStatePath) . ', ($state, $old) => ($state !== undefined) && eval(' . Js::from($js) . '))',
+                        $afterStateUpdatedJs,
+                    )) !!}"
+                @endif
+                @if (filled($visibilityJs = match ([filled($hiddenJs), filled($visibleJs)]) {
+                     [true, true] => "(! ({$hiddenJs})) && ({$visibleJs})",
+                     [true, false] => "! ({$hiddenJs})",
+                     [false, true] => $visibleJs,
+                     default => null,
+                 }))
+                    x-bind:class="{ 'fi-hidden': ! ({!! $visibilityJs !!}) }"
+                    x-cloak
+                @endif
+                @class([
+                    'flex-shrink-0' => !($component instanceof Component && $component->canGrow()),
+                    'flex-grow' => ($component instanceof Component) && $component->canGrow(),
+                ])
+            >
+                {{ $component }}
+            </div>
+        @endif
+    @endforeach
+</div>

resources/views/livewire/card.blade.php

@@ -9,9 +9,9 @@
 
 <div
     @class([
-        'mb-3 bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-gray-200 dark:border-gray-800 overflow-hidden transition-all duration-150 hover:shadow-md',
+        'mb-3 bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-gray-200 dark:border-gray-800 overflow-hidden transition-all duration-100 hover:shadow-md',
         'cursor-pointer' => $hasActions || $hasCardAction,
-        'cursor-pointer transition-all duration-200 ease-in-out hover:transform hover:-translate-y-0.5 hover:shadow-lg hover:border-gray-300 active:transform active:translate-y-0 active:shadow-md' => $hasCardAction,
+        'cursor-pointer transition-all duration-100 ease-in-out hover:shadow-lg hover:border-neutral-400 active:shadow-md' => $hasCardAction,
         'cursor-default' => !$hasActions && !$hasCardAction,
     ])
     @if($this->getBoard()->getReorderBy() !== null)

src/Components/CardFlex.php

@@ -0,0 +1,102 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Relaticle\Flowforge\Components;
+
+use Closure;
+use Filament\Actions\Action;
+use Filament\Actions\ActionGroup;
+use Filament\Schemas\Components\Component;
+use Illuminate\Contracts\Support\Htmlable;
+
+class CardFlex extends Component
+{
+    /**
+     * @var view-string
+     */
+    protected string $view = 'flowforge::components.card-flex';
+
+    protected string $gap = 'xs';
+    protected bool $wrap = true;
+    protected string $justify = 'start';
+    protected string $align = 'center';
+
+    /**
+     * @param  array<Component | Action | ActionGroup | string | Htmlable> | Closure  $schema
+     */
+    final public function __construct(array | Closure $schema)
+    {
+        $this->schema($schema);
+    }
+
+    /**
+     * @param  array<Component | Action | ActionGroup | string | Htmlable> | Closure  $schema
+     */
+    public static function make(array | Closure $schema): static
+    {
+        $static = app(static::class, ['schema' => $schema]);
+        $static->configure();
+
+        return $static;
+    }
+
+    /**
+     * Enable/disable wrapping on smaller screens.
+     */
+    public function wrap(bool $wrap = true): static
+    {
+        $this->wrap = $wrap;
+        return $this;
+    }
+
+    /**
+     * Set horizontal justification.
+     */
+    public function justify(string $justify): static
+    {
+        $this->justify = $justify;
+        return $this;
+    }
+
+    /**
+     * Set vertical alignment.
+     */
+    public function align(string $align): static
+    {
+        $this->align = $align;
+        return $this;
+    }
+
+    /**
+     * Get the gap size.
+     */
+    public function getGap(): string
+    {
+        return $this->gap;
+    }
+
+    /**
+     * Check if wrapping is enabled.
+     */
+    public function shouldWrap(): bool
+    {
+        return $this->wrap;
+    }
+
+    /**
+     * Get justification setting.
+     */
+    public function getJustify(): string
+    {
+        return $this->justify;
+    }
+
+    /**
+     * Get alignment setting.
+     */
+    public function getAlign(): string
+    {
+        return $this->align;
+    }
+}