Refactored code

.github/workflows/frontend-build.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [ 18.x ]
+        node-version: [ 20.x ]
 
     steps:
       - uses: actions/checkout@v4

src/.prettierignore

@@ -6,3 +6,4 @@
 !*.vue
 !*.ts
 !*.js
+!tsconfig.json

src/app/Http/Controllers/Anime/AnimeController.php

@@ -13,7 +13,6 @@
 use App\Models\Anime;
 use App\Repositories\Anime\AnimeRepositoryInterface;
 use App\Repositories\Filters\ColumnFilter;
-use App\Repositories\Filters\RelationFilter;
 use App\Repositories\Params\PaginationParams;
 use App\Services\AnimeService;
 use Illuminate\Http\RedirectResponse;
@@ -40,7 +39,6 @@ public function index(IndexRequest $request): Response
         $filter     = new PaginationParams($page, $perPage);
         $pagination = $this->animeRepository->withFilters([
             new ColumnFilter(['id', 'title', 'episodes', 'rating', 'status']),
-            new RelationFilter(['image:model_id,path']),
         ])->paginate($filter);
 
         return Inertia::render('Anime/Index', compact('pagination'));

src/resources/js/Components/Carousel.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import Carousel, { CarouselPassThroughOptions } from 'primevue/carousel';
+import Carousel from 'primevue/carousel';
 import { Link } from '@inertiajs/vue3';
-import { PassThrough } from 'primevue/ts-helpers';
-import { AnimeWithRelations } from '@/types/anime/models';
+import { AnimeWithRelations } from '@/types/anime/types';
 import { reactive, ref } from 'vue';
 import LeftBorderedHeader from '@/Components/LeftBorderedHeader.vue';
 
@@ -14,7 +13,7 @@ type Props = {
 
 defineProps<Props>();
 
-const customStyles = reactive<PassThrough<CarouselPassThroughOptions>>({
+const customStyles = reactive({
     item: () => ({
         class: ['overflow-hidden'],
     }),

src/resources/js/Components/TelegramLoginWidget.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+import { RequestAccess, WidgetSize } from '@/types/telegram/enums';
+import { TelegramUser } from '@/types/telegram/types';
+
+type Props = {
+    bot: string;
+    size: WidgetSize;
+    radius: number;
+    showUserPicture: boolean;
+    accessType: RequestAccess;
+};
+
+type WithRedirect = Props & {
+    type: 'redirect';
+    redirectUrl: string;
+};
+
+type WithCallback = Props & {
+    type: 'callback';
+    callback: (user: TelegramUser) => void;
+};
+
+const widgetUrl = 'https://telegram.org/js/telegram-widget.js?22';
+const telegramWidget = ref<HTMLElement | null>(null);
+const props = withDefaults(defineProps<Partial<WithRedirect | WithCallback>>(), {
+    bot: 'anilibrary_bot',
+    size: WidgetSize.Medium,
+    radius: 14,
+    showUserPicture: false,
+    accessType: RequestAccess.Write,
+});
+
+const createLoginWidget = (): HTMLElement => {
+    const script = document.createElement('script');
+    script.async = true;
+    script.src = widgetUrl;
+
+    script.setAttribute('data-telegram-login', props.bot);
+    script.setAttribute('data-size', props.size.toString());
+    script.setAttribute('data-radius', props.radius.toString());
+    script.setAttribute('data-userpic', props.showUserPicture.toString());
+    script.setAttribute('data-request-access', props.accessType);
+
+    if (props.type === 'redirect') {
+        script.setAttribute('data-auth-url', route((props as WithRedirect).redirectUrl));
+
+        return script;
+    }
+
+    window.onTelegramAuth = (props as WithCallback).callback;
+    script.setAttribute('data-onauth', 'onTelegramAuth(user)');
+
+    return script;
+};
+
+onMounted(() => {
+    (telegramWidget.value as HTMLElement)!.appendChild(createLoginWidget());
+});
+
+onUnmounted(() => {
+    if (window.onTelegramAuth) {
+        delete window.onTelegramAuth;
+    }
+});
+</script>
+
+<template>
+    <div ref="telegramWidget"></div>
+</template>
+
+<style scoped></style>

src/resources/js/Components/Theme/Switcher.vue → src/resources/js/Components/ThemeSwitcher.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import Button from 'primevue/button';
-import { useDark, useToggle } from '@vueuse/core/index';
+import { useDark, useToggle } from '@vueuse/core';
 
 const isDark = useDark();
 const toggleDarkMode = useToggle(isDark);
 </script>
 
 <template>
     <Button
-        class="text-black dark:text-white"
+        class="text-white dark:text-black bg-dark dark:bg-white dark:hover:bg-gray-100"
         rounded
+        severity="secondary"
         :icon="`pi ${isDark ? 'pi-sun' : 'pi-moon'}`"
         @click="toggleDarkMode()"
     />

src/resources/js/Layouts/AuthenticatedLayout.vue

@@ -7,7 +7,7 @@ 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 Switcher from '@/Components/Theme/Switcher.vue';
+import ThemeSwitcher from '@/Components/ThemeSwitcher.vue';
 import Footer from '@/Components/Footer.vue';
 
 const showingNavigationDropdown = ref(false);
@@ -68,7 +68,7 @@ const showingNavigationDropdown = ref(false);
                             <div class="flex items-center justify-between">
                                 <Searchbar class="mr-3" />
 
-                                <Switcher />
+                                <ThemeSwitcher />
                             </div>
 
                             <!-- Settings Dropdown -->
@@ -164,7 +164,7 @@ const showingNavigationDropdown = ref(false);
                 >
                     <div class="pt-2 pb-3 space-y-1">
                         <Searchbar />
-                        <Switcher />
+                        <ThemeSwitcher />
                     </div>
 
                     <div class="pt-2 pb-3 space-y-1">