Refactored code

docker/nginx/conf.d/default.conf

@@ -35,4 +35,8 @@ server {
     location ~ /\.(?!well-known).* {
         deny all;
     }
+
+    location ~* (?:#.*#|\.(?:bak|conf|dist|fla|in[ci]|log|orig|psd|sh|sql|sw[op])|~)$ {
+      deny all;
+    }
 }

src/app/DTO/UseCase/Metric/MetricDTO.php

@@ -0,0 +1,49 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\DTO\UseCase\Metric;
+
+use App\Models\Anime;
+use Illuminate\Contracts\Support\Arrayable;
+use Illuminate\Database\Eloquent\Collection;
+
+/**
+ * Class MetricDTO
+ * @package App\DTO\UseCase\Metric
+ * @template-implements Arrayable<string, mixed>
+ */
+readonly class MetricDTO implements Arrayable
+{
+    /**
+     * @param int                    $animeCount
+     * @param int                    $usersCount
+     * @param array<int>             $animePerMonth
+     * @param array<string, int>     $animePerDomain
+     * @param Collection<int, Anime> $latestAnime
+     */
+    public function __construct(
+        public int        $animeCount,
+        public int        $usersCount,
+        public array      $animePerMonth,
+        public array      $animePerDomain,
+        public Collection $latestAnime,
+    ) {
+    }
+
+    /**
+     * Get the instance as an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(): array
+    {
+        return [
+            'animeCount'     => $this->animeCount,
+            'usersCount'     => $this->usersCount,
+            'animePerMonth'  => $this->animePerMonth,
+            'animePerDomain' => $this->animePerDomain,
+            'latestAnime'    => $this->latestAnime,
+        ];
+    }
+}

src/app/Http/Controllers/Dashboard/DashboardController.php

@@ -17,6 +17,6 @@ public function __construct(private readonly MetricUseCase $metricUseCase)
 
     public function index(): Response
     {
-        return Inertia::render('Dashboard/Dashboard', $this->metricUseCase->getAnimeMetrics());
+        return Inertia::render('Dashboard/Dashboard', $this->metricUseCase->getAnimeMetrics()->toArray());
     }
 }

src/app/Services/AnimeService.php

@@ -82,6 +82,9 @@ public function getParsedAnimePerMonth(): array
         return array_replace($initial, $perMonth);
     }
 
+    /**
+     * @return Collection<int, Anime>
+     */
     public function getTenLatestAnime(): Collection
     {
         return $this->animeRepository->withFilters([new RelationFilter(['image:model_id,path'])])->getLatestAnime();

src/app/UseCase/Metric/MetricUseCase.php

@@ -4,6 +4,7 @@
 
 namespace App\UseCase\Metric;
 
+use App\DTO\UseCase\Metric\MetricDTO;
 use App\Services\AnimeService;
 use App\Services\AnimeUrlService;
 use App\Services\UserService;
@@ -21,15 +22,15 @@ public function __construct(
     ) {
     }
 
-    public function getAnimeMetrics(): array
+    public function getAnimeMetrics(): MetricDTO
     {
         // TODO add cache decorator for repositories
-        return [
-            'animeCount'     => $this->animeService->countAnime(),
-            'usersCount'     => $this->userService->countUsers(),
-            'animePerMonth'  => $this->animeService->getParsedAnimePerMonth(),
-            'animePerDomain' => $this->animeUrlService->countAnimePerDomain(),
-            'latestAnime'    => $this->animeService->getTenLatestAnime(),
-        ];
+        return new MetricDTO(
+            $this->animeService->countAnime(),
+            $this->userService->countUsers(),
+            $this->animeService->getParsedAnimePerMonth(),
+            $this->animeUrlService->countAnimePerDomain(),
+            $this->animeService->getTenLatestAnime(),
+        );
     }
 }

src/database/factories/AnimeFactory.php

@@ -24,7 +24,7 @@ public function definition(): array
             'title'    => $this->faker->title,
             'status'   => $this->faker->randomElement(AnimeStatusEnum::values()),
             'episodes' => (string) $this->faker->randomNumber(),
-            'rating'   => $this->faker->randomFloat(),
+            'rating'   => $this->faker->randomAnimeRating(),
         ];
     }
 }

src/resources/css/app.css

@@ -1,6 +1,3 @@
-@import 'primevue/resources/themes/lara-dark-indigo/theme.css';
-@import 'primeicons/primeicons.css';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/resources/js/Components/Input/SearchInput.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import InputText from 'primevue/inputtext';
+import { ComponentPublicInstance, onMounted, ref } from 'vue';
+
+const query = ref<string | null>(null);
+const searchInput = ref<InputText | null>(null);
+
+const focus = (event: KeyboardEvent) => {
+    if (event.ctrlKey && event.key === 'k') {
+        event.preventDefault();
+
+        const input = searchInput.value as ComponentPublicInstance<{
+            $el: HTMLInputElement;
+        }>;
+        input?.$el?.focus();
+    }
+};
+
+onMounted(() => window.addEventListener('keydown', focus));
+</script>
+
+<template>
+    <span class="p-input-icon-left">
+        <i class="pi pi-search text-zinc-600 dark:text-white" />
+
+        <InputText
+            ref="searchInput"
+            v-model="query"
+            name="search"
+            class="text-xs ring-1 bg-transparent ring-gray-200 dark:ring-zinc-600 focus:ring-red-300 pl-10 pr-5 text-gray-600 dark:text-white py-3 rounded-full w-full outline-none focus:ring-1"
+            placeholder="Search (CTRL + K)"
+        />
+    </span>
+</template>
+
+<style scoped></style>

src/resources/js/Layouts/AuthenticatedLayout.vue

@@ -6,7 +6,7 @@ import DropdownLink from '@/Components/DropdownLink.vue';
 import NavLink from '@/Components/NavLink.vue';
 import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
 import { Link } from '@inertiajs/vue3';
-import Searchbar from '@/Components/Input/Searchbar.vue';
+import SearchInput from '@/Components/Input/SearchInput.vue';
 import ThemeSwitcher from '@/Components/ThemeSwitcher.vue';
 import Footer from '@/Components/Footer.vue';
 
@@ -66,7 +66,7 @@ const showingNavigationDropdown = ref(false);
 
                         <div class="hidden sm:flex sm:items-center sm:ml-6">
                             <div class="flex items-center justify-between">
-                                <Searchbar class="mr-3" />
+                                <SearchInput class="mr-3" />
 
                                 <ThemeSwitcher />
                             </div>
@@ -163,7 +163,7 @@ const showingNavigationDropdown = ref(false);
                     class="sm:hidden"
                 >
                     <div class="pt-2 pb-3 space-y-1">
-                        <Searchbar />
+                        <SearchInput />
                         <ThemeSwitcher />
                     </div>
 

src/resources/js/Pages/Anime/Partials/AddAnimeForm.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import TextInput from '@/Components/TextInput.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import InputError from '@/Components/InputError.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
+import TextInput from '@/Components/Input/TextInput.vue';
+import InputLabel from '@/Components/Input/InputLabel.vue';
+import InputError from '@/Components/Input/InputError.vue';
+import PrimaryButton from '@/Components/Button/PrimaryButton.vue';
 import { useForm, usePage } from '@inertiajs/vue3';
 import { ScrapeResult } from '@/types/pusher/types';
 import { useToast } from 'primevue/usetoast';

src/resources/js/Pages/Anime/Partials/DataTable.vue

@@ -30,8 +30,14 @@ const openModal = () => {
 const handleUpdate = (event: DataTablePageEvent) => {
     router.get(
         route('anime.index'),
-        { page: event.page + 1, per_page: event.rows },
-        { preserveScroll: true }
+        {
+            page: event.page + 1,
+            per_page: event.rows,
+        },
+        {
+            preserveScroll: true,
+            only: ['pagination'],
+        }
     );
 };
 </script>

src/resources/js/Pages/Anime/Show.vue

@@ -4,7 +4,7 @@ import { AnimeWithRelations } from '@/types/anime/types';
 import { computed } from 'vue';
 import { Head } from '@inertiajs/vue3';
 import ExternalLink from '@/Components/ExternalLink.vue';
-import DangerButton from '@/Components/DangerButton.vue';
+import DangerButton from '@/Components/Button/DangerButton.vue';
 
 const props = defineProps<{
     anime: AnimeWithRelations;

src/resources/js/Pages/Auth/ConfirmPassword.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import GuestLayout from '@/Layouts/GuestLayout.vue';
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
+import InputError from '@/Components/Input/InputError.vue';
+import InputLabel from '@/Components/Input/InputLabel.vue';
+import PrimaryButton from '@/Components/Button/PrimaryButton.vue';
+import TextInput from '@/Components/Input/TextInput.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 
 const form = useForm({

src/resources/js/Pages/Auth/Login.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import Checkbox from '@/Components/Checkbox.vue';
 import GuestLayout from '@/Layouts/GuestLayout.vue';
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
+import InputError from '@/Components/Input/InputError.vue';
+import InputLabel from '@/Components/Input/InputLabel.vue';
+import PrimaryButton from '@/Components/Button/PrimaryButton.vue';
+import TextInput from '@/Components/Input/TextInput.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 
 defineProps<{

src/resources/js/Pages/Auth/Register.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import GuestLayout from '@/Layouts/GuestLayout.vue';
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
+import InputError from '@/Components/Input/InputError.vue';
+import InputLabel from '@/Components/Input/InputLabel.vue';
+import PrimaryButton from '@/Components/Button/PrimaryButton.vue';
+import TextInput from '@/Components/Input/TextInput.vue';
 import { Head, Link, useForm } from '@inertiajs/vue3';
 
 const form = useForm({

src/resources/js/Pages/Auth/VerifyEmail.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import GuestLayout from '@/Layouts/GuestLayout.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
+import PrimaryButton from '@/Components/Button/PrimaryButton.vue';
 import { Head, Link, useForm } from '@inertiajs/vue3';
 
 const props = defineProps<{
@@ -49,8 +49,8 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
                     method="post"
                     as="button"
                     class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
-                    >Log Out</Link
-                >
+                    >Log Out
+                </Link>
             </div>
         </form>
     </GuestLayout>

src/resources/js/Pages/Dashboard/Dashboard.vue

@@ -3,7 +3,7 @@ import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import { Head } from '@inertiajs/vue3';
 import { AnimePerDomain, AnimeWithRelations } from '@/types/anime/types';
 import StatisticCards from '@/Pages/Dashboard/Partials/StatisticCards.vue';
-import Carousel from '@/Components/Carousel.vue';
+import Carousel from '@/Pages/Dashboard/Partials/Carousel.vue';
 import Charts from '@/Pages/Dashboard/Partials/Charts.vue';
 import { provide } from 'vue';
 

src/resources/js/Pages/Invitation/Partials/InvitationForm.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import TextInput from '@/Components/TextInput.vue';
+import PrimaryButton from '@/Components/Button/PrimaryButton.vue';
+import InputError from '@/Components/Input/InputError.vue';
+import InputLabel from '@/Components/Input/InputLabel.vue';
+import TextInput from '@/Components/Input/TextInput.vue';
 import { useForm } from '@inertiajs/vue3';
 
 const form = useForm({
@@ -29,7 +29,6 @@ const submit = () => {
                 type="email"
                 class="mt-1 block w-full"
                 required
-                autofocus
                 autocomplete="email"
             />
 

src/resources/js/Pages/Profile/Partials/DeleteUserForm.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import DangerButton from '@/Components/DangerButton.vue';
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
+import DangerButton from '@/Components/Button/DangerButton.vue';
+import InputError from '@/Components/Input/InputError.vue';
+import InputLabel from '@/Components/Input/InputLabel.vue';
 import Modal from '@/Components/Modal.vue';
-import SecondaryButton from '@/Components/SecondaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
+import SecondaryButton from '@/Components/Button/SecondaryButton.vue';
+import TextInput from '@/Components/Input/TextInput.vue';
 import { useForm } from '@inertiajs/vue3';
 import { nextTick, ref } from 'vue';
 
@@ -84,7 +84,7 @@ const closeModal = () => {
                 </div>
 
                 <div class="mt-6 flex justify-end">
-                    <SecondaryButton @click="closeModal"> Cancel </SecondaryButton>
+                    <SecondaryButton @click="closeModal"> Cancel</SecondaryButton>
 
                     <DangerButton
                         class="ml-3"

src/resources/js/Pages/Profile/Partials/IntegrationList.vue

@@ -3,7 +3,7 @@ import TelegramLoginWidget from '@/Components/TelegramLoginWidget.vue';
 import { TelegramUser } from '@/types/telegram/types';
 import { router, usePage } from '@inertiajs/vue3';
 import { computed } from 'vue';
-import DangerButton from '@/Components/DangerButton.vue';
+import DangerButton from '@/Components/Button/DangerButton.vue';
 
 const page = usePage();
 const telegramUser = computed(() => page.props.auth.user.telegram_user);

src/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
+import InputError from '@/Components/Input/InputError.vue';
+import InputLabel from '@/Components/Input/InputLabel.vue';
+import PrimaryButton from '@/Components/Button/PrimaryButton.vue';
+import TextInput from '@/Components/Input/TextInput.vue';
 import { useForm } from '@inertiajs/vue3';
 import { ref } from 'vue';