From 25a7be23a97e6db3717f10751a1adb1b55f7e6d9 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Wed, 1 Oct 2025 08:23:21 +0200
Subject: [PATCH] ui(storage): enhance file storage management with new
 properties and UI improvements

- Added properties to manage file and directory counts, improving data handling in the Livewire component.
- Updated the file storage view to include a tabbed interface for volumes, files, and directories, enhancing user navigation.
- Improved UI layout for better readability and user experience, including consistent styling and informative messages.
---
 app/Livewire/Project/Service/Storage.php      |  27 +++-
 .../project/service/file-storage.blade.php    | 134 +++++++++---------
 .../project/service/storage.blade.php         | 125 ++++++++++++----
 .../project/shared/storages/show.blade.php    |   2 +-
 4 files changed, 191 insertions(+), 97 deletions(-)

diff --git a/app/Livewire/Project/Service/Storage.php b/app/Livewire/Project/Service/Storage.php
index 26cd54425..fb7da1184 100644
--- a/app/Livewire/Project/Service/Storage.php
+++ b/app/Livewire/Project/Service/Storage.php
@@ -39,7 +39,32 @@ public function refreshStoragesFromEvent()
     public function refreshStorages()
     {
         $this->fileStorage = $this->resource->fileStorages()->get();
-        $this->dispatch('$refresh');
+        $this->resource->refresh();
+    }
+
+    public function getFilesProperty()
+    {
+        return $this->fileStorage->where('is_directory', false);
+    }
+
+    public function getDirectoriesProperty()
+    {
+        return $this->fileStorage->where('is_directory', true);
+    }
+
+    public function getVolumeCountProperty()
+    {
+        return $this->resource->persistentStorages()->count();
+    }
+
+    public function getFileCountProperty()
+    {
+        return $this->files->count();
+    }
+
+    public function getDirectoryCountProperty()
+    {
+        return $this->directories->count();
     }
 
     public function addNewVolume($data)
diff --git a/resources/views/livewire/project/service/file-storage.blade.php b/resources/views/livewire/project/service/file-storage.blade.php
index aa0ce66a3..3aa24b087 100644
--- a/resources/views/livewire/project/service/file-storage.blade.php
+++ b/resources/views/livewire/project/service/file-storage.blade.php
@@ -1,73 +1,75 @@
-<div class="">
-    <div class="flex flex-col justify-center pb-4 text-sm select-text">
-        <div class="flex gap-2  md:flex-row flex-col pt-4">
-            <x-forms.input label="Source Path" :value="$fileStorage->fs_path" readonly />
-            <x-forms.input label="Destination Path" :value="$fileStorage->mount_path" readonly />
+<div>
+    <div class="flex flex-col gap-4 p-4 bg-white border dark:bg-base dark:border-coolgray-300 border-neutral-200">
+        <div class="flex flex-col justify-center text-sm select-text">
+            <div class="flex gap-2  md:flex-row flex-col">
+                <x-forms.input label="Source Path" :value="$fileStorage->fs_path" readonly />
+                <x-forms.input label="Destination Path" :value="$fileStorage->mount_path" readonly />
+            </div>
         </div>
-    </div>
-    <form wire:submit='submit' class="flex flex-col gap-2">
-        @can('update', $resource)
-            <div class="flex gap-2">
-                @if ($fileStorage->is_directory)
-                    <x-modal-confirmation :ignoreWire="false" title="Confirm Directory Conversion to File?"
-                        buttonTitle="Convert to file" submitAction="convertToFile" :actions="[
-                            'All files in this directory will be permanently deleted and an empty file will be created in its place.',
-                        ]"
-                        confirmationText="{{ $fs_path }}"
-                        confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
-                        shortConfirmationLabel="Filepath" :confirmWithPassword="false" step2ButtonText="Convert to file" />
-                    <x-modal-confirmation :ignoreWire="false" title="Confirm Directory Deletion?" buttonTitle="Delete"
-                        isErrorButton submitAction="delete" :checkboxes="$directoryDeletionCheckboxes" :actions="[
-                            'The selected directory and all its contents will be permanently deleted from the container.',
-                        ]"
-                        confirmationText="{{ $fs_path }}"
-                        confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
-                        shortConfirmationLabel="Filepath" />
-                @else
-                    @if (!$fileStorage->is_binary)
-                        <x-modal-confirmation :ignoreWire="false" title="Confirm File Conversion to Directory?"
-                            buttonTitle="Convert to directory" submitAction="convertToDirectory" :actions="[
-                                'The selected file will be permanently deleted and an empty directory will be created in its place.',
+        <form wire:submit='submit' class="flex flex-col gap-2">
+            @can('update', $resource)
+                <div class="flex gap-2">
+                    @if ($fileStorage->is_directory)
+                        <x-modal-confirmation :ignoreWire="false" title="Confirm Directory Conversion to File?"
+                            buttonTitle="Convert to file" submitAction="convertToFile" :actions="[
+                                'All files in this directory will be permanently deleted and an empty file will be created in its place.',
                             ]"
                             confirmationText="{{ $fs_path }}"
                             confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
-                            shortConfirmationLabel="Filepath" :confirmWithPassword="false" step2ButtonText="Convert to directory" />
+                            shortConfirmationLabel="Filepath" :confirmWithPassword="false" step2ButtonText="Convert to file" />
+                        <x-modal-confirmation :ignoreWire="false" title="Confirm Directory Deletion?" buttonTitle="Delete"
+                            isErrorButton submitAction="delete" :checkboxes="$directoryDeletionCheckboxes" :actions="[
+                                'The selected directory and all its contents will be permanently deleted from the container.',
+                            ]"
+                            confirmationText="{{ $fs_path }}"
+                            confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
+                            shortConfirmationLabel="Filepath" />
+                    @else
+                        @if (!$fileStorage->is_binary)
+                            <x-modal-confirmation :ignoreWire="false" title="Confirm File Conversion to Directory?"
+                                buttonTitle="Convert to directory" submitAction="convertToDirectory" :actions="[
+                                    'The selected file will be permanently deleted and an empty directory will be created in its place.',
+                                ]"
+                                confirmationText="{{ $fs_path }}"
+                                confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
+                                shortConfirmationLabel="Filepath" :confirmWithPassword="false" step2ButtonText="Convert to directory" />
+                        @endif
+                        <x-forms.button type="button" wire:click="loadStorageOnServer">Load from server</x-forms.button>
+                        <x-modal-confirmation :ignoreWire="false" title="Confirm File Deletion?" buttonTitle="Delete"
+                            isErrorButton submitAction="delete" :checkboxes="$fileDeletionCheckboxes" :actions="['The selected file will be permanently deleted from the container.']"
+                            confirmationText="{{ $fs_path }}"
+                            confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
+                            shortConfirmationLabel="Filepath" />
                     @endif
-                    <x-forms.button type="button" wire:click="loadStorageOnServer">Load from server</x-forms.button>
-                    <x-modal-confirmation :ignoreWire="false" title="Confirm File Deletion?" buttonTitle="Delete"
-                        isErrorButton submitAction="delete" :checkboxes="$fileDeletionCheckboxes" :actions="['The selected file will be permanently deleted from the container.']"
-                        confirmationText="{{ $fs_path }}"
-                        confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
-                        shortConfirmationLabel="Filepath" />
-                @endif
-            </div>
-        @endcan
-        @if (!$fileStorage->is_directory)
-            @can('update', $resource)
-                @if (data_get($resource, 'settings.is_preserve_repository_enabled'))
-                    <div class="w-96">
-                        <x-forms.checkbox instantSave label="Is this based on the Git repository?"
-                            id="fileStorage.is_based_on_git"></x-forms.checkbox>
-                    </div>
-                @endif
-                <x-forms.textarea
-                    label="{{ $fileStorage->is_based_on_git ? 'Content (refreshed after a successful deployment)' : 'Content' }}"
-                    rows="20" id="fileStorage.content"
-                    readonly="{{ $fileStorage->is_based_on_git || $fileStorage->is_binary }}"></x-forms.textarea>
-                @if (!$fileStorage->is_based_on_git && !$fileStorage->is_binary)
-                    <x-forms.button class="w-full" type="submit">Save</x-forms.button>
-                @endif
-            @else
-                @if (data_get($resource, 'settings.is_preserve_repository_enabled'))
-                    <div class="w-96">
-                        <x-forms.checkbox disabled label="Is this based on the Git repository?"
-                            id="fileStorage.is_based_on_git"></x-forms.checkbox>
-                    </div>
-                @endif
-                <x-forms.textarea
-                    label="{{ $fileStorage->is_based_on_git ? 'Content (refreshed after a successful deployment)' : 'Content' }}"
-                    rows="20" id="fileStorage.content" disabled></x-forms.textarea>
+                </div>
             @endcan
-        @endif
-    </form>
+            @if (!$fileStorage->is_directory)
+                @can('update', $resource)
+                    @if (data_get($resource, 'settings.is_preserve_repository_enabled'))
+                        <div class="w-96">
+                            <x-forms.checkbox instantSave label="Is this based on the Git repository?"
+                                id="fileStorage.is_based_on_git"></x-forms.checkbox>
+                        </div>
+                    @endif
+                    <x-forms.textarea
+                        label="{{ $fileStorage->is_based_on_git ? 'Content (refreshed after a successful deployment)' : 'Content' }}"
+                        rows="20" id="fileStorage.content"
+                        readonly="{{ $fileStorage->is_based_on_git || $fileStorage->is_binary }}"></x-forms.textarea>
+                    @if (!$fileStorage->is_based_on_git && !$fileStorage->is_binary)
+                        <x-forms.button class="w-full" type="submit">Save</x-forms.button>
+                    @endif
+                @else
+                    @if (data_get($resource, 'settings.is_preserve_repository_enabled'))
+                        <div class="w-96">
+                            <x-forms.checkbox disabled label="Is this based on the Git repository?"
+                                id="fileStorage.is_based_on_git"></x-forms.checkbox>
+                        </div>
+                    @endif
+                    <x-forms.textarea
+                        label="{{ $fileStorage->is_based_on_git ? 'Content (refreshed after a successful deployment)' : 'Content' }}"
+                        rows="20" id="fileStorage.content" disabled></x-forms.textarea>
+                @endcan
+            @endif
+        </form>
+    </div>
 </div>
diff --git a/resources/views/livewire/project/service/storage.blade.php b/resources/views/livewire/project/service/storage.blade.php
index 41d48f386..56a52a566 100644
--- a/resources/views/livewire/project/service/storage.blade.php
+++ b/resources/views/livewire/project/service/storage.blade.php
@@ -1,4 +1,4 @@
-<div>
+<div class="flex flex-col gap-4">
     @if (
         $resource->getMorphClass() == 'App\Models\Application' ||
             $resource->getMorphClass() == 'App\Models\StandalonePostgresql' ||
@@ -9,50 +9,117 @@
             $resource->getMorphClass() == 'App\Models\StandaloneClickhouse' ||
             $resource->getMorphClass() == 'App\Models\StandaloneMongodb' ||
             $resource->getMorphClass() == 'App\Models\StandaloneMysql')
-        <div class="flex items-center gap-2">
-            <h2>Storages</h2>
-            <x-helper
-                helper="For Preview Deployments, storage has a <span class='text-helper'>-pr-#PRNumber</span> in their
-                    volume
-                    name, example: <span class='text-helper'>-pr-1</span>" />
-            @if ($resource?->build_pack !== 'dockercompose')
-                @can('update', $resource)
-                    <x-modal-input :closeOutside="false" buttonTitle="+ Add" title="New Persistent Storage" minWidth="64rem">
-                        <livewire:project.shared.storages.add :resource="$resource" />
-                    </x-modal-input>
-                @endcan
-            @endif
+        <div>
+            <div class="flex items-center gap-2">
+                <h2>Storages</h2>
+                <x-helper
+                    helper="For Preview Deployments, storage has a <span class='text-helper'>-pr-#PRNumber</span> in their
+                        volume
+                        name, example: <span class='text-helper'>-pr-1</span>" />
+                @if ($resource?->build_pack !== 'dockercompose')
+                    @can('update', $resource)
+                        <x-modal-input :closeOutside="false" buttonTitle="+ Add" title="New Persistent Storage" minWidth="64rem">
+                            <livewire:project.shared.storages.add :resource="$resource" />
+                        </x-modal-input>
+                    @endcan
+                @endif
+            </div>
+            <div>Persistent storage to preserve data between deployments.</div>
         </div>
-        <div class="pb-4">Persistent storage to preserve data between deployments.</div>
         @if ($resource?->build_pack === 'dockercompose')
-            <span class="dark:text-warning text-coollabs">Please modify storage layout in your Docker Compose
-                file or reload the compose file to reread the storage layout.</span>
+            <div class="dark:text-warning text-coollabs">Please modify storage layout in your Docker Compose
+                file or reload the compose file to reread the storage layout.</div>
         @else
             @if ($resource->persistentStorages()->get()->count() === 0 && $fileStorage->count() == 0)
-                <div class="pt-4">No storage found.</div>
+                <div>No storage found.</div>
             @endif
         @endif
 
-        @if ($resource->persistentStorages()->get()->count() > 0)
-            <h3 class="pt-4">Volumes</h3>
-            <livewire:project.shared.storages.all :resource="$resource" />
-        @endif
-        @if ($fileStorage->count() > 0)
-            <div class="flex flex-col gap-2">
-                @foreach ($fileStorage as $fs)
-                    <livewire:project.service.file-storage :fileStorage="$fs" wire:key="resource-{{ $fs->uuid }}" />
-                @endforeach
+        @php
+            $hasVolumes = $this->volumeCount > 0;
+            $hasFiles = $this->fileCount > 0;
+            $hasDirectories = $this->directoryCount > 0;
+            $defaultTab = $hasVolumes ? 'volumes' : ($hasFiles ? 'files' : 'directories');
+        @endphp
+
+        @if ($hasVolumes || $hasFiles || $hasDirectories)
+            <div x-data="{
+                activeTab: '{{ $defaultTab }}'
+            }">
+                {{-- Tabs Navigation --}}
+                <div class="flex gap-2 border-b dark:border-coolgray-300 border-neutral-200">
+                    <button @click="activeTab = 'volumes'"
+                        :class="activeTab === 'volumes' ? 'border-b-2 dark:border-white border-black' : 'border-b-2 border-transparent'"
+                        @if (!$hasVolumes) disabled @endif
+                        class="px-4 py-2 -mb-px font-medium transition-colors {{ $hasVolumes ? 'dark:text-neutral-400 dark:hover:text-white text-neutral-600 hover:text-black cursor-pointer' : 'opacity-50 cursor-not-allowed' }}">
+                        Volumes ({{ $this->volumeCount }})
+                    </button>
+                    <button @click="activeTab = 'files'"
+                        :class="activeTab === 'files' ? 'border-b-2 dark:border-white border-black' : 'border-b-2 border-transparent'"
+                        @if (!$hasFiles) disabled @endif
+                        class="px-4 py-2 -mb-px font-medium transition-colors {{ $hasFiles ? 'dark:text-neutral-400 dark:hover:text-white text-neutral-600 hover:text-black cursor-pointer' : 'opacity-50 cursor-not-allowed' }}">
+                        Files ({{ $this->fileCount }})
+                    </button>
+                    <button @click="activeTab = 'directories'"
+                        :class="activeTab === 'directories' ? 'border-b-2 dark:border-white border-black' : 'border-b-2 border-transparent'"
+                        @if (!$hasDirectories) disabled @endif
+                        class="px-4 py-2 -mb-px font-medium transition-colors {{ $hasDirectories ? 'dark:text-neutral-400 dark:hover:text-white text-neutral-600 hover:text-black cursor-pointer' : 'opacity-50 cursor-not-allowed' }}">
+                        Directories ({{ $this->directoryCount }})
+                    </button>
+                </div>
+
+                {{-- Tab Content --}}
+                <div class="pt-4">
+                    {{-- Volumes Tab --}}
+                    <div x-show="activeTab === 'volumes'" class="flex flex-col gap-4">
+                        @if ($hasVolumes)
+                            <livewire:project.shared.storages.all :resource="$resource" />
+                        @else
+                            <div class="text-center py-8 dark:text-neutral-500 text-neutral-400">
+                                No volumes configured.
+                            </div>
+                        @endif
+                    </div>
+
+                    {{-- Files Tab --}}
+                    <div x-show="activeTab === 'files'" class="flex flex-col gap-4">
+                        @if ($hasFiles)
+                            @foreach ($this->files as $fs)
+                                <livewire:project.service.file-storage :fileStorage="$fs"
+                                    wire:key="file-{{ $fs->id }}" />
+                            @endforeach
+                        @else
+                            <div class="text-center py-8 dark:text-neutral-500 text-neutral-400">
+                                No file mounts configured.
+                            </div>
+                        @endif
+                    </div>
+
+                    {{-- Directories Tab --}}
+                    <div x-show="activeTab === 'directories'" class="flex flex-col gap-4">
+                        @if ($hasDirectories)
+                            @foreach ($this->directories as $fs)
+                                <livewire:project.service.file-storage :fileStorage="$fs"
+                                    wire:key="directory-{{ $fs->id }}" />
+                            @endforeach
+                        @else
+                            <div class="text-center py-8 dark:text-neutral-500 text-neutral-400">
+                                No directory mounts configured.
+                            </div>
+                        @endif
+                    </div>
+                </div>
             </div>
         @endif
     @else
         @if ($resource->persistentStorages()->get()->count() > 0)
-            <h3 class="pt-4">{{ Str::headline($resource->name) }} </h3>
+            <h3>{{ Str::headline($resource->name) }} </h3>
         @endif
         @if ($resource->persistentStorages()->get()->count() > 0)
             <livewire:project.shared.storages.all :resource="$resource" />
         @endif
         @if ($fileStorage->count() > 0)
-            <div class="flex flex-col gap-4 pt-4">
+            <div class="flex flex-col gap-4">
                 @foreach ($fileStorage->sort() as $fileStorage)
                     <livewire:project.service.file-storage :fileStorage="$fileStorage"
                         wire:key="resource-{{ $fileStorage->uuid }}" />
diff --git a/resources/views/livewire/project/shared/storages/show.blade.php b/resources/views/livewire/project/shared/storages/show.blade.php
index 569df0c4b..8c0ba0c06 100644
--- a/resources/views/livewire/project/shared/storages/show.blade.php
+++ b/resources/views/livewire/project/shared/storages/show.blade.php
@@ -1,5 +1,5 @@
 <div>
-    <form wire:submit='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
+    <form wire:submit='submit' class="flex flex-col items-center gap-4 p-4 bg-white border lg:items-start dark:bg-base dark:border-coolgray-300 border-neutral-200">
         @if ($isReadOnly)
             @if ($isFirst)
                 <div class="flex gap-2 items-end w-full  md:flex-row flex-col">