Refactor social link icon handling to support file uploads; update display logic in welcome view for improved responsiveness and fallback for missing icons. Simplify category visibility toggling in JavaScript.

app/Filament/Resources/SocialLinks/SocialLinkResource.php

@@ -9,10 +9,12 @@ use Filament\Actions\BulkActionGroup;
 use Filament\Actions\DeleteAction;
 use Filament\Actions\DeleteBulkAction;
 use Filament\Actions\EditAction;
+use Filament\Forms\Components\FileUpload;
 use Filament\Forms\Components\TextInput;
 use Filament\Resources\Resource;
 use Filament\Schemas\Schema;
 use Filament\Support\Icons\Heroicon;
+use Filament\Tables\Columns\ImageColumn;
 use Filament\Tables\Columns\TextColumn;
 use Filament\Tables\Table;
 
@@ -39,11 +41,12 @@ class SocialLinkResource extends Resource
                 TextInput::make('url')
                     ->label('URL')
                     ->required(),
-                TextInput::make('icon')
+                FileUpload::make('icon')
-                    ->label('Material Symbol ikony')
+                    ->label('Ikony (PNG / SVG / WebP)')
-                    ->required()
+                    ->image()
-                    ->default('link')
+                    ->disk('public')
-                    ->placeholder('photo_camera'),
+                    ->directory('social-icons')
+                    ->nullable(),
                 TextInput::make('sort_order')
                     ->label('Tertip')
                     ->required()
@@ -59,8 +62,11 @@ class SocialLinkResource extends Resource
                 TextColumn::make('platform')
                     ->label('Platforma')
                     ->searchable(),
-                TextColumn::make('icon')
+                ImageColumn::make('icon')
-                    ->label('Ikony'),
+                    ->label('Ikony')
+                    ->circular()
+                    ->disk('public')
+                    ->size(32),
                 TextColumn::make('url')
                     ->label('URL')
                     ->searchable(),

resources/js/app.js

@@ -28,11 +28,7 @@ function initCategoryPills() {
 
             // Show matching container, hide others
             containers.forEach((container) => {
-                if (container.dataset.categoryId === targetId) {
+                container.style.display = container.dataset.categoryId === targetId ? '' : 'none';
-                    container.classList.remove('hidden');
-                } else {
-                    container.classList.add('hidden');
-                }
             });
         });
     });

resources/views/welcome.blade.php

@@ -123,8 +123,9 @@
     <section class="border-b-2 border-inverse-surface bg-surface" id="products">
         @foreach($categories as $category)
             <div
-                class="category-products py-12 px-margin-mobile md:px-margin-desktop {{ $loop->first ? '' : 'hidden' }}"
+                class="category-products py-12 px-margin-mobile md:px-margin-desktop"
                 data-category-id="{{ $category->id }}"
+                style="{{ $loop->first ? '' : 'display:none' }}"
             >
                 @if($category->products->isNotEmpty())
                     <div class="splide product-splide" id="splide-cat-{{ $category->id }}">
@@ -274,7 +275,11 @@
     <div class="flex gap-6">
         @foreach($socialLinks as $link)
             <a class="w-10 h-10 rounded-full border border-surface-variant flex items-center justify-center text-surface-bright hover:bg-surface-bright hover:text-inverse-surface transition-colors" href="{{ $link->url }}" target="_blank" rel="noopener noreferrer" aria-label="{{ $link->platform }}">
-                <span class="material-symbols-outlined text-lg">{{ $link->icon }}</span>
+                @if($link->icon)
+                    <img src="{{ Storage::url($link->icon) }}" alt="{{ $link->platform }}" class="w-5 h-5 object-contain" style="filter: brightness(0) invert(1);">
+                @else
+                    <span class="material-symbols-outlined text-lg">link</span>
+                @endif
             </a>
         @endforeach
     </div>