Tags (#277)

app/Actions/Tag/AttachTag.php

@@ -0,0 +1,58 @@
+<?php
+
+namespace App\Actions\Tag;
+
+use App\Models\Server;
+use App\Models\Site;
+use App\Models\Tag;
+use App\Models\User;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\Rule;
+
+class AttachTag
+{
+    public function attach(User $user, array $input): Tag
+    {
+        $this->validate($input);
+
+        /** @var Server|Site $taggable */
+        $taggable = $input['taggable_type']::findOrFail($input['taggable_id']);
+
+        $tag = Tag::query()->where('name', $input['name'])->first();
+        if ($tag) {
+            if (! $taggable->tags->contains($tag->id)) {
+                $taggable->tags()->attach($tag->id);
+            }
+
+            return $tag;
+        }
+
+        $tag = new Tag([
+            'project_id' => $user->currentProject->id,
+            'name' => $input['name'],
+            'color' => config('core.tag_colors')[array_rand(config('core.tag_colors'))],
+        ]);
+        $tag->save();
+
+        $taggable->tags()->attach($tag->id);
+
+        return $tag;
+    }
+
+    private function validate(array $input): void
+    {
+        Validator::make($input, [
+            'name' => [
+                'required',
+            ],
+            'taggable_id' => [
+                'required',
+                'integer',
+            ],
+            'taggable_type' => [
+                'required',
+                Rule::in(config('core.taggable_types')),
+            ],
+        ])->validate();
+    }
+}

app/Actions/Tag/CreateTag.php

@@ -0,0 +1,49 @@
+<?php
+
+namespace App\Actions\Tag;
+
+use App\Models\Tag;
+use App\Models\User;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\Rule;
+use Illuminate\Validation\ValidationException;
+
+class CreateTag
+{
+    public function create(User $user, array $input): Tag
+    {
+        $this->validate($input);
+
+        $tag = Tag::query()
+            ->where('project_id', $user->current_project_id)
+            ->where('name', $input['name'])
+            ->first();
+        if ($tag) {
+            throw ValidationException::withMessages([
+                'name' => ['Tag with this name already exists.'],
+            ]);
+        }
+
+        $tag = new Tag([
+            'project_id' => $user->currentProject->id,
+            'name' => $input['name'],
+            'color' => $input['color'],
+        ]);
+        $tag->save();
+
+        return $tag;
+    }
+
+    private function validate(array $input): void
+    {
+        Validator::make($input, [
+            'name' => [
+                'required',
+            ],
+            'color' => [
+                'required',
+                Rule::in(config('core.tag_colors')),
+            ],
+        ])->validate();
+    }
+}

app/Actions/Tag/DeleteTag.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Actions\Tag;
+
+use App\Models\Tag;
+use Illuminate\Support\Facades\DB;
+
+class DeleteTag
+{
+    public function delete(Tag $tag): void
+    {
+        DB::table('taggables')->where('tag_id', $tag->id)->delete();
+        $tag->delete();
+    }
+}

app/Actions/Tag/DetachTag.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Actions\Tag;
+
+use App\Models\Server;
+use App\Models\Site;
+use App\Models\Tag;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\Rule;
+
+class DetachTag
+{
+    public function detach(Tag $tag, array $input): void
+    {
+        $this->validate($input);
+
+        /** @var Server|Site $taggable */
+        $taggable = $input['taggable_type']::findOrFail($input['taggable_id']);
+
+        $taggable->tags()->detach($tag->id);
+    }
+
+    private function validate(array $input): void
+    {
+        Validator::make($input, [
+            'taggable_id' => [
+                'required',
+                'integer',
+            ],
+            'taggable_type' => [
+                'required',
+                Rule::in(config('core.taggable_types')),
+            ],
+        ])->validate();
+    }
+}

app/Actions/Tag/EditTag.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Actions\Tag;
+
+use App\Models\Tag;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\Rule;
+use Illuminate\Validation\ValidationException;
+
+class EditTag
+{
+    public function edit(Tag $tag, array $input): void
+    {
+        $this->validate($input);
+
+        $tag->name = $input['name'];
+        $tag->color = $input['color'];
+
+        $tag->save();
+    }
+
+    /**
+     * @throws ValidationException
+     */
+    private function validate(array $input): void
+    {
+        $rules = [
+            'name' => [
+                'required',
+            ],
+            'color' => [
+                'required',
+                Rule::in(config('core.tag_colors')),
+            ],
+        ];
+        Validator::make($input, $rules)->validate();
+    }
+}

app/Http/Controllers/Settings/TagController.php

@@ -0,0 +1,90 @@
+<?php
+
+namespace App\Http\Controllers\Settings;
+
+use App\Actions\Tag\AttachTag;
+use App\Actions\Tag\CreateTag;
+use App\Actions\Tag\DeleteTag;
+use App\Actions\Tag\DetachTag;
+use App\Actions\Tag\EditTag;
+use App\Facades\Toast;
+use App\Helpers\HtmxResponse;
+use App\Http\Controllers\Controller;
+use App\Models\Tag;
+use App\Models\User;
+use Illuminate\Contracts\View\View;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+
+class TagController extends Controller
+{
+    public function index(Request $request): View
+    {
+        $data = [
+            'tags' => Tag::getByProjectId(auth()->user()->current_project_id)->get(),
+        ];
+
+        if ($request->has('edit')) {
+            $data['editTag'] = Tag::find($request->input('edit'));
+        }
+
+        return view('settings.tags.index', $data);
+    }
+
+    public function create(Request $request): HtmxResponse
+    {
+        /** @var User $user */
+        $user = $request->user();
+
+        app(CreateTag::class)->create(
+            $user,
+            $request->input(),
+        );
+
+        Toast::success('Tag created.');
+
+        return htmx()->redirect(route('settings.tags'));
+    }
+
+    public function update(Tag $tag, Request $request): HtmxResponse
+    {
+        app(EditTag::class)->edit(
+            $tag,
+            $request->input(),
+        );
+
+        Toast::success('Tag updated.');
+
+        return htmx()->redirect(route('settings.tags'));
+    }
+
+    public function attach(Request $request): RedirectResponse
+    {
+        /** @var User $user */
+        $user = $request->user();
+
+        app(AttachTag::class)->attach($user, $request->input());
+
+        return back()->with([
+            'status' => 'tag-created',
+        ]);
+    }
+
+    public function detach(Request $request, Tag $tag): RedirectResponse
+    {
+        app(DetachTag::class)->detach($tag, $request->input());
+
+        return back()->with([
+            'status' => 'tag-detached',
+        ]);
+    }
+
+    public function delete(Tag $tag): RedirectResponse
+    {
+        app(DeleteTag::class)->delete($tag);
+
+        Toast::success('Tag deleted.');
+
+        return back();
+    }
+}

app/Models/Project.php

@@ -65,4 +65,9 @@ public function sourceControls(): HasMany
     {
         return $this->hasMany(SourceControl::class);
     }
+
+    public function tags(): HasMany
+    {
+        return $this->hasMany(Tag::class);
+    }
 }

app/Models/Server.php

@@ -14,6 +14,7 @@
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\Relations\MorphToMany;
 use Illuminate\Filesystem\FilesystemAdapter;
 use Illuminate\Support\Facades\File;
 use Illuminate\Support\Facades\Storage;
@@ -214,6 +215,11 @@ public function sshKeys(): BelongsToMany
             ->withTimestamps();
     }
 
+    public function tags(): MorphToMany
+    {
+        return $this->morphToMany(Tag::class, 'taggable');
+    }
+
     public function getSshUser(): string
     {
         if ($this->ssh_user) {

app/Models/Site.php

@@ -11,6 +11,7 @@
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\Relations\HasOne;
+use Illuminate\Database\Eloquent\Relations\MorphToMany;
 use Illuminate\Support\Str;
 
 /**
@@ -126,6 +127,11 @@ public function ssls(): HasMany
         return $this->hasMany(Ssl::class);
     }
 
+    public function tags(): MorphToMany
+    {
+        return $this->morphToMany(Tag::class, 'taggable');
+    }
+
     /**
      * @throws SourceControlIsNotConnected
      */

app/Models/Tag.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Models;
+
+use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\MorphToMany;
+
+/**
+ * @property int $id
+ * @property int $project_id
+ * @property string $name
+ * @property string $color
+ * @property Carbon $created_at
+ * @property Carbon $updated_at
+ */
+class Tag extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'project_id',
+        'name',
+        'color',
+    ];
+
+    protected $casts = [
+        'project_id' => 'int',
+    ];
+
+    public function project(): BelongsTo
+    {
+        return $this->belongsTo(Project::class);
+    }
+
+    public function servers(): MorphToMany
+    {
+        return $this->morphedByMany(Server::class, 'taggable');
+    }
+
+    public function sites(): MorphToMany
+    {
+        return $this->morphedByMany(Site::class, 'taggable');
+    }
+
+    public static function getByProjectId(int $projectId): Builder
+    {
+        return self::query()
+            ->where('project_id', $projectId)
+            ->orWhereNull('project_id');
+    }
+}

config/core.php

@@ -445,4 +445,30 @@
         30,
         90,
     ],
+
+    'tag_colors' => [
+        'slate',
+        'gray',
+        'red',
+        'orange',
+        'amber',
+        'yellow',
+        'lime',
+        'green',
+        'emerald',
+        'teal',
+        'cyan',
+        'sky',
+        'blue',
+        'indigo',
+        'violet',
+        'purple',
+        'fuchsia',
+        'pink',
+        'rose',
+    ],
+    'taggable_types' => [
+        \App\Models\Server::class,
+        \App\Models\Site::class,
+    ],
 ];

database/factories/TagFactory.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\Tag;
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Illuminate\Support\Carbon;
+
+class TagFactory extends Factory
+{
+    protected $model = Tag::class;
+
+    public function definition(): array
+    {
+        return [
+            'project_id' => 1,
+            'created_at' => Carbon::now(), //
+            'updated_at' => Carbon::now(),
+            'name' => $this->faker->randomElement(['production', 'staging', 'development']),
+            'color' => $this->faker->randomElement(config('core.tag_colors')),
+        ];
+    }
+}

database/migrations/2024_08_09_180021_create_tags_table.php

@@ -0,0 +1,24 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('tags', function (Blueprint $table) {
+            $table->id();
+            $table->unsignedBigInteger('project_id');
+            $table->string('name');
+            $table->string('color');
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('tags');
+    }
+};

database/migrations/2024_08_09_181239_create_taggables_table.php

@@ -0,0 +1,24 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('taggables', function (Blueprint $table) {
+            $table->id();
+            $table->unsignedBigInteger('tag_id');
+            $table->unsignedBigInteger('taggable_id');
+            $table->string('taggable_type');
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('taggables');
+    }
+};

database/seeders/DatabaseSeeder.php

@@ -8,9 +8,12 @@
 use App\Models\Site;
 use App\Models\User;
 use Illuminate\Database\Seeder;
+use Illuminate\Foundation\Testing\WithFaker;
 
 class DatabaseSeeder extends Seeder
 {
+    use WithFaker;
+
     /**
      * Seed the application's database.
      */
@@ -20,6 +23,12 @@ public function run(): void
             'name' => 'Test User',
             'email' => 'user@example.com',
         ]);
+
+        $this->createResources($user);
+    }
+
+    private function createResources(User $user): void
+    {
         $server = Server::factory()->create([
             'user_id' => $user->id,
             'project_id' => $user->currentProject->id,

public/build/manifest.json

@@ -1,6 +1,6 @@
 {
   "resources/css/app.css": {
-    "file": "assets/app-db36ac12.css",
+    "file": "assets/app-888ea5fa.css",
     "isEntry": true,
     "src": "resources/css/app.css"
   },

resources/views/components/autocomplete-text.blade.php

@@ -0,0 +1,64 @@
+@props([
+    "id",
+    "name",
+    "placeholder" => "Search...",
+    "items" => [],
+    "maxResults" => 5,
+    "value" => "",
+])
+
+<script>
+    window['items_' + @js($id)] = @json($items);
+</script>
+
+<div
+    x-data="{
+        q: @js($value),
+        items: window['items_' + @js($id)],
+        resultItems: window['items_' + @js($id)],
+        maxResults: @js($maxResults),
+        init() {
+            this.search()
+        },
+        search() {
+            if (! this.q) {
+                this.resultItems = this.items.slice(0, this.maxResults)
+                return
+            }
+            this.resultItems = this.items
+                .filter((item) => item.toLowerCase().includes(this.q.toLowerCase()))
+                .slice(0, this.maxResults)
+        },
+    }"
+>
+    <input type="hidden" name="{{ $name }}" x-ref="input" x-model="q" />
+    <x-dropdown width="full" :hide-if-empty="true">
+        <x-slot name="trigger">
+            <x-text-input
+                id="$id . '-q"
+                x-model="q"
+                type="text"
+                class="mt-1 w-full"
+                :placeholder="$placeholder"
+                autocomplete="off"
+                x-on:input.debounce.100ms="search"
+            />
+        </x-slot>
+        <x-slot name="content">
+            <div
+                id="{{ $id }}-items-list"
+                x-bind:class="
+                    resultItems.length > 0
+                        ? 'py-1 border border-gray-200 dark:border-gray-600 rounded-md'
+                        : ''
+                "
+            >
+                <template x-for="item in resultItems">
+                    <x-dropdown-link class="cursor-pointer" x-on:click="q = item">
+                        <span x-text="item"></span>
+                    </x-dropdown-link>
+                </template>
+            </div>
+        </x-slot>
+    </x-dropdown>
+</div>

resources/views/components/dropdown-trigger.blade.php

@@ -0,0 +1,10 @@
+<div>
+    <div
+        class="block w-full cursor-pointer rounded-md border border-gray-300 p-2.5 text-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-primary-600 dark:focus:ring-primary-600"
+    >
+        {{ $slot }}
+    </div>
+    <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-2">
+        <x-heroicon name="o-chevron-down" class="h-4 w-4 text-gray-400" />
+    </button>
+</div>

resources/views/components/dropdown.blade.php

@@ -2,12 +2,18 @@
     "open" => false,
     "align" => "right",
     "width" => "48",
-    "contentClasses" => "list-none divide-y divide-gray-100 rounded-md border border-gray-200 bg-white py-1 text-base dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-700",
+    "contentClasses" => "list-none divide-y divide-gray-100 rounded-md bg-white text-base dark:divide-gray-600 dark:bg-gray-700",
     "search" => false,
     "searchUrl" => "",
+    "hideIfEmpty" => false,
+    "closeOnClick" => true,
 ])
 
 @php
+    if (! $hideIfEmpty) {
+        $contentClasses .= " py-1 border border-gray-200 dark:border-gray-600";
+    }
+
     switch ($align) {
         case "left":
             $alignmentClasses = "left-0 origin-top-left";
@@ -25,6 +31,9 @@
         case "48":
             $width = "w-48";
             break;
+        case "56":
+            $width = "w-56";
+            break;
         case "full":
             $width = "w-full";
             break;
@@ -46,31 +55,9 @@
         x-transition:leave-end="scale-95 transform opacity-0"
         class="{{ $width }} {{ $alignmentClasses }} absolute z-50 mt-2 rounded-md"
         style="display: none"
-        @click="open = false"
+        @if ($closeOnClick) @click="open = false" @endif
     >
         <div class="{{ $contentClasses }} rounded-md">
-            @if ($search)
-                <div class="p-2">
-                    <input
-                        type="text"
-                        x-ref="search"
-                        x-model="search"
-                        x-on:keydown.window.prevent.enter="open = false"
-                        x-on:keydown.window.prevent.escape="open = false"
-                        x-on:keydown.window.prevent.arrow-up="
-                            open = true
-                            $refs.search.focus()
-                        "
-                        x-on:keydown.window.prevent.arrow-down="
-                            open = true
-                            $refs.search.focus()
-                        "
-                        class="w-full rounded-md border border-gray-200 p-2"
-                        placeholder="Search..."
-                    />
-                </div>
-            @endif
-
             {{ $content }}
         </div>
     </div>

resources/views/components/heroicons/o-funnel.blade.php

@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    {{ $attributes }}
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"
+    />
+</svg>

resources/views/components/heroicons/o-plus.blade.php

@@ -0,0 +1,10 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    {{ $attributes }}
+>
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+</svg>

resources/views/components/heroicons/o-tag.blade.php

@@ -0,0 +1,15 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    {{ $attributes }}
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"
+    />
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
+</svg>

resources/views/components/modal.blade.php

@@ -73,7 +73,7 @@ class="fixed inset-0 transform transition-all"
 
     <div
         x-show="show"
-        class="{{ $maxWidth }} mb-6 transform overflow-hidden rounded-lg bg-white shadow-xl transition-all dark:bg-gray-800 sm:mx-auto sm:w-full"
+        class="{{ $maxWidth }} mb-6 transform overflow-visible rounded-lg bg-white shadow-xl transition-all dark:bg-gray-800 sm:mx-auto sm:w-full"
         x-transition:enter="duration-300 ease-out"
         x-transition:enter-start="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
         x-transition:enter-end="translate-y-0 opacity-100 sm:scale-100"

resources/views/layouts/app.blade.php

@@ -71,5 +71,6 @@
         </script>
         <x-toast />
         <x-htmx-error-handler />
+        @stack("footer")
     </body>
 </html>

resources/views/layouts/server.blade.php

@@ -11,7 +11,12 @@
                 </div>
             </header>
         @else
-            <h2 class="text-lg font-semibold">{{ $server->name }}</h2>
+            <div class="flex items-center">
+                <h2 class="text-lg font-semibold">{{ $server->name }}</h2>
+                <div class="ml-2">
+                    @include("settings.tags.tags", ["taggable" => $server])
+                </div>
+            </div>
         @endif
 
         <div class="flex flex-col items-end">

resources/views/layouts/sidebar.blade.php

@@ -161,6 +161,13 @@ class="fixed left-0 top-0 z-40 h-screen w-64 -translate-x-full border-r border-g
                 <x-hr />
             @endif
 
+            <li>
+                <x-sidebar-link :href="route('servers')" :active="request()->routeIs('servers')">
+                    <x-heroicon name="o-server" class="h-6 w-6" />
+                    <span class="ml-2">Servers</span>
+                </x-sidebar-link>
+            </li>
+
             <li>
                 <x-sidebar-link :href="route('scripts.index')" :active="request()->routeIs('scripts.*')">
                     <x-heroicon name="o-bolt" class="h-6 w-6" />
@@ -239,6 +246,12 @@ class="fixed left-0 top-0 z-40 h-screen w-64 -translate-x-full border-r border-g
                         <span class="ml-2">SSH Keys</span>
                     </x-sidebar-link>
                 </li>
+                <li>
+                    <x-sidebar-link :href="route('settings.tags')" :active="request()->routeIs('settings.tags')">
+                        <x-heroicon name="o-tag" class="h-6 w-6" />
+                        <span class="ml-2">Tags</span>
+                    </x-sidebar-link>
+                </li>
             @endif
         </ul>
     </div>

resources/views/server-settings/partials/server-details.blade.php

@@ -110,4 +110,15 @@ class="mt-2 md:ml-2 md:mt-0"
             </div>
         </div>
     </div>
+    <div>
+        <div class="py-5">
+            <div class="border-t border-gray-200 dark:border-gray-700"></div>
+        </div>
+    </div>
+    <div class="flex items-center justify-between">
+        <div>{{ __("Tags") }}</div>
+        <div>
+            @include("settings.tags.tags", ["taggable" => $server, "edit" => true])
+        </div>
+    </div>
 </x-card>

resources/views/servers/partials/servers-list.blade.php

@@ -9,40 +9,73 @@
         </x-slot>
     </x-card-header>
 
-    <x-live id="live-servers-list">
-        @if (count($servers) > 0)
-            <div class="space-y-3">
-                @foreach ($servers as $server)
-                    <a href="{{ route("servers.show", ["server" => $server]) }}" class="block">
-                        <x-item-card>
-                            <div class="flex-none">
-                                <img
-                                    src="{{ asset("static/images/" . $server->provider . ".svg") }}"
-                                    class="h-10 w-10"
-                                    alt=""
-                                />
-                            </div>
-                            <div class="ml-3 flex flex-grow flex-col items-start justify-center">
-                                <span class="mb-1">{{ $server->name }}</span>
-                                <span class="text-sm text-gray-400">
-                                    {{ $server->ip }}
-                                </span>
-                            </div>
-                            <div class="flex items-center">
-                                <div class="inline">
-                                    @include("servers.partials.server-status", ["server" => $server])
-                                </div>
-                            </div>
-                        </x-item-card>
-                    </a>
-                @endforeach
-            </div>
-        @else
-            <x-simple-card>
-                <div class="text-center">
-                    {{ __("You don't have any servers yet!") }}
+    <div class="space-y-3">
+        <x-live id="live-servers-list">
+            @if (count($servers) > 0)
+                <div class="space-y-3">
+                    <x-table>
+                        <x-thead>
+                            <x-tr>
+                                <x-th>Name</x-th>
+                                <x-th>IP</x-th>
+                                <x-th>Tags</x-th>
+                                <x-th>Status</x-th>
+                                <x-th></x-th>
+                            </x-tr>
+                        </x-thead>
+                        <x-tbody>
+                            @foreach ($servers as $server)
+                                <x-tr>
+                                    <x-td>
+                                        <div class="flex items-center">
+                                            <img
+                                                src="{{ asset("static/images/" . $server->provider . ".svg") }}"
+                                                class="mr-1 h-5 w-5"
+                                                alt=""
+                                            />
+                                            <a
+                                                href="{{ route("servers.show", ["server" => $server]) }}"
+                                                class="hover:underline"
+                                            >
+                                                {{ $server->name }}
+                                            </a>
+                                        </div>
+                                    </x-td>
+                                    <x-td>{{ $server->ip }}</x-td>
+                                    <x-td>
+                                        @include("settings.tags.tags", ["taggable" => $server, "oobOff" => true])
+                                    </x-td>
+                                    <x-td>
+                                        @include("servers.partials.server-status", ["server" => $server])
+                                    </x-td>
+                                    <x-td>
+                                        <div class="flex items-center justify-end">
+                                            <x-icon-button
+                                                :href="route('servers.show', ['server' => $server])"
+                                                data-tooltip="Show Server"
+                                            >
+                                                <x-heroicon name="o-eye" class="h-5 w-5" />
+                                            </x-icon-button>
+                                            <x-icon-button
+                                                :href="route('servers.settings', ['server' => $server])"
+                                                data-tooltip="Settings"
+                                            >
+                                                <x-heroicon name="o-wrench-screwdriver" class="h-5 w-5" />
+                                            </x-icon-button>
+                                        </div>
+                                    </x-td>
+                                </x-tr>
+                            @endforeach
+                        </x-tbody>
+                    </x-table>
                 </div>
-            </x-simple-card>
-        @endif
-    </x-live>
+            @else
+                <x-simple-card>
+                    <div class="text-center">
+                        {{ __("You don't have any servers yet!") }}
+                    </div>
+                </x-simple-card>
+            @endif
+        </x-live>
+    </div>
 </x-container>

resources/views/settings/tags/attach.blade.php

@@ -0,0 +1,41 @@
+<div x-data="">
+    <button type="button" class="flex items-center" x-on:click="$dispatch('open-modal', 'create-tag-modal')">
+        <x-heroicon name="o-plus" class="h-5 w-5 text-gray-500 dark:text-gray-400" />
+        <span class="text-md">New Tag</span>
+    </button>
+    @push("footer")
+        <x-modal name="create-tag-modal" max-width="sm">
+            <form
+                id="create-tag-form"
+                hx-post="{{ route("tags.attach") }}"
+                hx-swap="outerHTML"
+                hx-select="#create-tag-form"
+                class="p-6"
+            >
+                <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">New Tag</h2>
+
+                <input type="hidden" name="taggable_type" value="{{ get_class($taggable) }}" />
+                <input type="hidden" name="taggable_id" value="{{ $taggable->id }}" />
+
+                <div class="mt-6">
+                    @include("settings.tags.fields.name",["value" => old("name"),"items" => auth()->user()->currentProject->tags()->pluck("name"),])
+                </div>
+
+                <div class="mt-6 flex justify-end">
+                    <x-secondary-button type="button" x-on:click="$dispatch('close')">Cancel</x-secondary-button>
+                    <x-primary-button class="ml-3" hx-disable>Save</x-primary-button>
+                </div>
+
+                @if (session()->has("status") && session()->get("status") === "tag-created")
+                    <script defer>
+                        window.dispatchEvent(
+                            new CustomEvent('close-modal', {
+                                detail: 'create-tag-modal'
+                            })
+                        );
+                    </script>
+                @endif
+            </form>
+        </x-modal>
+    @endpush
+</div>

resources/views/settings/tags/fields/color.blade.php

@@ -0,0 +1,31 @@
+@php($id = "color-" . uniqid())
+<div x-data="{
+    value: '{{ $value }}',
+}">
+    <x-input-label for="color" :value="__('Color')" />
+    <input x-bind:value="value" id="{{ $id }}" name="color" type="hidden" />
+    <x-dropdown class="relative" align="left">
+        <x-slot name="trigger">
+            <x-dropdown-trigger>
+                <div class="flex items-center">
+                    <div x-show="value" x-bind:class="`bg-${value}-500 mr-1 h-3 w-3 rounded-full`"></div>
+                    <span x-text="value || 'Select a color'"></span>
+                </div>
+            </x-dropdown-trigger>
+        </x-slot>
+
+        <x-slot name="content">
+            <div class="z-50 max-h-[200px] overflow-y-auto">
+                @foreach (config("core.tag_colors") as $color)
+                    <x-dropdown-link href="#" x-on:click="value = '{{ $color }}'" class="flex items-center capitalize">
+                        <div class="bg-{{ $color }}-500 mr-1 h-3 w-3 rounded-full"></div>
+                        {{ $color }}
+                    </x-dropdown-link>
+                @endforeach
+            </div>
+        </x-slot>
+    </x-dropdown>
+    @error("color")
+        <x-input-error class="mt-2" :messages="$message" />
+    @enderror
+</div>

resources/views/settings/tags/fields/name.blade.php

@@ -0,0 +1,12 @@
+@php
+    $id = "name-" . uniqid();
+    if (! isset($items)) {
+        $items = [];
+    }
+@endphp
+
+<x-input-label :for="$id" :value="__('Name')" />
+<x-autocomplete-text id="tag-name" name="name" :items="$items" :value="$value" placeholder="" />
+@error("name")
+    <x-input-error class="mt-2" :messages="$message" />
+@enderror

resources/views/settings/tags/index.blade.php

@@ -0,0 +1,5 @@
+<x-settings-layout>
+    <x-slot name="pageTitle">{{ __("Tags") }}</x-slot>
+
+    @include("settings.tags.partials.tags-list")
+</x-settings-layout>

resources/views/settings/tags/manage.blade.php

@@ -0,0 +1,42 @@
+<x-modal name="manage-tags-modal">
+    <div class="p-6">
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Manage Tags</h2>
+            @include("settings.tags.attach", ["taggable" => $taggable])
+        </div>
+
+        <x-table id="tags-{{ $taggable->id }}" class="mt-6" hx-swap-oob="outerHTML">
+            <x-thead>
+                <x-tr>
+                    <x-th>Name</x-th>
+                    <x-th></x-th>
+                </x-tr>
+            </x-thead>
+            <x-tbody>
+                @foreach ($taggable->tags as $tag)
+                    <x-tr>
+                        <x-td>
+                            <div class="flex items-center">
+                                <div class="bg-{{ $tag->color }}-500 mr-1 h-3 w-3 rounded-full"></div>
+                                {{ $tag->name }}
+                            </div>
+                        </x-td>
+                        <x-td class="text-right">
+                            <form
+                                id="detach-tag-{{ $tag->id }}"
+                                hx-post="{{ route("tags.detach", ["tag" => $tag]) }}"
+                                hx-swap="outerHTML"
+                            >
+                                <input type="hidden" name="taggable_type" value="{{ get_class($taggable) }}" />
+                                <input type="hidden" name="taggable_id" value="{{ $taggable->id }}" />
+                                <x-icon-button>
+                                    <x-heroicon name="o-trash" class="h-5 w-5 text-gray-500 dark:text-gray-400" />
+                                </x-icon-button>
+                            </form>
+                        </x-td>
+                    </x-tr>
+                @endforeach
+            </x-tbody>
+        </x-table>
+    </div>
+</x-modal>

resources/views/settings/tags/partials/create-tag.blade.php

@@ -0,0 +1,41 @@
+<div>
+    <x-primary-button x-data="" x-on:click.prevent="$dispatch('open-modal', 'create-tag')">
+        {{ __("Create Tag") }}
+    </x-primary-button>
+
+    <x-modal name="create-tag">
+        <form
+            id="create-tag-form"
+            hx-post="{{ route("settings.tags.create") }}"
+            hx-swap="outerHTML"
+            hx-select="#create-tag-form"
+            hx-ext="disable-element"
+            hx-disable-element="#btn-create-tag"
+            class="p-6"
+            x-data="{}"
+        >
+            @csrf
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                {{ __("Create Tag") }}
+            </h2>
+
+            <div class="mt-6">
+                @include("settings.tags.fields.name", ["value" => old("name")])
+            </div>
+
+            <div class="mt-6">
+                @include("settings.tags.fields.color", ["value" => old("color")])
+            </div>
+
+            <div class="mt-6 flex justify-end">
+                <x-secondary-button type="button" x-on:click="$dispatch('close')">
+                    {{ __("Cancel") }}
+                </x-secondary-button>
+
+                <x-primary-button id="btn-create-tag" class="ml-3">
+                    {{ __("Save") }}
+                </x-primary-button>
+            </div>
+        </form>
+    </x-modal>
+</div>

resources/views/settings/tags/partials/delete-tag.blade.php

@@ -0,0 +1,18 @@
+<x-modal name="delete-tag" :show="$errors->isNotEmpty()">
+    <form id="delete-tag-form" method="post" x-bind:action="deleteAction" class="p-6">
+        @csrf
+        @method("delete")
+
+        <h2 class="text-lg font-medium">Deleting a tag will detach it from all the resources that it has been used</h2>
+
+        <div class="mt-6 flex justify-end">
+            <x-secondary-button type="button" x-on:click="$dispatch('close')">
+                {{ __("Cancel") }}
+            </x-secondary-button>
+
+            <x-danger-button class="ml-3">
+                {{ __("Delete") }}
+            </x-danger-button>
+        </div>
+    </form>
+</x-modal>

resources/views/settings/tags/partials/edit-tag.blade.php

@@ -0,0 +1,39 @@
+<x-modal
+    name="edit-tag"
+    :show="true"
+    x-on:modal-edit-tag-closed.window="window.history.pushState('', '', '{{ route('settings.tags') }}');"
+>
+    <form
+        id="edit-tag-form"
+        hx-post="{{ route("settings.tags.update", ["tag" => $tag->id]) }}"
+        hx-swap="outerHTML"
+        hx-select="#edit-tag-form"
+        hx-ext="disable-element"
+        hx-disable-element="#btn-edit-tag"
+        class="p-6"
+    >
+        @csrf
+
+        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+            {{ __("Edit Tag") }}
+        </h2>
+
+        <div class="mt-6">
+            @include("settings.tags.fields.name", ["value" => old("name", $tag->name)])
+        </div>
+
+        <div class="mt-6">
+            @include("settings.tags.fields.color", ["value" => old("color", $tag->color)])
+        </div>
+
+        <div class="mt-6 flex justify-end">
+            <x-secondary-button type="button" x-on:click="$dispatch('close')">
+                {{ __("Cancel") }}
+            </x-secondary-button>
+
+            <x-primary-button id="btn-edit-tag" class="ml-3">
+                {{ __("Save") }}
+            </x-primary-button>
+        </div>
+    </form>
+</x-modal>

resources/views/settings/tags/partials/tags-list.blade.php

@@ -0,0 +1,69 @@
+<div>
+    <x-card-header>
+        <x-slot name="title">{{ __("Tags") }}</x-slot>
+        <x-slot name="description">
+            {{ __("You can manage tags here") }}
+        </x-slot>
+        <x-slot name="aside">
+            @include("settings.tags.partials.create-tag")
+        </x-slot>
+    </x-card-header>
+    <div x-data="{ deleteAction: '' }" class="space-y-3">
+        @if (count($tags) > 0)
+            <x-table class="mt-6">
+                <x-thead>
+                    <x-tr>
+                        <x-th>Name</x-th>
+                        <x-th></x-th>
+                    </x-tr>
+                </x-thead>
+                <x-tbody>
+                    @foreach ($tags as $tag)
+                        <x-tr>
+                            <x-td>
+                                <div class="flex items-center">
+                                    <div class="bg-{{ $tag->color }}-500 mr-1 size-4 rounded-full"></div>
+                                    {{ $tag->name }}
+                                </div>
+                            </x-td>
+                            <x-td class="text-right">
+                                <div class="inline">
+                                    <x-icon-button
+                                        id="edit-{{ $tag->id }}"
+                                        hx-get="{{ route('settings.tags', ['edit' => $tag->id]) }}"
+                                        hx-replace-url="true"
+                                        hx-select="#edit"
+                                        hx-target="#edit"
+                                        hx-ext="disable-element"
+                                        hx-disable-element="#edit-{{ $tag->id }}"
+                                    >
+                                        <x-heroicon name="o-pencil" class="h-5 w-5" />
+                                    </x-icon-button>
+                                    <x-icon-button
+                                        x-on:click="deleteAction = '{{ route('settings.tags.delete', ['tag' => $tag]) }}'; $dispatch('open-modal', 'delete-tag')"
+                                    >
+                                        <x-heroicon name="o-trash" class="h-5 w-5" />
+                                    </x-icon-button>
+                                </div>
+                            </x-td>
+                        </x-tr>
+                    @endforeach
+                </x-tbody>
+            </x-table>
+
+            @include("settings.tags.partials.delete-tag")
+
+            <div id="edit">
+                @if (isset($editTag))
+                    @include("settings.tags.partials.edit-tag", ["tag" => $editTag])
+                @endif
+            </div>
+        @else
+            <x-simple-card>
+                <div class="text-center">
+                    {{ __("You don't have any tags yet!") }}
+                </div>
+            </x-simple-card>
+        @endif
+    </div>
+</div>

resources/views/settings/tags/tags.blade.php

@@ -0,0 +1,30 @@
+<div x-data="">
+    <div class="inline-flex gap-1">
+        <div
+            id="tags-list-{{ $taggable->id }}"
+            class="inline-flex gap-1"
+            @if (! isset($oobOff) || ! $oobOff)
+                hx-swap-oob="outerHTML"
+            @endif
+        >
+            @foreach ($taggable->tags as $tag)
+                <div
+                    class="border-{{ $tag->color }}-300 bg-{{ $tag->color }}-50 text-{{ $tag->color }}-500 dark:border-{{ $tag->color }}-600 dark:bg-{{ $tag->color }}-500 flex max-w-max items-center rounded-md border px-2 py-1 text-xs dark:bg-opacity-10"
+                >
+                    <x-heroicon name="o-tag" class="mr-1 size-4" />
+                    {{ $tag->name }}
+                </div>
+            @endforeach
+        </div>
+
+        @if (isset($edit) && $edit)
+            <a
+                x-on:click="$dispatch('open-modal', 'manage-tags-modal')"
+                class="flex max-w-max cursor-pointer items-center justify-center rounded-md border border-gray-300 bg-gray-50 px-2 py-1 text-xs text-gray-500 dark:border-gray-600 dark:bg-gray-500 dark:bg-opacity-10"
+            >
+                <x-heroicon name="o-pencil" class="h-3 w-3" />
+            </a>
+            @include("settings.tags.manage")
+        @endif
+    </div>
+</div>

resources/views/site-settings/index.blade.php

@@ -1,6 +1,8 @@
 <x-site-layout :site="$site">
     <x-slot name="pageTitle">{{ __("Settings") }}</x-slot>
 
+    @include("site-settings.partials.site-details")
+
     @include("site-settings.partials.change-php-version")
 
     @include("site-settings.partials.update-aliases")

resources/views/site-settings/partials/site-details.blade.php

@@ -0,0 +1,56 @@
+<x-card id="server-details">
+    <x-slot name="title">{{ __("Details") }}</x-slot>
+    <x-slot name="description">
+        {{ __("More details about your site") }}
+    </x-slot>
+    <div class="flex items-center justify-between">
+        <div>{{ __("Created At") }}</div>
+        <div>
+            <x-datetime :value="$site->created_at" />
+        </div>
+    </div>
+    <div>
+        <div class="py-5">
+            <div class="border-t border-gray-200 dark:border-gray-700"></div>
+        </div>
+    </div>
+    <div class="flex items-center justify-between">
+        <div>{{ __("Type") }}</div>
+        <div class="capitalize">{{ $site->type }}</div>
+    </div>
+    <div>
+        <div class="py-5">
+            <div class="border-t border-gray-200 dark:border-gray-700"></div>
+        </div>
+    </div>
+    <div class="flex items-center justify-between">
+        <div>{{ __("Site ID") }}</div>
+        <div class="flex items-center">
+            <span class="rounded-md bg-gray-100 p-1 dark:bg-gray-700">
+                {{ $site->id }}
+            </span>
+        </div>
+    </div>
+    <div>
+        <div class="py-5">
+            <div class="border-t border-gray-200 dark:border-gray-700"></div>
+        </div>
+    </div>
+    <div class="flex items-center justify-between">
+        <div>{{ __("Status") }}</div>
+        <div class="flex items-center">
+            @include("sites.partials.site-status")
+        </div>
+    </div>
+    <div>
+        <div class="py-5">
+            <div class="border-t border-gray-200 dark:border-gray-700"></div>
+        </div>
+    </div>
+    <div class="flex items-center justify-between">
+        <div>{{ __("Tags") }}</div>
+        <div>
+            @include("settings.tags.tags", ["taggable" => $site, "edit" => true])
+        </div>
+    </div>
+</x-card>

resources/views/sites/partials/sites-list.blade.php

@@ -12,30 +12,63 @@
     <x-live id="live-sites">
         @if (count($sites) > 0)
             <div class="space-y-3">
-                @foreach ($sites as $site)
-                    <a href="{{ route("servers.sites.show", ["server" => $server, "site" => $site]) }}" class="block">
-                        <x-item-card>
-                            <div class="flex-none">
-                                <img
-                                    src="{{ asset("static/images/" . $site->type . ".svg") }}"
-                                    class="h-10 w-10"
-                                    alt=""
-                                />
-                            </div>
-                            <div class="ml-3 flex flex-grow flex-col items-start justify-center">
-                                <span class="mb-1">{{ $site->domain }}</span>
-                                <span class="text-sm text-gray-400">
+                <x-table>
+                    <x-thead>
+                        <x-tr>
+                            <x-th>Domain</x-th>
+                            <x-th>Date</x-th>
+                            <x-th>Tags</x-th>
+                            <x-th>Status</x-th>
+                            <x-th></x-th>
+                        </x-tr>
+                    </x-thead>
+                    <x-tbody>
+                        @foreach ($sites as $site)
+                            <x-tr>
+                                <x-td>
+                                    <div class="flex items-center">
+                                        <img
+                                            src="{{ asset("static/images/" . $site->type . ".svg") }}"
+                                            class="mr-1 h-5 w-5"
+                                            alt=""
+                                        />
+                                        <a
+                                            href="{{ route("servers.sites.show", ["server" => $server, "site" => $site]) }}"
+                                            class="hover:underline"
+                                        >
+                                            {{ $site->domain }}
+                                        </a>
+                                    </div>
+                                </x-td>
+                                <x-td>
                                     <x-datetime :value="$site->created_at" />
-                                </span>
-                            </div>
-                            <div class="flex items-center">
-                                <div class="inline">
+                                </x-td>
+                                <x-td>
+                                    @include("settings.tags.tags", ["taggable" => $site, "oobOff" => true])
+                                </x-td>
+                                <x-td>
                                     @include("sites.partials.status", ["status" => $site->status])
-                                </div>
-                            </div>
-                        </x-item-card>
-                    </a>
-                @endforeach
+                                </x-td>
+                                <x-td>
+                                    <div class="flex items-center justify-end">
+                                        <x-icon-button
+                                            :href="route('servers.sites.show', ['server' => $server, 'site' => $site])"
+                                            data-tooltip="Show Site"
+                                        >
+                                            <x-heroicon name="o-eye" class="h-5 w-5" />
+                                        </x-icon-button>
+                                        <x-icon-button
+                                            :href="route('servers.sites.settings', ['server' => $server, 'site' => $site])"
+                                            data-tooltip="Settings"
+                                        >
+                                            <x-heroicon name="o-wrench-screwdriver" class="h-5 w-5" />
+                                        </x-icon-button>
+                                    </div>
+                                </x-td>
+                            </x-tr>
+                        @endforeach
+                    </x-tbody>
+                </x-table>
             </div>
         @else
             <x-simple-card>

routes/settings.php

@@ -6,6 +6,7 @@
 use App\Http\Controllers\Settings\SourceControlController;
 use App\Http\Controllers\Settings\SSHKeyController;
 use App\Http\Controllers\Settings\StorageProviderController;
+use App\Http\Controllers\Settings\TagController;
 use App\Http\Controllers\Settings\UserController;
 use Illuminate\Support\Facades\Route;
 
@@ -64,3 +65,11 @@
     Route::post('add', [SshKeyController::class, 'add'])->name('settings.ssh-keys.add');
     Route::delete('delete/{id}', [SshKeyController::class, 'delete'])->name('settings.ssh-keys.delete');
 });
+
+// tags
+Route::prefix('/tags')->group(function () {
+    Route::get('/', [TagController::class, 'index'])->name('settings.tags');
+    Route::post('/create', [TagController::class, 'create'])->name('settings.tags.create');
+    Route::post('/{tag}', [TagController::class, 'update'])->name('settings.tags.update');
+    Route::delete('/{tag}', [TagController::class, 'delete'])->name('settings.tags.delete');
+});

routes/web.php

@@ -4,6 +4,7 @@
 use App\Http\Controllers\ScriptController;
 use App\Http\Controllers\SearchController;
 use App\Http\Controllers\Settings\ProjectController;
+use App\Http\Controllers\Settings\TagController;
 use Illuminate\Support\Facades\Route;
 
 Route::get('/', function () {
@@ -25,6 +26,11 @@
         require __DIR__.'/settings.php';
     });
 
+    Route::prefix('/settings/tags')->group(function () {
+        Route::post('/attach', [TagController::class, 'attach'])->name('tags.attach');
+        Route::post('/{tag}/detach', [TagController::class, 'detach'])->name('tags.detach');
+    });
+
     Route::prefix('/servers')->middleware('must-have-current-project')->group(function () {
         require __DIR__.'/server.php';
     });

tailwind.config.js

@@ -1,23 +1,42 @@
-import defaultTheme from 'tailwindcss/defaultTheme';
-import forms from '@tailwindcss/forms';
+import defaultTheme from "tailwindcss/defaultTheme";
+import forms from "@tailwindcss/forms";
 import colors from "tailwindcss/colors";
-import flowbite from 'flowbite/plugin';
+import flowbite from "flowbite/plugin";
 
-/** @type {import('tailwindcss').Config} */
+/** @type {import("tailwindcss").Config} */
 export default {
-    darkMode: 'class',
+    darkMode: "class",
+
+    safelist: [
+        // Safelist all colors for text, background, border, etc.
+        {
+            pattern:
+                /text-(red|green|blue|yellow|indigo|purple|pink|gray|white|black|orange|lime|emerald|teal|cyan|sky|violet|rose|fuchsia|amber|slate|zinc|neutral|stone)-(50|100|200|300|400|500|600|700|800|900)/,
+            variants: ["dark"], // Ensure dark mode variants are also included
+        },
+        {
+            pattern:
+                /bg-(red|green|blue|yellow|indigo|purple|pink|gray|white|black|orange|lime|emerald|teal|cyan|sky|violet|rose|fuchsia|amber|slate|zinc|neutral|stone)-(50|100|200|300|400|500|600|700|800|900)/,
+            variants: ["dark"],
+        },
+        {
+            pattern:
+                /border-(red|green|blue|yellow|indigo|purple|pink|gray|white|black|orange|lime|emerald|teal|cyan|sky|violet|rose|fuchsia|amber|slate|zinc|neutral|stone)-(50|100|200|300|400|500|600|700|800|900)/,
+            variants: ["dark"],
+        },
+    ],
 
     content: [
-        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
-        './storage/framework/views/*.php',
-        './resources/views/**/*.blade.php',
-        "./node_modules/flowbite/**/*.js"
+        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
+        "./storage/framework/views/*.php",
+        "./resources/views/**/*.blade.php",
+        "./node_modules/flowbite/**/*.js",
     ],
 
     theme: {
         extend: {
             fontFamily: {
-                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
+                sans: ["Figtree", ...defaultTheme.fontFamily.sans],
             },
             colors: {
                 gray: colors.slate,
@@ -26,8 +45,8 @@ export default {
             },
             variants: {
                 extend: {
-                    border: ['last'],
-                }
+                    border: ["last"],
+                },
             },
         },
     },
@@ -35,7 +54,7 @@ export default {
     plugins: [
         forms,
         flowbite({
-            charts: true
-        })
+            charts: true,
+        }),
     ],
 };

tests/Feature/TagsTest.php

@@ -0,0 +1,201 @@
+<?php
+
+namespace Tests\Feature;
+
+use App\Models\Server;
+use App\Models\Site;
+use App\Models\Tag;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class TagsTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_create_tag(): void
+    {
+        $this->actingAs($this->user);
+
+        $this->post(route('settings.tags.create'), [
+            'name' => 'test',
+            'color' => config('core.tag_colors')[0],
+        ])->assertSessionDoesntHaveErrors();
+
+        $this->assertDatabaseHas('tags', [
+            'project_id' => $this->user->current_project_id,
+            'name' => 'test',
+            'color' => config('core.tag_colors')[0],
+        ]);
+    }
+
+    public function test_get_tags_list(): void
+    {
+        $this->actingAs($this->user);
+
+        $tag = Tag::factory()->create([
+            'project_id' => $this->user->current_project_id,
+        ]);
+
+        $this->get(route('settings.tags'))
+            ->assertSuccessful()
+            ->assertSee($tag->name);
+    }
+
+    public function test_delete_tag(): void
+    {
+        $this->actingAs($this->user);
+
+        $tag = Tag::factory()->create([
+            'project_id' => $this->user->current_project_id,
+        ]);
+
+        $this->delete(route('settings.tags.delete', $tag->id))
+            ->assertSessionDoesntHaveErrors();
+
+        $this->assertDatabaseMissing('tags', [
+            'id' => $tag->id,
+        ]);
+    }
+
+    public function test_create_tag_handles_invalid_color(): void
+    {
+        $this->actingAs($this->user);
+
+        $this->post(route('settings.tags.create'), [
+            'name' => 'test',
+            'color' => 'invalid-color',
+        ])->assertSessionHasErrors('color');
+    }
+
+    public function test_create_tag_handles_invalid_name(): void
+    {
+        $this->actingAs($this->user);
+
+        $this->post(route('settings.tags.create'), [
+            'name' => '',
+            'color' => config('core.tag_colors')[0],
+        ])->assertSessionHasErrors('name');
+    }
+
+    public function test_edit_tag(): void
+    {
+        $this->actingAs($this->user);
+
+        $tag = Tag::factory()->create([
+            'project_id' => $this->user->current_project_id,
+        ]);
+
+        $this->post(route('settings.tags.update', ['tag' => $tag]), [
+            'name' => 'New Name',
+            'color' => config('core.tag_colors')[1],
+        ])
+            ->assertSessionDoesntHaveErrors();
+
+        $this->assertDatabaseHas('tags', [
+            'id' => $tag->id,
+            'name' => 'New Name',
+            'color' => config('core.tag_colors')[1],
+        ]);
+    }
+
+    /**
+     * @dataProvider data
+     */
+    public function test_attach_existing_tag_to_taggable(array $input): void
+    {
+        $this->actingAs($this->user);
+
+        $tag = Tag::factory()->create([
+            'project_id' => $this->user->current_project_id,
+            'name' => $input['name'],
+        ]);
+
+        $input['taggable_id'] = match ($input['taggable_type']) {
+            Server::class => $this->server->id,
+            Site::class => $this->site->id,
+            default => $this->fail('Unknown taggable type'),
+        };
+
+        $this->post(route('tags.attach'), $input)->assertSessionDoesntHaveErrors();
+
+        $this->assertDatabaseHas('taggables', [
+            'taggable_id' => $input['taggable_id'],
+            'tag_id' => $tag->id,
+        ]);
+    }
+
+    /**
+     * @dataProvider data
+     */
+    public function test_attach_new_tag_to_taggable(array $input): void
+    {
+        $this->actingAs($this->user);
+
+        $input['taggable_id'] = match ($input['taggable_type']) {
+            Server::class => $this->server->id,
+            Site::class => $this->site->id,
+            default => $this->fail('Unknown taggable type'),
+        };
+
+        $this->post(route('tags.attach'), $input)->assertSessionDoesntHaveErrors();
+
+        $this->assertDatabaseHas('tags', [
+            'name' => $input['name'],
+        ]);
+
+        $tag = Tag::query()->where('name', $input['name'])->firstOrFail();
+
+        $this->assertDatabaseHas('taggables', [
+            'taggable_id' => $input['taggable_id'],
+            'tag_id' => $tag->id,
+        ]);
+    }
+
+    /**
+     * @dataProvider data
+     */
+    public function test_detach_tag(array $input): void
+    {
+        $this->actingAs($this->user);
+
+        $tag = Tag::factory()->create([
+            'project_id' => $this->user->current_project_id,
+            'name' => $input['name'],
+        ]);
+
+        $taggable = match ($input['taggable_type']) {
+            Server::class => $this->server,
+            Site::class => $this->site,
+            default => $this->fail('Unknown taggable type'),
+        };
+
+        $input['taggable_id'] = $taggable->id;
+
+        $taggable->tags()->attach($tag);
+
+        $this->post(route('tags.detach', $tag->id), $input)->assertSessionDoesntHaveErrors();
+
+        $this->assertDatabaseMissing('taggables', [
+            'taggable_id' => $input['taggable_id'],
+            'tag_id' => $tag->id,
+        ]);
+    }
+
+    public static function data(): array
+    {
+        return [
+            [
+                [
+                    'taggable_type' => Server::class,
+                    'name' => 'staging',
+                ],
+            ],
+            [
+                [
+                    'taggable_type' => Site::class,
+                    'name' => 'production',
+                ],
+            ],
+        ];
+    }
+}