From 8d227803c0befd7c272a66ceefbcd1fe1b917a14 Mon Sep 17 00:00:00 2001
From: Ilya Stepenko <38462532+VampireAotD@users.noreply.github.com>
Date: Fri, 10 Nov 2023 20:25:11 +0200
Subject: [PATCH] Refactored code

---
 .github/workflows/frontend-build.yml          |   2 +-
 src/.prettierignore                           |   1 +
 .../Controllers/Anime/AnimeController.php     |   2 -
 src/resources/js/Components/Carousel.vue      |   7 +-
 .../js/Components/DashboardSlider.vue         |  89 ---------------
 .../Components/DataTable/EasyTableWrapper.vue |  84 --------------
 .../Telegram/TelegramLoginWidget.vue          |  51 ---------
 .../js/Components/TelegramLoginWidget.vue     |  72 ++++++++++++
 .../{Theme/Switcher.vue => ThemeSwitcher.vue} |   5 +-
 .../js/Layouts/AuthenticatedLayout.vue        |   6 +-
 src/resources/js/Pages/Anime/Index.vue        | 101 +----------------
 .../js/Pages/Anime/Partials/AddAnimeForm.vue  |  32 ++++--
 .../Pages/Anime/Partials/AddMethodModal.vue   |  13 +++
 .../js/Pages/Anime/Partials/DataTable.vue     | 103 ++++++++++++++++++
 src/resources/js/Pages/Anime/Show.vue         |   2 +-
 .../js/Pages/Dashboard/Dashboard.vue          |   2 +-
 .../Dashboard/Partials/CountPerDomain.vue     |   6 +-
 .../Profile/Partials/IntegrationList.vue      |  12 +-
 src/resources/js/app.ts                       |  11 +-
 src/resources/js/bootstrap.ts                 |   1 +
 .../Components/TelegramLoginWidget.test.ts    |  74 +++++++++++++
 .../js/tests/Components/ThemeSwitcher.test.ts |  24 ++++
 .../tests/Layouts/AuthenticatedLayout.test.ts |   5 +-
 .../js/tests/plugins/user/authorize.test.ts   |  12 +-
 src/resources/js/types/anime/props.ts         |  18 ---
 .../js/types/anime/{models.ts => types.ts}    |   6 +
 src/resources/js/types/index.d.ts             |  13 +++
 src/resources/js/types/telegram/enums.ts      |  10 ++
 src/resources/js/types/telegram/types.ts      |  21 ----
 .../Controllers/Anime/AnimeControllerTest.php |   2 +-
 src/tsconfig.json                             |  17 ++-
 31 files changed, 403 insertions(+), 401 deletions(-)
 delete mode 100644 src/resources/js/Components/DashboardSlider.vue
 delete mode 100644 src/resources/js/Components/DataTable/EasyTableWrapper.vue
 delete mode 100644 src/resources/js/Components/Telegram/TelegramLoginWidget.vue
 create mode 100644 src/resources/js/Components/TelegramLoginWidget.vue
 rename src/resources/js/Components/{Theme/Switcher.vue => ThemeSwitcher.vue} (65%)
 create mode 100644 src/resources/js/Pages/Anime/Partials/AddMethodModal.vue
 create mode 100644 src/resources/js/Pages/Anime/Partials/DataTable.vue
 create mode 100644 src/resources/js/tests/Components/TelegramLoginWidget.test.ts
 create mode 100644 src/resources/js/tests/Components/ThemeSwitcher.test.ts
 delete mode 100644 src/resources/js/types/anime/props.ts
 rename src/resources/js/types/anime/{models.ts => types.ts} (83%)
 create mode 100644 src/resources/js/types/telegram/enums.ts

diff --git a/.github/workflows/frontend-build.yml b/.github/workflows/frontend-build.yml
index b4642e0f..dfdb4644 100644
--- a/.github/workflows/frontend-build.yml
+++ b/.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
diff --git a/src/.prettierignore b/src/.prettierignore
index 1da59b79..f3d38c2c 100644
--- a/src/.prettierignore
+++ b/src/.prettierignore
@@ -6,3 +6,4 @@
 !*.vue
 !*.ts
 !*.js
+!tsconfig.json
diff --git a/src/app/Http/Controllers/Anime/AnimeController.php b/src/app/Http/Controllers/Anime/AnimeController.php
index 3cecfff5..b8af67e5 100644
--- a/src/app/Http/Controllers/Anime/AnimeController.php
+++ b/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'));
diff --git a/src/resources/js/Components/Carousel.vue b/src/resources/js/Components/Carousel.vue
index 5154a3e3..6eebd351 100644
--- a/src/resources/js/Components/Carousel.vue
+++ b/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'],
     }),
diff --git a/src/resources/js/Components/DashboardSlider.vue b/src/resources/js/Components/DashboardSlider.vue
deleted file mode 100644
index e57fb978..00000000
--- a/src/resources/js/Components/DashboardSlider.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import Carousel, { CarouselPassThroughOptions } from 'primevue/carousel';
-import { Link } from '@inertiajs/vue3';
-import { PassThrough } from 'primevue/ts-helpers';
-import { AnimeWithRelations } from '@/types/anime/models';
-import { reactive, ref } from 'vue';
-
-type Props = {
-    display: number;
-    scroll: number;
-    data: AnimeWithRelations[];
-};
-
-defineProps<Props>();
-
-const customStyles = reactive<PassThrough<CarouselPassThroughOptions>>({
-    item: () => ({
-        class: ['overflow-hidden'],
-    }),
-    previousButton: ['text-black dark:text-red-500'],
-    nextButton: ['text-black dark:text-red-500'],
-});
-
-const responsiveOptions = ref([
-    {
-        breakpoint: '1400px',
-        numVisible: 2,
-        numScroll: 1,
-    },
-    {
-        breakpoint: '1280px',
-        numVisible: 4,
-        numScroll: 1,
-    },
-    {
-        breakpoint: '767px',
-        numVisible: 2,
-        numScroll: 1,
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1,
-        numScroll: 1,
-    },
-]);
-</script>
-
-<template>
-    <div
-        class="bg-gray-100 dark:bg-gray-800 dark:shadow border-t border-b border-gray-300 shadow dark:border-red-500 mx-auto sm:px-6 lg:px-12"
-    >
-        <Carousel
-            class="max-h-[50%]"
-            :value="data"
-            :show-indicators="false"
-            :num-visible="display"
-            :num-scroll="scroll"
-            :pt="customStyles"
-            :responsive-options="responsiveOptions"
-        >
-            <template #item="slotProps">
-                <div
-                    class="flex flex-col justify-center h-full overflow-hidden py-3 px-3"
-                >
-                    <div class="relative rounded h-[80%]">
-                        <img
-                            class="h-full w-full"
-                            :src="slotProps.data.image.path"
-                            :alt="slotProps.data.title"
-                        />
-                    </div>
-
-                    <div class="h-[5%] mt-3">
-                        <Link
-                            class="block truncate text-black dark:text-white"
-                            target="_blank"
-                            :href="route('anime.show', slotProps.data.id)"
-                            :title="slotProps.data.title"
-                        >
-                            {{ slotProps.data.title }}
-                        </Link>
-                    </div>
-                </div>
-            </template>
-        </Carousel>
-    </div>
-</template>
-
-<style scoped></style>
diff --git a/src/resources/js/Components/DataTable/EasyTableWrapper.vue b/src/resources/js/Components/DataTable/EasyTableWrapper.vue
deleted file mode 100644
index d284b495..00000000
--- a/src/resources/js/Components/DataTable/EasyTableWrapper.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import Vue3EasyDataTable, { Header, Item, ServerOptions } from 'vue3-easy-data-table';
-import 'vue3-easy-data-table/dist/style.css';
-
-const props = defineProps<{
-    columns: Header[];
-    items: Item[];
-    renderPerPage: number[];
-    currentPage: number;
-    showPerPage: number;
-    totalItems: number;
-}>();
-
-defineEmits<{
-    (e: 'paginationUpdate', options: ServerOptions): void;
-}>();
-
-const options: ServerOptions = {
-    page: props.currentPage,
-    rowsPerPage: props.showPerPage,
-};
-</script>
-
-<template>
-    <Vue3EasyDataTable
-        v-model:server-options="options"
-        :headers="columns"
-        :items="items"
-        :rows-items="renderPerPage"
-        :server-items-length="totalItems"
-        table-class-name="dark-theme"
-        show-index
-        border-cell
-        @update:server-options="$emit('paginationUpdate', options)"
-    >
-        <template v-for="slotName in Object.keys($slots)" #[slotName]="item: Item">
-            <slot :name="slotName" v-bind="item" />
-        </template>
-    </Vue3EasyDataTable>
-</template>
-
-<style scoped>
-.dark-theme {
-    --easy-table-border: 1px solid #445269;
-    --easy-table-row-border: 1px solid #445269;
-
-    --easy-table-header-font-size: 14px;
-    --easy-table-header-height: 50px;
-    --easy-table-header-font-color: #c1cad4;
-    --easy-table-header-background-color: #2d3a4f;
-
-    --easy-table-header-item-padding: 10px 15px;
-
-    --easy-table-body-even-row-font-color: #fff;
-    --easy-table-body-even-row-background-color: #4c5d7a;
-
-    --easy-table-body-row-font-color: #c0c7d2;
-    --easy-table-body-row-background-color: #2d3a4f;
-    --easy-table-body-row-height: 50px;
-    --easy-table-body-row-font-size: 14px;
-
-    --easy-table-body-row-hover-font-color: #2d3a4f;
-    --easy-table-body-row-hover-background-color: #eee;
-
-    --easy-table-body-item-padding: 10px 15px;
-
-    --easy-table-footer-background-color: #2d3a4f;
-    --easy-table-footer-font-color: #c0c7d2;
-    --easy-table-footer-font-size: 14px;
-    --easy-table-footer-padding: 0px 10px;
-    --easy-table-footer-height: 50px;
-
-    --easy-table-rows-per-page-selector-width: 70px;
-    --easy-table-rows-per-page-selector-option-padding: 10px;
-    --easy-table-rows-per-page-selector-z-index: 1;
-
-    --easy-table-scrollbar-track-color: #2d3a4f;
-    --easy-table-scrollbar-color: #2d3a4f;
-    --easy-table-scrollbar-thumb-color: #4c5d7a;
-    --easy-table-scrollbar-corner-color: #2d3a4f;
-
-    --easy-table-loading-mask-background-color: #2d3a4f;
-}
-</style>
diff --git a/src/resources/js/Components/Telegram/TelegramLoginWidget.vue b/src/resources/js/Components/Telegram/TelegramLoginWidget.vue
deleted file mode 100644
index 9eb22187..00000000
--- a/src/resources/js/Components/Telegram/TelegramLoginWidget.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue';
-import { RequestAccess, TelegramWidgetProps, WidgetSize } from '@/types/telegram/types';
-
-const props = withDefaults(defineProps<TelegramWidgetProps>(), {
-    botName: 'anilibrary_bot',
-    size: WidgetSize.Medium,
-    radius: 14,
-    showUserPic: false,
-    requestAccess: RequestAccess.Write,
-});
-
-const telegramWidget = ref<HTMLElement | null>(null);
-
-const createLoginWidget = (): HTMLElement => {
-    const script = document.createElement('script');
-    script.async = true;
-    script.src = 'https://telegram.org/js/telegram-widget.js?22';
-
-    script.setAttribute('data-telegram-login', props.botName);
-    script.setAttribute('data-size', props.size);
-    script.setAttribute('data-radius', props.radius);
-    script.setAttribute('data-userpic', props.showUserPic.toString());
-    script.setAttribute('data-request-access', props.requestAccess);
-
-    if (!props.redirectUrl) {
-        window.onTelegramAuth = props.callbackHandler;
-        script.setAttribute('data-onauth', 'onTelegramAuth(user)');
-    } else {
-        script.setAttribute('data-auth-url', route('telegram.login'));
-    }
-
-    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>
diff --git a/src/resources/js/Components/TelegramLoginWidget.vue b/src/resources/js/Components/TelegramLoginWidget.vue
new file mode 100644
index 00000000..907c3b03
--- /dev/null
+++ b/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>
diff --git a/src/resources/js/Components/Theme/Switcher.vue b/src/resources/js/Components/ThemeSwitcher.vue
similarity index 65%
rename from src/resources/js/Components/Theme/Switcher.vue
rename to src/resources/js/Components/ThemeSwitcher.vue
index dcd836b7..0840aacf 100644
--- a/src/resources/js/Components/Theme/Switcher.vue
+++ b/src/resources/js/Components/ThemeSwitcher.vue
@@ -1,6 +1,6 @@
 <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);
@@ -8,8 +8,9 @@ const toggleDarkMode = useToggle(isDark);
 
 <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()"
     />
diff --git a/src/resources/js/Layouts/AuthenticatedLayout.vue b/src/resources/js/Layouts/AuthenticatedLayout.vue
index d944a9ee..1411c5d6 100644
--- a/src/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/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">
diff --git a/src/resources/js/Pages/Anime/Index.vue b/src/resources/js/Pages/Anime/Index.vue
index cce123bf..8dad42aa 100644
--- a/src/resources/js/Pages/Anime/Index.vue
+++ b/src/resources/js/Pages/Anime/Index.vue
@@ -1,28 +1,12 @@
 <script setup lang="ts">
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-import { Head, Link, router } from '@inertiajs/vue3';
-import { IndexProps } from '@/types/anime/props';
-import Modal from '@/Components/Modal.vue';
-import AddAnimeForm from '@/Pages/Anime/Partials/AddAnimeForm.vue';
-import { ref } from 'vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
-import Button from 'primevue/button';
+import { Head } from '@inertiajs/vue3';
+import { AnimePagination } from '@/types/anime/types';
+import DataTable from '@/Pages/Anime/Partials/DataTable.vue';
 
 defineProps<{
-    pagination: IndexProps;
+    pagination: AnimePagination;
 }>();
-
-const renderPerPage: number[] = [20, 50, 100];
-const handleUpdate = (options: unknown) => {
-    router.get(
-        route('anime.index'),
-        { page: options.page, per_page: options.rowsPerPage },
-        { preserveScroll: true }
-    );
-};
-const showAddModal = ref<boolean>(false);
 </script>
 
 <template>
@@ -37,81 +21,8 @@ const showAddModal = ref<boolean>(false);
             </h2>
         </template>
 
-        <div class="py-12">
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div class="mb-2">
-                    <PrimaryButton @click="showAddModal = true">
-                        Add new anime
-                    </PrimaryButton>
-                </div>
-
-                <div
-                    class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"
-                >
-                    <DataTable
-                        class="dark:bg-gray-800"
-                        paginator
-                        lazy
-                        :first="(pagination.current_page - 1) * pagination.per_page"
-                        :value="pagination.data"
-                        :rows="pagination.per_page"
-                        :rows-per-page-options="renderPerPage"
-                        :total-records="pagination.total"
-                        paginator-template="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-                        current-page-report-template="{first} to {last} of {totalRecords}"
-                        @page="
-                            (event) =>
-                                handleUpdate({
-                                    page: event.page + 1,
-                                    rowsPerPage: event.rows,
-                                })
-                        "
-                    >
-                        <Column header="Title" field="title" :sortable="true">
-                            <template #body="{ data }">
-                                <div class="flex align-items-center gap-2">
-                                    <img
-                                        :alt="data.title"
-                                        :src="`${data.image.path}`"
-                                        style="width: 48px"
-                                    />
-                                    <span>{{ data.title }}</span>
-                                </div>
-                            </template>
-                        </Column>
-                        <Column header="Status" field="status" :sortable="true" />
-                        <Column header="Rating" field="rating" :sortable="true" />
-                        <Column header="Episodes" field="episodes" :sortable="true" />
-                        <Column :exportable="false" style="min-width: 8rem">
-                            <template #body="slotProps">
-                                <Link
-                                    :href="route('anime.show', slotProps.data.id)"
-                                    target="_blank"
-                                >
-                                    <Button
-                                        icon="pi pi-pencil"
-                                        outlined
-                                        rounded
-                                        class="mr-2"
-                                    />
-                                </Link>
-
-                                <Button
-                                    icon="pi pi-trash"
-                                    outlined
-                                    rounded
-                                    severity="danger"
-                                    @click="console.log(slotProps.data)"
-                                />
-                            </template>
-                        </Column>
-                    </DataTable>
-
-                    <Modal :show="showAddModal" @close="showAddModal = false">
-                        <AddAnimeForm @added="showAddModal = false" />
-                    </Modal>
-                </div>
-            </div>
+        <div class="sm:p-6 lg:p-8">
+            <DataTable :pagination="pagination" />
         </div>
     </AuthenticatedLayout>
 </template>
diff --git a/src/resources/js/Pages/Anime/Partials/AddAnimeForm.vue b/src/resources/js/Pages/Anime/Partials/AddAnimeForm.vue
index ac464c36..2bb77caf 100644
--- a/src/resources/js/Pages/Anime/Partials/AddAnimeForm.vue
+++ b/src/resources/js/Pages/Anime/Partials/AddAnimeForm.vue
@@ -4,9 +4,8 @@ import InputLabel from '@/Components/InputLabel.vue';
 import InputError from '@/Components/InputError.vue';
 import PrimaryButton from '@/Components/PrimaryButton.vue';
 import { useForm, usePage } from '@inertiajs/vue3';
-import { useToast } from 'vue-toast-notification';
-import 'vue-toast-notification/dist/theme-sugar.css';
 import { ScrapeResult } from '@/types/pusher/types';
+import { useToast } from 'primevue/usetoast';
 
 const page = usePage();
 const toast = useToast();
@@ -24,25 +23,40 @@ const addAnime = () => {
         onSuccess: () => {
             const channelName = `scraper.${page.props.auth?.user?.id}`;
 
-            toast.info(page.props.flash.message, { position: 'bottom' });
+            toast.add({
+                summary: page.props.flash.message,
+            });
+
             emit('added', form.url);
 
             window.echo
                 .private(channelName)
                 .listen('.scrape.result', (result: ScrapeResult) => {
-                    toast.info(result.message, {
-                        position: 'bottom',
-                        type: result.type,
+                    toast.add({
+                        summary: result.message,
+                        severity: result.type,
+                        closable: true,
                     });
+
                     window.echo.leave(channelName);
                 })
                 .error(() => {
-                    toast.error('Error while establishing Pusher connection', {
-                        position: 'bottom',
+                    toast.add({
+                        summary: 'Error while establishing Pusher connection',
+                        severity: 'error',
+                        closable: true,
                     });
+
                     window.echo.leave(channelName);
                 });
         },
+        onError: (error) => {
+            toast.add({
+                summary: error?.url ?? 'Unexpected error',
+                severity: 'error',
+                closable: true,
+            });
+        },
         onFinish: () => {
             form.reset();
         },
@@ -77,6 +91,8 @@ const addAnime = () => {
             <div class="flex items-center gap-4">
                 <PrimaryButton :disabled="form.processing">Add</PrimaryButton>
             </div>
+
+            <Toast position="bottom-center" />
         </form>
     </section>
 </template>
diff --git a/src/resources/js/Pages/Anime/Partials/AddMethodModal.vue b/src/resources/js/Pages/Anime/Partials/AddMethodModal.vue
new file mode 100644
index 00000000..b3371829
--- /dev/null
+++ b/src/resources/js/Pages/Anime/Partials/AddMethodModal.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import Dialog from 'primevue/dialog';
+import Button from 'primevue/button';
+</script>
+
+<template>
+    <Dialog>
+        <Button label="Scrape" icon="pi pi-external-link" />
+        <Button label="Regular" icon="pi pi-external-link" />
+    </Dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/resources/js/Pages/Anime/Partials/DataTable.vue b/src/resources/js/Pages/Anime/Partials/DataTable.vue
new file mode 100644
index 00000000..d9399238
--- /dev/null
+++ b/src/resources/js/Pages/Anime/Partials/DataTable.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import DataTable, { DataTablePageEvent } from 'primevue/datatable';
+import Toolbar from 'primevue/toolbar';
+import { Link, router } from '@inertiajs/vue3';
+import Button from 'primevue/button';
+import Column from 'primevue/column';
+import Modal from '@/Components/Modal.vue';
+import AddAnimeForm from '@/Pages/Anime/Partials/AddAnimeForm.vue';
+import { AnimePagination } from '@/types/anime/types';
+
+defineProps<{
+    pagination: AnimePagination;
+}>();
+
+const showDialog = ref<boolean>(false);
+const perPageOptions: number[] = [20, 50, 100];
+const styles = {
+    paginator: {
+        current: {
+            class: ['text-gray-600 dark:text-white'],
+        },
+    },
+};
+
+const openModal = () => {
+    showDialog.value = true;
+};
+
+const handleUpdate = (event: DataTablePageEvent) => {
+    router.get(
+        route('anime.index'),
+        { page: event.page + 1, per_page: event.rows },
+        { preserveScroll: true }
+    );
+};
+</script>
+
+<template>
+    <div>
+        <Toolbar class="bg-white dark:bg-dark shadow mb-2">
+            <template #start>
+                <Button
+                    label="Add anime"
+                    icon="pi pi-plus"
+                    severity="success"
+                    @click="openModal"
+                />
+            </template>
+        </Toolbar>
+
+        <div class="shadow-lg">
+            <DataTable
+                paginator
+                lazy
+                :first="(pagination.current_page - 1) * pagination.per_page"
+                :value="pagination.data"
+                :rows="pagination.per_page"
+                :rows-per-page-options="perPageOptions"
+                :total-records="pagination.total"
+                :pt="styles"
+                paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"
+                current-page-report-template="{first} to {last} of {totalRecords}"
+                @page="handleUpdate"
+            >
+                <Column header="Title" field="title" :sortable="true" />
+                <Column header="Status" field="status" :sortable="true" />
+                <Column header="Rating" field="rating" :sortable="true" />
+                <Column header="Episodes" field="episodes" :sortable="true" />
+                <Column :exportable="false" style="min-width: 8rem">
+                    <template #body="slotProps">
+                        <Link
+                            :href="route('anime.show', slotProps.data.id)"
+                            target="_blank"
+                        >
+                            <Button
+                                icon="pi pi-pencil"
+                                outlined
+                                rounded
+                                severity="success"
+                                class="mr-2"
+                            />
+                        </Link>
+
+                        <Button
+                            icon="pi pi-trash"
+                            outlined
+                            rounded
+                            severity="danger"
+                            @click="console.log(slotProps.data)"
+                        />
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+
+        <Modal :show="showDialog" @close="showDialog = false">
+            <AddAnimeForm @added="console.log(123)" />
+        </Modal>
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/src/resources/js/Pages/Anime/Show.vue b/src/resources/js/Pages/Anime/Show.vue
index eb17f63f..2de01dbd 100644
--- a/src/resources/js/Pages/Anime/Show.vue
+++ b/src/resources/js/Pages/Anime/Show.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-import { AnimeWithRelations } from '@/types/anime/models';
+import { AnimeWithRelations } from '@/types/anime/types';
 import { computed } from 'vue';
 import { Head } from '@inertiajs/vue3';
 import ExternalLink from '@/Components/ExternalLink.vue';
diff --git a/src/resources/js/Pages/Dashboard/Dashboard.vue b/src/resources/js/Pages/Dashboard/Dashboard.vue
index bc1df8a5..92c2405d 100644
--- a/src/resources/js/Pages/Dashboard/Dashboard.vue
+++ b/src/resources/js/Pages/Dashboard/Dashboard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import { Head } from '@inertiajs/vue3';
-import { AnimePerDomain, AnimeWithRelations } from '@/types/anime/models';
+import { AnimePerDomain, AnimeWithRelations } from '@/types/anime/types';
 import StatisticCards from '@/Pages/Dashboard/Partials/StatisticCards.vue';
 import Carousel from '@/Components/Carousel.vue';
 import Charts from '@/Pages/Dashboard/Partials/Charts.vue';
diff --git a/src/resources/js/Pages/Dashboard/Partials/CountPerDomain.vue b/src/resources/js/Pages/Dashboard/Partials/CountPerDomain.vue
index de3ef220..44b2d1c4 100644
--- a/src/resources/js/Pages/Dashboard/Partials/CountPerDomain.vue
+++ b/src/resources/js/Pages/Dashboard/Partials/CountPerDomain.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import Chart from '@/Components/Chart.vue';
 import { computed, inject } from 'vue';
-import { AnimePerDomain } from '@/types/anime/models';
+import { AnimePerDomain } from '@/types/anime/types';
 
-const animePerDomain = inject<AnimePerDomain>('animePerDomain');
+const animePerDomain = inject<AnimePerDomain>('animePerDomain') as object;
 
 const data = computed(() => ({
     labels: Object.keys(animePerDomain),
     datasets: [
         {
-            label: 'Sales',
+            label: 'Anime per domain',
             data: Object.values(animePerDomain),
             backgroundColor: [
                 'rgba(255, 159, 64, 0.2)',
diff --git a/src/resources/js/Pages/Profile/Partials/IntegrationList.vue b/src/resources/js/Pages/Profile/Partials/IntegrationList.vue
index 64502908..93bd6d1f 100644
--- a/src/resources/js/Pages/Profile/Partials/IntegrationList.vue
+++ b/src/resources/js/Pages/Profile/Partials/IntegrationList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TelegramLoginWidget from '@/Components/Telegram/TelegramLoginWidget.vue';
+import TelegramLoginWidget from '@/Components/TelegramLoginWidget.vue';
 import { TelegramUser } from '@/types/telegram/types';
 import { router, usePage } from '@inertiajs/vue3';
 import { computed } from 'vue';
@@ -9,7 +9,9 @@ const page = usePage();
 const telegramUser = computed(() => page.props.auth.user.telegram_user);
 
 const handleTelegramLogin = (user: TelegramUser) => {
-    router.post(route('telegram.assign', user), undefined, {
+    const payload = { ...user };
+
+    router.post(route('telegram.assign'), payload, {
         preserveScroll: true,
     });
 };
@@ -41,7 +43,7 @@ const revokeTelegramAccount = () => {
 
                 <TelegramLoginWidget
                     v-if="!telegramUser"
-                    :callback-handler="handleTelegramLogin"
+                    :callback="handleTelegramLogin"
                 />
 
                 <div v-else class="flex flex-col">
@@ -51,8 +53,8 @@ const revokeTelegramAccount = () => {
                     </p>
 
                     <DangerButton @click="revokeTelegramAccount"
-                        >Revoke Telegram account</DangerButton
-                    >
+                        >Revoke Telegram account
+                    </DangerButton>
                 </div>
             </div>
         </div>
diff --git a/src/resources/js/app.ts b/src/resources/js/app.ts
index 4cac56de..24b28ff6 100644
--- a/src/resources/js/app.ts
+++ b/src/resources/js/app.ts
@@ -7,6 +7,9 @@ import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
 import { HasRolePlugin } from '@/plugins/user/authorize';
 import PrimeVue from 'primevue/config';
+import Tailwind from 'primevue/passthrough/tailwind';
+import ToastService from 'primevue/toastservice';
+import Toast from 'primevue/toast';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Anilibrary';
 
@@ -22,7 +25,13 @@ createInertiaApp({
             .use(plugin)
             .use(ZiggyVue, Ziggy)
             .use(HasRolePlugin)
-            .use(PrimeVue)
+            .use(PrimeVue, {
+                ripple: true,
+                pt: Tailwind,
+                ptOptions: { mergeProps: false },
+            })
+            .use(ToastService)
+            .component('Toast', Toast)
             .mount(el);
     },
     progress: {
diff --git a/src/resources/js/bootstrap.ts b/src/resources/js/bootstrap.ts
index 5c67eff7..669e4aae 100644
--- a/src/resources/js/bootstrap.ts
+++ b/src/resources/js/bootstrap.ts
@@ -18,6 +18,7 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  * allows your team to easily build robust real-time web applications.
  */
 
+// @ts-expect-error Need to resolve problem with Pusher instance
 window.pusher = Pusher;
 window.echo = new Echo({
     broadcaster: 'pusher',
diff --git a/src/resources/js/tests/Components/TelegramLoginWidget.test.ts b/src/resources/js/tests/Components/TelegramLoginWidget.test.ts
new file mode 100644
index 00000000..31a05350
--- /dev/null
+++ b/src/resources/js/tests/Components/TelegramLoginWidget.test.ts
@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it, vitest } from 'vitest';
+import TelegramLoginWidget from '../../Components/TelegramLoginWidget.vue';
+import { RequestAccess, WidgetSize } from '@/types/telegram/enums';
+
+describe('TelegramLoginWidget test (TelegramLoginWidget.vue)', () => {
+    it('Renders correctly', async () => {
+        const wrapper = mount(TelegramLoginWidget);
+        expect(wrapper.exists()).toBeTruthy();
+
+        const div = wrapper.find({ ref: 'telegramWidget' });
+        expect(div.exists()).toBeTruthy();
+
+        await wrapper.vm.$nextTick();
+
+        const script = div.element.querySelector('script');
+        expect(script).toBeTruthy();
+        expect(script!.hasAttribute('async')).toBeTruthy();
+    });
+
+    it('Creates login widget with default props', async () => {
+        const wrapper = mount(TelegramLoginWidget);
+
+        const div = wrapper.find({ ref: 'telegramWidget' }).element;
+
+        await wrapper.vm.$nextTick();
+
+        const script = div.querySelector('script');
+        expect(script!.getAttribute('data-telegram-login')).toBe('anilibrary_bot');
+        expect(script!.getAttribute('data-size')).toBe(WidgetSize.Medium);
+        expect(script!.getAttribute('data-radius')).toBe('14');
+        expect(script!.getAttribute('data-userpic')).toBe('false');
+        expect(script!.getAttribute('data-request-access')).toBe(RequestAccess.Write);
+    });
+
+    it('Creates login widget with redirect props', async () => {
+        const url = '/redirect-url';
+
+        global.route = vitest.fn().mockReturnValue(url);
+
+        const wrapper = mount(TelegramLoginWidget, {
+            props: {
+                type: 'redirect',
+                redirectUrl: url,
+            },
+        });
+
+        const div = wrapper.find({ ref: 'telegramWidget' }).element;
+
+        await wrapper.vm.$nextTick();
+
+        const script = div.querySelector('script');
+        expect(script!.getAttribute('data-auth-url')).toBe(url);
+    });
+
+    it('Calls the callback on authentication', async () => {
+        const callbackMock = vitest.fn();
+        window.onTelegramAuth = callbackMock;
+
+        const wrapper = mount(TelegramLoginWidget, {
+            props: {
+                type: 'callback',
+                callback: callbackMock,
+            },
+        });
+
+        const div = wrapper.find({ ref: 'telegramWidget' }).element;
+
+        await wrapper.vm.$nextTick();
+
+        const script = div.querySelector('script');
+        expect(script!.getAttribute('data-onauth')).toBe('onTelegramAuth(user)');
+    });
+});
diff --git a/src/resources/js/tests/Components/ThemeSwitcher.test.ts b/src/resources/js/tests/Components/ThemeSwitcher.test.ts
new file mode 100644
index 00000000..048acb07
--- /dev/null
+++ b/src/resources/js/tests/Components/ThemeSwitcher.test.ts
@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import ThemeSwitcher from '@/Components/ThemeSwitcher.vue';
+
+describe('ThemeSwitcher test (ThemeSwitcher.vue)', () => {
+    it('Toggles dark mode when button is clicked', async () => {
+        const wrapper = mount(ThemeSwitcher);
+
+        expect(wrapper.exists()).toBeTruthy();
+
+        // By default regular theme is active
+        expect(wrapper.vm.isDark).toBeFalsy();
+
+        await wrapper.find('button').trigger('click');
+
+        // By pressing button dark theme must be active
+        expect(wrapper.vm.isDark).toBeTruthy();
+
+        await wrapper.find('button').trigger('click');
+
+        // By clicking again regular theme must be active
+        expect(wrapper.vm.isDark).toBeFalsy();
+    });
+});
diff --git a/src/resources/js/tests/Layouts/AuthenticatedLayout.test.ts b/src/resources/js/tests/Layouts/AuthenticatedLayout.test.ts
index e1c0148c..43ba27c2 100644
--- a/src/resources/js/tests/Layouts/AuthenticatedLayout.test.ts
+++ b/src/resources/js/tests/Layouts/AuthenticatedLayout.test.ts
@@ -8,7 +8,8 @@ import { Ziggy } from '@/tests/mocks/ziggy.mock';
 import NavLink from '@/Components/NavLink.vue';
 
 vi.mock('@inertiajs/vue3', async () => {
-    const actual = await vi.importActual('@inertiajs/vue3');
+    const actual =
+        await vi.importActual<typeof import('@inertiajs/vue3')>('@inertiajs/vue3');
     return {
         ...actual,
         usePage: vi.fn(),
@@ -35,7 +36,7 @@ afterAll(() => {
     vi.clearAllMocks();
 });
 
-describe('AuthenticatedLayout test', () => {
+describe('AuthenticatedLayout test (AuthenticatedLayout.vue)', () => {
     config.global.plugins = [[ZiggyVue, Ziggy], [HasRolePlugin]];
 
     it('Invitation link must not be rendered if user is not owner', () => {
diff --git a/src/resources/js/tests/plugins/user/authorize.test.ts b/src/resources/js/tests/plugins/user/authorize.test.ts
index 54d0c144..c13b271e 100644
--- a/src/resources/js/tests/plugins/user/authorize.test.ts
+++ b/src/resources/js/tests/plugins/user/authorize.test.ts
@@ -2,10 +2,14 @@ import { describe, expect, it, vi } from 'vitest';
 import { usePage } from '@inertiajs/vue3';
 import { useHasRole } from '@/plugins/user/authorize';
 
-vi.mock('@inertiajs/vue3', () => ({
-    ...vi.importActual('@inertiajs/vue3'),
-    usePage: vi.fn(),
-}));
+vi.mock('@inertiajs/vue3', async () => {
+    const actual =
+        await vi.importActual<typeof import('@inertiajs/vue3')>('@inertiajs/vue3');
+    return {
+        ...actual,
+        usePage: vi.fn(),
+    };
+});
 
 const mockedUsePage = vi.mocked(usePage);
 const mockedData = {
diff --git a/src/resources/js/types/anime/props.ts b/src/resources/js/types/anime/props.ts
deleted file mode 100644
index 426507f6..00000000
--- a/src/resources/js/types/anime/props.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { AnimeWithRelations } from '@/types/anime/models';
-
-interface LaravelPagination {
-    current_page: number;
-    first_page_url: string;
-    last_page_url: string;
-    from: number;
-    last_page: number;
-    per_page: number;
-    next_page_url?: string;
-    prev_page_url?: string;
-    to: number;
-    total: number;
-}
-
-export interface IndexProps extends LaravelPagination {
-    data: AnimeWithRelations[];
-}
diff --git a/src/resources/js/types/anime/models.ts b/src/resources/js/types/anime/types.ts
similarity index 83%
rename from src/resources/js/types/anime/models.ts
rename to src/resources/js/types/anime/types.ts
index 1162f1dc..3c8a050a 100644
--- a/src/resources/js/types/anime/models.ts
+++ b/src/resources/js/types/anime/types.ts
@@ -1,3 +1,5 @@
+import { Pagination } from '@/types';
+
 export interface Image {
     path: string;
 }
@@ -34,6 +36,10 @@ export interface AnimeWithRelations extends Anime {
     genres: Genre[];
 }
 
+export interface AnimePagination extends Pagination {
+    data: Anime[];
+}
+
 export interface AnimePerDomain {
     [key: string]: number;
 }
diff --git a/src/resources/js/types/index.d.ts b/src/resources/js/types/index.d.ts
index 84ee8720..e2c4e830 100644
--- a/src/resources/js/types/index.d.ts
+++ b/src/resources/js/types/index.d.ts
@@ -16,6 +16,19 @@ export interface User {
     telegram_user: TelegramUser;
 }
 
+export interface Pagination {
+    current_page: number;
+    first_page_url: string;
+    last_page_url: string;
+    from: number;
+    last_page: number;
+    per_page: number;
+    next_page_url?: string;
+    prev_page_url?: string;
+    to: number;
+    total: number;
+}
+
 export type PageProps<T extends Record<string, unknown> = Record<string, unknown>> = T & {
     auth: {
         user: User;
diff --git a/src/resources/js/types/telegram/enums.ts b/src/resources/js/types/telegram/enums.ts
new file mode 100644
index 00000000..bc81d676
--- /dev/null
+++ b/src/resources/js/types/telegram/enums.ts
@@ -0,0 +1,10 @@
+export enum WidgetSize {
+    Large = 'large',
+    Medium = 'medium',
+    Small = 'small',
+}
+
+export enum RequestAccess {
+    Write = 'write',
+    Read = 'read',
+}
diff --git a/src/resources/js/types/telegram/types.ts b/src/resources/js/types/telegram/types.ts
index 06bfea90..f34d3fa5 100644
--- a/src/resources/js/types/telegram/types.ts
+++ b/src/resources/js/types/telegram/types.ts
@@ -1,14 +1,3 @@
-export enum WidgetSize {
-    Large = 'large',
-    Medium = 'medium',
-    Small = 'small',
-}
-
-export enum RequestAccess {
-    Write = 'write',
-    Read = 'read',
-}
-
 export interface TelegramUser {
     id: number;
     first_name?: string;
@@ -19,14 +8,4 @@ export interface TelegramUser {
     hash: string;
 }
 
-export interface TelegramWidgetProps {
-    botName?: string;
-    size?: WidgetSize;
-    radius?: number;
-    showUserPic?: boolean;
-    requestAccess?: RequestAccess;
-    callbackHandler: (user: TelegramUser) => void;
-    redirectUrl?: string;
-}
-
 export declare function onTelegramAuth(user: TelegramUser): void;
diff --git a/src/tests/Feature/Http/Controllers/Anime/AnimeControllerTest.php b/src/tests/Feature/Http/Controllers/Anime/AnimeControllerTest.php
index a08b317d..3cd9c822 100644
--- a/src/tests/Feature/Http/Controllers/Anime/AnimeControllerTest.php
+++ b/src/tests/Feature/Http/Controllers/Anime/AnimeControllerTest.php
@@ -42,7 +42,7 @@ public function testCanViewIndexPageWithPagination(): void
                                      ->has('pagination')
                                      ->has('pagination.next_page_url')
                                      ->has('pagination.data', 20)
-                                     ->has('pagination.data.0', fn(Assert $page) => $page->has('image')->etc())
+                                     ->has('pagination.data.0', fn(Assert $page) => $page->etc())
         );
     }
 
diff --git a/src/tsconfig.json b/src/tsconfig.json
index 39c12667..3c8100d5 100644
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -1,19 +1,26 @@
 {
     "compilerOptions": {
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "target": "ESNext",
         "allowJs": true,
+        "resolveJsonModule": true,
         "module": "ESNext",
         "moduleResolution": "bundler",
-        "jsx": "preserve",
         "strict": true,
+        "noUncheckedIndexedAccess": true,
         "isolatedModules": true,
-        "target": "ESNext",
-        "esModuleInterop": true,
+        "jsx": "preserve",
         "forceConsistentCasingInFileNames": true,
         "noEmit": true,
-        "skipLibCheck": true,
         "paths": {
             "@/*": ["./resources/js/*"]
         }
     },
-    "include": ["resources/js/**/*.ts", "resources/js/**/*.d.ts", "resources/js/**/*.vue"]
+    "include": [
+        "resources/js/**/*.ts",
+        "resources/js/**/*.d.ts",
+        "resources/js/**/*.vue"
+    ],
+    "exclude": ["resources/js/tests"]
 }