From 5e6670a0d3e84887b5edd9fb9a6ce6c6ba0a96ab Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 8 Mar 2024 12:48:13 +0100
Subject: [PATCH 01/79] updated Composer dependencies

---
 composer.lock | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/composer.lock b/composer.lock
index d8c78419..f28e2899 100644
--- a/composer.lock
+++ b/composer.lock
@@ -8355,16 +8355,16 @@
         },
         {
             "name": "jean85/pretty-package-versions",
-            "version": "2.0.5",
+            "version": "2.0.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/Jean85/pretty-package-versions.git",
-                "reference": "ae547e455a3d8babd07b96966b17d7fd21d9c6af"
+                "reference": "f9fdd29ad8e6d024f52678b570e5593759b550b4"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/Jean85/pretty-package-versions/zipball/ae547e455a3d8babd07b96966b17d7fd21d9c6af",
-                "reference": "ae547e455a3d8babd07b96966b17d7fd21d9c6af",
+                "url": "https://api.github.com/repos/Jean85/pretty-package-versions/zipball/f9fdd29ad8e6d024f52678b570e5593759b550b4",
+                "reference": "f9fdd29ad8e6d024f52678b570e5593759b550b4",
                 "shasum": ""
             },
             "require": {
@@ -8372,9 +8372,9 @@
                 "php": "^7.1|^8.0"
             },
             "require-dev": {
-                "friendsofphp/php-cs-fixer": "^2.17",
+                "friendsofphp/php-cs-fixer": "^3.2",
                 "jean85/composer-provided-replaced-stub-package": "^1.0",
-                "phpstan/phpstan": "^0.12.66",
+                "phpstan/phpstan": "^1.4",
                 "phpunit/phpunit": "^7.5|^8.5|^9.4",
                 "vimeo/psalm": "^4.3"
             },
@@ -8408,9 +8408,9 @@
             ],
             "support": {
                 "issues": "https://github.com/Jean85/pretty-package-versions/issues",
-                "source": "https://github.com/Jean85/pretty-package-versions/tree/2.0.5"
+                "source": "https://github.com/Jean85/pretty-package-versions/tree/2.0.6"
             },
-            "time": "2021-10-08T21:21:46+00:00"
+            "time": "2024-03-08T09:58:59+00:00"
         },
         {
             "name": "larastan/larastan",

From c405664bcf47ed40c821664ea940d1f89083c1c7 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 8 Mar 2024 12:48:16 +0100
Subject: [PATCH 02/79] updated npm dependencies

---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b3b1e84c..6118f339 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2310,9 +2310,9 @@
             "dev": true
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.696",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.696.tgz",
-            "integrity": "sha512-SOr0bHP52OvYg2chCsz/0+FUSMGFm8L8HKwPpx3cbwRY24EOemVJtbgTm+IFO8LzhcnPy+hXmTq7ZcZ8uUuaYg==",
+            "version": "1.4.698",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.698.tgz",
+            "integrity": "sha512-f9iZD1t3CLy1AS6vzM5EKGa6p9pRcOeEFXRFbaG2Ta+Oe7MkfRQ3fsvPYidzHe1h4i0JvIvpcY55C+B6BZNGtQ==",
             "dev": true
         },
         "node_modules/emoji-regex": {

From cf7f58489e6d2dc0d23ac5a215c9358f95659bbe Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 8 Mar 2024 19:43:34 +0100
Subject: [PATCH 03/79] added basic layout and router skeleton

---
 .../Controllers/Api/CategoryController.php    | 87 +++++++++++++++++++
 app/Http/Kernel.php                           |  2 +-
 package-lock.json                             | 42 +++++++++
 package.json                                  |  1 +
 .../js/React/Core/AuthenticatedLayout.tsx     | 18 ++++
 resources/js/React/Core/Breadcrumbs.tsx       | 31 +++++++
 resources/js/React/Core/router.tsx            | 28 ++++++
 resources/js/React/Hooks/useBreadcrumbs.ts    | 10 +++
 .../Pages/Categories/CategoriesIndex.tsx      | 16 ++++
 .../Categories/Loaders/categoriesLoader.ts    |  8 ++
 resources/js/React/app.tsx                    | 17 ++++
 resources/js/React/request.ts                 | 36 ++++++++
 resources/js/React/types/Breadcrumb.ts        |  7 ++
 resources/js/bootstrap.ts                     |  1 +
 resources/views/app_react.blade.php           | 23 +++++
 routes/api.php                                |  5 ++
 routes/web.php                                |  8 ++
 17 files changed, 339 insertions(+), 1 deletion(-)
 create mode 100644 app/Http/Controllers/Api/CategoryController.php
 create mode 100644 resources/js/React/Core/AuthenticatedLayout.tsx
 create mode 100644 resources/js/React/Core/Breadcrumbs.tsx
 create mode 100644 resources/js/React/Core/router.tsx
 create mode 100644 resources/js/React/Hooks/useBreadcrumbs.ts
 create mode 100644 resources/js/React/Pages/Categories/CategoriesIndex.tsx
 create mode 100644 resources/js/React/Pages/Categories/Loaders/categoriesLoader.ts
 create mode 100644 resources/js/React/app.tsx
 create mode 100644 resources/js/React/request.ts
 create mode 100644 resources/js/React/types/Breadcrumb.ts
 create mode 100644 resources/views/app_react.blade.php

diff --git a/app/Http/Controllers/Api/CategoryController.php b/app/Http/Controllers/Api/CategoryController.php
new file mode 100644
index 00000000..30fedd79
--- /dev/null
+++ b/app/Http/Controllers/Api/CategoryController.php
@@ -0,0 +1,87 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\StoreCategoryRequest;
+use App\Http\Requests\UpdateCategoryRequest;
+use App\Models\Category;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Support\Facades\Auth;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class CategoryController extends Controller
+{
+    public function __construct()
+    {
+        $this->authorizeResource(Category::class);
+    }
+
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(): JsonResponse
+    {
+        return response()->json([
+            'categories' => Auth::user()->categories()->withCount('feeds')->get(),
+            'canCreate' => Auth::user()->can('create', Category::class),
+        ]);
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create(): Response
+    {
+        return Inertia::render('Categories/Create', [
+            'category' => new Category(),
+        ]);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(StoreCategoryRequest $request): RedirectResponse
+    {
+        $validated = $request->validated();
+
+        Auth::user()->categories()->save(new Category($validated));
+
+        return redirect()->route('categories.index');
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(Category $category): Response
+    {
+        return Inertia::render('Categories/Edit', [
+            'category' => $category,
+            'canDelete' => Auth::user()->can('delete', $category),
+        ]);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(UpdateCategoryRequest $request, Category $category): RedirectResponse
+    {
+        $validated = $request->validated();
+
+        $category->update($validated);
+
+        return redirect()->route('categories.index');
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(Category $category): RedirectResponse
+    {
+        $category->delete();
+
+        return redirect()->route('categories.index');
+    }
+}
diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php
index 4eec4488..41a1e3ff 100644
--- a/app/Http/Kernel.php
+++ b/app/Http/Kernel.php
@@ -45,7 +45,7 @@ class Kernel extends HttpKernel
         ],
 
         'api' => [
-            // \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
+            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
             \Illuminate\Routing\Middleware\ThrottleRequests::class.':api',
             \Illuminate\Routing\Middleware\SubstituteBindings::class,
         ],
diff --git a/package-lock.json b/package-lock.json
index 6118f339..746711a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
                 "react": "^18.2.0",
                 "react-blurhash": "^0.3.0",
                 "react-dom": "^18.2.0",
+                "react-router-dom": "^6.22.3",
                 "slug": "^9.0.0",
                 "tailwindcss": "^3.3.1",
                 "typescript": "^5.2.2",
@@ -1122,6 +1123,15 @@
                 "node": ">=14"
             }
         },
+        "node_modules/@remix-run/router": {
+            "version": "1.15.3",
+            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+            "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+            "dev": true,
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
         "node_modules/@tailwindcss/forms": {
             "version": "0.5.7",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
@@ -5110,6 +5120,38 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/react-router": {
+            "version": "6.22.3",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+            "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+            "dev": true,
+            "dependencies": {
+                "@remix-run/router": "1.15.3"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8"
+            }
+        },
+        "node_modules/react-router-dom": {
+            "version": "6.22.3",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+            "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+            "dev": true,
+            "dependencies": {
+                "@remix-run/router": "1.15.3",
+                "react-router": "6.22.3"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8",
+                "react-dom": ">=16.8"
+            }
+        },
         "node_modules/read-cache": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 29a47387..88378b77 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
         "react": "^18.2.0",
         "react-blurhash": "^0.3.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.3",
         "slug": "^9.0.0",
         "tailwindcss": "^3.3.1",
         "typescript": "^5.2.2",
diff --git a/resources/js/React/Core/AuthenticatedLayout.tsx b/resources/js/React/Core/AuthenticatedLayout.tsx
new file mode 100644
index 00000000..91896adc
--- /dev/null
+++ b/resources/js/React/Core/AuthenticatedLayout.tsx
@@ -0,0 +1,18 @@
+import {Outlet} from 'react-router-dom';
+import Breadcrumbs from '@/React/Core/Breadcrumbs';
+
+const AuthenticatedLayout = () => {
+    return (
+        <>
+            <header className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 text-xl flex space-x-2">
+                <Breadcrumbs/>
+            </header>
+
+            <main className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
+                <Outlet/>
+            </main>
+        </>
+    );
+};
+
+export default AuthenticatedLayout;
diff --git a/resources/js/React/Core/Breadcrumbs.tsx b/resources/js/React/Core/Breadcrumbs.tsx
new file mode 100644
index 00000000..882665f3
--- /dev/null
+++ b/resources/js/React/Core/Breadcrumbs.tsx
@@ -0,0 +1,31 @@
+import {Link} from 'react-router-dom';
+import slug from 'slug';
+import {Fragment} from 'react';
+import useBreadcrumbs from '@/React/Hooks/useBreadcrumbs';
+import Breadcrumb from '@/React/types/Breadcrumb';
+
+const LinkBreadcrumb = ({breadcrumb}: { breadcrumb: Breadcrumb; }) => (
+    <div>
+        {breadcrumb.headline}
+    </div>
+);
+
+const TextBreadcrumb = ({breadcrumb}: { breadcrumb: Breadcrumb; }) => (
+    <Fragment>
+        <Link to={breadcrumb.pathname}>
+            {breadcrumb.headline}
+        </Link>
+
+        <div>/</div>
+    </Fragment>
+);
+
+export default function Breadcrumbs() {
+    const breadcrumbs = useBreadcrumbs();
+
+    return breadcrumbs.map((breadcrumb, index) =>
+        index === breadcrumbs.length - 1
+            ? <LinkBreadcrumb key={slug(breadcrumb.headline)} breadcrumb={breadcrumb}/>
+            : <TextBreadcrumb key={slug(breadcrumb.headline)} breadcrumb={breadcrumb}/>
+    );
+}
diff --git a/resources/js/React/Core/router.tsx b/resources/js/React/Core/router.tsx
new file mode 100644
index 00000000..3285acf3
--- /dev/null
+++ b/resources/js/React/Core/router.tsx
@@ -0,0 +1,28 @@
+import {createBrowserRouter} from 'react-router-dom';
+import categoriesLoader from '@/React/Pages/Categories/Loaders/categoriesLoader';
+import AuthenticatedLayout from '@/React/Core/AuthenticatedLayout';
+import CategoriesIndex from '@/React/Pages/Categories/CategoriesIndex';
+
+const router = createBrowserRouter([
+    {
+        path: '/react/',
+        element: <AuthenticatedLayout/>,
+        handle: {
+            title: 'Home',
+            headline: 'Home',
+        },
+        children: [
+            {
+                path: 'categories',
+                element: <CategoriesIndex/>,
+                loader: categoriesLoader,
+                handle: {
+                    title: 'Categories',
+                    headline: 'Categories',
+                },
+            },
+        ],
+    },
+]);
+
+export default router;
diff --git a/resources/js/React/Hooks/useBreadcrumbs.ts b/resources/js/React/Hooks/useBreadcrumbs.ts
new file mode 100644
index 00000000..444ea034
--- /dev/null
+++ b/resources/js/React/Hooks/useBreadcrumbs.ts
@@ -0,0 +1,10 @@
+import {useMatches} from 'react-router-dom';
+import Breadcrumb from '@/React/types/Breadcrumb';
+
+export default function useBreadcrumbs() {
+    const matches = useMatches();
+
+    return matches
+        .filter((match) => !!match.handle)
+        .map((match) => ({pathname: match.pathname, ...match.handle!})) as Breadcrumb[];
+}
diff --git a/resources/js/React/Pages/Categories/CategoriesIndex.tsx b/resources/js/React/Pages/Categories/CategoriesIndex.tsx
new file mode 100644
index 00000000..5087b5b1
--- /dev/null
+++ b/resources/js/React/Pages/Categories/CategoriesIndex.tsx
@@ -0,0 +1,16 @@
+import Category from '@/types/generated/Models/Category';
+import {useLoaderData} from 'react-router-dom';
+
+export default function CategoriesIndex() {
+    const categories = useLoaderData() as Category[];
+
+    return (
+        <div>
+            <div>
+                {categories.map((category) => (
+                    <div key={category.id}>{category.name}</div>
+                ))}
+            </div>
+        </div>
+    );
+}
diff --git a/resources/js/React/Pages/Categories/Loaders/categoriesLoader.ts b/resources/js/React/Pages/Categories/Loaders/categoriesLoader.ts
new file mode 100644
index 00000000..0204fad1
--- /dev/null
+++ b/resources/js/React/Pages/Categories/Loaders/categoriesLoader.ts
@@ -0,0 +1,8 @@
+import Category from '@/types/generated/Models/Category';
+import request from '@/React/request';
+
+export default async function categoriesLoader() {
+    const data = await request('/api/categories').json<{ categories: Category[]; canCreate: boolean; }>();
+
+    return data.categories;
+}
diff --git a/resources/js/React/app.tsx b/resources/js/React/app.tsx
new file mode 100644
index 00000000..e03f4ae8
--- /dev/null
+++ b/resources/js/React/app.tsx
@@ -0,0 +1,17 @@
+import {createRoot} from 'react-dom/client';
+import {RouterProvider} from 'react-router-dom';
+import router from '@/React/Core/router';
+import NProgress from 'nprogress';
+
+NProgress.configure({
+    showSpinner: false,
+});
+
+const App = () => {
+    return (
+        <RouterProvider router={router}/>
+    );
+};
+
+createRoot(document.getElementById('app')!)
+    .render(<App/>);
diff --git a/resources/js/React/request.ts b/resources/js/React/request.ts
new file mode 100644
index 00000000..ac73d962
--- /dev/null
+++ b/resources/js/React/request.ts
@@ -0,0 +1,36 @@
+import ky from 'ky';
+import NProgress from 'nprogress';
+import Cookies from 'js-cookie';
+
+const request = ky.extend({
+    headers: {
+        Accept: 'application/json',
+    },
+    hooks: {
+        beforeRequest: [
+            (request) => {
+                NProgress.start();
+
+                if (window.location.host === new URL(request.url).host) {
+                    request.headers.set('X-XSRF-TOKEN', Cookies.get('XSRF-TOKEN') ?? '');
+                }
+            },
+        ],
+        afterResponse: [
+            (request, options, response) => {
+                NProgress.done();
+
+                return response;
+            },
+        ],
+        beforeError: [
+            (error) => {
+                NProgress.done();
+
+                return error;
+            },
+        ],
+    },
+});
+
+export default request;
diff --git a/resources/js/React/types/Breadcrumb.ts b/resources/js/React/types/Breadcrumb.ts
new file mode 100644
index 00000000..bdef4cbd
--- /dev/null
+++ b/resources/js/React/types/Breadcrumb.ts
@@ -0,0 +1,7 @@
+type Breadcrumb = {
+    pathname: string;
+    title: string;
+    headline: string;
+};
+
+export default Breadcrumb;
diff --git a/resources/js/bootstrap.ts b/resources/js/bootstrap.ts
index 37406182..cfdf308e 100644
--- a/resources/js/bootstrap.ts
+++ b/resources/js/bootstrap.ts
@@ -1,6 +1,7 @@
 import ky from 'ky';
 import NProgress from 'nprogress';
 import Cookies from 'js-cookie';
+import 'nprogress/nprogress.css';
 
 window.ky = ky.extend({
     headers: {
diff --git a/resources/views/app_react.blade.php b/resources/views/app_react.blade.php
new file mode 100644
index 00000000..b4ec5e4b
--- /dev/null
+++ b/resources/views/app_react.blade.php
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark:[color-scheme:dark]">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="description" content="{{ __('welcome.headline', ['name' => config('app.name', 'Laravel')]) }}">
+
+        <title>{{ config('app.name', 'Laravel') }}</title>
+
+        @include('partials.favicon')
+
+        <!-- Fonts -->
+        <link rel="preconnect" href="https://fonts.bunny.net">
+        <link href="https://fonts.bunny.net/css?family=nunito-sans:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet" />
+
+        <!-- Scripts -->
+        @viteReactRefresh
+        @vite(['resources/js/React/app.tsx', 'resources/js/bootstrap.ts', 'resources/css/app.css'])
+    </head>
+    <body class="font-sans antialiased">
+        <div id="app"></div>
+    </body>
+</html>
diff --git a/routes/api.php b/routes/api.php
index 889937e1..c3c4b020 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\Api\CategoryController;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
@@ -17,3 +18,7 @@
 Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
     return $request->user();
 });
+
+Route::middleware('auth:sanctum')->group(function () {
+    Route::get('/categories', [CategoryController::class, 'index'])->name('categories.index');
+});
diff --git a/routes/web.php b/routes/web.php
index 4c573530..c575f10c 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -32,6 +32,14 @@
     ]);
 });
 
+Route::any('/react', function () {
+    return view('app_react');
+});
+
+Route::any('/react/{any}', function () {
+    return view('app_react');
+});
+
 Route::middleware('auth')->group(function () {
     Route::get('/dashboard', DashboardController::class)->name('dashboard');
 

From 778114422c79169905bff7edc54580723671d970 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 8 Mar 2024 20:43:13 +0100
Subject: [PATCH 04/79] refactored code

---
 resources/js/React/Core/Breadcrumbs.tsx | 53 ++++++++++++++++++++-----
 1 file changed, 42 insertions(+), 11 deletions(-)

diff --git a/resources/js/React/Core/Breadcrumbs.tsx b/resources/js/React/Core/Breadcrumbs.tsx
index 882665f3..494b9893 100644
--- a/resources/js/React/Core/Breadcrumbs.tsx
+++ b/resources/js/React/Core/Breadcrumbs.tsx
@@ -1,31 +1,62 @@
 import {Link} from 'react-router-dom';
 import slug from 'slug';
-import {Fragment} from 'react';
+import {Fragment, useEffect, useRef} from 'react';
 import useBreadcrumbs from '@/React/Hooks/useBreadcrumbs';
 import Breadcrumb from '@/React/types/Breadcrumb';
 
 const LinkBreadcrumb = ({breadcrumb}: { breadcrumb: Breadcrumb; }) => (
-    <div>
+    <li>
         {breadcrumb.headline}
-    </div>
+    </li>
 );
 
 const TextBreadcrumb = ({breadcrumb}: { breadcrumb: Breadcrumb; }) => (
     <Fragment>
-        <Link to={breadcrumb.pathname}>
-            {breadcrumb.headline}
-        </Link>
+        <li>
+            <Link to={breadcrumb.pathname} className="font-semibold text-violet-400 hover:text-violet-300 leading-tight transition">
+                {breadcrumb.headline}
+            </Link>
+        </li>
 
-        <div>/</div>
+        <li>
+            <svg
+                className="h-5 w-5 flex-shrink-0 stroke-current"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                aria-hidden="true"
+            >
+                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" strokeWidth=".5"/>
+            </svg>
+        </li>
     </Fragment>
 );
 
 export default function Breadcrumbs() {
     const breadcrumbs = useBreadcrumbs();
+    const breadcrumbsRef = useRef<HTMLDivElement>(null);
 
-    return breadcrumbs.map((breadcrumb, index) =>
-        index === breadcrumbs.length - 1
-            ? <LinkBreadcrumb key={slug(breadcrumb.headline)} breadcrumb={breadcrumb}/>
-            : <TextBreadcrumb key={slug(breadcrumb.headline)} breadcrumb={breadcrumb}/>
+    useEffect(() => {
+        setTimeout(() => {
+            breadcrumbsRef.current?.scrollTo({
+                top: 0,
+                left: breadcrumbsRef.current.getBoundingClientRect().right,
+                behavior: 'smooth',
+            });
+        }, 250);
+    }, []);
+
+    return (
+        <div className="overflow-y-hidden overflow-x-auto scrollbar-x-sm whitespace-nowrap" ref={breadcrumbsRef}>
+            <nav aria-label="Breadcrumbs" ref={breadcrumbsRef}>
+                <ol role="list" className="flex items-center space-x-2">
+                    {breadcrumbs.map((breadcrumb, index) =>
+                        index === breadcrumbs.length - 1
+                            ? <LinkBreadcrumb key={slug(breadcrumb.headline)} breadcrumb={breadcrumb}/>
+                            : <TextBreadcrumb key={slug(breadcrumb.headline)} breadcrumb={breadcrumb}/>
+                    )}
+                </ol>
+            </nav>
+        </div>
     );
 }

From c3e162535e62266c60359517f6c23c9236def428 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 8 Mar 2024 20:52:54 +0100
Subject: [PATCH 05/79] set page title properly

---
 resources/js/React/Core/AuthenticatedLayout.tsx | 11 ++++++++++-
 resources/js/React/types/MatchWithHandle.tsx    | 10 ++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/React/types/MatchWithHandle.tsx

diff --git a/resources/js/React/Core/AuthenticatedLayout.tsx b/resources/js/React/Core/AuthenticatedLayout.tsx
index 91896adc..686eff01 100644
--- a/resources/js/React/Core/AuthenticatedLayout.tsx
+++ b/resources/js/React/Core/AuthenticatedLayout.tsx
@@ -1,7 +1,16 @@
-import {Outlet} from 'react-router-dom';
+import {Outlet, useLocation, useMatches} from 'react-router-dom';
 import Breadcrumbs from '@/React/Core/Breadcrumbs';
+import {useEffect} from 'react';
+import MatchWithHandle from '@/React/types/MatchWithHandle';
 
 const AuthenticatedLayout = () => {
+    const location = useLocation();
+    const match = useMatches().find((match) => match.pathname === location.pathname) as MatchWithHandle;
+
+    useEffect(() => {
+        document.querySelector('title')!.textContent = match?.handle.title;
+    }, [location]);
+
     return (
         <>
             <header className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 text-xl flex space-x-2">
diff --git a/resources/js/React/types/MatchWithHandle.tsx b/resources/js/React/types/MatchWithHandle.tsx
new file mode 100644
index 00000000..49652cee
--- /dev/null
+++ b/resources/js/React/types/MatchWithHandle.tsx
@@ -0,0 +1,10 @@
+import {UIMatch} from 'react-router-dom';
+
+type MatchWithHandle = UIMatch & {
+    handle: {
+        headline: string;
+        title: string;
+    };
+};
+
+export default MatchWithHandle;

From 0561fd21714d192a8ab1ff1adecf4889a0e30636 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 9 Mar 2024 12:56:24 +0100
Subject: [PATCH 06/79] optimized category creation page

---
 .../Controllers/Api/CategoryController.php    |  4 +-
 lang/de.json                                  |  3 +-
 resources/js/Components/InputError.tsx        |  2 +-
 resources/js/Components/Modal/Modal.tsx       |  9 ++-
 .../js/React/Core/AuthenticatedLayout.tsx     |  4 +-
 resources/js/React/Core/Breadcrumbs.tsx       | 55 +++++++++++--------
 resources/js/React/Core/router.tsx            | 45 +++++++++++++--
 resources/js/React/Hooks/useBreadcrumbs.ts    |  9 ++-
 resources/js/React/Hooks/usePageModal.ts      | 31 +++++++++++
 .../Pages/Categories/CategoriesCreate.tsx     | 46 ++++++++++++++++
 .../Pages/Categories/CategoriesIndex.tsx      | 15 ++++-
 resources/js/React/Utils/wait.ts              |  5 ++
 resources/js/React/app.tsx                    | 11 +++-
 resources/js/React/types/RouteHandle.ts       |  7 +++
 resources/js/React/types/ValidationErrors.ts  |  3 +
 routes/api.php                                |  1 +
 routes/web.php                                |  4 ++
 17 files changed, 215 insertions(+), 39 deletions(-)
 create mode 100644 resources/js/React/Hooks/usePageModal.ts
 create mode 100644 resources/js/React/Pages/Categories/CategoriesCreate.tsx
 create mode 100644 resources/js/React/Utils/wait.ts
 create mode 100644 resources/js/React/types/RouteHandle.ts
 create mode 100644 resources/js/React/types/ValidationErrors.ts

diff --git a/app/Http/Controllers/Api/CategoryController.php b/app/Http/Controllers/Api/CategoryController.php
index 30fedd79..0c436af8 100644
--- a/app/Http/Controllers/Api/CategoryController.php
+++ b/app/Http/Controllers/Api/CategoryController.php
@@ -43,13 +43,13 @@ public function create(): Response
     /**
      * Store a newly created resource in storage.
      */
-    public function store(StoreCategoryRequest $request): RedirectResponse
+    public function store(StoreCategoryRequest $request): JsonResponse
     {
         $validated = $request->validated();
 
         Auth::user()->categories()->save(new Category($validated));
 
-        return redirect()->route('categories.index');
+        return response()->json();
     }
 
     /**
diff --git a/lang/de.json b/lang/de.json
index aff21ba3..836f2c89 100644
--- a/lang/de.json
+++ b/lang/de.json
@@ -111,5 +111,6 @@
     "Users": "Benutzer",
     "Delete user": "Benutzer löschen",
     "Do you really want to delete the user “:name”?": "Wollen Sie den Benutzer „:name” wirklich löschen?",
-    "Manage users": "Benutzer verwalten"
+    "Manage users": "Benutzer verwalten",
+    "Home": "Startseite"
 }
diff --git a/resources/js/Components/InputError.tsx b/resources/js/Components/InputError.tsx
index 4cc418d6..2318aed1 100644
--- a/resources/js/Components/InputError.tsx
+++ b/resources/js/Components/InputError.tsx
@@ -1,7 +1,7 @@
 export default function InputError({message, className = ''}: { message?: string; className?: string; }) {
     return message
         ? (
-            <p className={'text-sm text-red-600 dark:text-red-400 ' + className}>
+            <p className={'mt-2 text-sm text-red-600 dark:text-red-400 ' + className}>
                 {message}
             </p>
         )
diff --git a/resources/js/Components/Modal/Modal.tsx b/resources/js/Components/Modal/Modal.tsx
index ca302f4a..7f20e57b 100644
--- a/resources/js/Components/Modal/Modal.tsx
+++ b/resources/js/Components/Modal/Modal.tsx
@@ -4,12 +4,14 @@ import {Dialog, Transition} from '@headlessui/react';
 const Modal = (
     {
         children,
+        appear = false,
         show = false,
         maxWidth = '2xl',
         closeable = true,
         onClose = () => {},
     }: {
         children: ReactNode;
+        appear?: boolean;
         show?: boolean;
         maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
         closeable?: boolean;
@@ -35,7 +37,7 @@ const Modal = (
     }[maxWidth];
 
     return (
-        <Transition show={show} as={Fragment} leave="duration-200">
+        <Transition appear={appear} show={show} as={Fragment} leave="duration-200">
             <Dialog
                 as="div"
                 id="modal"
@@ -77,7 +79,7 @@ const Modal = (
 const ModalHeader = ({children}: { children: ReactNode; }) => {
     return (
         <div className="p-6">
-            <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100 pr-8">
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 pr-8">
                 {children}
             </h2>
         </div>
@@ -100,9 +102,12 @@ const ModalFooter = ({children}: { children: ReactNode; }) => {
     );
 };
 
+const modalLeaveDuration = 200;
+
 export {
     Modal,
     ModalHeader,
     ModalBody,
     ModalFooter,
+    modalLeaveDuration,
 };
diff --git a/resources/js/React/Core/AuthenticatedLayout.tsx b/resources/js/React/Core/AuthenticatedLayout.tsx
index 686eff01..27fa399e 100644
--- a/resources/js/React/Core/AuthenticatedLayout.tsx
+++ b/resources/js/React/Core/AuthenticatedLayout.tsx
@@ -2,13 +2,15 @@ import {Outlet, useLocation, useMatches} from 'react-router-dom';
 import Breadcrumbs from '@/React/Core/Breadcrumbs';
 import {useEffect} from 'react';
 import MatchWithHandle from '@/React/types/MatchWithHandle';
+import {useLaravelReactI18n} from 'laravel-react-i18n';
 
 const AuthenticatedLayout = () => {
+    const {t} = useLaravelReactI18n();
     const location = useLocation();
     const match = useMatches().find((match) => match.pathname === location.pathname) as MatchWithHandle;
 
     useEffect(() => {
-        document.querySelector('title')!.textContent = match?.handle.title;
+        document.querySelector('title')!.textContent = t(match?.handle.title);
     }, [location]);
 
     return (
diff --git a/resources/js/React/Core/Breadcrumbs.tsx b/resources/js/React/Core/Breadcrumbs.tsx
index 494b9893..6ebfdb5b 100644
--- a/resources/js/React/Core/Breadcrumbs.tsx
+++ b/resources/js/React/Core/Breadcrumbs.tsx
@@ -3,34 +3,43 @@ import slug from 'slug';
 import {Fragment, useEffect, useRef} from 'react';
 import useBreadcrumbs from '@/React/Hooks/useBreadcrumbs';
 import Breadcrumb from '@/React/types/Breadcrumb';
+import {useLaravelReactI18n} from 'laravel-react-i18n';
 
-const LinkBreadcrumb = ({breadcrumb}: { breadcrumb: Breadcrumb; }) => (
-    <li>
-        {breadcrumb.headline}
-    </li>
-);
+const LinkBreadcrumb = ({breadcrumb}: { breadcrumb: Breadcrumb; }) => {
+    const {t} = useLaravelReactI18n();
 
-const TextBreadcrumb = ({breadcrumb}: { breadcrumb: Breadcrumb; }) => (
-    <Fragment>
+    return (
         <li>
-            <Link to={breadcrumb.pathname} className="font-semibold text-violet-400 hover:text-violet-300 leading-tight transition">
-                {breadcrumb.headline}
-            </Link>
+            {t(breadcrumb.headline)}
         </li>
+    );
+};
 
-        <li>
-            <svg
-                className="h-5 w-5 flex-shrink-0 stroke-current"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                aria-hidden="true"
-            >
-                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" strokeWidth=".5"/>
-            </svg>
-        </li>
-    </Fragment>
-);
+const TextBreadcrumb = ({breadcrumb}: { breadcrumb: Breadcrumb; }) => {
+    const {t} = useLaravelReactI18n();
+
+    return (
+        <Fragment>
+            <li>
+                <Link to={breadcrumb.pathname} className="font-semibold text-violet-400 hover:text-violet-300 leading-tight transition">
+                    {t(breadcrumb.headline)}
+                </Link>
+            </li>
+
+            <li>
+                <svg
+                    className="h-5 w-5 flex-shrink-0 stroke-current"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    aria-hidden="true"
+                >
+                    <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" strokeWidth=".5"/>
+                </svg>
+            </li>
+        </Fragment>
+    );
+};
 
 export default function Breadcrumbs() {
     const breadcrumbs = useBreadcrumbs();
diff --git a/resources/js/React/Core/router.tsx b/resources/js/React/Core/router.tsx
index 3285acf3..41b128bd 100644
--- a/resources/js/React/Core/router.tsx
+++ b/resources/js/React/Core/router.tsx
@@ -1,16 +1,25 @@
-import {createBrowserRouter} from 'react-router-dom';
+import {createBrowserRouter, redirect} from 'react-router-dom';
 import categoriesLoader from '@/React/Pages/Categories/Loaders/categoriesLoader';
 import AuthenticatedLayout from '@/React/Core/AuthenticatedLayout';
 import CategoriesIndex from '@/React/Pages/Categories/CategoriesIndex';
+import CategoriesCreate from '@/React/Pages/Categories/CategoriesCreate';
+import request from '@/React/request';
+import {HTTPError} from 'ky';
+import ValidationErrors from '@/React/types/ValidationErrors';
+import Breadcrumb from '@/React/types/Breadcrumb';
+import RouteHandle from '@/React/types/RouteHandle';
+
+const Error = () => <div>An error occurred.</div>;
 
 const router = createBrowserRouter([
     {
-        path: '/react/',
+        path: '/react',
         element: <AuthenticatedLayout/>,
+        errorElement: <Error/>,
         handle: {
             title: 'Home',
             headline: 'Home',
-        },
+        } as RouteHandle,
         children: [
             {
                 path: 'categories',
@@ -19,7 +28,35 @@ const router = createBrowserRouter([
                 handle: {
                     title: 'Categories',
                     headline: 'Categories',
-                },
+                } as RouteHandle,
+                children: [
+                    {
+                        path: 'create',
+                        element: <CategoriesCreate/>,
+                        action: async ({params, request: req}) => {
+                            const formData = await req.formData();
+
+                            try {
+                                await request.post('/api/categories', {body: formData});
+                            } catch (exception) {
+                                const errorResponse = (exception as HTTPError).response;
+
+                                if (errorResponse.status !== 422) {
+                                    throw exception;
+                                }
+
+                                return (await errorResponse.json() as { errors: ValidationErrors; }).errors;
+                            }
+
+                            return null;
+                        },
+                        handle: {
+                            hide: true,
+                            title: 'Add category',
+                            headline: 'Add category',
+                        } as RouteHandle,
+                    },
+                ],
             },
         ],
     },
diff --git a/resources/js/React/Hooks/useBreadcrumbs.ts b/resources/js/React/Hooks/useBreadcrumbs.ts
index 444ea034..d5bcb7a3 100644
--- a/resources/js/React/Hooks/useBreadcrumbs.ts
+++ b/resources/js/React/Hooks/useBreadcrumbs.ts
@@ -1,10 +1,15 @@
 import {useMatches} from 'react-router-dom';
 import Breadcrumb from '@/React/types/Breadcrumb';
+import RouteHandle from '@/React/types/RouteHandle';
 
 export default function useBreadcrumbs() {
     const matches = useMatches();
 
     return matches
-        .filter((match) => !!match.handle)
-        .map((match) => ({pathname: match.pathname, ...match.handle!})) as Breadcrumb[];
+        .filter((match) => !!match.handle && !(match.handle as RouteHandle).hide)
+        .map((match) => {
+            const handle = match.handle as RouteHandle;
+
+            return {pathname: match.pathname, title: handle.title, headline: handle.headline} as Breadcrumb;
+        }) as Breadcrumb[];
 }
diff --git a/resources/js/React/Hooks/usePageModal.ts b/resources/js/React/Hooks/usePageModal.ts
new file mode 100644
index 00000000..c87f292e
--- /dev/null
+++ b/resources/js/React/Hooks/usePageModal.ts
@@ -0,0 +1,31 @@
+import {useNavigate} from 'react-router-dom';
+import {useEffect, useState} from 'react';
+import ValidationErrors from '@/React/types/ValidationErrors';
+import {modalLeaveDuration} from '@/Components/Modal/Modal';
+import wait from '@/React/Utils/wait';
+
+export default function usePageModal(errors: ValidationErrors | null, to: string) {
+    const [show, setShow] = useState(true);
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (errors !== null) {
+            return;
+        }
+
+        setShow(false);
+    }, [errors]);
+
+    useEffect(() => {
+        if (!show) {
+            void wait(modalLeaveDuration).then(() => navigate(to));
+        }
+    }, [show]);
+
+    const handleClose = () => setShow(false);
+
+    return {
+        show,
+        handleClose,
+    };
+}
diff --git a/resources/js/React/Pages/Categories/CategoriesCreate.tsx b/resources/js/React/Pages/Categories/CategoriesCreate.tsx
new file mode 100644
index 00000000..d541339b
--- /dev/null
+++ b/resources/js/React/Pages/Categories/CategoriesCreate.tsx
@@ -0,0 +1,46 @@
+import {Modal, ModalBody, ModalHeader} from '@/Components/Modal/Modal';
+import {Form, useActionData} from 'react-router-dom';
+import TextInput from '@/Components/TextInput';
+import usePageModal from '@/React/Hooks/usePageModal';
+import ValidationErrors from '@/React/types/ValidationErrors';
+import InputError from '@/Components/InputError';
+import {PrimaryButton} from '@/Components/Button';
+import InputLabel from '@/Components/InputLabel';
+import React from 'react';
+import {useLaravelReactI18n} from 'laravel-react-i18n';
+
+type CategoriesCreateValidationErrors = ValidationErrors & { name?: string; } | null;
+
+export default function CategoriesCreate() {
+    const {t} = useLaravelReactI18n();
+    const errors = useActionData() as CategoriesCreateValidationErrors;
+    const {show, handleClose} = usePageModal(errors, '/react/categories');
+
+    return (
+        <Modal appear show={show} onClose={handleClose}>
+            <ModalHeader>
+                {t('Add category')}
+            </ModalHeader>
+
+            <ModalBody>
+                <Form method="post" action="/react/categories/create">
+                    <div className="mb-4">
+                        <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
+                        <TextInput
+                            id="name"
+                            name="name"
+                            className="block w-full max-w-xl"
+                            required
+                            isFocused
+                        />
+                        <InputError message={errors?.name}/>
+                    </div>
+
+                    <PrimaryButton type="submit">
+                        {t('Save')}
+                    </PrimaryButton>
+                </Form>
+            </ModalBody>
+        </Modal>
+    );
+}
diff --git a/resources/js/React/Pages/Categories/CategoriesIndex.tsx b/resources/js/React/Pages/Categories/CategoriesIndex.tsx
index 5087b5b1..6919f1c3 100644
--- a/resources/js/React/Pages/Categories/CategoriesIndex.tsx
+++ b/resources/js/React/Pages/Categories/CategoriesIndex.tsx
@@ -1,16 +1,27 @@
 import Category from '@/types/generated/Models/Category';
-import {useLoaderData} from 'react-router-dom';
+import {Link, Outlet, useLoaderData} from 'react-router-dom';
+import {useLaravelReactI18n} from 'laravel-react-i18n';
+import Actions from '@/Components/Actions';
 
 export default function CategoriesIndex() {
     const categories = useLoaderData() as Category[];
+    const {t} = useLaravelReactI18n();
 
     return (
         <div>
-            <div>
+            <Actions>
+                <Link to="/react/categories/create" className="link-secondary">
+                    {t('Add category')}
+                </Link>
+            </Actions>
+
+            <div className="pt-4">
                 {categories.map((category) => (
                     <div key={category.id}>{category.name}</div>
                 ))}
             </div>
+
+            <Outlet/>
         </div>
     );
 }
diff --git a/resources/js/React/Utils/wait.ts b/resources/js/React/Utils/wait.ts
new file mode 100644
index 00000000..f50cf4b4
--- /dev/null
+++ b/resources/js/React/Utils/wait.ts
@@ -0,0 +1,5 @@
+export default function wait(duration: number): Promise<void> {
+    return new Promise<void>((resolve) => {
+        setTimeout(resolve, duration);
+    });
+}
diff --git a/resources/js/React/app.tsx b/resources/js/React/app.tsx
index e03f4ae8..35190782 100644
--- a/resources/js/React/app.tsx
+++ b/resources/js/React/app.tsx
@@ -2,6 +2,9 @@ import {createRoot} from 'react-dom/client';
 import {RouterProvider} from 'react-router-dom';
 import router from '@/React/Core/router';
 import NProgress from 'nprogress';
+import {LaravelReactI18nProvider} from 'laravel-react-i18n';
+import getBrowserLocale from '@/Utils/getBrowserLocale';
+import AppWithLoadedTranslations from '@/Components/AppWithLoadedTranslations';
 
 NProgress.configure({
     showSpinner: false,
@@ -9,7 +12,13 @@ NProgress.configure({
 
 const App = () => {
     return (
-        <RouterProvider router={router}/>
+        <LaravelReactI18nProvider
+            locale={getBrowserLocale()}
+            fallbackLocale="en"
+            files={import.meta.glob('/lang/*.json', {eager: true})}
+        >
+            <AppWithLoadedTranslations app={RouterProvider} router={router}/>
+        </LaravelReactI18nProvider>
     );
 };
 
diff --git a/resources/js/React/types/RouteHandle.ts b/resources/js/React/types/RouteHandle.ts
new file mode 100644
index 00000000..87d34629
--- /dev/null
+++ b/resources/js/React/types/RouteHandle.ts
@@ -0,0 +1,7 @@
+type RouteHandle = {
+    hide?: boolean;
+    title: string;
+    headline: string;
+};
+
+export default RouteHandle;
diff --git a/resources/js/React/types/ValidationErrors.ts b/resources/js/React/types/ValidationErrors.ts
new file mode 100644
index 00000000..fb577df0
--- /dev/null
+++ b/resources/js/React/types/ValidationErrors.ts
@@ -0,0 +1,3 @@
+type ValidationErrors = { [key: string]: string[]; };
+
+export default ValidationErrors;
diff --git a/routes/api.php b/routes/api.php
index c3c4b020..de555332 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -21,4 +21,5 @@
 
 Route::middleware('auth:sanctum')->group(function () {
     Route::get('/categories', [CategoryController::class, 'index'])->name('categories.index');
+    Route::post('/categories', [CategoryController::class, 'store'])->name('categories.store');
 });
diff --git a/routes/web.php b/routes/web.php
index c575f10c..36f7a3cf 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -40,6 +40,10 @@
     return view('app_react');
 });
 
+Route::any('/react/categories/create', function () {
+    return view('app_react');
+});
+
 Route::middleware('auth')->group(function () {
     Route::get('/dashboard', DashboardController::class)->name('dashboard');
 

From 2b3db08e8c424e06f164e527d0eb4ceb0f2072f5 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 9 Mar 2024 19:14:20 +0100
Subject: [PATCH 07/79] added the ability to edit categories

---
 .../Controllers/Api/CategoryController.php    |  8 +--
 resources/js/Components/LinkStack.tsx         | 12 +++--
 resources/js/Components/Modal/Modal.tsx       |  4 +-
 .../js/React/Core/AuthenticatedLayout.tsx     | 10 ++--
 resources/js/React/Core/router.tsx            | 36 +++++++++++--
 resources/js/React/Hooks/usePageModal.ts      |  7 ++-
 .../React/Pages/Categories/CategoriesEdit.tsx | 50 +++++++++++++++++++
 .../Pages/Categories/CategoriesIndex.tsx      | 42 +++++++++++++---
 .../Categories/Loaders/categoryLoader.ts      | 11 ++++
 routes/api.php                                |  3 +-
 routes/web.php                                |  4 ++
 11 files changed, 159 insertions(+), 28 deletions(-)
 create mode 100644 resources/js/React/Pages/Categories/CategoriesEdit.tsx
 create mode 100644 resources/js/React/Pages/Categories/Loaders/categoryLoader.ts

diff --git a/app/Http/Controllers/Api/CategoryController.php b/app/Http/Controllers/Api/CategoryController.php
index 0c436af8..13d23ec0 100644
--- a/app/Http/Controllers/Api/CategoryController.php
+++ b/app/Http/Controllers/Api/CategoryController.php
@@ -55,9 +55,9 @@ public function store(StoreCategoryRequest $request): JsonResponse
     /**
      * Show the form for editing the specified resource.
      */
-    public function edit(Category $category): Response
+    public function edit(Category $category): JsonResponse
     {
-        return Inertia::render('Categories/Edit', [
+        return response()->json([
             'category' => $category,
             'canDelete' => Auth::user()->can('delete', $category),
         ]);
@@ -66,13 +66,13 @@ public function edit(Category $category): Response
     /**
      * Update the specified resource in storage.
      */
-    public function update(UpdateCategoryRequest $request, Category $category): RedirectResponse
+    public function update(UpdateCategoryRequest $request, Category $category): JsonResponse
     {
         $validated = $request->validated();
 
         $category->update($validated);
 
-        return redirect()->route('categories.index');
+        return response()->json();
     }
 
     /**
diff --git a/resources/js/Components/LinkStack.tsx b/resources/js/Components/LinkStack.tsx
index 63926deb..3419d7f0 100644
--- a/resources/js/Components/LinkStack.tsx
+++ b/resources/js/Components/LinkStack.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import {ReactNode} from 'react';
 import Card from '@/Components/Card';
+import {Link} from 'react-router-dom';
 
 const LinkStack = ({children}: { children: ReactNode; }) => {
     return (
@@ -12,19 +13,22 @@ const LinkStack = ({children}: { children: ReactNode; }) => {
 
 const Item = (
     {
-        href,
+        to,
         children,
         className = '',
     }: {
-        href: string;
+        to: string;
         children: ReactNode;
         className?: string;
     }
 ) => {
     return (
-        <a href={href} className={clsx('px-4 py-3 hover:bg-gray-50 hover:dark:bg-gray-700 transition ease-in-out first:rounded-t-lg last:rounded-b-lg', className)}>
+        <Link
+            to={to}
+            className={clsx('px-4 py-3 hover:bg-gray-50 hover:dark:bg-gray-700 transition ease-in-out first:rounded-t-lg last:rounded-b-lg', className)}
+        >
             {children}
-        </a>
+        </Link>
     );
 };
 
diff --git a/resources/js/Components/Modal/Modal.tsx b/resources/js/Components/Modal/Modal.tsx
index 7f20e57b..0ee36344 100644
--- a/resources/js/Components/Modal/Modal.tsx
+++ b/resources/js/Components/Modal/Modal.tsx
@@ -22,7 +22,7 @@ const Modal = (
         document.body.style.overflowY = show ? 'hidden' : '';
     }, [show]);
 
-    const close = () => {
+    const handleClose = () => {
         if (closeable) {
             onClose();
         }
@@ -42,7 +42,7 @@ const Modal = (
                 as="div"
                 id="modal"
                 className="fixed inset-0 flex max-h-full px-4 py-6 sm:px-0 items-center z-50 transform transition-all backdrop-blur"
-                onClose={close}
+                onClose={handleClose}
             >
                 <Transition.Child
                     as={Fragment}
diff --git a/resources/js/React/Core/AuthenticatedLayout.tsx b/resources/js/React/Core/AuthenticatedLayout.tsx
index 27fa399e..0c83b053 100644
--- a/resources/js/React/Core/AuthenticatedLayout.tsx
+++ b/resources/js/React/Core/AuthenticatedLayout.tsx
@@ -1,4 +1,4 @@
-import {Outlet, useLocation, useMatches} from 'react-router-dom';
+import {Link, Outlet, useLocation, useMatches} from 'react-router-dom';
 import Breadcrumbs from '@/React/Core/Breadcrumbs';
 import {useEffect} from 'react';
 import MatchWithHandle from '@/React/types/MatchWithHandle';
@@ -14,15 +14,19 @@ const AuthenticatedLayout = () => {
     }, [location]);
 
     return (
-        <>
+        <div className="min-h-screen text-gray-800 dark:text-gray-300 bg-gray-100 dark:bg-gray-900">
             <header className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 text-xl flex space-x-2">
                 <Breadcrumbs/>
             </header>
 
             <main className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
+                <Link to="/react/categories">
+                    Categories
+                </Link>
+
                 <Outlet/>
             </main>
-        </>
+        </div>
     );
 };
 
diff --git a/resources/js/React/Core/router.tsx b/resources/js/React/Core/router.tsx
index 41b128bd..2ea5e048 100644
--- a/resources/js/React/Core/router.tsx
+++ b/resources/js/React/Core/router.tsx
@@ -1,4 +1,4 @@
-import {createBrowserRouter, redirect} from 'react-router-dom';
+import {createBrowserRouter} from 'react-router-dom';
 import categoriesLoader from '@/React/Pages/Categories/Loaders/categoriesLoader';
 import AuthenticatedLayout from '@/React/Core/AuthenticatedLayout';
 import CategoriesIndex from '@/React/Pages/Categories/CategoriesIndex';
@@ -6,8 +6,9 @@ import CategoriesCreate from '@/React/Pages/Categories/CategoriesCreate';
 import request from '@/React/request';
 import {HTTPError} from 'ky';
 import ValidationErrors from '@/React/types/ValidationErrors';
-import Breadcrumb from '@/React/types/Breadcrumb';
 import RouteHandle from '@/React/types/RouteHandle';
+import CategoriesEdit from '@/React/Pages/Categories/CategoriesEdit';
+import categoryLoader from '@/React/Pages/Categories/Loaders/categoryLoader';
 
 const Error = () => <div>An error occurred.</div>;
 
@@ -33,11 +34,11 @@ const router = createBrowserRouter([
                     {
                         path: 'create',
                         element: <CategoriesCreate/>,
-                        action: async ({params, request: req}) => {
+                        action: async ({request: req}) => {
                             const formData = await req.formData();
 
                             try {
-                                await request.post('/api/categories', {body: formData});
+                                await request.post('/api/categories', {json: Object.fromEntries(formData)});
                             } catch (exception) {
                                 const errorResponse = (exception as HTTPError).response;
 
@@ -56,6 +57,33 @@ const router = createBrowserRouter([
                             headline: 'Add category',
                         } as RouteHandle,
                     },
+                    {
+                        path: ':categoryId/edit',
+                        element: <CategoriesEdit/>,
+                        loader: categoryLoader('/edit'),
+                        action: async ({params, request: req}) => {
+                            const formData = await req.formData();
+
+                            try {
+                                await request.put(`/api/categories/${params.categoryId}`, {json: Object.fromEntries(formData)});
+                            } catch (exception) {
+                                const errorResponse = (exception as HTTPError).response;
+
+                                if (errorResponse.status !== 422) {
+                                    throw exception;
+                                }
+
+                                return (await errorResponse.json() as { errors: ValidationErrors; }).errors;
+                            }
+
+                            return null;
+                        },
+                        handle: {
+                            hide: true,
+                            title: 'Edit category',
+                            headline: 'Edit category',
+                        } as RouteHandle,
+                    },
                 ],
             },
         ],
diff --git a/resources/js/React/Hooks/usePageModal.ts b/resources/js/React/Hooks/usePageModal.ts
index c87f292e..78de01a1 100644
--- a/resources/js/React/Hooks/usePageModal.ts
+++ b/resources/js/React/Hooks/usePageModal.ts
@@ -1,4 +1,4 @@
-import {useNavigate} from 'react-router-dom';
+import {useLocation, useNavigate} from 'react-router-dom';
 import {useEffect, useState} from 'react';
 import ValidationErrors from '@/React/types/ValidationErrors';
 import {modalLeaveDuration} from '@/Components/Modal/Modal';
@@ -7,6 +7,7 @@ import wait from '@/React/Utils/wait';
 export default function usePageModal(errors: ValidationErrors | null, to: string) {
     const [show, setShow] = useState(true);
     const navigate = useNavigate();
+    const location = useLocation();
 
     useEffect(() => {
         if (errors !== null) {
@@ -22,6 +23,10 @@ export default function usePageModal(errors: ValidationErrors | null, to: string
         }
     }, [show]);
 
+    useEffect(() => {
+        setShow(true);
+    }, [location]);
+
     const handleClose = () => setShow(false);
 
     return {
diff --git a/resources/js/React/Pages/Categories/CategoriesEdit.tsx b/resources/js/React/Pages/Categories/CategoriesEdit.tsx
new file mode 100644
index 00000000..0f98d5a0
--- /dev/null
+++ b/resources/js/React/Pages/Categories/CategoriesEdit.tsx
@@ -0,0 +1,50 @@
+import {Modal, ModalBody, ModalHeader} from '@/Components/Modal/Modal';
+import {Form, useActionData, useLoaderData, useParams} from 'react-router-dom';
+import TextInput from '@/Components/TextInput';
+import usePageModal from '@/React/Hooks/usePageModal';
+import ValidationErrors from '@/React/types/ValidationErrors';
+import InputError from '@/Components/InputError';
+import {PrimaryButton} from '@/Components/Button';
+import InputLabel from '@/Components/InputLabel';
+import React from 'react';
+import {useLaravelReactI18n} from 'laravel-react-i18n';
+import Category from '@/types/generated/Models/Category';
+
+type CategoriesCreateValidationErrors = ValidationErrors & { name?: string; } | null;
+
+export default function CategoriesEdit() {
+    const {t} = useLaravelReactI18n();
+    const {categoryId} = useParams();
+    const category = useLoaderData() as Category;
+    const errors = useActionData() as CategoriesCreateValidationErrors;
+    const {show, handleClose} = usePageModal(errors, '/react/categories');
+
+    return (
+        <Modal appear show={show} onClose={handleClose}>
+            <ModalHeader>
+                {t('Edit category')}
+            </ModalHeader>
+
+            <ModalBody>
+                <Form method="put" action={`/react/categories/${categoryId}/edit`}>
+                    <div className="mb-4">
+                        <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
+                        <TextInput
+                            id="name"
+                            name="name"
+                            defaultValue={category.name}
+                            className="block w-full max-w-xl"
+                            required
+                            isFocused
+                        />
+                        <InputError message={errors?.name}/>
+                    </div>
+
+                    <PrimaryButton type="submit">
+                        {t('Save')}
+                    </PrimaryButton>
+                </Form>
+            </ModalBody>
+        </Modal>
+    );
+}
diff --git a/resources/js/React/Pages/Categories/CategoriesIndex.tsx b/resources/js/React/Pages/Categories/CategoriesIndex.tsx
index 6919f1c3..b6f1f6a2 100644
--- a/resources/js/React/Pages/Categories/CategoriesIndex.tsx
+++ b/resources/js/React/Pages/Categories/CategoriesIndex.tsx
@@ -1,11 +1,15 @@
-import Category from '@/types/generated/Models/Category';
 import {Link, Outlet, useLoaderData} from 'react-router-dom';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import Actions from '@/Components/Actions';
+import LinkStack from '@/Components/LinkStack';
+import {isEmpty} from 'ramda';
+import EmptyState from '@/Components/EmptyState';
+import TagOutlineIcon from '@/Icons/TagOutlineIcon';
+import CategoryWithFeedsCount from '@/types/generated/Models/CategoryWithFeedsCount';
 
 export default function CategoriesIndex() {
-    const categories = useLoaderData() as Category[];
-    const {t} = useLaravelReactI18n();
+    const categories = useLoaderData() as CategoryWithFeedsCount[];
+    const {t, tChoice} = useLaravelReactI18n();
 
     return (
         <div>
@@ -15,11 +19,33 @@ export default function CategoriesIndex() {
                 </Link>
             </Actions>
 
-            <div className="pt-4">
-                {categories.map((category) => (
-                    <div key={category.id}>{category.name}</div>
-                ))}
-            </div>
+            {isEmpty(categories)
+                ? (
+                    <EmptyState
+                        icon={TagOutlineIcon}
+                        message={t('No categories.')}
+                        description={t('Get started by creating a new category.')}
+                    />
+                )
+                : (
+                    <LinkStack>
+                        {categories.map((category) => (
+                            <LinkStack.Item
+                                key={category.id}
+                                to={`/react/categories/${category.id}/edit`}
+                                className="block"
+                            >
+                                <div className="font-semibold">
+                                    {category.name}
+                                </div>
+
+                                <div className="text-sm text-muted">
+                                    {tChoice('category.feeds_count', category.feeds_count)}
+                                </div>
+                            </LinkStack.Item>
+                        ))}
+                    </LinkStack>
+                )}
 
             <Outlet/>
         </div>
diff --git a/resources/js/React/Pages/Categories/Loaders/categoryLoader.ts b/resources/js/React/Pages/Categories/Loaders/categoryLoader.ts
new file mode 100644
index 00000000..1fa722e5
--- /dev/null
+++ b/resources/js/React/Pages/Categories/Loaders/categoryLoader.ts
@@ -0,0 +1,11 @@
+import Category from '@/types/generated/Models/Category';
+import request from '@/React/request';
+import {Params} from 'react-router-dom';
+
+const categoryLoader = (suffix?: string) => async ({params}: { params: Params; }) => {
+    const data = await request(`/api/categories/${params.categoryId}${suffix}`).json<{ category: Category; canDelete: boolean; }>();
+
+    return data.category;
+};
+
+export default categoryLoader;
diff --git a/routes/api.php b/routes/api.php
index de555332..0cf2f85d 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -20,6 +20,5 @@
 });
 
 Route::middleware('auth:sanctum')->group(function () {
-    Route::get('/categories', [CategoryController::class, 'index'])->name('categories.index');
-    Route::post('/categories', [CategoryController::class, 'store'])->name('categories.store');
+    Route::resource('categories', CategoryController::class);
 });
diff --git a/routes/web.php b/routes/web.php
index 36f7a3cf..4d7f6c8e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -44,6 +44,10 @@
     return view('app_react');
 });
 
+Route::any('/react/categories/{category}/edit', function () {
+    return view('app_react');
+});
+
 Route::middleware('auth')->group(function () {
     Route::get('/dashboard', DashboardController::class)->name('dashboard');
 

From ec07387e84f814ee46c136924fc5a3cff64232bb Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 9 Mar 2024 20:54:23 +0100
Subject: [PATCH 08/79] adjusted label layout

---
 resources/js/Components/InputLabel.tsx                 | 2 +-
 resources/js/React/Pages/Categories/CategoriesEdit.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/Components/InputLabel.tsx b/resources/js/Components/InputLabel.tsx
index ef1e1d3d..6ad42090 100644
--- a/resources/js/Components/InputLabel.tsx
+++ b/resources/js/Components/InputLabel.tsx
@@ -16,7 +16,7 @@ export default function InputLabel(
     return (
         <label
             htmlFor={htmlFor}
-            className={clsx('block font-medium text-sm text-gray-700 dark:text-gray-300', className, {'label-required': required})}
+            className={clsx('block mb-1 font-medium text-sm text-gray-700 dark:text-gray-300', className, {'label-required': required})}
         >
             {value}
         </label>
diff --git a/resources/js/React/Pages/Categories/CategoriesEdit.tsx b/resources/js/React/Pages/Categories/CategoriesEdit.tsx
index 0f98d5a0..7c771b8d 100644
--- a/resources/js/React/Pages/Categories/CategoriesEdit.tsx
+++ b/resources/js/React/Pages/Categories/CategoriesEdit.tsx
@@ -26,8 +26,8 @@ export default function CategoriesEdit() {
             </ModalHeader>
 
             <ModalBody>
-                <Form method="put" action={`/react/categories/${categoryId}/edit`}>
-                    <div className="mb-4">
+                <Form method="put" action={`/react/categories/${categoryId}/edit`} className="space-y-4">
+                    <div>
                         <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
                         <TextInput
                             id="name"

From edc14e70fa9faec8a07f1c6766f744e90157f50d Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 9 Mar 2024 21:01:00 +0100
Subject: [PATCH 09/79] added close button to modals

---
 resources/js/Components/Modal/Modal.tsx                  | 8 ++++++++
 resources/js/React/Pages/Categories/CategoriesCreate.tsx | 6 +++---
 resources/js/React/Pages/Categories/CategoriesEdit.tsx   | 2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/resources/js/Components/Modal/Modal.tsx b/resources/js/Components/Modal/Modal.tsx
index 0ee36344..76df663c 100644
--- a/resources/js/Components/Modal/Modal.tsx
+++ b/resources/js/Components/Modal/Modal.tsx
@@ -1,5 +1,7 @@
 import {Fragment, ReactNode, useEffect} from 'react';
 import {Dialog, Transition} from '@headlessui/react';
+import {HeadlessButton} from '@/Components/Button';
+import XMarkOutlineIcon from '@/Icons/XMarkOutlineIcon';
 
 const Modal = (
     {
@@ -68,6 +70,12 @@ const Modal = (
                     <Dialog.Panel
                         className={`flex flex-col mb-4 bg-white dark:bg-gray-800 rounded-lg max-h-full shadow-xl transform transition-all w-full sm:mx-auto ${maxWidthClass}`}
                     >
+                        {closeable && (
+                            <HeadlessButton onClick={onClose} className="absolute top-0 right-0 mt-2 mr-2 button-icon">
+                                <XMarkOutlineIcon className="w-5 h-5"/>
+                            </HeadlessButton>
+                        )}
+
                         {children}
                     </Dialog.Panel>
                 </Transition.Child>
diff --git a/resources/js/React/Pages/Categories/CategoriesCreate.tsx b/resources/js/React/Pages/Categories/CategoriesCreate.tsx
index d541339b..cd828b49 100644
--- a/resources/js/React/Pages/Categories/CategoriesCreate.tsx
+++ b/resources/js/React/Pages/Categories/CategoriesCreate.tsx
@@ -23,13 +23,13 @@ export default function CategoriesCreate() {
             </ModalHeader>
 
             <ModalBody>
-                <Form method="post" action="/react/categories/create">
-                    <div className="mb-4">
+                <Form method="post" action="/react/categories/create" className="space-y-4">
+                    <div>
                         <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
                         <TextInput
                             id="name"
                             name="name"
-                            className="block w-full max-w-xl"
+                            className="block w-full"
                             required
                             isFocused
                         />
diff --git a/resources/js/React/Pages/Categories/CategoriesEdit.tsx b/resources/js/React/Pages/Categories/CategoriesEdit.tsx
index 7c771b8d..9b9cdcfb 100644
--- a/resources/js/React/Pages/Categories/CategoriesEdit.tsx
+++ b/resources/js/React/Pages/Categories/CategoriesEdit.tsx
@@ -33,7 +33,7 @@ export default function CategoriesEdit() {
                             id="name"
                             name="name"
                             defaultValue={category.name}
-                            className="block w-full max-w-xl"
+                            className="block w-full"
                             required
                             isFocused
                         />

From 1bde3143ffbc0b63b1f93cbca58fad0e2277f3dd Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 9 Mar 2024 21:06:21 +0100
Subject: [PATCH 10/79] added navigation dropdown

---
 resources/js/Components/Dropdown.tsx          | 20 +++++++++---
 .../js/React/Core/AuthenticatedLayout.tsx     | 31 +++++++++++++++----
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/resources/js/Components/Dropdown.tsx b/resources/js/Components/Dropdown.tsx
index 1af68454..27b484cc 100644
--- a/resources/js/Components/Dropdown.tsx
+++ b/resources/js/Components/Dropdown.tsx
@@ -1,8 +1,17 @@
-import {useState, createContext, useContext, Fragment, PropsWithChildren, Dispatch, SetStateAction} from 'react';
-import {InertiaLinkProps, Link} from '@inertiajs/react';
+import {
+    useState,
+    createContext,
+    useContext,
+    Fragment,
+    PropsWithChildren,
+    Dispatch,
+    SetStateAction,
+    ReactNode
+} from 'react';
 import {Transition} from '@headlessui/react';
 import noop from '@/Utils/noop';
 import clsx from 'clsx';
+import {Link} from 'react-router-dom';
 
 type DropDownContextType = {
     open: boolean;
@@ -86,10 +95,13 @@ const Content = ({align = 'right', width = 48, contentClasses = 'p-2 bg-white/80
     );
 };
 
-const DropdownLink = ({active = false, className = '', children, ...props}: InertiaLinkProps & { active?: boolean; }) => {
+const DropdownLink = ({to, active = false, className = '', children}: { to: string; active?: boolean; className?: string; children: ReactNode; }) => {
+    const {setOpen} = useContext(DropDownContext);
+
     return (
         <Link
-            {...props}
+            to={to}
+            onClick={() => setOpen(false)}
             className={clsx(
                 'block w-full text-left px-4 py-2 text-sm leading-5 rounded-lg focus:outline-none transition duration-150 ease-in-out',
                 {
diff --git a/resources/js/React/Core/AuthenticatedLayout.tsx b/resources/js/React/Core/AuthenticatedLayout.tsx
index 0c83b053..72faee88 100644
--- a/resources/js/React/Core/AuthenticatedLayout.tsx
+++ b/resources/js/React/Core/AuthenticatedLayout.tsx
@@ -1,8 +1,10 @@
-import {Link, Outlet, useLocation, useMatches} from 'react-router-dom';
+import {Outlet, useLocation, useMatches} from 'react-router-dom';
 import Breadcrumbs from '@/React/Core/Breadcrumbs';
 import {useEffect} from 'react';
 import MatchWithHandle from '@/React/types/MatchWithHandle';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
+import Dropdown from '@/Components/Dropdown';
+import DropdownArrowIcon from '@/Icons/DropdownArrowIcon';
 
 const AuthenticatedLayout = () => {
     const {t} = useLaravelReactI18n();
@@ -15,15 +17,32 @@ const AuthenticatedLayout = () => {
 
     return (
         <div className="min-h-screen text-gray-800 dark:text-gray-300 bg-gray-100 dark:bg-gray-900">
-            <header className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 text-xl flex space-x-2">
+            <header className="flex justify-between items-center max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 text-xl space-x-2">
                 <Breadcrumbs/>
+
+                <Dropdown>
+                    <Dropdown.Trigger>
+                        <span className="inline-flex rounded-md">
+                            <button
+                                type="button"
+                                className="inline-flex items-center space-x-2 text-gray-500 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700/50 dark:hover:text-white px-3 py-2 rounded-md text-sm transition"
+                            >
+                                <span>USER</span>
+
+                                <DropdownArrowIcon/>
+                            </button>
+                        </span>
+                    </Dropdown.Trigger>
+
+                    <Dropdown.Content>
+                        <Dropdown.Link to="/react/categories">
+                            {t('Categories')}
+                        </Dropdown.Link>
+                    </Dropdown.Content>
+                </Dropdown>
             </header>
 
             <main className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
-                <Link to="/react/categories">
-                    Categories
-                </Link>
-
                 <Outlet/>
             </main>
         </div>

From 3570ad9b510c5858b5a9ed048424ee8b794bbbe4 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 9 Mar 2024 21:12:33 +0100
Subject: [PATCH 11/79] get user data for layout

---
 resources/js/React/Core/AuthenticatedLayout.tsx  | 6 ++++--
 resources/js/React/Core/router.tsx               | 2 ++
 resources/js/React/Pages/Loaders/layoutLoader.ts | 8 ++++++++
 3 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 resources/js/React/Pages/Loaders/layoutLoader.ts

diff --git a/resources/js/React/Core/AuthenticatedLayout.tsx b/resources/js/React/Core/AuthenticatedLayout.tsx
index 72faee88..22f01f5a 100644
--- a/resources/js/React/Core/AuthenticatedLayout.tsx
+++ b/resources/js/React/Core/AuthenticatedLayout.tsx
@@ -1,12 +1,14 @@
-import {Outlet, useLocation, useMatches} from 'react-router-dom';
+import {Outlet, useLoaderData, useLocation, useMatches} from 'react-router-dom';
 import Breadcrumbs from '@/React/Core/Breadcrumbs';
 import {useEffect} from 'react';
 import MatchWithHandle from '@/React/types/MatchWithHandle';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import Dropdown from '@/Components/Dropdown';
 import DropdownArrowIcon from '@/Icons/DropdownArrowIcon';
+import User from '@/types/generated/Models/User';
 
 const AuthenticatedLayout = () => {
+    const user = useLoaderData() as User;
     const {t} = useLaravelReactI18n();
     const location = useLocation();
     const match = useMatches().find((match) => match.pathname === location.pathname) as MatchWithHandle;
@@ -27,7 +29,7 @@ const AuthenticatedLayout = () => {
                                 type="button"
                                 className="inline-flex items-center space-x-2 text-gray-500 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700/50 dark:hover:text-white px-3 py-2 rounded-md text-sm transition"
                             >
-                                <span>USER</span>
+                                <span>{user.name}</span>
 
                                 <DropdownArrowIcon/>
                             </button>
diff --git a/resources/js/React/Core/router.tsx b/resources/js/React/Core/router.tsx
index 2ea5e048..2509432a 100644
--- a/resources/js/React/Core/router.tsx
+++ b/resources/js/React/Core/router.tsx
@@ -9,6 +9,7 @@ import ValidationErrors from '@/React/types/ValidationErrors';
 import RouteHandle from '@/React/types/RouteHandle';
 import CategoriesEdit from '@/React/Pages/Categories/CategoriesEdit';
 import categoryLoader from '@/React/Pages/Categories/Loaders/categoryLoader';
+import layoutLoader from '@/React/Pages/Loaders/layoutLoader';
 
 const Error = () => <div>An error occurred.</div>;
 
@@ -17,6 +18,7 @@ const router = createBrowserRouter([
         path: '/react',
         element: <AuthenticatedLayout/>,
         errorElement: <Error/>,
+        loader: layoutLoader,
         handle: {
             title: 'Home',
             headline: 'Home',
diff --git a/resources/js/React/Pages/Loaders/layoutLoader.ts b/resources/js/React/Pages/Loaders/layoutLoader.ts
new file mode 100644
index 00000000..1040234e
--- /dev/null
+++ b/resources/js/React/Pages/Loaders/layoutLoader.ts
@@ -0,0 +1,8 @@
+import request from '@/React/request';
+import User from '@/types/generated/Models/User';
+
+const layoutLoader = async () => {
+    return await request('/api/user').json<User>();
+};
+
+export default layoutLoader;

From c90932c6cdda0bb8fcf0887032015e9b3773b8c8 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 9 Mar 2024 21:15:51 +0100
Subject: [PATCH 12/79] adjusted progress bar color

---
 resources/css/app.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/resources/css/app.css b/resources/css/app.css
index c3aacebf..43c113fa 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -6,6 +6,17 @@ body {
     margin-bottom: 0 !important;
 }
 
+#nprogress .bar {
+    background: #7c3aed !important;
+}
+#progress .peg {
+    box-shadow: 0 0 10px #7c3aed, 0 0 5px #7c3aed;
+}
+#nprogress .spinner-icon {
+    border-top-color: #7c3aed;
+    border-left-color: #7c3aed;
+}
+
 @layer base {
     /**
     * Miscellaneous

From bb3cb00c349b221eb99db7f0e84734c299a4f180 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 9 Mar 2024 21:26:06 +0100
Subject: [PATCH 13/79] open category forms in a pane instead of a modal

---
 resources/js/Components/Modal/Pane.tsx        | 111 ++++++++++++++++++
 .../Pages/Categories/CategoriesCreate.tsx     |  13 +-
 .../React/Pages/Categories/CategoriesEdit.tsx |  13 +-
 3 files changed, 125 insertions(+), 12 deletions(-)
 create mode 100644 resources/js/Components/Modal/Pane.tsx

diff --git a/resources/js/Components/Modal/Pane.tsx b/resources/js/Components/Modal/Pane.tsx
new file mode 100644
index 00000000..a0e41054
--- /dev/null
+++ b/resources/js/Components/Modal/Pane.tsx
@@ -0,0 +1,111 @@
+import {Fragment, ReactNode, useEffect} from 'react';
+import {Dialog, Transition} from '@headlessui/react';
+import {HeadlessButton} from '@/Components/Button';
+import XMarkOutlineIcon from '@/Icons/XMarkOutlineIcon';
+
+const Pane = (
+    {
+        children,
+        appear = false,
+        show = false,
+        closeable = true,
+        onClose = () => {},
+    }: {
+        children: ReactNode;
+        appear?: boolean;
+        show?: boolean;
+        closeable?: boolean;
+        onClose?: () => void;
+    }
+) => {
+    useEffect(() => {
+        document.body.style.overflowY = show ? 'hidden' : '';
+    }, [show]);
+
+    const handleClose = () => {
+        if (closeable) {
+            onClose();
+        }
+    };
+
+    return (
+        <Transition appear={appear} show={show} as={Fragment} leave="duration-200">
+            <Dialog
+                as="div"
+                id="modal"
+                className="fixed inset-0 flex justify-end max-h-full z-50 transform transition-all backdrop-blur"
+                onClose={handleClose}
+            >
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="absolute inset-0 bg-gray-500/75 dark:bg-gray-900/75"/>
+                </Transition.Child>
+
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0 translate-x-20"
+                    enterTo="opacity-100 translate-x-0 sm:scale-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100 translate-x-0 sm:scale-100"
+                    leaveTo="opacity-0 translate-x-20"
+                >
+                    <Dialog.Panel
+                        className="flex flex-col bg-white dark:bg-gray-800 sm:rounded-lg max-h-full shadow-xl transform transition-all w-full sm:max-w-sm"
+                    >
+                        {closeable && (
+                            <HeadlessButton onClick={onClose} className="absolute top-0 right-0 mt-2 mr-2 button-icon">
+                                <XMarkOutlineIcon className="w-5 h-5"/>
+                            </HeadlessButton>
+                        )}
+
+                        {children}
+                    </Dialog.Panel>
+                </Transition.Child>
+            </Dialog>
+        </Transition>
+    );
+};
+
+const PaneHeader = ({children}: { children: ReactNode; }) => {
+    return (
+        <div className="p-6">
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 pr-8">
+                {children}
+            </h2>
+        </div>
+    );
+};
+
+const PaneBody = ({children}: { children: ReactNode; }) => {
+    return (
+        <div className="p-6 overflow-y-auto">
+            {children}
+        </div>
+    );
+};
+
+const PaneFooter = ({children}: { children: ReactNode; }) => {
+    return (
+        <div className="mt-4 px-6 pb-6 flex justify-end">
+            {children}
+        </div>
+    );
+};
+
+const paneLeaveDuration = 200;
+
+export {
+    Pane,
+    PaneHeader,
+    PaneBody,
+    PaneFooter,
+    paneLeaveDuration,
+};
diff --git a/resources/js/React/Pages/Categories/CategoriesCreate.tsx b/resources/js/React/Pages/Categories/CategoriesCreate.tsx
index cd828b49..104950e8 100644
--- a/resources/js/React/Pages/Categories/CategoriesCreate.tsx
+++ b/resources/js/React/Pages/Categories/CategoriesCreate.tsx
@@ -8,6 +8,7 @@ import {PrimaryButton} from '@/Components/Button';
 import InputLabel from '@/Components/InputLabel';
 import React from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
+import {Pane, PaneBody, PaneHeader} from '@/Components/Modal/Pane';
 
 type CategoriesCreateValidationErrors = ValidationErrors & { name?: string; } | null;
 
@@ -17,12 +18,12 @@ export default function CategoriesCreate() {
     const {show, handleClose} = usePageModal(errors, '/react/categories');
 
     return (
-        <Modal appear show={show} onClose={handleClose}>
-            <ModalHeader>
+        <Pane appear show={show} onClose={handleClose}>
+            <PaneHeader>
                 {t('Add category')}
-            </ModalHeader>
+            </PaneHeader>
 
-            <ModalBody>
+            <PaneBody>
                 <Form method="post" action="/react/categories/create" className="space-y-4">
                     <div>
                         <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
@@ -40,7 +41,7 @@ export default function CategoriesCreate() {
                         {t('Save')}
                     </PrimaryButton>
                 </Form>
-            </ModalBody>
-        </Modal>
+            </PaneBody>
+        </Pane>
     );
 }
diff --git a/resources/js/React/Pages/Categories/CategoriesEdit.tsx b/resources/js/React/Pages/Categories/CategoriesEdit.tsx
index 9b9cdcfb..b64e31f5 100644
--- a/resources/js/React/Pages/Categories/CategoriesEdit.tsx
+++ b/resources/js/React/Pages/Categories/CategoriesEdit.tsx
@@ -9,6 +9,7 @@ import InputLabel from '@/Components/InputLabel';
 import React from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import Category from '@/types/generated/Models/Category';
+import {Pane, PaneBody, PaneHeader} from '@/Components/Modal/Pane';
 
 type CategoriesCreateValidationErrors = ValidationErrors & { name?: string; } | null;
 
@@ -20,12 +21,12 @@ export default function CategoriesEdit() {
     const {show, handleClose} = usePageModal(errors, '/react/categories');
 
     return (
-        <Modal appear show={show} onClose={handleClose}>
-            <ModalHeader>
+        <Pane appear show={show} onClose={handleClose}>
+            <PaneHeader>
                 {t('Edit category')}
-            </ModalHeader>
+            </PaneHeader>
 
-            <ModalBody>
+            <PaneBody>
                 <Form method="put" action={`/react/categories/${categoryId}/edit`} className="space-y-4">
                     <div>
                         <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
@@ -44,7 +45,7 @@ export default function CategoriesEdit() {
                         {t('Save')}
                     </PrimaryButton>
                 </Form>
-            </ModalBody>
-        </Modal>
+            </PaneBody>
+        </Pane>
     );
 }

From b16f013fc8f9c0703fd90eeb6c82e2b5e9a16303 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 9 Mar 2024 21:53:48 +0100
Subject: [PATCH 14/79] refactored code

---
 .../Core/AuthenticatedLayout.tsx              |  6 ++---
 .../js/{React => V2}/Core/Breadcrumbs.tsx     |  4 ++--
 resources/js/{React => V2}/Core/router.tsx    | 22 +++++++++----------
 .../js/{React => V2}/Hooks/useBreadcrumbs.ts  |  4 ++--
 .../js/{React => V2}/Hooks/usePageModal.ts    |  4 ++--
 .../Pages/Categories/CategoriesCreate.tsx     |  8 +++----
 .../Pages/Categories/CategoriesEdit.tsx       |  8 +++----
 .../Pages/Categories/CategoriesIndex.tsx      |  4 ++--
 .../Categories/Loaders/categoriesLoader.ts    |  2 +-
 .../Categories/Loaders/categoryLoader.ts      |  2 +-
 .../Pages/Loaders/layoutLoader.ts             |  2 +-
 resources/js/{React => V2}/Utils/wait.ts      |  0
 resources/js/{React => V2}/app.tsx            |  2 +-
 resources/js/{React => V2}/request.ts         |  0
 .../js/{React => V2}/types/Breadcrumb.ts      |  0
 .../{React => V2}/types/MatchWithHandle.tsx   |  0
 .../js/{React => V2}/types/RouteHandle.ts     |  0
 .../{React => V2}/types/ValidationErrors.ts   |  0
 resources/views/app_react.blade.php           |  2 +-
 routes/web.php                                | 18 ++++-----------
 20 files changed, 39 insertions(+), 49 deletions(-)
 rename resources/js/{React => V2}/Core/AuthenticatedLayout.tsx (92%)
 rename resources/js/{React => V2}/Core/Breadcrumbs.tsx (95%)
 rename resources/js/{React => V2}/Core/router.tsx (82%)
 rename resources/js/{React => V2}/Hooks/useBreadcrumbs.ts (81%)
 rename resources/js/{React => V2}/Hooks/usePageModal.ts (88%)
 rename resources/js/{React => V2}/Pages/Categories/CategoriesCreate.tsx (84%)
 rename resources/js/{React => V2}/Pages/Categories/CategoriesEdit.tsx (85%)
 rename resources/js/{React => V2}/Pages/Categories/CategoriesIndex.tsx (92%)
 rename resources/js/{React => V2}/Pages/Categories/Loaders/categoriesLoader.ts (86%)
 rename resources/js/{React => V2}/Pages/Categories/Loaders/categoryLoader.ts (90%)
 rename resources/js/{React => V2}/Pages/Loaders/layoutLoader.ts (81%)
 rename resources/js/{React => V2}/Utils/wait.ts (100%)
 rename resources/js/{React => V2}/app.tsx (94%)
 rename resources/js/{React => V2}/request.ts (100%)
 rename resources/js/{React => V2}/types/Breadcrumb.ts (100%)
 rename resources/js/{React => V2}/types/MatchWithHandle.tsx (100%)
 rename resources/js/{React => V2}/types/RouteHandle.ts (100%)
 rename resources/js/{React => V2}/types/ValidationErrors.ts (100%)

diff --git a/resources/js/React/Core/AuthenticatedLayout.tsx b/resources/js/V2/Core/AuthenticatedLayout.tsx
similarity index 92%
rename from resources/js/React/Core/AuthenticatedLayout.tsx
rename to resources/js/V2/Core/AuthenticatedLayout.tsx
index 22f01f5a..73d305b0 100644
--- a/resources/js/React/Core/AuthenticatedLayout.tsx
+++ b/resources/js/V2/Core/AuthenticatedLayout.tsx
@@ -1,7 +1,7 @@
 import {Outlet, useLoaderData, useLocation, useMatches} from 'react-router-dom';
-import Breadcrumbs from '@/React/Core/Breadcrumbs';
+import Breadcrumbs from '@/V2/Core/Breadcrumbs';
 import {useEffect} from 'react';
-import MatchWithHandle from '@/React/types/MatchWithHandle';
+import MatchWithHandle from '@/V2/types/MatchWithHandle';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import Dropdown from '@/Components/Dropdown';
 import DropdownArrowIcon from '@/Icons/DropdownArrowIcon';
@@ -37,7 +37,7 @@ const AuthenticatedLayout = () => {
                     </Dropdown.Trigger>
 
                     <Dropdown.Content>
-                        <Dropdown.Link to="/react/categories">
+                        <Dropdown.Link to="/v2/categories">
                             {t('Categories')}
                         </Dropdown.Link>
                     </Dropdown.Content>
diff --git a/resources/js/React/Core/Breadcrumbs.tsx b/resources/js/V2/Core/Breadcrumbs.tsx
similarity index 95%
rename from resources/js/React/Core/Breadcrumbs.tsx
rename to resources/js/V2/Core/Breadcrumbs.tsx
index 6ebfdb5b..7da40537 100644
--- a/resources/js/React/Core/Breadcrumbs.tsx
+++ b/resources/js/V2/Core/Breadcrumbs.tsx
@@ -1,8 +1,8 @@
 import {Link} from 'react-router-dom';
 import slug from 'slug';
 import {Fragment, useEffect, useRef} from 'react';
-import useBreadcrumbs from '@/React/Hooks/useBreadcrumbs';
-import Breadcrumb from '@/React/types/Breadcrumb';
+import useBreadcrumbs from '@/V2/Hooks/useBreadcrumbs';
+import Breadcrumb from '@/V2/types/Breadcrumb';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 
 const LinkBreadcrumb = ({breadcrumb}: { breadcrumb: Breadcrumb; }) => {
diff --git a/resources/js/React/Core/router.tsx b/resources/js/V2/Core/router.tsx
similarity index 82%
rename from resources/js/React/Core/router.tsx
rename to resources/js/V2/Core/router.tsx
index 2509432a..12fd6434 100644
--- a/resources/js/React/Core/router.tsx
+++ b/resources/js/V2/Core/router.tsx
@@ -1,21 +1,21 @@
 import {createBrowserRouter} from 'react-router-dom';
-import categoriesLoader from '@/React/Pages/Categories/Loaders/categoriesLoader';
-import AuthenticatedLayout from '@/React/Core/AuthenticatedLayout';
-import CategoriesIndex from '@/React/Pages/Categories/CategoriesIndex';
-import CategoriesCreate from '@/React/Pages/Categories/CategoriesCreate';
-import request from '@/React/request';
+import categoriesLoader from '@/V2/Pages/Categories/Loaders/categoriesLoader';
+import AuthenticatedLayout from '@/V2/Core/AuthenticatedLayout';
+import CategoriesIndex from '@/V2/Pages/Categories/CategoriesIndex';
+import CategoriesCreate from '@/V2/Pages/Categories/CategoriesCreate';
+import request from '@/V2/request';
 import {HTTPError} from 'ky';
-import ValidationErrors from '@/React/types/ValidationErrors';
-import RouteHandle from '@/React/types/RouteHandle';
-import CategoriesEdit from '@/React/Pages/Categories/CategoriesEdit';
-import categoryLoader from '@/React/Pages/Categories/Loaders/categoryLoader';
-import layoutLoader from '@/React/Pages/Loaders/layoutLoader';
+import ValidationErrors from '@/V2/types/ValidationErrors';
+import RouteHandle from '@/V2/types/RouteHandle';
+import CategoriesEdit from '@/V2/Pages/Categories/CategoriesEdit';
+import categoryLoader from '@/V2/Pages/Categories/Loaders/categoryLoader';
+import layoutLoader from '@/V2/Pages/Loaders/layoutLoader';
 
 const Error = () => <div>An error occurred.</div>;
 
 const router = createBrowserRouter([
     {
-        path: '/react',
+        path: '/v2',
         element: <AuthenticatedLayout/>,
         errorElement: <Error/>,
         loader: layoutLoader,
diff --git a/resources/js/React/Hooks/useBreadcrumbs.ts b/resources/js/V2/Hooks/useBreadcrumbs.ts
similarity index 81%
rename from resources/js/React/Hooks/useBreadcrumbs.ts
rename to resources/js/V2/Hooks/useBreadcrumbs.ts
index d5bcb7a3..34561f38 100644
--- a/resources/js/React/Hooks/useBreadcrumbs.ts
+++ b/resources/js/V2/Hooks/useBreadcrumbs.ts
@@ -1,6 +1,6 @@
 import {useMatches} from 'react-router-dom';
-import Breadcrumb from '@/React/types/Breadcrumb';
-import RouteHandle from '@/React/types/RouteHandle';
+import Breadcrumb from '@/V2/types/Breadcrumb';
+import RouteHandle from '@/V2/types/RouteHandle';
 
 export default function useBreadcrumbs() {
     const matches = useMatches();
diff --git a/resources/js/React/Hooks/usePageModal.ts b/resources/js/V2/Hooks/usePageModal.ts
similarity index 88%
rename from resources/js/React/Hooks/usePageModal.ts
rename to resources/js/V2/Hooks/usePageModal.ts
index 78de01a1..320e7ceb 100644
--- a/resources/js/React/Hooks/usePageModal.ts
+++ b/resources/js/V2/Hooks/usePageModal.ts
@@ -1,8 +1,8 @@
 import {useLocation, useNavigate} from 'react-router-dom';
 import {useEffect, useState} from 'react';
-import ValidationErrors from '@/React/types/ValidationErrors';
+import ValidationErrors from '@/V2/types/ValidationErrors';
 import {modalLeaveDuration} from '@/Components/Modal/Modal';
-import wait from '@/React/Utils/wait';
+import wait from '@/V2/Utils/wait';
 
 export default function usePageModal(errors: ValidationErrors | null, to: string) {
     const [show, setShow] = useState(true);
diff --git a/resources/js/React/Pages/Categories/CategoriesCreate.tsx b/resources/js/V2/Pages/Categories/CategoriesCreate.tsx
similarity index 84%
rename from resources/js/React/Pages/Categories/CategoriesCreate.tsx
rename to resources/js/V2/Pages/Categories/CategoriesCreate.tsx
index 104950e8..7fbb82da 100644
--- a/resources/js/React/Pages/Categories/CategoriesCreate.tsx
+++ b/resources/js/V2/Pages/Categories/CategoriesCreate.tsx
@@ -1,8 +1,8 @@
 import {Modal, ModalBody, ModalHeader} from '@/Components/Modal/Modal';
 import {Form, useActionData} from 'react-router-dom';
 import TextInput from '@/Components/TextInput';
-import usePageModal from '@/React/Hooks/usePageModal';
-import ValidationErrors from '@/React/types/ValidationErrors';
+import usePageModal from '@/V2/Hooks/usePageModal';
+import ValidationErrors from '@/V2/types/ValidationErrors';
 import InputError from '@/Components/InputError';
 import {PrimaryButton} from '@/Components/Button';
 import InputLabel from '@/Components/InputLabel';
@@ -15,7 +15,7 @@ type CategoriesCreateValidationErrors = ValidationErrors & { name?: string; } |
 export default function CategoriesCreate() {
     const {t} = useLaravelReactI18n();
     const errors = useActionData() as CategoriesCreateValidationErrors;
-    const {show, handleClose} = usePageModal(errors, '/react/categories');
+    const {show, handleClose} = usePageModal(errors, '/v2/categories');
 
     return (
         <Pane appear show={show} onClose={handleClose}>
@@ -24,7 +24,7 @@ export default function CategoriesCreate() {
             </PaneHeader>
 
             <PaneBody>
-                <Form method="post" action="/react/categories/create" className="space-y-4">
+                <Form method="post" action="/v2/categories/create" className="space-y-4">
                     <div>
                         <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
                         <TextInput
diff --git a/resources/js/React/Pages/Categories/CategoriesEdit.tsx b/resources/js/V2/Pages/Categories/CategoriesEdit.tsx
similarity index 85%
rename from resources/js/React/Pages/Categories/CategoriesEdit.tsx
rename to resources/js/V2/Pages/Categories/CategoriesEdit.tsx
index b64e31f5..2a568235 100644
--- a/resources/js/React/Pages/Categories/CategoriesEdit.tsx
+++ b/resources/js/V2/Pages/Categories/CategoriesEdit.tsx
@@ -1,8 +1,8 @@
 import {Modal, ModalBody, ModalHeader} from '@/Components/Modal/Modal';
 import {Form, useActionData, useLoaderData, useParams} from 'react-router-dom';
 import TextInput from '@/Components/TextInput';
-import usePageModal from '@/React/Hooks/usePageModal';
-import ValidationErrors from '@/React/types/ValidationErrors';
+import usePageModal from '@/V2/Hooks/usePageModal';
+import ValidationErrors from '@/V2/types/ValidationErrors';
 import InputError from '@/Components/InputError';
 import {PrimaryButton} from '@/Components/Button';
 import InputLabel from '@/Components/InputLabel';
@@ -18,7 +18,7 @@ export default function CategoriesEdit() {
     const {categoryId} = useParams();
     const category = useLoaderData() as Category;
     const errors = useActionData() as CategoriesCreateValidationErrors;
-    const {show, handleClose} = usePageModal(errors, '/react/categories');
+    const {show, handleClose} = usePageModal(errors, '/v2/categories');
 
     return (
         <Pane appear show={show} onClose={handleClose}>
@@ -27,7 +27,7 @@ export default function CategoriesEdit() {
             </PaneHeader>
 
             <PaneBody>
-                <Form method="put" action={`/react/categories/${categoryId}/edit`} className="space-y-4">
+                <Form method="put" action={`/v2/categories/${categoryId}/edit`} className="space-y-4">
                     <div>
                         <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
                         <TextInput
diff --git a/resources/js/React/Pages/Categories/CategoriesIndex.tsx b/resources/js/V2/Pages/Categories/CategoriesIndex.tsx
similarity index 92%
rename from resources/js/React/Pages/Categories/CategoriesIndex.tsx
rename to resources/js/V2/Pages/Categories/CategoriesIndex.tsx
index b6f1f6a2..5ec21773 100644
--- a/resources/js/React/Pages/Categories/CategoriesIndex.tsx
+++ b/resources/js/V2/Pages/Categories/CategoriesIndex.tsx
@@ -14,7 +14,7 @@ export default function CategoriesIndex() {
     return (
         <div>
             <Actions>
-                <Link to="/react/categories/create" className="link-secondary">
+                <Link to="/v2/categories/create" className="link-secondary">
                     {t('Add category')}
                 </Link>
             </Actions>
@@ -32,7 +32,7 @@ export default function CategoriesIndex() {
                         {categories.map((category) => (
                             <LinkStack.Item
                                 key={category.id}
-                                to={`/react/categories/${category.id}/edit`}
+                                to={`/v2/categories/${category.id}/edit`}
                                 className="block"
                             >
                                 <div className="font-semibold">
diff --git a/resources/js/React/Pages/Categories/Loaders/categoriesLoader.ts b/resources/js/V2/Pages/Categories/Loaders/categoriesLoader.ts
similarity index 86%
rename from resources/js/React/Pages/Categories/Loaders/categoriesLoader.ts
rename to resources/js/V2/Pages/Categories/Loaders/categoriesLoader.ts
index 0204fad1..fb87785b 100644
--- a/resources/js/React/Pages/Categories/Loaders/categoriesLoader.ts
+++ b/resources/js/V2/Pages/Categories/Loaders/categoriesLoader.ts
@@ -1,5 +1,5 @@
 import Category from '@/types/generated/Models/Category';
-import request from '@/React/request';
+import request from '@/V2/request';
 
 export default async function categoriesLoader() {
     const data = await request('/api/categories').json<{ categories: Category[]; canCreate: boolean; }>();
diff --git a/resources/js/React/Pages/Categories/Loaders/categoryLoader.ts b/resources/js/V2/Pages/Categories/Loaders/categoryLoader.ts
similarity index 90%
rename from resources/js/React/Pages/Categories/Loaders/categoryLoader.ts
rename to resources/js/V2/Pages/Categories/Loaders/categoryLoader.ts
index 1fa722e5..7a3dbf6f 100644
--- a/resources/js/React/Pages/Categories/Loaders/categoryLoader.ts
+++ b/resources/js/V2/Pages/Categories/Loaders/categoryLoader.ts
@@ -1,5 +1,5 @@
 import Category from '@/types/generated/Models/Category';
-import request from '@/React/request';
+import request from '@/V2/request';
 import {Params} from 'react-router-dom';
 
 const categoryLoader = (suffix?: string) => async ({params}: { params: Params; }) => {
diff --git a/resources/js/React/Pages/Loaders/layoutLoader.ts b/resources/js/V2/Pages/Loaders/layoutLoader.ts
similarity index 81%
rename from resources/js/React/Pages/Loaders/layoutLoader.ts
rename to resources/js/V2/Pages/Loaders/layoutLoader.ts
index 1040234e..82826443 100644
--- a/resources/js/React/Pages/Loaders/layoutLoader.ts
+++ b/resources/js/V2/Pages/Loaders/layoutLoader.ts
@@ -1,4 +1,4 @@
-import request from '@/React/request';
+import request from '@/V2/request';
 import User from '@/types/generated/Models/User';
 
 const layoutLoader = async () => {
diff --git a/resources/js/React/Utils/wait.ts b/resources/js/V2/Utils/wait.ts
similarity index 100%
rename from resources/js/React/Utils/wait.ts
rename to resources/js/V2/Utils/wait.ts
diff --git a/resources/js/React/app.tsx b/resources/js/V2/app.tsx
similarity index 94%
rename from resources/js/React/app.tsx
rename to resources/js/V2/app.tsx
index 35190782..b5b0cb90 100644
--- a/resources/js/React/app.tsx
+++ b/resources/js/V2/app.tsx
@@ -1,6 +1,6 @@
 import {createRoot} from 'react-dom/client';
 import {RouterProvider} from 'react-router-dom';
-import router from '@/React/Core/router';
+import router from '@/V2/Core/router';
 import NProgress from 'nprogress';
 import {LaravelReactI18nProvider} from 'laravel-react-i18n';
 import getBrowserLocale from '@/Utils/getBrowserLocale';
diff --git a/resources/js/React/request.ts b/resources/js/V2/request.ts
similarity index 100%
rename from resources/js/React/request.ts
rename to resources/js/V2/request.ts
diff --git a/resources/js/React/types/Breadcrumb.ts b/resources/js/V2/types/Breadcrumb.ts
similarity index 100%
rename from resources/js/React/types/Breadcrumb.ts
rename to resources/js/V2/types/Breadcrumb.ts
diff --git a/resources/js/React/types/MatchWithHandle.tsx b/resources/js/V2/types/MatchWithHandle.tsx
similarity index 100%
rename from resources/js/React/types/MatchWithHandle.tsx
rename to resources/js/V2/types/MatchWithHandle.tsx
diff --git a/resources/js/React/types/RouteHandle.ts b/resources/js/V2/types/RouteHandle.ts
similarity index 100%
rename from resources/js/React/types/RouteHandle.ts
rename to resources/js/V2/types/RouteHandle.ts
diff --git a/resources/js/React/types/ValidationErrors.ts b/resources/js/V2/types/ValidationErrors.ts
similarity index 100%
rename from resources/js/React/types/ValidationErrors.ts
rename to resources/js/V2/types/ValidationErrors.ts
diff --git a/resources/views/app_react.blade.php b/resources/views/app_react.blade.php
index b4ec5e4b..0b1b41f0 100644
--- a/resources/views/app_react.blade.php
+++ b/resources/views/app_react.blade.php
@@ -15,7 +15,7 @@
 
         <!-- Scripts -->
         @viteReactRefresh
-        @vite(['resources/js/React/app.tsx', 'resources/js/bootstrap.ts', 'resources/css/app.css'])
+        @vite(['resources/js/V2/app.tsx', 'resources/js/bootstrap.ts', 'resources/css/app.css'])
     </head>
     <body class="font-sans antialiased">
         <div id="app"></div>
diff --git a/routes/web.php b/routes/web.php
index 4d7f6c8e..80ed1425 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -32,20 +32,10 @@
     ]);
 });
 
-Route::any('/react', function () {
-    return view('app_react');
-});
-
-Route::any('/react/{any}', function () {
-    return view('app_react');
-});
-
-Route::any('/react/categories/create', function () {
-    return view('app_react');
-});
-
-Route::any('/react/categories/{category}/edit', function () {
-    return view('app_react');
+Route::group(['prefix' => 'v2'], function () {
+    Route::any('{all?}', function() {
+        return view('app_react');
+    })->where(['all' => '.*']);
 });
 
 Route::middleware('auth')->group(function () {

From c8f011d4ffab703656ae8ea408f332f95e8b8a2a Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sun, 10 Mar 2024 09:33:08 +0100
Subject: [PATCH 15/79] refactored code

---
 resources/js/V2/Core/ErrorPage.tsx            | 11 ++++
 .../Router/Actions/updateCategoryAction.ts    | 24 +++++++++
 .../Router}/Loaders/categoriesLoader.ts       |  7 ++-
 .../Router}/Loaders/categoryLoader.ts         |  4 +-
 .../Router}/Loaders/layoutLoader.ts           |  3 +-
 resources/js/V2/Core/{ => Router}/router.tsx  | 52 ++++---------------
 resources/js/V2/app.tsx                       |  2 +-
 resources/js/V2/types/RouteHandle.ts          |  3 +-
 8 files changed, 57 insertions(+), 49 deletions(-)
 create mode 100644 resources/js/V2/Core/ErrorPage.tsx
 create mode 100644 resources/js/V2/Core/Router/Actions/updateCategoryAction.ts
 rename resources/js/V2/{Pages/Categories => Core/Router}/Loaders/categoriesLoader.ts (60%)
 rename resources/js/V2/{Pages/Categories => Core/Router}/Loaders/categoryLoader.ts (67%)
 rename resources/js/V2/{Pages => Core/Router}/Loaders/layoutLoader.ts (61%)
 rename resources/js/V2/Core/{ => Router}/router.tsx (53%)

diff --git a/resources/js/V2/Core/ErrorPage.tsx b/resources/js/V2/Core/ErrorPage.tsx
new file mode 100644
index 00000000..194647d4
--- /dev/null
+++ b/resources/js/V2/Core/ErrorPage.tsx
@@ -0,0 +1,11 @@
+import {isRouteErrorResponse, useRouteError} from 'react-router-dom';
+
+export default function ErrorPage() {
+    const error = useRouteError();
+
+    if (isRouteErrorResponse(error)) {
+        return <div>{error.status} {error.statusText}.</div>;
+    }
+
+    return <div>Unknown error occurred.</div>;
+}
diff --git a/resources/js/V2/Core/Router/Actions/updateCategoryAction.ts b/resources/js/V2/Core/Router/Actions/updateCategoryAction.ts
new file mode 100644
index 00000000..adc7c088
--- /dev/null
+++ b/resources/js/V2/Core/Router/Actions/updateCategoryAction.ts
@@ -0,0 +1,24 @@
+import request from '@/V2/request';
+import {HTTPError} from 'ky';
+import ValidationErrors from '@/V2/types/ValidationErrors';
+import {ActionFunction} from '@remix-run/router/utils';
+
+const updateCategoryAction: ActionFunction = async ({params, request: req}) => {
+    const formData = await req.formData();
+
+    try {
+        await request.put(`/api/categories/${params.categoryId}`, {json: Object.fromEntries(formData)});
+    } catch (exception) {
+        const errorResponse = (exception as HTTPError).response;
+
+        if (errorResponse.status !== 422) {
+            throw exception;
+        }
+
+        return (await errorResponse.json() as { errors: ValidationErrors; }).errors;
+    }
+
+    return null;
+};
+
+export default updateCategoryAction;
diff --git a/resources/js/V2/Pages/Categories/Loaders/categoriesLoader.ts b/resources/js/V2/Core/Router/Loaders/categoriesLoader.ts
similarity index 60%
rename from resources/js/V2/Pages/Categories/Loaders/categoriesLoader.ts
rename to resources/js/V2/Core/Router/Loaders/categoriesLoader.ts
index fb87785b..63bd8ac3 100644
--- a/resources/js/V2/Pages/Categories/Loaders/categoriesLoader.ts
+++ b/resources/js/V2/Core/Router/Loaders/categoriesLoader.ts
@@ -1,8 +1,11 @@
 import Category from '@/types/generated/Models/Category';
 import request from '@/V2/request';
+import {LoaderFunction} from '@remix-run/router/utils';
 
-export default async function categoriesLoader() {
+const categoriesLoader: LoaderFunction = async () => {
     const data = await request('/api/categories').json<{ categories: Category[]; canCreate: boolean; }>();
 
     return data.categories;
-}
+};
+
+export default categoriesLoader;
diff --git a/resources/js/V2/Pages/Categories/Loaders/categoryLoader.ts b/resources/js/V2/Core/Router/Loaders/categoryLoader.ts
similarity index 67%
rename from resources/js/V2/Pages/Categories/Loaders/categoryLoader.ts
rename to resources/js/V2/Core/Router/Loaders/categoryLoader.ts
index 7a3dbf6f..11553d47 100644
--- a/resources/js/V2/Pages/Categories/Loaders/categoryLoader.ts
+++ b/resources/js/V2/Core/Router/Loaders/categoryLoader.ts
@@ -1,8 +1,8 @@
 import Category from '@/types/generated/Models/Category';
 import request from '@/V2/request';
-import {Params} from 'react-router-dom';
+import {LoaderFunction} from '@remix-run/router/utils';
 
-const categoryLoader = (suffix?: string) => async ({params}: { params: Params; }) => {
+const categoryLoader = (suffix?: string): LoaderFunction => async ({params}) => {
     const data = await request(`/api/categories/${params.categoryId}${suffix}`).json<{ category: Category; canDelete: boolean; }>();
 
     return data.category;
diff --git a/resources/js/V2/Pages/Loaders/layoutLoader.ts b/resources/js/V2/Core/Router/Loaders/layoutLoader.ts
similarity index 61%
rename from resources/js/V2/Pages/Loaders/layoutLoader.ts
rename to resources/js/V2/Core/Router/Loaders/layoutLoader.ts
index 82826443..2fbe035f 100644
--- a/resources/js/V2/Pages/Loaders/layoutLoader.ts
+++ b/resources/js/V2/Core/Router/Loaders/layoutLoader.ts
@@ -1,7 +1,8 @@
 import request from '@/V2/request';
 import User from '@/types/generated/Models/User';
+import {LoaderFunction} from '@remix-run/router/utils';
 
-const layoutLoader = async () => {
+const layoutLoader: LoaderFunction = async () => {
     return await request('/api/user').json<User>();
 };
 
diff --git a/resources/js/V2/Core/router.tsx b/resources/js/V2/Core/Router/router.tsx
similarity index 53%
rename from resources/js/V2/Core/router.tsx
rename to resources/js/V2/Core/Router/router.tsx
index 12fd6434..bc939a73 100644
--- a/resources/js/V2/Core/router.tsx
+++ b/resources/js/V2/Core/Router/router.tsx
@@ -1,5 +1,5 @@
 import {createBrowserRouter} from 'react-router-dom';
-import categoriesLoader from '@/V2/Pages/Categories/Loaders/categoriesLoader';
+import categoriesLoader from '@/V2/Core/Router/Loaders/categoriesLoader';
 import AuthenticatedLayout from '@/V2/Core/AuthenticatedLayout';
 import CategoriesIndex from '@/V2/Pages/Categories/CategoriesIndex';
 import CategoriesCreate from '@/V2/Pages/Categories/CategoriesCreate';
@@ -8,30 +8,24 @@ import {HTTPError} from 'ky';
 import ValidationErrors from '@/V2/types/ValidationErrors';
 import RouteHandle from '@/V2/types/RouteHandle';
 import CategoriesEdit from '@/V2/Pages/Categories/CategoriesEdit';
-import categoryLoader from '@/V2/Pages/Categories/Loaders/categoryLoader';
-import layoutLoader from '@/V2/Pages/Loaders/layoutLoader';
-
-const Error = () => <div>An error occurred.</div>;
+import categoryLoader from '@/V2/Core/Router/Loaders/categoryLoader';
+import layoutLoader from '@/V2/Core/Router/Loaders/layoutLoader';
+import updateCategoryAction from '@/V2/Core/Router/Actions/updateCategoryAction';
+import ErrorPage from '@/V2/Core/ErrorPage';
 
 const router = createBrowserRouter([
     {
         path: '/v2',
         element: <AuthenticatedLayout/>,
-        errorElement: <Error/>,
+        errorElement: <ErrorPage/>,
         loader: layoutLoader,
-        handle: {
-            title: 'Home',
-            headline: 'Home',
-        } as RouteHandle,
+        handle: {titleKey: 'Home'} as RouteHandle,
         children: [
             {
                 path: 'categories',
                 element: <CategoriesIndex/>,
                 loader: categoriesLoader,
-                handle: {
-                    title: 'Categories',
-                    headline: 'Categories',
-                } as RouteHandle,
+                handle: {titleKey: 'Categories'} as RouteHandle,
                 children: [
                     {
                         path: 'create',
@@ -53,38 +47,14 @@ const router = createBrowserRouter([
 
                             return null;
                         },
-                        handle: {
-                            hide: true,
-                            title: 'Add category',
-                            headline: 'Add category',
-                        } as RouteHandle,
+                        handle: {hide: true, titleKey: 'Add category'} as RouteHandle,
                     },
                     {
                         path: ':categoryId/edit',
                         element: <CategoriesEdit/>,
                         loader: categoryLoader('/edit'),
-                        action: async ({params, request: req}) => {
-                            const formData = await req.formData();
-
-                            try {
-                                await request.put(`/api/categories/${params.categoryId}`, {json: Object.fromEntries(formData)});
-                            } catch (exception) {
-                                const errorResponse = (exception as HTTPError).response;
-
-                                if (errorResponse.status !== 422) {
-                                    throw exception;
-                                }
-
-                                return (await errorResponse.json() as { errors: ValidationErrors; }).errors;
-                            }
-
-                            return null;
-                        },
-                        handle: {
-                            hide: true,
-                            title: 'Edit category',
-                            headline: 'Edit category',
-                        } as RouteHandle,
+                        action: updateCategoryAction,
+                        handle: {hide: true, titleKey: 'Edit category'} as RouteHandle,
                     },
                 ],
             },
diff --git a/resources/js/V2/app.tsx b/resources/js/V2/app.tsx
index b5b0cb90..3b74ba98 100644
--- a/resources/js/V2/app.tsx
+++ b/resources/js/V2/app.tsx
@@ -1,6 +1,6 @@
 import {createRoot} from 'react-dom/client';
 import {RouterProvider} from 'react-router-dom';
-import router from '@/V2/Core/router';
+import router from '@/V2/Core/Router/router';
 import NProgress from 'nprogress';
 import {LaravelReactI18nProvider} from 'laravel-react-i18n';
 import getBrowserLocale from '@/Utils/getBrowserLocale';
diff --git a/resources/js/V2/types/RouteHandle.ts b/resources/js/V2/types/RouteHandle.ts
index 87d34629..8a63f68d 100644
--- a/resources/js/V2/types/RouteHandle.ts
+++ b/resources/js/V2/types/RouteHandle.ts
@@ -1,7 +1,6 @@
 type RouteHandle = {
     hide?: boolean;
-    title: string;
-    headline: string;
+    titleKey: string;
 };
 
 export default RouteHandle;

From c6af55b1030151fb85f1c98617cc7ff0645f0978 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sun, 10 Mar 2024 12:40:11 +0100
Subject: [PATCH 16/79] added logout and authentication checks to application

---
 .../Auth/AuthenticatedSessionController.php   |  5 ++--
 resources/js/Components/Button.tsx            |  4 +--
 resources/js/Components/Dropdown.tsx          | 24 ++++++++++++++---
 resources/js/Pages/Welcome.tsx                |  4 +--
 resources/js/V2/Contexts/AuthContext.ts       |  7 +++++
 resources/js/V2/Core/AuthProvider.tsx         |  9 +++++++
 resources/js/V2/Core/AuthenticatedLayout.tsx  | 27 ++++++++++++++++---
 resources/js/V2/Core/Breadcrumbs.tsx          |  8 +++---
 .../js/V2/Core/Router/Loaders/layoutLoader.ts | 15 ++++++++++-
 resources/js/V2/Core/Router/router.tsx        |  5 ++--
 resources/js/V2/Hooks/useAuth.ts              |  6 +++++
 resources/js/V2/Hooks/useBreadcrumbs.ts       |  2 +-
 .../V2/Pages/Categories/CategoriesCreate.tsx  |  4 +--
 .../js/V2/Pages/Categories/CategoriesEdit.tsx |  4 +--
 .../V2/Pages/Categories/CategoriesIndex.tsx   |  4 +--
 resources/js/V2/types/AuthContextType.ts      |  8 ++++++
 resources/js/V2/types/Breadcrumb.ts           |  3 +--
 routes/api.php                                |  7 +++--
 routes/web.php                                |  3 ++-
 19 files changed, 115 insertions(+), 34 deletions(-)
 create mode 100644 resources/js/V2/Contexts/AuthContext.ts
 create mode 100644 resources/js/V2/Core/AuthProvider.tsx
 create mode 100644 resources/js/V2/Hooks/useAuth.ts
 create mode 100644 resources/js/V2/types/AuthContextType.ts

diff --git a/app/Http/Controllers/Auth/AuthenticatedSessionController.php b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
index 2fddead1..bb400066 100644
--- a/app/Http/Controllers/Auth/AuthenticatedSessionController.php
+++ b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
@@ -5,6 +5,7 @@
 use App\Http\Controllers\Controller;
 use App\Http\Requests\Auth\LoginRequest;
 use App\Providers\RouteServiceProvider;
+use Illuminate\Http\JsonResponse;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
@@ -40,7 +41,7 @@ public function store(LoginRequest $request): RedirectResponse
     /**
      * Destroy an authenticated session.
      */
-    public function destroy(Request $request): RedirectResponse
+    public function destroy(Request $request): JsonResponse
     {
         Auth::guard('web')->logout();
 
@@ -48,6 +49,6 @@ public function destroy(Request $request): RedirectResponse
 
         $request->session()->regenerateToken();
 
-        return redirect('/');
+        return response()->json();
     }
 }
diff --git a/resources/js/Components/Button.tsx b/resources/js/Components/Button.tsx
index 73bdb8ef..759b59e0 100644
--- a/resources/js/Components/Button.tsx
+++ b/resources/js/Components/Button.tsx
@@ -77,9 +77,9 @@ const Button = (
                 type={type}
                 className={clsx(
                     'inline-flex space-x-2 items-center text-left transition ease-in disabled:opacity-50 disabled:saturate-50 disabled:cursor-not-allowed',
-                    'text-sm tracking-widest font-semibold',
+                    'text-sm',
                     {
-                        'rounded-lg px-5 py-2.5 shadow dark:shadow-black/25 focus:ring-0 focus:ring-black dark:focus:ring-white focus:shadow-none active:shadow-none': variant !== ButtonVariant.Headless,
+                        'font-semibold tracking-widest rounded-lg px-5 py-2.5 shadow dark:shadow-black/25 focus:ring-0 focus:ring-black dark:focus:ring-white focus:shadow-none active:shadow-none': variant !== ButtonVariant.Headless,
                         'shadow-md shadow-black/20 dark:shadow-black/25 text-violet-100 bg-violet-500 hover:bg-violet-700 disabled:hover:bg-violet-500': variant === ButtonVariant.Primary,
                         'text-gray-600 dark:text-gray-400 dark:hover:text-gray-100 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 disabled:hover:text-gray-600 dark:disabled:text-gray-500 disabled:hover:bg-white dark:disabled:hover:bg-gray-800': variant === ButtonVariant.Secondary,
                         'text-gray-600 dark:text-gray-400 dark:hover:text-gray-100 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:hover:text-gray-600 dark:disabled:text-gray-500 disabled:hover:bg-white dark:disabled:hover:bg-gray-800': variant === ButtonVariant.Tertiary,
diff --git a/resources/js/Components/Dropdown.tsx b/resources/js/Components/Dropdown.tsx
index 27b484cc..857dd617 100644
--- a/resources/js/Components/Dropdown.tsx
+++ b/resources/js/Components/Dropdown.tsx
@@ -1,17 +1,18 @@
 import {
-    useState,
     createContext,
-    useContext,
+    Dispatch,
     Fragment,
     PropsWithChildren,
-    Dispatch,
+    ReactNode,
     SetStateAction,
-    ReactNode
+    useContext,
+    useState
 } from 'react';
 import {Transition} from '@headlessui/react';
 import noop from '@/Utils/noop';
 import clsx from 'clsx';
 import {Link} from 'react-router-dom';
+import {HeadlessButton} from '@/Components/Button';
 
 type DropDownContextType = {
     open: boolean;
@@ -116,11 +117,26 @@ const DropdownLink = ({to, active = false, className = '', children}: { to: stri
     );
 };
 
+const DropdownButton = ({onClick, className = '', children}: { onClick: () => void; className?: string; children: ReactNode; }) => {
+    return (
+        <HeadlessButton
+            onClick={onClick}
+            className={clsx(
+                'block w-full text-left px-4 py-2 text-sm leading-5 rounded-lg focus:outline-none transition duration-150 ease-in-out text-gray-700 dark:text-gray-400 hover:bg-gray-400/25 dark:hover:bg-gray-700 focus:bg-gray-500/25 dark:focus:bg-gray-600 dark:focus:text-gray-300',
+                className
+            )}
+        >
+            {children}
+        </HeadlessButton>
+    )
+};
+
 const Spacer = () => <div className="pt-2 mb-2 border-b dark:border-gray-600"/>;
 
 Dropdown.Trigger = Trigger;
 Dropdown.Content = Content;
 Dropdown.Link = DropdownLink;
+Dropdown.Button = DropdownButton;
 Dropdown.Spacer = Spacer;
 
 export default Dropdown;
diff --git a/resources/js/Pages/Welcome.tsx b/resources/js/Pages/Welcome.tsx
index 2ed65380..42ae22a0 100644
--- a/resources/js/Pages/Welcome.tsx
+++ b/resources/js/Pages/Welcome.tsx
@@ -14,9 +14,9 @@ export default function Welcome(props: WelcomeProps) {
                 <div className="sm:fixed sm:top-0 sm:right-0 p-6 text-right">
                     {props.auth.user
                         ? (
-                            <Link href={route('dashboard')} className="link-light">
+                            <a href="/app" className="link-light">
                                 {t('Dashboard')}
-                            </Link>
+                            </a>
                         )
                         : (
                             <>
diff --git a/resources/js/V2/Contexts/AuthContext.ts b/resources/js/V2/Contexts/AuthContext.ts
new file mode 100644
index 00000000..24de08cf
--- /dev/null
+++ b/resources/js/V2/Contexts/AuthContext.ts
@@ -0,0 +1,7 @@
+import {createContext} from 'react';
+import AuthContextType from '@/V2/types/AuthContextType';
+import noop from '@/Utils/noop';
+
+const AuthContext = createContext<AuthContextType>({user: null, setUser: noop});
+
+export default AuthContext;
diff --git a/resources/js/V2/Core/AuthProvider.tsx b/resources/js/V2/Core/AuthProvider.tsx
new file mode 100644
index 00000000..e3f75094
--- /dev/null
+++ b/resources/js/V2/Core/AuthProvider.tsx
@@ -0,0 +1,9 @@
+import {ReactElement, useState} from 'react';
+import User from '@/types/generated/Models/User';
+import AuthContext from '@/V2/Contexts/AuthContext';
+
+export default function AuthProvider({children}: { children: ReactElement; }) {
+    const [user, setUser] = useState<User | null>(null);
+
+    return <AuthContext.Provider value={{user, setUser}}>{children}</AuthContext.Provider>;
+}
diff --git a/resources/js/V2/Core/AuthenticatedLayout.tsx b/resources/js/V2/Core/AuthenticatedLayout.tsx
index 73d305b0..f87b8535 100644
--- a/resources/js/V2/Core/AuthenticatedLayout.tsx
+++ b/resources/js/V2/Core/AuthenticatedLayout.tsx
@@ -5,20 +5,37 @@ import MatchWithHandle from '@/V2/types/MatchWithHandle';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import Dropdown from '@/Components/Dropdown';
 import DropdownArrowIcon from '@/Icons/DropdownArrowIcon';
+import useAuth from '@/V2/Hooks/useAuth';
 import User from '@/types/generated/Models/User';
+import request from '@/V2/request';
 
 const AuthenticatedLayout = () => {
-    const user = useLoaderData() as User;
+    const {user, setUser} = useAuth();
+    const userData = useLoaderData() as User;
     const {t} = useLaravelReactI18n();
     const location = useLocation();
     const match = useMatches().find((match) => match.pathname === location.pathname) as MatchWithHandle;
 
+    useEffect(() => {
+        setUser(userData);
+    }, []);
+
     useEffect(() => {
         document.querySelector('title')!.textContent = t(match?.handle.title);
     }, [location]);
 
+    const handleLogout = async () => {
+        await request.delete('/api/logout');
+
+        window.location.href = '/';
+    };
+
+    if (!user) {
+        return null;
+    }
+
     return (
-        <div className="min-h-screen text-gray-800 dark:text-gray-300 bg-gray-100 dark:bg-gray-900">
+        <div className="min-h-screen text-gray-800 dark:text-gray-300 bg-gray-50 dark:bg-gray-900">
             <header className="flex justify-between items-center max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 text-xl space-x-2">
                 <Breadcrumbs/>
 
@@ -37,9 +54,13 @@ const AuthenticatedLayout = () => {
                     </Dropdown.Trigger>
 
                     <Dropdown.Content>
-                        <Dropdown.Link to="/v2/categories">
+                        <Dropdown.Link to="/app/categories">
                             {t('Categories')}
                         </Dropdown.Link>
+
+                        <Dropdown.Button onClick={handleLogout}>
+                            {t('Logout')}
+                        </Dropdown.Button>
                     </Dropdown.Content>
                 </Dropdown>
             </header>
diff --git a/resources/js/V2/Core/Breadcrumbs.tsx b/resources/js/V2/Core/Breadcrumbs.tsx
index 7da40537..0ce4346e 100644
--- a/resources/js/V2/Core/Breadcrumbs.tsx
+++ b/resources/js/V2/Core/Breadcrumbs.tsx
@@ -10,7 +10,7 @@ const LinkBreadcrumb = ({breadcrumb}: { breadcrumb: Breadcrumb; }) => {
 
     return (
         <li>
-            {t(breadcrumb.headline)}
+            {t(breadcrumb.titleKey)}
         </li>
     );
 };
@@ -22,7 +22,7 @@ const TextBreadcrumb = ({breadcrumb}: { breadcrumb: Breadcrumb; }) => {
         <Fragment>
             <li>
                 <Link to={breadcrumb.pathname} className="font-semibold text-violet-400 hover:text-violet-300 leading-tight transition">
-                    {t(breadcrumb.headline)}
+                    {t(breadcrumb.titleKey)}
                 </Link>
             </li>
 
@@ -61,8 +61,8 @@ export default function Breadcrumbs() {
                 <ol role="list" className="flex items-center space-x-2">
                     {breadcrumbs.map((breadcrumb, index) =>
                         index === breadcrumbs.length - 1
-                            ? <LinkBreadcrumb key={slug(breadcrumb.headline)} breadcrumb={breadcrumb}/>
-                            : <TextBreadcrumb key={slug(breadcrumb.headline)} breadcrumb={breadcrumb}/>
+                            ? <LinkBreadcrumb key={slug(breadcrumb.titleKey)} breadcrumb={breadcrumb}/>
+                            : <TextBreadcrumb key={slug(breadcrumb.titleKey)} breadcrumb={breadcrumb}/>
                     )}
                 </ol>
             </nav>
diff --git a/resources/js/V2/Core/Router/Loaders/layoutLoader.ts b/resources/js/V2/Core/Router/Loaders/layoutLoader.ts
index 2fbe035f..0a9f6004 100644
--- a/resources/js/V2/Core/Router/Loaders/layoutLoader.ts
+++ b/resources/js/V2/Core/Router/Loaders/layoutLoader.ts
@@ -1,9 +1,22 @@
 import request from '@/V2/request';
 import User from '@/types/generated/Models/User';
 import {LoaderFunction} from '@remix-run/router/utils';
+import {HTTPError} from 'ky';
 
 const layoutLoader: LoaderFunction = async () => {
-    return await request('/api/user').json<User>();
+    try {
+        return await request('/api/user').json<User>();
+    } catch (error) {
+        const errorResponse = (error as HTTPError).response;
+
+        if (errorResponse.status === 401) {
+            window.location.href = '/login';
+
+            return null;
+        }
+
+        throw error;
+    }
 };
 
 export default layoutLoader;
diff --git a/resources/js/V2/Core/Router/router.tsx b/resources/js/V2/Core/Router/router.tsx
index bc939a73..a4ca8e90 100644
--- a/resources/js/V2/Core/Router/router.tsx
+++ b/resources/js/V2/Core/Router/router.tsx
@@ -12,11 +12,12 @@ import categoryLoader from '@/V2/Core/Router/Loaders/categoryLoader';
 import layoutLoader from '@/V2/Core/Router/Loaders/layoutLoader';
 import updateCategoryAction from '@/V2/Core/Router/Actions/updateCategoryAction';
 import ErrorPage from '@/V2/Core/ErrorPage';
+import AuthProvider from '@/V2/Core/AuthProvider';
 
 const router = createBrowserRouter([
     {
-        path: '/v2',
-        element: <AuthenticatedLayout/>,
+        path: '/app',
+        element: <AuthProvider><AuthenticatedLayout/></AuthProvider>,
         errorElement: <ErrorPage/>,
         loader: layoutLoader,
         handle: {titleKey: 'Home'} as RouteHandle,
diff --git a/resources/js/V2/Hooks/useAuth.ts b/resources/js/V2/Hooks/useAuth.ts
new file mode 100644
index 00000000..e1d6e0cd
--- /dev/null
+++ b/resources/js/V2/Hooks/useAuth.ts
@@ -0,0 +1,6 @@
+import {useContext} from 'react';
+import AuthContext from '@/V2/Contexts/AuthContext';
+
+export default function useAuth() {
+    return useContext(AuthContext);
+}
diff --git a/resources/js/V2/Hooks/useBreadcrumbs.ts b/resources/js/V2/Hooks/useBreadcrumbs.ts
index 34561f38..2a8512e4 100644
--- a/resources/js/V2/Hooks/useBreadcrumbs.ts
+++ b/resources/js/V2/Hooks/useBreadcrumbs.ts
@@ -10,6 +10,6 @@ export default function useBreadcrumbs() {
         .map((match) => {
             const handle = match.handle as RouteHandle;
 
-            return {pathname: match.pathname, title: handle.title, headline: handle.headline} as Breadcrumb;
+            return {pathname: match.pathname, titleKey: handle.titleKey} as Breadcrumb;
         }) as Breadcrumb[];
 }
diff --git a/resources/js/V2/Pages/Categories/CategoriesCreate.tsx b/resources/js/V2/Pages/Categories/CategoriesCreate.tsx
index 7fbb82da..502b73e7 100644
--- a/resources/js/V2/Pages/Categories/CategoriesCreate.tsx
+++ b/resources/js/V2/Pages/Categories/CategoriesCreate.tsx
@@ -15,7 +15,7 @@ type CategoriesCreateValidationErrors = ValidationErrors & { name?: string; } |
 export default function CategoriesCreate() {
     const {t} = useLaravelReactI18n();
     const errors = useActionData() as CategoriesCreateValidationErrors;
-    const {show, handleClose} = usePageModal(errors, '/v2/categories');
+    const {show, handleClose} = usePageModal(errors, '/app/categories');
 
     return (
         <Pane appear show={show} onClose={handleClose}>
@@ -24,7 +24,7 @@ export default function CategoriesCreate() {
             </PaneHeader>
 
             <PaneBody>
-                <Form method="post" action="/v2/categories/create" className="space-y-4">
+                <Form method="post" action="/app/categories/create" className="space-y-4">
                     <div>
                         <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
                         <TextInput
diff --git a/resources/js/V2/Pages/Categories/CategoriesEdit.tsx b/resources/js/V2/Pages/Categories/CategoriesEdit.tsx
index 2a568235..127b90e8 100644
--- a/resources/js/V2/Pages/Categories/CategoriesEdit.tsx
+++ b/resources/js/V2/Pages/Categories/CategoriesEdit.tsx
@@ -18,7 +18,7 @@ export default function CategoriesEdit() {
     const {categoryId} = useParams();
     const category = useLoaderData() as Category;
     const errors = useActionData() as CategoriesCreateValidationErrors;
-    const {show, handleClose} = usePageModal(errors, '/v2/categories');
+    const {show, handleClose} = usePageModal(errors, '/app/categories');
 
     return (
         <Pane appear show={show} onClose={handleClose}>
@@ -27,7 +27,7 @@ export default function CategoriesEdit() {
             </PaneHeader>
 
             <PaneBody>
-                <Form method="put" action={`/v2/categories/${categoryId}/edit`} className="space-y-4">
+                <Form method="put" action={`/app/categories/${categoryId}/edit`} className="space-y-4">
                     <div>
                         <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
                         <TextInput
diff --git a/resources/js/V2/Pages/Categories/CategoriesIndex.tsx b/resources/js/V2/Pages/Categories/CategoriesIndex.tsx
index 5ec21773..c220c0ce 100644
--- a/resources/js/V2/Pages/Categories/CategoriesIndex.tsx
+++ b/resources/js/V2/Pages/Categories/CategoriesIndex.tsx
@@ -14,7 +14,7 @@ export default function CategoriesIndex() {
     return (
         <div>
             <Actions>
-                <Link to="/v2/categories/create" className="link-secondary">
+                <Link to="/app/categories/create" className="link-secondary">
                     {t('Add category')}
                 </Link>
             </Actions>
@@ -32,7 +32,7 @@ export default function CategoriesIndex() {
                         {categories.map((category) => (
                             <LinkStack.Item
                                 key={category.id}
-                                to={`/v2/categories/${category.id}/edit`}
+                                to={`/app/categories/${category.id}/edit`}
                                 className="block"
                             >
                                 <div className="font-semibold">
diff --git a/resources/js/V2/types/AuthContextType.ts b/resources/js/V2/types/AuthContextType.ts
new file mode 100644
index 00000000..36a18406
--- /dev/null
+++ b/resources/js/V2/types/AuthContextType.ts
@@ -0,0 +1,8 @@
+import User from '@/types/generated/Models/User';
+
+type AuthContextType = {
+    user: User | null;
+    setUser: (user: User | null) => void;
+}
+
+export default AuthContextType;
diff --git a/resources/js/V2/types/Breadcrumb.ts b/resources/js/V2/types/Breadcrumb.ts
index bdef4cbd..5d3df70b 100644
--- a/resources/js/V2/types/Breadcrumb.ts
+++ b/resources/js/V2/types/Breadcrumb.ts
@@ -1,7 +1,6 @@
 type Breadcrumb = {
     pathname: string;
-    title: string;
-    headline: string;
+    titleKey: string;
 };
 
 export default Breadcrumb;
diff --git a/routes/api.php b/routes/api.php
index 0cf2f85d..5e86438e 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\Api\CategoryController;
+use App\Http\Controllers\Auth\AuthenticatedSessionController;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
@@ -15,10 +16,8 @@
 |
 */
 
-Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
-    return $request->user();
-});
-
 Route::middleware('auth:sanctum')->group(function () {
+    Route::get('/user', fn (Request $request) => $request->user());
+    Route::delete('/logout', [AuthenticatedSessionController::class, 'destroy'])->name('logout');
     Route::resource('categories', CategoryController::class);
 });
diff --git a/routes/web.php b/routes/web.php
index 80ed1425..43839bd0 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -10,6 +10,7 @@
 use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\ToggleFeedItemController;
 use Illuminate\Support\Facades\Route;
+use Illuminate\Http\Request;
 use Inertia\Inertia;
 
 /*
@@ -32,7 +33,7 @@
     ]);
 });
 
-Route::group(['prefix' => 'v2'], function () {
+Route::group(['prefix' => 'app'], function () {
     Route::any('{all?}', function() {
         return view('app_react');
     })->where(['all' => '.*']);

From 4c197d6b4eb2e6b2201e95608a2f7c2f4604452b Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sun, 10 Mar 2024 12:44:15 +0100
Subject: [PATCH 17/79] added checks if you can create a new category

---
 .../js/V2/Core/Router/Loaders/categoriesLoader.ts    |  6 ++----
 resources/js/V2/Pages/Categories/CategoriesEdit.tsx  |  1 -
 resources/js/V2/Pages/Categories/CategoriesIndex.tsx | 12 +++++++-----
 resources/js/V2/types/CategoriesLoaderType.ts        |  7 +++++++
 4 files changed, 16 insertions(+), 10 deletions(-)
 create mode 100644 resources/js/V2/types/CategoriesLoaderType.ts

diff --git a/resources/js/V2/Core/Router/Loaders/categoriesLoader.ts b/resources/js/V2/Core/Router/Loaders/categoriesLoader.ts
index 63bd8ac3..4fccde75 100644
--- a/resources/js/V2/Core/Router/Loaders/categoriesLoader.ts
+++ b/resources/js/V2/Core/Router/Loaders/categoriesLoader.ts
@@ -1,11 +1,9 @@
-import Category from '@/types/generated/Models/Category';
 import request from '@/V2/request';
 import {LoaderFunction} from '@remix-run/router/utils';
+import CategoriesLoaderType from '@/V2/types/CategoriesLoaderType';
 
 const categoriesLoader: LoaderFunction = async () => {
-    const data = await request('/api/categories').json<{ categories: Category[]; canCreate: boolean; }>();
-
-    return data.categories;
+    return await request('/api/categories').json<CategoriesLoaderType>();
 };
 
 export default categoriesLoader;
diff --git a/resources/js/V2/Pages/Categories/CategoriesEdit.tsx b/resources/js/V2/Pages/Categories/CategoriesEdit.tsx
index 127b90e8..7332d256 100644
--- a/resources/js/V2/Pages/Categories/CategoriesEdit.tsx
+++ b/resources/js/V2/Pages/Categories/CategoriesEdit.tsx
@@ -1,4 +1,3 @@
-import {Modal, ModalBody, ModalHeader} from '@/Components/Modal/Modal';
 import {Form, useActionData, useLoaderData, useParams} from 'react-router-dom';
 import TextInput from '@/Components/TextInput';
 import usePageModal from '@/V2/Hooks/usePageModal';
diff --git a/resources/js/V2/Pages/Categories/CategoriesIndex.tsx b/resources/js/V2/Pages/Categories/CategoriesIndex.tsx
index c220c0ce..a8f0c63a 100644
--- a/resources/js/V2/Pages/Categories/CategoriesIndex.tsx
+++ b/resources/js/V2/Pages/Categories/CategoriesIndex.tsx
@@ -5,18 +5,20 @@ import LinkStack from '@/Components/LinkStack';
 import {isEmpty} from 'ramda';
 import EmptyState from '@/Components/EmptyState';
 import TagOutlineIcon from '@/Icons/TagOutlineIcon';
-import CategoryWithFeedsCount from '@/types/generated/Models/CategoryWithFeedsCount';
+import CategoriesLoaderType from '@/V2/types/CategoriesLoaderType';
 
 export default function CategoriesIndex() {
-    const categories = useLoaderData() as CategoryWithFeedsCount[];
+    const {categories, canCreate} = useLoaderData() as CategoriesLoaderType;
     const {t, tChoice} = useLaravelReactI18n();
 
     return (
         <div>
             <Actions>
-                <Link to="/app/categories/create" className="link-secondary">
-                    {t('Add category')}
-                </Link>
+                {canCreate && (
+                    <Link to="/app/categories/create" className="link-secondary">
+                        {t('Add category')}
+                    </Link>
+                )}
             </Actions>
 
             {isEmpty(categories)
diff --git a/resources/js/V2/types/CategoriesLoaderType.ts b/resources/js/V2/types/CategoriesLoaderType.ts
new file mode 100644
index 00000000..b627174a
--- /dev/null
+++ b/resources/js/V2/types/CategoriesLoaderType.ts
@@ -0,0 +1,7 @@
+import CategoryWithFeedsCount from '@/types/generated/Models/CategoryWithFeedsCount';
+
+type CategoriesLoaderType = {
+    categories: CategoryWithFeedsCount[];
+    canCreate: boolean;
+}
+export default CategoriesLoaderType;

From c58bbe076c1de4bae8643c442ff48f54eb96177a Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sun, 10 Mar 2024 14:13:34 +0100
Subject: [PATCH 18/79] added the ability to delete categories

---
 .../Controllers/Api/CategoryController.php    |  5 ++-
 resources/css/app.css                         |  3 ++
 resources/js/Components/Actions.tsx           |  6 ++--
 resources/js/Components/Button.tsx            | 15 ++++++--
 resources/js/Components/Modal/Pane.tsx        |  2 +-
 resources/js/V2/Core/AuthenticatedLayout.tsx  |  2 +-
 .../Router/Actions/updateCategoryAction.ts    |  6 ++++
 .../V2/Core/Router/Loaders/categoryLoader.ts  |  6 ++--
 .../js/V2/Pages/Categories/CategoriesEdit.tsx | 36 ++++++++++++++++---
 resources/js/V2/types/CategoryLoaderType.ts   |  8 +++++
 resources/js/V2/types/MatchWithHandle.tsx     |  6 ++--
 11 files changed, 72 insertions(+), 23 deletions(-)
 create mode 100644 resources/js/V2/types/CategoryLoaderType.ts

diff --git a/app/Http/Controllers/Api/CategoryController.php b/app/Http/Controllers/Api/CategoryController.php
index 13d23ec0..66086715 100644
--- a/app/Http/Controllers/Api/CategoryController.php
+++ b/app/Http/Controllers/Api/CategoryController.php
@@ -7,7 +7,6 @@
 use App\Http\Requests\UpdateCategoryRequest;
 use App\Models\Category;
 use Illuminate\Http\JsonResponse;
-use Illuminate\Http\RedirectResponse;
 use Illuminate\Support\Facades\Auth;
 use Inertia\Inertia;
 use Inertia\Response;
@@ -78,10 +77,10 @@ public function update(UpdateCategoryRequest $request, Category $category): Json
     /**
      * Remove the specified resource from storage.
      */
-    public function destroy(Category $category): RedirectResponse
+    public function destroy(Category $category): JsonResponse
     {
         $category->delete();
 
-        return redirect()->route('categories.index');
+        return response()->json();
     }
 }
diff --git a/resources/css/app.css b/resources/css/app.css
index 43c113fa..cd5e65cd 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -92,6 +92,9 @@ body {
     .link-light {
         @apply font-semibold text-violet-200 hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-white/50 transition;
     }
+    .link-danger {
+        @apply font-semibold text-pink-600 hover:text-pink-900 dark:text-pink-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-pink-500 transition;
+    }
 
     /**
      * Buttons
diff --git a/resources/js/Components/Actions.tsx b/resources/js/Components/Actions.tsx
index 2115de17..b0dd5d3e 100644
--- a/resources/js/Components/Actions.tsx
+++ b/resources/js/Components/Actions.tsx
@@ -21,7 +21,7 @@ const MobileActions = ({children}: { children: ReactNode; }) => {
     });
 
     return (
-        <div className="sm:hidden">
+        <div className="sm:hidden w-full">
             <div className="pb-8">
                 <TertiaryButton
                     onClick={() => setShow(true)}
@@ -77,14 +77,14 @@ const MobileActions = ({children}: { children: ReactNode; }) => {
     );
 };
 
-export default function Actions({className = '', children}: { className?: string; children: ReactNode; }) {
+export default function Actions({footer = false, className = '', children}: { footer?: boolean; className?: string; children: ReactNode; }) {
     if (!children) {
         return null;
     }
 
     return (
         <>
-            <div className={clsx('hidden sm:flex justify-end pb-8 space-x-4', className)}>
+            <div className={clsx('hidden sm:flex justify-end space-x-4', {'pb-8': !footer}, className)}>
                 {children}
             </div>
 
diff --git a/resources/js/Components/Button.tsx b/resources/js/Components/Button.tsx
index 759b59e0..73757079 100644
--- a/resources/js/Components/Button.tsx
+++ b/resources/js/Components/Button.tsx
@@ -19,6 +19,8 @@ type ButtonProps = {
     className?: string;
     disabled?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    name?: string;
+    value?: string | number;
     children?: ReactNode;
 };
 
@@ -38,6 +40,8 @@ const Button = (
         className = '',
         disabled = false,
         onClick = noop,
+        name,
+        value,
         children,
         confirm = false,
         confirmTitle,
@@ -49,6 +53,8 @@ const Button = (
 
     const handleOnClick = (event: React.MouseEvent<HTMLButtonElement>) => {
         if (confirm) {
+            event.preventDefault();
+
             setShowConfirmModal(true);
 
             return;
@@ -75,11 +81,12 @@ const Button = (
 
             <button
                 type={type}
+                name={name}
+                value={value}
                 className={clsx(
                     'inline-flex space-x-2 items-center text-left transition ease-in disabled:opacity-50 disabled:saturate-50 disabled:cursor-not-allowed',
-                    'text-sm',
                     {
-                        'font-semibold tracking-widest rounded-lg px-5 py-2.5 shadow dark:shadow-black/25 focus:ring-0 focus:ring-black dark:focus:ring-white focus:shadow-none active:shadow-none': variant !== ButtonVariant.Headless,
+                        'font-semibold text-sm tracking-widest rounded-lg px-5 py-2.5 shadow dark:shadow-black/25 focus:ring-0 focus:ring-black dark:focus:ring-white focus:shadow-none active:shadow-none': variant !== ButtonVariant.Headless,
                         'shadow-md shadow-black/20 dark:shadow-black/25 text-violet-100 bg-violet-500 hover:bg-violet-700 disabled:hover:bg-violet-500': variant === ButtonVariant.Primary,
                         'text-gray-600 dark:text-gray-400 dark:hover:text-gray-100 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 disabled:hover:text-gray-600 dark:disabled:text-gray-500 disabled:hover:bg-white dark:disabled:hover:bg-gray-800': variant === ButtonVariant.Secondary,
                         'text-gray-600 dark:text-gray-400 dark:hover:text-gray-100 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:hover:text-gray-600 dark:disabled:text-gray-500 disabled:hover:bg-white dark:disabled:hover:bg-gray-800': variant === ButtonVariant.Tertiary,
@@ -241,6 +248,8 @@ const HeadlessButton = (
         className,
         disabled,
         onClick,
+        name,
+        value,
         children,
         confirm = false,
         confirmTitle,
@@ -256,6 +265,8 @@ const HeadlessButton = (
             className={className}
             disabled={disabled}
             onClick={onClick}
+            name={name}
+            value={value}
             confirm={confirm}
             confirmTitle={confirmTitle}
             confirmSubmitTitle={confirmSubmitTitle}
diff --git a/resources/js/Components/Modal/Pane.tsx b/resources/js/Components/Modal/Pane.tsx
index a0e41054..00dc707e 100644
--- a/resources/js/Components/Modal/Pane.tsx
+++ b/resources/js/Components/Modal/Pane.tsx
@@ -86,7 +86,7 @@ const PaneHeader = ({children}: { children: ReactNode; }) => {
 
 const PaneBody = ({children}: { children: ReactNode; }) => {
     return (
-        <div className="p-6 overflow-y-auto">
+        <div className="grow p-6 overflow-y-auto">
             {children}
         </div>
     );
diff --git a/resources/js/V2/Core/AuthenticatedLayout.tsx b/resources/js/V2/Core/AuthenticatedLayout.tsx
index f87b8535..1ea21859 100644
--- a/resources/js/V2/Core/AuthenticatedLayout.tsx
+++ b/resources/js/V2/Core/AuthenticatedLayout.tsx
@@ -21,7 +21,7 @@ const AuthenticatedLayout = () => {
     }, []);
 
     useEffect(() => {
-        document.querySelector('title')!.textContent = t(match?.handle.title);
+        document.querySelector('title')!.textContent = t(match?.handle.titleKey);
     }, [location]);
 
     const handleLogout = async () => {
diff --git a/resources/js/V2/Core/Router/Actions/updateCategoryAction.ts b/resources/js/V2/Core/Router/Actions/updateCategoryAction.ts
index adc7c088..916891f7 100644
--- a/resources/js/V2/Core/Router/Actions/updateCategoryAction.ts
+++ b/resources/js/V2/Core/Router/Actions/updateCategoryAction.ts
@@ -6,6 +6,12 @@ import {ActionFunction} from '@remix-run/router/utils';
 const updateCategoryAction: ActionFunction = async ({params, request: req}) => {
     const formData = await req.formData();
 
+    if (formData.get('intent') === 'delete') {
+        await request.delete(`/api/categories/${params.categoryId}`);
+
+        return null;
+    }
+
     try {
         await request.put(`/api/categories/${params.categoryId}`, {json: Object.fromEntries(formData)});
     } catch (exception) {
diff --git a/resources/js/V2/Core/Router/Loaders/categoryLoader.ts b/resources/js/V2/Core/Router/Loaders/categoryLoader.ts
index 11553d47..2cd0c3d9 100644
--- a/resources/js/V2/Core/Router/Loaders/categoryLoader.ts
+++ b/resources/js/V2/Core/Router/Loaders/categoryLoader.ts
@@ -1,11 +1,9 @@
-import Category from '@/types/generated/Models/Category';
 import request from '@/V2/request';
 import {LoaderFunction} from '@remix-run/router/utils';
+import CategoriesLoaderType from '@/V2/types/CategoriesLoaderType';
 
 const categoryLoader = (suffix?: string): LoaderFunction => async ({params}) => {
-    const data = await request(`/api/categories/${params.categoryId}${suffix}`).json<{ category: Category; canDelete: boolean; }>();
-
-    return data.category;
+    return await request(`/api/categories/${params.categoryId}${suffix}`).json<CategoriesLoaderType>();
 };
 
 export default categoryLoader;
diff --git a/resources/js/V2/Pages/Categories/CategoriesEdit.tsx b/resources/js/V2/Pages/Categories/CategoriesEdit.tsx
index 7332d256..0fc28985 100644
--- a/resources/js/V2/Pages/Categories/CategoriesEdit.tsx
+++ b/resources/js/V2/Pages/Categories/CategoriesEdit.tsx
@@ -1,23 +1,32 @@
-import {Form, useActionData, useLoaderData, useParams} from 'react-router-dom';
+import {Form, useActionData, useLoaderData, useParams, useSubmit} from 'react-router-dom';
 import TextInput from '@/Components/TextInput';
 import usePageModal from '@/V2/Hooks/usePageModal';
 import ValidationErrors from '@/V2/types/ValidationErrors';
 import InputError from '@/Components/InputError';
-import {PrimaryButton} from '@/Components/Button';
+import {HeadlessButton, PrimaryButton} from '@/Components/Button';
 import InputLabel from '@/Components/InputLabel';
 import React from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
-import Category from '@/types/generated/Models/Category';
-import {Pane, PaneBody, PaneHeader} from '@/Components/Modal/Pane';
+import {Pane, PaneBody, PaneFooter, PaneHeader} from '@/Components/Modal/Pane';
+import CategoryLoaderType from '@/V2/types/CategoryLoaderType';
+import Actions from '@/Components/Actions';
 
 type CategoriesCreateValidationErrors = ValidationErrors & { name?: string; } | null;
 
 export default function CategoriesEdit() {
     const {t} = useLaravelReactI18n();
     const {categoryId} = useParams();
-    const category = useLoaderData() as Category;
+    const {category, canDelete} = useLoaderData() as CategoryLoaderType;
     const errors = useActionData() as CategoriesCreateValidationErrors;
     const {show, handleClose} = usePageModal(errors, '/app/categories');
+    const submit = useSubmit();
+
+    const handleDelete = () => {
+        const formData = new FormData();
+        formData.append('intent', 'delete');
+
+        submit(formData, {method: 'delete', action: `/app/categories/${categoryId}/edit`});
+    };
 
     return (
         <Pane appear show={show} onClose={handleClose}>
@@ -45,6 +54,23 @@ export default function CategoriesEdit() {
                     </PrimaryButton>
                 </Form>
             </PaneBody>
+
+            <PaneFooter>
+                <Actions footer>
+                    {canDelete && (
+                        <HeadlessButton
+                            confirm
+                            confirmTitle={t('Do you really want to delete this category?')}
+                            confirmSubmitTitle={t('Delete category')}
+                            confirmCancelTitle={t('Cancel')}
+                            onClick={handleDelete}
+                            className="link-danger"
+                        >
+                            {t('Delete')}
+                        </HeadlessButton>
+                    )}
+                </Actions>
+            </PaneFooter>
         </Pane>
     );
 }
diff --git a/resources/js/V2/types/CategoryLoaderType.ts b/resources/js/V2/types/CategoryLoaderType.ts
new file mode 100644
index 00000000..3202dade
--- /dev/null
+++ b/resources/js/V2/types/CategoryLoaderType.ts
@@ -0,0 +1,8 @@
+import Category from '@/types/generated/Models/Category';
+
+type CategoryLoaderType = {
+    category: Category;
+    canDelete: boolean;
+}
+
+export default CategoryLoaderType;
diff --git a/resources/js/V2/types/MatchWithHandle.tsx b/resources/js/V2/types/MatchWithHandle.tsx
index 49652cee..3f6e539a 100644
--- a/resources/js/V2/types/MatchWithHandle.tsx
+++ b/resources/js/V2/types/MatchWithHandle.tsx
@@ -1,10 +1,8 @@
 import {UIMatch} from 'react-router-dom';
+import RouteHandle from '@/V2/types/RouteHandle';
 
 type MatchWithHandle = UIMatch & {
-    handle: {
-        headline: string;
-        title: string;
-    };
+    handle: RouteHandle;
 };
 
 export default MatchWithHandle;

From a091b9374c3c2b3109e4d6d4204510a15193c570 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sun, 10 Mar 2024 14:20:25 +0100
Subject: [PATCH 19/79] refactored code

---
 .../Router/Actions/createCategoryAction.ts    | 11 ++++++++++
 .../Router/Actions/updateCategoryAction.ts    | 17 ++------------
 .../Helpers/handleRequestValidationError.ts   | 18 +++++++++++++++
 resources/js/V2/Core/Router/router.tsx        | 22 ++-----------------
 4 files changed, 33 insertions(+), 35 deletions(-)
 create mode 100644 resources/js/V2/Core/Router/Actions/createCategoryAction.ts
 create mode 100644 resources/js/V2/Core/Router/Helpers/handleRequestValidationError.ts

diff --git a/resources/js/V2/Core/Router/Actions/createCategoryAction.ts b/resources/js/V2/Core/Router/Actions/createCategoryAction.ts
new file mode 100644
index 00000000..254ff43c
--- /dev/null
+++ b/resources/js/V2/Core/Router/Actions/createCategoryAction.ts
@@ -0,0 +1,11 @@
+import request from '@/V2/request';
+import {ActionFunction} from '@remix-run/router/utils';
+import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
+
+const createCategoryAction: ActionFunction = async ({request: req}) => {
+    const formData = await req.formData();
+
+    return await handleRequestValidationError(() => request.post('/api/categories', {json: Object.fromEntries(formData)}));
+};
+
+export default createCategoryAction;
diff --git a/resources/js/V2/Core/Router/Actions/updateCategoryAction.ts b/resources/js/V2/Core/Router/Actions/updateCategoryAction.ts
index 916891f7..c506b830 100644
--- a/resources/js/V2/Core/Router/Actions/updateCategoryAction.ts
+++ b/resources/js/V2/Core/Router/Actions/updateCategoryAction.ts
@@ -1,7 +1,6 @@
 import request from '@/V2/request';
-import {HTTPError} from 'ky';
-import ValidationErrors from '@/V2/types/ValidationErrors';
 import {ActionFunction} from '@remix-run/router/utils';
+import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
 
 const updateCategoryAction: ActionFunction = async ({params, request: req}) => {
     const formData = await req.formData();
@@ -12,19 +11,7 @@ const updateCategoryAction: ActionFunction = async ({params, request: req}) => {
         return null;
     }
 
-    try {
-        await request.put(`/api/categories/${params.categoryId}`, {json: Object.fromEntries(formData)});
-    } catch (exception) {
-        const errorResponse = (exception as HTTPError).response;
-
-        if (errorResponse.status !== 422) {
-            throw exception;
-        }
-
-        return (await errorResponse.json() as { errors: ValidationErrors; }).errors;
-    }
-
-    return null;
+    return await handleRequestValidationError(() => request.put(`/api/categories/${params.categoryId}`, {json: Object.fromEntries(formData)}));
 };
 
 export default updateCategoryAction;
diff --git a/resources/js/V2/Core/Router/Helpers/handleRequestValidationError.ts b/resources/js/V2/Core/Router/Helpers/handleRequestValidationError.ts
new file mode 100644
index 00000000..4579eadd
--- /dev/null
+++ b/resources/js/V2/Core/Router/Helpers/handleRequestValidationError.ts
@@ -0,0 +1,18 @@
+import {HTTPError, ResponsePromise} from 'ky';
+import ValidationErrors from '@/V2/types/ValidationErrors';
+
+export default async function handleRequestValidationError(requestFn: () => ResponsePromise) {
+    try {
+        await requestFn();
+    } catch (exception) {
+        const errorResponse = (exception as HTTPError).response;
+
+        if (errorResponse.status !== 422) {
+            throw exception;
+        }
+
+        return (await errorResponse.json() as { errors: ValidationErrors; }).errors;
+    }
+
+    return null;
+}
diff --git a/resources/js/V2/Core/Router/router.tsx b/resources/js/V2/Core/Router/router.tsx
index a4ca8e90..676fa3f8 100644
--- a/resources/js/V2/Core/Router/router.tsx
+++ b/resources/js/V2/Core/Router/router.tsx
@@ -3,9 +3,6 @@ import categoriesLoader from '@/V2/Core/Router/Loaders/categoriesLoader';
 import AuthenticatedLayout from '@/V2/Core/AuthenticatedLayout';
 import CategoriesIndex from '@/V2/Pages/Categories/CategoriesIndex';
 import CategoriesCreate from '@/V2/Pages/Categories/CategoriesCreate';
-import request from '@/V2/request';
-import {HTTPError} from 'ky';
-import ValidationErrors from '@/V2/types/ValidationErrors';
 import RouteHandle from '@/V2/types/RouteHandle';
 import CategoriesEdit from '@/V2/Pages/Categories/CategoriesEdit';
 import categoryLoader from '@/V2/Core/Router/Loaders/categoryLoader';
@@ -13,6 +10,7 @@ import layoutLoader from '@/V2/Core/Router/Loaders/layoutLoader';
 import updateCategoryAction from '@/V2/Core/Router/Actions/updateCategoryAction';
 import ErrorPage from '@/V2/Core/ErrorPage';
 import AuthProvider from '@/V2/Core/AuthProvider';
+import createCategoryAction from '@/V2/Core/Router/Actions/createCategoryAction';
 
 const router = createBrowserRouter([
     {
@@ -31,23 +29,7 @@ const router = createBrowserRouter([
                     {
                         path: 'create',
                         element: <CategoriesCreate/>,
-                        action: async ({request: req}) => {
-                            const formData = await req.formData();
-
-                            try {
-                                await request.post('/api/categories', {json: Object.fromEntries(formData)});
-                            } catch (exception) {
-                                const errorResponse = (exception as HTTPError).response;
-
-                                if (errorResponse.status !== 422) {
-                                    throw exception;
-                                }
-
-                                return (await errorResponse.json() as { errors: ValidationErrors; }).errors;
-                            }
-
-                            return null;
-                        },
+                        action: createCategoryAction,
                         handle: {hide: true, titleKey: 'Add category'} as RouteHandle,
                     },
                     {

From 8ca2ad088990990eb1e8a3c1b96311573eeadd45 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sun, 10 Mar 2024 14:21:45 +0100
Subject: [PATCH 20/79] renamed some files

---
 resources/js/V2/Core/Router/router.tsx               | 12 ++++++------
 .../{CategoriesIndex.tsx => CategoriesIndexPage.tsx} |  2 +-
 .../{CategoriesCreate.tsx => CreateCategoryPage.tsx} |  3 +--
 .../{CategoriesEdit.tsx => EditCategoryPage.tsx}     |  2 +-
 4 files changed, 9 insertions(+), 10 deletions(-)
 rename resources/js/V2/Pages/Categories/{CategoriesIndex.tsx => CategoriesIndexPage.tsx} (97%)
 rename resources/js/V2/Pages/Categories/{CategoriesCreate.tsx => CreateCategoryPage.tsx} (93%)
 rename resources/js/V2/Pages/Categories/{CategoriesEdit.tsx => EditCategoryPage.tsx} (98%)

diff --git a/resources/js/V2/Core/Router/router.tsx b/resources/js/V2/Core/Router/router.tsx
index 676fa3f8..9af935c7 100644
--- a/resources/js/V2/Core/Router/router.tsx
+++ b/resources/js/V2/Core/Router/router.tsx
@@ -1,10 +1,10 @@
 import {createBrowserRouter} from 'react-router-dom';
 import categoriesLoader from '@/V2/Core/Router/Loaders/categoriesLoader';
 import AuthenticatedLayout from '@/V2/Core/AuthenticatedLayout';
-import CategoriesIndex from '@/V2/Pages/Categories/CategoriesIndex';
-import CategoriesCreate from '@/V2/Pages/Categories/CategoriesCreate';
+import CategoriesIndexPage from '@/V2/Pages/Categories/CategoriesIndexPage';
+import CreateCategoryPage from '@/V2/Pages/Categories/CreateCategoryPage';
 import RouteHandle from '@/V2/types/RouteHandle';
-import CategoriesEdit from '@/V2/Pages/Categories/CategoriesEdit';
+import EditCategoryPage from '@/V2/Pages/Categories/EditCategoryPage';
 import categoryLoader from '@/V2/Core/Router/Loaders/categoryLoader';
 import layoutLoader from '@/V2/Core/Router/Loaders/layoutLoader';
 import updateCategoryAction from '@/V2/Core/Router/Actions/updateCategoryAction';
@@ -22,19 +22,19 @@ const router = createBrowserRouter([
         children: [
             {
                 path: 'categories',
-                element: <CategoriesIndex/>,
+                element: <CategoriesIndexPage/>,
                 loader: categoriesLoader,
                 handle: {titleKey: 'Categories'} as RouteHandle,
                 children: [
                     {
                         path: 'create',
-                        element: <CategoriesCreate/>,
+                        element: <CreateCategoryPage/>,
                         action: createCategoryAction,
                         handle: {hide: true, titleKey: 'Add category'} as RouteHandle,
                     },
                     {
                         path: ':categoryId/edit',
-                        element: <CategoriesEdit/>,
+                        element: <EditCategoryPage/>,
                         loader: categoryLoader('/edit'),
                         action: updateCategoryAction,
                         handle: {hide: true, titleKey: 'Edit category'} as RouteHandle,
diff --git a/resources/js/V2/Pages/Categories/CategoriesIndex.tsx b/resources/js/V2/Pages/Categories/CategoriesIndexPage.tsx
similarity index 97%
rename from resources/js/V2/Pages/Categories/CategoriesIndex.tsx
rename to resources/js/V2/Pages/Categories/CategoriesIndexPage.tsx
index a8f0c63a..64a0600a 100644
--- a/resources/js/V2/Pages/Categories/CategoriesIndex.tsx
+++ b/resources/js/V2/Pages/Categories/CategoriesIndexPage.tsx
@@ -7,7 +7,7 @@ import EmptyState from '@/Components/EmptyState';
 import TagOutlineIcon from '@/Icons/TagOutlineIcon';
 import CategoriesLoaderType from '@/V2/types/CategoriesLoaderType';
 
-export default function CategoriesIndex() {
+export default function CategoriesIndexPage() {
     const {categories, canCreate} = useLoaderData() as CategoriesLoaderType;
     const {t, tChoice} = useLaravelReactI18n();
 
diff --git a/resources/js/V2/Pages/Categories/CategoriesCreate.tsx b/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
similarity index 93%
rename from resources/js/V2/Pages/Categories/CategoriesCreate.tsx
rename to resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
index 502b73e7..1393666c 100644
--- a/resources/js/V2/Pages/Categories/CategoriesCreate.tsx
+++ b/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
@@ -1,4 +1,3 @@
-import {Modal, ModalBody, ModalHeader} from '@/Components/Modal/Modal';
 import {Form, useActionData} from 'react-router-dom';
 import TextInput from '@/Components/TextInput';
 import usePageModal from '@/V2/Hooks/usePageModal';
@@ -12,7 +11,7 @@ import {Pane, PaneBody, PaneHeader} from '@/Components/Modal/Pane';
 
 type CategoriesCreateValidationErrors = ValidationErrors & { name?: string; } | null;
 
-export default function CategoriesCreate() {
+export default function CreateCategoryPage() {
     const {t} = useLaravelReactI18n();
     const errors = useActionData() as CategoriesCreateValidationErrors;
     const {show, handleClose} = usePageModal(errors, '/app/categories');
diff --git a/resources/js/V2/Pages/Categories/CategoriesEdit.tsx b/resources/js/V2/Pages/Categories/EditCategoryPage.tsx
similarity index 98%
rename from resources/js/V2/Pages/Categories/CategoriesEdit.tsx
rename to resources/js/V2/Pages/Categories/EditCategoryPage.tsx
index 0fc28985..d0df3cad 100644
--- a/resources/js/V2/Pages/Categories/CategoriesEdit.tsx
+++ b/resources/js/V2/Pages/Categories/EditCategoryPage.tsx
@@ -13,7 +13,7 @@ import Actions from '@/Components/Actions';
 
 type CategoriesCreateValidationErrors = ValidationErrors & { name?: string; } | null;
 
-export default function CategoriesEdit() {
+export default function EditCategoryPage() {
     const {t} = useLaravelReactI18n();
     const {categoryId} = useParams();
     const {category, canDelete} = useLoaderData() as CategoryLoaderType;

From fed14155aca9acb219c6a8d073799e73102a9245 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sun, 10 Mar 2024 15:08:18 +0100
Subject: [PATCH 21/79] adjusted link stack styles

---
 resources/js/Components/LinkStack.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/resources/js/Components/LinkStack.tsx b/resources/js/Components/LinkStack.tsx
index 3419d7f0..aeda4db6 100644
--- a/resources/js/Components/LinkStack.tsx
+++ b/resources/js/Components/LinkStack.tsx
@@ -1,13 +1,12 @@
 import clsx from 'clsx';
 import {ReactNode} from 'react';
-import Card from '@/Components/Card';
 import {Link} from 'react-router-dom';
 
 const LinkStack = ({children}: { children: ReactNode; }) => {
     return (
-        <Card>
+        <div>
             {children}
-        </Card>
+        </div>
     );
 };
 
@@ -25,7 +24,7 @@ const Item = (
     return (
         <Link
             to={to}
-            className={clsx('px-4 py-3 hover:bg-gray-50 hover:dark:bg-gray-700 transition ease-in-out first:rounded-t-lg last:rounded-b-lg', className)}
+            className={clsx('px-4 py-3 hover:bg-gray-100 hover:dark:bg-gray-700 transition ease-in-out first:rounded-t-lg last:rounded-b-lg', className)}
         >
             {children}
         </Link>

From 731670035f49437357d65d6fdfb46f395afebe79 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sun, 10 Mar 2024 15:10:00 +0100
Subject: [PATCH 22/79] adjusted navigation styles

---
 resources/js/Components/Dropdown.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/resources/js/Components/Dropdown.tsx b/resources/js/Components/Dropdown.tsx
index 857dd617..733eb406 100644
--- a/resources/js/Components/Dropdown.tsx
+++ b/resources/js/Components/Dropdown.tsx
@@ -11,7 +11,7 @@ import {
 import {Transition} from '@headlessui/react';
 import noop from '@/Utils/noop';
 import clsx from 'clsx';
-import {Link} from 'react-router-dom';
+import {Link, NavLink} from 'react-router-dom';
 import {HeadlessButton} from '@/Components/Button';
 
 type DropDownContextType = {
@@ -96,24 +96,24 @@ const Content = ({align = 'right', width = 48, contentClasses = 'p-2 bg-white/80
     );
 };
 
-const DropdownLink = ({to, active = false, className = '', children}: { to: string; active?: boolean; className?: string; children: ReactNode; }) => {
+const DropdownLink = ({to, className = '', children}: { to: string; className?: string; children: ReactNode; }) => {
     const {setOpen} = useContext(DropDownContext);
 
     return (
-        <Link
+        <NavLink
             to={to}
             onClick={() => setOpen(false)}
-            className={clsx(
+            className={({isActive}) => clsx(
                 'block w-full text-left px-4 py-2 text-sm leading-5 rounded-lg focus:outline-none transition duration-150 ease-in-out',
                 {
-                    'text-violet-100 bg-violet-500 hover:bg-violet-600 focus:bg-violet-500 focus:text-violet-50': active,
-                    'text-gray-700 dark:text-gray-400 hover:bg-gray-400/25 dark:hover:bg-gray-700 focus:bg-gray-500/25 dark:focus:bg-gray-600 dark:focus:text-gray-300': !active,
+                    'text-violet-100 bg-violet-500 hover:bg-violet-600 focus:bg-violet-500 focus:text-violet-50': isActive,
+                    'text-gray-700 dark:text-gray-400 hover:bg-gray-400/25 dark:hover:bg-gray-700 focus:bg-gray-500/25 dark:focus:bg-gray-600 dark:focus:text-gray-300': !isActive,
                 },
                 className
             )}
         >
             {children}
-        </Link>
+        </NavLink>
     );
 };
 

From 56084e20772b70e3d6898df4433fca4da73d4f3a Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sun, 10 Mar 2024 21:41:13 +0100
Subject: [PATCH 23/79] added the ability to add feeds

---
 app/Http/Controllers/Api/FeedController.php   | 105 +++++++++
 .../Api/FeedDiscovererController.php          |  48 ++++
 .../Api/FeedUrlDiscovererController.php       |  25 ++
 app/Models/User.php                           |  21 ++
 .../Nodes/TypeProperty.php                    |   1 +
 resources/js/Components/TextInput.tsx         |  18 +-
 resources/js/Pages/Feeds/Partials/Form.tsx    |   2 +-
 resources/js/V2/Core/AuthenticatedLayout.tsx  |   4 +
 resources/js/V2/Core/ErrorPage.tsx            |   9 +-
 .../Core/Router/Actions/createFeedAction.ts   |  15 ++
 .../Core/Router/Loaders/createFeedLoader.ts   |   9 +
 .../js/V2/Core/Router/Loaders/feedsLoader.ts  |   9 +
 resources/js/V2/Core/Router/router.tsx        |  20 ++
 .../js/V2/Pages/Feeds/CreateFeedPage.tsx      | 220 ++++++++++++++++++
 resources/js/V2/Pages/Feeds/EditFeedPage.tsx  |  76 ++++++
 .../js/V2/Pages/Feeds/FeedsIndexPage.tsx      | 113 +++++++++
 resources/js/V2/types/CreateFeedLoaderType.ts |   6 +
 resources/js/V2/types/FeedsLoaderType.ts      |   7 +
 resources/js/types/generated/Models/User.ts   |   1 +
 routes/api.php                                |   6 +
 20 files changed, 703 insertions(+), 12 deletions(-)
 create mode 100644 app/Http/Controllers/Api/FeedController.php
 create mode 100644 app/Http/Controllers/Api/FeedDiscovererController.php
 create mode 100644 app/Http/Controllers/Api/FeedUrlDiscovererController.php
 create mode 100644 resources/js/V2/Core/Router/Actions/createFeedAction.ts
 create mode 100644 resources/js/V2/Core/Router/Loaders/createFeedLoader.ts
 create mode 100644 resources/js/V2/Core/Router/Loaders/feedsLoader.ts
 create mode 100644 resources/js/V2/Pages/Feeds/CreateFeedPage.tsx
 create mode 100644 resources/js/V2/Pages/Feeds/EditFeedPage.tsx
 create mode 100644 resources/js/V2/Pages/Feeds/FeedsIndexPage.tsx
 create mode 100644 resources/js/V2/types/CreateFeedLoaderType.ts
 create mode 100644 resources/js/V2/types/FeedsLoaderType.ts

diff --git a/app/Http/Controllers/Api/FeedController.php b/app/Http/Controllers/Api/FeedController.php
new file mode 100644
index 00000000..0e2264c8
--- /dev/null
+++ b/app/Http/Controllers/Api/FeedController.php
@@ -0,0 +1,105 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\StoreFeedRequest;
+use App\Http\Requests\UpdateFeedRequest;
+use App\Models\Feed;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Support\Arr;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Auth;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class FeedController extends Controller
+{
+    public function __construct()
+    {
+        $this->authorizeResource(Feed::class);
+    }
+
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(): JsonResponse
+    {
+        return response()->json([
+            'feeds' => Auth::user()->feeds()->with('category')->withCount('feedItems')->get(),
+            'canCreate' => Auth::user()->can('create', Feed::class),
+        ]);
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create(): JsonResponse
+    {
+        return response()->json([
+            'categories' => $this->categories(),
+        ]);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(StoreFeedRequest $request): RedirectResponse
+    {
+        $validated = $request->validated();
+
+        $feed = new Feed($validated);
+        $feed->category_id = Arr::get($validated, 'category_id');
+
+        Auth::user()->feeds()->save($feed);
+
+        return redirect()->route('feeds.index');
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(Feed $feed): Response
+    {
+        return Inertia::render('Feeds/Edit', [
+            'categories' => Auth::user()->categories()->pluck('name', 'id')->map(fn (string $name, int $id) => ['value' => $id, 'name' => $name])->values(),
+            'feed' => $feed,
+            'canDelete' => Auth::user()->can('delete', $feed),
+        ]);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(UpdateFeedRequest $request, Feed $feed): RedirectResponse
+    {
+        $validated = $request->validated();
+
+        $feed = $feed->fill($validated);
+        $feed->category_id = Arr::get($validated, 'category_id');
+
+        $feed->save();
+
+        return redirect()->route('feeds.index');
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(Feed $feed): RedirectResponse
+    {
+        $feed->feedItems()->delete();
+        $feed->delete();
+
+        return redirect()->route('feeds.index');
+    }
+
+    /**
+     * @return Collection<int, array<{value: int, name: string}>>
+     */
+    private function categories(): Collection
+    {
+        return Auth::user()->categories()->pluck('name', 'id')->map(fn (string $name, int $id) => ['value' => $id, 'name' => $name])->values();
+    }
+}
diff --git a/app/Http/Controllers/Api/FeedDiscovererController.php b/app/Http/Controllers/Api/FeedDiscovererController.php
new file mode 100644
index 00000000..b7a2953e
--- /dev/null
+++ b/app/Http/Controllers/Api/FeedDiscovererController.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\FeedDiscovererRequest;
+use GuzzleHttp\Exception\ClientException;
+use GuzzleHttp\Exception\ConnectException;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Support\Arr;
+use Kaishiyoku\HeraRssCrawler\HeraRssCrawler;
+
+class FeedDiscovererController extends Controller
+{
+    /**
+     * Handle the incoming request.
+     *
+     * @return \Illuminate\Http\JsonResponse
+     *
+     * @throws \Exception
+     */
+    public function __invoke(FeedDiscovererRequest $request, HeraRssCrawler $heraRssCrawler): JsonResponse
+    {
+        $validated = $request->validated();
+
+        try {
+            $discoveredFeedUrls = $heraRssCrawler->discoverFeedUrls(Arr::get($validated, 'feed_url'));
+
+            if ($discoveredFeedUrls->isEmpty()) {
+                abort(404, 'No feeds found.');
+            }
+
+            $feedMetadata = $heraRssCrawler->parseFeed($discoveredFeedUrls->first());
+
+            return response()->json([
+                'feed_url' => $feedMetadata->getFeedUrl() ?? $feedMetadata->getUrl(),
+                'site_url' => $feedMetadata->getUrl(),
+                'favicon_url' => $heraRssCrawler->discoverFavicon($feedMetadata->getUrl()) ?? '',
+                'name' => $feedMetadata->getTitle(),
+                'language' => $feedMetadata->getLanguage() ?? '',
+            ]);
+        } catch (ConnectException) {
+            abort(422, 'The given URL is invalid.');
+        } catch (ClientException) {
+            abort(422, 'The given URL could not be resolved.');
+        }
+    }
+}
diff --git a/app/Http/Controllers/Api/FeedUrlDiscovererController.php b/app/Http/Controllers/Api/FeedUrlDiscovererController.php
new file mode 100644
index 00000000..c1eaeb5e
--- /dev/null
+++ b/app/Http/Controllers/Api/FeedUrlDiscovererController.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\FeedUrlDiscovererRequest;
+use Illuminate\Support\Arr;
+use Kaishiyoku\HeraRssCrawler\HeraRssCrawler;
+
+class FeedUrlDiscovererController extends Controller
+{
+    /**
+     * Handle the incoming request.
+     *
+     * @return \Illuminate\Http\JsonResponse
+     *
+     * @throws \Exception
+     */
+    public function __invoke(FeedUrlDiscovererRequest $request, HeraRssCrawler $heraRssCrawler)
+    {
+        $validated = $request->validated();
+
+        return response()->json($heraRssCrawler->discoverFeedUrls(Arr::get($validated, 'feed_url')));
+    }
+}
diff --git a/app/Models/User.php b/app/Models/User.php
index b1eacee6..c76dc1f2 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -4,11 +4,13 @@
 
 use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\Relations\HasManyThrough;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
+use Illuminate\Support\Str;
 use Laravel\Sanctum\HasApiTokens;
 
 /**
@@ -86,11 +88,30 @@ class User extends Authenticatable implements MustVerifyEmail
         'email_verified_at' => 'datetime',
     ];
 
+    /**
+     * The accessors to append to the model's array form.
+     *
+     * @var array<int, string>
+     */
+    protected $appends = [
+        'months_after_pruning_feed_items',
+    ];
+
     public function scopeVerified(Builder $query): void
     {
         $query->whereNotNull('email_verified_at');
     }
 
+    /**
+     * Does the feed item has an image?
+     */
+    protected function monthsAfterPruningFeedItems(): Attribute
+    {
+        return Attribute::make(
+            get: fn (): int => config('app.months_after_pruning_feed_items'),
+        );
+    }
+
     public function categories(): HasMany
     {
         return $this->hasMany(Category::class)->orderBy('name');
diff --git a/app/Services/TypeScriptModelGenerator/Nodes/TypeProperty.php b/app/Services/TypeScriptModelGenerator/Nodes/TypeProperty.php
index 86ce2d20..db4c1a02 100644
--- a/app/Services/TypeScriptModelGenerator/Nodes/TypeProperty.php
+++ b/app/Services/TypeScriptModelGenerator/Nodes/TypeProperty.php
@@ -174,6 +174,7 @@ private function mapCodeReturnTypes(string $codeTypeName): ReturnType
     {
         return match ($codeTypeName) {
             'bool' => ReturnType::Boolean,
+            'int' => ReturnType::Number,
             default => throw new InvalidArgumentException("code return type \"{$codeTypeName}\"not matched"),
         };
     }
diff --git a/resources/js/Components/TextInput.tsx b/resources/js/Components/TextInput.tsx
index 424e01de..01e2c86d 100644
--- a/resources/js/Components/TextInput.tsx
+++ b/resources/js/Components/TextInput.tsx
@@ -1,19 +1,19 @@
-import {forwardRef, InputHTMLAttributes, useEffect, useImperativeHandle, useRef} from 'react';
+import {forwardRef, InputHTMLAttributes, Ref, useEffect, useImperativeHandle, useRef} from 'react';
 import clsx from 'clsx';
 
-export default forwardRef(function TextInput(
-    {type = 'text', className = '', isFocused = false, ...props}: InputHTMLAttributes<HTMLInputElement> & { isFocused?: boolean; },
+type TextInputProps = InputHTMLAttributes<HTMLInputElement> & { isFocused?: boolean; };
+
+export default forwardRef<HTMLInputElement, TextInputProps>(function TextInput(
+    {type = 'text', className = '', isFocused = false, ...props}: TextInputProps,
     ref
 ) {
-    const localRef = useRef<HTMLInputElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
 
-    useImperativeHandle(ref, () => ({
-        focus: () => localRef.current?.focus(),
-    }));
+    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
 
     useEffect(() => {
         if (isFocused) {
-            localRef.current?.focus();
+            inputRef.current?.focus();
         }
     }, []);
 
@@ -26,7 +26,7 @@ export default forwardRef(function TextInput(
                 className,
                 {'opacity-50': props.disabled}
             )}
-            ref={localRef}
+            ref={inputRef}
         />
     );
 });
diff --git a/resources/js/Pages/Feeds/Partials/Form.tsx b/resources/js/Pages/Feeds/Partials/Form.tsx
index 0a8fe9b0..bee50ade 100644
--- a/resources/js/Pages/Feeds/Partials/Form.tsx
+++ b/resources/js/Pages/Feeds/Partials/Form.tsx
@@ -151,7 +151,7 @@ export default function Form({method, action, feed, categories}: { method: 'post
                             required
                         />
 
-                        <InputError className="mt-2" message={errors.name}/>
+                        <InputError className="mt-2" message={errors.language}/>
                     </div>
                 </div>
 
diff --git a/resources/js/V2/Core/AuthenticatedLayout.tsx b/resources/js/V2/Core/AuthenticatedLayout.tsx
index 1ea21859..c0c69950 100644
--- a/resources/js/V2/Core/AuthenticatedLayout.tsx
+++ b/resources/js/V2/Core/AuthenticatedLayout.tsx
@@ -58,6 +58,10 @@ const AuthenticatedLayout = () => {
                             {t('Categories')}
                         </Dropdown.Link>
 
+                        <Dropdown.Link to="/app/feeds">
+                            {t('Feeds')}
+                        </Dropdown.Link>
+
                         <Dropdown.Button onClick={handleLogout}>
                             {t('Logout')}
                         </Dropdown.Button>
diff --git a/resources/js/V2/Core/ErrorPage.tsx b/resources/js/V2/Core/ErrorPage.tsx
index 194647d4..10b5b72b 100644
--- a/resources/js/V2/Core/ErrorPage.tsx
+++ b/resources/js/V2/Core/ErrorPage.tsx
@@ -1,11 +1,16 @@
-import {isRouteErrorResponse, useRouteError} from 'react-router-dom';
+import {isRouteErrorResponse, useAsyncError, useRouteError} from 'react-router-dom';
 
 export default function ErrorPage() {
     const error = useRouteError();
+    const asyncError = useAsyncError();
+
+    if (asyncError) {
+        return <div>Async error occurred: {JSON.stringify({asyncError})}</div>;
+    }
 
     if (isRouteErrorResponse(error)) {
         return <div>{error.status} {error.statusText}.</div>;
     }
 
-    return <div>Unknown error occurred.</div>;
+    return <div>Unknown error occurred: {JSON.stringify(error)}</div>;
 }
diff --git a/resources/js/V2/Core/Router/Actions/createFeedAction.ts b/resources/js/V2/Core/Router/Actions/createFeedAction.ts
new file mode 100644
index 00000000..6a6ae9ff
--- /dev/null
+++ b/resources/js/V2/Core/Router/Actions/createFeedAction.ts
@@ -0,0 +1,15 @@
+import request from '@/V2/request';
+import {ActionFunction} from '@remix-run/router/utils';
+import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
+
+const createFeedAction: ActionFunction = async ({request: req}) => {
+    const formData = await req.formData();
+
+    if (!formData.get('is_purgeable')) {
+        formData.append('is_purgeable', '0');
+    }
+
+    return await handleRequestValidationError(() => request.post('/api/feeds', {json: Object.fromEntries(formData)}));
+};
+
+export default createFeedAction;
diff --git a/resources/js/V2/Core/Router/Loaders/createFeedLoader.ts b/resources/js/V2/Core/Router/Loaders/createFeedLoader.ts
new file mode 100644
index 00000000..867c57df
--- /dev/null
+++ b/resources/js/V2/Core/Router/Loaders/createFeedLoader.ts
@@ -0,0 +1,9 @@
+import request from '@/V2/request';
+import {LoaderFunction} from '@remix-run/router/utils';
+import CreateFeedLoaderType from '@/V2/types/CreateFeedLoaderType';
+
+const createFeedLoader: LoaderFunction = async () => {
+    return await request('/api/feeds/create').json<CreateFeedLoaderType>();
+};
+
+export default createFeedLoader;
diff --git a/resources/js/V2/Core/Router/Loaders/feedsLoader.ts b/resources/js/V2/Core/Router/Loaders/feedsLoader.ts
new file mode 100644
index 00000000..8d668bed
--- /dev/null
+++ b/resources/js/V2/Core/Router/Loaders/feedsLoader.ts
@@ -0,0 +1,9 @@
+import request from '@/V2/request';
+import {LoaderFunction} from '@remix-run/router/utils';
+import FeedsLoaderType from '@/V2/types/FeedsLoaderType';
+
+const feedsLoader: LoaderFunction = async () => {
+    return await request('/api/feeds').json<FeedsLoaderType>();
+};
+
+export default feedsLoader;
diff --git a/resources/js/V2/Core/Router/router.tsx b/resources/js/V2/Core/Router/router.tsx
index 9af935c7..cd07c56c 100644
--- a/resources/js/V2/Core/Router/router.tsx
+++ b/resources/js/V2/Core/Router/router.tsx
@@ -11,6 +11,11 @@ import updateCategoryAction from '@/V2/Core/Router/Actions/updateCategoryAction'
 import ErrorPage from '@/V2/Core/ErrorPage';
 import AuthProvider from '@/V2/Core/AuthProvider';
 import createCategoryAction from '@/V2/Core/Router/Actions/createCategoryAction';
+import FeedsIndexPage from '@/V2/Pages/Feeds/FeedsIndexPage';
+import feedsLoader from '@/V2/Core/Router/Loaders/feedsLoader';
+import CreateFeedPage from '@/V2/Pages/Feeds/CreateFeedPage';
+import createFeedLoader from '@/V2/Core/Router/Loaders/createFeedLoader';
+import createFeedAction from '@/V2/Core/Router/Actions/createFeedAction';
 
 const router = createBrowserRouter([
     {
@@ -41,6 +46,21 @@ const router = createBrowserRouter([
                     },
                 ],
             },
+            {
+                path: 'feeds',
+                element: <FeedsIndexPage/>,
+                loader: feedsLoader,
+                handle: {titleKey: 'Feeds'} as RouteHandle,
+                children: [
+                    {
+                        path: 'create',
+                        element: <CreateFeedPage/>,
+                        loader: createFeedLoader,
+                        action: createFeedAction,
+                        handle: {hide: true, titleKey: 'Add feed'} as RouteHandle,
+                    },
+                ],
+            },
         ],
     },
 ]);
diff --git a/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx b/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx
new file mode 100644
index 00000000..8ece7ad2
--- /dev/null
+++ b/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx
@@ -0,0 +1,220 @@
+import {Form, useActionData, useLoaderData} from 'react-router-dom';
+import TextInput from '@/Components/TextInput';
+import usePageModal from '@/V2/Hooks/usePageModal';
+import ValidationErrors from '@/V2/types/ValidationErrors';
+import InputError from '@/Components/InputError';
+import {PrimaryButton, SecondaryButton} from '@/Components/Button';
+import InputLabel from '@/Components/InputLabel';
+import React, {useImperativeHandle, useRef, useState} from 'react';
+import {useLaravelReactI18n} from 'laravel-react-i18n';
+import {Pane, PaneBody, PaneHeader} from '@/Components/Modal/Pane';
+import Select from '@/Components/Select';
+import Checkbox from '@/Components/Checkbox';
+import useAuth from '@/V2/Hooks/useAuth';
+import CreateFeedLoaderType from '@/V2/types/CreateFeedLoaderType';
+import request from '@/V2/request';
+import DiscoveredFeed from '@/types/DiscoveredFeed';
+import LinkStack from '@/Components/LinkStack';
+
+type FeedsCreateValidationErrors = ValidationErrors & {
+    name?: string;
+    category_id?: string;
+    language?: string;
+    feed_url?: string;
+    site_url?: string;
+    favicon_url?: string;
+} | null;
+
+export default function CreateFeedPage() {
+    const {t, tChoice} = useLaravelReactI18n();
+    const {user} = useAuth();
+    const {categories} = useLoaderData() as CreateFeedLoaderType;
+    const errors = useActionData() as FeedsCreateValidationErrors;
+    const {show, handleClose} = usePageModal(errors, '/app/feeds');
+    const [isDiscoverFeedProcessing, setIsDiscoverFeedProcessing] = useState(false);
+    const [searchUrl, setSearchUrl] = useState('');
+    const [discoveredFeedUrls, setDiscoveredFeedUrls] = useState<string[]>([]);
+    const nameRef = useRef<HTMLInputElement>(null);
+    const languageRef = useRef<HTMLInputElement>(null);
+    const feedUrlRef = useRef<HTMLInputElement>(null);
+    const siteUrlRef = useRef<HTMLInputElement>(null);
+    const faviconUrlRef = useRef<HTMLInputElement>(null);
+
+    const discoverFeedUrls = (searchUrl: string) => {
+        setDiscoveredFeedUrls([]);
+        setIsDiscoverFeedProcessing(true);
+
+        request.post('/api/discover-feed-urls', {json: {feed_url: searchUrl}})
+            .json<string[]>()
+            .then((data) => {
+                setDiscoveredFeedUrls(data);
+            })
+            .catch((error) => {
+                console.error(error);
+            })
+            .finally(() => setIsDiscoverFeedProcessing(false));
+    };
+
+    const selectDiscoveredFeedUrl = (feedUrl: string) => () => {
+        setIsDiscoverFeedProcessing(true);
+
+        request.post('/api/discover-feed', {json: {feed_url: feedUrl}})
+            .json<DiscoveredFeed>()
+            .then((responseData) => {
+                nameRef.current!.value = responseData.name;
+                languageRef.current!.value = responseData.language;
+                feedUrlRef.current!.value = responseData.feed_url;
+                siteUrlRef.current!.value = responseData.site_url;
+                faviconUrlRef.current!.value = responseData.favicon_url;
+
+                setSearchUrl('');
+                setDiscoveredFeedUrls([]);
+            })
+            .catch((error) => {
+                console.error(error);
+            })
+            .finally(() => setIsDiscoverFeedProcessing(false));
+    };
+
+    return (
+        <Pane appear show={show} onClose={handleClose}>
+            <PaneHeader>
+                {t('Add feed')}
+            </PaneHeader>
+
+            <PaneBody>
+                <Form method="post" action="/app/feeds/create" className="space-y-4">
+                    <div className="flex">
+                        <TextInput
+                            id="search_url"
+                            className="grow w-full rounded-r-none border-r-0"
+                            placeholder={t('Search URL...')}
+                            value={searchUrl}
+                            onChange={(e) => setSearchUrl(e.target.value)}
+                            isFocused
+                        />
+
+                        <SecondaryButton
+                            className="rounded-l-none border border-gray-300 dark:border-gray-700"
+                            onClick={() => discoverFeedUrls(searchUrl)}
+                            disabled={isDiscoverFeedProcessing || searchUrl.length < 5}
+                        >
+                            {t('Search')}
+                        </SecondaryButton>
+                    </div>
+
+                    {discoveredFeedUrls.length > 0 && (
+                        <LinkStack>
+                            {discoveredFeedUrls.map((discoveredFeedUrl) => (
+                                <button
+                                    key={discoveredFeedUrl}
+                                    type="button"
+                                    className="block w-full text-left px-4 py-2 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600 first:rounded-t last:rounded-b transition"
+                                    onClick={selectDiscoveredFeedUrl(discoveredFeedUrl)}
+                                >
+                                    {discoveredFeedUrl}
+                                </button>
+                            ))}
+                        </LinkStack>
+                    )}
+
+                    <div>
+                        <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
+                        <TextInput
+                            ref={nameRef}
+                            id="name"
+                            name="name"
+                            className="block w-full"
+                            required
+                            isFocused
+                        />
+                        <InputError message={errors?.name}/>
+                    </div>
+
+                    <div>
+                        <InputLabel htmlFor="category_id" value={t('validation.attributes.category_id')} required/>
+
+                        <Select
+                            id="category_id"
+                            name="category_id"
+                            className="mt-1 block w-full"
+                            options={categories}
+                            required
+                        />
+
+                        <InputError message={errors?.category_id}/>
+                    </div>
+
+                    <div>
+                        <InputLabel htmlFor="language" value={t('validation.attributes.language')} required/>
+
+                        <TextInput
+                            ref={languageRef}
+                            id="language"
+                            name="language"
+                            className="mt-1 block w-full"
+                            required
+                        />
+
+                        <InputError className="mt-2" message={errors?.language}/>
+                    </div>
+
+                    <div>
+                        <InputLabel htmlFor="feed_url" value={t('validation.attributes.feed_url')} required/>
+
+                        <TextInput
+                            ref={feedUrlRef}
+                            id="feed_url"
+                            name="feed_url"
+                            className="mt-1 block w-full"
+                            required
+                        />
+
+                        <InputError className="mt-2" message={errors?.feed_url}/>
+                    </div>
+
+                    <div>
+                        <InputLabel htmlFor="site_url" value={t('validation.attributes.site_url')} required/>
+
+                        <TextInput
+                            ref={siteUrlRef}
+                            id="site_url"
+                            name="site_url"
+                            className="mt-1 block w-full"
+                            required
+                        />
+
+                        <InputError className="mt-2" message={errors?.site_url}/>
+                    </div>
+
+                    <div>
+                        <InputLabel htmlFor="favicon_url" value={t('validation.attributes.favicon_url')}/>
+
+                        <TextInput
+                            ref={faviconUrlRef}
+                            id="favicon_url"
+                            name="favicon_url"
+                            className="mt-1 block w-full"
+                        />
+
+                        <InputError className="mt-2" message={errors?.site_url}/>
+                    </div>
+
+                    <div>
+                        <label className="flex items-center w-fit">
+                            <Checkbox name="is_purgeable" value={true}/>
+
+                            <span className="ml-2 text-sm text-gray-600 dark:text-gray-400">
+                                {tChoice('feed.purge', user!.months_after_pruning_feed_items)}
+                            </span>
+                        </label>
+                    </div>
+
+                    <PrimaryButton type="submit">
+                        {t('Save')}
+                    </PrimaryButton>
+                </Form>
+            </PaneBody>
+        </Pane>
+    );
+}
diff --git a/resources/js/V2/Pages/Feeds/EditFeedPage.tsx b/resources/js/V2/Pages/Feeds/EditFeedPage.tsx
new file mode 100644
index 00000000..3784da3f
--- /dev/null
+++ b/resources/js/V2/Pages/Feeds/EditFeedPage.tsx
@@ -0,0 +1,76 @@
+import {Form, useActionData, useLoaderData, useParams, useSubmit} from 'react-router-dom';
+import TextInput from '@/Components/TextInput';
+import usePageModal from '@/V2/Hooks/usePageModal';
+import ValidationErrors from '@/V2/types/ValidationErrors';
+import InputError from '@/Components/InputError';
+import {HeadlessButton, PrimaryButton} from '@/Components/Button';
+import InputLabel from '@/Components/InputLabel';
+import React from 'react';
+import {useLaravelReactI18n} from 'laravel-react-i18n';
+import {Pane, PaneBody, PaneFooter, PaneHeader} from '@/Components/Modal/Pane';
+import CategoryLoaderType from '@/V2/types/CategoryLoaderType';
+import Actions from '@/Components/Actions';
+
+type CategoriesCreateValidationErrors = ValidationErrors & { name?: string; } | null;
+
+export default function EditFeedPage() {
+    const {t} = useLaravelReactI18n();
+    const {categoryId} = useParams();
+    const {category, canDelete} = useLoaderData() as CategoryLoaderType;
+    const errors = useActionData() as CategoriesCreateValidationErrors;
+    const {show, handleClose} = usePageModal(errors, '/app/categories');
+    const submit = useSubmit();
+
+    const handleDelete = () => {
+        const formData = new FormData();
+        formData.append('intent', 'delete');
+
+        submit(formData, {method: 'delete', action: `/app/categories/${categoryId}/edit`});
+    };
+
+    return (
+        <Pane appear show={show} onClose={handleClose}>
+            <PaneHeader>
+                {t('Edit category')}
+            </PaneHeader>
+
+            <PaneBody>
+                <Form method="put" action={`/app/categories/${categoryId}/edit`} className="space-y-4">
+                    <div>
+                        <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
+                        <TextInput
+                            id="name"
+                            name="name"
+                            defaultValue={category.name}
+                            className="block w-full"
+                            required
+                            isFocused
+                        />
+                        <InputError message={errors?.name}/>
+                    </div>
+
+                    <PrimaryButton type="submit">
+                        {t('Save')}
+                    </PrimaryButton>
+                </Form>
+            </PaneBody>
+
+            <PaneFooter>
+                <Actions footer>
+                    {canDelete && (
+                        <HeadlessButton
+                            confirm
+                            confirmTitle={t('Do you really want to delete this category?')}
+                            confirmSubmitTitle={t('Delete category')}
+                            confirmCancelTitle={t('Cancel')}
+                            onClick={handleDelete}
+                            className="link-danger"
+                        >
+                            {t('Delete')}
+                        </HeadlessButton>
+                    )}
+                </Actions>
+            </PaneFooter>
+        </Pane>
+    );
+}
diff --git a/resources/js/V2/Pages/Feeds/FeedsIndexPage.tsx b/resources/js/V2/Pages/Feeds/FeedsIndexPage.tsx
new file mode 100644
index 00000000..a24b95aa
--- /dev/null
+++ b/resources/js/V2/Pages/Feeds/FeedsIndexPage.tsx
@@ -0,0 +1,113 @@
+import {Link, Outlet, useLoaderData} from 'react-router-dom';
+import {useLaravelReactI18n} from 'laravel-react-i18n';
+import Actions from '@/Components/Actions';
+import LinkStack from '@/Components/LinkStack';
+import {isEmpty} from 'ramda';
+import EmptyState from '@/Components/EmptyState';
+import FeedsLoaderType from '@/V2/types/FeedsLoaderType';
+import NewspaperSolidIcon from '@/Icons/NewspaperSolidIcon';
+import PhotoSolidIcon from '@/Icons/PhotoSolidIcon';
+import formatDateTime from '@/Utils/formatDateTime';
+import useAuth from '@/V2/Hooks/useAuth';
+
+export default function FeedsIndexPage() {
+    const {user} = useAuth();
+    const {feeds, canCreate} = useLoaderData() as FeedsLoaderType;
+    const {t, tChoice} = useLaravelReactI18n();
+
+    return (
+        <div>
+            <Actions>
+                {canCreate && (
+                    <Link to="/app/feeds/create" className="link-secondary">
+                        {t('Add feed')}
+                    </Link>
+                )}
+            </Actions>
+
+            {isEmpty(feeds)
+                ? (
+                    <EmptyState
+                        icon={NewspaperSolidIcon}
+                        message={t('No feeds.')}
+                        description={t('Get started by creating a new feed.')}
+                    />
+                )
+                : (
+                    <LinkStack>
+                        {feeds.map((feed) => (
+                            <LinkStack.Item
+                                key={feed.id}
+                                to={`/app/feeds/${feed.id}/edit`}
+                                className="block sm:flex justify-between"
+                            >
+                                <div className="flex items-center">
+                                    {feed.favicon_url
+                                        ? (
+                                            <img
+                                                loading="lazy"
+                                                src={feed.favicon_url}
+                                                alt={feed.name}
+                                                className="w-5 h-5 rounded mr-4"
+                                            />
+                                        )
+                                        : <PhotoSolidIcon className="w-5 h-5 mr-4"/>
+                                    }
+
+                                    <div>
+                                        <div className="font-semibold">
+                                            {feed.name}
+                                        </div>
+
+                                        <div className="text-sm text-muted">
+                                            {feed.category.name}
+                                        </div>
+
+                                        <div className="sm:hidden text-sm">
+                                            <div className="text-muted">
+                                                {tChoice('feed.feed_items_count', feed.feed_items_count)}
+                                            </div>
+
+                                            <div className="text-muted">
+                                                {feed.is_purgeable
+                                                    ? tChoice('feed.purge', user!.months_after_pruning_feed_items)
+                                                    : t('feed.no_purge')
+                                                }
+                                            </div>
+
+                                            {feed.last_failed_at && (
+                                                <div className="text-pink-500">
+                                                    {t('feed.last_failed_at', {date: formatDateTime(feed.last_failed_at)})}
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="hidden sm:block text-sm text-right">
+                                    <div className="text-muted">
+                                        {tChoice('feed.feed_items_count', feed.feed_items_count)}
+                                    </div>
+
+                                    <div className="text-muted">
+                                        {feed.is_purgeable
+                                            ? tChoice('feed.purge', user!.months_after_pruning_feed_items)
+                                            : t('feed.no_purge')
+                                        }
+                                    </div>
+
+                                    {feed.last_failed_at && (
+                                        <div className="text-pink-500">
+                                            {t('feed.last_failed_at', {date: formatDateTime(feed.last_failed_at)})}
+                                        </div>
+                                    )}
+                                </div>
+                            </LinkStack.Item>
+                        ))}
+                    </LinkStack>
+                )}
+
+            <Outlet/>
+        </div>
+    );
+}
diff --git a/resources/js/V2/types/CreateFeedLoaderType.ts b/resources/js/V2/types/CreateFeedLoaderType.ts
new file mode 100644
index 00000000..0a6129da
--- /dev/null
+++ b/resources/js/V2/types/CreateFeedLoaderType.ts
@@ -0,0 +1,6 @@
+import {SelectNumberOption} from '@/types/SelectOption';
+
+type CreateFeedLoaderType = {
+    categories: SelectNumberOption[];
+}
+export default CreateFeedLoaderType;
diff --git a/resources/js/V2/types/FeedsLoaderType.ts b/resources/js/V2/types/FeedsLoaderType.ts
new file mode 100644
index 00000000..d358e054
--- /dev/null
+++ b/resources/js/V2/types/FeedsLoaderType.ts
@@ -0,0 +1,7 @@
+import FeedWithFeedItemsCount from '@/types/generated/Models/FeedWithFeedItemsCount';
+
+type FeedsLoaderType = {
+    feeds: FeedWithFeedItemsCount[];
+    canCreate: boolean;
+}
+export default FeedsLoaderType;
diff --git a/resources/js/types/generated/Models/User.ts b/resources/js/types/generated/Models/User.ts
index 91a04733..20ecaae6 100644
--- a/resources/js/types/generated/Models/User.ts
+++ b/resources/js/types/generated/Models/User.ts
@@ -13,6 +13,7 @@ type User = {
     is_admin: boolean /** cast attribute */;
     created_at: string | null;
     updated_at: string | null;
+    months_after_pruning_feed_items: number /** model attribute */;
     categories: Category[];
     feeds: Feed[];
     feedItems: FeedItem[];
diff --git a/routes/api.php b/routes/api.php
index 5e86438e..44cad8e8 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,6 +1,8 @@
 <?php
 
 use App\Http\Controllers\Api\CategoryController;
+use App\Http\Controllers\Api\FeedController;
+use App\Http\Controllers\Api\FeedDiscovererController;
 use App\Http\Controllers\Auth\AuthenticatedSessionController;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
@@ -20,4 +22,8 @@
     Route::get('/user', fn (Request $request) => $request->user());
     Route::delete('/logout', [AuthenticatedSessionController::class, 'destroy'])->name('logout');
     Route::resource('categories', CategoryController::class);
+    Route::resource('feeds', FeedController::class);
+
+    Route::post('discover-feed', FeedDiscovererController::class)->name('discover-feed');
+    Route::post('discover-feed-urls', \App\Http\Controllers\Api\FeedUrlDiscovererController::class)->name('discover-feed-urls');
 });

From e1cad3c6223c7b742b2285bd3e2f831fd264e01c Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Mon, 11 Mar 2024 20:05:45 +0100
Subject: [PATCH 24/79] added spacer between feeds and logout link

---
 resources/js/V2/Core/AuthenticatedLayout.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/resources/js/V2/Core/AuthenticatedLayout.tsx b/resources/js/V2/Core/AuthenticatedLayout.tsx
index c0c69950..469c2083 100644
--- a/resources/js/V2/Core/AuthenticatedLayout.tsx
+++ b/resources/js/V2/Core/AuthenticatedLayout.tsx
@@ -62,6 +62,8 @@ const AuthenticatedLayout = () => {
                             {t('Feeds')}
                         </Dropdown.Link>
 
+                        <Dropdown.Spacer/>
+
                         <Dropdown.Button onClick={handleLogout}>
                             {t('Logout')}
                         </Dropdown.Button>

From a31f286bec2328ef3578e18b9d292a5bfdc59109 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Mon, 11 Mar 2024 22:32:08 +0100
Subject: [PATCH 25/79] added the ability to edit and delete feeds

---
 app/Http/Controllers/Api/FeedController.php   |  16 +-
 resources/js/Components/Checkbox.tsx          |   3 +
 .../Core/Router/Actions/updateFeedAction.ts   |  21 ++
 .../V2/Core/Router/Loaders/categoryLoader.ts  |   9 -
 .../Core/Router/Loaders/editCategoryLoader.ts |  10 +
 .../V2/Core/Router/Loaders/editFeedLoader.ts  |   9 +
 resources/js/V2/Core/Router/router.tsx        |  14 +-
 .../V2/Pages/Categories/EditCategoryPage.tsx  |   4 +-
 resources/js/V2/Pages/Feeds/EditFeedPage.tsx  | 207 ++++++++++++++++--
 ...oaderType.ts => EditCategoryLoaderType.ts} |   4 +-
 resources/js/V2/types/EditFeddLoaderType.ts   |  10 +
 routes/api.php                                |   1 +
 12 files changed, 269 insertions(+), 39 deletions(-)
 create mode 100644 resources/js/V2/Core/Router/Actions/updateFeedAction.ts
 delete mode 100644 resources/js/V2/Core/Router/Loaders/categoryLoader.ts
 create mode 100644 resources/js/V2/Core/Router/Loaders/editCategoryLoader.ts
 create mode 100644 resources/js/V2/Core/Router/Loaders/editFeedLoader.ts
 rename resources/js/V2/types/{CategoryLoaderType.ts => EditCategoryLoaderType.ts} (60%)
 create mode 100644 resources/js/V2/types/EditFeddLoaderType.ts

diff --git a/app/Http/Controllers/Api/FeedController.php b/app/Http/Controllers/Api/FeedController.php
index 0e2264c8..5db6b4ac 100644
--- a/app/Http/Controllers/Api/FeedController.php
+++ b/app/Http/Controllers/Api/FeedController.php
@@ -11,8 +11,6 @@
 use Illuminate\Support\Arr;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Auth;
-use Inertia\Inertia;
-use Inertia\Response;
 
 class FeedController extends Controller
 {
@@ -60,10 +58,10 @@ public function store(StoreFeedRequest $request): RedirectResponse
     /**
      * Show the form for editing the specified resource.
      */
-    public function edit(Feed $feed): Response
+    public function edit(Feed $feed): JsonResponse
     {
-        return Inertia::render('Feeds/Edit', [
-            'categories' => Auth::user()->categories()->pluck('name', 'id')->map(fn (string $name, int $id) => ['value' => $id, 'name' => $name])->values(),
+        return response()->json([
+            'categories' => $this->categories(),
             'feed' => $feed,
             'canDelete' => Auth::user()->can('delete', $feed),
         ]);
@@ -72,7 +70,7 @@ public function edit(Feed $feed): Response
     /**
      * Update the specified resource in storage.
      */
-    public function update(UpdateFeedRequest $request, Feed $feed): RedirectResponse
+    public function update(UpdateFeedRequest $request, Feed $feed): JsonResponse
     {
         $validated = $request->validated();
 
@@ -81,18 +79,18 @@ public function update(UpdateFeedRequest $request, Feed $feed): RedirectResponse
 
         $feed->save();
 
-        return redirect()->route('feeds.index');
+        return response()->json();
     }
 
     /**
      * Remove the specified resource from storage.
      */
-    public function destroy(Feed $feed): RedirectResponse
+    public function destroy(Feed $feed): JsonResponse
     {
         $feed->feedItems()->delete();
         $feed->delete();
 
-        return redirect()->route('feeds.index');
+        return response()->json();
     }
 
     /**
diff --git a/resources/js/Components/Checkbox.tsx b/resources/js/Components/Checkbox.tsx
index 2b361b1c..85f5e3d9 100644
--- a/resources/js/Components/Checkbox.tsx
+++ b/resources/js/Components/Checkbox.tsx
@@ -4,6 +4,7 @@ export default function Checkbox(
     {
         name,
         checked,
+        defaultChecked,
         value,
         disabled = false,
         onChange = noop,
@@ -11,6 +12,7 @@ export default function Checkbox(
     }: {
         name: string;
         checked?: boolean;
+        defaultChecked?: boolean;
         value: string | number | boolean;
         disabled?: boolean;
         onChange?: (event: React.FormEvent<HTMLInputElement>) => void;
@@ -22,6 +24,7 @@ export default function Checkbox(
             type="checkbox"
             name={name}
             checked={checked}
+            defaultChecked={defaultChecked}
             value={value.toString()}
             disabled={disabled}
             onChange={onChange}
diff --git a/resources/js/V2/Core/Router/Actions/updateFeedAction.ts b/resources/js/V2/Core/Router/Actions/updateFeedAction.ts
new file mode 100644
index 00000000..762fac43
--- /dev/null
+++ b/resources/js/V2/Core/Router/Actions/updateFeedAction.ts
@@ -0,0 +1,21 @@
+import request from '@/V2/request';
+import {ActionFunction} from '@remix-run/router/utils';
+import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
+
+const updateFeedAction: ActionFunction = async ({params, request: req}) => {
+    const formData = await req.formData();
+
+    if (!formData.get('is_purgeable')) {
+        formData.append('is_purgeable', '0');
+    }
+
+    if (formData.get('intent') === 'delete') {
+        await request.delete(`/api/feeds/${params.feedId}`);
+
+        return null;
+    }
+
+    return await handleRequestValidationError(() => request.put(`/api/feeds/${params.feedId}`, {json: Object.fromEntries(formData)}));
+};
+
+export default updateFeedAction;
diff --git a/resources/js/V2/Core/Router/Loaders/categoryLoader.ts b/resources/js/V2/Core/Router/Loaders/categoryLoader.ts
deleted file mode 100644
index 2cd0c3d9..00000000
--- a/resources/js/V2/Core/Router/Loaders/categoryLoader.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import request from '@/V2/request';
-import {LoaderFunction} from '@remix-run/router/utils';
-import CategoriesLoaderType from '@/V2/types/CategoriesLoaderType';
-
-const categoryLoader = (suffix?: string): LoaderFunction => async ({params}) => {
-    return await request(`/api/categories/${params.categoryId}${suffix}`).json<CategoriesLoaderType>();
-};
-
-export default categoryLoader;
diff --git a/resources/js/V2/Core/Router/Loaders/editCategoryLoader.ts b/resources/js/V2/Core/Router/Loaders/editCategoryLoader.ts
new file mode 100644
index 00000000..2a268cd4
--- /dev/null
+++ b/resources/js/V2/Core/Router/Loaders/editCategoryLoader.ts
@@ -0,0 +1,10 @@
+import request from '@/V2/request';
+import {LoaderFunction} from '@remix-run/router/utils';
+import CategoriesLoaderType from '@/V2/types/CategoriesLoaderType';
+import EditCategoryLoaderType from '@/V2/types/EditCategoryLoaderType';
+
+const editCategoryLoader: LoaderFunction = async ({params}) => {
+    return await request(`/api/categories/${params.categoryId}/edit`).json<EditCategoryLoaderType>();
+};
+
+export default editCategoryLoader;
diff --git a/resources/js/V2/Core/Router/Loaders/editFeedLoader.ts b/resources/js/V2/Core/Router/Loaders/editFeedLoader.ts
new file mode 100644
index 00000000..757be191
--- /dev/null
+++ b/resources/js/V2/Core/Router/Loaders/editFeedLoader.ts
@@ -0,0 +1,9 @@
+import request from '@/V2/request';
+import {LoaderFunction} from '@remix-run/router/utils';
+import EditFeedLoaderType from '@/V2/types/EditFeddLoaderType';
+
+const editFeedLoader: LoaderFunction = async ({params}) => {
+    return await request(`/api/feeds/${params.feedId}/edit`).json<EditFeedLoaderType>();
+};
+
+export default editFeedLoader;
diff --git a/resources/js/V2/Core/Router/router.tsx b/resources/js/V2/Core/Router/router.tsx
index cd07c56c..1eda898a 100644
--- a/resources/js/V2/Core/Router/router.tsx
+++ b/resources/js/V2/Core/Router/router.tsx
@@ -5,7 +5,7 @@ import CategoriesIndexPage from '@/V2/Pages/Categories/CategoriesIndexPage';
 import CreateCategoryPage from '@/V2/Pages/Categories/CreateCategoryPage';
 import RouteHandle from '@/V2/types/RouteHandle';
 import EditCategoryPage from '@/V2/Pages/Categories/EditCategoryPage';
-import categoryLoader from '@/V2/Core/Router/Loaders/categoryLoader';
+import editCategoryLoader from '@/V2/Core/Router/Loaders/editCategoryLoader';
 import layoutLoader from '@/V2/Core/Router/Loaders/layoutLoader';
 import updateCategoryAction from '@/V2/Core/Router/Actions/updateCategoryAction';
 import ErrorPage from '@/V2/Core/ErrorPage';
@@ -16,6 +16,9 @@ import feedsLoader from '@/V2/Core/Router/Loaders/feedsLoader';
 import CreateFeedPage from '@/V2/Pages/Feeds/CreateFeedPage';
 import createFeedLoader from '@/V2/Core/Router/Loaders/createFeedLoader';
 import createFeedAction from '@/V2/Core/Router/Actions/createFeedAction';
+import EditFeedPage from '@/V2/Pages/Feeds/EditFeedPage';
+import editFeedLoader from '@/V2/Core/Router/Loaders/editFeedLoader';
+import updateFeedAction from '@/V2/Core/Router/Actions/updateFeedAction';
 
 const router = createBrowserRouter([
     {
@@ -40,7 +43,7 @@ const router = createBrowserRouter([
                     {
                         path: ':categoryId/edit',
                         element: <EditCategoryPage/>,
-                        loader: categoryLoader('/edit'),
+                        loader: editCategoryLoader,
                         action: updateCategoryAction,
                         handle: {hide: true, titleKey: 'Edit category'} as RouteHandle,
                     },
@@ -59,6 +62,13 @@ const router = createBrowserRouter([
                         action: createFeedAction,
                         handle: {hide: true, titleKey: 'Add feed'} as RouteHandle,
                     },
+                    {
+                        path: ':feedId/edit',
+                        element: <EditFeedPage/>,
+                        loader: editFeedLoader,
+                        action: updateFeedAction,
+                        handle: {hide: true, titleKey: 'Edit feed'} as RouteHandle,
+                    },
                 ],
             },
         ],
diff --git a/resources/js/V2/Pages/Categories/EditCategoryPage.tsx b/resources/js/V2/Pages/Categories/EditCategoryPage.tsx
index d0df3cad..c402f397 100644
--- a/resources/js/V2/Pages/Categories/EditCategoryPage.tsx
+++ b/resources/js/V2/Pages/Categories/EditCategoryPage.tsx
@@ -8,7 +8,7 @@ import InputLabel from '@/Components/InputLabel';
 import React from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {Pane, PaneBody, PaneFooter, PaneHeader} from '@/Components/Modal/Pane';
-import CategoryLoaderType from '@/V2/types/CategoryLoaderType';
+import EditCategoryLoaderType from '@/V2/types/EditCategoryLoaderType';
 import Actions from '@/Components/Actions';
 
 type CategoriesCreateValidationErrors = ValidationErrors & { name?: string; } | null;
@@ -16,7 +16,7 @@ type CategoriesCreateValidationErrors = ValidationErrors & { name?: string; } |
 export default function EditCategoryPage() {
     const {t} = useLaravelReactI18n();
     const {categoryId} = useParams();
-    const {category, canDelete} = useLoaderData() as CategoryLoaderType;
+    const {category, canDelete} = useLoaderData() as EditCategoryLoaderType;
     const errors = useActionData() as CategoriesCreateValidationErrors;
     const {show, handleClose} = usePageModal(errors, '/app/categories');
     const submit = useSubmit();
diff --git a/resources/js/V2/Pages/Feeds/EditFeedPage.tsx b/resources/js/V2/Pages/Feeds/EditFeedPage.tsx
index 3784da3f..335cd949 100644
--- a/resources/js/V2/Pages/Feeds/EditFeedPage.tsx
+++ b/resources/js/V2/Pages/Feeds/EditFeedPage.tsx
@@ -3,45 +3,138 @@ import TextInput from '@/Components/TextInput';
 import usePageModal from '@/V2/Hooks/usePageModal';
 import ValidationErrors from '@/V2/types/ValidationErrors';
 import InputError from '@/Components/InputError';
-import {HeadlessButton, PrimaryButton} from '@/Components/Button';
+import {HeadlessButton, PrimaryButton, SecondaryButton} from '@/Components/Button';
 import InputLabel from '@/Components/InputLabel';
-import React from 'react';
+import React, {useRef, useState} from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {Pane, PaneBody, PaneFooter, PaneHeader} from '@/Components/Modal/Pane';
-import CategoryLoaderType from '@/V2/types/CategoryLoaderType';
+import Select from '@/Components/Select';
+import Checkbox from '@/Components/Checkbox';
+import useAuth from '@/V2/Hooks/useAuth';
+import request from '@/V2/request';
+import DiscoveredFeed from '@/types/DiscoveredFeed';
+import LinkStack from '@/Components/LinkStack';
+import EditFeedLoaderType from '@/V2/types/EditFeddLoaderType';
 import Actions from '@/Components/Actions';
 
-type CategoriesCreateValidationErrors = ValidationErrors & { name?: string; } | null;
+type EditFeedValidationErrors = ValidationErrors & {
+    name?: string;
+    category_id?: string;
+    language?: string;
+    feed_url?: string;
+    site_url?: string;
+    favicon_url?: string;
+} | null;
 
 export default function EditFeedPage() {
-    const {t} = useLaravelReactI18n();
-    const {categoryId} = useParams();
-    const {category, canDelete} = useLoaderData() as CategoryLoaderType;
-    const errors = useActionData() as CategoriesCreateValidationErrors;
-    const {show, handleClose} = usePageModal(errors, '/app/categories');
+    const {t, tChoice} = useLaravelReactI18n();
+    const {feedId} = useParams();
+    const {user} = useAuth();
+    const {categories, feed, canDelete} = useLoaderData() as EditFeedLoaderType;
+    const errors = useActionData() as EditFeedValidationErrors;
+    const {show, handleClose} = usePageModal(errors, '/app/feeds');
     const submit = useSubmit();
+    const [isDiscoverFeedProcessing, setIsDiscoverFeedProcessing] = useState(false);
+    const [searchUrl, setSearchUrl] = useState('');
+    const [discoveredFeedUrls, setDiscoveredFeedUrls] = useState<string[]>([]);
+    const nameRef = useRef<HTMLInputElement>(null);
+    const languageRef = useRef<HTMLInputElement>(null);
+    const feedUrlRef = useRef<HTMLInputElement>(null);
+    const siteUrlRef = useRef<HTMLInputElement>(null);
+    const faviconUrlRef = useRef<HTMLInputElement>(null);
+
+    const discoverFeedUrls = (searchUrl: string) => {
+        setDiscoveredFeedUrls([]);
+        setIsDiscoverFeedProcessing(true);
+
+        request.post('/api/discover-feed-urls', {json: {feed_url: searchUrl}})
+            .json<string[]>()
+            .then((data) => {
+                setDiscoveredFeedUrls(data);
+            })
+            .catch((error) => {
+                console.error(error);
+            })
+            .finally(() => setIsDiscoverFeedProcessing(false));
+    };
+
+    const selectDiscoveredFeedUrl = (feedUrl: string) => () => {
+        setIsDiscoverFeedProcessing(true);
+
+        request.post('/api/discover-feed', {json: {feed_url: feedUrl}})
+            .json<DiscoveredFeed>()
+            .then((responseData) => {
+                nameRef.current!.value = responseData.name;
+                languageRef.current!.value = responseData.language;
+                feedUrlRef.current!.value = responseData.feed_url;
+                siteUrlRef.current!.value = responseData.site_url;
+                faviconUrlRef.current!.value = responseData.favicon_url;
+
+                setSearchUrl('');
+                setDiscoveredFeedUrls([]);
+            })
+            .catch((error) => {
+                console.error(error);
+            })
+            .finally(() => setIsDiscoverFeedProcessing(false));
+    };
 
     const handleDelete = () => {
         const formData = new FormData();
         formData.append('intent', 'delete');
 
-        submit(formData, {method: 'delete', action: `/app/categories/${categoryId}/edit`});
+        submit(formData, {method: 'delete', action: `/app/feeds/${feedId}/edit`});
     };
 
     return (
         <Pane appear show={show} onClose={handleClose}>
             <PaneHeader>
-                {t('Edit category')}
+                {t('Edit feed')}
             </PaneHeader>
 
             <PaneBody>
-                <Form method="put" action={`/app/categories/${categoryId}/edit`} className="space-y-4">
+                <Form method="put" action={`/app/feeds/${feedId}/edit`} className="space-y-4">
+                    <div className="flex">
+                        <TextInput
+                            id="search_url"
+                            className="grow w-full rounded-r-none border-r-0"
+                            placeholder={t('Search URL...')}
+                            value={searchUrl}
+                            onChange={(e) => setSearchUrl(e.target.value)}
+                            isFocused
+                        />
+
+                        <SecondaryButton
+                            className="rounded-l-none border border-gray-300 dark:border-gray-700"
+                            onClick={() => discoverFeedUrls(searchUrl)}
+                            disabled={isDiscoverFeedProcessing || searchUrl.length < 5}
+                        >
+                            {t('Search')}
+                        </SecondaryButton>
+                    </div>
+
+                    {discoveredFeedUrls.length > 0 && (
+                        <LinkStack>
+                            {discoveredFeedUrls.map((discoveredFeedUrl) => (
+                                <button
+                                    key={discoveredFeedUrl}
+                                    type="button"
+                                    className="block w-full text-left px-4 py-2 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600 first:rounded-t last:rounded-b transition"
+                                    onClick={selectDiscoveredFeedUrl(discoveredFeedUrl)}
+                                >
+                                    {discoveredFeedUrl}
+                                </button>
+                            ))}
+                        </LinkStack>
+                    )}
+
                     <div>
                         <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
                         <TextInput
+                            ref={nameRef}
                             id="name"
                             name="name"
-                            defaultValue={category.name}
+                            defaultValue={feed.name}
                             className="block w-full"
                             required
                             isFocused
@@ -49,6 +142,90 @@ export default function EditFeedPage() {
                         <InputError message={errors?.name}/>
                     </div>
 
+                    <div>
+                        <InputLabel htmlFor="category_id" value={t('validation.attributes.category_id')} required/>
+
+                        <Select
+                            id="category_id"
+                            name="category_id"
+                            defaultValue={feed.category_id}
+                            className="mt-1 block w-full"
+                            options={categories}
+                            required
+                        />
+
+                        <InputError message={errors?.category_id}/>
+                    </div>
+
+                    <div>
+                        <InputLabel htmlFor="language" value={t('validation.attributes.language')} required/>
+
+                        <TextInput
+                            ref={languageRef}
+                            id="language"
+                            name="language"
+                            defaultValue={feed.language}
+                            className="mt-1 block w-full"
+                            required
+                        />
+
+                        <InputError className="mt-2" message={errors?.language}/>
+                    </div>
+
+                    <div>
+                        <InputLabel htmlFor="feed_url" value={t('validation.attributes.feed_url')} required/>
+
+                        <TextInput
+                            ref={feedUrlRef}
+                            id="feed_url"
+                            name="feed_url"
+                            defaultValue={feed.feed_url}
+                            className="mt-1 block w-full"
+                            required
+                        />
+
+                        <InputError className="mt-2" message={errors?.feed_url}/>
+                    </div>
+
+                    <div>
+                        <InputLabel htmlFor="site_url" value={t('validation.attributes.site_url')} required/>
+
+                        <TextInput
+                            ref={siteUrlRef}
+                            id="site_url"
+                            name="site_url"
+                            defaultValue={feed.site_url}
+                            className="mt-1 block w-full"
+                            required
+                        />
+
+                        <InputError className="mt-2" message={errors?.site_url}/>
+                    </div>
+
+                    <div>
+                        <InputLabel htmlFor="favicon_url" value={t('validation.attributes.favicon_url')}/>
+
+                        <TextInput
+                            ref={faviconUrlRef}
+                            id="favicon_url"
+                            name="favicon_url"
+                            defaultValue={feed.favicon_url ?? ''}
+                            className="mt-1 block w-full"
+                        />
+
+                        <InputError className="mt-2" message={errors?.site_url}/>
+                    </div>
+
+                    <div>
+                        <label className="flex items-center w-fit">
+                            <Checkbox name="is_purgeable" value="1" defaultChecked={feed.is_purgeable}/>
+
+                            <span className="ml-2 text-sm text-gray-600 dark:text-gray-400">
+                                {tChoice('feed.purge', user!.months_after_pruning_feed_items)}
+                            </span>
+                        </label>
+                    </div>
+
                     <PrimaryButton type="submit">
                         {t('Save')}
                     </PrimaryButton>
@@ -60,8 +237,8 @@ export default function EditFeedPage() {
                     {canDelete && (
                         <HeadlessButton
                             confirm
-                            confirmTitle={t('Do you really want to delete this category?')}
-                            confirmSubmitTitle={t('Delete category')}
+                            confirmTitle={t('Do you really want to delete this feed?')}
+                            confirmSubmitTitle={t('Delete feed')}
                             confirmCancelTitle={t('Cancel')}
                             onClick={handleDelete}
                             className="link-danger"
diff --git a/resources/js/V2/types/CategoryLoaderType.ts b/resources/js/V2/types/EditCategoryLoaderType.ts
similarity index 60%
rename from resources/js/V2/types/CategoryLoaderType.ts
rename to resources/js/V2/types/EditCategoryLoaderType.ts
index 3202dade..83cbbdcc 100644
--- a/resources/js/V2/types/CategoryLoaderType.ts
+++ b/resources/js/V2/types/EditCategoryLoaderType.ts
@@ -1,8 +1,8 @@
 import Category from '@/types/generated/Models/Category';
 
-type CategoryLoaderType = {
+type EditCategoryLoaderType = {
     category: Category;
     canDelete: boolean;
 }
 
-export default CategoryLoaderType;
+export default EditCategoryLoaderType;
diff --git a/resources/js/V2/types/EditFeddLoaderType.ts b/resources/js/V2/types/EditFeddLoaderType.ts
new file mode 100644
index 00000000..d3cd5c0b
--- /dev/null
+++ b/resources/js/V2/types/EditFeddLoaderType.ts
@@ -0,0 +1,10 @@
+import {SelectNumberOption} from '@/types/SelectOption';
+import Feed from '@/types/generated/Models/Feed';
+
+type EditFeedLoaderType = {
+    categories: SelectNumberOption[];
+    feed: Feed;
+    canDelete: boolean;
+}
+
+export default EditFeedLoaderType;
diff --git a/routes/api.php b/routes/api.php
index 44cad8e8..feb2505d 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -21,6 +21,7 @@
 Route::middleware('auth:sanctum')->group(function () {
     Route::get('/user', fn (Request $request) => $request->user());
     Route::delete('/logout', [AuthenticatedSessionController::class, 'destroy'])->name('logout');
+
     Route::resource('categories', CategoryController::class);
     Route::resource('feeds', FeedController::class);
 

From e69b437a194d2fcf9736fffe5badf67179a5f17f Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Mon, 11 Mar 2024 22:33:51 +0100
Subject: [PATCH 26/79] refactored code

---
 .../{updateCategoryAction.ts => editCategoryAction.ts}    | 4 ++--
 .../Actions/{updateFeedAction.ts => editFeedAction.ts}    | 4 ++--
 resources/js/V2/Core/Router/router.tsx                    | 8 ++++----
 resources/js/V2/Pages/Categories/CreateCategoryPage.tsx   | 4 ++--
 resources/js/V2/Pages/Categories/EditCategoryPage.tsx     | 4 ++--
 resources/js/V2/Pages/Feeds/CreateFeedPage.tsx            | 7 ++++---
 resources/js/V2/Pages/Feeds/EditFeedPage.tsx              | 1 +
 7 files changed, 17 insertions(+), 15 deletions(-)
 rename resources/js/V2/Core/Router/Actions/{updateCategoryAction.ts => editCategoryAction.ts} (81%)
 rename resources/js/V2/Core/Router/Actions/{updateFeedAction.ts => editFeedAction.ts} (84%)

diff --git a/resources/js/V2/Core/Router/Actions/updateCategoryAction.ts b/resources/js/V2/Core/Router/Actions/editCategoryAction.ts
similarity index 81%
rename from resources/js/V2/Core/Router/Actions/updateCategoryAction.ts
rename to resources/js/V2/Core/Router/Actions/editCategoryAction.ts
index c506b830..59f1b3fe 100644
--- a/resources/js/V2/Core/Router/Actions/updateCategoryAction.ts
+++ b/resources/js/V2/Core/Router/Actions/editCategoryAction.ts
@@ -2,7 +2,7 @@ import request from '@/V2/request';
 import {ActionFunction} from '@remix-run/router/utils';
 import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
 
-const updateCategoryAction: ActionFunction = async ({params, request: req}) => {
+const editCategoryAction: ActionFunction = async ({params, request: req}) => {
     const formData = await req.formData();
 
     if (formData.get('intent') === 'delete') {
@@ -14,4 +14,4 @@ const updateCategoryAction: ActionFunction = async ({params, request: req}) => {
     return await handleRequestValidationError(() => request.put(`/api/categories/${params.categoryId}`, {json: Object.fromEntries(formData)}));
 };
 
-export default updateCategoryAction;
+export default editCategoryAction;
diff --git a/resources/js/V2/Core/Router/Actions/updateFeedAction.ts b/resources/js/V2/Core/Router/Actions/editFeedAction.ts
similarity index 84%
rename from resources/js/V2/Core/Router/Actions/updateFeedAction.ts
rename to resources/js/V2/Core/Router/Actions/editFeedAction.ts
index 762fac43..9e9b542f 100644
--- a/resources/js/V2/Core/Router/Actions/updateFeedAction.ts
+++ b/resources/js/V2/Core/Router/Actions/editFeedAction.ts
@@ -2,7 +2,7 @@ import request from '@/V2/request';
 import {ActionFunction} from '@remix-run/router/utils';
 import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
 
-const updateFeedAction: ActionFunction = async ({params, request: req}) => {
+const editFeedAction: ActionFunction = async ({params, request: req}) => {
     const formData = await req.formData();
 
     if (!formData.get('is_purgeable')) {
@@ -18,4 +18,4 @@ const updateFeedAction: ActionFunction = async ({params, request: req}) => {
     return await handleRequestValidationError(() => request.put(`/api/feeds/${params.feedId}`, {json: Object.fromEntries(formData)}));
 };
 
-export default updateFeedAction;
+export default editFeedAction;
diff --git a/resources/js/V2/Core/Router/router.tsx b/resources/js/V2/Core/Router/router.tsx
index 1eda898a..a60df6b7 100644
--- a/resources/js/V2/Core/Router/router.tsx
+++ b/resources/js/V2/Core/Router/router.tsx
@@ -7,7 +7,7 @@ import RouteHandle from '@/V2/types/RouteHandle';
 import EditCategoryPage from '@/V2/Pages/Categories/EditCategoryPage';
 import editCategoryLoader from '@/V2/Core/Router/Loaders/editCategoryLoader';
 import layoutLoader from '@/V2/Core/Router/Loaders/layoutLoader';
-import updateCategoryAction from '@/V2/Core/Router/Actions/updateCategoryAction';
+import editCategoryAction from '@/V2/Core/Router/Actions/editCategoryAction';
 import ErrorPage from '@/V2/Core/ErrorPage';
 import AuthProvider from '@/V2/Core/AuthProvider';
 import createCategoryAction from '@/V2/Core/Router/Actions/createCategoryAction';
@@ -18,7 +18,7 @@ import createFeedLoader from '@/V2/Core/Router/Loaders/createFeedLoader';
 import createFeedAction from '@/V2/Core/Router/Actions/createFeedAction';
 import EditFeedPage from '@/V2/Pages/Feeds/EditFeedPage';
 import editFeedLoader from '@/V2/Core/Router/Loaders/editFeedLoader';
-import updateFeedAction from '@/V2/Core/Router/Actions/updateFeedAction';
+import editFeedAction from '@/V2/Core/Router/Actions/editFeedAction';
 
 const router = createBrowserRouter([
     {
@@ -44,7 +44,7 @@ const router = createBrowserRouter([
                         path: ':categoryId/edit',
                         element: <EditCategoryPage/>,
                         loader: editCategoryLoader,
-                        action: updateCategoryAction,
+                        action: editCategoryAction,
                         handle: {hide: true, titleKey: 'Edit category'} as RouteHandle,
                     },
                 ],
@@ -66,7 +66,7 @@ const router = createBrowserRouter([
                         path: ':feedId/edit',
                         element: <EditFeedPage/>,
                         loader: editFeedLoader,
-                        action: updateFeedAction,
+                        action: editFeedAction,
                         handle: {hide: true, titleKey: 'Edit feed'} as RouteHandle,
                     },
                 ],
diff --git a/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx b/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
index 1393666c..248c098b 100644
--- a/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
+++ b/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
@@ -9,11 +9,11 @@ import React from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {Pane, PaneBody, PaneHeader} from '@/Components/Modal/Pane';
 
-type CategoriesCreateValidationErrors = ValidationErrors & { name?: string; } | null;
+type CreateCategoryValidationErrors = ValidationErrors & { name?: string; } | null;
 
 export default function CreateCategoryPage() {
     const {t} = useLaravelReactI18n();
-    const errors = useActionData() as CategoriesCreateValidationErrors;
+    const errors = useActionData() as CreateCategoryValidationErrors;
     const {show, handleClose} = usePageModal(errors, '/app/categories');
 
     return (
diff --git a/resources/js/V2/Pages/Categories/EditCategoryPage.tsx b/resources/js/V2/Pages/Categories/EditCategoryPage.tsx
index c402f397..bcc9e331 100644
--- a/resources/js/V2/Pages/Categories/EditCategoryPage.tsx
+++ b/resources/js/V2/Pages/Categories/EditCategoryPage.tsx
@@ -11,13 +11,13 @@ import {Pane, PaneBody, PaneFooter, PaneHeader} from '@/Components/Modal/Pane';
 import EditCategoryLoaderType from '@/V2/types/EditCategoryLoaderType';
 import Actions from '@/Components/Actions';
 
-type CategoriesCreateValidationErrors = ValidationErrors & { name?: string; } | null;
+type EditCategoryValidationErrors = ValidationErrors & { name?: string; } | null;
 
 export default function EditCategoryPage() {
     const {t} = useLaravelReactI18n();
     const {categoryId} = useParams();
     const {category, canDelete} = useLoaderData() as EditCategoryLoaderType;
-    const errors = useActionData() as CategoriesCreateValidationErrors;
+    const errors = useActionData() as EditCategoryValidationErrors;
     const {show, handleClose} = usePageModal(errors, '/app/categories');
     const submit = useSubmit();
 
diff --git a/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx b/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx
index 8ece7ad2..8d105d38 100644
--- a/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx
+++ b/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx
@@ -5,7 +5,7 @@ import ValidationErrors from '@/V2/types/ValidationErrors';
 import InputError from '@/Components/InputError';
 import {PrimaryButton, SecondaryButton} from '@/Components/Button';
 import InputLabel from '@/Components/InputLabel';
-import React, {useImperativeHandle, useRef, useState} from 'react';
+import React, {useRef, useState} from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {Pane, PaneBody, PaneHeader} from '@/Components/Modal/Pane';
 import Select from '@/Components/Select';
@@ -16,7 +16,7 @@ import request from '@/V2/request';
 import DiscoveredFeed from '@/types/DiscoveredFeed';
 import LinkStack from '@/Components/LinkStack';
 
-type FeedsCreateValidationErrors = ValidationErrors & {
+type CreateFeedValidationErrors = ValidationErrors & {
     name?: string;
     category_id?: string;
     language?: string;
@@ -29,11 +29,12 @@ export default function CreateFeedPage() {
     const {t, tChoice} = useLaravelReactI18n();
     const {user} = useAuth();
     const {categories} = useLoaderData() as CreateFeedLoaderType;
-    const errors = useActionData() as FeedsCreateValidationErrors;
+    const errors = useActionData() as CreateFeedValidationErrors;
     const {show, handleClose} = usePageModal(errors, '/app/feeds');
     const [isDiscoverFeedProcessing, setIsDiscoverFeedProcessing] = useState(false);
     const [searchUrl, setSearchUrl] = useState('');
     const [discoveredFeedUrls, setDiscoveredFeedUrls] = useState<string[]>([]);
+
     const nameRef = useRef<HTMLInputElement>(null);
     const languageRef = useRef<HTMLInputElement>(null);
     const feedUrlRef = useRef<HTMLInputElement>(null);
diff --git a/resources/js/V2/Pages/Feeds/EditFeedPage.tsx b/resources/js/V2/Pages/Feeds/EditFeedPage.tsx
index 335cd949..120cf97d 100644
--- a/resources/js/V2/Pages/Feeds/EditFeedPage.tsx
+++ b/resources/js/V2/Pages/Feeds/EditFeedPage.tsx
@@ -37,6 +37,7 @@ export default function EditFeedPage() {
     const [isDiscoverFeedProcessing, setIsDiscoverFeedProcessing] = useState(false);
     const [searchUrl, setSearchUrl] = useState('');
     const [discoveredFeedUrls, setDiscoveredFeedUrls] = useState<string[]>([]);
+
     const nameRef = useRef<HTMLInputElement>(null);
     const languageRef = useRef<HTMLInputElement>(null);
     const feedUrlRef = useRef<HTMLInputElement>(null);

From ebca2ee1f75fa72bf7a21e8719dc6ac0c09b16cf Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Mon, 11 Mar 2024 22:41:54 +0100
Subject: [PATCH 27/79] refactored code

---
 .../Pages/Categories/CreateCategoryPage.tsx   | 29 +++------------
 .../V2/Pages/Categories/EditCategoryPage.tsx  | 35 +++++--------------
 .../Categories/Partials/CategoryForm.tsx      | 35 +++++++++++++++++++
 .../types/CreateCategoryValidationErrors.ts   |  7 ++++
 .../V2/types/EditCategoryValidationErrors.ts  |  7 ++++
 5 files changed, 62 insertions(+), 51 deletions(-)
 create mode 100644 resources/js/V2/Pages/Categories/Partials/CategoryForm.tsx
 create mode 100644 resources/js/V2/types/CreateCategoryValidationErrors.ts
 create mode 100644 resources/js/V2/types/EditCategoryValidationErrors.ts

diff --git a/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx b/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
index 248c098b..168f5cdb 100644
--- a/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
+++ b/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
@@ -1,15 +1,10 @@
-import {Form, useActionData} from 'react-router-dom';
-import TextInput from '@/Components/TextInput';
+import {useActionData} from 'react-router-dom';
 import usePageModal from '@/V2/Hooks/usePageModal';
-import ValidationErrors from '@/V2/types/ValidationErrors';
-import InputError from '@/Components/InputError';
-import {PrimaryButton} from '@/Components/Button';
-import InputLabel from '@/Components/InputLabel';
 import React from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {Pane, PaneBody, PaneHeader} from '@/Components/Modal/Pane';
-
-type CreateCategoryValidationErrors = ValidationErrors & { name?: string; } | null;
+import CreateCategoryValidationErrors from '@/V2/types/CreateCategoryValidationErrors';
+import CategoryForm from '@/V2/Pages/Categories/Partials/CategoryForm';
 
 export default function CreateCategoryPage() {
     const {t} = useLaravelReactI18n();
@@ -23,23 +18,7 @@ export default function CreateCategoryPage() {
             </PaneHeader>
 
             <PaneBody>
-                <Form method="post" action="/app/categories/create" className="space-y-4">
-                    <div>
-                        <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
-                        <TextInput
-                            id="name"
-                            name="name"
-                            className="block w-full"
-                            required
-                            isFocused
-                        />
-                        <InputError message={errors?.name}/>
-                    </div>
-
-                    <PrimaryButton type="submit">
-                        {t('Save')}
-                    </PrimaryButton>
-                </Form>
+                <CategoryForm action="/app/categories/create" errors={errors}/>
             </PaneBody>
         </Pane>
     );
diff --git a/resources/js/V2/Pages/Categories/EditCategoryPage.tsx b/resources/js/V2/Pages/Categories/EditCategoryPage.tsx
index bcc9e331..f4af6969 100644
--- a/resources/js/V2/Pages/Categories/EditCategoryPage.tsx
+++ b/resources/js/V2/Pages/Categories/EditCategoryPage.tsx
@@ -1,17 +1,13 @@
-import {Form, useActionData, useLoaderData, useParams, useSubmit} from 'react-router-dom';
-import TextInput from '@/Components/TextInput';
+import {useActionData, useLoaderData, useParams, useSubmit} from 'react-router-dom';
 import usePageModal from '@/V2/Hooks/usePageModal';
-import ValidationErrors from '@/V2/types/ValidationErrors';
-import InputError from '@/Components/InputError';
-import {HeadlessButton, PrimaryButton} from '@/Components/Button';
-import InputLabel from '@/Components/InputLabel';
+import {HeadlessButton} from '@/Components/Button';
 import React from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {Pane, PaneBody, PaneFooter, PaneHeader} from '@/Components/Modal/Pane';
 import EditCategoryLoaderType from '@/V2/types/EditCategoryLoaderType';
 import Actions from '@/Components/Actions';
-
-type EditCategoryValidationErrors = ValidationErrors & { name?: string; } | null;
+import CategoryForm from '@/V2/Pages/Categories/Partials/CategoryForm';
+import EditCategoryValidationErrors from '@/V2/types/EditCategoryValidationErrors';
 
 export default function EditCategoryPage() {
     const {t} = useLaravelReactI18n();
@@ -35,24 +31,11 @@ export default function EditCategoryPage() {
             </PaneHeader>
 
             <PaneBody>
-                <Form method="put" action={`/app/categories/${categoryId}/edit`} className="space-y-4">
-                    <div>
-                        <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
-                        <TextInput
-                            id="name"
-                            name="name"
-                            defaultValue={category.name}
-                            className="block w-full"
-                            required
-                            isFocused
-                        />
-                        <InputError message={errors?.name}/>
-                    </div>
-
-                    <PrimaryButton type="submit">
-                        {t('Save')}
-                    </PrimaryButton>
-                </Form>
+                <CategoryForm
+                    action={`/app/categories/${categoryId}/edit`}
+                    category={category}
+                    errors={errors}
+                />
             </PaneBody>
 
             <PaneFooter>
diff --git a/resources/js/V2/Pages/Categories/Partials/CategoryForm.tsx b/resources/js/V2/Pages/Categories/Partials/CategoryForm.tsx
new file mode 100644
index 00000000..9aa39390
--- /dev/null
+++ b/resources/js/V2/Pages/Categories/Partials/CategoryForm.tsx
@@ -0,0 +1,35 @@
+import InputLabel from '@/Components/InputLabel';
+import TextInput from '@/Components/TextInput';
+import InputError from '@/Components/InputError';
+import {PrimaryButton} from '@/Components/Button';
+import React from 'react';
+import CreateCategoryValidationErrors from '@/V2/types/CreateCategoryValidationErrors';
+import {useLaravelReactI18n} from 'laravel-react-i18n';
+import {Form} from 'react-router-dom';
+import EditCategoryValidationErrors from '@/V2/types/EditCategoryValidationErrors';
+import Category from '@/types/generated/Models/Category';
+
+export default function CategoryForm({action, category = null, errors}: { action: string; category: Category | null; errors: CreateCategoryValidationErrors | EditCategoryValidationErrors; }) {
+    const {t} = useLaravelReactI18n();
+
+    return (
+        <Form method="post" action={action} className="space-y-4">
+            <div>
+                <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
+                <TextInput
+                    id="name"
+                    name="name"
+                    defaultValue={category?.name}
+                    className="block w-full"
+                    required
+                    isFocused
+                />
+                <InputError message={errors?.name}/>
+            </div>
+
+            <PrimaryButton type="submit">
+                {t('Save')}
+            </PrimaryButton>
+        </Form>
+    );
+}
diff --git a/resources/js/V2/types/CreateCategoryValidationErrors.ts b/resources/js/V2/types/CreateCategoryValidationErrors.ts
new file mode 100644
index 00000000..a2a495b6
--- /dev/null
+++ b/resources/js/V2/types/CreateCategoryValidationErrors.ts
@@ -0,0 +1,7 @@
+import ValidationErrors from '@/V2/types/ValidationErrors';
+
+type CreateCategoryValidationErrors = ValidationErrors & {
+    name?: string;
+} | null;
+
+export default CreateCategoryValidationErrors;
diff --git a/resources/js/V2/types/EditCategoryValidationErrors.ts b/resources/js/V2/types/EditCategoryValidationErrors.ts
new file mode 100644
index 00000000..1867a051
--- /dev/null
+++ b/resources/js/V2/types/EditCategoryValidationErrors.ts
@@ -0,0 +1,7 @@
+import ValidationErrors from '@/V2/types/ValidationErrors';
+
+type EditCategoryValidationErrors = ValidationErrors & {
+    name?: string;
+} | null;
+
+export default EditCategoryValidationErrors;

From 929c77dcaaf530d4906066ae630505514708a05e Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Mon, 11 Mar 2024 22:52:30 +0100
Subject: [PATCH 28/79] refactored code

---
 .../Pages/Categories/CreateCategoryPage.tsx   |   5 +-
 .../Categories/Partials/CategoryForm.tsx      |   2 +-
 .../js/V2/Pages/Feeds/CreateFeedPage.tsx      | 210 +----------------
 resources/js/V2/Pages/Feeds/EditFeedPage.tsx  | 218 +-----------------
 .../js/V2/Pages/Feeds/Partials/FeedForm.tsx   | 209 +++++++++++++++++
 .../js/V2/types/CreateFeedValidationErrors.ts |  12 +
 .../js/V2/types/EditFeedValidationErrors.ts   |  12 +
 7 files changed, 260 insertions(+), 408 deletions(-)
 create mode 100644 resources/js/V2/Pages/Feeds/Partials/FeedForm.tsx
 create mode 100644 resources/js/V2/types/CreateFeedValidationErrors.ts
 create mode 100644 resources/js/V2/types/EditFeedValidationErrors.ts

diff --git a/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx b/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
index 168f5cdb..c1e6adc2 100644
--- a/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
+++ b/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
@@ -18,7 +18,10 @@ export default function CreateCategoryPage() {
             </PaneHeader>
 
             <PaneBody>
-                <CategoryForm action="/app/categories/create" errors={errors}/>
+                <CategoryForm
+                    action="/app/categories/create"
+                    errors={errors}
+                />
             </PaneBody>
         </Pane>
     );
diff --git a/resources/js/V2/Pages/Categories/Partials/CategoryForm.tsx b/resources/js/V2/Pages/Categories/Partials/CategoryForm.tsx
index 9aa39390..42c9f6d4 100644
--- a/resources/js/V2/Pages/Categories/Partials/CategoryForm.tsx
+++ b/resources/js/V2/Pages/Categories/Partials/CategoryForm.tsx
@@ -9,7 +9,7 @@ import {Form} from 'react-router-dom';
 import EditCategoryValidationErrors from '@/V2/types/EditCategoryValidationErrors';
 import Category from '@/types/generated/Models/Category';
 
-export default function CategoryForm({action, category = null, errors}: { action: string; category: Category | null; errors: CreateCategoryValidationErrors | EditCategoryValidationErrors; }) {
+export default function CategoryForm({action, category = null, errors}: { action: string; category?: Category | null; errors: CreateCategoryValidationErrors | EditCategoryValidationErrors; }) {
     const {t} = useLaravelReactI18n();
 
     return (
diff --git a/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx b/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx
index 8d105d38..28f06eea 100644
--- a/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx
+++ b/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx
@@ -1,81 +1,17 @@
-import {Form, useActionData, useLoaderData} from 'react-router-dom';
-import TextInput from '@/Components/TextInput';
+import {useActionData, useLoaderData} from 'react-router-dom';
 import usePageModal from '@/V2/Hooks/usePageModal';
-import ValidationErrors from '@/V2/types/ValidationErrors';
-import InputError from '@/Components/InputError';
-import {PrimaryButton, SecondaryButton} from '@/Components/Button';
-import InputLabel from '@/Components/InputLabel';
-import React, {useRef, useState} from 'react';
+import React from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {Pane, PaneBody, PaneHeader} from '@/Components/Modal/Pane';
-import Select from '@/Components/Select';
-import Checkbox from '@/Components/Checkbox';
-import useAuth from '@/V2/Hooks/useAuth';
 import CreateFeedLoaderType from '@/V2/types/CreateFeedLoaderType';
-import request from '@/V2/request';
-import DiscoveredFeed from '@/types/DiscoveredFeed';
-import LinkStack from '@/Components/LinkStack';
-
-type CreateFeedValidationErrors = ValidationErrors & {
-    name?: string;
-    category_id?: string;
-    language?: string;
-    feed_url?: string;
-    site_url?: string;
-    favicon_url?: string;
-} | null;
+import CreateFeedValidationErrors from '@/V2/types/CreateFeedValidationErrors';
+import FeedForm from '@/V2/Pages/Feeds/Partials/FeedForm';
 
 export default function CreateFeedPage() {
-    const {t, tChoice} = useLaravelReactI18n();
-    const {user} = useAuth();
+    const {t} = useLaravelReactI18n();
     const {categories} = useLoaderData() as CreateFeedLoaderType;
     const errors = useActionData() as CreateFeedValidationErrors;
     const {show, handleClose} = usePageModal(errors, '/app/feeds');
-    const [isDiscoverFeedProcessing, setIsDiscoverFeedProcessing] = useState(false);
-    const [searchUrl, setSearchUrl] = useState('');
-    const [discoveredFeedUrls, setDiscoveredFeedUrls] = useState<string[]>([]);
-
-    const nameRef = useRef<HTMLInputElement>(null);
-    const languageRef = useRef<HTMLInputElement>(null);
-    const feedUrlRef = useRef<HTMLInputElement>(null);
-    const siteUrlRef = useRef<HTMLInputElement>(null);
-    const faviconUrlRef = useRef<HTMLInputElement>(null);
-
-    const discoverFeedUrls = (searchUrl: string) => {
-        setDiscoveredFeedUrls([]);
-        setIsDiscoverFeedProcessing(true);
-
-        request.post('/api/discover-feed-urls', {json: {feed_url: searchUrl}})
-            .json<string[]>()
-            .then((data) => {
-                setDiscoveredFeedUrls(data);
-            })
-            .catch((error) => {
-                console.error(error);
-            })
-            .finally(() => setIsDiscoverFeedProcessing(false));
-    };
-
-    const selectDiscoveredFeedUrl = (feedUrl: string) => () => {
-        setIsDiscoverFeedProcessing(true);
-
-        request.post('/api/discover-feed', {json: {feed_url: feedUrl}})
-            .json<DiscoveredFeed>()
-            .then((responseData) => {
-                nameRef.current!.value = responseData.name;
-                languageRef.current!.value = responseData.language;
-                feedUrlRef.current!.value = responseData.feed_url;
-                siteUrlRef.current!.value = responseData.site_url;
-                faviconUrlRef.current!.value = responseData.favicon_url;
-
-                setSearchUrl('');
-                setDiscoveredFeedUrls([]);
-            })
-            .catch((error) => {
-                console.error(error);
-            })
-            .finally(() => setIsDiscoverFeedProcessing(false));
-    };
 
     return (
         <Pane appear show={show} onClose={handleClose}>
@@ -84,137 +20,11 @@ export default function CreateFeedPage() {
             </PaneHeader>
 
             <PaneBody>
-                <Form method="post" action="/app/feeds/create" className="space-y-4">
-                    <div className="flex">
-                        <TextInput
-                            id="search_url"
-                            className="grow w-full rounded-r-none border-r-0"
-                            placeholder={t('Search URL...')}
-                            value={searchUrl}
-                            onChange={(e) => setSearchUrl(e.target.value)}
-                            isFocused
-                        />
-
-                        <SecondaryButton
-                            className="rounded-l-none border border-gray-300 dark:border-gray-700"
-                            onClick={() => discoverFeedUrls(searchUrl)}
-                            disabled={isDiscoverFeedProcessing || searchUrl.length < 5}
-                        >
-                            {t('Search')}
-                        </SecondaryButton>
-                    </div>
-
-                    {discoveredFeedUrls.length > 0 && (
-                        <LinkStack>
-                            {discoveredFeedUrls.map((discoveredFeedUrl) => (
-                                <button
-                                    key={discoveredFeedUrl}
-                                    type="button"
-                                    className="block w-full text-left px-4 py-2 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600 first:rounded-t last:rounded-b transition"
-                                    onClick={selectDiscoveredFeedUrl(discoveredFeedUrl)}
-                                >
-                                    {discoveredFeedUrl}
-                                </button>
-                            ))}
-                        </LinkStack>
-                    )}
-
-                    <div>
-                        <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
-                        <TextInput
-                            ref={nameRef}
-                            id="name"
-                            name="name"
-                            className="block w-full"
-                            required
-                            isFocused
-                        />
-                        <InputError message={errors?.name}/>
-                    </div>
-
-                    <div>
-                        <InputLabel htmlFor="category_id" value={t('validation.attributes.category_id')} required/>
-
-                        <Select
-                            id="category_id"
-                            name="category_id"
-                            className="mt-1 block w-full"
-                            options={categories}
-                            required
-                        />
-
-                        <InputError message={errors?.category_id}/>
-                    </div>
-
-                    <div>
-                        <InputLabel htmlFor="language" value={t('validation.attributes.language')} required/>
-
-                        <TextInput
-                            ref={languageRef}
-                            id="language"
-                            name="language"
-                            className="mt-1 block w-full"
-                            required
-                        />
-
-                        <InputError className="mt-2" message={errors?.language}/>
-                    </div>
-
-                    <div>
-                        <InputLabel htmlFor="feed_url" value={t('validation.attributes.feed_url')} required/>
-
-                        <TextInput
-                            ref={feedUrlRef}
-                            id="feed_url"
-                            name="feed_url"
-                            className="mt-1 block w-full"
-                            required
-                        />
-
-                        <InputError className="mt-2" message={errors?.feed_url}/>
-                    </div>
-
-                    <div>
-                        <InputLabel htmlFor="site_url" value={t('validation.attributes.site_url')} required/>
-
-                        <TextInput
-                            ref={siteUrlRef}
-                            id="site_url"
-                            name="site_url"
-                            className="mt-1 block w-full"
-                            required
-                        />
-
-                        <InputError className="mt-2" message={errors?.site_url}/>
-                    </div>
-
-                    <div>
-                        <InputLabel htmlFor="favicon_url" value={t('validation.attributes.favicon_url')}/>
-
-                        <TextInput
-                            ref={faviconUrlRef}
-                            id="favicon_url"
-                            name="favicon_url"
-                            className="mt-1 block w-full"
-                        />
-
-                        <InputError className="mt-2" message={errors?.site_url}/>
-                    </div>
-
-                    <div>
-                        <label className="flex items-center w-fit">
-                            <Checkbox name="is_purgeable" value={true}/>
-
-                            <span className="ml-2 text-sm text-gray-600 dark:text-gray-400">
-                                {tChoice('feed.purge', user!.months_after_pruning_feed_items)}
-                            </span>
-                        </label>
-                    </div>
-
-                    <PrimaryButton type="submit">
-                        {t('Save')}
-                    </PrimaryButton>
-                </Form>
+                <FeedForm
+                    action="/app/feeds/create"
+                    categories={categories}
+                    errors={errors}
+                />
             </PaneBody>
         </Pane>
     );
diff --git a/resources/js/V2/Pages/Feeds/EditFeedPage.tsx b/resources/js/V2/Pages/Feeds/EditFeedPage.tsx
index 120cf97d..974628bc 100644
--- a/resources/js/V2/Pages/Feeds/EditFeedPage.tsx
+++ b/resources/js/V2/Pages/Feeds/EditFeedPage.tsx
@@ -1,84 +1,21 @@
-import {Form, useActionData, useLoaderData, useParams, useSubmit} from 'react-router-dom';
-import TextInput from '@/Components/TextInput';
+import {useActionData, useLoaderData, useParams, useSubmit} from 'react-router-dom';
 import usePageModal from '@/V2/Hooks/usePageModal';
-import ValidationErrors from '@/V2/types/ValidationErrors';
-import InputError from '@/Components/InputError';
-import {HeadlessButton, PrimaryButton, SecondaryButton} from '@/Components/Button';
-import InputLabel from '@/Components/InputLabel';
-import React, {useRef, useState} from 'react';
+import {HeadlessButton} from '@/Components/Button';
+import React from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {Pane, PaneBody, PaneFooter, PaneHeader} from '@/Components/Modal/Pane';
-import Select from '@/Components/Select';
-import Checkbox from '@/Components/Checkbox';
-import useAuth from '@/V2/Hooks/useAuth';
-import request from '@/V2/request';
-import DiscoveredFeed from '@/types/DiscoveredFeed';
-import LinkStack from '@/Components/LinkStack';
 import EditFeedLoaderType from '@/V2/types/EditFeddLoaderType';
 import Actions from '@/Components/Actions';
-
-type EditFeedValidationErrors = ValidationErrors & {
-    name?: string;
-    category_id?: string;
-    language?: string;
-    feed_url?: string;
-    site_url?: string;
-    favicon_url?: string;
-} | null;
+import EditFeedValidationErrors from '@/V2/types/EditFeedValidationErrors';
+import FeedForm from '@/V2/Pages/Feeds/Partials/FeedForm';
 
 export default function EditFeedPage() {
-    const {t, tChoice} = useLaravelReactI18n();
+    const {t} = useLaravelReactI18n();
     const {feedId} = useParams();
-    const {user} = useAuth();
     const {categories, feed, canDelete} = useLoaderData() as EditFeedLoaderType;
     const errors = useActionData() as EditFeedValidationErrors;
     const {show, handleClose} = usePageModal(errors, '/app/feeds');
     const submit = useSubmit();
-    const [isDiscoverFeedProcessing, setIsDiscoverFeedProcessing] = useState(false);
-    const [searchUrl, setSearchUrl] = useState('');
-    const [discoveredFeedUrls, setDiscoveredFeedUrls] = useState<string[]>([]);
-
-    const nameRef = useRef<HTMLInputElement>(null);
-    const languageRef = useRef<HTMLInputElement>(null);
-    const feedUrlRef = useRef<HTMLInputElement>(null);
-    const siteUrlRef = useRef<HTMLInputElement>(null);
-    const faviconUrlRef = useRef<HTMLInputElement>(null);
-
-    const discoverFeedUrls = (searchUrl: string) => {
-        setDiscoveredFeedUrls([]);
-        setIsDiscoverFeedProcessing(true);
-
-        request.post('/api/discover-feed-urls', {json: {feed_url: searchUrl}})
-            .json<string[]>()
-            .then((data) => {
-                setDiscoveredFeedUrls(data);
-            })
-            .catch((error) => {
-                console.error(error);
-            })
-            .finally(() => setIsDiscoverFeedProcessing(false));
-    };
-
-    const selectDiscoveredFeedUrl = (feedUrl: string) => () => {
-        setIsDiscoverFeedProcessing(true);
-
-        request.post('/api/discover-feed', {json: {feed_url: feedUrl}})
-            .json<DiscoveredFeed>()
-            .then((responseData) => {
-                nameRef.current!.value = responseData.name;
-                languageRef.current!.value = responseData.language;
-                feedUrlRef.current!.value = responseData.feed_url;
-                siteUrlRef.current!.value = responseData.site_url;
-                faviconUrlRef.current!.value = responseData.favicon_url;
-
-                setSearchUrl('');
-                setDiscoveredFeedUrls([]);
-            })
-            .catch((error) => {
-                console.error(error);
-            })
-            .finally(() => setIsDiscoverFeedProcessing(false));
-    };
 
     const handleDelete = () => {
         const formData = new FormData();
@@ -94,143 +31,12 @@ export default function EditFeedPage() {
             </PaneHeader>
 
             <PaneBody>
-                <Form method="put" action={`/app/feeds/${feedId}/edit`} className="space-y-4">
-                    <div className="flex">
-                        <TextInput
-                            id="search_url"
-                            className="grow w-full rounded-r-none border-r-0"
-                            placeholder={t('Search URL...')}
-                            value={searchUrl}
-                            onChange={(e) => setSearchUrl(e.target.value)}
-                            isFocused
-                        />
-
-                        <SecondaryButton
-                            className="rounded-l-none border border-gray-300 dark:border-gray-700"
-                            onClick={() => discoverFeedUrls(searchUrl)}
-                            disabled={isDiscoverFeedProcessing || searchUrl.length < 5}
-                        >
-                            {t('Search')}
-                        </SecondaryButton>
-                    </div>
-
-                    {discoveredFeedUrls.length > 0 && (
-                        <LinkStack>
-                            {discoveredFeedUrls.map((discoveredFeedUrl) => (
-                                <button
-                                    key={discoveredFeedUrl}
-                                    type="button"
-                                    className="block w-full text-left px-4 py-2 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600 first:rounded-t last:rounded-b transition"
-                                    onClick={selectDiscoveredFeedUrl(discoveredFeedUrl)}
-                                >
-                                    {discoveredFeedUrl}
-                                </button>
-                            ))}
-                        </LinkStack>
-                    )}
-
-                    <div>
-                        <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
-                        <TextInput
-                            ref={nameRef}
-                            id="name"
-                            name="name"
-                            defaultValue={feed.name}
-                            className="block w-full"
-                            required
-                            isFocused
-                        />
-                        <InputError message={errors?.name}/>
-                    </div>
-
-                    <div>
-                        <InputLabel htmlFor="category_id" value={t('validation.attributes.category_id')} required/>
-
-                        <Select
-                            id="category_id"
-                            name="category_id"
-                            defaultValue={feed.category_id}
-                            className="mt-1 block w-full"
-                            options={categories}
-                            required
-                        />
-
-                        <InputError message={errors?.category_id}/>
-                    </div>
-
-                    <div>
-                        <InputLabel htmlFor="language" value={t('validation.attributes.language')} required/>
-
-                        <TextInput
-                            ref={languageRef}
-                            id="language"
-                            name="language"
-                            defaultValue={feed.language}
-                            className="mt-1 block w-full"
-                            required
-                        />
-
-                        <InputError className="mt-2" message={errors?.language}/>
-                    </div>
-
-                    <div>
-                        <InputLabel htmlFor="feed_url" value={t('validation.attributes.feed_url')} required/>
-
-                        <TextInput
-                            ref={feedUrlRef}
-                            id="feed_url"
-                            name="feed_url"
-                            defaultValue={feed.feed_url}
-                            className="mt-1 block w-full"
-                            required
-                        />
-
-                        <InputError className="mt-2" message={errors?.feed_url}/>
-                    </div>
-
-                    <div>
-                        <InputLabel htmlFor="site_url" value={t('validation.attributes.site_url')} required/>
-
-                        <TextInput
-                            ref={siteUrlRef}
-                            id="site_url"
-                            name="site_url"
-                            defaultValue={feed.site_url}
-                            className="mt-1 block w-full"
-                            required
-                        />
-
-                        <InputError className="mt-2" message={errors?.site_url}/>
-                    </div>
-
-                    <div>
-                        <InputLabel htmlFor="favicon_url" value={t('validation.attributes.favicon_url')}/>
-
-                        <TextInput
-                            ref={faviconUrlRef}
-                            id="favicon_url"
-                            name="favicon_url"
-                            defaultValue={feed.favicon_url ?? ''}
-                            className="mt-1 block w-full"
-                        />
-
-                        <InputError className="mt-2" message={errors?.site_url}/>
-                    </div>
-
-                    <div>
-                        <label className="flex items-center w-fit">
-                            <Checkbox name="is_purgeable" value="1" defaultChecked={feed.is_purgeable}/>
-
-                            <span className="ml-2 text-sm text-gray-600 dark:text-gray-400">
-                                {tChoice('feed.purge', user!.months_after_pruning_feed_items)}
-                            </span>
-                        </label>
-                    </div>
-
-                    <PrimaryButton type="submit">
-                        {t('Save')}
-                    </PrimaryButton>
-                </Form>
+                <FeedForm
+                    action={`/app/feeds/${feedId}/edit`}
+                    feed={feed}
+                    categories={categories}
+                    errors={errors}
+                />
             </PaneBody>
 
             <PaneFooter>
diff --git a/resources/js/V2/Pages/Feeds/Partials/FeedForm.tsx b/resources/js/V2/Pages/Feeds/Partials/FeedForm.tsx
new file mode 100644
index 00000000..b41b0d1b
--- /dev/null
+++ b/resources/js/V2/Pages/Feeds/Partials/FeedForm.tsx
@@ -0,0 +1,209 @@
+import InputLabel from '@/Components/InputLabel';
+import TextInput from '@/Components/TextInput';
+import InputError from '@/Components/InputError';
+import {PrimaryButton, SecondaryButton} from '@/Components/Button';
+import React, {useRef, useState} from 'react';
+import {useLaravelReactI18n} from 'laravel-react-i18n';
+import {Form} from 'react-router-dom';
+import Feed from '@/types/generated/Models/Feed';
+import CreateFeedValidationErrors from '@/V2/types/CreateFeedValidationErrors';
+import EditFeedValidationErrors from '@/V2/types/EditFeedValidationErrors';
+import LinkStack from '@/Components/LinkStack';
+import Select from '@/Components/Select';
+import Checkbox from '@/Components/Checkbox';
+import request from '@/V2/request';
+import DiscoveredFeed from '@/types/DiscoveredFeed';
+import {SelectNumberOption} from '@/types/SelectOption';
+import useAuth from '@/V2/Hooks/useAuth';
+
+export default function FeedForm({action, feed = null, categories, errors}: { action: string; feed?: Feed | null; categories: SelectNumberOption[]; errors: CreateFeedValidationErrors | EditFeedValidationErrors; }) {
+    const {t, tChoice} = useLaravelReactI18n();
+
+    const {user} = useAuth();
+
+    const [searchUrl, setSearchUrl] = useState('');
+    const [discoveredFeedUrls, setDiscoveredFeedUrls] = useState<string[]>([]);
+    const [isDiscoverFeedProcessing, setIsDiscoverFeedProcessing] = useState(false);
+
+    const nameRef = useRef<HTMLInputElement>(null);
+    const languageRef = useRef<HTMLInputElement>(null);
+    const feedUrlRef = useRef<HTMLInputElement>(null);
+    const siteUrlRef = useRef<HTMLInputElement>(null);
+    const faviconUrlRef = useRef<HTMLInputElement>(null);
+
+    const discoverFeedUrls = (searchUrl: string) => {
+        setDiscoveredFeedUrls([]);
+        setIsDiscoverFeedProcessing(true);
+
+        request.post('/api/discover-feed-urls', {json: {feed_url: searchUrl}})
+            .json<string[]>()
+            .then((data) => {
+                setDiscoveredFeedUrls(data);
+            })
+            .catch((error) => {
+                console.error(error);
+            })
+            .finally(() => setIsDiscoverFeedProcessing(false));
+    };
+
+    const selectDiscoveredFeedUrl = (feedUrl: string) => () => {
+        setIsDiscoverFeedProcessing(true);
+
+        request.post('/api/discover-feed', {json: {feed_url: feedUrl}})
+            .json<DiscoveredFeed>()
+            .then((responseData) => {
+                nameRef.current!.value = responseData.name;
+                languageRef.current!.value = responseData.language;
+                feedUrlRef.current!.value = responseData.feed_url;
+                siteUrlRef.current!.value = responseData.site_url;
+                faviconUrlRef.current!.value = responseData.favicon_url;
+
+                setSearchUrl('');
+                setDiscoveredFeedUrls([]);
+            })
+            .catch((error) => {
+                console.error(error);
+            })
+            .finally(() => setIsDiscoverFeedProcessing(false));
+    };
+
+    return (
+        <Form method="post" action={action} className="space-y-4">
+            <div className="flex">
+                <TextInput
+                    id="search_url"
+                    className="grow w-full rounded-r-none border-r-0"
+                    placeholder={t('Search URL...')}
+                    value={searchUrl}
+                    onChange={(e) => setSearchUrl(e.target.value)}
+                    isFocused
+                />
+
+                <SecondaryButton
+                    className="rounded-l-none border border-gray-300 dark:border-gray-700"
+                    onClick={() => discoverFeedUrls(searchUrl)}
+                    disabled={isDiscoverFeedProcessing || searchUrl.length < 5}
+                >
+                    {t('Search')}
+                </SecondaryButton>
+            </div>
+
+            {discoveredFeedUrls.length > 0 && (
+                <LinkStack>
+                    {discoveredFeedUrls.map((discoveredFeedUrl) => (
+                        <button
+                            key={discoveredFeedUrl}
+                            type="button"
+                            className="block w-full text-left px-4 py-2 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600 first:rounded-t last:rounded-b transition"
+                            onClick={selectDiscoveredFeedUrl(discoveredFeedUrl)}
+                        >
+                            {discoveredFeedUrl}
+                        </button>
+                    ))}
+                </LinkStack>
+            )}
+
+            <div>
+                <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
+                <TextInput
+                    ref={nameRef}
+                    id="name"
+                    name="name"
+                    defaultValue={feed?.name}
+                    className="block w-full"
+                    required
+                    isFocused
+                />
+                <InputError message={errors?.name}/>
+            </div>
+
+            <div>
+                <InputLabel htmlFor="category_id" value={t('validation.attributes.category_id')} required/>
+
+                <Select
+                    id="category_id"
+                    name="category_id"
+                    defaultValue={feed?.category_id}
+                    className="mt-1 block w-full"
+                    options={categories}
+                    required
+                />
+
+                <InputError message={errors?.category_id}/>
+            </div>
+
+            <div>
+                <InputLabel htmlFor="language" value={t('validation.attributes.language')} required/>
+
+                <TextInput
+                    ref={languageRef}
+                    id="language"
+                    name="language"
+                    defaultValue={feed?.language}
+                    className="mt-1 block w-full"
+                    required
+                />
+
+                <InputError className="mt-2" message={errors?.language}/>
+            </div>
+
+            <div>
+                <InputLabel htmlFor="feed_url" value={t('validation.attributes.feed_url')} required/>
+
+                <TextInput
+                    ref={feedUrlRef}
+                    id="feed_url"
+                    name="feed_url"
+                    defaultValue={feed?.feed_url}
+                    className="mt-1 block w-full"
+                    required
+                />
+
+                <InputError className="mt-2" message={errors?.feed_url}/>
+            </div>
+
+            <div>
+                <InputLabel htmlFor="site_url" value={t('validation.attributes.site_url')} required/>
+
+                <TextInput
+                    ref={siteUrlRef}
+                    id="site_url"
+                    name="site_url"
+                    defaultValue={feed?.site_url}
+                    className="mt-1 block w-full"
+                    required
+                />
+
+                <InputError className="mt-2" message={errors?.site_url}/>
+            </div>
+
+            <div>
+                <InputLabel htmlFor="favicon_url" value={t('validation.attributes.favicon_url')}/>
+
+                <TextInput
+                    ref={faviconUrlRef}
+                    id="favicon_url"
+                    name="favicon_url"
+                    defaultValue={feed?.favicon_url ?? ''}
+                    className="mt-1 block w-full"
+                />
+
+                <InputError className="mt-2" message={errors?.site_url}/>
+            </div>
+
+            <div>
+                <label className="flex items-center w-fit">
+                    <Checkbox name="is_purgeable" value="1" defaultChecked={feed?.is_purgeable}/>
+
+                    <span className="ml-2 text-sm text-gray-600 dark:text-gray-400">
+                        {tChoice('feed.purge', user!.months_after_pruning_feed_items)}
+                    </span>
+                </label>
+            </div>
+
+            <PrimaryButton type="submit">
+                {t('Save')}
+            </PrimaryButton>
+        </Form>
+    );
+}
diff --git a/resources/js/V2/types/CreateFeedValidationErrors.ts b/resources/js/V2/types/CreateFeedValidationErrors.ts
new file mode 100644
index 00000000..4390c3c6
--- /dev/null
+++ b/resources/js/V2/types/CreateFeedValidationErrors.ts
@@ -0,0 +1,12 @@
+import ValidationErrors from '@/V2/types/ValidationErrors';
+
+type CreateFeedValidationErrors = ValidationErrors & {
+    name?: string;
+    category_id?: string;
+    language?: string;
+    feed_url?: string;
+    site_url?: string;
+    favicon_url?: string;
+} | null;
+
+export default CreateFeedValidationErrors;
diff --git a/resources/js/V2/types/EditFeedValidationErrors.ts b/resources/js/V2/types/EditFeedValidationErrors.ts
new file mode 100644
index 00000000..89281422
--- /dev/null
+++ b/resources/js/V2/types/EditFeedValidationErrors.ts
@@ -0,0 +1,12 @@
+import ValidationErrors from '@/V2/types/ValidationErrors';
+
+type EditFeedValidationErrors = ValidationErrors & {
+    name?: string;
+    category_id?: string;
+    language?: string;
+    feed_url?: string;
+    site_url?: string;
+    favicon_url?: string;
+} | null;
+
+export default EditFeedValidationErrors;

From 6c821dd711737bed81bd5ac3646e9048d9728704 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Mon, 11 Mar 2024 22:53:50 +0100
Subject: [PATCH 29/79] added missing translation

---
 lang/de.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lang/de.json b/lang/de.json
index 836f2c89..daf7bfdf 100644
--- a/lang/de.json
+++ b/lang/de.json
@@ -112,5 +112,6 @@
     "Delete user": "Benutzer löschen",
     "Do you really want to delete the user “:name”?": "Wollen Sie den Benutzer „:name” wirklich löschen?",
     "Manage users": "Benutzer verwalten",
-    "Home": "Startseite"
+    "Home": "Startseite",
+    "Edit feed": "Feed ändern"
 }

From 1610173b022a3a5cdf698702114e40fca8a0b5e4 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Mon, 11 Mar 2024 22:54:08 +0100
Subject: [PATCH 30/79] minor layout adjustments

---
 resources/js/V2/Pages/Feeds/Partials/FeedForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/V2/Pages/Feeds/Partials/FeedForm.tsx b/resources/js/V2/Pages/Feeds/Partials/FeedForm.tsx
index b41b0d1b..75af2762 100644
--- a/resources/js/V2/Pages/Feeds/Partials/FeedForm.tsx
+++ b/resources/js/V2/Pages/Feeds/Partials/FeedForm.tsx
@@ -69,7 +69,7 @@ export default function FeedForm({action, feed = null, categories, errors}: { ac
 
     return (
         <Form method="post" action={action} className="space-y-4">
-            <div className="flex">
+            <div className="flex pb-8">
                 <TextInput
                     id="search_url"
                     className="grow w-full rounded-r-none border-r-0"

From 9666149dfbe6af840966a2dda9a52b48eb781424 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Mon, 11 Mar 2024 23:12:00 +0100
Subject: [PATCH 31/79] added mobile navigation

---
 resources/js/Components/Dropdown.tsx         |  1 +
 resources/js/V2/Core/AuthenticatedLayout.tsx | 90 +++++++++++++++++++-
 2 files changed, 88 insertions(+), 3 deletions(-)

diff --git a/resources/js/Components/Dropdown.tsx b/resources/js/Components/Dropdown.tsx
index 733eb406..ae9a6cf2 100644
--- a/resources/js/Components/Dropdown.tsx
+++ b/resources/js/Components/Dropdown.tsx
@@ -102,6 +102,7 @@ const DropdownLink = ({to, className = '', children}: { to: string; className?:
     return (
         <NavLink
             to={to}
+            end
             onClick={() => setOpen(false)}
             className={({isActive}) => clsx(
                 'block w-full text-left px-4 py-2 text-sm leading-5 rounded-lg focus:outline-none transition duration-150 ease-in-out',
diff --git a/resources/js/V2/Core/AuthenticatedLayout.tsx b/resources/js/V2/Core/AuthenticatedLayout.tsx
index 469c2083..24942dac 100644
--- a/resources/js/V2/Core/AuthenticatedLayout.tsx
+++ b/resources/js/V2/Core/AuthenticatedLayout.tsx
@@ -1,6 +1,6 @@
 import {Outlet, useLoaderData, useLocation, useMatches} from 'react-router-dom';
 import Breadcrumbs from '@/V2/Core/Breadcrumbs';
-import {useEffect} from 'react';
+import {Fragment, useEffect, useState} from 'react';
 import MatchWithHandle from '@/V2/types/MatchWithHandle';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import Dropdown from '@/Components/Dropdown';
@@ -8,22 +8,35 @@ import DropdownArrowIcon from '@/Icons/DropdownArrowIcon';
 import useAuth from '@/V2/Hooks/useAuth';
 import User from '@/types/generated/Models/User';
 import request from '@/V2/request';
+import {Transition} from '@headlessui/react';
+import clsx from 'clsx';
 
 const AuthenticatedLayout = () => {
     const {user, setUser} = useAuth();
     const userData = useLoaderData() as User;
+
     const {t} = useLaravelReactI18n();
     const location = useLocation();
     const match = useMatches().find((match) => match.pathname === location.pathname) as MatchWithHandle;
 
+    const [isNavigationMenuOpen, setIsNavigationMenuOpen] = useState(false);
+
     useEffect(() => {
         setUser(userData);
     }, []);
 
     useEffect(() => {
         document.querySelector('title')!.textContent = t(match?.handle.titleKey);
+
+        setIsNavigationMenuOpen(false);
     }, [location]);
 
+    useEffect(() => {
+        // document.body.style.overflowY = isNavigationMenuOpen ? 'hidden' : '';
+        // document.body.style.position = isNavigationMenuOpen ? 'fixed' : '';
+        // document.body.style.width = isNavigationMenuOpen ? '100%' : '';
+    }, [isNavigationMenuOpen]);
+
     const handleLogout = async () => {
         await request.delete('/api/logout');
 
@@ -36,11 +49,12 @@ const AuthenticatedLayout = () => {
 
     return (
         <div className="min-h-screen text-gray-800 dark:text-gray-300 bg-gray-50 dark:bg-gray-900">
-            <header className="flex justify-between items-center max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 text-xl space-x-2">
+            <header
+                className="flex justify-between items-center max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 text-xl space-x-2">
                 <Breadcrumbs/>
 
                 <Dropdown>
-                    <Dropdown.Trigger>
+                    <Dropdown.Trigger className="hidden sm:block">
                         <span className="inline-flex rounded-md">
                             <button
                                 type="button"
@@ -69,11 +83,81 @@ const AuthenticatedLayout = () => {
                         </Dropdown.Button>
                     </Dropdown.Content>
                 </Dropdown>
+
+                <button
+                    onClick={() => setIsNavigationMenuOpen((prevState) => !prevState)}
+                    className={clsx(
+                        'sm:hidden inline-flex items-center justify-center rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out',
+                        {
+                            'fixed z-30 right-4': isNavigationMenuOpen,
+                        }
+                    )}
+                >
+                    <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                        <path
+                            className={!isNavigationMenuOpen ? 'inline-flex' : 'hidden'}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            d="M4 6h16M4 12h16M4 18h16"
+                        />
+                        <path
+                            className={isNavigationMenuOpen ? 'inline-flex' : 'hidden'}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            d="M6 18L18 6M6 6l12 12"
+                        />
+                    </svg>
+                </button>
             </header>
 
             <main className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
                 <Outlet/>
             </main>
+
+            <Transition show={isNavigationMenuOpen} as={Fragment} leave="duration-200">
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0 -translate-y-8 sm:translate-y-0"
+                    enterTo="opacity-100 translate-y-0"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100 translate-y-0"
+                    leaveTo="opacity-0 -translate-y-8 sm:translate-y-0"
+                >
+                    <div className="fixed overflow-y-auto scrollbar-y-sm px-4 pt-16 pb-16 top-0 bg-white/50 dark:bg-gray-800/50 z-20 w-full h-full backdrop-blur-lg sm:hidden">
+                        <div className="pt-2 pb-3 space-y-1">
+                            <Dropdown.Link to="/app">
+                                {t('Home')}
+                            </Dropdown.Link>
+
+                            <Dropdown.Link to="/app/categories">
+                                {t('Categories')}
+                            </Dropdown.Link>
+
+                            <Dropdown.Link to="/app/feeds">
+                                {t('Feeds')}
+                            </Dropdown.Link>
+                        </div>
+
+                        <div className="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
+                            <div className="px-4">
+                                <div className="font-medium text-base text-gray-800 dark:text-gray-200">
+                                    {user.name}
+                                </div>
+                                <div className="font-medium text-sm text-gray-500">{user.email}</div>
+                            </div>
+
+                            <div className="mt-3 space-y-1">
+                                <Dropdown.Button onClick={handleLogout}>
+                                    {t('Logout')}
+                                </Dropdown.Button>
+                            </div>
+                        </div>
+                    </div>
+                </Transition.Child>
+            </Transition>
         </div>
     );
 };

From 0a7086751f6183473c9fd4380a6cccbe0845b7d8 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Tue, 12 Mar 2024 19:16:50 +0100
Subject: [PATCH 32/79] adjusted routes

---
 .../Auth/AuthenticatedSessionController.php     |  4 ++--
 app/Providers/RouteServiceProvider.php          |  2 +-
 resources/js/V2/Core/AuthenticatedLayout.tsx    |  8 ++++----
 resources/js/V2/Core/Router/router.tsx          |  8 ++++++--
 .../V2/Pages/Categories/CategoriesIndexPage.tsx |  4 ++--
 .../V2/Pages/Categories/CreateCategoryPage.tsx  |  4 ++--
 .../js/V2/Pages/Categories/EditCategoryPage.tsx |  6 +++---
 resources/js/V2/Pages/Feeds/CreateFeedPage.tsx  |  4 ++--
 resources/js/V2/Pages/Feeds/EditFeedPage.tsx    |  6 +++---
 resources/js/V2/Pages/Feeds/FeedsIndexPage.tsx  |  4 ++--
 routes/web.php                                  | 17 ++++++++++-------
 11 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/app/Http/Controllers/Auth/AuthenticatedSessionController.php b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
index bb400066..e7601ec5 100644
--- a/app/Http/Controllers/Auth/AuthenticatedSessionController.php
+++ b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
@@ -29,13 +29,13 @@ public function create(): Response
     /**
      * Handle an incoming authentication request.
      */
-    public function store(LoginRequest $request): RedirectResponse
+    public function store(LoginRequest $request): \Symfony\Component\HttpFoundation\Response
     {
         $request->authenticate();
 
         $request->session()->regenerate();
 
-        return redirect()->intended(RouteServiceProvider::HOME);
+        return Inertia::location(RouteServiceProvider::HOME);
     }
 
     /**
diff --git a/app/Providers/RouteServiceProvider.php b/app/Providers/RouteServiceProvider.php
index 66f5c974..b122ec54 100644
--- a/app/Providers/RouteServiceProvider.php
+++ b/app/Providers/RouteServiceProvider.php
@@ -19,7 +19,7 @@ class RouteServiceProvider extends ServiceProvider
      *
      * @var string
      */
-    public const HOME = '/dashboard';
+    public const HOME = '/';
 
     /**
      * Define your route model bindings, pattern filters, and other route configuration.
diff --git a/resources/js/V2/Core/AuthenticatedLayout.tsx b/resources/js/V2/Core/AuthenticatedLayout.tsx
index 24942dac..4891c2b0 100644
--- a/resources/js/V2/Core/AuthenticatedLayout.tsx
+++ b/resources/js/V2/Core/AuthenticatedLayout.tsx
@@ -68,11 +68,11 @@ const AuthenticatedLayout = () => {
                     </Dropdown.Trigger>
 
                     <Dropdown.Content>
-                        <Dropdown.Link to="/app/categories">
+                        <Dropdown.Link to="/categories">
                             {t('Categories')}
                         </Dropdown.Link>
 
-                        <Dropdown.Link to="/app/feeds">
+                        <Dropdown.Link to="/feeds">
                             {t('Feeds')}
                         </Dropdown.Link>
 
@@ -132,11 +132,11 @@ const AuthenticatedLayout = () => {
                                 {t('Home')}
                             </Dropdown.Link>
 
-                            <Dropdown.Link to="/app/categories">
+                            <Dropdown.Link to="/categories">
                                 {t('Categories')}
                             </Dropdown.Link>
 
-                            <Dropdown.Link to="/app/feeds">
+                            <Dropdown.Link to="/feeds">
                                 {t('Feeds')}
                             </Dropdown.Link>
                         </div>
diff --git a/resources/js/V2/Core/Router/router.tsx b/resources/js/V2/Core/Router/router.tsx
index a60df6b7..6e188730 100644
--- a/resources/js/V2/Core/Router/router.tsx
+++ b/resources/js/V2/Core/Router/router.tsx
@@ -1,4 +1,4 @@
-import {createBrowserRouter} from 'react-router-dom';
+import {createBrowserRouter, redirect} from 'react-router-dom';
 import categoriesLoader from '@/V2/Core/Router/Loaders/categoriesLoader';
 import AuthenticatedLayout from '@/V2/Core/AuthenticatedLayout';
 import CategoriesIndexPage from '@/V2/Pages/Categories/CategoriesIndexPage';
@@ -22,12 +22,16 @@ import editFeedAction from '@/V2/Core/Router/Actions/editFeedAction';
 
 const router = createBrowserRouter([
     {
-        path: '/app',
+        path: '/',
         element: <AuthProvider><AuthenticatedLayout/></AuthProvider>,
         errorElement: <ErrorPage/>,
         loader: layoutLoader,
         handle: {titleKey: 'Home'} as RouteHandle,
         children: [
+            {
+                path: 'login',
+                loader: () => redirect('/'),
+            },
             {
                 path: 'categories',
                 element: <CategoriesIndexPage/>,
diff --git a/resources/js/V2/Pages/Categories/CategoriesIndexPage.tsx b/resources/js/V2/Pages/Categories/CategoriesIndexPage.tsx
index 64a0600a..707a9a9f 100644
--- a/resources/js/V2/Pages/Categories/CategoriesIndexPage.tsx
+++ b/resources/js/V2/Pages/Categories/CategoriesIndexPage.tsx
@@ -15,7 +15,7 @@ export default function CategoriesIndexPage() {
         <div>
             <Actions>
                 {canCreate && (
-                    <Link to="/app/categories/create" className="link-secondary">
+                    <Link to="/categories/create" className="link-secondary">
                         {t('Add category')}
                     </Link>
                 )}
@@ -34,7 +34,7 @@ export default function CategoriesIndexPage() {
                         {categories.map((category) => (
                             <LinkStack.Item
                                 key={category.id}
-                                to={`/app/categories/${category.id}/edit`}
+                                to={`/categories/${category.id}/edit`}
                                 className="block"
                             >
                                 <div className="font-semibold">
diff --git a/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx b/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
index c1e6adc2..86b2295a 100644
--- a/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
+++ b/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
@@ -9,7 +9,7 @@ import CategoryForm from '@/V2/Pages/Categories/Partials/CategoryForm';
 export default function CreateCategoryPage() {
     const {t} = useLaravelReactI18n();
     const errors = useActionData() as CreateCategoryValidationErrors;
-    const {show, handleClose} = usePageModal(errors, '/app/categories');
+    const {show, handleClose} = usePageModal(errors, '/categories');
 
     return (
         <Pane appear show={show} onClose={handleClose}>
@@ -19,7 +19,7 @@ export default function CreateCategoryPage() {
 
             <PaneBody>
                 <CategoryForm
-                    action="/app/categories/create"
+                    action="/categories/create"
                     errors={errors}
                 />
             </PaneBody>
diff --git a/resources/js/V2/Pages/Categories/EditCategoryPage.tsx b/resources/js/V2/Pages/Categories/EditCategoryPage.tsx
index f4af6969..1c72e142 100644
--- a/resources/js/V2/Pages/Categories/EditCategoryPage.tsx
+++ b/resources/js/V2/Pages/Categories/EditCategoryPage.tsx
@@ -14,14 +14,14 @@ export default function EditCategoryPage() {
     const {categoryId} = useParams();
     const {category, canDelete} = useLoaderData() as EditCategoryLoaderType;
     const errors = useActionData() as EditCategoryValidationErrors;
-    const {show, handleClose} = usePageModal(errors, '/app/categories');
+    const {show, handleClose} = usePageModal(errors, '/categories');
     const submit = useSubmit();
 
     const handleDelete = () => {
         const formData = new FormData();
         formData.append('intent', 'delete');
 
-        submit(formData, {method: 'delete', action: `/app/categories/${categoryId}/edit`});
+        submit(formData, {method: 'delete', action: `/categories/${categoryId}/edit`});
     };
 
     return (
@@ -32,7 +32,7 @@ export default function EditCategoryPage() {
 
             <PaneBody>
                 <CategoryForm
-                    action={`/app/categories/${categoryId}/edit`}
+                    action={`/categories/${categoryId}/edit`}
                     category={category}
                     errors={errors}
                 />
diff --git a/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx b/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx
index 28f06eea..a5399d3c 100644
--- a/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx
+++ b/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx
@@ -11,7 +11,7 @@ export default function CreateFeedPage() {
     const {t} = useLaravelReactI18n();
     const {categories} = useLoaderData() as CreateFeedLoaderType;
     const errors = useActionData() as CreateFeedValidationErrors;
-    const {show, handleClose} = usePageModal(errors, '/app/feeds');
+    const {show, handleClose} = usePageModal(errors, '/feeds');
 
     return (
         <Pane appear show={show} onClose={handleClose}>
@@ -21,7 +21,7 @@ export default function CreateFeedPage() {
 
             <PaneBody>
                 <FeedForm
-                    action="/app/feeds/create"
+                    action="/feeds/create"
                     categories={categories}
                     errors={errors}
                 />
diff --git a/resources/js/V2/Pages/Feeds/EditFeedPage.tsx b/resources/js/V2/Pages/Feeds/EditFeedPage.tsx
index 974628bc..1481cce9 100644
--- a/resources/js/V2/Pages/Feeds/EditFeedPage.tsx
+++ b/resources/js/V2/Pages/Feeds/EditFeedPage.tsx
@@ -14,14 +14,14 @@ export default function EditFeedPage() {
     const {feedId} = useParams();
     const {categories, feed, canDelete} = useLoaderData() as EditFeedLoaderType;
     const errors = useActionData() as EditFeedValidationErrors;
-    const {show, handleClose} = usePageModal(errors, '/app/feeds');
+    const {show, handleClose} = usePageModal(errors, '/feeds');
     const submit = useSubmit();
 
     const handleDelete = () => {
         const formData = new FormData();
         formData.append('intent', 'delete');
 
-        submit(formData, {method: 'delete', action: `/app/feeds/${feedId}/edit`});
+        submit(formData, {method: 'delete', action: `/feeds/${feedId}/edit`});
     };
 
     return (
@@ -32,7 +32,7 @@ export default function EditFeedPage() {
 
             <PaneBody>
                 <FeedForm
-                    action={`/app/feeds/${feedId}/edit`}
+                    action={`/feeds/${feedId}/edit`}
                     feed={feed}
                     categories={categories}
                     errors={errors}
diff --git a/resources/js/V2/Pages/Feeds/FeedsIndexPage.tsx b/resources/js/V2/Pages/Feeds/FeedsIndexPage.tsx
index a24b95aa..31b4dfb9 100644
--- a/resources/js/V2/Pages/Feeds/FeedsIndexPage.tsx
+++ b/resources/js/V2/Pages/Feeds/FeedsIndexPage.tsx
@@ -19,7 +19,7 @@ export default function FeedsIndexPage() {
         <div>
             <Actions>
                 {canCreate && (
-                    <Link to="/app/feeds/create" className="link-secondary">
+                    <Link to="/feeds/create" className="link-secondary">
                         {t('Add feed')}
                     </Link>
                 )}
@@ -38,7 +38,7 @@ export default function FeedsIndexPage() {
                         {feeds.map((feed) => (
                             <LinkStack.Item
                                 key={feed.id}
-                                to={`/app/feeds/${feed.id}/edit`}
+                                to={`/feeds/${feed.id}/edit`}
                                 className="block sm:flex justify-between"
                             >
                                 <div className="flex items-center">
diff --git a/routes/web.php b/routes/web.php
index 43839bd0..96f666f3 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -24,7 +24,12 @@
 |
 */
 
-Route::get('/', function () {
+Route::get('/', function (Request $request) {
+    if ($request->user())
+    {
+        return view('app_react');
+    }
+
     return Inertia::render('Welcome', [
         'canLogin' => Route::has('login'),
         'canRegister' => Route::has('register'),
@@ -33,12 +38,6 @@
     ]);
 });
 
-Route::group(['prefix' => 'app'], function () {
-    Route::any('{all?}', function() {
-        return view('app_react');
-    })->where(['all' => '.*']);
-});
-
 Route::middleware('auth')->group(function () {
     Route::get('/dashboard', DashboardController::class)->name('dashboard');
 
@@ -63,3 +62,7 @@
 });
 
 require __DIR__.'/auth.php';
+
+Route::get('{all?}', function() {
+    return view('app_react');
+})->where(['all' => '.*']);

From b2bb21e18c8110d6edcedb27b6911305459a57d0 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Tue, 12 Mar 2024 21:09:42 +0100
Subject: [PATCH 33/79] added the ability to load feed items

---
 .../Controllers/Api/DashboardController.php   | 47 +++++++++++++++
 resources/js/V2/Core/AuthenticatedLayout.tsx  |  4 +-
 .../V2/Core/Router/Loaders/feedItemsLoader.ts | 11 ++++
 resources/js/V2/Core/Router/router.tsx        |  7 +++
 resources/js/V2/Pages/Home.tsx                | 57 +++++++++++++++++++
 resources/js/V2/types/FeedItemsLoaderType.ts  |  7 +++
 routes/api.php                                |  6 +-
 7 files changed, 137 insertions(+), 2 deletions(-)
 create mode 100644 app/Http/Controllers/Api/DashboardController.php
 create mode 100644 resources/js/V2/Core/Router/Loaders/feedItemsLoader.ts
 create mode 100644 resources/js/V2/Pages/Home.tsx
 create mode 100644 resources/js/V2/types/FeedItemsLoaderType.ts

diff --git a/app/Http/Controllers/Api/DashboardController.php b/app/Http/Controllers/Api/DashboardController.php
new file mode 100644
index 00000000..ec721304
--- /dev/null
+++ b/app/Http/Controllers/Api/DashboardController.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\DashboardRequest;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Support\Facades\Auth;
+
+class DashboardController extends Controller
+{
+    /**
+     * Handle the incoming request.
+     */
+    public function __invoke(DashboardRequest $request): JsonResponse
+    {
+        $feedId = $request->exists('feed_id') ? $request->integer('feed_id') : null;
+
+        $totalNumberOfFeedItems = Auth::user()->feedItems()->unread()->count();
+        $unreadFeeds = Auth::user()->feeds()
+            ->select(['id', 'name'])
+            ->whereHas('feedItems', fn (Builder $query) => $query->unread()) /** @phpstan-ignore-line */
+            ->withCount(['feedItems' => fn (Builder $query) => $query->unread()]) /** @phpstan-ignore-line */
+            ->get();
+
+        $feedItems = Auth::user()->feedItems()
+            ->unread()
+            ->when($feedId, fn (Builder $query) => $query->where('feed_id', $feedId)) /** @phpstan-ignore-line */
+            ->with('feed')
+            ->cursorPaginate()
+            ->withQueryString();
+
+        // if feed filtering is active and there are no unread feed items go back to dashboard without query strings
+        if ($feedId && $feedItems->isEmpty()) {
+            return response()->json(null);
+        }
+
+        return response()->json([
+            'selectedFeed' => $feedId ? $unreadFeeds->firstWhere('id', $feedId) : null,
+            'totalNumberOfFeedItems' => $totalNumberOfFeedItems,
+            'unreadFeeds' => $unreadFeeds,
+            'feedItems' => $feedItems,
+            'currentCursor' => $request->query('cursor'),
+        ]);
+    }
+}
diff --git a/resources/js/V2/Core/AuthenticatedLayout.tsx b/resources/js/V2/Core/AuthenticatedLayout.tsx
index 4891c2b0..8078be36 100644
--- a/resources/js/V2/Core/AuthenticatedLayout.tsx
+++ b/resources/js/V2/Core/AuthenticatedLayout.tsx
@@ -26,7 +26,9 @@ const AuthenticatedLayout = () => {
     }, []);
 
     useEffect(() => {
-        document.querySelector('title')!.textContent = t(match?.handle.titleKey);
+        if (match?.handle) {
+            document.querySelector('title')!.textContent = t(match?.handle.titleKey);
+        }
 
         setIsNavigationMenuOpen(false);
     }, [location]);
diff --git a/resources/js/V2/Core/Router/Loaders/feedItemsLoader.ts b/resources/js/V2/Core/Router/Loaders/feedItemsLoader.ts
new file mode 100644
index 00000000..a7b783c6
--- /dev/null
+++ b/resources/js/V2/Core/Router/Loaders/feedItemsLoader.ts
@@ -0,0 +1,11 @@
+import request from '@/V2/request';
+import {LoaderFunction} from '@remix-run/router/utils';
+import FeedItemsLoaderType from '@/V2/types/FeedItemsLoaderType';
+
+const feedItemsLoader: LoaderFunction = async ({request: req}) => {
+    const cursor = new URL(req.url).searchParams.get('cursor');
+
+    return await request(`/api/feed-items${cursor ? `?cursor=${cursor}` : ''}`).json<FeedItemsLoaderType>();
+};
+
+export default feedItemsLoader;
diff --git a/resources/js/V2/Core/Router/router.tsx b/resources/js/V2/Core/Router/router.tsx
index 6e188730..535ee1f5 100644
--- a/resources/js/V2/Core/Router/router.tsx
+++ b/resources/js/V2/Core/Router/router.tsx
@@ -19,6 +19,8 @@ import createFeedAction from '@/V2/Core/Router/Actions/createFeedAction';
 import EditFeedPage from '@/V2/Pages/Feeds/EditFeedPage';
 import editFeedLoader from '@/V2/Core/Router/Loaders/editFeedLoader';
 import editFeedAction from '@/V2/Core/Router/Actions/editFeedAction';
+import Home from '@/V2/Pages/Home';
+import feedItemsLoader from '@/V2/Core/Router/Loaders/feedItemsLoader';
 
 const router = createBrowserRouter([
     {
@@ -28,6 +30,11 @@ const router = createBrowserRouter([
         loader: layoutLoader,
         handle: {titleKey: 'Home'} as RouteHandle,
         children: [
+            {
+                path: '/',
+                element: <Home/>,
+                loader: feedItemsLoader,
+            },
             {
                 path: 'login',
                 loader: () => redirect('/'),
diff --git a/resources/js/V2/Pages/Home.tsx b/resources/js/V2/Pages/Home.tsx
new file mode 100644
index 00000000..3d29bfc8
--- /dev/null
+++ b/resources/js/V2/Pages/Home.tsx
@@ -0,0 +1,57 @@
+import {useFetcher, useLoaderData, useSearchParams} from 'react-router-dom';
+import FeedItemsLoaderType from '@/V2/types/FeedItemsLoaderType';
+import {useLaravelReactI18n} from 'laravel-react-i18n';
+import {HeadlessButton} from '@/Components/Button';
+import {useEffect, useState} from 'react';
+import FeedItem from '@/types/generated/Models/FeedItem';
+import CursorPagination from '@/types/CursorPagination';
+
+export default function Home() {
+    const {t} = useLaravelReactI18n();
+    const fetcher = useFetcher();
+    const {feedItems: initialFeedItems} = useLoaderData() as FeedItemsLoaderType;
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const [feedItems, setFeedItems] = useState<CursorPagination<FeedItem>>(initialFeedItems);
+
+    const handleLoadMore = () => {
+        if (!feedItems.next_cursor) {
+            return;
+        }
+
+        setSearchParams({cursor: feedItems.next_cursor});
+
+        fetcher.load(`/?cursor=${feedItems.next_cursor}`);
+    };
+
+    useEffect(() => {
+        if (fetcher.state === 'loading' || fetcher.state === 'submitting') {
+            return;
+        }
+
+        const fetcherData = fetcher.data as FeedItemsLoaderType;
+
+        if (!fetcherData) {
+            return;
+        }
+
+        setFeedItems((prevState) => ({
+            ...fetcherData.feedItems,
+            data: [...prevState.data, ...fetcherData.feedItems.data],
+        }));
+    }, [fetcher]);
+
+    return (
+        <div>
+            {feedItems.data.map((feedItem) => (
+                <div key={feedItem.id}>{feedItem.title}</div>
+            ))}
+
+            {feedItems.next_cursor && (
+                <HeadlessButton className="link-secondary" onClick={handleLoadMore}>
+                    {t('Load more')}
+                </HeadlessButton>
+            )}
+        </div>
+    );
+}
diff --git a/resources/js/V2/types/FeedItemsLoaderType.ts b/resources/js/V2/types/FeedItemsLoaderType.ts
new file mode 100644
index 00000000..d6225b0e
--- /dev/null
+++ b/resources/js/V2/types/FeedItemsLoaderType.ts
@@ -0,0 +1,7 @@
+import FeedItem from '@/types/generated/Models/FeedItem';
+import CursorPagination from '@/types/CursorPagination';
+
+type FeedItemsLoaderType = {
+    feedItems: CursorPagination<FeedItem>;
+}
+export default FeedItemsLoaderType;
diff --git a/routes/api.php b/routes/api.php
index feb2505d..f7c78abb 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,8 +1,10 @@
 <?php
 
 use App\Http\Controllers\Api\CategoryController;
+use App\Http\Controllers\Api\DashboardController;
 use App\Http\Controllers\Api\FeedController;
 use App\Http\Controllers\Api\FeedDiscovererController;
+use App\Http\Controllers\Api\FeedUrlDiscovererController;
 use App\Http\Controllers\Auth\AuthenticatedSessionController;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
@@ -26,5 +28,7 @@
     Route::resource('feeds', FeedController::class);
 
     Route::post('discover-feed', FeedDiscovererController::class)->name('discover-feed');
-    Route::post('discover-feed-urls', \App\Http\Controllers\Api\FeedUrlDiscovererController::class)->name('discover-feed-urls');
+    Route::post('discover-feed-urls', FeedUrlDiscovererController::class)->name('discover-feed-urls');
+
+    Route::get('feed-items', DashboardController::class);
 });

From 5978200bdfd451294ac17981aabde3f3c173afed Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Wed, 13 Mar 2024 20:15:45 +0100
Subject: [PATCH 34/79] added the ability to mark unread feed items as read

---
 ...MarkAllUnreadFeedItemsAsReadController.php | 25 ++++++++
 resources/js/V2/Pages/Home.tsx                | 58 +++++++++++++++++--
 resources/js/V2/types/FeedItemsLoaderType.ts  |  5 ++
 resources/js/V2/types/HomeLocationState.ts    |  5 ++
 routes/api.php                                |  1 +
 5 files changed, 88 insertions(+), 6 deletions(-)
 create mode 100644 app/Http/Controllers/Api/MarkAllUnreadFeedItemsAsReadController.php
 create mode 100644 resources/js/V2/types/HomeLocationState.ts

diff --git a/app/Http/Controllers/Api/MarkAllUnreadFeedItemsAsReadController.php b/app/Http/Controllers/Api/MarkAllUnreadFeedItemsAsReadController.php
new file mode 100644
index 00000000..ac88a759
--- /dev/null
+++ b/app/Http/Controllers/Api/MarkAllUnreadFeedItemsAsReadController.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class MarkAllUnreadFeedItemsAsReadController extends Controller
+{
+    /**
+     * Handle the incoming request.
+     */
+    public function __invoke(Request $request): JsonResponse
+    {
+        $now = now();
+
+        Auth::user()->feedItems()->unread()->update([
+            'read_at' => $now,
+        ]);
+
+        return response()->json();
+    }
+}
diff --git a/resources/js/V2/Pages/Home.tsx b/resources/js/V2/Pages/Home.tsx
index 3d29bfc8..18ea385b 100644
--- a/resources/js/V2/Pages/Home.tsx
+++ b/resources/js/V2/Pages/Home.tsx
@@ -1,15 +1,23 @@
-import {useFetcher, useLoaderData, useSearchParams} from 'react-router-dom';
+import {Location, useFetcher, useLoaderData, useLocation, useNavigate, useSearchParams} from 'react-router-dom';
 import FeedItemsLoaderType from '@/V2/types/FeedItemsLoaderType';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {HeadlessButton} from '@/Components/Button';
 import {useEffect, useState} from 'react';
 import FeedItem from '@/types/generated/Models/FeedItem';
 import CursorPagination from '@/types/CursorPagination';
+import {length} from 'ramda';
+import NewspaperSolidIcon from '@/Icons/NewspaperSolidIcon';
+import EmptyState from '@/Components/EmptyState';
+import Actions from '@/Components/Actions';
+import request from '@/V2/request';
+import HomeLocationState from '@/V2/types/HomeLocationState';
 
 export default function Home() {
-    const {t} = useLaravelReactI18n();
+    const {t, tChoice} = useLaravelReactI18n();
     const fetcher = useFetcher();
-    const {feedItems: initialFeedItems} = useLoaderData() as FeedItemsLoaderType;
+    const navigate = useNavigate();
+    const location: Location<HomeLocationState> = useLocation();
+    const {feedItems: initialFeedItems, totalNumberOfFeedItems} = useLoaderData() as FeedItemsLoaderType;
     const [searchParams, setSearchParams] = useSearchParams();
 
     const [feedItems, setFeedItems] = useState<CursorPagination<FeedItem>>(initialFeedItems);
@@ -41,11 +49,49 @@ export default function Home() {
         }));
     }, [fetcher]);
 
+    const markAllAsRead = async () => {
+        await request.put('/feeds/mark-all-as-read');
+
+        navigate(0);
+    };
+
     return (
         <div>
-            {feedItems.data.map((feedItem) => (
-                <div key={feedItem.id}>{feedItem.title}</div>
-            ))}
+            <div className="text-lg pb-4">
+                {tChoice('dashboard.unread_articles', totalNumberOfFeedItems)}
+            </div>
+
+            <Actions>
+                {totalNumberOfFeedItems > 0 && (
+                    <HeadlessButton
+                        confirm
+                        confirmTitle={t('Do you really want to mark all articles as read?')}
+                        confirmCancelTitle={t('Cancel')}
+                        confirmSubmitTitle={t('Mark all articles as read')}
+                        onClick={markAllAsRead}
+                        className="link-secondary"
+                        hasMobileFullSize
+                    >
+                        {t('Mark all as read')}
+                    </HeadlessButton>
+                )}
+            </Actions>
+
+            {length(feedItems.data) > 0
+                ? (
+                    <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-4 gap-y-16 sm:gap-y-4">
+                        {feedItems.data.map((feedItem) => (
+                            <div key={feedItem.id}>{feedItem.title}</div>
+                        ))}
+                    </div>
+                )
+                : (
+                    <EmptyState
+                        icon={NewspaperSolidIcon}
+                        message={t('No unread articles.')}
+                        description={t('Come back later.')}
+                    />
+                )}
 
             {feedItems.next_cursor && (
                 <HeadlessButton className="link-secondary" onClick={handleLoadMore}>
diff --git a/resources/js/V2/types/FeedItemsLoaderType.ts b/resources/js/V2/types/FeedItemsLoaderType.ts
index d6225b0e..9da8187d 100644
--- a/resources/js/V2/types/FeedItemsLoaderType.ts
+++ b/resources/js/V2/types/FeedItemsLoaderType.ts
@@ -1,7 +1,12 @@
 import FeedItem from '@/types/generated/Models/FeedItem';
 import CursorPagination from '@/types/CursorPagination';
+import Feed from '@/types/generated/Models/Feed';
 
 type FeedItemsLoaderType = {
+    selectedFeed: Feed | null;
+    totalNumberOfFeedItems: number;
+    unreadFeeds: Feed[];
     feedItems: CursorPagination<FeedItem>;
+    currentCursor: number;
 }
 export default FeedItemsLoaderType;
diff --git a/resources/js/V2/types/HomeLocationState.ts b/resources/js/V2/types/HomeLocationState.ts
new file mode 100644
index 00000000..9dc898e1
--- /dev/null
+++ b/resources/js/V2/types/HomeLocationState.ts
@@ -0,0 +1,5 @@
+type HomeLocationState = {
+    refresh: true;
+};
+
+export default HomeLocationState;
diff --git a/routes/api.php b/routes/api.php
index f7c78abb..898e64d9 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -25,6 +25,7 @@
     Route::delete('/logout', [AuthenticatedSessionController::class, 'destroy'])->name('logout');
 
     Route::resource('categories', CategoryController::class);
+    Route::put('/feeds/mark-all-as-read', \App\Http\Controllers\Api\MarkAllUnreadFeedItemsAsReadController::class)->name('mark-all-as-read');
     Route::resource('feeds', FeedController::class);
 
     Route::post('discover-feed', FeedDiscovererController::class)->name('discover-feed');

From f7955a88037e37c07c5d105786a4046196d03d9c Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Wed, 13 Mar 2024 20:25:04 +0100
Subject: [PATCH 35/79] added feed item cards

---
 .../Api/ToggleFeedItemController.php          | 24 +++++++++++++++++++
 resources/js/Components/FeedItemCard.tsx      | 18 +++++++-------
 resources/js/V2/Pages/Home.tsx                |  9 +++++--
 routes/api.php                                |  1 +
 4 files changed, 41 insertions(+), 11 deletions(-)
 create mode 100644 app/Http/Controllers/Api/ToggleFeedItemController.php

diff --git a/app/Http/Controllers/Api/ToggleFeedItemController.php b/app/Http/Controllers/Api/ToggleFeedItemController.php
new file mode 100644
index 00000000..2ccb08e3
--- /dev/null
+++ b/app/Http/Controllers/Api/ToggleFeedItemController.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Models\FeedItem;
+use Illuminate\Http\JsonResponse;
+
+class ToggleFeedItemController extends Controller
+{
+    /**
+     * Handle the incoming request.
+     */
+    public function __invoke(FeedItem $feedItem): JsonResponse
+    {
+        $this->authorize('update', $feedItem);
+
+        $feedItem->update([
+            'read_at' => $feedItem->read_at ? null : now(),
+        ]);
+
+        return response()->json($feedItem);
+    }
+}
diff --git a/resources/js/Components/FeedItemCard.tsx b/resources/js/Components/FeedItemCard.tsx
index 7180ceb0..e6465c53 100644
--- a/resources/js/Components/FeedItemCard.tsx
+++ b/resources/js/Components/FeedItemCard.tsx
@@ -1,34 +1,34 @@
 import Card from '@/Components/Card';
 import PhotoSolidIcon from '@/Icons/PhotoSolidIcon';
-import {useContext, useState} from 'react';
+import {useState} from 'react';
 import clsx from 'clsx';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {SecondaryButton} from '@/Components/Button';
-import TotalNumberOfFeedItemsContext from '@/Contexts/TotalNumberOfFeedItemsContext';
 import EyeOutlineIcon from '@/Icons/EyeOutlineIcon';
 import EyeSlashOutlineIcon from '@/Icons/EyeSlashOutlineIcon';
 import formatDateTime from '@/Utils/formatDateTime';
 import CalendarDaysSolidIcon from '@/Icons/CalendarDaysSolidIcon';
 import {RouteParams} from 'ziggy-js';
 import FeedItem from '@/types/generated/Models/FeedItem';
+import request from '@/V2/request';
 
 export default function FeedItemCard({hueRotationIndex, feedItem}: { hueRotationIndex: number; feedItem: FeedItem; }) {
     const {t} = useLaravelReactI18n();
-    const {totalNumberOfFeedItems, setTotalNumberOfFeedItems} = useContext(TotalNumberOfFeedItemsContext);
+    // const {totalNumberOfFeedItems, setTotalNumberOfFeedItems} = useContext(TotalNumberOfFeedItemsContext);
     const [internalFeedItem, setInternalFeedItem] = useState(feedItem);
     const [processing, setProcessing] = useState(false);
 
     const toggle = () => {
         setProcessing(true);
 
-        void window.ky.put(route('toggle-feed-item', internalFeedItem as unknown as RouteParams<'toggle-feed-item'>))
+        void request.put(`/feeds/${internalFeedItem.id}/toggle`)
             .json<FeedItem>()
             .then((data) => {
-                if (data.read_at) {
-                    setTotalNumberOfFeedItems(totalNumberOfFeedItems - 1);
-                } else {
-                    setTotalNumberOfFeedItems(totalNumberOfFeedItems + 1);
-                }
+                // if (data.read_at) {
+                //     setTotalNumberOfFeedItems(totalNumberOfFeedItems - 1);
+                // } else {
+                //     setTotalNumberOfFeedItems(totalNumberOfFeedItems + 1);
+                // }
 
                 setInternalFeedItem(data);
             })
diff --git a/resources/js/V2/Pages/Home.tsx b/resources/js/V2/Pages/Home.tsx
index 18ea385b..f900907d 100644
--- a/resources/js/V2/Pages/Home.tsx
+++ b/resources/js/V2/Pages/Home.tsx
@@ -11,6 +11,7 @@ import EmptyState from '@/Components/EmptyState';
 import Actions from '@/Components/Actions';
 import request from '@/V2/request';
 import HomeLocationState from '@/V2/types/HomeLocationState';
+import FeedItemCard from '@/Components/FeedItemCard';
 
 export default function Home() {
     const {t, tChoice} = useLaravelReactI18n();
@@ -80,8 +81,12 @@ export default function Home() {
             {length(feedItems.data) > 0
                 ? (
                     <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-4 gap-y-16 sm:gap-y-4">
-                        {feedItems.data.map((feedItem) => (
-                            <div key={feedItem.id}>{feedItem.title}</div>
+                        {feedItems.data.map((feedItem, index) => (
+                            <FeedItemCard
+                                key={feedItem.id}
+                                hueRotationIndex={index % 6}
+                                feedItem={feedItem}
+                            />
                         ))}
                     </div>
                 )
diff --git a/routes/api.php b/routes/api.php
index 898e64d9..a7256351 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -27,6 +27,7 @@
     Route::resource('categories', CategoryController::class);
     Route::put('/feeds/mark-all-as-read', \App\Http\Controllers\Api\MarkAllUnreadFeedItemsAsReadController::class)->name('mark-all-as-read');
     Route::resource('feeds', FeedController::class);
+    Route::put('/feeds/{feedItem}/toggle', \App\Http\Controllers\Api\ToggleFeedItemController::class)->name('toggle-feed-item');
 
     Route::post('discover-feed', FeedDiscovererController::class)->name('discover-feed');
     Route::post('discover-feed-urls', FeedUrlDiscovererController::class)->name('discover-feed-urls');

From e8bbd08192c664cd81f59fe83169947d5e31495f Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Wed, 13 Mar 2024 20:41:51 +0100
Subject: [PATCH 36/79] added total feed items count context

---
 resources/js/Components/FeedItemCard.tsx         | 16 ++++++++--------
 .../V2/Contexts/TotalNumberOfFeedItemsContext.ts | 10 ++++++++++
 resources/js/V2/Core/AuthProvider.tsx            |  6 +++++-
 resources/js/V2/Core/Router/router.tsx           |  3 ++-
 .../V2/Core/TotalNumberOfFeedItemsProvider.tsx   | 12 ++++++++++++
 resources/js/V2/Pages/Home.tsx                   | 14 +++++++++-----
 .../types/TotalNumberOfFeedItemsContextType.ts   |  6 ++++++
 7 files changed, 52 insertions(+), 15 deletions(-)
 create mode 100644 resources/js/V2/Contexts/TotalNumberOfFeedItemsContext.ts
 create mode 100644 resources/js/V2/Core/TotalNumberOfFeedItemsProvider.tsx
 create mode 100644 resources/js/V2/types/TotalNumberOfFeedItemsContextType.ts

diff --git a/resources/js/Components/FeedItemCard.tsx b/resources/js/Components/FeedItemCard.tsx
index e6465c53..84b35fa5 100644
--- a/resources/js/Components/FeedItemCard.tsx
+++ b/resources/js/Components/FeedItemCard.tsx
@@ -1,6 +1,6 @@
 import Card from '@/Components/Card';
 import PhotoSolidIcon from '@/Icons/PhotoSolidIcon';
-import {useState} from 'react';
+import {useContext, useState} from 'react';
 import clsx from 'clsx';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {SecondaryButton} from '@/Components/Button';
@@ -8,13 +8,13 @@ import EyeOutlineIcon from '@/Icons/EyeOutlineIcon';
 import EyeSlashOutlineIcon from '@/Icons/EyeSlashOutlineIcon';
 import formatDateTime from '@/Utils/formatDateTime';
 import CalendarDaysSolidIcon from '@/Icons/CalendarDaysSolidIcon';
-import {RouteParams} from 'ziggy-js';
 import FeedItem from '@/types/generated/Models/FeedItem';
 import request from '@/V2/request';
+import TotalNumberOfFeedItemsContext from '@/V2/Contexts/TotalNumberOfFeedItemsContext';
 
 export default function FeedItemCard({hueRotationIndex, feedItem}: { hueRotationIndex: number; feedItem: FeedItem; }) {
     const {t} = useLaravelReactI18n();
-    // const {totalNumberOfFeedItems, setTotalNumberOfFeedItems} = useContext(TotalNumberOfFeedItemsContext);
+    const {totalNumberOfFeedItems, setTotalNumberOfFeedItems} = useContext(TotalNumberOfFeedItemsContext);
     const [internalFeedItem, setInternalFeedItem] = useState(feedItem);
     const [processing, setProcessing] = useState(false);
 
@@ -24,11 +24,11 @@ export default function FeedItemCard({hueRotationIndex, feedItem}: { hueRotation
         void request.put(`/feeds/${internalFeedItem.id}/toggle`)
             .json<FeedItem>()
             .then((data) => {
-                // if (data.read_at) {
-                //     setTotalNumberOfFeedItems(totalNumberOfFeedItems - 1);
-                // } else {
-                //     setTotalNumberOfFeedItems(totalNumberOfFeedItems + 1);
-                // }
+                if (data.read_at) {
+                    setTotalNumberOfFeedItems(totalNumberOfFeedItems - 1);
+                } else {
+                    setTotalNumberOfFeedItems(totalNumberOfFeedItems + 1);
+                }
 
                 setInternalFeedItem(data);
             })
diff --git a/resources/js/V2/Contexts/TotalNumberOfFeedItemsContext.ts b/resources/js/V2/Contexts/TotalNumberOfFeedItemsContext.ts
new file mode 100644
index 00000000..045237f8
--- /dev/null
+++ b/resources/js/V2/Contexts/TotalNumberOfFeedItemsContext.ts
@@ -0,0 +1,10 @@
+import {createContext} from 'react';
+import noop from '@/Utils/noop';
+import TotalNumberOfFeedItemsContextType from '@/V2/types/TotalNumberOfFeedItemsContextType';
+
+const TotalNumberOfFeedItemsContext = createContext<TotalNumberOfFeedItemsContextType>({
+    totalNumberOfFeedItems: 0,
+    setTotalNumberOfFeedItems: noop,
+});
+
+export default TotalNumberOfFeedItemsContext;
diff --git a/resources/js/V2/Core/AuthProvider.tsx b/resources/js/V2/Core/AuthProvider.tsx
index e3f75094..abebbd82 100644
--- a/resources/js/V2/Core/AuthProvider.tsx
+++ b/resources/js/V2/Core/AuthProvider.tsx
@@ -5,5 +5,9 @@ import AuthContext from '@/V2/Contexts/AuthContext';
 export default function AuthProvider({children}: { children: ReactElement; }) {
     const [user, setUser] = useState<User | null>(null);
 
-    return <AuthContext.Provider value={{user, setUser}}>{children}</AuthContext.Provider>;
+    return (
+        <AuthContext.Provider value={{user, setUser}}>
+            {children}
+        </AuthContext.Provider>
+    );
 }
diff --git a/resources/js/V2/Core/Router/router.tsx b/resources/js/V2/Core/Router/router.tsx
index 535ee1f5..723a3f31 100644
--- a/resources/js/V2/Core/Router/router.tsx
+++ b/resources/js/V2/Core/Router/router.tsx
@@ -21,6 +21,7 @@ import editFeedLoader from '@/V2/Core/Router/Loaders/editFeedLoader';
 import editFeedAction from '@/V2/Core/Router/Actions/editFeedAction';
 import Home from '@/V2/Pages/Home';
 import feedItemsLoader from '@/V2/Core/Router/Loaders/feedItemsLoader';
+import TotalNumberOfFeedItemsProvider from '@/V2/Core/TotalNumberOfFeedItemsProvider';
 
 const router = createBrowserRouter([
     {
@@ -32,7 +33,7 @@ const router = createBrowserRouter([
         children: [
             {
                 path: '/',
-                element: <Home/>,
+                element: <TotalNumberOfFeedItemsProvider><Home/></TotalNumberOfFeedItemsProvider>,
                 loader: feedItemsLoader,
             },
             {
diff --git a/resources/js/V2/Core/TotalNumberOfFeedItemsProvider.tsx b/resources/js/V2/Core/TotalNumberOfFeedItemsProvider.tsx
new file mode 100644
index 00000000..bef08136
--- /dev/null
+++ b/resources/js/V2/Core/TotalNumberOfFeedItemsProvider.tsx
@@ -0,0 +1,12 @@
+import {ReactElement, useState} from 'react';
+import TotalNumberOfFeedItemsContext from '@/V2/Contexts/TotalNumberOfFeedItemsContext';
+
+export default function TotalNumberOfFeedItemsProvider({children}: { children: ReactElement; }) {
+    const [totalNumberOfFeedItems, setTotalNumberOfFeedItems] = useState(0);
+
+    return (
+        <TotalNumberOfFeedItemsContext.Provider value={{totalNumberOfFeedItems, setTotalNumberOfFeedItems}}>
+            {children}
+        </TotalNumberOfFeedItemsContext.Provider>
+    );
+}
diff --git a/resources/js/V2/Pages/Home.tsx b/resources/js/V2/Pages/Home.tsx
index f900907d..17582906 100644
--- a/resources/js/V2/Pages/Home.tsx
+++ b/resources/js/V2/Pages/Home.tsx
@@ -1,8 +1,8 @@
-import {Location, useFetcher, useLoaderData, useLocation, useNavigate, useSearchParams} from 'react-router-dom';
+import {useFetcher, useLoaderData, useNavigate, useSearchParams} from 'react-router-dom';
 import FeedItemsLoaderType from '@/V2/types/FeedItemsLoaderType';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {HeadlessButton} from '@/Components/Button';
-import {useEffect, useState} from 'react';
+import {useContext, useEffect, useState} from 'react';
 import FeedItem from '@/types/generated/Models/FeedItem';
 import CursorPagination from '@/types/CursorPagination';
 import {length} from 'ramda';
@@ -10,19 +10,23 @@ import NewspaperSolidIcon from '@/Icons/NewspaperSolidIcon';
 import EmptyState from '@/Components/EmptyState';
 import Actions from '@/Components/Actions';
 import request from '@/V2/request';
-import HomeLocationState from '@/V2/types/HomeLocationState';
 import FeedItemCard from '@/Components/FeedItemCard';
+import TotalNumberOfFeedItemsContext from '@/V2/Contexts/TotalNumberOfFeedItemsContext';
 
 export default function Home() {
     const {t, tChoice} = useLaravelReactI18n();
     const fetcher = useFetcher();
     const navigate = useNavigate();
-    const location: Location<HomeLocationState> = useLocation();
-    const {feedItems: initialFeedItems, totalNumberOfFeedItems} = useLoaderData() as FeedItemsLoaderType;
+    const {feedItems: initialFeedItems, totalNumberOfFeedItems: initialTotalNumberOfFeedItems} = useLoaderData() as FeedItemsLoaderType;
     const [searchParams, setSearchParams] = useSearchParams();
+    const {totalNumberOfFeedItems, setTotalNumberOfFeedItems} = useContext(TotalNumberOfFeedItemsContext);
 
     const [feedItems, setFeedItems] = useState<CursorPagination<FeedItem>>(initialFeedItems);
 
+    useEffect(() => {
+        setTotalNumberOfFeedItems(initialTotalNumberOfFeedItems);
+    }, []);
+
     const handleLoadMore = () => {
         if (!feedItems.next_cursor) {
             return;
diff --git a/resources/js/V2/types/TotalNumberOfFeedItemsContextType.ts b/resources/js/V2/types/TotalNumberOfFeedItemsContextType.ts
new file mode 100644
index 00000000..675bacd8
--- /dev/null
+++ b/resources/js/V2/types/TotalNumberOfFeedItemsContextType.ts
@@ -0,0 +1,6 @@
+type TotalNumberOfFeedItemsContextType = {
+    totalNumberOfFeedItems: number;
+    setTotalNumberOfFeedItems: (value: number) => void;
+};
+
+export default TotalNumberOfFeedItemsContextType;

From 6caa6b6d6d8d61d5dd7384bbbf5691fc3ae1e11e Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Wed, 13 Mar 2024 20:57:10 +0100
Subject: [PATCH 37/79] fixed total feed items count context updates

---
 resources/js/Components/FeedItemCard.tsx                   | 4 ++--
 resources/js/V2/Contexts/TotalNumberOfFeedItemsContext.ts  | 2 +-
 resources/js/V2/Pages/Home.tsx                             | 2 +-
 resources/js/V2/types/TotalNumberOfFeedItemsContextType.ts | 4 +++-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/resources/js/Components/FeedItemCard.tsx b/resources/js/Components/FeedItemCard.tsx
index 84b35fa5..f92db28d 100644
--- a/resources/js/Components/FeedItemCard.tsx
+++ b/resources/js/Components/FeedItemCard.tsx
@@ -25,9 +25,9 @@ export default function FeedItemCard({hueRotationIndex, feedItem}: { hueRotation
             .json<FeedItem>()
             .then((data) => {
                 if (data.read_at) {
-                    setTotalNumberOfFeedItems(totalNumberOfFeedItems - 1);
+                    setTotalNumberOfFeedItems((prevState) => prevState - 1);
                 } else {
-                    setTotalNumberOfFeedItems(totalNumberOfFeedItems + 1);
+                    setTotalNumberOfFeedItems((prevState) => prevState + 1);
                 }
 
                 setInternalFeedItem(data);
diff --git a/resources/js/V2/Contexts/TotalNumberOfFeedItemsContext.ts b/resources/js/V2/Contexts/TotalNumberOfFeedItemsContext.ts
index 045237f8..94e49a04 100644
--- a/resources/js/V2/Contexts/TotalNumberOfFeedItemsContext.ts
+++ b/resources/js/V2/Contexts/TotalNumberOfFeedItemsContext.ts
@@ -1,6 +1,6 @@
 import {createContext} from 'react';
-import noop from '@/Utils/noop';
 import TotalNumberOfFeedItemsContextType from '@/V2/types/TotalNumberOfFeedItemsContextType';
+import noop from '@/Utils/noop';
 
 const TotalNumberOfFeedItemsContext = createContext<TotalNumberOfFeedItemsContextType>({
     totalNumberOfFeedItems: 0,
diff --git a/resources/js/V2/Pages/Home.tsx b/resources/js/V2/Pages/Home.tsx
index 17582906..6239f91c 100644
--- a/resources/js/V2/Pages/Home.tsx
+++ b/resources/js/V2/Pages/Home.tsx
@@ -103,7 +103,7 @@ export default function Home() {
                 )}
 
             {feedItems.next_cursor && (
-                <HeadlessButton className="link-secondary" onClick={handleLoadMore}>
+                <HeadlessButton className="link-secondary mt-8" onClick={handleLoadMore}>
                     {t('Load more')}
                 </HeadlessButton>
             )}
diff --git a/resources/js/V2/types/TotalNumberOfFeedItemsContextType.ts b/resources/js/V2/types/TotalNumberOfFeedItemsContextType.ts
index 675bacd8..0b488fd3 100644
--- a/resources/js/V2/types/TotalNumberOfFeedItemsContextType.ts
+++ b/resources/js/V2/types/TotalNumberOfFeedItemsContextType.ts
@@ -1,6 +1,8 @@
+import {Dispatch, SetStateAction} from 'react';
+
 type TotalNumberOfFeedItemsContextType = {
     totalNumberOfFeedItems: number;
-    setTotalNumberOfFeedItems: (value: number) => void;
+    setTotalNumberOfFeedItems: Dispatch<SetStateAction<number>>;
 };
 
 export default TotalNumberOfFeedItemsContextType;

From 5888112c30e21f3b6e1a92ff26ec8a86b3bdaa72 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Thu, 14 Mar 2024 19:43:35 +0100
Subject: [PATCH 38/79] fixed feed item handling

---
 .../Controllers/Api/DashboardController.php   | 10 +--
 .../js/Components/FeedFilterDropdown.tsx      | 14 +++--
 .../V2/Core/Router/Loaders/feedItemsLoader.ts | 16 ++++-
 resources/js/V2/Pages/Home.tsx                | 62 ++++++++++++++-----
 resources/js/V2/types/FeedItemsLoaderType.ts  |  9 +--
 5 files changed, 80 insertions(+), 31 deletions(-)

diff --git a/app/Http/Controllers/Api/DashboardController.php b/app/Http/Controllers/Api/DashboardController.php
index ec721304..04f43600 100644
--- a/app/Http/Controllers/Api/DashboardController.php
+++ b/app/Http/Controllers/Api/DashboardController.php
@@ -6,6 +6,8 @@
 use App\Http\Requests\DashboardRequest;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Response;
+use Illuminate\Routing\ResponseFactory;
 use Illuminate\Support\Facades\Auth;
 
 class DashboardController extends Controller
@@ -13,7 +15,7 @@ class DashboardController extends Controller
     /**
      * Handle the incoming request.
      */
-    public function __invoke(DashboardRequest $request): JsonResponse
+    public function __invoke(DashboardRequest $request): ResponseFactory|JsonResponse
     {
         $feedId = $request->exists('feed_id') ? $request->integer('feed_id') : null;
 
@@ -32,9 +34,9 @@ public function __invoke(DashboardRequest $request): JsonResponse
             ->withQueryString();
 
         // if feed filtering is active and there are no unread feed items go back to dashboard without query strings
-        if ($feedId && $feedItems->isEmpty()) {
-            return response()->json(null);
-        }
+//        if ($feedId && $feedItems->isEmpty()) {
+//            return response()->json(new \stdClass());
+//        }
 
         return response()->json([
             'selectedFeed' => $feedId ? $unreadFeeds->firstWhere('id', $feedId) : null,
diff --git a/resources/js/Components/FeedFilterDropdown.tsx b/resources/js/Components/FeedFilterDropdown.tsx
index 3d9bbb80..3d0dc3e7 100644
--- a/resources/js/Components/FeedFilterDropdown.tsx
+++ b/resources/js/Components/FeedFilterDropdown.tsx
@@ -5,14 +5,19 @@ import FunnelOutlineIcon from '@/Icons/FunnelOutlineIcon';
 import DropdownArrowIcon from '@/Icons/DropdownArrowIcon';
 import {OtherProps} from '@/types';
 import ShortFeedWithFeedItemsCount from '@/types/generated/Models/ShortFeedWithFeedItemsCount';
+import {length} from 'ramda';
 
-export default function FeedFilterDropdown({selectedFeed, feeds, ...props}: { selectedFeed: ShortFeedWithFeedItemsCount; feeds: ShortFeedWithFeedItemsCount[]; props?: OtherProps; }) {
+export default function FeedFilterDropdown({selectedFeed, feeds, ...props}: { selectedFeed: ShortFeedWithFeedItemsCount | null; feeds: ShortFeedWithFeedItemsCount[]; props?: OtherProps; }) {
     const {t} = useLaravelReactI18n();
 
-    if (feeds.length === 0) {
+    if (length(feeds) === 0) {
         return null;
     }
 
+    const getFeedFilterUrl = (id: number) => {
+        return `/?${new URLSearchParams({feed_id: id.toString()}).toString()}`;
+    };
+
     return (
         <div {...props}>
             <Dropdown>
@@ -36,7 +41,7 @@ export default function FeedFilterDropdown({selectedFeed, feeds, ...props}: { se
                 >
                     {selectedFeed && (
                         <>
-                            <Dropdown.Link href={route('dashboard')}>
+                            <Dropdown.Link to="/">
                                 {t('All feeds')}
                             </Dropdown.Link>
 
@@ -47,7 +52,8 @@ export default function FeedFilterDropdown({selectedFeed, feeds, ...props}: { se
                     {feeds.map((feed) => (
                         <Dropdown.Link
                             key={feed.id}
-                            href={`${route('dashboard')}?feed_id=${feed.id}`}
+
+                            to={getFeedFilterUrl(feed.id)}
                             active={selectedFeed?.id === feed.id}
                         >
                             {feed.name} ({feed.feed_items_count})
diff --git a/resources/js/V2/Core/Router/Loaders/feedItemsLoader.ts b/resources/js/V2/Core/Router/Loaders/feedItemsLoader.ts
index a7b783c6..687df058 100644
--- a/resources/js/V2/Core/Router/Loaders/feedItemsLoader.ts
+++ b/resources/js/V2/Core/Router/Loaders/feedItemsLoader.ts
@@ -3,9 +3,21 @@ import {LoaderFunction} from '@remix-run/router/utils';
 import FeedItemsLoaderType from '@/V2/types/FeedItemsLoaderType';
 
 const feedItemsLoader: LoaderFunction = async ({request: req}) => {
-    const cursor = new URL(req.url).searchParams.get('cursor');
+    const searchParams = new URL(req.url).searchParams;
+    const cursor = searchParams.get('cursor');
+    const feedId = searchParams.get('feed_id');
 
-    return await request(`/api/feed-items${cursor ? `?cursor=${cursor}` : ''}`).json<FeedItemsLoaderType>();
+    const customSearchParams = new URLSearchParams();
+
+    if (cursor) {
+        customSearchParams.set('cursor', cursor);
+    }
+
+    if (feedId) {
+        customSearchParams.set('feed_id', feedId);
+    }
+
+    return await request(`/api/feed-items${customSearchParams.size > 0 ? `?${customSearchParams.toString()}` : ''}`).json<FeedItemsLoaderType>();
 };
 
 export default feedItemsLoader;
diff --git a/resources/js/V2/Pages/Home.tsx b/resources/js/V2/Pages/Home.tsx
index 6239f91c..b13e0d97 100644
--- a/resources/js/V2/Pages/Home.tsx
+++ b/resources/js/V2/Pages/Home.tsx
@@ -3,38 +3,59 @@ import FeedItemsLoaderType from '@/V2/types/FeedItemsLoaderType';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {HeadlessButton} from '@/Components/Button';
 import {useContext, useEffect, useState} from 'react';
-import FeedItem from '@/types/generated/Models/FeedItem';
-import CursorPagination from '@/types/CursorPagination';
-import {length} from 'ramda';
+import {isEmpty, length} from 'ramda';
 import NewspaperSolidIcon from '@/Icons/NewspaperSolidIcon';
 import EmptyState from '@/Components/EmptyState';
 import Actions from '@/Components/Actions';
 import request from '@/V2/request';
 import FeedItemCard from '@/Components/FeedItemCard';
 import TotalNumberOfFeedItemsContext from '@/V2/Contexts/TotalNumberOfFeedItemsContext';
+import FeedFilterDropdown from '@/Components/FeedFilterDropdown';
 
 export default function Home() {
     const {t, tChoice} = useLaravelReactI18n();
     const fetcher = useFetcher();
     const navigate = useNavigate();
-    const {feedItems: initialFeedItems, totalNumberOfFeedItems: initialTotalNumberOfFeedItems} = useLoaderData() as FeedItemsLoaderType;
+    const initialData = useLoaderData() as FeedItemsLoaderType;
     const [searchParams, setSearchParams] = useSearchParams();
     const {totalNumberOfFeedItems, setTotalNumberOfFeedItems} = useContext(TotalNumberOfFeedItemsContext);
 
-    const [feedItems, setFeedItems] = useState<CursorPagination<FeedItem>>(initialFeedItems);
+    const [data, setData] = useState<FeedItemsLoaderType>(initialData);
 
     useEffect(() => {
-        setTotalNumberOfFeedItems(initialTotalNumberOfFeedItems);
+        setTotalNumberOfFeedItems(data.totalNumberOfFeedItems);
     }, []);
 
+    useEffect(() => {
+        if (searchParams.has('feed_id')) {
+            setData(initialData);
+        }
+    }, [searchParams.get('feed_id')]);
+
+    useEffect(() => {
+        if (searchParams.has('cursor')) {
+            return;
+        }
+
+        if (isEmpty(initialData.feedItems.data) && searchParams.has('feed_id')) {
+            navigate('/');
+
+            return;
+        }
+
+        setData(initialData);
+    }, [initialData]);
+
     const handleLoadMore = () => {
-        if (!feedItems.next_cursor) {
+        if (!data.feedItems.next_cursor) {
             return;
         }
 
-        setSearchParams({cursor: feedItems.next_cursor});
+        const nextSearchParams = new URLSearchParams({...Object.fromEntries(searchParams), cursor: data.feedItems.next_cursor});
 
-        fetcher.load(`/?cursor=${feedItems.next_cursor}`);
+        fetcher.load(`/?${nextSearchParams}`);
+
+        setSearchParams(nextSearchParams);
     };
 
     useEffect(() => {
@@ -48,25 +69,32 @@ export default function Home() {
             return;
         }
 
-        setFeedItems((prevState) => ({
-            ...fetcherData.feedItems,
-            data: [...prevState.data, ...fetcherData.feedItems.data],
+        setData((prevState) => ({
+            ...fetcherData,
+            feedItems: {
+                ...fetcherData.feedItems,
+                data: [...prevState.feedItems.data, ...fetcherData.feedItems.data],
+            },
         }));
     }, [fetcher]);
 
     const markAllAsRead = async () => {
         await request.put('/feeds/mark-all-as-read');
 
-        navigate(0);
+        setTotalNumberOfFeedItems(0);
+
+        navigate('/');
     };
 
     return (
         <div>
-            <div className="text-lg pb-4">
+            <div className="pb-4">
                 {tChoice('dashboard.unread_articles', totalNumberOfFeedItems)}
             </div>
 
             <Actions>
+                {data.feedItems && <FeedFilterDropdown selectedFeed={data.selectedFeed} feeds={data.unreadFeeds}/>}
+
                 {totalNumberOfFeedItems > 0 && (
                     <HeadlessButton
                         confirm
@@ -82,10 +110,10 @@ export default function Home() {
                 )}
             </Actions>
 
-            {length(feedItems.data) > 0
+            {length(data.feedItems.data) > 0
                 ? (
                     <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-4 gap-y-16 sm:gap-y-4">
-                        {feedItems.data.map((feedItem, index) => (
+                        {data.feedItems.data.map((feedItem, index) => (
                             <FeedItemCard
                                 key={feedItem.id}
                                 hueRotationIndex={index % 6}
@@ -102,7 +130,7 @@ export default function Home() {
                     />
                 )}
 
-            {feedItems.next_cursor && (
+            {data.feedItems.next_cursor && (
                 <HeadlessButton className="link-secondary mt-8" onClick={handleLoadMore}>
                     {t('Load more')}
                 </HeadlessButton>
diff --git a/resources/js/V2/types/FeedItemsLoaderType.ts b/resources/js/V2/types/FeedItemsLoaderType.ts
index 9da8187d..68c5cd47 100644
--- a/resources/js/V2/types/FeedItemsLoaderType.ts
+++ b/resources/js/V2/types/FeedItemsLoaderType.ts
@@ -1,12 +1,13 @@
 import FeedItem from '@/types/generated/Models/FeedItem';
 import CursorPagination from '@/types/CursorPagination';
-import Feed from '@/types/generated/Models/Feed';
+import ShortFeedWithFeedItemsCount from '@/types/generated/Models/ShortFeedWithFeedItemsCount';
 
 type FeedItemsLoaderType = {
-    selectedFeed: Feed | null;
+    selectedFeed: ShortFeedWithFeedItemsCount | null;
     totalNumberOfFeedItems: number;
-    unreadFeeds: Feed[];
+    unreadFeeds: ShortFeedWithFeedItemsCount[];
     feedItems: CursorPagination<FeedItem>;
     currentCursor: number;
-}
+};
+
 export default FeedItemsLoaderType;

From 1eb2ce68463da7ca7cefd382077b06b3d495284c Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Thu, 14 Mar 2024 22:46:43 +0100
Subject: [PATCH 39/79] minor layout adjustments

---
 resources/js/Components/Button.tsx             |  4 ++--
 resources/js/Components/Dropdown.tsx           |  8 ++++----
 resources/js/Components/FeedFilterDropdown.tsx |  6 ++----
 resources/js/V2/Pages/Home.tsx                 | 14 +++++++-------
 4 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/resources/js/Components/Button.tsx b/resources/js/Components/Button.tsx
index 73757079..a18e4247 100644
--- a/resources/js/Components/Button.tsx
+++ b/resources/js/Components/Button.tsx
@@ -84,7 +84,7 @@ const Button = (
                 name={name}
                 value={value}
                 className={clsx(
-                    'inline-flex space-x-2 items-center text-left transition ease-in disabled:opacity-50 disabled:saturate-50 disabled:cursor-not-allowed',
+                    'inline-flex space-x-2 text-left transition ease-in disabled:opacity-50 disabled:saturate-50 disabled:cursor-not-allowed',
                     {
                         'font-semibold text-sm tracking-widest rounded-lg px-5 py-2.5 shadow dark:shadow-black/25 focus:ring-0 focus:ring-black dark:focus:ring-white focus:shadow-none active:shadow-none': variant !== ButtonVariant.Headless,
                         'shadow-md shadow-black/20 dark:shadow-black/25 text-violet-100 bg-violet-500 hover:bg-violet-700 disabled:hover:bg-violet-500': variant === ButtonVariant.Primary,
@@ -100,7 +100,7 @@ const Button = (
             >
                 {Icon && <Icon className="grow-0 shrink-0 w-5 h-5"/>}
 
-                <span className="grow inline-flex justify-between space-x-2">
+                <span className="grow inline-flex justify-between items-center space-x-2">
                     {children}
                 </span>
             </button>
diff --git a/resources/js/Components/Dropdown.tsx b/resources/js/Components/Dropdown.tsx
index ae9a6cf2..72ac4176 100644
--- a/resources/js/Components/Dropdown.tsx
+++ b/resources/js/Components/Dropdown.tsx
@@ -11,7 +11,7 @@ import {
 import {Transition} from '@headlessui/react';
 import noop from '@/Utils/noop';
 import clsx from 'clsx';
-import {Link, NavLink} from 'react-router-dom';
+import {NavLink} from 'react-router-dom';
 import {HeadlessButton} from '@/Components/Button';
 
 type DropDownContextType = {
@@ -96,7 +96,7 @@ const Content = ({align = 'right', width = 48, contentClasses = 'p-2 bg-white/80
     );
 };
 
-const DropdownLink = ({to, className = '', children}: { to: string; className?: string; children: ReactNode; }) => {
+const DropdownLink = ({to, active = undefined, className = '', children}: { to: string; active?: boolean | undefined; className?: string; children: ReactNode; }) => {
     const {setOpen} = useContext(DropDownContext);
 
     return (
@@ -107,8 +107,8 @@ const DropdownLink = ({to, className = '', children}: { to: string; className?:
             className={({isActive}) => clsx(
                 'block w-full text-left px-4 py-2 text-sm leading-5 rounded-lg focus:outline-none transition duration-150 ease-in-out',
                 {
-                    'text-violet-100 bg-violet-500 hover:bg-violet-600 focus:bg-violet-500 focus:text-violet-50': isActive,
-                    'text-gray-700 dark:text-gray-400 hover:bg-gray-400/25 dark:hover:bg-gray-700 focus:bg-gray-500/25 dark:focus:bg-gray-600 dark:focus:text-gray-300': !isActive,
+                    'text-violet-100 bg-violet-500 hover:bg-violet-600 focus:bg-violet-500 focus:text-violet-50': active !== undefined ? active : isActive,
+                    'text-gray-700 dark:text-gray-400 hover:bg-gray-400/25 dark:hover:bg-gray-700 focus:bg-gray-500/25 dark:focus:bg-gray-600 dark:focus:text-gray-300': active !== undefined ? !active : !isActive,
                 },
                 className
             )}
diff --git a/resources/js/Components/FeedFilterDropdown.tsx b/resources/js/Components/FeedFilterDropdown.tsx
index 3d0dc3e7..08757098 100644
--- a/resources/js/Components/FeedFilterDropdown.tsx
+++ b/resources/js/Components/FeedFilterDropdown.tsx
@@ -1,6 +1,6 @@
 import Dropdown from '@/Components/Dropdown';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
-import {TertiaryButton} from '@/Components/Button';
+import {HeadlessButton, TertiaryButton} from '@/Components/Button';
 import FunnelOutlineIcon from '@/Icons/FunnelOutlineIcon';
 import DropdownArrowIcon from '@/Icons/DropdownArrowIcon';
 import {OtherProps} from '@/types';
@@ -23,7 +23,6 @@ export default function FeedFilterDropdown({selectedFeed, feeds, ...props}: { se
             <Dropdown>
                 <Dropdown.Trigger className="inline">
                     <TertiaryButton
-                        className="justify-between"
                         icon={FunnelOutlineIcon}
                         hasMobileFullSize
                     >
@@ -41,7 +40,7 @@ export default function FeedFilterDropdown({selectedFeed, feeds, ...props}: { se
                 >
                     {selectedFeed && (
                         <>
-                            <Dropdown.Link to="/">
+                            <Dropdown.Link to="/" active={false}>
                                 {t('All feeds')}
                             </Dropdown.Link>
 
@@ -52,7 +51,6 @@ export default function FeedFilterDropdown({selectedFeed, feeds, ...props}: { se
                     {feeds.map((feed) => (
                         <Dropdown.Link
                             key={feed.id}
-
                             to={getFeedFilterUrl(feed.id)}
                             active={selectedFeed?.id === feed.id}
                         >
diff --git a/resources/js/V2/Pages/Home.tsx b/resources/js/V2/Pages/Home.tsx
index b13e0d97..6afd58e2 100644
--- a/resources/js/V2/Pages/Home.tsx
+++ b/resources/js/V2/Pages/Home.tsx
@@ -1,16 +1,16 @@
 import {useFetcher, useLoaderData, useNavigate, useSearchParams} from 'react-router-dom';
 import FeedItemsLoaderType from '@/V2/types/FeedItemsLoaderType';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
-import {HeadlessButton} from '@/Components/Button';
+import {HeadlessButton, TertiaryButton} from '@/Components/Button';
 import {useContext, useEffect, useState} from 'react';
 import {isEmpty, length} from 'ramda';
 import NewspaperSolidIcon from '@/Icons/NewspaperSolidIcon';
 import EmptyState from '@/Components/EmptyState';
-import Actions from '@/Components/Actions';
 import request from '@/V2/request';
 import FeedItemCard from '@/Components/FeedItemCard';
 import TotalNumberOfFeedItemsContext from '@/V2/Contexts/TotalNumberOfFeedItemsContext';
 import FeedFilterDropdown from '@/Components/FeedFilterDropdown';
+import EyeOutlineIcon from '@/Icons/EyeOutlineIcon';
 
 export default function Home() {
     const {t, tChoice} = useLaravelReactI18n();
@@ -92,23 +92,23 @@ export default function Home() {
                 {tChoice('dashboard.unread_articles', totalNumberOfFeedItems)}
             </div>
 
-            <Actions>
+            <div className="flex flex-col sm:flex-row sm:space-x-2 space-y-2 sm:space-y-0 pb-8">
                 {data.feedItems && <FeedFilterDropdown selectedFeed={data.selectedFeed} feeds={data.unreadFeeds}/>}
 
                 {totalNumberOfFeedItems > 0 && (
-                    <HeadlessButton
+                    <TertiaryButton
                         confirm
                         confirmTitle={t('Do you really want to mark all articles as read?')}
                         confirmCancelTitle={t('Cancel')}
                         confirmSubmitTitle={t('Mark all articles as read')}
                         onClick={markAllAsRead}
-                        className="link-secondary"
+                        icon={EyeOutlineIcon}
                         hasMobileFullSize
                     >
                         {t('Mark all as read')}
-                    </HeadlessButton>
+                    </TertiaryButton>
                 )}
-            </Actions>
+            </div>
 
             {length(data.feedItems.data) > 0
                 ? (

From 8baf109c8f5f25c4519e997b8df0e3b639248561 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 15 Mar 2024 09:33:06 +0100
Subject: [PATCH 40/79] prevent scrolling when mobile navigation menu is open

---
 resources/js/V2/Core/AuthenticatedLayout.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/V2/Core/AuthenticatedLayout.tsx b/resources/js/V2/Core/AuthenticatedLayout.tsx
index 8078be36..a3691759 100644
--- a/resources/js/V2/Core/AuthenticatedLayout.tsx
+++ b/resources/js/V2/Core/AuthenticatedLayout.tsx
@@ -34,9 +34,9 @@ const AuthenticatedLayout = () => {
     }, [location]);
 
     useEffect(() => {
-        // document.body.style.overflowY = isNavigationMenuOpen ? 'hidden' : '';
-        // document.body.style.position = isNavigationMenuOpen ? 'fixed' : '';
-        // document.body.style.width = isNavigationMenuOpen ? '100%' : '';
+        document.body.style.overflowY = isNavigationMenuOpen ? 'hidden' : '';
+        document.body.style.position = isNavigationMenuOpen ? 'fixed' : '';
+        document.body.style.width = isNavigationMenuOpen ? '100%' : '';
     }, [isNavigationMenuOpen]);
 
     const handleLogout = async () => {

From 26a8475f5d880f02e59f2a76367354f81c7194fd Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 15 Mar 2024 09:37:34 +0100
Subject: [PATCH 41/79] added link to Laravel Telescope

---
 resources/js/Components/Dropdown.tsx         | 16 +++++++++++++++-
 resources/js/V2/Core/AuthenticatedLayout.tsx |  8 ++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/resources/js/Components/Dropdown.tsx b/resources/js/Components/Dropdown.tsx
index 72ac4176..d3581bd5 100644
--- a/resources/js/Components/Dropdown.tsx
+++ b/resources/js/Components/Dropdown.tsx
@@ -96,9 +96,23 @@ const Content = ({align = 'right', width = 48, contentClasses = 'p-2 bg-white/80
     );
 };
 
-const DropdownLink = ({to, active = undefined, className = '', children}: { to: string; active?: boolean | undefined; className?: string; children: ReactNode; }) => {
+const DropdownLink = ({to, active = undefined, external = false, className = '', children}: { to: string; active?: boolean | undefined; external?: boolean; className?: string; children: ReactNode; }) => {
     const {setOpen} = useContext(DropDownContext);
 
+    if (external) {
+        return (
+            <a
+                href={to}
+                className={clsx(
+                    'block w-full text-left px-4 py-2 text-sm leading-5 rounded-lg focus:outline-none transition duration-150 ease-in-out text-gray-700 dark:text-gray-400 hover:bg-gray-400/25 dark:hover:bg-gray-700 focus:bg-gray-500/25 dark:focus:bg-gray-600 dark:focus:text-gray-300',
+                    className
+                )}
+            >
+                {children}
+            </a>
+        );
+    }
+
     return (
         <NavLink
             to={to}
diff --git a/resources/js/V2/Core/AuthenticatedLayout.tsx b/resources/js/V2/Core/AuthenticatedLayout.tsx
index a3691759..9f517822 100644
--- a/resources/js/V2/Core/AuthenticatedLayout.tsx
+++ b/resources/js/V2/Core/AuthenticatedLayout.tsx
@@ -78,6 +78,10 @@ const AuthenticatedLayout = () => {
                             {t('Feeds')}
                         </Dropdown.Link>
 
+                        <Dropdown.Link to="/telescope" external>
+                            {t('Telescope')}
+                        </Dropdown.Link>
+
                         <Dropdown.Spacer/>
 
                         <Dropdown.Button onClick={handleLogout}>
@@ -141,6 +145,10 @@ const AuthenticatedLayout = () => {
                             <Dropdown.Link to="/feeds">
                                 {t('Feeds')}
                             </Dropdown.Link>
+
+                            <Dropdown.Link to="/telescope" external>
+                                {t('Telescope')}
+                            </Dropdown.Link>
                         </div>
 
                         <div className="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">

From c2396fdacf66fa5bc60b12b78485f23bcb4df86c Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 15 Mar 2024 10:17:58 +0100
Subject: [PATCH 42/79] added user management page

---
 .../Controllers/Api/Admin/UserController.php  |  46 ++++++++
 config/type-script-model-generator.php        |  14 +++
 resources/js/Components/Button.tsx            |   2 +-
 resources/js/Components/Table.tsx             |   6 +-
 resources/js/V2/Core/AuthenticatedLayout.tsx  |   8 ++
 .../js/V2/Core/Router/Actions/usersAction.ts  |  15 +++
 .../js/V2/Core/Router/Loaders/usersLoader.ts  |   9 ++
 resources/js/V2/Core/Router/router.tsx        |  17 +++
 resources/js/V2/Pages/Admin/Admin.tsx         |  16 +++
 .../V2/Pages/Admin/Users/UsersIndexPage.tsx   | 102 ++++++++++++++++++
 resources/js/V2/types/UsersLoaderType.ts      |   6 ++
 .../UserWithFeedsAndUnreadFeedItemsCount.ts   |   9 ++
 routes/api.php                                |   5 +
 routes/web.php                                |   4 -
 14 files changed, 251 insertions(+), 8 deletions(-)
 create mode 100644 app/Http/Controllers/Api/Admin/UserController.php
 create mode 100644 resources/js/V2/Core/Router/Actions/usersAction.ts
 create mode 100644 resources/js/V2/Core/Router/Loaders/usersLoader.ts
 create mode 100644 resources/js/V2/Pages/Admin/Admin.tsx
 create mode 100644 resources/js/V2/Pages/Admin/Users/UsersIndexPage.tsx
 create mode 100644 resources/js/V2/types/UsersLoaderType.ts
 create mode 100644 resources/js/types/generated/Models/UserWithFeedsAndUnreadFeedItemsCount.ts

diff --git a/app/Http/Controllers/Api/Admin/UserController.php b/app/Http/Controllers/Api/Admin/UserController.php
new file mode 100644
index 00000000..dcae1528
--- /dev/null
+++ b/app/Http/Controllers/Api/Admin/UserController.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Controllers\Api\Admin;
+
+use App\Http\Controllers\Controller;
+use App\Models\User;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Http\JsonResponse;
+
+class UserController extends Controller
+{
+    public function __construct()
+    {
+        $this->authorizeResource(User::class);
+    }
+
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(): JsonResponse
+    {
+        return response()->json([
+            'users' => User::orderBy('name')
+                ->withCount([
+                    'feeds',
+                    'feedItems as unread_feed_items_count' => function (Builder $query) {
+                        $query->whereNull('read_at');
+                    },
+                ])
+                ->get(),
+        ]);
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(User $user): JsonResponse
+    {
+        $user->feedItems()->delete();
+        $user->feeds()->delete();
+        $user->categories()->delete();
+        $user->delete();
+
+        return response()->json();
+    }
+}
diff --git a/config/type-script-model-generator.php b/config/type-script-model-generator.php
index 71684782..35fe1473 100644
--- a/config/type-script-model-generator.php
+++ b/config/type-script-model-generator.php
@@ -40,6 +40,20 @@
                 ],
             ],
         ],
+        [
+            'name' => 'UserWithFeedsAndUnreadFeedItemsCount',
+            'model' => \App\Models\User::class,
+            'additional_fields' => [
+                [
+                    'name' => 'feeds_count',
+                    'types' => ['number'],
+                ],
+                [
+                    'name' => 'unread_feed_items_count',
+                    'types' => ['number'],
+                ],
+            ],
+        ],
     ],
 
     // partials by using already generated inherited types
diff --git a/resources/js/Components/Button.tsx b/resources/js/Components/Button.tsx
index a18e4247..b32bd7d3 100644
--- a/resources/js/Components/Button.tsx
+++ b/resources/js/Components/Button.tsx
@@ -90,7 +90,7 @@ const Button = (
                         'shadow-md shadow-black/20 dark:shadow-black/25 text-violet-100 bg-violet-500 hover:bg-violet-700 disabled:hover:bg-violet-500': variant === ButtonVariant.Primary,
                         'text-gray-600 dark:text-gray-400 dark:hover:text-gray-100 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 disabled:hover:text-gray-600 dark:disabled:text-gray-500 disabled:hover:bg-white dark:disabled:hover:bg-gray-800': variant === ButtonVariant.Secondary,
                         'text-gray-600 dark:text-gray-400 dark:hover:text-gray-100 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:hover:text-gray-600 dark:disabled:text-gray-500 disabled:hover:bg-white dark:disabled:hover:bg-gray-800': variant === ButtonVariant.Tertiary,
-                        'text-pink-950 dark:text-pink-300 dark:hover:text-pink-200 bg-pink-200 dark:bg-pink-900 hover:bg-pink-300 dark:hover:bg-pink-800 disabled:hover:text-pink-600 dark:disabled:text-pink-500 disabled:hover:bg-white dark:disabled:hover:bg-pink-950': variant === ButtonVariant.Danger,
+                        'text-pink-100 dark:text-pink-100 dark:hover:text-pink-200 bg-pink-500 dark:bg-pink-700 hover:bg-pink-600 dark:hover:bg-pink-800 disabled:hover:text-pink-600 dark:disabled:text-pink-500 disabled:hover:bg-white dark:disabled:hover:bg-pink-950': variant === ButtonVariant.Danger,
                         'w-full sm:w-auto': hasMobileFullSize,
                     },
                     className
diff --git a/resources/js/Components/Table.tsx b/resources/js/Components/Table.tsx
index ad204ffb..2e19701d 100644
--- a/resources/js/Components/Table.tsx
+++ b/resources/js/Components/Table.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 
 const Table = ({children}: {children: ReactNode;}) => {
     return (
-        <table className="min-w-full border-separate border-spacing-0">
+        <table className="min-w-full border border-gray-300 dark:border-gray-500 border-separate border-spacing-0 rounded-lg contain-paint">
             {children}
         </table>
     );
@@ -21,7 +21,7 @@ const HeadingCell = ({children, hideOnMobile = false, className = ''}: {children
     return (
         <th
             className={clsx(
-                'sticky top-0 z-10 border-b border-gray-300 dark:border-gray-500 bg-white dark:bg-gray-800 bg-opacity-75 py-3.5 pl-4 pr-3 text-left font-semibold text-gray-900 dark:text-gray-100 backdrop-blur backdrop-filter sm:pl-6 lg:pl-6',
+                'sticky top-0 z-10 border-b border-gray-300 dark:border-gray-500 bg-gray-100/50 dark:bg-gray-800/50 py-3.5 pl-4 pr-3 text-left font-semibold text-gray-900 dark:text-gray-100 backdrop-blur backdrop-filter sm:pl-6 lg:pl-6',
                 className,
                 {
                     'hidden lg:table-cell': hideOnMobile,
@@ -35,7 +35,7 @@ const HeadingCell = ({children, hideOnMobile = false, className = ''}: {children
 
 const Row = ({children}: { children: ReactNode; }) => {
     return (
-        <tr className="even:bg-gray-50 dark:even:bg-gray-900 odd:bg-white dark:odd:bg-gray-800">
+        <tr className="bg-white dark:bg-gray-800">
             {children}
         </tr>
     );
diff --git a/resources/js/V2/Core/AuthenticatedLayout.tsx b/resources/js/V2/Core/AuthenticatedLayout.tsx
index 9f517822..7c6a3fbf 100644
--- a/resources/js/V2/Core/AuthenticatedLayout.tsx
+++ b/resources/js/V2/Core/AuthenticatedLayout.tsx
@@ -78,6 +78,10 @@ const AuthenticatedLayout = () => {
                             {t('Feeds')}
                         </Dropdown.Link>
 
+                        <Dropdown.Link to="/admin/users">
+                            {t('Users')}
+                        </Dropdown.Link>
+
                         <Dropdown.Link to="/telescope" external>
                             {t('Telescope')}
                         </Dropdown.Link>
@@ -146,6 +150,10 @@ const AuthenticatedLayout = () => {
                                 {t('Feeds')}
                             </Dropdown.Link>
 
+                            <Dropdown.Link to="/admin/users">
+                                {t('Users')}
+                            </Dropdown.Link>
+
                             <Dropdown.Link to="/telescope" external>
                                 {t('Telescope')}
                             </Dropdown.Link>
diff --git a/resources/js/V2/Core/Router/Actions/usersAction.ts b/resources/js/V2/Core/Router/Actions/usersAction.ts
new file mode 100644
index 00000000..1811adc5
--- /dev/null
+++ b/resources/js/V2/Core/Router/Actions/usersAction.ts
@@ -0,0 +1,15 @@
+import request from '@/V2/request';
+import {ActionFunction} from '@remix-run/router/utils';
+import {redirect} from 'react-router-dom';
+
+const usersAction: ActionFunction = async ({request: req}) => {
+    const formData = await req.formData();
+
+    if (formData.get('intent') === 'delete') {
+        await request.delete(`/api/admin/users/${formData.get('userId')}`);
+    }
+
+    return redirect('/admin/users');
+};
+
+export default usersAction;
diff --git a/resources/js/V2/Core/Router/Loaders/usersLoader.ts b/resources/js/V2/Core/Router/Loaders/usersLoader.ts
new file mode 100644
index 00000000..c6c10a76
--- /dev/null
+++ b/resources/js/V2/Core/Router/Loaders/usersLoader.ts
@@ -0,0 +1,9 @@
+import request from '@/V2/request';
+import {LoaderFunction} from '@remix-run/router/utils';
+import FeedsLoaderType from '@/V2/types/FeedsLoaderType';
+
+const usersLoader: LoaderFunction = async () => {
+    return await request('/api/admin/users').json<FeedsLoaderType>();
+};
+
+export default usersLoader;
diff --git a/resources/js/V2/Core/Router/router.tsx b/resources/js/V2/Core/Router/router.tsx
index 723a3f31..7408005b 100644
--- a/resources/js/V2/Core/Router/router.tsx
+++ b/resources/js/V2/Core/Router/router.tsx
@@ -22,6 +22,10 @@ import editFeedAction from '@/V2/Core/Router/Actions/editFeedAction';
 import Home from '@/V2/Pages/Home';
 import feedItemsLoader from '@/V2/Core/Router/Loaders/feedItemsLoader';
 import TotalNumberOfFeedItemsProvider from '@/V2/Core/TotalNumberOfFeedItemsProvider';
+import Admin from '@/V2/Pages/Admin/Admin';
+import usersLoader from '@/V2/Core/Router/Loaders/usersLoader';
+import UsersIndexPage from '@/V2/Pages/Admin/Users/UsersIndexPage';
+import usersAction from '@/V2/Core/Router/Actions/usersAction';
 
 const router = createBrowserRouter([
     {
@@ -83,6 +87,19 @@ const router = createBrowserRouter([
                     },
                 ],
             },
+            {
+                path: 'admin',
+                element: <Admin/>,
+                children: [
+                    {
+                        path: 'users',
+                        element: <UsersIndexPage/>,
+                        loader: usersLoader,
+                        action: usersAction,
+                        handle: {titleKey: 'Users'} as RouteHandle,
+                    },
+                ],
+            },
         ],
     },
 ]);
diff --git a/resources/js/V2/Pages/Admin/Admin.tsx b/resources/js/V2/Pages/Admin/Admin.tsx
new file mode 100644
index 00000000..55d9a14f
--- /dev/null
+++ b/resources/js/V2/Pages/Admin/Admin.tsx
@@ -0,0 +1,16 @@
+import {Outlet, useNavigate} from 'react-router-dom';
+import useAuth from '@/V2/Hooks/useAuth';
+import {useEffect} from 'react';
+
+export default function Admin() {
+    const {user} = useAuth();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!user?.is_admin) {
+            navigate('/');
+        }
+    }, []);
+
+    return <Outlet/>;
+}
diff --git a/resources/js/V2/Pages/Admin/Users/UsersIndexPage.tsx b/resources/js/V2/Pages/Admin/Users/UsersIndexPage.tsx
new file mode 100644
index 00000000..e9514191
--- /dev/null
+++ b/resources/js/V2/Pages/Admin/Users/UsersIndexPage.tsx
@@ -0,0 +1,102 @@
+import {useFetcher, useLoaderData} from 'react-router-dom';
+import UsersLoaderType from '@/V2/types/UsersLoaderType';
+import Table from '@/Components/Table';
+import {useLaravelReactI18n} from 'laravel-react-i18n';
+import formatDateTime from '@/Utils/formatDateTime';
+import {DangerButton} from '@/Components/Button';
+import useAuth from '@/V2/Hooks/useAuth';
+import UserWithFeedsAndUnreadFeedItemsCount from '@/types/generated/Models/UserWithFeedsAndUnreadFeedItemsCount';
+
+export default function UsersIndexPage() {
+    const {t} = useLaravelReactI18n();
+    const fetcher = useFetcher({key: 'delete'});
+    const {user: authUser} = useAuth();
+    const {users} = useLoaderData() as UsersLoaderType;
+
+    const handleDelete = (user: UserWithFeedsAndUnreadFeedItemsCount) => () => {
+        fetcher.submit({intent: 'delete', userId: user.id}, {method: 'delete', action: '/admin/users', fetcherKey: 'delete'});
+    };
+
+    return (
+        <Table>
+            <thead>
+                <Table.HeadingRow>
+                    <Table.HeadingCell>
+                        <span className="hidden lg:inline">{t('validation.attributes.name')}</span>
+                        <span className="lg:hidden">{t('Users')}</span>
+                    </Table.HeadingCell>
+                    <Table.HeadingCell hideOnMobile>{t('validation.attributes.email_verified_at')}</Table.HeadingCell>
+                    <Table.HeadingCell hideOnMobile>{t('validation.attributes.is_admin')}</Table.HeadingCell>
+                    <Table.HeadingCell hideOnMobile>{t('Number of feeds')}</Table.HeadingCell>
+                    <Table.HeadingCell hideOnMobile>{t('Number of unread feed items')}</Table.HeadingCell>
+                    <Table.HeadingCell hideOnMobile><span className="sr-only">{t('Actions')}</span></Table.HeadingCell>
+                </Table.HeadingRow>
+            </thead>
+
+            <tbody>
+                {users.map((user) => (
+                    <Table.Row key={user.id}>
+                        <Table.Cell highlighted>
+                            <div className="flex space-x-1">
+                                <div className="text-muted">
+                                    <span className="select-none">#</span>
+                                    <span>{user.id}</span>
+                                </div>
+
+                                <div>{user.name}</div>
+                            </div>
+
+                            <Table.MobileContainer>
+                                <Table.MobileText label={t('validation.attributes.email_verified_at')}>
+                                    {user.email_verified_at ? formatDateTime(user.email_verified_at) : '/'}
+                                </Table.MobileText>
+
+                                <Table.MobileText label={t('validation.attributes.is_admin')}>
+                                    {user.is_admin ? t('Yes') : t('No')}
+                                </Table.MobileText>
+
+                                <Table.MobileText label={t('Number of feeds')}>
+                                    {user.feeds_count}
+                                </Table.MobileText>
+
+                                <Table.MobileText label={t('Number of unread feed items')}>
+                                    {user.unread_feed_items_count}
+                                </Table.MobileText>
+                            </Table.MobileContainer>
+
+                            <div className="lg:hidden pt-4">
+                                {user.id !== authUser?.id && (
+                                    <DangerButton
+                                        confirmTitle={t('Do you really want to delete the user “:name”?', {name: user.name})}
+                                        confirmSubmitTitle={t('Delete user')}
+                                        confirmCancelTitle={t('Cancel')}
+                                        onClick={handleDelete(user)}
+                                    >
+                                        {t('Delete')}
+                                    </DangerButton>
+                                )}
+                            </div>
+                        </Table.Cell>
+                        <Table.Cell
+                            hideOnMobile>{user.email_verified_at ? formatDateTime(user.email_verified_at) : '/'}</Table.Cell>
+                        <Table.Cell hideOnMobile>{user.is_admin ? t('Yes') : t('No')}</Table.Cell>
+                        <Table.Cell hideOnMobile>{user.feeds_count}</Table.Cell>
+                        <Table.Cell hideOnMobile>{user.unread_feed_items_count}</Table.Cell>
+                        <Table.Cell hideOnMobile>
+                            {user.id !== authUser?.id && (
+                                <DangerButton
+                                    confirmTitle={t('Do you really want to delete the user “:name”?', {name: user.name})}
+                                    confirmSubmitTitle={t('Delete user')}
+                                    confirmCancelTitle={t('Cancel')}
+                                    onClick={handleDelete(user)}
+                                >
+                                    {t('Delete')}
+                                </DangerButton>
+                            )}
+                        </Table.Cell>
+                    </Table.Row>
+                ))}
+            </tbody>
+        </Table>
+    );
+}
diff --git a/resources/js/V2/types/UsersLoaderType.ts b/resources/js/V2/types/UsersLoaderType.ts
new file mode 100644
index 00000000..fa388b79
--- /dev/null
+++ b/resources/js/V2/types/UsersLoaderType.ts
@@ -0,0 +1,6 @@
+import UserWithFeedsAndUnreadFeedItemsCount from '@/types/generated/Models/UserWithFeedsAndUnreadFeedItemsCount';
+
+type UsersLoaderType = {
+    users: UserWithFeedsAndUnreadFeedItemsCount[];
+}
+export default UsersLoaderType;
diff --git a/resources/js/types/generated/Models/UserWithFeedsAndUnreadFeedItemsCount.ts b/resources/js/types/generated/Models/UserWithFeedsAndUnreadFeedItemsCount.ts
new file mode 100644
index 00000000..2d1822d9
--- /dev/null
+++ b/resources/js/types/generated/Models/UserWithFeedsAndUnreadFeedItemsCount.ts
@@ -0,0 +1,9 @@
+/* this file has been automatically generated */
+import User from '@/types/generated/Models/User';
+
+type UserWithFeedsAndUnreadFeedItemsCount = User & {
+    feeds_count: number;
+unread_feed_items_count: number;
+};
+
+export default UserWithFeedsAndUnreadFeedItemsCount;
diff --git a/routes/api.php b/routes/api.php
index a7256351..b39f7f76 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\Api\Admin\UserController;
 use App\Http\Controllers\Api\CategoryController;
 use App\Http\Controllers\Api\DashboardController;
 use App\Http\Controllers\Api\FeedController;
@@ -33,4 +34,8 @@
     Route::post('discover-feed-urls', FeedUrlDiscovererController::class)->name('discover-feed-urls');
 
     Route::get('feed-items', DashboardController::class);
+
+    Route::middleware('administrate')->prefix('admin')->as('admin.')->group(function () {
+        Route::resource('users', UserController::class)->only(['index', 'destroy']);
+    });
 });
diff --git a/routes/web.php b/routes/web.php
index 96f666f3..1fe33a4f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -54,10 +54,6 @@
         Route::put('/feeds/mark-all-as-read', MarkAllUnreadFeedItemsAsReadController::class)->name('mark-all-as-read');
         Route::resource('feeds', FeedController::class)->except('show');
         Route::put('/feeds/{feedItem}/toggle', ToggleFeedItemController::class)->name('toggle-feed-item');
-
-        Route::middleware('administrate')->prefix('admin')->as('admin.')->group(function () {
-            Route::resource('users', AdminUserController::class)->only(['index', 'destroy']);
-        });
     });
 });
 

From 8a1517a42ba740c881a20e9bfef3861495bde276 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 15 Mar 2024 10:32:11 +0100
Subject: [PATCH 43/79] fixed usersLoader exception handling

---
 app/Http/Middleware/Administrate.php          |  4 ++
 resources/js/V2/Core/AuthenticatedLayout.tsx  | 38 +++++++++++++------
 .../js/V2/Core/Router/Loaders/usersLoader.ts  | 18 ++++++++-
 resources/js/V2/Pages/Admin/Admin.tsx         |  2 +-
 4 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/app/Http/Middleware/Administrate.php b/app/Http/Middleware/Administrate.php
index 8ebda98a..72493fd3 100644
--- a/app/Http/Middleware/Administrate.php
+++ b/app/Http/Middleware/Administrate.php
@@ -19,6 +19,10 @@ public function handle(Request $request, Closure $next): Response
             return $next($request);
         }
 
+        if ($request->acceptsJson()) {
+            abort(Response::HTTP_FORBIDDEN);
+        }
+
         return redirect('/');
     }
 }
diff --git a/resources/js/V2/Core/AuthenticatedLayout.tsx b/resources/js/V2/Core/AuthenticatedLayout.tsx
index 7c6a3fbf..fc9d4e1f 100644
--- a/resources/js/V2/Core/AuthenticatedLayout.tsx
+++ b/resources/js/V2/Core/AuthenticatedLayout.tsx
@@ -78,13 +78,19 @@ const AuthenticatedLayout = () => {
                             {t('Feeds')}
                         </Dropdown.Link>
 
-                        <Dropdown.Link to="/admin/users">
-                            {t('Users')}
-                        </Dropdown.Link>
+                        {user.is_admin && (
+                            <>
+                                <Dropdown.Spacer/>
 
-                        <Dropdown.Link to="/telescope" external>
-                            {t('Telescope')}
-                        </Dropdown.Link>
+                                <Dropdown.Link to="/admin/users">
+                                    {t('Users')}
+                                </Dropdown.Link>
+
+                                <Dropdown.Link to="/telescope" external>
+                                    {t('Telescope')}
+                                </Dropdown.Link>
+                            </>
+                        )}
 
                         <Dropdown.Spacer/>
 
@@ -142,6 +148,8 @@ const AuthenticatedLayout = () => {
                                 {t('Home')}
                             </Dropdown.Link>
 
+                            <Dropdown.Spacer/>
+
                             <Dropdown.Link to="/categories">
                                 {t('Categories')}
                             </Dropdown.Link>
@@ -150,13 +158,19 @@ const AuthenticatedLayout = () => {
                                 {t('Feeds')}
                             </Dropdown.Link>
 
-                            <Dropdown.Link to="/admin/users">
-                                {t('Users')}
-                            </Dropdown.Link>
+                            {user.is_admin && (
+                                <>
+                                    <Dropdown.Spacer/>
 
-                            <Dropdown.Link to="/telescope" external>
-                                {t('Telescope')}
-                            </Dropdown.Link>
+                                    <Dropdown.Link to="/admin/users">
+                                        {t('Users')}
+                                    </Dropdown.Link>
+
+                                    <Dropdown.Link to="/telescope" external>
+                                        {t('Telescope')}
+                                    </Dropdown.Link>
+                                </>
+                            )}
                         </div>
 
                         <div className="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
diff --git a/resources/js/V2/Core/Router/Loaders/usersLoader.ts b/resources/js/V2/Core/Router/Loaders/usersLoader.ts
index c6c10a76..fa2f6ac5 100644
--- a/resources/js/V2/Core/Router/Loaders/usersLoader.ts
+++ b/resources/js/V2/Core/Router/Loaders/usersLoader.ts
@@ -1,9 +1,23 @@
 import request from '@/V2/request';
 import {LoaderFunction} from '@remix-run/router/utils';
-import FeedsLoaderType from '@/V2/types/FeedsLoaderType';
+import UsersLoaderType from '@/V2/types/UsersLoaderType';
+import {redirect} from 'react-router-dom';
+import {HTTPError} from 'ky';
 
 const usersLoader: LoaderFunction = async () => {
-    return await request('/api/admin/users').json<FeedsLoaderType>();
+    try {
+        return await request('/api/admin/users').json<UsersLoaderType>();
+    } catch (error) {
+        const errorResponse = (error as HTTPError).response;
+
+        if (errorResponse.status === 401) {
+            window.location.href = '/login';
+
+            return null;
+        }
+
+        return redirect('/');
+    }
 };
 
 export default usersLoader;
diff --git a/resources/js/V2/Pages/Admin/Admin.tsx b/resources/js/V2/Pages/Admin/Admin.tsx
index 55d9a14f..3a55175b 100644
--- a/resources/js/V2/Pages/Admin/Admin.tsx
+++ b/resources/js/V2/Pages/Admin/Admin.tsx
@@ -10,7 +10,7 @@ export default function Admin() {
         if (!user?.is_admin) {
             navigate('/');
         }
-    }, []);
+    }, [user]);
 
     return <Outlet/>;
 }

From 0a6f2f706dd0ab5f99cababcc2bead847aa5952d Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 15 Mar 2024 12:01:52 +0100
Subject: [PATCH 44/79] added the ability to update profile information

---
 .../Controllers/Api/ProfileController.php     | 62 ++++++++++++++
 resources/js/Components/Button.tsx            |  4 +
 .../Partials/UpdateProfileInformationForm.tsx | 82 +++++++------------
 resources/js/V2/Core/AuthenticatedLayout.tsx  |  8 ++
 .../V2/Core/Router/Actions/profileAction.ts   | 24 ++++++
 .../V2/Core/Router/Loaders/profileLoader.ts   |  9 ++
 resources/js/V2/Core/Router/router.tsx        | 10 +++
 resources/js/V2/Pages/ProfilePage.tsx         | 17 ++++
 resources/js/V2/types/ProfileLoaderType.ts    |  8 ++
 .../V2/types/UpdateProfileValidationErrors.ts |  8 ++
 routes/api.php                                |  6 ++
 routes/web.php                                |  4 -
 12 files changed, 186 insertions(+), 56 deletions(-)
 create mode 100644 app/Http/Controllers/Api/ProfileController.php
 create mode 100644 resources/js/V2/Core/Router/Actions/profileAction.ts
 create mode 100644 resources/js/V2/Core/Router/Loaders/profileLoader.ts
 create mode 100644 resources/js/V2/Pages/ProfilePage.tsx
 create mode 100644 resources/js/V2/types/ProfileLoaderType.ts
 create mode 100644 resources/js/V2/types/UpdateProfileValidationErrors.ts

diff --git a/app/Http/Controllers/Api/ProfileController.php b/app/Http/Controllers/Api/ProfileController.php
new file mode 100644
index 00000000..4a877906
--- /dev/null
+++ b/app/Http/Controllers/Api/ProfileController.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\ProfileUpdateRequest;
+use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class ProfileController extends Controller
+{
+    /**
+     * Display the user's profile form.
+     */
+    public function edit(Request $request): JsonResponse
+    {
+        return response()->json([
+            'mustVerifyEmail' => $request->user() instanceof MustVerifyEmail,
+            'status' => session('status'),
+            'user' => $request->user(),
+        ]);
+    }
+
+    /**
+     * Update the user's profile information.
+     */
+    public function update(ProfileUpdateRequest $request): JsonResponse
+    {
+        $request->user()->fill($request->validated());
+
+        if ($request->user()->isDirty('email')) {
+            $request->user()->email_verified_at = null;
+        }
+
+        $request->user()->save();
+
+        return response()->json();
+    }
+
+    /**
+     * Delete the user's account.
+     */
+    public function destroy(Request $request): JsonResponse
+    {
+        $request->validate([
+            'password' => ['required', 'current-password'],
+        ]);
+
+        $user = $request->user();
+
+        Auth::logout();
+
+        $user->delete();
+
+        $request->session()->invalidate();
+        $request->session()->regenerateToken();
+
+        return response()->json();
+    }
+}
diff --git a/resources/js/Components/Button.tsx b/resources/js/Components/Button.tsx
index b32bd7d3..625ca409 100644
--- a/resources/js/Components/Button.tsx
+++ b/resources/js/Components/Button.tsx
@@ -116,6 +116,8 @@ const PrimaryButton = (
         className,
         disabled,
         onClick,
+        name,
+        value,
         children,
         confirm = false,
         confirmTitle,
@@ -130,6 +132,8 @@ const PrimaryButton = (
             hasMobileFullSize={hasMobileFullSize}
             disabled={disabled}
             onClick={onClick}
+            name={name}
+            value={value}
             className={clsx('', className)}
             confirm={confirm}
             confirmTitle={confirmTitle}
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.tsx b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.tsx
index b5c8363c..fb385500 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.tsx
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.tsx
@@ -1,28 +1,20 @@
-import {Link, useForm, usePage} from '@inertiajs/react';
-import {Transition} from '@headlessui/react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
 import TextInput from '@/Components/TextInput';
-import {PrimaryButton} from '@/Components/Button';
+import {HeadlessButton, PrimaryButton} from '@/Components/Button';
 import React from 'react';
 import Card from '@/Components/Card';
 import User from '@/types/generated/Models/User';
+import {Form, useActionData} from 'react-router-dom';
+import UpdateProfileValidationErrors from '@/V2/types/UpdateProfileValidationErrors';
 
-export default function UpdateProfileInformation({mustVerifyEmail, status}: { mustVerifyEmail: boolean; status: string; }) {
+export default function UpdateProfileInformation({mustVerifyEmail, status, user}: { mustVerifyEmail: boolean; status: string; user: User; }) {
     const {t} = useLaravelReactI18n();
-    // @ts-expect-error we know that the page props include the authenticated user
-    const user = usePage().props.auth.user as User;
+    const errors = useActionData() as UpdateProfileValidationErrors;
 
-    const {data, setData, patch, errors, processing, recentlySuccessful} = useForm({
-        name: user.name,
-        email: user.email,
-    });
+    const handleSendVerification = () => {
 
-    const submit = (event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault();
-
-        patch(route('profile.update'));
     };
 
     return (
@@ -34,74 +26,60 @@ export default function UpdateProfileInformation({mustVerifyEmail, status}: { mu
                 />
 
                 <Card.Body>
-                    <form onSubmit={submit} className="space-y-6">
+                    <Form method="patch" action="/profile" className="space-y-4">
                         <div>
-                            <InputLabel htmlFor="name" value="Name"/>
-
+                            <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
                             <TextInput
                                 id="name"
-                                className="mt-1 block w-full"
-                                value={data.name}
-                                onChange={(e) => setData('name', e.target.value)}
+                                name="name"
+                                defaultValue={user.name}
+                                className="block w-full"
+                                autoComplete="name"
                                 required
                                 isFocused
-                                autoComplete="name"
                             />
-
-                            <InputError className="mt-2" message={errors.name}/>
+                            <InputError message={errors?.name}/>
                         </div>
 
                         <div>
-                            <InputLabel htmlFor="email" value="Email"/>
-
+                            <InputLabel htmlFor="email" value={t('validation.attributes.email')} required/>
                             <TextInput
                                 id="email"
+                                name="email"
                                 type="email"
-                                className="mt-1 block w-full"
-                                value={data.email}
-                                onChange={(e) => setData('email', e.target.value)}
+                                defaultValue={user.email}
+                                className="block w-full"
+                                autoComplete="email"
                                 required
-                                autoComplete="username"
+                                isFocused
                             />
-
-                            <InputError className="mt-2" message={errors.email}/>
+                            <InputError message={errors?.email}/>
                         </div>
 
                         {mustVerifyEmail && user.email_verified_at === null && (
                             <div>
                                 <p className="text-sm mt-2 text-gray-800 dark:text-gray-200">
-                                    Your email address is unverified.
-                                    <Link
-                                        href={route('verification.send')}
-                                        method="post"
-                                        as="button"
+                                    {t('Your email address is unverified.')}
+                                    <HeadlessButton
                                         className="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-violet-500 dark:focus:ring-offset-gray-800"
+                                        onClick={handleSendVerification}
                                     >
-                                        Click here to re-send the verification email.
-                                    </Link>
+                                        {t('Click here to re-send the verification email.')}
+                                    </HeadlessButton>
                                 </p>
 
                                 {status === 'verification-link-sent' && (
                                     <div className="mt-2 font-medium text-sm text-green-600 dark:text-green-400">
-                                        A new verification link has been sent to your email address.
+                                        {t('A new verification link has been sent to your email address.')}
                                     </div>
                                 )}
                             </div>
                         )}
 
-                        <div className="flex items-center gap-4">
-                            <PrimaryButton type="submit" disabled={processing}>{t('Save')}</PrimaryButton>
-
-                            <Transition
-                                show={recentlySuccessful}
-                                enterFrom="opacity-0"
-                                leaveTo="opacity-0"
-                                className="transition ease-in-out"
-                            >
-                                <p className="text-sm text-gray-600 dark:text-gray-400">{t('Saved.')}</p>
-                            </Transition>
-                        </div>
-                    </form>
+                        <PrimaryButton type="submit" name="intent" value="update-profile">
+                            {t('Save')}
+                        </PrimaryButton>
+                    </Form>
                 </Card.Body>
             </div>
         </Card>
diff --git a/resources/js/V2/Core/AuthenticatedLayout.tsx b/resources/js/V2/Core/AuthenticatedLayout.tsx
index fc9d4e1f..f566f24d 100644
--- a/resources/js/V2/Core/AuthenticatedLayout.tsx
+++ b/resources/js/V2/Core/AuthenticatedLayout.tsx
@@ -70,6 +70,10 @@ const AuthenticatedLayout = () => {
                     </Dropdown.Trigger>
 
                     <Dropdown.Content>
+                        <Dropdown.Link to="/profile">
+                            {t('Profile')}
+                        </Dropdown.Link>
+
                         <Dropdown.Link to="/categories">
                             {t('Categories')}
                         </Dropdown.Link>
@@ -150,6 +154,10 @@ const AuthenticatedLayout = () => {
 
                             <Dropdown.Spacer/>
 
+                            <Dropdown.Link to="/profile">
+                                {t('Profile')}
+                            </Dropdown.Link>
+
                             <Dropdown.Link to="/categories">
                                 {t('Categories')}
                             </Dropdown.Link>
diff --git a/resources/js/V2/Core/Router/Actions/profileAction.ts b/resources/js/V2/Core/Router/Actions/profileAction.ts
new file mode 100644
index 00000000..6041632a
--- /dev/null
+++ b/resources/js/V2/Core/Router/Actions/profileAction.ts
@@ -0,0 +1,24 @@
+import request from '@/V2/request';
+import {ActionFunction} from '@remix-run/router/utils';
+import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
+import {redirect} from 'react-router-dom';
+
+const profileAction: ActionFunction = async ({request: req}) => {
+    const formData = await req.formData();
+
+    console.log(Object.fromEntries(formData));
+
+    // if (formData.get('intent') === 'delete') {
+    //     await request.delete(`/api/feeds/${params.feedId}`);
+    //
+    //     return null;
+    // }
+
+    if (formData.get('intent') === 'update-profile') {
+        return await handleRequestValidationError(() => request.patch('/api/profile', {json: Object.fromEntries(formData)}));
+    }
+
+    return redirect('/');
+};
+
+export default profileAction;
diff --git a/resources/js/V2/Core/Router/Loaders/profileLoader.ts b/resources/js/V2/Core/Router/Loaders/profileLoader.ts
new file mode 100644
index 00000000..a8ce02b6
--- /dev/null
+++ b/resources/js/V2/Core/Router/Loaders/profileLoader.ts
@@ -0,0 +1,9 @@
+import request from '@/V2/request';
+import {LoaderFunction} from '@remix-run/router/utils';
+import ProfileLoaderType from '@/V2/types/ProfileLoaderType';
+
+const profileLoader: LoaderFunction = async () => {
+    return await request('/api/profile').json<ProfileLoaderType>();
+};
+
+export default profileLoader;
diff --git a/resources/js/V2/Core/Router/router.tsx b/resources/js/V2/Core/Router/router.tsx
index 7408005b..30cbf13b 100644
--- a/resources/js/V2/Core/Router/router.tsx
+++ b/resources/js/V2/Core/Router/router.tsx
@@ -26,6 +26,9 @@ import Admin from '@/V2/Pages/Admin/Admin';
 import usersLoader from '@/V2/Core/Router/Loaders/usersLoader';
 import UsersIndexPage from '@/V2/Pages/Admin/Users/UsersIndexPage';
 import usersAction from '@/V2/Core/Router/Actions/usersAction';
+import ProfilePage from '@/V2/Pages/ProfilePage';
+import profileLoader from '@/V2/Core/Router/Loaders/profileLoader';
+import profileAction from '@/V2/Core/Router/Actions/profileAction';
 
 const router = createBrowserRouter([
     {
@@ -87,6 +90,13 @@ const router = createBrowserRouter([
                     },
                 ],
             },
+            {
+                path: 'profile',
+                element: <ProfilePage/>,
+                loader: profileLoader,
+                action: profileAction,
+                handle: {titleKey: 'Profile'},
+            },
             {
                 path: 'admin',
                 element: <Admin/>,
diff --git a/resources/js/V2/Pages/ProfilePage.tsx b/resources/js/V2/Pages/ProfilePage.tsx
new file mode 100644
index 00000000..fb841e18
--- /dev/null
+++ b/resources/js/V2/Pages/ProfilePage.tsx
@@ -0,0 +1,17 @@
+import {useLoaderData} from 'react-router-dom';
+import UpdateProfileInformation from '@/Pages/Profile/Partials/UpdateProfileInformationForm';
+import ProfileLoaderType from '@/V2/types/ProfileLoaderType';
+
+export default function ProfilePage() {
+    const {mustVerifyEmail, status, user} = useLoaderData() as ProfileLoaderType;
+
+    return (
+        <div>
+            <UpdateProfileInformation
+                mustVerifyEmail={mustVerifyEmail}
+                status={status}
+                user={user}
+            />
+        </div>
+    );
+}
diff --git a/resources/js/V2/types/ProfileLoaderType.ts b/resources/js/V2/types/ProfileLoaderType.ts
new file mode 100644
index 00000000..25f422b3
--- /dev/null
+++ b/resources/js/V2/types/ProfileLoaderType.ts
@@ -0,0 +1,8 @@
+import User from '@/types/generated/Models/User';
+
+type ProfileLoaderType = {
+    mustVerifyEmail: boolean;
+    status: string;
+    user: User;
+}
+export default ProfileLoaderType;
diff --git a/resources/js/V2/types/UpdateProfileValidationErrors.ts b/resources/js/V2/types/UpdateProfileValidationErrors.ts
new file mode 100644
index 00000000..37ea24de
--- /dev/null
+++ b/resources/js/V2/types/UpdateProfileValidationErrors.ts
@@ -0,0 +1,8 @@
+import ValidationErrors from '@/V2/types/ValidationErrors';
+
+type UpdateProfileValidationErrors = ValidationErrors & {
+    name?: string;
+    email?: string;
+} | null;
+
+export default UpdateProfileValidationErrors;
diff --git a/routes/api.php b/routes/api.php
index b39f7f76..76c62198 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -6,6 +6,7 @@
 use App\Http\Controllers\Api\FeedController;
 use App\Http\Controllers\Api\FeedDiscovererController;
 use App\Http\Controllers\Api\FeedUrlDiscovererController;
+use App\Http\Controllers\Api\ProfileController;
 use App\Http\Controllers\Auth\AuthenticatedSessionController;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
@@ -23,6 +24,11 @@
 
 Route::middleware('auth:sanctum')->group(function () {
     Route::get('/user', fn (Request $request) => $request->user());
+
+    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
+    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
+    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
+
     Route::delete('/logout', [AuthenticatedSessionController::class, 'destroy'])->name('logout');
 
     Route::resource('categories', CategoryController::class);
diff --git a/routes/web.php b/routes/web.php
index 1fe33a4f..b1576a39 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -42,10 +42,6 @@
     Route::get('/dashboard', DashboardController::class)->name('dashboard');
 
     Route::middleware('verified')->group(function () {
-        Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
-        Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
-        Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
-
         Route::resource('categories', CategoryController::class)->except('show');
 
         Route::post('discover-feed', FeedDiscovererController::class)->name('discover-feed');

From 1fd6f90b1786d8440ff8a14217c18b16836b8eba Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 15 Mar 2024 13:20:15 +0100
Subject: [PATCH 45/79] added the ability to change your password

---
 .../Api/Auth/PasswordController.php           | 29 ++++++
 .../Profile/Partials/UpdatePasswordForm.tsx   | 93 ++++++++-----------
 .../V2/Core/Router/Actions/profileAction.ts   |  8 +-
 .../Helpers/handleRequestValidationError.ts   |  7 +-
 resources/js/V2/Pages/ProfilePage.tsx         |  8 +-
 .../types/UpdatePasswordValidationErrors.ts   |  9 ++
 routes/api.php                                |  3 +
 7 files changed, 96 insertions(+), 61 deletions(-)
 create mode 100644 app/Http/Controllers/Api/Auth/PasswordController.php
 create mode 100644 resources/js/V2/types/UpdatePasswordValidationErrors.ts

diff --git a/app/Http/Controllers/Api/Auth/PasswordController.php b/app/Http/Controllers/Api/Auth/PasswordController.php
new file mode 100644
index 00000000..9d769c2c
--- /dev/null
+++ b/app/Http/Controllers/Api/Auth/PasswordController.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Controllers\Api\Auth;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Validation\Rules\Password;
+
+class PasswordController extends Controller
+{
+    /**
+     * Update the user's password.
+     */
+    public function update(Request $request): JsonResponse
+    {
+        $validated = $request->validate([
+            'current_password' => ['required', 'current_password'],
+            'password' => ['required', Password::defaults(), 'confirmed'],
+        ]);
+
+        $request->user()->update([
+            'password' => Hash::make($validated['password']),
+        ]);
+
+        return response()->json();
+    }
+}
diff --git a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.tsx b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.tsx
index dbdaf3f6..e9260548 100644
--- a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.tsx
+++ b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.tsx
@@ -1,43 +1,35 @@
-import React, {useRef} from 'react';
-import {useForm} from '@inertiajs/react';
-import {Transition} from '@headlessui/react';
+import React, {useEffect, useRef} from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
 import TextInput from '@/Components/TextInput';
 import {PrimaryButton} from '@/Components/Button';
 import Card from '@/Components/Card';
+import {Form, useActionData} from 'react-router-dom';
+import UpdatePasswordValidationErrors from '@/V2/types/UpdatePasswordValidationErrors';
 
 export default function UpdatePasswordForm() {
     const {t} = useLaravelReactI18n();
-    const passwordInput = useRef<HTMLInputElement>();
-    const currentPasswordInput = useRef<HTMLInputElement>();
-
-    const {data, setData, errors, put, reset, processing, recentlySuccessful} = useForm({
-        current_password: '',
-        password: '',
-        password_confirmation: '',
-    });
-
-    const updatePassword = (event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault();
-
-        put(route('password.update'), {
-            preserveScroll: true,
-            onSuccess: () => reset(),
-            onError: () => {
-                if (errors.password) {
-                    reset('password', 'password_confirmation');
-                    passwordInput.current?.focus();
-                }
-
-                if (errors.current_password) {
-                    reset('current_password');
-                    currentPasswordInput.current?.focus();
-                }
-            },
-        });
-    };
+    const errors = useActionData() as UpdatePasswordValidationErrors;
+    const currentPasswordInput = useRef<HTMLInputElement>(null);
+    const passwordInput = useRef<HTMLInputElement>(null);
+    const passwordConfirmationInput = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (errors && currentPasswordInput.current && passwordInput.current && passwordConfirmationInput.current) {
+            currentPasswordInput.current.value = '';
+            passwordInput.current.value = '';
+            passwordConfirmationInput.current.value = '';
+        }
+
+        if (errors?.password) {
+            passwordInput.current?.focus();
+        }
+
+        if (errors?.current_password) {
+            currentPasswordInput.current?.focus();
+        }
+    }, [errors]);
 
     return (
         <Card>
@@ -48,21 +40,20 @@ export default function UpdatePasswordForm() {
                 />
 
                 <Card.Body>
-                    <form onSubmit={updatePassword} className="space-y-6">
+                    <Form method="put" action="/profile" className="space-y-4">
                         <div>
                             <InputLabel htmlFor="current_password" value={t('Current Password')}/>
 
                             <TextInput
                                 id="current_password"
+                                name="current_password"
                                 ref={currentPasswordInput}
-                                value={data.current_password}
-                                onChange={(e) => setData('current_password', e.target.value)}
                                 type="password"
-                                className="mt-1 block w-full"
+                                className="block w-full"
                                 autoComplete="current-password"
                             />
 
-                            <InputError message={errors.current_password} className="mt-2"/>
+                            <InputError message={errors?.current_password}/>
                         </div>
 
                         <div>
@@ -70,15 +61,14 @@ export default function UpdatePasswordForm() {
 
                             <TextInput
                                 id="password"
+                                name="password"
                                 ref={passwordInput}
-                                value={data.password}
-                                onChange={(e) => setData('password', e.target.value)}
                                 type="password"
-                                className="mt-1 block w-full"
+                                className="block w-full"
                                 autoComplete="new-password"
                             />
 
-                            <InputError message={errors.password} className="mt-2"/>
+                            <InputError message={errors?.password}/>
                         </div>
 
                         <div>
@@ -86,29 +76,20 @@ export default function UpdatePasswordForm() {
 
                             <TextInput
                                 id="password_confirmation"
-                                value={data.password_confirmation}
-                                onChange={(e) => setData('password_confirmation', e.target.value)}
+                                name="password_confirmation"
+                                ref={passwordConfirmationInput}
                                 type="password"
                                 className="mt-1 block w-full"
                                 autoComplete="new-password"
                             />
 
-                            <InputError message={errors.password_confirmation} className="mt-2"/>
+                            <InputError message={errors?.password_confirmation}/>
                         </div>
 
-                        <div className="flex items-center gap-4">
-                            <PrimaryButton type="submit" disabled={processing}>{t('Save')}</PrimaryButton>
-
-                            <Transition
-                                show={recentlySuccessful}
-                                enterFrom="opacity-0"
-                                leaveTo="opacity-0"
-                                className="transition ease-in-out"
-                            >
-                                <p className="text-sm text-gray-600 dark:text-gray-400">{t('Saved.')}</p>
-                            </Transition>
-                        </div>
-                    </form>
+                        <PrimaryButton type="submit" name="intent" value="update-password">
+                            {t('Save')}
+                        </PrimaryButton>
+                    </Form>
                 </Card.Body>
             </div>
         </Card>
diff --git a/resources/js/V2/Core/Router/Actions/profileAction.ts b/resources/js/V2/Core/Router/Actions/profileAction.ts
index 6041632a..b700cd60 100644
--- a/resources/js/V2/Core/Router/Actions/profileAction.ts
+++ b/resources/js/V2/Core/Router/Actions/profileAction.ts
@@ -6,8 +6,6 @@ import {redirect} from 'react-router-dom';
 const profileAction: ActionFunction = async ({request: req}) => {
     const formData = await req.formData();
 
-    console.log(Object.fromEntries(formData));
-
     // if (formData.get('intent') === 'delete') {
     //     await request.delete(`/api/feeds/${params.feedId}`);
     //
@@ -15,7 +13,11 @@ const profileAction: ActionFunction = async ({request: req}) => {
     // }
 
     if (formData.get('intent') === 'update-profile') {
-        return await handleRequestValidationError(() => request.patch('/api/profile', {json: Object.fromEntries(formData)}));
+        return await handleRequestValidationError(() => request.patch('/api/profile', {json: Object.fromEntries(formData)}), '/');
+    }
+
+    if (formData.get('intent') === 'update-password') {
+        return await handleRequestValidationError(() => request.put('/api/password', {json: Object.fromEntries(formData)}), '/');
     }
 
     return redirect('/');
diff --git a/resources/js/V2/Core/Router/Helpers/handleRequestValidationError.ts b/resources/js/V2/Core/Router/Helpers/handleRequestValidationError.ts
index 4579eadd..664e6340 100644
--- a/resources/js/V2/Core/Router/Helpers/handleRequestValidationError.ts
+++ b/resources/js/V2/Core/Router/Helpers/handleRequestValidationError.ts
@@ -1,7 +1,8 @@
 import {HTTPError, ResponsePromise} from 'ky';
 import ValidationErrors from '@/V2/types/ValidationErrors';
+import {redirect} from 'react-router-dom';
 
-export default async function handleRequestValidationError(requestFn: () => ResponsePromise) {
+export default async function handleRequestValidationError(requestFn: () => ResponsePromise, to?: string) {
     try {
         await requestFn();
     } catch (exception) {
@@ -14,5 +15,9 @@ export default async function handleRequestValidationError(requestFn: () => Resp
         return (await errorResponse.json() as { errors: ValidationErrors; }).errors;
     }
 
+    if (to) {
+        return redirect(to);
+    }
+
     return null;
 }
diff --git a/resources/js/V2/Pages/ProfilePage.tsx b/resources/js/V2/Pages/ProfilePage.tsx
index fb841e18..bfa4d76c 100644
--- a/resources/js/V2/Pages/ProfilePage.tsx
+++ b/resources/js/V2/Pages/ProfilePage.tsx
@@ -1,17 +1,23 @@
 import {useLoaderData} from 'react-router-dom';
 import UpdateProfileInformation from '@/Pages/Profile/Partials/UpdateProfileInformationForm';
 import ProfileLoaderType from '@/V2/types/ProfileLoaderType';
+import UpdatePasswordForm from '@/Pages/Profile/Partials/UpdatePasswordForm';
+import DeleteUserForm from '@/Pages/Profile/Partials/DeleteUserForm';
 
 export default function ProfilePage() {
     const {mustVerifyEmail, status, user} = useLoaderData() as ProfileLoaderType;
 
     return (
-        <div>
+        <div className="space-y-8">
             <UpdateProfileInformation
                 mustVerifyEmail={mustVerifyEmail}
                 status={status}
                 user={user}
             />
+
+            <UpdatePasswordForm/>
+
+            {/*<DeleteUserForm/>*/}
         </div>
     );
 }
diff --git a/resources/js/V2/types/UpdatePasswordValidationErrors.ts b/resources/js/V2/types/UpdatePasswordValidationErrors.ts
new file mode 100644
index 00000000..9dee9ada
--- /dev/null
+++ b/resources/js/V2/types/UpdatePasswordValidationErrors.ts
@@ -0,0 +1,9 @@
+import ValidationErrors from '@/V2/types/ValidationErrors';
+
+type UpdatePasswordValidationErrors = ValidationErrors & {
+    current_password?: string;
+    password?: string;
+    password_confirmation?: string;
+} | null;
+
+export default UpdatePasswordValidationErrors;
diff --git a/routes/api.php b/routes/api.php
index 76c62198..b494fb9b 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\Api\Admin\UserController;
+use App\Http\Controllers\Api\Auth\PasswordController;
 use App\Http\Controllers\Api\CategoryController;
 use App\Http\Controllers\Api\DashboardController;
 use App\Http\Controllers\Api\FeedController;
@@ -29,6 +30,8 @@
     Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
     Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
 
+    Route::put('/password', [PasswordController::class, 'update'])->name('password.update');
+
     Route::delete('/logout', [AuthenticatedSessionController::class, 'destroy'])->name('logout');
 
     Route::resource('categories', CategoryController::class);

From d67c7e629947173dac1f015b964857360c94c9c8 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 15 Mar 2024 13:34:41 +0100
Subject: [PATCH 46/79] added the ability to delete your profile

---
 .../Controllers/Api/ProfileController.php     |  2 +-
 resources/js/Components/Button.tsx            |  4 ++
 .../Pages/Profile/Partials/DeleteUserForm.tsx | 57 ++++++++-----------
 .../V2/Core/Router/Actions/profileAction.ts   | 16 ++++--
 resources/js/V2/Pages/ProfilePage.tsx         |  2 +-
 routes/web.php                                |  4 +-
 6 files changed, 41 insertions(+), 44 deletions(-)

diff --git a/app/Http/Controllers/Api/ProfileController.php b/app/Http/Controllers/Api/ProfileController.php
index 4a877906..bbeb482e 100644
--- a/app/Http/Controllers/Api/ProfileController.php
+++ b/app/Http/Controllers/Api/ProfileController.php
@@ -50,7 +50,7 @@ public function destroy(Request $request): JsonResponse
 
         $user = $request->user();
 
-        Auth::logout();
+        Auth::guard('web')->logout();
 
         $user->delete();
 
diff --git a/resources/js/Components/Button.tsx b/resources/js/Components/Button.tsx
index 625ca409..4a9b27af 100644
--- a/resources/js/Components/Button.tsx
+++ b/resources/js/Components/Button.tsx
@@ -219,6 +219,8 @@ const DangerButton = (
         className,
         disabled,
         onClick,
+        name,
+        value,
         children,
         confirm = true,
         confirmTitle,
@@ -234,6 +236,8 @@ const DangerButton = (
             className={className}
             disabled={disabled}
             onClick={onClick}
+            name={name}
+            value={value}
             confirm={confirm}
             confirmTitle={confirmTitle}
             confirmSubmitTitle={confirmSubmitTitle}
diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.tsx b/resources/js/Pages/Profile/Partials/DeleteUserForm.tsx
index e8317cda..ac9906e0 100644
--- a/resources/js/Pages/Profile/Partials/DeleteUserForm.tsx
+++ b/resources/js/Pages/Profile/Partials/DeleteUserForm.tsx
@@ -1,46 +1,34 @@
-import React, {useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
 import {Modal} from '@/Components/Modal/Modal';
 import TextInput from '@/Components/TextInput';
-import {useForm} from '@inertiajs/react';
 import {DangerButton, SecondaryButton} from '@/Components/Button';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import Card from '@/Components/Card';
+import {Form, useActionData} from 'react-router-dom';
+import UpdatePasswordValidationErrors from '@/V2/types/UpdatePasswordValidationErrors';
 
 export default function DeleteUserForm() {
     const {t} = useLaravelReactI18n();
+    const errors = useActionData() as UpdatePasswordValidationErrors;
     const [confirmingUserDeletion, setConfirmingUserDeletion] = useState(false);
-    const passwordInput = useRef<HTMLInputElement>();
+    const passwordInput = useRef<HTMLInputElement>(null);
 
-    const {
-        data,
-        setData,
-        delete: destroy,
-        processing,
-        reset,
-        errors,
-    } = useForm({password: ''});
+    useEffect(() => {
+        if (errors) {
+            passwordInput.current?.focus();
+        }
+    }, [errors]);
 
     const confirmUserDeletion = () => {
         setConfirmingUserDeletion(true);
     };
 
-    const deleteUser = (event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault();
-
-        destroy(route('profile.destroy'), {
-            preserveScroll: true,
-            onSuccess: () => closeModal(),
-            onError: () => passwordInput.current?.focus(),
-            onFinish: () => reset(),
-        });
-    };
-
     const closeModal = () => {
         setConfirmingUserDeletion(false);
 
-        reset();
+        // reset();
     };
 
     return (
@@ -52,12 +40,14 @@ export default function DeleteUserForm() {
                 />
 
                 <Card.Body>
-                    <DangerButton onClick={confirmUserDeletion} confirm={false}>{t('Delete Account')}</DangerButton>
+                    <DangerButton onClick={confirmUserDeletion} confirm={false}>
+                        {t('Delete Account')}
+                    </DangerButton>
                 </Card.Body>
             </div>
 
             <Modal show={confirmingUserDeletion} onClose={closeModal}>
-                <form onSubmit={deleteUser} className="p-6">
+                <Form method="put" action="/profile" className="p-6">
                     <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100">
                         {t('Are you sure you want to delete your account?')}
                     </h2>
@@ -74,24 +64,25 @@ export default function DeleteUserForm() {
                             type="password"
                             name="password"
                             ref={passwordInput}
-                            value={data.password}
-                            onChange={(e) => setData('password', e.target.value)}
-                            className="mt-1 block w-full"
-                            isFocused
                             placeholder={t('Password')}
+                            className="block w-full"
+                            isFocused
+                            required
                         />
 
-                        <InputError message={errors.password} className="mt-2"/>
+                        <InputError message={errors?.password}/>
                     </div>
 
                     <div className="mt-6 flex justify-end">
-                        <SecondaryButton onClick={closeModal}>{t('Cancel')}</SecondaryButton>
+                        <SecondaryButton onClick={closeModal}>
+                            {t('Cancel')}
+                        </SecondaryButton>
 
-                        <DangerButton type="submit" className="ml-3" confirm={false} disabled={processing}>
+                        <DangerButton type="submit" className="ml-3" confirm={false} name="intent" value="delete">
                             {t('Delete Account')}
                         </DangerButton>
                     </div>
-                </form>
+                </Form>
             </Modal>
         </Card>
     );
diff --git a/resources/js/V2/Core/Router/Actions/profileAction.ts b/resources/js/V2/Core/Router/Actions/profileAction.ts
index b700cd60..9b494b07 100644
--- a/resources/js/V2/Core/Router/Actions/profileAction.ts
+++ b/resources/js/V2/Core/Router/Actions/profileAction.ts
@@ -6,12 +6,6 @@ import {redirect} from 'react-router-dom';
 const profileAction: ActionFunction = async ({request: req}) => {
     const formData = await req.formData();
 
-    // if (formData.get('intent') === 'delete') {
-    //     await request.delete(`/api/feeds/${params.feedId}`);
-    //
-    //     return null;
-    // }
-
     if (formData.get('intent') === 'update-profile') {
         return await handleRequestValidationError(() => request.patch('/api/profile', {json: Object.fromEntries(formData)}), '/');
     }
@@ -20,6 +14,16 @@ const profileAction: ActionFunction = async ({request: req}) => {
         return await handleRequestValidationError(() => request.put('/api/password', {json: Object.fromEntries(formData)}), '/');
     }
 
+    if (formData.get('intent') === 'delete') {
+        const errors = await handleRequestValidationError(() => request.delete('/api/profile', {json: Object.fromEntries(formData)}));
+
+        if (errors) {
+            return errors;
+        }
+
+        window.location.href = '/';
+    }
+
     return redirect('/');
 };
 
diff --git a/resources/js/V2/Pages/ProfilePage.tsx b/resources/js/V2/Pages/ProfilePage.tsx
index bfa4d76c..8d36d1aa 100644
--- a/resources/js/V2/Pages/ProfilePage.tsx
+++ b/resources/js/V2/Pages/ProfilePage.tsx
@@ -17,7 +17,7 @@ export default function ProfilePage() {
 
             <UpdatePasswordForm/>
 
-            {/*<DeleteUserForm/>*/}
+            <DeleteUserForm/>
         </div>
     );
 }
diff --git a/routes/web.php b/routes/web.php
index b1576a39..4e276329 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,16 +1,14 @@
 <?php
 
-use App\Http\Controllers\Admin\UserController as AdminUserController;
 use App\Http\Controllers\CategoryController;
 use App\Http\Controllers\DashboardController;
 use App\Http\Controllers\FeedController;
 use App\Http\Controllers\FeedDiscovererController;
 use App\Http\Controllers\FeedUrlDiscovererController;
 use App\Http\Controllers\MarkAllUnreadFeedItemsAsReadController;
-use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\ToggleFeedItemController;
-use Illuminate\Support\Facades\Route;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 
 /*

From 0f33e12a86686d8118c15debab496184ac6a5e60 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 15 Mar 2024 21:19:55 +0100
Subject: [PATCH 47/79] added toast messages and 404 error page

---
 lang/de.json                                  | 11 +++++-
 package-lock.json                             | 26 +++++++++++++
 package.json                                  |  1 +
 .../js/Icons/ArrowUturnLeftSolidIcon.tsx      |  9 +++++
 resources/js/V2/AppWithToasts.tsx             | 38 +++++++++++++++++++
 resources/js/V2/Core/NotFoundPage.tsx         | 20 ++++++++++
 .../Router/Actions/createCategoryAction.ts    |  7 +++-
 .../Core/Router/Actions/createFeedAction.ts   |  7 +++-
 .../Core/Router/Actions/editCategoryAction.ts |  9 ++++-
 .../V2/Core/Router/Actions/editFeedAction.ts  |  9 ++++-
 .../V2/Core/Router/Actions/profileAction.ts   | 13 ++++++-
 .../js/V2/Core/Router/Actions/usersAction.ts  |  3 ++
 resources/js/V2/Core/Router/router.tsx        |  5 +++
 resources/js/V2/app.tsx                       |  5 +--
 routes/web.php                                |  7 ----
 15 files changed, 153 insertions(+), 17 deletions(-)
 create mode 100644 resources/js/Icons/ArrowUturnLeftSolidIcon.tsx
 create mode 100644 resources/js/V2/AppWithToasts.tsx
 create mode 100644 resources/js/V2/Core/NotFoundPage.tsx

diff --git a/lang/de.json b/lang/de.json
index daf7bfdf..d5fdc82f 100644
--- a/lang/de.json
+++ b/lang/de.json
@@ -113,5 +113,14 @@
     "Do you really want to delete the user “:name”?": "Wollen Sie den Benutzer „:name” wirklich löschen?",
     "Manage users": "Benutzer verwalten",
     "Home": "Startseite",
-    "Edit feed": "Feed ändern"
+    "Edit feed": "Feed ändern",
+    "Category saved.": "Kategorie gespeichert.",
+    "Category deleted.": "Kategorie gelöscht.",
+    "Feed saved.": "Feed gespeichert.",
+    "Feed deleted.": "Feed gelöscht",
+    "Profile saved.": "Profil gespeichert",
+    "Password updated.": "Passwort geändert.",
+    "User deleted.": "Benutzer gelöscht.",
+    "404—The requested site could not be found.": "404—Die angeforderte Seite konnte nicht gefunden werden.",
+    "Back to landing page": "Zurück zur Startseite"
 }
diff --git a/package-lock.json b/package-lock.json
index 746711a7..719bf107 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
                 "react": "^18.2.0",
                 "react-blurhash": "^0.3.0",
                 "react-dom": "^18.2.0",
+                "react-hot-toast": "^2.4.1",
                 "react-router-dom": "^6.22.3",
                 "slug": "^9.0.0",
                 "tailwindcss": "^3.3.1",
@@ -3553,6 +3554,15 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/goober": {
+            "version": "2.1.14",
+            "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+            "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+            "dev": true,
+            "peerDependencies": {
+                "csstype": "^3.0.10"
+            }
+        },
         "node_modules/gopd": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -5105,6 +5115,22 @@
                 "react": "^18.2.0"
             }
         },
+        "node_modules/react-hot-toast": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+            "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+            "dev": true,
+            "dependencies": {
+                "goober": "^2.1.10"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "react": ">=16",
+                "react-dom": ">=16"
+            }
+        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 88378b77..e12047f0 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
         "react": "^18.2.0",
         "react-blurhash": "^0.3.0",
         "react-dom": "^18.2.0",
+        "react-hot-toast": "^2.4.1",
         "react-router-dom": "^6.22.3",
         "slug": "^9.0.0",
         "tailwindcss": "^3.3.1",
diff --git a/resources/js/Icons/ArrowUturnLeftSolidIcon.tsx b/resources/js/Icons/ArrowUturnLeftSolidIcon.tsx
new file mode 100644
index 00000000..471714ad
--- /dev/null
+++ b/resources/js/Icons/ArrowUturnLeftSolidIcon.tsx
@@ -0,0 +1,9 @@
+import {IconProps} from '@/types';
+
+export default function ArrowUturnLeftSolidIcon({className = ''}: IconProps) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={className}>
+            <path fillRule="evenodd" d="M9.53 2.47a.75.75 0 0 1 0 1.06L4.81 8.25H15a6.75 6.75 0 0 1 0 13.5h-3a.75.75 0 0 1 0-1.5h3a5.25 5.25 0 1 0 0-10.5H4.81l4.72 4.72a.75.75 0 1 1-1.06 1.06l-6-6a.75.75 0 0 1 0-1.06l6-6a.75.75 0 0 1 1.06 0Z" clipRule="evenodd"/>
+        </svg>
+    );
+}
diff --git a/resources/js/V2/AppWithToasts.tsx b/resources/js/V2/AppWithToasts.tsx
new file mode 100644
index 00000000..3706a619
--- /dev/null
+++ b/resources/js/V2/AppWithToasts.tsx
@@ -0,0 +1,38 @@
+import {useLaravelReactI18n} from 'laravel-react-i18n';
+import {Toast, Toaster} from 'react-hot-toast';
+import {Transition} from '@headlessui/react';
+import {RouterProvider} from 'react-router-dom';
+import router from '@/V2/Core/Router/router';
+
+export default function AppWithToasts() {
+    const {t} = useLaravelReactI18n();
+
+    const toastRenderer = (toast: Toast) => {
+        return (
+            <Transition
+                appear
+                show={toast.visible}
+                as="div"
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 translate-y-4"
+                enterTo="opacity-100 translate-y-0"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-4"
+                className="px-4 py-3 dark:bg-gray-800 rounded-lg select-none"
+            >
+                {t(toast.message as string)}
+            </Transition>
+        );
+    };
+
+    return (
+        <>
+            <Toaster position="bottom-center">
+                {toastRenderer}
+            </Toaster>
+
+            <RouterProvider router={router}/>
+        </>
+    );
+}
diff --git a/resources/js/V2/Core/NotFoundPage.tsx b/resources/js/V2/Core/NotFoundPage.tsx
new file mode 100644
index 00000000..16386e86
--- /dev/null
+++ b/resources/js/V2/Core/NotFoundPage.tsx
@@ -0,0 +1,20 @@
+import {Link} from 'react-router-dom';
+import {useLaravelReactI18n} from 'laravel-react-i18n';
+import ArrowUturnLeftSolidIcon from '@/Icons/ArrowUturnLeftSolidIcon';
+
+export default function NotFoundPage() {
+    const {t} = useLaravelReactI18n();
+
+    return (
+        <main className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8 py-12">
+            <div className="text-2xl pb-4">
+                {t('404—The requested site could not be found.')}
+            </div>
+
+            <Link to="/" className="link-secondary inline-flex space-x-2">
+                <ArrowUturnLeftSolidIcon className="size-5"/>
+                <span>{t('Back to landing page')}</span>
+            </Link>
+        </main>
+    );
+}
diff --git a/resources/js/V2/Core/Router/Actions/createCategoryAction.ts b/resources/js/V2/Core/Router/Actions/createCategoryAction.ts
index 254ff43c..dad6f1dd 100644
--- a/resources/js/V2/Core/Router/Actions/createCategoryAction.ts
+++ b/resources/js/V2/Core/Router/Actions/createCategoryAction.ts
@@ -1,11 +1,16 @@
 import request from '@/V2/request';
 import {ActionFunction} from '@remix-run/router/utils';
 import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
+import toast from 'react-hot-toast';
 
 const createCategoryAction: ActionFunction = async ({request: req}) => {
     const formData = await req.formData();
 
-    return await handleRequestValidationError(() => request.post('/api/categories', {json: Object.fromEntries(formData)}));
+    const response = await handleRequestValidationError(() => request.post('/api/categories', {json: Object.fromEntries(formData)}));
+
+    toast('Category saved.');
+
+    return response;
 };
 
 export default createCategoryAction;
diff --git a/resources/js/V2/Core/Router/Actions/createFeedAction.ts b/resources/js/V2/Core/Router/Actions/createFeedAction.ts
index 6a6ae9ff..a3555745 100644
--- a/resources/js/V2/Core/Router/Actions/createFeedAction.ts
+++ b/resources/js/V2/Core/Router/Actions/createFeedAction.ts
@@ -1,6 +1,7 @@
 import request from '@/V2/request';
 import {ActionFunction} from '@remix-run/router/utils';
 import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
+import toast from 'react-hot-toast';
 
 const createFeedAction: ActionFunction = async ({request: req}) => {
     const formData = await req.formData();
@@ -9,7 +10,11 @@ const createFeedAction: ActionFunction = async ({request: req}) => {
         formData.append('is_purgeable', '0');
     }
 
-    return await handleRequestValidationError(() => request.post('/api/feeds', {json: Object.fromEntries(formData)}));
+    const response = await handleRequestValidationError(() => request.post('/api/feeds', {json: Object.fromEntries(formData)}));
+
+    toast('Feed saved.');
+
+    return response;
 };
 
 export default createFeedAction;
diff --git a/resources/js/V2/Core/Router/Actions/editCategoryAction.ts b/resources/js/V2/Core/Router/Actions/editCategoryAction.ts
index 59f1b3fe..f66196d5 100644
--- a/resources/js/V2/Core/Router/Actions/editCategoryAction.ts
+++ b/resources/js/V2/Core/Router/Actions/editCategoryAction.ts
@@ -1,6 +1,7 @@
 import request from '@/V2/request';
 import {ActionFunction} from '@remix-run/router/utils';
 import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
+import toast from 'react-hot-toast';
 
 const editCategoryAction: ActionFunction = async ({params, request: req}) => {
     const formData = await req.formData();
@@ -8,10 +9,16 @@ const editCategoryAction: ActionFunction = async ({params, request: req}) => {
     if (formData.get('intent') === 'delete') {
         await request.delete(`/api/categories/${params.categoryId}`);
 
+        toast('Category deleted.');
+
         return null;
     }
 
-    return await handleRequestValidationError(() => request.put(`/api/categories/${params.categoryId}`, {json: Object.fromEntries(formData)}));
+    const response = await handleRequestValidationError(() => request.put(`/api/categories/${params.categoryId}`, {json: Object.fromEntries(formData)}));
+
+    toast('Category saved.');
+
+    return response;
 };
 
 export default editCategoryAction;
diff --git a/resources/js/V2/Core/Router/Actions/editFeedAction.ts b/resources/js/V2/Core/Router/Actions/editFeedAction.ts
index 9e9b542f..2af72f26 100644
--- a/resources/js/V2/Core/Router/Actions/editFeedAction.ts
+++ b/resources/js/V2/Core/Router/Actions/editFeedAction.ts
@@ -1,6 +1,7 @@
 import request from '@/V2/request';
 import {ActionFunction} from '@remix-run/router/utils';
 import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
+import toast from 'react-hot-toast';
 
 const editFeedAction: ActionFunction = async ({params, request: req}) => {
     const formData = await req.formData();
@@ -12,10 +13,16 @@ const editFeedAction: ActionFunction = async ({params, request: req}) => {
     if (formData.get('intent') === 'delete') {
         await request.delete(`/api/feeds/${params.feedId}`);
 
+        toast('Feed deleted.');
+
         return null;
     }
 
-    return await handleRequestValidationError(() => request.put(`/api/feeds/${params.feedId}`, {json: Object.fromEntries(formData)}));
+    const response = await handleRequestValidationError(() => request.put(`/api/feeds/${params.feedId}`, {json: Object.fromEntries(formData)}));
+
+    toast('Feed saved.');
+
+    return response;
 };
 
 export default editFeedAction;
diff --git a/resources/js/V2/Core/Router/Actions/profileAction.ts b/resources/js/V2/Core/Router/Actions/profileAction.ts
index 9b494b07..c2dacb85 100644
--- a/resources/js/V2/Core/Router/Actions/profileAction.ts
+++ b/resources/js/V2/Core/Router/Actions/profileAction.ts
@@ -2,16 +2,25 @@ import request from '@/V2/request';
 import {ActionFunction} from '@remix-run/router/utils';
 import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
 import {redirect} from 'react-router-dom';
+import toast from 'react-hot-toast';
 
 const profileAction: ActionFunction = async ({request: req}) => {
     const formData = await req.formData();
 
     if (formData.get('intent') === 'update-profile') {
-        return await handleRequestValidationError(() => request.patch('/api/profile', {json: Object.fromEntries(formData)}), '/');
+        const response = await handleRequestValidationError(() => request.patch('/api/profile', {json: Object.fromEntries(formData)}), '/');
+
+        toast('Profile saved.');
+
+        return response;
     }
 
     if (formData.get('intent') === 'update-password') {
-        return await handleRequestValidationError(() => request.put('/api/password', {json: Object.fromEntries(formData)}), '/');
+        const response = await handleRequestValidationError(() => request.put('/api/password', {json: Object.fromEntries(formData)}), '/');
+
+        toast('Password updated.');
+
+        return response;
     }
 
     if (formData.get('intent') === 'delete') {
diff --git a/resources/js/V2/Core/Router/Actions/usersAction.ts b/resources/js/V2/Core/Router/Actions/usersAction.ts
index 1811adc5..bc43de8a 100644
--- a/resources/js/V2/Core/Router/Actions/usersAction.ts
+++ b/resources/js/V2/Core/Router/Actions/usersAction.ts
@@ -1,12 +1,15 @@
 import request from '@/V2/request';
 import {ActionFunction} from '@remix-run/router/utils';
 import {redirect} from 'react-router-dom';
+import toast from 'react-hot-toast';
 
 const usersAction: ActionFunction = async ({request: req}) => {
     const formData = await req.formData();
 
     if (formData.get('intent') === 'delete') {
         await request.delete(`/api/admin/users/${formData.get('userId')}`);
+
+        toast('User deleted.');
     }
 
     return redirect('/admin/users');
diff --git a/resources/js/V2/Core/Router/router.tsx b/resources/js/V2/Core/Router/router.tsx
index 30cbf13b..d3da7f6f 100644
--- a/resources/js/V2/Core/Router/router.tsx
+++ b/resources/js/V2/Core/Router/router.tsx
@@ -29,6 +29,7 @@ import usersAction from '@/V2/Core/Router/Actions/usersAction';
 import ProfilePage from '@/V2/Pages/ProfilePage';
 import profileLoader from '@/V2/Core/Router/Loaders/profileLoader';
 import profileAction from '@/V2/Core/Router/Actions/profileAction';
+import NotFoundPage from '@/V2/Core/NotFoundPage';
 
 const router = createBrowserRouter([
     {
@@ -112,6 +113,10 @@ const router = createBrowserRouter([
             },
         ],
     },
+    {
+        path: '*',
+        element: <NotFoundPage/>,
+    },
 ]);
 
 export default router;
diff --git a/resources/js/V2/app.tsx b/resources/js/V2/app.tsx
index 3b74ba98..ee89308b 100644
--- a/resources/js/V2/app.tsx
+++ b/resources/js/V2/app.tsx
@@ -1,10 +1,9 @@
 import {createRoot} from 'react-dom/client';
-import {RouterProvider} from 'react-router-dom';
-import router from '@/V2/Core/Router/router';
 import NProgress from 'nprogress';
 import {LaravelReactI18nProvider} from 'laravel-react-i18n';
 import getBrowserLocale from '@/Utils/getBrowserLocale';
 import AppWithLoadedTranslations from '@/Components/AppWithLoadedTranslations';
+import AppWithToasts from '@/V2/AppWithToasts';
 
 NProgress.configure({
     showSpinner: false,
@@ -17,7 +16,7 @@ const App = () => {
             fallbackLocale="en"
             files={import.meta.glob('/lang/*.json', {eager: true})}
         >
-            <AppWithLoadedTranslations app={RouterProvider} router={router}/>
+            <AppWithLoadedTranslations app={AppWithToasts}/>
         </LaravelReactI18nProvider>
     );
 };
diff --git a/routes/web.php b/routes/web.php
index 4e276329..8ce2b341 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -40,14 +40,7 @@
     Route::get('/dashboard', DashboardController::class)->name('dashboard');
 
     Route::middleware('verified')->group(function () {
-        Route::resource('categories', CategoryController::class)->except('show');
 
-        Route::post('discover-feed', FeedDiscovererController::class)->name('discover-feed');
-        Route::post('discover-feed-urls', FeedUrlDiscovererController::class)->name('discover-feed-urls');
-
-        Route::put('/feeds/mark-all-as-read', MarkAllUnreadFeedItemsAsReadController::class)->name('mark-all-as-read');
-        Route::resource('feeds', FeedController::class)->except('show');
-        Route::put('/feeds/{feedItem}/toggle', ToggleFeedItemController::class)->name('toggle-feed-item');
     });
 });
 

From 018b5917acd97740757fce9b90feb3bc181a4749 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 15 Mar 2024 21:23:45 +0100
Subject: [PATCH 48/79] adjusted error page layout

---
 resources/js/V2/Core/ErrorPage.tsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/resources/js/V2/Core/ErrorPage.tsx b/resources/js/V2/Core/ErrorPage.tsx
index 10b5b72b..8bc56efd 100644
--- a/resources/js/V2/Core/ErrorPage.tsx
+++ b/resources/js/V2/Core/ErrorPage.tsx
@@ -1,16 +1,20 @@
-import {isRouteErrorResponse, useAsyncError, useRouteError} from 'react-router-dom';
+import {Link} from 'react-router-dom';
+import ArrowUturnLeftSolidIcon from '@/Icons/ArrowUturnLeftSolidIcon';
+import {useLaravelReactI18n} from 'laravel-react-i18n';
 
 export default function ErrorPage() {
-    const error = useRouteError();
-    const asyncError = useAsyncError();
+    const {t} = useLaravelReactI18n();
 
-    if (asyncError) {
-        return <div>Async error occurred: {JSON.stringify({asyncError})}</div>;
-    }
+    return (
+        <main className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8 py-12">
+            <div className="text-2xl pb-4">
+                {t('We’re sorry; an error occurred.')}
+            </div>
 
-    if (isRouteErrorResponse(error)) {
-        return <div>{error.status} {error.statusText}.</div>;
-    }
-
-    return <div>Unknown error occurred: {JSON.stringify(error)}</div>;
+            <Link to="/" className="link-secondary inline-flex space-x-2">
+                <ArrowUturnLeftSolidIcon className="size-5"/>
+                <span>{t('Back to landing page')}</span>
+            </Link>
+        </main>
+    );
 }

From e29ec0b301f39d54a5b829fbfc47fde6a3dc0e2a Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 15 Mar 2024 21:25:05 +0100
Subject: [PATCH 49/79] adjusted table styles

---
 resources/js/Components/Table.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/Components/Table.tsx b/resources/js/Components/Table.tsx
index 2e19701d..63f468fa 100644
--- a/resources/js/Components/Table.tsx
+++ b/resources/js/Components/Table.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 
 const Table = ({children}: {children: ReactNode;}) => {
     return (
-        <table className="min-w-full border border-gray-300 dark:border-gray-500 border-separate border-spacing-0 rounded-lg contain-paint">
+        <table className="min-w-full border border-gray-300 dark:border-gray-600 border-separate border-spacing-0 rounded-lg contain-paint">
             {children}
         </table>
     );
@@ -21,7 +21,7 @@ const HeadingCell = ({children, hideOnMobile = false, className = ''}: {children
     return (
         <th
             className={clsx(
-                'sticky top-0 z-10 border-b border-gray-300 dark:border-gray-500 bg-gray-100/50 dark:bg-gray-800/50 py-3.5 pl-4 pr-3 text-left font-semibold text-gray-900 dark:text-gray-100 backdrop-blur backdrop-filter sm:pl-6 lg:pl-6',
+                'sticky top-0 z-10 border-b border-gray-300 dark:border-gray-600 bg-gray-100/50 dark:bg-gray-800/50 py-3.5 pl-4 pr-3 text-left font-semibold text-gray-900 dark:text-gray-100 backdrop-blur backdrop-filter sm:pl-6 lg:pl-6',
                 className,
                 {
                     'hidden lg:table-cell': hideOnMobile,
@@ -45,7 +45,7 @@ const Cell = ({children, highlighted = false, hideOnMobile = false}: {children:
     return (
         <td
             className={clsx(
-                'align-top border-b border-gray-200 dark:border-gray-600 whitespace-nowrap py-4 pl-4 pr-3 font-medium sm:pl-6 lg:pl-8',
+                'align-top border-b border-gray-200 dark:border-gray-700 whitespace-nowrap py-4 pl-4 pr-3 font-medium sm:pl-6 lg:pl-8',
                 {
                     'font-semibold': highlighted,
                     'hidden lg:table-cell': hideOnMobile,

From cb543ee7486dffe1f9d62d18fd1b33bfb2992478 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 15 Mar 2024 21:25:38 +0100
Subject: [PATCH 50/79] adjusted link stack styles

---
 resources/js/Components/LinkStack.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Components/LinkStack.tsx b/resources/js/Components/LinkStack.tsx
index aeda4db6..7b50ad2a 100644
--- a/resources/js/Components/LinkStack.tsx
+++ b/resources/js/Components/LinkStack.tsx
@@ -24,7 +24,7 @@ const Item = (
     return (
         <Link
             to={to}
-            className={clsx('px-4 py-3 hover:bg-gray-100 hover:dark:bg-gray-700 transition ease-in-out first:rounded-t-lg last:rounded-b-lg', className)}
+            className={clsx('px-4 py-3 hover:bg-gray-100 hover:dark:bg-gray-800 transition ease-in-out first:rounded-t-lg last:rounded-b-lg', className)}
         >
             {children}
         </Link>

From 9ee727df70dec98458448697650dc2ccf64a06f5 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 15 Mar 2024 21:41:01 +0100
Subject: [PATCH 51/79] reorganized files

---
 app/Http/Middleware/HandleInertiaRequests.php |   2 +-
 resources/js/{V2 => }/AppWithToasts.tsx       |   2 +-
 resources/js/Components/FeedItemCard.tsx      |   6 +-
 resources/js/{V2 => }/Contexts/AuthContext.ts |   2 +-
 .../Contexts/TotalNumberOfFeedItemsContext.ts |   6 +-
 resources/js/{V2 => }/Core/AuthProvider.tsx   |   2 +-
 .../js/{V2 => }/Core/AuthenticatedLayout.tsx  |   8 +-
 resources/js/{V2 => }/Core/Breadcrumbs.tsx    |   4 +-
 resources/js/{V2 => }/Core/ErrorPage.tsx      |   0
 resources/js/{V2 => }/Core/NotFoundPage.tsx   |   0
 .../Router/Actions/createCategoryAction.ts    |   4 +-
 .../Core/Router/Actions/createFeedAction.ts   |   4 +-
 .../Core/Router/Actions/editCategoryAction.ts |   4 +-
 .../Core/Router/Actions/editFeedAction.ts     |   4 +-
 .../Core/Router/Actions/profileAction.ts      |   4 +-
 .../Core/Router/Actions/usersAction.ts        |   2 +-
 .../Helpers/handleRequestValidationError.ts   |   2 +-
 .../Core/Router/Loaders/categoriesLoader.ts   |   4 +-
 .../Core/Router/Loaders/createFeedLoader.ts   |   4 +-
 .../Core/Router/Loaders/editCategoryLoader.ts |   5 +-
 .../Core/Router/Loaders/editFeedLoader.ts     |   4 +-
 .../Core/Router/Loaders/feedItemsLoader.ts    |   4 +-
 .../Core/Router/Loaders/feedsLoader.ts        |   4 +-
 .../Core/Router/Loaders/layoutLoader.ts       |   2 +-
 .../Core/Router/Loaders/profileLoader.ts      |   4 +-
 .../Core/Router/Loaders/usersLoader.ts        |   4 +-
 resources/js/{V2 => }/Core/Router/router.tsx  |  62 ++---
 .../Core/TotalNumberOfFeedItemsProvider.tsx   |   2 +-
 resources/js/{V2 => Core}/request.ts          |   0
 resources/js/{V2 => }/Hooks/useAuth.ts        |   2 +-
 resources/js/{V2 => }/Hooks/useBreadcrumbs.ts |   4 +-
 resources/js/{V2 => }/Hooks/usePageModal.ts   |   4 +-
 .../Pages/Auth/ConfirmPassword.tsx            |   0
 .../Pages/Auth/ForgotPassword.tsx             |   0
 .../js/{ => Inertia}/Pages/Auth/Login.tsx     |   0
 .../js/{ => Inertia}/Pages/Auth/Register.tsx  |   0
 .../Pages/Auth/ResetPassword.tsx              |   0
 .../{ => Inertia}/Pages/Auth/VerifyEmail.tsx  |   0
 resources/js/{ => Inertia}/Pages/Welcome.tsx  |   0
 resources/js/Inertia/app.tsx                  |  30 +++
 resources/js/{V2 => }/Pages/Admin/Admin.tsx   |   2 +-
 resources/js/Pages/Admin/Users/Index.tsx      | 119 ---------
 .../Pages/Admin/Users/UsersIndexPage.tsx      |   4 +-
 .../Pages/Categories/CategoriesIndexPage.tsx  |   2 +-
 resources/js/Pages/Categories/Create.tsx      |  26 --
 .../Pages/Categories/CreateCategoryPage.tsx   |   6 +-
 resources/js/Pages/Categories/Edit.tsx        |  49 ----
 .../Pages/Categories/EditCategoryPage.tsx     |   8 +-
 resources/js/Pages/Categories/Index.tsx       |  62 -----
 .../Categories/Partials/CategoryForm.tsx      |   4 +-
 .../js/Pages/Categories/Partials/Form.tsx     |  46 ----
 resources/js/Pages/Dashboard.tsx              | 114 ---------
 resources/js/Pages/Feeds/Create.tsx           |  50 ----
 .../{V2 => }/Pages/Feeds/CreateFeedPage.tsx   |   8 +-
 resources/js/Pages/Feeds/Edit.tsx             |  51 ----
 .../js/{V2 => }/Pages/Feeds/EditFeedPage.tsx  |   8 +-
 .../{V2 => }/Pages/Feeds/FeedsIndexPage.tsx   |   4 +-
 resources/js/Pages/Feeds/Index.tsx            | 118 ---------
 .../Pages/Feeds/Partials/FeedForm.tsx         |   8 +-
 resources/js/Pages/Feeds/Partials/Form.tsx    | 228 ------------------
 resources/js/{V2 => }/Pages/Home.tsx          |   6 +-
 resources/js/Pages/Profile/Edit.tsx           |  30 ---
 .../Pages/Profile/Partials/DeleteUserForm.tsx |   2 +-
 .../Profile/Partials/UpdatePasswordForm.tsx   |   2 +-
 .../Partials/UpdateProfileInformationForm.tsx |   2 +-
 resources/js/{V2 => }/Pages/ProfilePage.tsx   |   2 +-
 resources/js/{V2 => }/Utils/wait.ts           |   0
 .../Contexts/TotalNumberOfFeedItemsContext.ts |  10 -
 resources/js/V2/app.tsx                       |  25 --
 resources/js/V2/types/Breadcrumb.ts           |   6 -
 resources/js/app.tsx                          |  43 ++--
 .../js/{V2 => }/types/AuthContextType.ts      |   0
 resources/js/types/Breadcrumb.ts              |   4 +-
 .../js/{V2 => }/types/CategoriesLoaderType.ts |   0
 .../types/CreateCategoryValidationErrors.ts   |   2 +-
 .../js/{V2 => }/types/CreateFeedLoaderType.ts |   0
 .../types/CreateFeedValidationErrors.ts       |   2 +-
 .../{V2 => }/types/EditCategoryLoaderType.ts  |   0
 .../types/EditCategoryValidationErrors.ts     |   2 +-
 .../js/{V2 => }/types/EditFeddLoaderType.ts   |   0
 .../types/EditFeedValidationErrors.ts         |   2 +-
 .../js/{V2 => }/types/FeedItemsLoaderType.ts  |   0
 .../js/{V2 => }/types/FeedsLoaderType.ts      |   0
 .../js/{V2 => }/types/HomeLocationState.ts    |   0
 .../js/{V2 => }/types/MatchWithHandle.tsx     |   2 +-
 .../js/{V2 => }/types/ProfileLoaderType.ts    |   0
 resources/js/{V2 => }/types/RouteHandle.ts    |   0
 .../TotalNumberOfFeedItemsContextType.ts      |   0
 .../types/UpdatePasswordValidationErrors.ts   |   2 +-
 .../types/UpdateProfileValidationErrors.ts    |   2 +-
 .../js/{V2 => }/types/UsersLoaderType.ts      |   0
 .../js/{V2 => }/types/ValidationErrors.ts     |   0
 resources/views/app.blade.php                 |   8 +-
 ..._react.blade.php => app_inertia.blade.php} |   8 +-
 routes/web.php                                |   6 +-
 vite.config.mjs                               |   2 +-
 96 files changed, 183 insertions(+), 1099 deletions(-)
 rename resources/js/{V2 => }/AppWithToasts.tsx (96%)
 rename resources/js/{V2 => }/Contexts/AuthContext.ts (75%)
 rename resources/js/{V2 => }/Core/AuthProvider.tsx (87%)
 rename resources/js/{V2 => }/Core/AuthenticatedLayout.tsx (97%)
 rename resources/js/{V2 => }/Core/Breadcrumbs.tsx (95%)
 rename resources/js/{V2 => }/Core/ErrorPage.tsx (100%)
 rename resources/js/{V2 => }/Core/NotFoundPage.tsx (100%)
 rename resources/js/{V2 => }/Core/Router/Actions/createCategoryAction.ts (76%)
 rename resources/js/{V2 => }/Core/Router/Actions/createFeedAction.ts (79%)
 rename resources/js/{V2 => }/Core/Router/Actions/editCategoryAction.ts (82%)
 rename resources/js/{V2 => }/Core/Router/Actions/editFeedAction.ts (84%)
 rename resources/js/{V2 => }/Core/Router/Actions/profileAction.ts (89%)
 rename resources/js/{V2 => }/Core/Router/Actions/usersAction.ts (92%)
 rename resources/js/{V2 => }/Core/Router/Helpers/handleRequestValidationError.ts (90%)
 rename resources/js/{V2 => }/Core/Router/Loaders/categoriesLoader.ts (68%)
 rename resources/js/{V2 => }/Core/Router/Loaders/createFeedLoader.ts (68%)
 rename resources/js/{V2 => }/Core/Router/Loaders/editCategoryLoader.ts (59%)
 rename resources/js/{V2 => }/Core/Router/Loaders/editFeedLoader.ts (70%)
 rename resources/js/{V2 => }/Core/Router/Loaders/feedItemsLoader.ts (86%)
 rename resources/js/{V2 => }/Core/Router/Loaders/feedsLoader.ts (68%)
 rename resources/js/{V2 => }/Core/Router/Loaders/layoutLoader.ts (93%)
 rename resources/js/{V2 => }/Core/Router/Loaders/profileLoader.ts (68%)
 rename resources/js/{V2 => }/Core/Router/Loaders/usersLoader.ts (85%)
 rename resources/js/{V2 => }/Core/Router/router.tsx (61%)
 rename resources/js/{V2 => }/Core/TotalNumberOfFeedItemsProvider.tsx (82%)
 rename resources/js/{V2 => Core}/request.ts (100%)
 rename resources/js/{V2 => }/Hooks/useAuth.ts (67%)
 rename resources/js/{V2 => }/Hooks/useBreadcrumbs.ts (81%)
 rename resources/js/{V2 => }/Hooks/usePageModal.ts (89%)
 rename resources/js/{ => Inertia}/Pages/Auth/ConfirmPassword.tsx (100%)
 rename resources/js/{ => Inertia}/Pages/Auth/ForgotPassword.tsx (100%)
 rename resources/js/{ => Inertia}/Pages/Auth/Login.tsx (100%)
 rename resources/js/{ => Inertia}/Pages/Auth/Register.tsx (100%)
 rename resources/js/{ => Inertia}/Pages/Auth/ResetPassword.tsx (100%)
 rename resources/js/{ => Inertia}/Pages/Auth/VerifyEmail.tsx (100%)
 rename resources/js/{ => Inertia}/Pages/Welcome.tsx (100%)
 create mode 100644 resources/js/Inertia/app.tsx
 rename resources/js/{V2 => }/Pages/Admin/Admin.tsx (88%)
 delete mode 100644 resources/js/Pages/Admin/Users/Index.tsx
 rename resources/js/{V2 => }/Pages/Admin/Users/UsersIndexPage.tsx (98%)
 rename resources/js/{V2 => }/Pages/Categories/CategoriesIndexPage.tsx (96%)
 delete mode 100644 resources/js/Pages/Categories/Create.tsx
 rename resources/js/{V2 => }/Pages/Categories/CreateCategoryPage.tsx (78%)
 delete mode 100644 resources/js/Pages/Categories/Edit.tsx
 rename resources/js/{V2 => }/Pages/Categories/EditCategoryPage.tsx (87%)
 delete mode 100644 resources/js/Pages/Categories/Index.tsx
 rename resources/js/{V2 => }/Pages/Categories/Partials/CategoryForm.tsx (88%)
 delete mode 100644 resources/js/Pages/Categories/Partials/Form.tsx
 delete mode 100644 resources/js/Pages/Dashboard.tsx
 delete mode 100644 resources/js/Pages/Feeds/Create.tsx
 rename resources/js/{V2 => }/Pages/Feeds/CreateFeedPage.tsx (77%)
 delete mode 100644 resources/js/Pages/Feeds/Edit.tsx
 rename resources/js/{V2 => }/Pages/Feeds/EditFeedPage.tsx (88%)
 rename resources/js/{V2 => }/Pages/Feeds/FeedsIndexPage.tsx (98%)
 delete mode 100644 resources/js/Pages/Feeds/Index.tsx
 rename resources/js/{V2 => }/Pages/Feeds/Partials/FeedForm.tsx (97%)
 delete mode 100644 resources/js/Pages/Feeds/Partials/Form.tsx
 rename resources/js/{V2 => }/Pages/Home.tsx (96%)
 delete mode 100644 resources/js/Pages/Profile/Edit.tsx
 rename resources/js/{V2 => }/Pages/ProfilePage.tsx (92%)
 rename resources/js/{V2 => }/Utils/wait.ts (100%)
 delete mode 100644 resources/js/V2/Contexts/TotalNumberOfFeedItemsContext.ts
 delete mode 100644 resources/js/V2/app.tsx
 delete mode 100644 resources/js/V2/types/Breadcrumb.ts
 rename resources/js/{V2 => }/types/AuthContextType.ts (100%)
 rename resources/js/{V2 => }/types/CategoriesLoaderType.ts (100%)
 rename resources/js/{V2 => }/types/CreateCategoryValidationErrors.ts (69%)
 rename resources/js/{V2 => }/types/CreateFeedLoaderType.ts (100%)
 rename resources/js/{V2 => }/types/CreateFeedValidationErrors.ts (80%)
 rename resources/js/{V2 => }/types/EditCategoryLoaderType.ts (100%)
 rename resources/js/{V2 => }/types/EditCategoryValidationErrors.ts (68%)
 rename resources/js/{V2 => }/types/EditFeddLoaderType.ts (100%)
 rename resources/js/{V2 => }/types/EditFeedValidationErrors.ts (80%)
 rename resources/js/{V2 => }/types/FeedItemsLoaderType.ts (100%)
 rename resources/js/{V2 => }/types/FeedsLoaderType.ts (100%)
 rename resources/js/{V2 => }/types/HomeLocationState.ts (100%)
 rename resources/js/{V2 => }/types/MatchWithHandle.tsx (73%)
 rename resources/js/{V2 => }/types/ProfileLoaderType.ts (100%)
 rename resources/js/{V2 => }/types/RouteHandle.ts (100%)
 rename resources/js/{V2 => }/types/TotalNumberOfFeedItemsContextType.ts (100%)
 rename resources/js/{V2 => }/types/UpdatePasswordValidationErrors.ts (77%)
 rename resources/js/{V2 => }/types/UpdateProfileValidationErrors.ts (72%)
 rename resources/js/{V2 => }/types/UsersLoaderType.ts (100%)
 rename resources/js/{V2 => }/types/ValidationErrors.ts (100%)
 rename resources/views/{app_react.blade.php => app_inertia.blade.php} (77%)

diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index 5febeafd..1f1a2f0e 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -13,7 +13,7 @@ class HandleInertiaRequests extends Middleware
      *
      * @var string
      */
-    protected $rootView = 'app';
+    protected $rootView = 'app_inertia';
 
     /**
      * Determine the current asset version.
diff --git a/resources/js/V2/AppWithToasts.tsx b/resources/js/AppWithToasts.tsx
similarity index 96%
rename from resources/js/V2/AppWithToasts.tsx
rename to resources/js/AppWithToasts.tsx
index 3706a619..a7396676 100644
--- a/resources/js/V2/AppWithToasts.tsx
+++ b/resources/js/AppWithToasts.tsx
@@ -2,7 +2,7 @@ import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {Toast, Toaster} from 'react-hot-toast';
 import {Transition} from '@headlessui/react';
 import {RouterProvider} from 'react-router-dom';
-import router from '@/V2/Core/Router/router';
+import router from '@/Core/Router/router';
 
 export default function AppWithToasts() {
     const {t} = useLaravelReactI18n();
diff --git a/resources/js/Components/FeedItemCard.tsx b/resources/js/Components/FeedItemCard.tsx
index f92db28d..59c09cb4 100644
--- a/resources/js/Components/FeedItemCard.tsx
+++ b/resources/js/Components/FeedItemCard.tsx
@@ -9,12 +9,12 @@ import EyeSlashOutlineIcon from '@/Icons/EyeSlashOutlineIcon';
 import formatDateTime from '@/Utils/formatDateTime';
 import CalendarDaysSolidIcon from '@/Icons/CalendarDaysSolidIcon';
 import FeedItem from '@/types/generated/Models/FeedItem';
-import request from '@/V2/request';
-import TotalNumberOfFeedItemsContext from '@/V2/Contexts/TotalNumberOfFeedItemsContext';
+import request from '@/Core/request';
+import TotalNumberOfFeedItemsContext from '@/Contexts/TotalNumberOfFeedItemsContext';
 
 export default function FeedItemCard({hueRotationIndex, feedItem}: { hueRotationIndex: number; feedItem: FeedItem; }) {
     const {t} = useLaravelReactI18n();
-    const {totalNumberOfFeedItems, setTotalNumberOfFeedItems} = useContext(TotalNumberOfFeedItemsContext);
+    const {setTotalNumberOfFeedItems} = useContext(TotalNumberOfFeedItemsContext);
     const [internalFeedItem, setInternalFeedItem] = useState(feedItem);
     const [processing, setProcessing] = useState(false);
 
diff --git a/resources/js/V2/Contexts/AuthContext.ts b/resources/js/Contexts/AuthContext.ts
similarity index 75%
rename from resources/js/V2/Contexts/AuthContext.ts
rename to resources/js/Contexts/AuthContext.ts
index 24de08cf..8d3932ed 100644
--- a/resources/js/V2/Contexts/AuthContext.ts
+++ b/resources/js/Contexts/AuthContext.ts
@@ -1,5 +1,5 @@
 import {createContext} from 'react';
-import AuthContextType from '@/V2/types/AuthContextType';
+import AuthContextType from '@/types/AuthContextType';
 import noop from '@/Utils/noop';
 
 const AuthContext = createContext<AuthContextType>({user: null, setUser: noop});
diff --git a/resources/js/Contexts/TotalNumberOfFeedItemsContext.ts b/resources/js/Contexts/TotalNumberOfFeedItemsContext.ts
index 33ffd815..88017765 100644
--- a/resources/js/Contexts/TotalNumberOfFeedItemsContext.ts
+++ b/resources/js/Contexts/TotalNumberOfFeedItemsContext.ts
@@ -1,11 +1,7 @@
 import {createContext} from 'react';
+import TotalNumberOfFeedItemsContextType from '@/types/TotalNumberOfFeedItemsContextType';
 import noop from '@/Utils/noop';
 
-type TotalNumberOfFeedItemsContextType = {
-    totalNumberOfFeedItems: number;
-    setTotalNumberOfFeedItems: (value: number) => void;
-};
-
 const TotalNumberOfFeedItemsContext = createContext<TotalNumberOfFeedItemsContextType>({
     totalNumberOfFeedItems: 0,
     setTotalNumberOfFeedItems: noop,
diff --git a/resources/js/V2/Core/AuthProvider.tsx b/resources/js/Core/AuthProvider.tsx
similarity index 87%
rename from resources/js/V2/Core/AuthProvider.tsx
rename to resources/js/Core/AuthProvider.tsx
index abebbd82..a86db5ec 100644
--- a/resources/js/V2/Core/AuthProvider.tsx
+++ b/resources/js/Core/AuthProvider.tsx
@@ -1,6 +1,6 @@
 import {ReactElement, useState} from 'react';
 import User from '@/types/generated/Models/User';
-import AuthContext from '@/V2/Contexts/AuthContext';
+import AuthContext from '@/Contexts/AuthContext';
 
 export default function AuthProvider({children}: { children: ReactElement; }) {
     const [user, setUser] = useState<User | null>(null);
diff --git a/resources/js/V2/Core/AuthenticatedLayout.tsx b/resources/js/Core/AuthenticatedLayout.tsx
similarity index 97%
rename from resources/js/V2/Core/AuthenticatedLayout.tsx
rename to resources/js/Core/AuthenticatedLayout.tsx
index f566f24d..6f9544be 100644
--- a/resources/js/V2/Core/AuthenticatedLayout.tsx
+++ b/resources/js/Core/AuthenticatedLayout.tsx
@@ -1,13 +1,13 @@
 import {Outlet, useLoaderData, useLocation, useMatches} from 'react-router-dom';
-import Breadcrumbs from '@/V2/Core/Breadcrumbs';
+import Breadcrumbs from '@/Core/Breadcrumbs';
 import {Fragment, useEffect, useState} from 'react';
-import MatchWithHandle from '@/V2/types/MatchWithHandle';
+import MatchWithHandle from '@/types/MatchWithHandle';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import Dropdown from '@/Components/Dropdown';
 import DropdownArrowIcon from '@/Icons/DropdownArrowIcon';
-import useAuth from '@/V2/Hooks/useAuth';
+import useAuth from '@/Hooks/useAuth';
 import User from '@/types/generated/Models/User';
-import request from '@/V2/request';
+import request from '@/Core/request';
 import {Transition} from '@headlessui/react';
 import clsx from 'clsx';
 
diff --git a/resources/js/V2/Core/Breadcrumbs.tsx b/resources/js/Core/Breadcrumbs.tsx
similarity index 95%
rename from resources/js/V2/Core/Breadcrumbs.tsx
rename to resources/js/Core/Breadcrumbs.tsx
index 0ce4346e..b269edc2 100644
--- a/resources/js/V2/Core/Breadcrumbs.tsx
+++ b/resources/js/Core/Breadcrumbs.tsx
@@ -1,8 +1,8 @@
 import {Link} from 'react-router-dom';
 import slug from 'slug';
 import {Fragment, useEffect, useRef} from 'react';
-import useBreadcrumbs from '@/V2/Hooks/useBreadcrumbs';
-import Breadcrumb from '@/V2/types/Breadcrumb';
+import useBreadcrumbs from '@/Hooks/useBreadcrumbs';
+import Breadcrumb from '@/types/Breadcrumb';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 
 const LinkBreadcrumb = ({breadcrumb}: { breadcrumb: Breadcrumb; }) => {
diff --git a/resources/js/V2/Core/ErrorPage.tsx b/resources/js/Core/ErrorPage.tsx
similarity index 100%
rename from resources/js/V2/Core/ErrorPage.tsx
rename to resources/js/Core/ErrorPage.tsx
diff --git a/resources/js/V2/Core/NotFoundPage.tsx b/resources/js/Core/NotFoundPage.tsx
similarity index 100%
rename from resources/js/V2/Core/NotFoundPage.tsx
rename to resources/js/Core/NotFoundPage.tsx
diff --git a/resources/js/V2/Core/Router/Actions/createCategoryAction.ts b/resources/js/Core/Router/Actions/createCategoryAction.ts
similarity index 76%
rename from resources/js/V2/Core/Router/Actions/createCategoryAction.ts
rename to resources/js/Core/Router/Actions/createCategoryAction.ts
index dad6f1dd..c1da5a8f 100644
--- a/resources/js/V2/Core/Router/Actions/createCategoryAction.ts
+++ b/resources/js/Core/Router/Actions/createCategoryAction.ts
@@ -1,6 +1,6 @@
-import request from '@/V2/request';
+import request from '@/Core/request';
 import {ActionFunction} from '@remix-run/router/utils';
-import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
+import handleRequestValidationError from '@/Core/Router/Helpers/handleRequestValidationError';
 import toast from 'react-hot-toast';
 
 const createCategoryAction: ActionFunction = async ({request: req}) => {
diff --git a/resources/js/V2/Core/Router/Actions/createFeedAction.ts b/resources/js/Core/Router/Actions/createFeedAction.ts
similarity index 79%
rename from resources/js/V2/Core/Router/Actions/createFeedAction.ts
rename to resources/js/Core/Router/Actions/createFeedAction.ts
index a3555745..fff99fc5 100644
--- a/resources/js/V2/Core/Router/Actions/createFeedAction.ts
+++ b/resources/js/Core/Router/Actions/createFeedAction.ts
@@ -1,6 +1,6 @@
-import request from '@/V2/request';
+import request from '@/Core/request';
 import {ActionFunction} from '@remix-run/router/utils';
-import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
+import handleRequestValidationError from '@/Core/Router/Helpers/handleRequestValidationError';
 import toast from 'react-hot-toast';
 
 const createFeedAction: ActionFunction = async ({request: req}) => {
diff --git a/resources/js/V2/Core/Router/Actions/editCategoryAction.ts b/resources/js/Core/Router/Actions/editCategoryAction.ts
similarity index 82%
rename from resources/js/V2/Core/Router/Actions/editCategoryAction.ts
rename to resources/js/Core/Router/Actions/editCategoryAction.ts
index f66196d5..293b882c 100644
--- a/resources/js/V2/Core/Router/Actions/editCategoryAction.ts
+++ b/resources/js/Core/Router/Actions/editCategoryAction.ts
@@ -1,6 +1,6 @@
-import request from '@/V2/request';
+import request from '@/Core/request';
 import {ActionFunction} from '@remix-run/router/utils';
-import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
+import handleRequestValidationError from '@/Core/Router/Helpers/handleRequestValidationError';
 import toast from 'react-hot-toast';
 
 const editCategoryAction: ActionFunction = async ({params, request: req}) => {
diff --git a/resources/js/V2/Core/Router/Actions/editFeedAction.ts b/resources/js/Core/Router/Actions/editFeedAction.ts
similarity index 84%
rename from resources/js/V2/Core/Router/Actions/editFeedAction.ts
rename to resources/js/Core/Router/Actions/editFeedAction.ts
index 2af72f26..bbd8f5b4 100644
--- a/resources/js/V2/Core/Router/Actions/editFeedAction.ts
+++ b/resources/js/Core/Router/Actions/editFeedAction.ts
@@ -1,6 +1,6 @@
-import request from '@/V2/request';
+import request from '@/Core/request';
 import {ActionFunction} from '@remix-run/router/utils';
-import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
+import handleRequestValidationError from '@/Core/Router/Helpers/handleRequestValidationError';
 import toast from 'react-hot-toast';
 
 const editFeedAction: ActionFunction = async ({params, request: req}) => {
diff --git a/resources/js/V2/Core/Router/Actions/profileAction.ts b/resources/js/Core/Router/Actions/profileAction.ts
similarity index 89%
rename from resources/js/V2/Core/Router/Actions/profileAction.ts
rename to resources/js/Core/Router/Actions/profileAction.ts
index c2dacb85..a994061f 100644
--- a/resources/js/V2/Core/Router/Actions/profileAction.ts
+++ b/resources/js/Core/Router/Actions/profileAction.ts
@@ -1,6 +1,6 @@
-import request from '@/V2/request';
+import request from '@/Core/request';
 import {ActionFunction} from '@remix-run/router/utils';
-import handleRequestValidationError from '@/V2/Core/Router/Helpers/handleRequestValidationError';
+import handleRequestValidationError from '@/Core/Router/Helpers/handleRequestValidationError';
 import {redirect} from 'react-router-dom';
 import toast from 'react-hot-toast';
 
diff --git a/resources/js/V2/Core/Router/Actions/usersAction.ts b/resources/js/Core/Router/Actions/usersAction.ts
similarity index 92%
rename from resources/js/V2/Core/Router/Actions/usersAction.ts
rename to resources/js/Core/Router/Actions/usersAction.ts
index bc43de8a..690eab71 100644
--- a/resources/js/V2/Core/Router/Actions/usersAction.ts
+++ b/resources/js/Core/Router/Actions/usersAction.ts
@@ -1,4 +1,4 @@
-import request from '@/V2/request';
+import request from '@/Core/request';
 import {ActionFunction} from '@remix-run/router/utils';
 import {redirect} from 'react-router-dom';
 import toast from 'react-hot-toast';
diff --git a/resources/js/V2/Core/Router/Helpers/handleRequestValidationError.ts b/resources/js/Core/Router/Helpers/handleRequestValidationError.ts
similarity index 90%
rename from resources/js/V2/Core/Router/Helpers/handleRequestValidationError.ts
rename to resources/js/Core/Router/Helpers/handleRequestValidationError.ts
index 664e6340..9f404e43 100644
--- a/resources/js/V2/Core/Router/Helpers/handleRequestValidationError.ts
+++ b/resources/js/Core/Router/Helpers/handleRequestValidationError.ts
@@ -1,5 +1,5 @@
 import {HTTPError, ResponsePromise} from 'ky';
-import ValidationErrors from '@/V2/types/ValidationErrors';
+import ValidationErrors from '@/types/ValidationErrors';
 import {redirect} from 'react-router-dom';
 
 export default async function handleRequestValidationError(requestFn: () => ResponsePromise, to?: string) {
diff --git a/resources/js/V2/Core/Router/Loaders/categoriesLoader.ts b/resources/js/Core/Router/Loaders/categoriesLoader.ts
similarity index 68%
rename from resources/js/V2/Core/Router/Loaders/categoriesLoader.ts
rename to resources/js/Core/Router/Loaders/categoriesLoader.ts
index 4fccde75..0c34aa97 100644
--- a/resources/js/V2/Core/Router/Loaders/categoriesLoader.ts
+++ b/resources/js/Core/Router/Loaders/categoriesLoader.ts
@@ -1,6 +1,6 @@
-import request from '@/V2/request';
+import request from '@/Core/request';
 import {LoaderFunction} from '@remix-run/router/utils';
-import CategoriesLoaderType from '@/V2/types/CategoriesLoaderType';
+import CategoriesLoaderType from '@/types/CategoriesLoaderType';
 
 const categoriesLoader: LoaderFunction = async () => {
     return await request('/api/categories').json<CategoriesLoaderType>();
diff --git a/resources/js/V2/Core/Router/Loaders/createFeedLoader.ts b/resources/js/Core/Router/Loaders/createFeedLoader.ts
similarity index 68%
rename from resources/js/V2/Core/Router/Loaders/createFeedLoader.ts
rename to resources/js/Core/Router/Loaders/createFeedLoader.ts
index 867c57df..44efb9ef 100644
--- a/resources/js/V2/Core/Router/Loaders/createFeedLoader.ts
+++ b/resources/js/Core/Router/Loaders/createFeedLoader.ts
@@ -1,6 +1,6 @@
-import request from '@/V2/request';
+import request from '@/Core/request';
 import {LoaderFunction} from '@remix-run/router/utils';
-import CreateFeedLoaderType from '@/V2/types/CreateFeedLoaderType';
+import CreateFeedLoaderType from '@/types/CreateFeedLoaderType';
 
 const createFeedLoader: LoaderFunction = async () => {
     return await request('/api/feeds/create').json<CreateFeedLoaderType>();
diff --git a/resources/js/V2/Core/Router/Loaders/editCategoryLoader.ts b/resources/js/Core/Router/Loaders/editCategoryLoader.ts
similarity index 59%
rename from resources/js/V2/Core/Router/Loaders/editCategoryLoader.ts
rename to resources/js/Core/Router/Loaders/editCategoryLoader.ts
index 2a268cd4..196d2915 100644
--- a/resources/js/V2/Core/Router/Loaders/editCategoryLoader.ts
+++ b/resources/js/Core/Router/Loaders/editCategoryLoader.ts
@@ -1,7 +1,6 @@
-import request from '@/V2/request';
+import request from '@/Core/request';
 import {LoaderFunction} from '@remix-run/router/utils';
-import CategoriesLoaderType from '@/V2/types/CategoriesLoaderType';
-import EditCategoryLoaderType from '@/V2/types/EditCategoryLoaderType';
+import EditCategoryLoaderType from '@/types/EditCategoryLoaderType';
 
 const editCategoryLoader: LoaderFunction = async ({params}) => {
     return await request(`/api/categories/${params.categoryId}/edit`).json<EditCategoryLoaderType>();
diff --git a/resources/js/V2/Core/Router/Loaders/editFeedLoader.ts b/resources/js/Core/Router/Loaders/editFeedLoader.ts
similarity index 70%
rename from resources/js/V2/Core/Router/Loaders/editFeedLoader.ts
rename to resources/js/Core/Router/Loaders/editFeedLoader.ts
index 757be191..6e6750ab 100644
--- a/resources/js/V2/Core/Router/Loaders/editFeedLoader.ts
+++ b/resources/js/Core/Router/Loaders/editFeedLoader.ts
@@ -1,6 +1,6 @@
-import request from '@/V2/request';
+import request from '@/Core/request';
 import {LoaderFunction} from '@remix-run/router/utils';
-import EditFeedLoaderType from '@/V2/types/EditFeddLoaderType';
+import EditFeedLoaderType from '@/types/EditFeddLoaderType';
 
 const editFeedLoader: LoaderFunction = async ({params}) => {
     return await request(`/api/feeds/${params.feedId}/edit`).json<EditFeedLoaderType>();
diff --git a/resources/js/V2/Core/Router/Loaders/feedItemsLoader.ts b/resources/js/Core/Router/Loaders/feedItemsLoader.ts
similarity index 86%
rename from resources/js/V2/Core/Router/Loaders/feedItemsLoader.ts
rename to resources/js/Core/Router/Loaders/feedItemsLoader.ts
index 687df058..14958022 100644
--- a/resources/js/V2/Core/Router/Loaders/feedItemsLoader.ts
+++ b/resources/js/Core/Router/Loaders/feedItemsLoader.ts
@@ -1,6 +1,6 @@
-import request from '@/V2/request';
+import request from '@/Core/request';
 import {LoaderFunction} from '@remix-run/router/utils';
-import FeedItemsLoaderType from '@/V2/types/FeedItemsLoaderType';
+import FeedItemsLoaderType from '@/types/FeedItemsLoaderType';
 
 const feedItemsLoader: LoaderFunction = async ({request: req}) => {
     const searchParams = new URL(req.url).searchParams;
diff --git a/resources/js/V2/Core/Router/Loaders/feedsLoader.ts b/resources/js/Core/Router/Loaders/feedsLoader.ts
similarity index 68%
rename from resources/js/V2/Core/Router/Loaders/feedsLoader.ts
rename to resources/js/Core/Router/Loaders/feedsLoader.ts
index 8d668bed..73c375e0 100644
--- a/resources/js/V2/Core/Router/Loaders/feedsLoader.ts
+++ b/resources/js/Core/Router/Loaders/feedsLoader.ts
@@ -1,6 +1,6 @@
-import request from '@/V2/request';
+import request from '@/Core/request';
 import {LoaderFunction} from '@remix-run/router/utils';
-import FeedsLoaderType from '@/V2/types/FeedsLoaderType';
+import FeedsLoaderType from '@/types/FeedsLoaderType';
 
 const feedsLoader: LoaderFunction = async () => {
     return await request('/api/feeds').json<FeedsLoaderType>();
diff --git a/resources/js/V2/Core/Router/Loaders/layoutLoader.ts b/resources/js/Core/Router/Loaders/layoutLoader.ts
similarity index 93%
rename from resources/js/V2/Core/Router/Loaders/layoutLoader.ts
rename to resources/js/Core/Router/Loaders/layoutLoader.ts
index 0a9f6004..75e52478 100644
--- a/resources/js/V2/Core/Router/Loaders/layoutLoader.ts
+++ b/resources/js/Core/Router/Loaders/layoutLoader.ts
@@ -1,4 +1,4 @@
-import request from '@/V2/request';
+import request from '@/Core/request';
 import User from '@/types/generated/Models/User';
 import {LoaderFunction} from '@remix-run/router/utils';
 import {HTTPError} from 'ky';
diff --git a/resources/js/V2/Core/Router/Loaders/profileLoader.ts b/resources/js/Core/Router/Loaders/profileLoader.ts
similarity index 68%
rename from resources/js/V2/Core/Router/Loaders/profileLoader.ts
rename to resources/js/Core/Router/Loaders/profileLoader.ts
index a8ce02b6..103f6882 100644
--- a/resources/js/V2/Core/Router/Loaders/profileLoader.ts
+++ b/resources/js/Core/Router/Loaders/profileLoader.ts
@@ -1,6 +1,6 @@
-import request from '@/V2/request';
+import request from '@/Core/request';
 import {LoaderFunction} from '@remix-run/router/utils';
-import ProfileLoaderType from '@/V2/types/ProfileLoaderType';
+import ProfileLoaderType from '@/types/ProfileLoaderType';
 
 const profileLoader: LoaderFunction = async () => {
     return await request('/api/profile').json<ProfileLoaderType>();
diff --git a/resources/js/V2/Core/Router/Loaders/usersLoader.ts b/resources/js/Core/Router/Loaders/usersLoader.ts
similarity index 85%
rename from resources/js/V2/Core/Router/Loaders/usersLoader.ts
rename to resources/js/Core/Router/Loaders/usersLoader.ts
index fa2f6ac5..068396da 100644
--- a/resources/js/V2/Core/Router/Loaders/usersLoader.ts
+++ b/resources/js/Core/Router/Loaders/usersLoader.ts
@@ -1,6 +1,6 @@
-import request from '@/V2/request';
+import request from '@/Core/request';
 import {LoaderFunction} from '@remix-run/router/utils';
-import UsersLoaderType from '@/V2/types/UsersLoaderType';
+import UsersLoaderType from '@/types/UsersLoaderType';
 import {redirect} from 'react-router-dom';
 import {HTTPError} from 'ky';
 
diff --git a/resources/js/V2/Core/Router/router.tsx b/resources/js/Core/Router/router.tsx
similarity index 61%
rename from resources/js/V2/Core/Router/router.tsx
rename to resources/js/Core/Router/router.tsx
index d3da7f6f..9462dd8c 100644
--- a/resources/js/V2/Core/Router/router.tsx
+++ b/resources/js/Core/Router/router.tsx
@@ -1,35 +1,35 @@
 import {createBrowserRouter, redirect} from 'react-router-dom';
-import categoriesLoader from '@/V2/Core/Router/Loaders/categoriesLoader';
-import AuthenticatedLayout from '@/V2/Core/AuthenticatedLayout';
-import CategoriesIndexPage from '@/V2/Pages/Categories/CategoriesIndexPage';
-import CreateCategoryPage from '@/V2/Pages/Categories/CreateCategoryPage';
-import RouteHandle from '@/V2/types/RouteHandle';
-import EditCategoryPage from '@/V2/Pages/Categories/EditCategoryPage';
-import editCategoryLoader from '@/V2/Core/Router/Loaders/editCategoryLoader';
-import layoutLoader from '@/V2/Core/Router/Loaders/layoutLoader';
-import editCategoryAction from '@/V2/Core/Router/Actions/editCategoryAction';
-import ErrorPage from '@/V2/Core/ErrorPage';
-import AuthProvider from '@/V2/Core/AuthProvider';
-import createCategoryAction from '@/V2/Core/Router/Actions/createCategoryAction';
-import FeedsIndexPage from '@/V2/Pages/Feeds/FeedsIndexPage';
-import feedsLoader from '@/V2/Core/Router/Loaders/feedsLoader';
-import CreateFeedPage from '@/V2/Pages/Feeds/CreateFeedPage';
-import createFeedLoader from '@/V2/Core/Router/Loaders/createFeedLoader';
-import createFeedAction from '@/V2/Core/Router/Actions/createFeedAction';
-import EditFeedPage from '@/V2/Pages/Feeds/EditFeedPage';
-import editFeedLoader from '@/V2/Core/Router/Loaders/editFeedLoader';
-import editFeedAction from '@/V2/Core/Router/Actions/editFeedAction';
-import Home from '@/V2/Pages/Home';
-import feedItemsLoader from '@/V2/Core/Router/Loaders/feedItemsLoader';
-import TotalNumberOfFeedItemsProvider from '@/V2/Core/TotalNumberOfFeedItemsProvider';
-import Admin from '@/V2/Pages/Admin/Admin';
-import usersLoader from '@/V2/Core/Router/Loaders/usersLoader';
-import UsersIndexPage from '@/V2/Pages/Admin/Users/UsersIndexPage';
-import usersAction from '@/V2/Core/Router/Actions/usersAction';
-import ProfilePage from '@/V2/Pages/ProfilePage';
-import profileLoader from '@/V2/Core/Router/Loaders/profileLoader';
-import profileAction from '@/V2/Core/Router/Actions/profileAction';
-import NotFoundPage from '@/V2/Core/NotFoundPage';
+import categoriesLoader from '@/Core/Router/Loaders/categoriesLoader';
+import AuthenticatedLayout from '@/Core/AuthenticatedLayout';
+import CategoriesIndexPage from '@/Pages/Categories/CategoriesIndexPage';
+import CreateCategoryPage from '@/Pages/Categories/CreateCategoryPage';
+import RouteHandle from '@/types/RouteHandle';
+import EditCategoryPage from '@/Pages/Categories/EditCategoryPage';
+import editCategoryLoader from '@/Core/Router/Loaders/editCategoryLoader';
+import layoutLoader from '@/Core/Router/Loaders/layoutLoader';
+import editCategoryAction from '@/Core/Router/Actions/editCategoryAction';
+import ErrorPage from '@/Core/ErrorPage';
+import AuthProvider from '@/Core/AuthProvider';
+import createCategoryAction from '@/Core/Router/Actions/createCategoryAction';
+import FeedsIndexPage from '@/Pages/Feeds/FeedsIndexPage';
+import feedsLoader from '@/Core/Router/Loaders/feedsLoader';
+import CreateFeedPage from '@/Pages/Feeds/CreateFeedPage';
+import createFeedLoader from '@/Core/Router/Loaders/createFeedLoader';
+import createFeedAction from '@/Core/Router/Actions/createFeedAction';
+import EditFeedPage from '@/Pages/Feeds/EditFeedPage';
+import editFeedLoader from '@/Core/Router/Loaders/editFeedLoader';
+import editFeedAction from '@/Core/Router/Actions/editFeedAction';
+import Home from '@/Pages/Home';
+import feedItemsLoader from '@/Core/Router/Loaders/feedItemsLoader';
+import TotalNumberOfFeedItemsProvider from '@/Core/TotalNumberOfFeedItemsProvider';
+import Admin from '@/Pages/Admin/Admin';
+import usersLoader from '@/Core/Router/Loaders/usersLoader';
+import UsersIndexPage from '@/Pages/Admin/Users/UsersIndexPage';
+import usersAction from '@/Core/Router/Actions/usersAction';
+import ProfilePage from '@/Pages/ProfilePage';
+import profileLoader from '@/Core/Router/Loaders/profileLoader';
+import profileAction from '@/Core/Router/Actions/profileAction';
+import NotFoundPage from '@/Core/NotFoundPage';
 
 const router = createBrowserRouter([
     {
diff --git a/resources/js/V2/Core/TotalNumberOfFeedItemsProvider.tsx b/resources/js/Core/TotalNumberOfFeedItemsProvider.tsx
similarity index 82%
rename from resources/js/V2/Core/TotalNumberOfFeedItemsProvider.tsx
rename to resources/js/Core/TotalNumberOfFeedItemsProvider.tsx
index bef08136..6caea720 100644
--- a/resources/js/V2/Core/TotalNumberOfFeedItemsProvider.tsx
+++ b/resources/js/Core/TotalNumberOfFeedItemsProvider.tsx
@@ -1,5 +1,5 @@
 import {ReactElement, useState} from 'react';
-import TotalNumberOfFeedItemsContext from '@/V2/Contexts/TotalNumberOfFeedItemsContext';
+import TotalNumberOfFeedItemsContext from '@/Contexts/TotalNumberOfFeedItemsContext';
 
 export default function TotalNumberOfFeedItemsProvider({children}: { children: ReactElement; }) {
     const [totalNumberOfFeedItems, setTotalNumberOfFeedItems] = useState(0);
diff --git a/resources/js/V2/request.ts b/resources/js/Core/request.ts
similarity index 100%
rename from resources/js/V2/request.ts
rename to resources/js/Core/request.ts
diff --git a/resources/js/V2/Hooks/useAuth.ts b/resources/js/Hooks/useAuth.ts
similarity index 67%
rename from resources/js/V2/Hooks/useAuth.ts
rename to resources/js/Hooks/useAuth.ts
index e1d6e0cd..eb23b269 100644
--- a/resources/js/V2/Hooks/useAuth.ts
+++ b/resources/js/Hooks/useAuth.ts
@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import AuthContext from '@/V2/Contexts/AuthContext';
+import AuthContext from '@/Contexts/AuthContext';
 
 export default function useAuth() {
     return useContext(AuthContext);
diff --git a/resources/js/V2/Hooks/useBreadcrumbs.ts b/resources/js/Hooks/useBreadcrumbs.ts
similarity index 81%
rename from resources/js/V2/Hooks/useBreadcrumbs.ts
rename to resources/js/Hooks/useBreadcrumbs.ts
index 2a8512e4..4ac6c74c 100644
--- a/resources/js/V2/Hooks/useBreadcrumbs.ts
+++ b/resources/js/Hooks/useBreadcrumbs.ts
@@ -1,6 +1,6 @@
 import {useMatches} from 'react-router-dom';
-import Breadcrumb from '@/V2/types/Breadcrumb';
-import RouteHandle from '@/V2/types/RouteHandle';
+import Breadcrumb from '@/types/Breadcrumb';
+import RouteHandle from '@/types/RouteHandle';
 
 export default function useBreadcrumbs() {
     const matches = useMatches();
diff --git a/resources/js/V2/Hooks/usePageModal.ts b/resources/js/Hooks/usePageModal.ts
similarity index 89%
rename from resources/js/V2/Hooks/usePageModal.ts
rename to resources/js/Hooks/usePageModal.ts
index 320e7ceb..6c3c1282 100644
--- a/resources/js/V2/Hooks/usePageModal.ts
+++ b/resources/js/Hooks/usePageModal.ts
@@ -1,8 +1,8 @@
 import {useLocation, useNavigate} from 'react-router-dom';
 import {useEffect, useState} from 'react';
-import ValidationErrors from '@/V2/types/ValidationErrors';
+import ValidationErrors from '@/types/ValidationErrors';
 import {modalLeaveDuration} from '@/Components/Modal/Modal';
-import wait from '@/V2/Utils/wait';
+import wait from '@/Utils/wait';
 
 export default function usePageModal(errors: ValidationErrors | null, to: string) {
     const [show, setShow] = useState(true);
diff --git a/resources/js/Pages/Auth/ConfirmPassword.tsx b/resources/js/Inertia/Pages/Auth/ConfirmPassword.tsx
similarity index 100%
rename from resources/js/Pages/Auth/ConfirmPassword.tsx
rename to resources/js/Inertia/Pages/Auth/ConfirmPassword.tsx
diff --git a/resources/js/Pages/Auth/ForgotPassword.tsx b/resources/js/Inertia/Pages/Auth/ForgotPassword.tsx
similarity index 100%
rename from resources/js/Pages/Auth/ForgotPassword.tsx
rename to resources/js/Inertia/Pages/Auth/ForgotPassword.tsx
diff --git a/resources/js/Pages/Auth/Login.tsx b/resources/js/Inertia/Pages/Auth/Login.tsx
similarity index 100%
rename from resources/js/Pages/Auth/Login.tsx
rename to resources/js/Inertia/Pages/Auth/Login.tsx
diff --git a/resources/js/Pages/Auth/Register.tsx b/resources/js/Inertia/Pages/Auth/Register.tsx
similarity index 100%
rename from resources/js/Pages/Auth/Register.tsx
rename to resources/js/Inertia/Pages/Auth/Register.tsx
diff --git a/resources/js/Pages/Auth/ResetPassword.tsx b/resources/js/Inertia/Pages/Auth/ResetPassword.tsx
similarity index 100%
rename from resources/js/Pages/Auth/ResetPassword.tsx
rename to resources/js/Inertia/Pages/Auth/ResetPassword.tsx
diff --git a/resources/js/Pages/Auth/VerifyEmail.tsx b/resources/js/Inertia/Pages/Auth/VerifyEmail.tsx
similarity index 100%
rename from resources/js/Pages/Auth/VerifyEmail.tsx
rename to resources/js/Inertia/Pages/Auth/VerifyEmail.tsx
diff --git a/resources/js/Pages/Welcome.tsx b/resources/js/Inertia/Pages/Welcome.tsx
similarity index 100%
rename from resources/js/Pages/Welcome.tsx
rename to resources/js/Inertia/Pages/Welcome.tsx
diff --git a/resources/js/Inertia/app.tsx b/resources/js/Inertia/app.tsx
new file mode 100644
index 00000000..ce37aa55
--- /dev/null
+++ b/resources/js/Inertia/app.tsx
@@ -0,0 +1,30 @@
+import './bootstrap';
+import '../css/app.css';
+
+import {createRoot} from 'react-dom/client';
+import {createInertiaApp} from '@inertiajs/react';
+import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
+import {LaravelReactI18nProvider} from 'laravel-react-i18n';
+import getBrowserLocale from '@/Utils/getBrowserLocale';
+import AppWithLoadedTranslations from '@/Components/AppWithLoadedTranslations';
+
+window.appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
+
+void createInertiaApp({
+    title: (title: string): string => `${title} - ${window.appName}`,
+    resolve: (name: string) => resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
+    setup({el, App, props}) {
+        createRoot(el).render(
+            <LaravelReactI18nProvider
+                locale={getBrowserLocale()}
+                fallbackLocale="en"
+                files={import.meta.glob('/lang/*.json', {eager: true})}
+            >
+                <AppWithLoadedTranslations app={App} {...props}/>
+            </LaravelReactI18nProvider>
+        );
+    },
+    progress: {
+        color: '#7c3aed',
+    },
+});
diff --git a/resources/js/V2/Pages/Admin/Admin.tsx b/resources/js/Pages/Admin/Admin.tsx
similarity index 88%
rename from resources/js/V2/Pages/Admin/Admin.tsx
rename to resources/js/Pages/Admin/Admin.tsx
index 3a55175b..219210b6 100644
--- a/resources/js/V2/Pages/Admin/Admin.tsx
+++ b/resources/js/Pages/Admin/Admin.tsx
@@ -1,5 +1,5 @@
 import {Outlet, useNavigate} from 'react-router-dom';
-import useAuth from '@/V2/Hooks/useAuth';
+import useAuth from '@/Hooks/useAuth';
 import {useEffect} from 'react';
 
 export default function Admin() {
diff --git a/resources/js/Pages/Admin/Users/Index.tsx b/resources/js/Pages/Admin/Users/Index.tsx
deleted file mode 100644
index 7e3f0295..00000000
--- a/resources/js/Pages/Admin/Users/Index.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import {Head, useForm} from '@inertiajs/react';
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
-import Header from '@/Components/Page/Header';
-import {useLaravelReactI18n} from 'laravel-react-i18n';
-import {PageProps} from '@/types';
-import Table from '@/Components/Table';
-import Card from '@/Components/Card';
-import formatDateTime from '@/Utils/formatDateTime';
-import {DangerButton} from '@/Components/Button';
-import {RouteParams} from 'ziggy-js';
-import User from '@/types/generated/Models/User';
-
-type UserWithStats = User & {
-    feeds_count: number;
-    unread_feed_items_count: number;
-};
-
-export default function Index({users, ...props}: PageProps & { users: UserWithStats[]; }) {
-    const {t} = useLaravelReactI18n();
-    const {delete: destroy, processing: deleteProcessing} = useForm();
-
-    const handleDelete = (user: UserWithStats) => () => {
-        destroy(route('admin.users.destroy', user as unknown as RouteParams<'admin.users.destroy'>));
-    };
-
-    return (
-        <AuthenticatedLayout
-            auth={props.auth}
-            errors={props.errors}
-            header={<Header>{t('Manage users')}</Header>}
-        >
-            <Head title={t('Manage users')}/>
-
-            <Card>
-                <Table>
-                    <thead>
-                        <Table.HeadingRow>
-                            <Table.HeadingCell>
-                                <span className="hidden lg:inline">{t('validation.attributes.name')}</span>
-                                <span className="lg:hidden">{t('Users')}</span>
-                            </Table.HeadingCell>
-                            <Table.HeadingCell hideOnMobile>{t('validation.attributes.email_verified_at')}</Table.HeadingCell>
-                            <Table.HeadingCell hideOnMobile>{t('validation.attributes.is_admin')}</Table.HeadingCell>
-                            <Table.HeadingCell hideOnMobile>{t('Number of feeds')}</Table.HeadingCell>
-                            <Table.HeadingCell hideOnMobile>{t('Number of unread feed items')}</Table.HeadingCell>
-                            <Table.HeadingCell hideOnMobile><span className="sr-only">{t('Actions')}</span></Table.HeadingCell>
-                        </Table.HeadingRow>
-                    </thead>
-
-                    <tbody>
-                        {users.map((user) => (
-                            <Table.Row key={user.id}>
-                                <Table.Cell highlighted>
-                                    <div className="flex space-x-1">
-                                        <div className="text-muted">
-                                            <span className="select-none">#</span>
-                                            <span>{user.id}</span>
-                                        </div>
-
-                                        <div>{user.name}</div>
-                                    </div>
-
-                                    <Table.MobileContainer>
-                                        <Table.MobileText label={t('validation.attributes.email_verified_at')}>
-                                            {user.email_verified_at ? formatDateTime(user.email_verified_at) : '/'}
-                                        </Table.MobileText>
-
-                                        <Table.MobileText label={t('validation.attributes.is_admin')}>
-                                            {user.is_admin ? t('Yes') : t('No')}
-                                        </Table.MobileText>
-
-                                        <Table.MobileText label={t('Number of feeds')}>
-                                            {user.feeds_count}
-                                        </Table.MobileText>
-
-                                        <Table.MobileText label={t('Number of unread feed items')}>
-                                            {user.unread_feed_items_count}
-                                        </Table.MobileText>
-                                    </Table.MobileContainer>
-
-                                    <div className="lg:hidden pt-4">
-                                        {user.id !== props.auth.user.id && (
-                                            <DangerButton
-                                                confirmTitle={t('Do you really want to delete the user “:name”?', {name: user.name})}
-                                                confirmSubmitTitle={t('Delete user')}
-                                                confirmCancelTitle={t('Cancel')}
-                                                onClick={handleDelete(user)}
-                                                disabled={deleteProcessing}
-                                            >
-                                                {t('Delete')}
-                                            </DangerButton>
-                                        )}
-                                    </div>
-                                </Table.Cell>
-                                <Table.Cell hideOnMobile>{user.email_verified_at ? formatDateTime(user.email_verified_at) : '/'}</Table.Cell>
-                                <Table.Cell hideOnMobile>{user.is_admin ? t('Yes') : t('No')}</Table.Cell>
-                                <Table.Cell hideOnMobile>{user.feeds_count}</Table.Cell>
-                                <Table.Cell hideOnMobile>{user.unread_feed_items_count}</Table.Cell>
-                                <Table.Cell hideOnMobile>
-                                    {user.id !== props.auth.user.id && (
-                                        <DangerButton
-                                            confirmTitle={t('Do you really want to delete the user “:name”?', {name: user.name})}
-                                            confirmSubmitTitle={t('Delete user')}
-                                            confirmCancelTitle={t('Cancel')}
-                                            onClick={handleDelete(user)}
-                                            disabled={deleteProcessing}
-                                        >
-                                            {t('Delete')}
-                                        </DangerButton>
-                                    )}
-                                </Table.Cell>
-                            </Table.Row>
-                        ))}
-                    </tbody>
-                </Table>
-            </Card>
-        </AuthenticatedLayout>
-    );
-}
diff --git a/resources/js/V2/Pages/Admin/Users/UsersIndexPage.tsx b/resources/js/Pages/Admin/Users/UsersIndexPage.tsx
similarity index 98%
rename from resources/js/V2/Pages/Admin/Users/UsersIndexPage.tsx
rename to resources/js/Pages/Admin/Users/UsersIndexPage.tsx
index e9514191..05e1b014 100644
--- a/resources/js/V2/Pages/Admin/Users/UsersIndexPage.tsx
+++ b/resources/js/Pages/Admin/Users/UsersIndexPage.tsx
@@ -1,10 +1,10 @@
 import {useFetcher, useLoaderData} from 'react-router-dom';
-import UsersLoaderType from '@/V2/types/UsersLoaderType';
+import UsersLoaderType from '@/types/UsersLoaderType';
 import Table from '@/Components/Table';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import formatDateTime from '@/Utils/formatDateTime';
 import {DangerButton} from '@/Components/Button';
-import useAuth from '@/V2/Hooks/useAuth';
+import useAuth from '@/Hooks/useAuth';
 import UserWithFeedsAndUnreadFeedItemsCount from '@/types/generated/Models/UserWithFeedsAndUnreadFeedItemsCount';
 
 export default function UsersIndexPage() {
diff --git a/resources/js/V2/Pages/Categories/CategoriesIndexPage.tsx b/resources/js/Pages/Categories/CategoriesIndexPage.tsx
similarity index 96%
rename from resources/js/V2/Pages/Categories/CategoriesIndexPage.tsx
rename to resources/js/Pages/Categories/CategoriesIndexPage.tsx
index 707a9a9f..1a642c76 100644
--- a/resources/js/V2/Pages/Categories/CategoriesIndexPage.tsx
+++ b/resources/js/Pages/Categories/CategoriesIndexPage.tsx
@@ -5,7 +5,7 @@ import LinkStack from '@/Components/LinkStack';
 import {isEmpty} from 'ramda';
 import EmptyState from '@/Components/EmptyState';
 import TagOutlineIcon from '@/Icons/TagOutlineIcon';
-import CategoriesLoaderType from '@/V2/types/CategoriesLoaderType';
+import CategoriesLoaderType from '@/types/CategoriesLoaderType';
 
 export default function CategoriesIndexPage() {
     const {categories, canCreate} = useLoaderData() as CategoriesLoaderType;
diff --git a/resources/js/Pages/Categories/Create.tsx b/resources/js/Pages/Categories/Create.tsx
deleted file mode 100644
index f95916ba..00000000
--- a/resources/js/Pages/Categories/Create.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {Head} from '@inertiajs/react';
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
-import Form from '@/Pages/Categories/Partials/Form';
-import {useLaravelReactI18n} from 'laravel-react-i18n';
-import Breadcrumbs from '@/Components/Breadcrumbs/Breadcrumbs';
-import {PageProps} from '@/types';
-import Category from '@/types/generated/Models/Category';
-
-export default function Create({category, ...props}: PageProps & { category: Category; }) {
-    const {t} = useLaravelReactI18n();
-
-    return (
-        <AuthenticatedLayout
-            auth={props.auth}
-            errors={props.errors}
-            header={<Breadcrumbs breadcrumbs={props.breadcrumbs}/>}
-        >
-            <Head title={t('Add category')}/>
-
-            <Form
-                method="post" action={route('categories.store')}
-                category={category}
-            />
-        </AuthenticatedLayout>
-    );
-}
diff --git a/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx b/resources/js/Pages/Categories/CreateCategoryPage.tsx
similarity index 78%
rename from resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
rename to resources/js/Pages/Categories/CreateCategoryPage.tsx
index 86b2295a..20ff83bb 100644
--- a/resources/js/V2/Pages/Categories/CreateCategoryPage.tsx
+++ b/resources/js/Pages/Categories/CreateCategoryPage.tsx
@@ -1,10 +1,10 @@
 import {useActionData} from 'react-router-dom';
-import usePageModal from '@/V2/Hooks/usePageModal';
+import usePageModal from '@/Hooks/usePageModal';
 import React from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {Pane, PaneBody, PaneHeader} from '@/Components/Modal/Pane';
-import CreateCategoryValidationErrors from '@/V2/types/CreateCategoryValidationErrors';
-import CategoryForm from '@/V2/Pages/Categories/Partials/CategoryForm';
+import CreateCategoryValidationErrors from '@/types/CreateCategoryValidationErrors';
+import CategoryForm from '@/Pages/Categories/Partials/CategoryForm';
 
 export default function CreateCategoryPage() {
     const {t} = useLaravelReactI18n();
diff --git a/resources/js/Pages/Categories/Edit.tsx b/resources/js/Pages/Categories/Edit.tsx
deleted file mode 100644
index 0f65f905..00000000
--- a/resources/js/Pages/Categories/Edit.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {Head, useForm} from '@inertiajs/react';
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
-import Form from '@/Pages/Categories/Partials/Form';
-import Actions from '@/Components/Actions';
-import {useLaravelReactI18n} from 'laravel-react-i18n';
-import {DangerButton} from '@/Components/Button';
-import Breadcrumbs from '@/Components/Breadcrumbs/Breadcrumbs';
-import {PageProps} from '@/types';
-import {RouteParams} from 'ziggy-js';
-import Category from '@/types/generated/Models/Category';
-
-export default function Edit({category, canDelete, ...props}: PageProps & { category: Category; canDelete: boolean; }) {
-    const {t} = useLaravelReactI18n();
-    const {delete: destroy, processing} = useForm();
-
-    const handleDelete = () => {
-        destroy(route('categories.destroy', category as unknown as RouteParams<'categories.destroy'>));
-    };
-
-    return (
-        <AuthenticatedLayout
-            auth={props.auth}
-            errors={props.errors}
-            header={<Breadcrumbs breadcrumbs={props.breadcrumbs}/>}
-        >
-            <Head title={t('Edit category')}/>
-
-            <Actions>
-                {canDelete && (
-                    <DangerButton
-                        disabled={processing}
-                        confirmTitle={t('Do you really want to delete this category?')}
-                        confirmSubmitTitle={t('Delete category')}
-                        confirmCancelTitle={t('Cancel')}
-                        onClick={handleDelete}
-                    >
-                        {t('Delete')}
-                    </DangerButton>
-                )}
-            </Actions>
-
-            <Form
-                method="put"
-                action={route('categories.update', category as unknown as RouteParams<'categories.update'>)}
-                category={category}
-            />
-        </AuthenticatedLayout>
-    );
-}
diff --git a/resources/js/V2/Pages/Categories/EditCategoryPage.tsx b/resources/js/Pages/Categories/EditCategoryPage.tsx
similarity index 87%
rename from resources/js/V2/Pages/Categories/EditCategoryPage.tsx
rename to resources/js/Pages/Categories/EditCategoryPage.tsx
index 1c72e142..5a034a72 100644
--- a/resources/js/V2/Pages/Categories/EditCategoryPage.tsx
+++ b/resources/js/Pages/Categories/EditCategoryPage.tsx
@@ -1,13 +1,13 @@
 import {useActionData, useLoaderData, useParams, useSubmit} from 'react-router-dom';
-import usePageModal from '@/V2/Hooks/usePageModal';
+import usePageModal from '@/Hooks/usePageModal';
 import {HeadlessButton} from '@/Components/Button';
 import React from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {Pane, PaneBody, PaneFooter, PaneHeader} from '@/Components/Modal/Pane';
-import EditCategoryLoaderType from '@/V2/types/EditCategoryLoaderType';
+import EditCategoryLoaderType from '@/types/EditCategoryLoaderType';
 import Actions from '@/Components/Actions';
-import CategoryForm from '@/V2/Pages/Categories/Partials/CategoryForm';
-import EditCategoryValidationErrors from '@/V2/types/EditCategoryValidationErrors';
+import CategoryForm from '@/Pages/Categories/Partials/CategoryForm';
+import EditCategoryValidationErrors from '@/types/EditCategoryValidationErrors';
 
 export default function EditCategoryPage() {
     const {t} = useLaravelReactI18n();
diff --git a/resources/js/Pages/Categories/Index.tsx b/resources/js/Pages/Categories/Index.tsx
deleted file mode 100644
index 1f1db642..00000000
--- a/resources/js/Pages/Categories/Index.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import {Head, Link} from '@inertiajs/react';
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
-import Header from '@/Components/Page/Header';
-import Actions from '@/Components/Actions';
-import {useLaravelReactI18n} from 'laravel-react-i18n';
-import LinkStack from '@/Components/LinkStack';
-import EmptyState from '@/Components/EmptyState';
-import TagOutlineIcon from '@/Icons/TagOutlineIcon';
-import {PageProps} from '@/types';
-import {RouteParams} from 'ziggy-js';
-import CategoryWithFeedsCount from '@/types/generated/Models/CategoryWithFeedsCount';
-
-export default function Index({categories, ...props}: PageProps & { categories: CategoryWithFeedsCount[]; }) {
-    const {t, tChoice} = useLaravelReactI18n();
-
-    return (
-        <AuthenticatedLayout
-            auth={props.auth}
-            errors={props.errors}
-            header={<Header>{t('Categories')}</Header>}
-        >
-            <Head title={t('Categories')}/>
-
-            <Actions>
-                <Link
-                    href={route('categories.create')}
-                    className="link-secondary"
-                >
-                    {t('Add category')}
-                </Link>
-            </Actions>
-
-            {categories.length > 0
-                ? (
-                    <LinkStack>
-                        {categories.map((category) => (
-                            <LinkStack.Item
-                                key={category.id}
-                                href={route('categories.edit', category as unknown as RouteParams<'categories.edit'>)}
-                                className="block"
-                            >
-                                <div className="font-semibold">
-                                    {category.name}
-                                </div>
-
-                                <div className="text-sm text-muted">
-                                    {tChoice('category.feeds_count', category.feeds_count)}
-                                </div>
-                            </LinkStack.Item>
-                        ))}
-                    </LinkStack>
-                )
-                : (
-                    <EmptyState
-                        icon={TagOutlineIcon}
-                        message={t('No categories.')}
-                        description={t('Get started by creating a new category.')}
-                    />
-                )}
-        </AuthenticatedLayout>
-    );
-}
diff --git a/resources/js/V2/Pages/Categories/Partials/CategoryForm.tsx b/resources/js/Pages/Categories/Partials/CategoryForm.tsx
similarity index 88%
rename from resources/js/V2/Pages/Categories/Partials/CategoryForm.tsx
rename to resources/js/Pages/Categories/Partials/CategoryForm.tsx
index 42c9f6d4..96953636 100644
--- a/resources/js/V2/Pages/Categories/Partials/CategoryForm.tsx
+++ b/resources/js/Pages/Categories/Partials/CategoryForm.tsx
@@ -3,10 +3,10 @@ import TextInput from '@/Components/TextInput';
 import InputError from '@/Components/InputError';
 import {PrimaryButton} from '@/Components/Button';
 import React from 'react';
-import CreateCategoryValidationErrors from '@/V2/types/CreateCategoryValidationErrors';
+import CreateCategoryValidationErrors from '@/types/CreateCategoryValidationErrors';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {Form} from 'react-router-dom';
-import EditCategoryValidationErrors from '@/V2/types/EditCategoryValidationErrors';
+import EditCategoryValidationErrors from '@/types/EditCategoryValidationErrors';
 import Category from '@/types/generated/Models/Category';
 
 export default function CategoryForm({action, category = null, errors}: { action: string; category?: Category | null; errors: CreateCategoryValidationErrors | EditCategoryValidationErrors; }) {
diff --git a/resources/js/Pages/Categories/Partials/Form.tsx b/resources/js/Pages/Categories/Partials/Form.tsx
deleted file mode 100644
index 5349dfca..00000000
--- a/resources/js/Pages/Categories/Partials/Form.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {useForm} from '@inertiajs/react';
-import InputLabel from '@/Components/InputLabel';
-import TextInput from '@/Components/TextInput';
-import InputError from '@/Components/InputError';
-import {useLaravelReactI18n} from 'laravel-react-i18n';
-import {PrimaryButton} from '@/Components/Button';
-import React from 'react';
-import Category from '@/types/generated/Models/Category';
-
-export default function Form({method, action, category}: { method: 'post' | 'put'; action: string; category: Category; }) {
-    const {t} = useLaravelReactI18n();
-    const {data, setData, post, put, errors, processing} = useForm({name: category.name ?? ''});
-
-    const submit = (event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault();
-
-        const request = method === 'post' ? post : put;
-
-        request(action);
-    };
-
-    return (
-        <form onSubmit={submit} className="mt-6 space-y-6">
-            <div>
-                <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
-
-                <TextInput
-                    id="name"
-                    className="mt-1 block w-full max-w-xl"
-                    value={data.name}
-                    onChange={(e) => setData('name', e.target.value)}
-                    required
-                    isFocused
-                />
-
-                <InputError className="mt-2" message={errors.name}/>
-            </div>
-
-            <div className="flex items-center gap-4">
-                <PrimaryButton type="submit" disabled={processing}>
-                    {t('Save')}
-                </PrimaryButton>
-            </div>
-        </form>
-    );
-}
diff --git a/resources/js/Pages/Dashboard.tsx b/resources/js/Pages/Dashboard.tsx
deleted file mode 100644
index fcb642fe..00000000
--- a/resources/js/Pages/Dashboard.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
-import {Head, router} from '@inertiajs/react';
-import Header from '@/Components/Page/Header';
-import {useState} from 'react';
-import FeedItemCard from '@/Components/FeedItemCard';
-import {useLaravelReactI18n} from 'laravel-react-i18n';
-import FeedFilterDropdown from '@/Components/FeedFilterDropdown';
-import TotalNumberOfFeedItemsContext from '@/Contexts/TotalNumberOfFeedItemsContext';
-import {TertiaryButton} from '@/Components/Button';
-import NewspaperSolidIcon from '@/Icons/NewspaperSolidIcon';
-import EmptyState from '@/Components/EmptyState';
-import EyeOutlineIcon from '@/Icons/EyeOutlineIcon';
-import {PageProps} from '@/types';
-import CursorPagination from '@/types/CursorPagination';
-import FeedItem from '@/types/generated/Models/FeedItem';
-import ShortFeedWithFeedItemsCount from '@/types/generated/Models/ShortFeedWithFeedItemsCount';
-
-type DashboardPageProps = PageProps & {
-    selectedFeed: ShortFeedWithFeedItemsCount;
-    unreadFeeds: ShortFeedWithFeedItemsCount[];
-    totalNumberOfFeedItems: number;
-    feedItems: CursorPagination<FeedItem>;
-};
-
-export default function Dashboard(props: DashboardPageProps) {
-    const {t, tChoice} = useLaravelReactI18n();
-    const [allFeedItems, setAllFeedItems] = useState(props.feedItems.data);
-    const [totalNumberOfFeedItems, setTotalNumberOfFeedItems] = useState(props.totalNumberOfFeedItems);
-
-    const markAllAsRead = async () => {
-        await window.ky.put(route('mark-all-as-read'));
-
-        router.get(route('dashboard'));
-    };
-
-    const loadMore = () => {
-        if (!props.feedItems.next_page_url) {
-            return;
-        }
-
-        router.get(props.feedItems.next_page_url, undefined, {
-            only: ['feedItems'],
-            preserveState: true,
-            preserveScroll: true,
-            onSuccess: (page) => setAllFeedItems([...allFeedItems, ...(page.props as DashboardPageProps).feedItems.data]),
-        });
-    };
-
-    return (
-        <TotalNumberOfFeedItemsContext.Provider value={{totalNumberOfFeedItems, setTotalNumberOfFeedItems}}>
-            <AuthenticatedLayout
-                auth={props.auth}
-                errors={props.errors}
-                header={
-                    <Header subTitle={tChoice('dashboard.unread_articles', totalNumberOfFeedItems)}>
-                        {t('Dashboard')}
-                    </Header>
-                }
-            >
-                <Head title="Dashboard"/>
-
-                <div className="flex flex-col sm:flex-row sm:space-x-2 space-y-2 sm:space-y-0 pb-8">
-                    <FeedFilterDropdown selectedFeed={props.selectedFeed} feeds={props.unreadFeeds}/>
-
-                    {totalNumberOfFeedItems > 0 && (
-                        <TertiaryButton
-                            confirm
-                            confirmTitle={t('Do you really want to mark all articles as read?')}
-                            confirmCancelTitle={t('Cancel')}
-                            confirmSubmitTitle={t('Mark all articles as read')}
-                            onClick={markAllAsRead}
-                            icon={EyeOutlineIcon}
-                            hasMobileFullSize
-                        >
-                            {t('Mark all as read')}
-                        </TertiaryButton>
-                    )}
-                </div>
-
-                {allFeedItems.length > 0
-                    ? (
-                        <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-4 gap-y-16 sm:gap-y-4">
-                            {allFeedItems.map((feedItem, index) => (
-                                <FeedItemCard
-                                    key={feedItem.id}
-                                    hueRotationIndex={index % 6}
-                                    feedItem={feedItem}
-                                />
-                            ))}
-                        </div>
-                    )
-                    : (
-                        <EmptyState
-                            icon={NewspaperSolidIcon}
-                            message={t('No unread articles.')}
-                            description={t('Come back later.')}
-                        />
-                    )}
-
-                <div className="pt-5">
-                    {props.feedItems.next_page_url && (
-                        <button
-                            type="button"
-                            className="link-secondary"
-                            onClick={loadMore}
-                        >
-                            {t('Load more')}
-                        </button>
-                    )}
-                </div>
-            </AuthenticatedLayout>
-        </TotalNumberOfFeedItemsContext.Provider>
-    );
-}
diff --git a/resources/js/Pages/Feeds/Create.tsx b/resources/js/Pages/Feeds/Create.tsx
deleted file mode 100644
index 9bb1608f..00000000
--- a/resources/js/Pages/Feeds/Create.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import {Head, Link} from '@inertiajs/react';
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
-import Form from '@/Pages/Feeds/Partials/Form';
-import {useLaravelReactI18n} from 'laravel-react-i18n';
-import Breadcrumbs from '@/Components/Breadcrumbs/Breadcrumbs';
-import EmptyState from '@/Components/EmptyState';
-import ExclamationCircleOutlineIcon from '@/Icons/ExclamationCircleOutlineIcon';
-import PlusOutlineIcon from '@/Icons/PlusOutlineIcon';
-import {PageProps} from '@/types';
-import {SelectNumberOption} from '@/types/SelectOption';
-import Feed from '@/types/generated/Models/Feed';
-
-export default function Create({feed, categories, ...props}: PageProps & { feed: Feed; categories: SelectNumberOption[]; }) {
-    const {t} = useLaravelReactI18n();
-
-    return (
-        <AuthenticatedLayout
-            auth={props.auth}
-            errors={props.errors}
-            header={<Breadcrumbs breadcrumbs={props.breadcrumbs}/>}
-        >
-            <Head title={t('Add feed')}/>
-
-            {categories.length > 0
-                ? (
-                    <Form
-                        method="post"
-                        action={route('feeds.store')}
-                        feed={feed}
-                        categories={categories}
-                    />
-                )
-                : (
-                    <EmptyState
-                        icon={ExclamationCircleOutlineIcon}
-                        message={t('Please create a category first.')}
-                        description={t('There have to be at least one category before you can create a feed.')}
-                    >
-                        <Link
-                            href={route('categories.create')}
-                            className="link-secondary mt-6"
-                        >
-                            <PlusOutlineIcon className="w-4 h-4 mr-2"/>
-                            <div>{t('New category')}</div>
-                        </Link>
-                    </EmptyState>
-                )}
-        </AuthenticatedLayout>
-    );
-}
diff --git a/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx b/resources/js/Pages/Feeds/CreateFeedPage.tsx
similarity index 77%
rename from resources/js/V2/Pages/Feeds/CreateFeedPage.tsx
rename to resources/js/Pages/Feeds/CreateFeedPage.tsx
index a5399d3c..b18cc7d0 100644
--- a/resources/js/V2/Pages/Feeds/CreateFeedPage.tsx
+++ b/resources/js/Pages/Feeds/CreateFeedPage.tsx
@@ -1,11 +1,11 @@
 import {useActionData, useLoaderData} from 'react-router-dom';
-import usePageModal from '@/V2/Hooks/usePageModal';
+import usePageModal from '@/Hooks/usePageModal';
 import React from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {Pane, PaneBody, PaneHeader} from '@/Components/Modal/Pane';
-import CreateFeedLoaderType from '@/V2/types/CreateFeedLoaderType';
-import CreateFeedValidationErrors from '@/V2/types/CreateFeedValidationErrors';
-import FeedForm from '@/V2/Pages/Feeds/Partials/FeedForm';
+import CreateFeedLoaderType from '@/types/CreateFeedLoaderType';
+import CreateFeedValidationErrors from '@/types/CreateFeedValidationErrors';
+import FeedForm from '@/Pages/Feeds/Partials/FeedForm';
 
 export default function CreateFeedPage() {
     const {t} = useLaravelReactI18n();
diff --git a/resources/js/Pages/Feeds/Edit.tsx b/resources/js/Pages/Feeds/Edit.tsx
deleted file mode 100644
index 32b563b4..00000000
--- a/resources/js/Pages/Feeds/Edit.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import {Head, useForm} from '@inertiajs/react';
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
-import Form from '@/Pages/Feeds/Partials/Form';
-import Actions from '@/Components/Actions';
-import {useLaravelReactI18n} from 'laravel-react-i18n';
-import {DangerButton} from '@/Components/Button';
-import Breadcrumbs from '@/Components/Breadcrumbs/Breadcrumbs';
-import {PageProps} from '@/types';
-import {RouteParams} from 'ziggy-js';
-import {SelectNumberOption} from '@/types/SelectOption';
-import Feed from '@/types/generated/Models/Feed';
-
-export default function Edit({feed, categories, canDelete, ...props}: PageProps & { feed: Feed; categories: SelectNumberOption[]; canDelete: boolean; }) {
-    const {t} = useLaravelReactI18n();
-    const {delete: destroy, processing} = useForm();
-
-    const handleDelete = () => {
-        destroy(route('feeds.destroy', feed as unknown as RouteParams<'feeds.destroy'>));
-    };
-
-    return (
-        <AuthenticatedLayout
-            auth={props.auth}
-            errors={props.errors}
-            header={<Breadcrumbs breadcrumbs={props.breadcrumbs}/>}
-        >
-            <Head title={t('Edit feed')}/>
-
-            <Actions>
-                {canDelete && (
-                    <DangerButton
-                        disabled={processing}
-                        confirmTitle={t('Do you really want to delete this feed?')}
-                        confirmSubmitTitle={t('Delete feed')}
-                        confirmCancelTitle={t('Cancel')}
-                        onClick={handleDelete}
-                    >
-                        {t('Delete')}
-                    </DangerButton>
-                )}
-            </Actions>
-
-            <Form
-                method="put"
-                action={route('feeds.update', feed as unknown as RouteParams<'feeds.update'>)}
-                feed={feed}
-                categories={categories}
-            />
-        </AuthenticatedLayout>
-    );
-}
diff --git a/resources/js/V2/Pages/Feeds/EditFeedPage.tsx b/resources/js/Pages/Feeds/EditFeedPage.tsx
similarity index 88%
rename from resources/js/V2/Pages/Feeds/EditFeedPage.tsx
rename to resources/js/Pages/Feeds/EditFeedPage.tsx
index 1481cce9..4b150c9c 100644
--- a/resources/js/V2/Pages/Feeds/EditFeedPage.tsx
+++ b/resources/js/Pages/Feeds/EditFeedPage.tsx
@@ -1,13 +1,13 @@
 import {useActionData, useLoaderData, useParams, useSubmit} from 'react-router-dom';
-import usePageModal from '@/V2/Hooks/usePageModal';
+import usePageModal from '@/Hooks/usePageModal';
 import {HeadlessButton} from '@/Components/Button';
 import React from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {Pane, PaneBody, PaneFooter, PaneHeader} from '@/Components/Modal/Pane';
-import EditFeedLoaderType from '@/V2/types/EditFeddLoaderType';
+import EditFeedLoaderType from '@/types/EditFeddLoaderType';
 import Actions from '@/Components/Actions';
-import EditFeedValidationErrors from '@/V2/types/EditFeedValidationErrors';
-import FeedForm from '@/V2/Pages/Feeds/Partials/FeedForm';
+import EditFeedValidationErrors from '@/types/EditFeedValidationErrors';
+import FeedForm from '@/Pages/Feeds/Partials/FeedForm';
 
 export default function EditFeedPage() {
     const {t} = useLaravelReactI18n();
diff --git a/resources/js/V2/Pages/Feeds/FeedsIndexPage.tsx b/resources/js/Pages/Feeds/FeedsIndexPage.tsx
similarity index 98%
rename from resources/js/V2/Pages/Feeds/FeedsIndexPage.tsx
rename to resources/js/Pages/Feeds/FeedsIndexPage.tsx
index 31b4dfb9..12dff1e7 100644
--- a/resources/js/V2/Pages/Feeds/FeedsIndexPage.tsx
+++ b/resources/js/Pages/Feeds/FeedsIndexPage.tsx
@@ -4,11 +4,11 @@ import Actions from '@/Components/Actions';
 import LinkStack from '@/Components/LinkStack';
 import {isEmpty} from 'ramda';
 import EmptyState from '@/Components/EmptyState';
-import FeedsLoaderType from '@/V2/types/FeedsLoaderType';
+import FeedsLoaderType from '@/types/FeedsLoaderType';
 import NewspaperSolidIcon from '@/Icons/NewspaperSolidIcon';
 import PhotoSolidIcon from '@/Icons/PhotoSolidIcon';
 import formatDateTime from '@/Utils/formatDateTime';
-import useAuth from '@/V2/Hooks/useAuth';
+import useAuth from '@/Hooks/useAuth';
 
 export default function FeedsIndexPage() {
     const {user} = useAuth();
diff --git a/resources/js/Pages/Feeds/Index.tsx b/resources/js/Pages/Feeds/Index.tsx
deleted file mode 100644
index 26e7a219..00000000
--- a/resources/js/Pages/Feeds/Index.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import {Head, Link} from '@inertiajs/react';
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
-import Header from '@/Components/Page/Header';
-import Actions from '@/Components/Actions';
-import {useLaravelReactI18n} from 'laravel-react-i18n';
-import LinkStack from '@/Components/LinkStack';
-import formatDateTime from '@/Utils/formatDateTime';
-import EmptyState from '@/Components/EmptyState';
-import NewspaperSolidIcon from '@/Icons/NewspaperSolidIcon';
-import {PageProps} from '@/types';
-import {RouteParams} from 'ziggy-js';
-import PhotoSolidIcon from '@/Icons/PhotoSolidIcon';
-import FeedWithFeedItemsCount from '@/types/generated/Models/FeedWithFeedItemsCount';
-
-export default function Index({feeds, ...props}: PageProps & { feeds: FeedWithFeedItemsCount[]; }) {
-    const {t, tChoice} = useLaravelReactI18n();
-
-    return (
-        <AuthenticatedLayout
-            auth={props.auth}
-            errors={props.errors}
-            header={<Header>{t('Feeds')}</Header>}
-        >
-            <Head title={t('Feeds')}/>
-
-            <Actions>
-                <Link
-                    href={route('feeds.create')}
-                    className="link-secondary"
-                >
-                    {t('Add feed')}
-                </Link>
-            </Actions>
-
-            {feeds.length > 0
-                ? (
-                    <LinkStack>
-                        {feeds.map((feed) => (
-                            <LinkStack.Item
-                                key={feed.id}
-                                href={route('feeds.edit', feed as unknown as RouteParams<'feeds.edit'>)}
-                                className="block sm:flex justify-between"
-                            >
-                                <div className="flex items-center">
-                                    {feed.favicon_url
-                                        ? (
-                                            <img
-                                                loading="lazy"
-                                                src={feed.favicon_url}
-                                                alt={feed.name}
-                                                className="w-5 h-5 rounded mr-4"
-                                            />
-                                        )
-                                        : <PhotoSolidIcon className="w-5 h-5 mr-4"/>
-                                    }
-
-                                    <div>
-                                        <div className="font-semibold">
-                                            {feed.name}
-                                        </div>
-
-                                        <div className="text-sm text-muted">
-                                            {feed.category.name}
-                                        </div>
-
-                                        <div className="sm:hidden text-sm">
-                                            <div className="text-muted">
-                                                {tChoice('feed.feed_items_count', feed.feed_items_count)}
-                                            </div>
-
-                                            <div className="text-muted">
-                                                {feed.is_purgeable
-                                                    ? tChoice('feed.purge', props.monthsAfterPruningFeedItems)
-                                                    : t('feed.no_purge')
-                                                }
-                                            </div>
-
-                                            {feed.last_failed_at && (
-                                                <div className="text-pink-500">
-                                                    {t('feed.last_failed_at', {date: formatDateTime(feed.last_failed_at)})}
-                                                </div>
-                                            )}
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div className="hidden sm:block text-sm text-right">
-                                    <div className="text-muted">
-                                        {tChoice('feed.feed_items_count', feed.feed_items_count)}
-                                    </div>
-
-                                    <div className="text-muted">
-                                        {feed.is_purgeable
-                                            ? tChoice('feed.purge', props.monthsAfterPruningFeedItems)
-                                            : t('feed.no_purge')
-                                        }
-                                    </div>
-
-                                    {feed.last_failed_at && (
-                                        <div className="text-pink-500">
-                                            {t('feed.last_failed_at', {date: formatDateTime(feed.last_failed_at)})}
-                                        </div>
-                                    )}
-                                </div>
-                            </LinkStack.Item>
-                        ))}
-                    </LinkStack>
-                )
-                : (
-                    <EmptyState
-                        icon={NewspaperSolidIcon}
-                        message={t('No feeds.')}
-                        description={t('Get started by creating a new feed.')}
-                    />
-                )}
-        </AuthenticatedLayout>
-    );
-}
diff --git a/resources/js/V2/Pages/Feeds/Partials/FeedForm.tsx b/resources/js/Pages/Feeds/Partials/FeedForm.tsx
similarity index 97%
rename from resources/js/V2/Pages/Feeds/Partials/FeedForm.tsx
rename to resources/js/Pages/Feeds/Partials/FeedForm.tsx
index 75af2762..6b722111 100644
--- a/resources/js/V2/Pages/Feeds/Partials/FeedForm.tsx
+++ b/resources/js/Pages/Feeds/Partials/FeedForm.tsx
@@ -6,15 +6,15 @@ import React, {useRef, useState} from 'react';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {Form} from 'react-router-dom';
 import Feed from '@/types/generated/Models/Feed';
-import CreateFeedValidationErrors from '@/V2/types/CreateFeedValidationErrors';
-import EditFeedValidationErrors from '@/V2/types/EditFeedValidationErrors';
+import CreateFeedValidationErrors from '@/types/CreateFeedValidationErrors';
+import EditFeedValidationErrors from '@/types/EditFeedValidationErrors';
 import LinkStack from '@/Components/LinkStack';
 import Select from '@/Components/Select';
 import Checkbox from '@/Components/Checkbox';
-import request from '@/V2/request';
+import request from '@/Core/request';
 import DiscoveredFeed from '@/types/DiscoveredFeed';
 import {SelectNumberOption} from '@/types/SelectOption';
-import useAuth from '@/V2/Hooks/useAuth';
+import useAuth from '@/Hooks/useAuth';
 
 export default function FeedForm({action, feed = null, categories, errors}: { action: string; feed?: Feed | null; categories: SelectNumberOption[]; errors: CreateFeedValidationErrors | EditFeedValidationErrors; }) {
     const {t, tChoice} = useLaravelReactI18n();
diff --git a/resources/js/Pages/Feeds/Partials/Form.tsx b/resources/js/Pages/Feeds/Partials/Form.tsx
deleted file mode 100644
index bee50ade..00000000
--- a/resources/js/Pages/Feeds/Partials/Form.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-import {useForm, usePage} from '@inertiajs/react';
-import InputLabel from '@/Components/InputLabel';
-import TextInput from '@/Components/TextInput';
-import InputError from '@/Components/InputError';
-import Select from '@/Components/Select';
-import React, {useState} from 'react';
-import {useLaravelReactI18n} from 'laravel-react-i18n';
-import Card from '@/Components/Card';
-import {PrimaryButton, TertiaryButton} from '@/Components/Button';
-import Checkbox from '@/Components/Checkbox';
-import {PageProps} from '@/types';
-import {SelectNumberOption} from '@/types/SelectOption';
-import DiscoveredFeed from '@/types/DiscoveredFeed';
-import Feed from '@/types/generated/Models/Feed';
-
-export default function Form({method, action, feed, categories}: { method: 'post' | 'put'; action: string; feed: Feed; categories: SelectNumberOption[]; }) {
-    const {t, tChoice} = useLaravelReactI18n();
-    const {monthsAfterPruningFeedItems} = usePage().props as PageProps;
-    const [isDiscoverFeedProcessing, setIsDiscoverFeedProcessing] = useState(false);
-    const [searchUrl, setSearchUrl] = useState('');
-    const [discoveredFeedUrls, setDiscoveredFeedUrls] = useState<string[]>([]);
-
-    const {data, setData, post, put, errors, processing} = useForm({
-        category_id: feed.category_id ?? categories[0].value,
-        feed_url: feed.feed_url ?? '',
-        site_url: feed.site_url ?? '',
-        favicon_url: feed.favicon_url ?? '',
-        name: feed.name ?? '',
-        language: feed.language ?? '',
-        is_purgeable: feed.is_purgeable ?? true,
-    });
-
-    const discoverFeedUrls = (searchUrl: string) => {
-        setDiscoveredFeedUrls([]);
-        setIsDiscoverFeedProcessing(true);
-
-        window.ky.post(route('discover-feed-urls'), {json: {feed_url: searchUrl}})
-            .json<string[]>()
-            .then((data) => {
-                setDiscoveredFeedUrls(data);
-            })
-            .catch((error) => {
-                console.error(error);
-            })
-            .finally(() => setIsDiscoverFeedProcessing(false));
-    };
-
-    const selectDiscoveredFeedUrl = (feedUrl: string) => () => {
-        setIsDiscoverFeedProcessing(true);
-
-        window.ky.post(route('discover-feed'), {json: {feed_url: feedUrl}})
-            .json<DiscoveredFeed>()
-            .then((responseData) => {
-                setData({...data, ...responseData});
-
-                setSearchUrl('');
-                setDiscoveredFeedUrls([]);
-            })
-            .catch((error) => {
-                console.error(error);
-            })
-            .finally(() => setIsDiscoverFeedProcessing(false));
-    };
-
-    const submit = (event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault();
-
-        const request = method === 'post' ? post : put;
-
-        request(action);
-    };
-
-    return (
-        <>
-            <div className="flex">
-                <TextInput
-                    id="search_url"
-                    className="grow w-full rounded-r-none border-r-0"
-                    placeholder={t('Search URL...')}
-                    value={searchUrl}
-                    onChange={(e) => setSearchUrl(e.target.value)}
-                    isFocused
-                />
-
-                <TertiaryButton
-                    className="rounded-l-none border border-gray-300 dark:border-gray-700"
-                    onClick={() => discoverFeedUrls(searchUrl)}
-                    disabled={isDiscoverFeedProcessing || searchUrl.length < 5}
-                >
-                    {t('Search')}
-                </TertiaryButton>
-            </div>
-
-            {discoveredFeedUrls.length > 0 && (
-                <Card className="mt-4 divide-y dark:divide-gray-700">
-                    {discoveredFeedUrls.map((discoveredFeedUrl) => (
-                        <button
-                            key={discoveredFeedUrl}
-                            type="button"
-                            className="block w-full text-left px-4 py-2 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600 first:rounded-t last:rounded-b transition"
-                            onClick={selectDiscoveredFeedUrl(discoveredFeedUrl)}
-                        >
-                            {discoveredFeedUrl}
-                        </button>
-                    ))}
-                </Card>
-            )}
-
-            <form onSubmit={submit} className="mt-6 space-y-6">
-                <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                    <div>
-                        <InputLabel htmlFor="name" value={t('validation.attributes.name')} required/>
-
-                        <TextInput
-                            id="name"
-                            className="mt-1 block w-full"
-                            value={data.name}
-                            onChange={(e) => setData('name', e.target.value)}
-                            disabled={isDiscoverFeedProcessing}
-                            required
-                        />
-
-                        <InputError className="mt-2" message={errors.name}/>
-                    </div>
-
-                    <div>
-                        <InputLabel htmlFor="category_id" value={t('validation.attributes.category_id')} required/>
-
-                        <Select
-                            id="category_id"
-                            className="mt-1 block w-full"
-                            value={data.category_id}
-                            options={categories}
-                            onChange={(event: React.FormEvent<HTMLSelectElement>) => setData('category_id', parseInt(event.currentTarget.value, 10))}
-                            disabled={isDiscoverFeedProcessing}
-                            required
-                        />
-
-                        <InputError className="mt-2" message={errors.category_id}/>
-                    </div>
-
-                    <div>
-                        <InputLabel htmlFor="language" value={t('validation.attributes.language')} required/>
-
-                        <TextInput
-                            id="language"
-                            className="mt-1 block w-full"
-                            value={data.language}
-                            onChange={(e) => setData('language', e.target.value)}
-                            disabled={isDiscoverFeedProcessing}
-                            required
-                        />
-
-                        <InputError className="mt-2" message={errors.language}/>
-                    </div>
-                </div>
-
-                <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                    <div>
-                        <InputLabel htmlFor="feed_url" value={t('validation.attributes.feed_url')} required/>
-
-                        <TextInput
-                            id="feed_url"
-                            className="mt-1 block w-full"
-                            value={data.feed_url}
-                            onChange={(e) => setData('feed_url', e.target.value)}
-                            disabled={isDiscoverFeedProcessing}
-                            required
-                        />
-
-                        <InputError className="mt-2" message={errors.feed_url}/>
-                    </div>
-
-                    <div>
-                        <InputLabel htmlFor="site_url" value={t('validation.attributes.site_url')} required/>
-
-                        <TextInput
-                            id="site_url"
-                            className="mt-1 block w-full"
-                            value={data.site_url}
-                            onChange={(e) => setData('site_url', e.target.value)}
-                            disabled={isDiscoverFeedProcessing}
-                            required
-                        />
-
-                        <InputError className="mt-2" message={errors.site_url}/>
-                    </div>
-
-                    <div>
-                        <InputLabel htmlFor="favicon_url" value={t('validation.attributes.favicon_url')}/>
-
-                        <TextInput
-                            id="favicon_url"
-                            className="mt-1 block w-full"
-                            value={data.favicon_url}
-                            onChange={(e) => setData('favicon_url', e.target.value)}
-                            disabled={isDiscoverFeedProcessing}
-                        />
-
-                        <InputError className="mt-2" message={errors.site_url}/>
-                    </div>
-                </div>
-
-                <div>
-                    <label className="flex items-center w-fit">
-                        <Checkbox
-                            name="is_purgeable"
-                            checked={data.is_purgeable}
-                            value={data.is_purgeable}
-                            disabled={isDiscoverFeedProcessing}
-                            onChange={(e) => setData('is_purgeable', e.currentTarget.checked)}
-                        />
-
-                        <span className="ml-2 text-sm text-gray-600 dark:text-gray-400">
-                            {tChoice('feed.purge', monthsAfterPruningFeedItems)}
-                        </span>
-                    </label>
-                </div>
-
-                <div className="flex items-center gap-4">
-                    <PrimaryButton type="submit" disabled={processing || isDiscoverFeedProcessing}>
-                        {t('Save')}
-                    </PrimaryButton>
-                </div>
-            </form>
-        </>
-    );
-}
diff --git a/resources/js/V2/Pages/Home.tsx b/resources/js/Pages/Home.tsx
similarity index 96%
rename from resources/js/V2/Pages/Home.tsx
rename to resources/js/Pages/Home.tsx
index 6afd58e2..83949006 100644
--- a/resources/js/V2/Pages/Home.tsx
+++ b/resources/js/Pages/Home.tsx
@@ -1,14 +1,14 @@
 import {useFetcher, useLoaderData, useNavigate, useSearchParams} from 'react-router-dom';
-import FeedItemsLoaderType from '@/V2/types/FeedItemsLoaderType';
+import FeedItemsLoaderType from '@/types/FeedItemsLoaderType';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import {HeadlessButton, TertiaryButton} from '@/Components/Button';
 import {useContext, useEffect, useState} from 'react';
 import {isEmpty, length} from 'ramda';
 import NewspaperSolidIcon from '@/Icons/NewspaperSolidIcon';
 import EmptyState from '@/Components/EmptyState';
-import request from '@/V2/request';
+import request from '@/Core/request';
 import FeedItemCard from '@/Components/FeedItemCard';
-import TotalNumberOfFeedItemsContext from '@/V2/Contexts/TotalNumberOfFeedItemsContext';
+import TotalNumberOfFeedItemsContext from '@/Contexts/TotalNumberOfFeedItemsContext';
 import FeedFilterDropdown from '@/Components/FeedFilterDropdown';
 import EyeOutlineIcon from '@/Icons/EyeOutlineIcon';
 
diff --git a/resources/js/Pages/Profile/Edit.tsx b/resources/js/Pages/Profile/Edit.tsx
deleted file mode 100644
index 5237333a..00000000
--- a/resources/js/Pages/Profile/Edit.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
-import DeleteUserForm from './Partials/DeleteUserForm';
-import UpdatePasswordForm from './Partials/UpdatePasswordForm';
-import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm';
-import {Head} from '@inertiajs/react';
-import Header from '@/Components/Page/Header';
-import {BasePageProps} from '@/types';
-
-export default function Edit({auth, errors, mustVerifyEmail, status}: BasePageProps & { mustVerifyEmail: boolean; status: string; }) {
-    return (
-        <AuthenticatedLayout
-            auth={auth}
-            header={<Header>Profile</Header>}
-            errors={errors}
-        >
-            <Head title="Profile"/>
-
-            <div className="space-y-8">
-                <UpdateProfileInformationForm
-                    mustVerifyEmail={mustVerifyEmail}
-                    status={status}
-                />
-
-                <UpdatePasswordForm/>
-
-                <DeleteUserForm/>
-            </div>
-        </AuthenticatedLayout>
-    );
-}
diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.tsx b/resources/js/Pages/Profile/Partials/DeleteUserForm.tsx
index ac9906e0..5787e2c8 100644
--- a/resources/js/Pages/Profile/Partials/DeleteUserForm.tsx
+++ b/resources/js/Pages/Profile/Partials/DeleteUserForm.tsx
@@ -7,7 +7,7 @@ import {DangerButton, SecondaryButton} from '@/Components/Button';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
 import Card from '@/Components/Card';
 import {Form, useActionData} from 'react-router-dom';
-import UpdatePasswordValidationErrors from '@/V2/types/UpdatePasswordValidationErrors';
+import UpdatePasswordValidationErrors from '@/types/UpdatePasswordValidationErrors';
 
 export default function DeleteUserForm() {
     const {t} = useLaravelReactI18n();
diff --git a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.tsx b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.tsx
index e9260548..b9ae160d 100644
--- a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.tsx
+++ b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.tsx
@@ -6,7 +6,7 @@ import TextInput from '@/Components/TextInput';
 import {PrimaryButton} from '@/Components/Button';
 import Card from '@/Components/Card';
 import {Form, useActionData} from 'react-router-dom';
-import UpdatePasswordValidationErrors from '@/V2/types/UpdatePasswordValidationErrors';
+import UpdatePasswordValidationErrors from '@/types/UpdatePasswordValidationErrors';
 
 export default function UpdatePasswordForm() {
     const {t} = useLaravelReactI18n();
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.tsx b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.tsx
index fb385500..32d20af8 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.tsx
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import Card from '@/Components/Card';
 import User from '@/types/generated/Models/User';
 import {Form, useActionData} from 'react-router-dom';
-import UpdateProfileValidationErrors from '@/V2/types/UpdateProfileValidationErrors';
+import UpdateProfileValidationErrors from '@/types/UpdateProfileValidationErrors';
 
 export default function UpdateProfileInformation({mustVerifyEmail, status, user}: { mustVerifyEmail: boolean; status: string; user: User; }) {
     const {t} = useLaravelReactI18n();
diff --git a/resources/js/V2/Pages/ProfilePage.tsx b/resources/js/Pages/ProfilePage.tsx
similarity index 92%
rename from resources/js/V2/Pages/ProfilePage.tsx
rename to resources/js/Pages/ProfilePage.tsx
index 8d36d1aa..2b2f7df7 100644
--- a/resources/js/V2/Pages/ProfilePage.tsx
+++ b/resources/js/Pages/ProfilePage.tsx
@@ -1,6 +1,6 @@
 import {useLoaderData} from 'react-router-dom';
 import UpdateProfileInformation from '@/Pages/Profile/Partials/UpdateProfileInformationForm';
-import ProfileLoaderType from '@/V2/types/ProfileLoaderType';
+import ProfileLoaderType from '@/types/ProfileLoaderType';
 import UpdatePasswordForm from '@/Pages/Profile/Partials/UpdatePasswordForm';
 import DeleteUserForm from '@/Pages/Profile/Partials/DeleteUserForm';
 
diff --git a/resources/js/V2/Utils/wait.ts b/resources/js/Utils/wait.ts
similarity index 100%
rename from resources/js/V2/Utils/wait.ts
rename to resources/js/Utils/wait.ts
diff --git a/resources/js/V2/Contexts/TotalNumberOfFeedItemsContext.ts b/resources/js/V2/Contexts/TotalNumberOfFeedItemsContext.ts
deleted file mode 100644
index 94e49a04..00000000
--- a/resources/js/V2/Contexts/TotalNumberOfFeedItemsContext.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {createContext} from 'react';
-import TotalNumberOfFeedItemsContextType from '@/V2/types/TotalNumberOfFeedItemsContextType';
-import noop from '@/Utils/noop';
-
-const TotalNumberOfFeedItemsContext = createContext<TotalNumberOfFeedItemsContextType>({
-    totalNumberOfFeedItems: 0,
-    setTotalNumberOfFeedItems: noop,
-});
-
-export default TotalNumberOfFeedItemsContext;
diff --git a/resources/js/V2/app.tsx b/resources/js/V2/app.tsx
deleted file mode 100644
index ee89308b..00000000
--- a/resources/js/V2/app.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import {createRoot} from 'react-dom/client';
-import NProgress from 'nprogress';
-import {LaravelReactI18nProvider} from 'laravel-react-i18n';
-import getBrowserLocale from '@/Utils/getBrowserLocale';
-import AppWithLoadedTranslations from '@/Components/AppWithLoadedTranslations';
-import AppWithToasts from '@/V2/AppWithToasts';
-
-NProgress.configure({
-    showSpinner: false,
-});
-
-const App = () => {
-    return (
-        <LaravelReactI18nProvider
-            locale={getBrowserLocale()}
-            fallbackLocale="en"
-            files={import.meta.glob('/lang/*.json', {eager: true})}
-        >
-            <AppWithLoadedTranslations app={AppWithToasts}/>
-        </LaravelReactI18nProvider>
-    );
-};
-
-createRoot(document.getElementById('app')!)
-    .render(<App/>);
diff --git a/resources/js/V2/types/Breadcrumb.ts b/resources/js/V2/types/Breadcrumb.ts
deleted file mode 100644
index 5d3df70b..00000000
--- a/resources/js/V2/types/Breadcrumb.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-type Breadcrumb = {
-    pathname: string;
-    titleKey: string;
-};
-
-export default Breadcrumb;
diff --git a/resources/js/app.tsx b/resources/js/app.tsx
index ce37aa55..26443657 100644
--- a/resources/js/app.tsx
+++ b/resources/js/app.tsx
@@ -1,30 +1,25 @@
-import './bootstrap';
-import '../css/app.css';
-
 import {createRoot} from 'react-dom/client';
-import {createInertiaApp} from '@inertiajs/react';
-import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
+import NProgress from 'nprogress';
 import {LaravelReactI18nProvider} from 'laravel-react-i18n';
 import getBrowserLocale from '@/Utils/getBrowserLocale';
 import AppWithLoadedTranslations from '@/Components/AppWithLoadedTranslations';
+import AppWithToasts from '@/AppWithToasts';
 
-window.appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
-
-void createInertiaApp({
-    title: (title: string): string => `${title} - ${window.appName}`,
-    resolve: (name: string) => resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
-    setup({el, App, props}) {
-        createRoot(el).render(
-            <LaravelReactI18nProvider
-                locale={getBrowserLocale()}
-                fallbackLocale="en"
-                files={import.meta.glob('/lang/*.json', {eager: true})}
-            >
-                <AppWithLoadedTranslations app={App} {...props}/>
-            </LaravelReactI18nProvider>
-        );
-    },
-    progress: {
-        color: '#7c3aed',
-    },
+NProgress.configure({
+    showSpinner: false,
 });
+
+const App = () => {
+    return (
+        <LaravelReactI18nProvider
+            locale={getBrowserLocale()}
+            fallbackLocale="en"
+            files={import.meta.glob('/lang/*.json', {eager: true})}
+        >
+            <AppWithLoadedTranslations app={AppWithToasts}/>
+        </LaravelReactI18nProvider>
+    );
+};
+
+createRoot(document.getElementById('app')!)
+    .render(<App/>);
diff --git a/resources/js/V2/types/AuthContextType.ts b/resources/js/types/AuthContextType.ts
similarity index 100%
rename from resources/js/V2/types/AuthContextType.ts
rename to resources/js/types/AuthContextType.ts
diff --git a/resources/js/types/Breadcrumb.ts b/resources/js/types/Breadcrumb.ts
index 0cc283ff..5d3df70b 100644
--- a/resources/js/types/Breadcrumb.ts
+++ b/resources/js/types/Breadcrumb.ts
@@ -1,6 +1,6 @@
 type Breadcrumb = {
-    title: string;
-    url: string | null;
+    pathname: string;
+    titleKey: string;
 };
 
 export default Breadcrumb;
diff --git a/resources/js/V2/types/CategoriesLoaderType.ts b/resources/js/types/CategoriesLoaderType.ts
similarity index 100%
rename from resources/js/V2/types/CategoriesLoaderType.ts
rename to resources/js/types/CategoriesLoaderType.ts
diff --git a/resources/js/V2/types/CreateCategoryValidationErrors.ts b/resources/js/types/CreateCategoryValidationErrors.ts
similarity index 69%
rename from resources/js/V2/types/CreateCategoryValidationErrors.ts
rename to resources/js/types/CreateCategoryValidationErrors.ts
index a2a495b6..620e5363 100644
--- a/resources/js/V2/types/CreateCategoryValidationErrors.ts
+++ b/resources/js/types/CreateCategoryValidationErrors.ts
@@ -1,4 +1,4 @@
-import ValidationErrors from '@/V2/types/ValidationErrors';
+import ValidationErrors from '@/types/ValidationErrors';
 
 type CreateCategoryValidationErrors = ValidationErrors & {
     name?: string;
diff --git a/resources/js/V2/types/CreateFeedLoaderType.ts b/resources/js/types/CreateFeedLoaderType.ts
similarity index 100%
rename from resources/js/V2/types/CreateFeedLoaderType.ts
rename to resources/js/types/CreateFeedLoaderType.ts
diff --git a/resources/js/V2/types/CreateFeedValidationErrors.ts b/resources/js/types/CreateFeedValidationErrors.ts
similarity index 80%
rename from resources/js/V2/types/CreateFeedValidationErrors.ts
rename to resources/js/types/CreateFeedValidationErrors.ts
index 4390c3c6..93b7144c 100644
--- a/resources/js/V2/types/CreateFeedValidationErrors.ts
+++ b/resources/js/types/CreateFeedValidationErrors.ts
@@ -1,4 +1,4 @@
-import ValidationErrors from '@/V2/types/ValidationErrors';
+import ValidationErrors from '@/types/ValidationErrors';
 
 type CreateFeedValidationErrors = ValidationErrors & {
     name?: string;
diff --git a/resources/js/V2/types/EditCategoryLoaderType.ts b/resources/js/types/EditCategoryLoaderType.ts
similarity index 100%
rename from resources/js/V2/types/EditCategoryLoaderType.ts
rename to resources/js/types/EditCategoryLoaderType.ts
diff --git a/resources/js/V2/types/EditCategoryValidationErrors.ts b/resources/js/types/EditCategoryValidationErrors.ts
similarity index 68%
rename from resources/js/V2/types/EditCategoryValidationErrors.ts
rename to resources/js/types/EditCategoryValidationErrors.ts
index 1867a051..cb689f4d 100644
--- a/resources/js/V2/types/EditCategoryValidationErrors.ts
+++ b/resources/js/types/EditCategoryValidationErrors.ts
@@ -1,4 +1,4 @@
-import ValidationErrors from '@/V2/types/ValidationErrors';
+import ValidationErrors from '@/types/ValidationErrors';
 
 type EditCategoryValidationErrors = ValidationErrors & {
     name?: string;
diff --git a/resources/js/V2/types/EditFeddLoaderType.ts b/resources/js/types/EditFeddLoaderType.ts
similarity index 100%
rename from resources/js/V2/types/EditFeddLoaderType.ts
rename to resources/js/types/EditFeddLoaderType.ts
diff --git a/resources/js/V2/types/EditFeedValidationErrors.ts b/resources/js/types/EditFeedValidationErrors.ts
similarity index 80%
rename from resources/js/V2/types/EditFeedValidationErrors.ts
rename to resources/js/types/EditFeedValidationErrors.ts
index 89281422..5f2597ba 100644
--- a/resources/js/V2/types/EditFeedValidationErrors.ts
+++ b/resources/js/types/EditFeedValidationErrors.ts
@@ -1,4 +1,4 @@
-import ValidationErrors from '@/V2/types/ValidationErrors';
+import ValidationErrors from '@/types/ValidationErrors';
 
 type EditFeedValidationErrors = ValidationErrors & {
     name?: string;
diff --git a/resources/js/V2/types/FeedItemsLoaderType.ts b/resources/js/types/FeedItemsLoaderType.ts
similarity index 100%
rename from resources/js/V2/types/FeedItemsLoaderType.ts
rename to resources/js/types/FeedItemsLoaderType.ts
diff --git a/resources/js/V2/types/FeedsLoaderType.ts b/resources/js/types/FeedsLoaderType.ts
similarity index 100%
rename from resources/js/V2/types/FeedsLoaderType.ts
rename to resources/js/types/FeedsLoaderType.ts
diff --git a/resources/js/V2/types/HomeLocationState.ts b/resources/js/types/HomeLocationState.ts
similarity index 100%
rename from resources/js/V2/types/HomeLocationState.ts
rename to resources/js/types/HomeLocationState.ts
diff --git a/resources/js/V2/types/MatchWithHandle.tsx b/resources/js/types/MatchWithHandle.tsx
similarity index 73%
rename from resources/js/V2/types/MatchWithHandle.tsx
rename to resources/js/types/MatchWithHandle.tsx
index 3f6e539a..ab9cd18f 100644
--- a/resources/js/V2/types/MatchWithHandle.tsx
+++ b/resources/js/types/MatchWithHandle.tsx
@@ -1,5 +1,5 @@
 import {UIMatch} from 'react-router-dom';
-import RouteHandle from '@/V2/types/RouteHandle';
+import RouteHandle from '@/types/RouteHandle';
 
 type MatchWithHandle = UIMatch & {
     handle: RouteHandle;
diff --git a/resources/js/V2/types/ProfileLoaderType.ts b/resources/js/types/ProfileLoaderType.ts
similarity index 100%
rename from resources/js/V2/types/ProfileLoaderType.ts
rename to resources/js/types/ProfileLoaderType.ts
diff --git a/resources/js/V2/types/RouteHandle.ts b/resources/js/types/RouteHandle.ts
similarity index 100%
rename from resources/js/V2/types/RouteHandle.ts
rename to resources/js/types/RouteHandle.ts
diff --git a/resources/js/V2/types/TotalNumberOfFeedItemsContextType.ts b/resources/js/types/TotalNumberOfFeedItemsContextType.ts
similarity index 100%
rename from resources/js/V2/types/TotalNumberOfFeedItemsContextType.ts
rename to resources/js/types/TotalNumberOfFeedItemsContextType.ts
diff --git a/resources/js/V2/types/UpdatePasswordValidationErrors.ts b/resources/js/types/UpdatePasswordValidationErrors.ts
similarity index 77%
rename from resources/js/V2/types/UpdatePasswordValidationErrors.ts
rename to resources/js/types/UpdatePasswordValidationErrors.ts
index 9dee9ada..bdf7e1c0 100644
--- a/resources/js/V2/types/UpdatePasswordValidationErrors.ts
+++ b/resources/js/types/UpdatePasswordValidationErrors.ts
@@ -1,4 +1,4 @@
-import ValidationErrors from '@/V2/types/ValidationErrors';
+import ValidationErrors from '@/types/ValidationErrors';
 
 type UpdatePasswordValidationErrors = ValidationErrors & {
     current_password?: string;
diff --git a/resources/js/V2/types/UpdateProfileValidationErrors.ts b/resources/js/types/UpdateProfileValidationErrors.ts
similarity index 72%
rename from resources/js/V2/types/UpdateProfileValidationErrors.ts
rename to resources/js/types/UpdateProfileValidationErrors.ts
index 37ea24de..2112636c 100644
--- a/resources/js/V2/types/UpdateProfileValidationErrors.ts
+++ b/resources/js/types/UpdateProfileValidationErrors.ts
@@ -1,4 +1,4 @@
-import ValidationErrors from '@/V2/types/ValidationErrors';
+import ValidationErrors from '@/types/ValidationErrors';
 
 type UpdateProfileValidationErrors = ValidationErrors & {
     name?: string;
diff --git a/resources/js/V2/types/UsersLoaderType.ts b/resources/js/types/UsersLoaderType.ts
similarity index 100%
rename from resources/js/V2/types/UsersLoaderType.ts
rename to resources/js/types/UsersLoaderType.ts
diff --git a/resources/js/V2/types/ValidationErrors.ts b/resources/js/types/ValidationErrors.ts
similarity index 100%
rename from resources/js/V2/types/ValidationErrors.ts
rename to resources/js/types/ValidationErrors.ts
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index ad1d4bee..636141f8 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="description" content="{{ __('welcome.headline', ['name' => config('app.name', 'Laravel')]) }}">
 
-        <title inertia>{{ config('app.name', 'Laravel') }}</title>
+        <title>{{ config('app.name', 'Laravel') }}</title>
 
         @include('partials.favicon')
 
@@ -14,12 +14,10 @@
         <link href="https://fonts.bunny.net/css?family=nunito-sans:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet" />
 
         <!-- Scripts -->
-        @routes
         @viteReactRefresh
-        @vite(['resources/js/app.tsx', "resources/js/Pages/{$page['component']}.tsx"])
-        @inertiaHead
+        @vite(['resources/js/app.tsx', 'resources/js/bootstrap.ts', 'resources/css/app.css'])
     </head>
     <body class="font-sans antialiased">
-        @inertia
+        <div id="app"></div>
     </body>
 </html>
diff --git a/resources/views/app_react.blade.php b/resources/views/app_inertia.blade.php
similarity index 77%
rename from resources/views/app_react.blade.php
rename to resources/views/app_inertia.blade.php
index 0b1b41f0..4d951662 100644
--- a/resources/views/app_react.blade.php
+++ b/resources/views/app_inertia.blade.php
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="description" content="{{ __('welcome.headline', ['name' => config('app.name', 'Laravel')]) }}">
 
-        <title>{{ config('app.name', 'Laravel') }}</title>
+        <title inertia>{{ config('app.name', 'Laravel') }}</title>
 
         @include('partials.favicon')
 
@@ -14,10 +14,12 @@
         <link href="https://fonts.bunny.net/css?family=nunito-sans:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet" />
 
         <!-- Scripts -->
+        @routes
         @viteReactRefresh
-        @vite(['resources/js/V2/app.tsx', 'resources/js/bootstrap.ts', 'resources/css/app.css'])
+        @vite(['resources/js/Inertia/app.tsx', "resources/js/Inertia/Pages/{$page['component']}.tsx"])
+        @inertiaHead
     </head>
     <body class="font-sans antialiased">
-        <div id="app"></div>
+        @inertia
     </body>
 </html>
diff --git a/routes/web.php b/routes/web.php
index 8ce2b341..4132c447 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -25,7 +25,7 @@
 Route::get('/', function (Request $request) {
     if ($request->user())
     {
-        return view('app_react');
+        return view('app');
     }
 
     return Inertia::render('Welcome', [
@@ -37,8 +37,6 @@
 });
 
 Route::middleware('auth')->group(function () {
-    Route::get('/dashboard', DashboardController::class)->name('dashboard');
-
     Route::middleware('verified')->group(function () {
 
     });
@@ -47,5 +45,5 @@
 require __DIR__.'/auth.php';
 
 Route::get('{all?}', function() {
-    return view('app_react');
+    return view('app');
 })->where(['all' => '.*']);
diff --git a/vite.config.mjs b/vite.config.mjs
index d63e56f3..71ca4ce4 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -6,7 +6,7 @@ import i18n from 'laravel-react-i18n/vite';
 export default defineConfig({
     plugins: [
         laravel({
-            input: 'resources/js/app.tsx',
+            input: 'resources/js/Inertia/app.tsx',
             refresh: true,
         }),
         react(),

From 60da69b56e8ad9e46be8d323ccda7215100d61a6 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 15 Mar 2024 21:44:41 +0100
Subject: [PATCH 52/79] renamed request function

---
 resources/js/Components/FeedItemCard.tsx             |  4 ++--
 resources/js/Core/AuthenticatedLayout.tsx            |  4 ++--
 .../js/Core/Router/Actions/createCategoryAction.ts   |  8 ++++----
 resources/js/Core/Router/Actions/createFeedAction.ts |  8 ++++----
 .../js/Core/Router/Actions/editCategoryAction.ts     | 10 +++++-----
 resources/js/Core/Router/Actions/editFeedAction.ts   | 10 +++++-----
 resources/js/Core/Router/Actions/profileAction.ts    | 12 ++++++------
 resources/js/Core/Router/Actions/usersAction.ts      |  8 ++++----
 resources/js/Core/Router/Loaders/categoriesLoader.ts |  4 ++--
 resources/js/Core/Router/Loaders/createFeedLoader.ts |  4 ++--
 .../js/Core/Router/Loaders/editCategoryLoader.ts     |  4 ++--
 resources/js/Core/Router/Loaders/editFeedLoader.ts   |  4 ++--
 resources/js/Core/Router/Loaders/feedItemsLoader.ts  |  8 ++++----
 resources/js/Core/Router/Loaders/feedsLoader.ts      |  4 ++--
 resources/js/Core/Router/Loaders/layoutLoader.ts     |  4 ++--
 resources/js/Core/Router/Loaders/profileLoader.ts    |  4 ++--
 resources/js/Core/Router/Loaders/usersLoader.ts      |  4 ++--
 resources/js/Core/{request.ts => rq.ts}              |  4 ++--
 resources/js/Pages/Feeds/Partials/FeedForm.tsx       |  6 +++---
 resources/js/Pages/Home.tsx                          |  4 ++--
 20 files changed, 59 insertions(+), 59 deletions(-)
 rename resources/js/Core/{request.ts => rq.ts} (93%)

diff --git a/resources/js/Components/FeedItemCard.tsx b/resources/js/Components/FeedItemCard.tsx
index 59c09cb4..32a92520 100644
--- a/resources/js/Components/FeedItemCard.tsx
+++ b/resources/js/Components/FeedItemCard.tsx
@@ -9,7 +9,7 @@ import EyeSlashOutlineIcon from '@/Icons/EyeSlashOutlineIcon';
 import formatDateTime from '@/Utils/formatDateTime';
 import CalendarDaysSolidIcon from '@/Icons/CalendarDaysSolidIcon';
 import FeedItem from '@/types/generated/Models/FeedItem';
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import TotalNumberOfFeedItemsContext from '@/Contexts/TotalNumberOfFeedItemsContext';
 
 export default function FeedItemCard({hueRotationIndex, feedItem}: { hueRotationIndex: number; feedItem: FeedItem; }) {
@@ -21,7 +21,7 @@ export default function FeedItemCard({hueRotationIndex, feedItem}: { hueRotation
     const toggle = () => {
         setProcessing(true);
 
-        void request.put(`/feeds/${internalFeedItem.id}/toggle`)
+        void rq.put(`/feeds/${internalFeedItem.id}/toggle`)
             .json<FeedItem>()
             .then((data) => {
                 if (data.read_at) {
diff --git a/resources/js/Core/AuthenticatedLayout.tsx b/resources/js/Core/AuthenticatedLayout.tsx
index 6f9544be..bc3921ee 100644
--- a/resources/js/Core/AuthenticatedLayout.tsx
+++ b/resources/js/Core/AuthenticatedLayout.tsx
@@ -7,7 +7,7 @@ import Dropdown from '@/Components/Dropdown';
 import DropdownArrowIcon from '@/Icons/DropdownArrowIcon';
 import useAuth from '@/Hooks/useAuth';
 import User from '@/types/generated/Models/User';
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import {Transition} from '@headlessui/react';
 import clsx from 'clsx';
 
@@ -40,7 +40,7 @@ const AuthenticatedLayout = () => {
     }, [isNavigationMenuOpen]);
 
     const handleLogout = async () => {
-        await request.delete('/api/logout');
+        await rq.delete('/api/logout');
 
         window.location.href = '/';
     };
diff --git a/resources/js/Core/Router/Actions/createCategoryAction.ts b/resources/js/Core/Router/Actions/createCategoryAction.ts
index c1da5a8f..a00f5914 100644
--- a/resources/js/Core/Router/Actions/createCategoryAction.ts
+++ b/resources/js/Core/Router/Actions/createCategoryAction.ts
@@ -1,12 +1,12 @@
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import {ActionFunction} from '@remix-run/router/utils';
 import handleRequestValidationError from '@/Core/Router/Helpers/handleRequestValidationError';
 import toast from 'react-hot-toast';
 
-const createCategoryAction: ActionFunction = async ({request: req}) => {
-    const formData = await req.formData();
+const createCategoryAction: ActionFunction = async ({request}) => {
+    const formData = await request.formData();
 
-    const response = await handleRequestValidationError(() => request.post('/api/categories', {json: Object.fromEntries(formData)}));
+    const response = await handleRequestValidationError(() => rq.post('/api/categories', {json: Object.fromEntries(formData)}));
 
     toast('Category saved.');
 
diff --git a/resources/js/Core/Router/Actions/createFeedAction.ts b/resources/js/Core/Router/Actions/createFeedAction.ts
index fff99fc5..fb33f1ca 100644
--- a/resources/js/Core/Router/Actions/createFeedAction.ts
+++ b/resources/js/Core/Router/Actions/createFeedAction.ts
@@ -1,16 +1,16 @@
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import {ActionFunction} from '@remix-run/router/utils';
 import handleRequestValidationError from '@/Core/Router/Helpers/handleRequestValidationError';
 import toast from 'react-hot-toast';
 
-const createFeedAction: ActionFunction = async ({request: req}) => {
-    const formData = await req.formData();
+const createFeedAction: ActionFunction = async ({request}) => {
+    const formData = await request.formData();
 
     if (!formData.get('is_purgeable')) {
         formData.append('is_purgeable', '0');
     }
 
-    const response = await handleRequestValidationError(() => request.post('/api/feeds', {json: Object.fromEntries(formData)}));
+    const response = await handleRequestValidationError(() => rq.post('/api/feeds', {json: Object.fromEntries(formData)}));
 
     toast('Feed saved.');
 
diff --git a/resources/js/Core/Router/Actions/editCategoryAction.ts b/resources/js/Core/Router/Actions/editCategoryAction.ts
index 293b882c..2adb23e0 100644
--- a/resources/js/Core/Router/Actions/editCategoryAction.ts
+++ b/resources/js/Core/Router/Actions/editCategoryAction.ts
@@ -1,20 +1,20 @@
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import {ActionFunction} from '@remix-run/router/utils';
 import handleRequestValidationError from '@/Core/Router/Helpers/handleRequestValidationError';
 import toast from 'react-hot-toast';
 
-const editCategoryAction: ActionFunction = async ({params, request: req}) => {
-    const formData = await req.formData();
+const editCategoryAction: ActionFunction = async ({params, request}) => {
+    const formData = await request.formData();
 
     if (formData.get('intent') === 'delete') {
-        await request.delete(`/api/categories/${params.categoryId}`);
+        await rq.delete(`/api/categories/${params.categoryId}`);
 
         toast('Category deleted.');
 
         return null;
     }
 
-    const response = await handleRequestValidationError(() => request.put(`/api/categories/${params.categoryId}`, {json: Object.fromEntries(formData)}));
+    const response = await handleRequestValidationError(() => rq.put(`/api/categories/${params.categoryId}`, {json: Object.fromEntries(formData)}));
 
     toast('Category saved.');
 
diff --git a/resources/js/Core/Router/Actions/editFeedAction.ts b/resources/js/Core/Router/Actions/editFeedAction.ts
index bbd8f5b4..850912ae 100644
--- a/resources/js/Core/Router/Actions/editFeedAction.ts
+++ b/resources/js/Core/Router/Actions/editFeedAction.ts
@@ -1,24 +1,24 @@
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import {ActionFunction} from '@remix-run/router/utils';
 import handleRequestValidationError from '@/Core/Router/Helpers/handleRequestValidationError';
 import toast from 'react-hot-toast';
 
-const editFeedAction: ActionFunction = async ({params, request: req}) => {
-    const formData = await req.formData();
+const editFeedAction: ActionFunction = async ({params, request}) => {
+    const formData = await request.formData();
 
     if (!formData.get('is_purgeable')) {
         formData.append('is_purgeable', '0');
     }
 
     if (formData.get('intent') === 'delete') {
-        await request.delete(`/api/feeds/${params.feedId}`);
+        await rq.delete(`/api/feeds/${params.feedId}`);
 
         toast('Feed deleted.');
 
         return null;
     }
 
-    const response = await handleRequestValidationError(() => request.put(`/api/feeds/${params.feedId}`, {json: Object.fromEntries(formData)}));
+    const response = await handleRequestValidationError(() => rq.put(`/api/feeds/${params.feedId}`, {json: Object.fromEntries(formData)}));
 
     toast('Feed saved.');
 
diff --git a/resources/js/Core/Router/Actions/profileAction.ts b/resources/js/Core/Router/Actions/profileAction.ts
index a994061f..32840655 100644
--- a/resources/js/Core/Router/Actions/profileAction.ts
+++ b/resources/js/Core/Router/Actions/profileAction.ts
@@ -1,14 +1,14 @@
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import {ActionFunction} from '@remix-run/router/utils';
 import handleRequestValidationError from '@/Core/Router/Helpers/handleRequestValidationError';
 import {redirect} from 'react-router-dom';
 import toast from 'react-hot-toast';
 
-const profileAction: ActionFunction = async ({request: req}) => {
-    const formData = await req.formData();
+const profileAction: ActionFunction = async ({request}) => {
+    const formData = await request.formData();
 
     if (formData.get('intent') === 'update-profile') {
-        const response = await handleRequestValidationError(() => request.patch('/api/profile', {json: Object.fromEntries(formData)}), '/');
+        const response = await handleRequestValidationError(() => rq.patch('/api/profile', {json: Object.fromEntries(formData)}), '/');
 
         toast('Profile saved.');
 
@@ -16,7 +16,7 @@ const profileAction: ActionFunction = async ({request: req}) => {
     }
 
     if (formData.get('intent') === 'update-password') {
-        const response = await handleRequestValidationError(() => request.put('/api/password', {json: Object.fromEntries(formData)}), '/');
+        const response = await handleRequestValidationError(() => rq.put('/api/password', {json: Object.fromEntries(formData)}), '/');
 
         toast('Password updated.');
 
@@ -24,7 +24,7 @@ const profileAction: ActionFunction = async ({request: req}) => {
     }
 
     if (formData.get('intent') === 'delete') {
-        const errors = await handleRequestValidationError(() => request.delete('/api/profile', {json: Object.fromEntries(formData)}));
+        const errors = await handleRequestValidationError(() => rq.delete('/api/profile', {json: Object.fromEntries(formData)}));
 
         if (errors) {
             return errors;
diff --git a/resources/js/Core/Router/Actions/usersAction.ts b/resources/js/Core/Router/Actions/usersAction.ts
index 690eab71..f8d230cf 100644
--- a/resources/js/Core/Router/Actions/usersAction.ts
+++ b/resources/js/Core/Router/Actions/usersAction.ts
@@ -1,13 +1,13 @@
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import {ActionFunction} from '@remix-run/router/utils';
 import {redirect} from 'react-router-dom';
 import toast from 'react-hot-toast';
 
-const usersAction: ActionFunction = async ({request: req}) => {
-    const formData = await req.formData();
+const usersAction: ActionFunction = async ({request}) => {
+    const formData = await request.formData();
 
     if (formData.get('intent') === 'delete') {
-        await request.delete(`/api/admin/users/${formData.get('userId')}`);
+        await rq.delete(`/api/admin/users/${formData.get('userId')}`);
 
         toast('User deleted.');
     }
diff --git a/resources/js/Core/Router/Loaders/categoriesLoader.ts b/resources/js/Core/Router/Loaders/categoriesLoader.ts
index 0c34aa97..3cb6e357 100644
--- a/resources/js/Core/Router/Loaders/categoriesLoader.ts
+++ b/resources/js/Core/Router/Loaders/categoriesLoader.ts
@@ -1,9 +1,9 @@
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import {LoaderFunction} from '@remix-run/router/utils';
 import CategoriesLoaderType from '@/types/CategoriesLoaderType';
 
 const categoriesLoader: LoaderFunction = async () => {
-    return await request('/api/categories').json<CategoriesLoaderType>();
+    return await rq('/api/categories').json<CategoriesLoaderType>();
 };
 
 export default categoriesLoader;
diff --git a/resources/js/Core/Router/Loaders/createFeedLoader.ts b/resources/js/Core/Router/Loaders/createFeedLoader.ts
index 44efb9ef..f4432ce3 100644
--- a/resources/js/Core/Router/Loaders/createFeedLoader.ts
+++ b/resources/js/Core/Router/Loaders/createFeedLoader.ts
@@ -1,9 +1,9 @@
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import {LoaderFunction} from '@remix-run/router/utils';
 import CreateFeedLoaderType from '@/types/CreateFeedLoaderType';
 
 const createFeedLoader: LoaderFunction = async () => {
-    return await request('/api/feeds/create').json<CreateFeedLoaderType>();
+    return await rq('/api/feeds/create').json<CreateFeedLoaderType>();
 };
 
 export default createFeedLoader;
diff --git a/resources/js/Core/Router/Loaders/editCategoryLoader.ts b/resources/js/Core/Router/Loaders/editCategoryLoader.ts
index 196d2915..66852c19 100644
--- a/resources/js/Core/Router/Loaders/editCategoryLoader.ts
+++ b/resources/js/Core/Router/Loaders/editCategoryLoader.ts
@@ -1,9 +1,9 @@
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import {LoaderFunction} from '@remix-run/router/utils';
 import EditCategoryLoaderType from '@/types/EditCategoryLoaderType';
 
 const editCategoryLoader: LoaderFunction = async ({params}) => {
-    return await request(`/api/categories/${params.categoryId}/edit`).json<EditCategoryLoaderType>();
+    return await rq(`/api/categories/${params.categoryId}/edit`).json<EditCategoryLoaderType>();
 };
 
 export default editCategoryLoader;
diff --git a/resources/js/Core/Router/Loaders/editFeedLoader.ts b/resources/js/Core/Router/Loaders/editFeedLoader.ts
index 6e6750ab..ad308f03 100644
--- a/resources/js/Core/Router/Loaders/editFeedLoader.ts
+++ b/resources/js/Core/Router/Loaders/editFeedLoader.ts
@@ -1,9 +1,9 @@
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import {LoaderFunction} from '@remix-run/router/utils';
 import EditFeedLoaderType from '@/types/EditFeddLoaderType';
 
 const editFeedLoader: LoaderFunction = async ({params}) => {
-    return await request(`/api/feeds/${params.feedId}/edit`).json<EditFeedLoaderType>();
+    return await rq(`/api/feeds/${params.feedId}/edit`).json<EditFeedLoaderType>();
 };
 
 export default editFeedLoader;
diff --git a/resources/js/Core/Router/Loaders/feedItemsLoader.ts b/resources/js/Core/Router/Loaders/feedItemsLoader.ts
index 14958022..a5f4868f 100644
--- a/resources/js/Core/Router/Loaders/feedItemsLoader.ts
+++ b/resources/js/Core/Router/Loaders/feedItemsLoader.ts
@@ -1,9 +1,9 @@
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import {LoaderFunction} from '@remix-run/router/utils';
 import FeedItemsLoaderType from '@/types/FeedItemsLoaderType';
 
-const feedItemsLoader: LoaderFunction = async ({request: req}) => {
-    const searchParams = new URL(req.url).searchParams;
+const feedItemsLoader: LoaderFunction = async ({request}) => {
+    const searchParams = new URL(request.url).searchParams;
     const cursor = searchParams.get('cursor');
     const feedId = searchParams.get('feed_id');
 
@@ -17,7 +17,7 @@ const feedItemsLoader: LoaderFunction = async ({request: req}) => {
         customSearchParams.set('feed_id', feedId);
     }
 
-    return await request(`/api/feed-items${customSearchParams.size > 0 ? `?${customSearchParams.toString()}` : ''}`).json<FeedItemsLoaderType>();
+    return await rq(`/api/feed-items${customSearchParams.size > 0 ? `?${customSearchParams.toString()}` : ''}`).json<FeedItemsLoaderType>();
 };
 
 export default feedItemsLoader;
diff --git a/resources/js/Core/Router/Loaders/feedsLoader.ts b/resources/js/Core/Router/Loaders/feedsLoader.ts
index 73c375e0..97736cd7 100644
--- a/resources/js/Core/Router/Loaders/feedsLoader.ts
+++ b/resources/js/Core/Router/Loaders/feedsLoader.ts
@@ -1,9 +1,9 @@
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import {LoaderFunction} from '@remix-run/router/utils';
 import FeedsLoaderType from '@/types/FeedsLoaderType';
 
 const feedsLoader: LoaderFunction = async () => {
-    return await request('/api/feeds').json<FeedsLoaderType>();
+    return await rq('/api/feeds').json<FeedsLoaderType>();
 };
 
 export default feedsLoader;
diff --git a/resources/js/Core/Router/Loaders/layoutLoader.ts b/resources/js/Core/Router/Loaders/layoutLoader.ts
index 75e52478..a32b640c 100644
--- a/resources/js/Core/Router/Loaders/layoutLoader.ts
+++ b/resources/js/Core/Router/Loaders/layoutLoader.ts
@@ -1,11 +1,11 @@
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import User from '@/types/generated/Models/User';
 import {LoaderFunction} from '@remix-run/router/utils';
 import {HTTPError} from 'ky';
 
 const layoutLoader: LoaderFunction = async () => {
     try {
-        return await request('/api/user').json<User>();
+        return await rq('/api/user').json<User>();
     } catch (error) {
         const errorResponse = (error as HTTPError).response;
 
diff --git a/resources/js/Core/Router/Loaders/profileLoader.ts b/resources/js/Core/Router/Loaders/profileLoader.ts
index 103f6882..aa4329b0 100644
--- a/resources/js/Core/Router/Loaders/profileLoader.ts
+++ b/resources/js/Core/Router/Loaders/profileLoader.ts
@@ -1,9 +1,9 @@
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import {LoaderFunction} from '@remix-run/router/utils';
 import ProfileLoaderType from '@/types/ProfileLoaderType';
 
 const profileLoader: LoaderFunction = async () => {
-    return await request('/api/profile').json<ProfileLoaderType>();
+    return await rq('/api/profile').json<ProfileLoaderType>();
 };
 
 export default profileLoader;
diff --git a/resources/js/Core/Router/Loaders/usersLoader.ts b/resources/js/Core/Router/Loaders/usersLoader.ts
index 068396da..7db1e019 100644
--- a/resources/js/Core/Router/Loaders/usersLoader.ts
+++ b/resources/js/Core/Router/Loaders/usersLoader.ts
@@ -1,4 +1,4 @@
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import {LoaderFunction} from '@remix-run/router/utils';
 import UsersLoaderType from '@/types/UsersLoaderType';
 import {redirect} from 'react-router-dom';
@@ -6,7 +6,7 @@ import {HTTPError} from 'ky';
 
 const usersLoader: LoaderFunction = async () => {
     try {
-        return await request('/api/admin/users').json<UsersLoaderType>();
+        return await rq('/api/admin/users').json<UsersLoaderType>();
     } catch (error) {
         const errorResponse = (error as HTTPError).response;
 
diff --git a/resources/js/Core/request.ts b/resources/js/Core/rq.ts
similarity index 93%
rename from resources/js/Core/request.ts
rename to resources/js/Core/rq.ts
index ac73d962..f0b04bb1 100644
--- a/resources/js/Core/request.ts
+++ b/resources/js/Core/rq.ts
@@ -2,7 +2,7 @@ import ky from 'ky';
 import NProgress from 'nprogress';
 import Cookies from 'js-cookie';
 
-const request = ky.extend({
+const rq = ky.extend({
     headers: {
         Accept: 'application/json',
     },
@@ -33,4 +33,4 @@ const request = ky.extend({
     },
 });
 
-export default request;
+export default rq;
diff --git a/resources/js/Pages/Feeds/Partials/FeedForm.tsx b/resources/js/Pages/Feeds/Partials/FeedForm.tsx
index 6b722111..6fd82451 100644
--- a/resources/js/Pages/Feeds/Partials/FeedForm.tsx
+++ b/resources/js/Pages/Feeds/Partials/FeedForm.tsx
@@ -11,7 +11,7 @@ import EditFeedValidationErrors from '@/types/EditFeedValidationErrors';
 import LinkStack from '@/Components/LinkStack';
 import Select from '@/Components/Select';
 import Checkbox from '@/Components/Checkbox';
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import DiscoveredFeed from '@/types/DiscoveredFeed';
 import {SelectNumberOption} from '@/types/SelectOption';
 import useAuth from '@/Hooks/useAuth';
@@ -35,7 +35,7 @@ export default function FeedForm({action, feed = null, categories, errors}: { ac
         setDiscoveredFeedUrls([]);
         setIsDiscoverFeedProcessing(true);
 
-        request.post('/api/discover-feed-urls', {json: {feed_url: searchUrl}})
+        rq.post('/api/discover-feed-urls', {json: {feed_url: searchUrl}})
             .json<string[]>()
             .then((data) => {
                 setDiscoveredFeedUrls(data);
@@ -49,7 +49,7 @@ export default function FeedForm({action, feed = null, categories, errors}: { ac
     const selectDiscoveredFeedUrl = (feedUrl: string) => () => {
         setIsDiscoverFeedProcessing(true);
 
-        request.post('/api/discover-feed', {json: {feed_url: feedUrl}})
+        rq.post('/api/discover-feed', {json: {feed_url: feedUrl}})
             .json<DiscoveredFeed>()
             .then((responseData) => {
                 nameRef.current!.value = responseData.name;
diff --git a/resources/js/Pages/Home.tsx b/resources/js/Pages/Home.tsx
index 83949006..b5379125 100644
--- a/resources/js/Pages/Home.tsx
+++ b/resources/js/Pages/Home.tsx
@@ -6,7 +6,7 @@ import {useContext, useEffect, useState} from 'react';
 import {isEmpty, length} from 'ramda';
 import NewspaperSolidIcon from '@/Icons/NewspaperSolidIcon';
 import EmptyState from '@/Components/EmptyState';
-import request from '@/Core/request';
+import rq from '@/Core/rq';
 import FeedItemCard from '@/Components/FeedItemCard';
 import TotalNumberOfFeedItemsContext from '@/Contexts/TotalNumberOfFeedItemsContext';
 import FeedFilterDropdown from '@/Components/FeedFilterDropdown';
@@ -79,7 +79,7 @@ export default function Home() {
     }, [fetcher]);
 
     const markAllAsRead = async () => {
-        await request.put('/feeds/mark-all-as-read');
+        await rq.put('/feeds/mark-all-as-read');
 
         setTotalNumberOfFeedItems(0);
 

From 03bb8aaab744ffdc2c8f42ad90c39cdbf7fc4b54 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Fri, 15 Mar 2024 21:46:35 +0100
Subject: [PATCH 53/79] fixed ESLint warnings

---
 resources/js/Components/Dropdown.tsx           | 2 +-
 resources/js/Components/FeedFilterDropdown.tsx | 2 +-
 resources/js/Components/TextInput.tsx          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/Components/Dropdown.tsx b/resources/js/Components/Dropdown.tsx
index d3581bd5..8cd9d895 100644
--- a/resources/js/Components/Dropdown.tsx
+++ b/resources/js/Components/Dropdown.tsx
@@ -143,7 +143,7 @@ const DropdownButton = ({onClick, className = '', children}: { onClick: () => vo
         >
             {children}
         </HeadlessButton>
-    )
+    );
 };
 
 const Spacer = () => <div className="pt-2 mb-2 border-b dark:border-gray-600"/>;
diff --git a/resources/js/Components/FeedFilterDropdown.tsx b/resources/js/Components/FeedFilterDropdown.tsx
index 08757098..89e4a7f3 100644
--- a/resources/js/Components/FeedFilterDropdown.tsx
+++ b/resources/js/Components/FeedFilterDropdown.tsx
@@ -1,6 +1,6 @@
 import Dropdown from '@/Components/Dropdown';
 import {useLaravelReactI18n} from 'laravel-react-i18n';
-import {HeadlessButton, TertiaryButton} from '@/Components/Button';
+import {TertiaryButton} from '@/Components/Button';
 import FunnelOutlineIcon from '@/Icons/FunnelOutlineIcon';
 import DropdownArrowIcon from '@/Icons/DropdownArrowIcon';
 import {OtherProps} from '@/types';
diff --git a/resources/js/Components/TextInput.tsx b/resources/js/Components/TextInput.tsx
index 01e2c86d..0476394a 100644
--- a/resources/js/Components/TextInput.tsx
+++ b/resources/js/Components/TextInput.tsx
@@ -1,4 +1,4 @@
-import {forwardRef, InputHTMLAttributes, Ref, useEffect, useImperativeHandle, useRef} from 'react';
+import {forwardRef, InputHTMLAttributes, useEffect, useImperativeHandle, useRef} from 'react';
 import clsx from 'clsx';
 
 type TextInputProps = InputHTMLAttributes<HTMLInputElement> & { isFocused?: boolean; };

From 1c4b84106e1b15fd7d93de46f7989091f86e7798 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 16 Mar 2024 09:44:19 +0100
Subject: [PATCH 54/79] fixed category controller tests

---
 .../Controllers/Api/CategoryController.php    |  12 --
 app/Http/Controllers/CategoryController.php   |  85 --------------
 resources/js/Inertia/app.tsx                  |   4 +-
 resources/js/Inertia/test.http                |   4 +
 routes/api.php                                |  10 +-
 routes/web.php                                |   7 --
 .../{ => Api}/CategoryControllerTest.php      | 107 +++++++++---------
 7 files changed, 63 insertions(+), 166 deletions(-)
 delete mode 100644 app/Http/Controllers/CategoryController.php
 create mode 100644 resources/js/Inertia/test.http
 rename tests/Feature/Http/Controllers/{ => Api}/CategoryControllerTest.php (61%)

diff --git a/app/Http/Controllers/Api/CategoryController.php b/app/Http/Controllers/Api/CategoryController.php
index 66086715..c29766cf 100644
--- a/app/Http/Controllers/Api/CategoryController.php
+++ b/app/Http/Controllers/Api/CategoryController.php
@@ -8,8 +8,6 @@
 use App\Models\Category;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Support\Facades\Auth;
-use Inertia\Inertia;
-use Inertia\Response;
 
 class CategoryController extends Controller
 {
@@ -29,16 +27,6 @@ public function index(): JsonResponse
         ]);
     }
 
-    /**
-     * Show the form for creating a new resource.
-     */
-    public function create(): Response
-    {
-        return Inertia::render('Categories/Create', [
-            'category' => new Category(),
-        ]);
-    }
-
     /**
      * Store a newly created resource in storage.
      */
diff --git a/app/Http/Controllers/CategoryController.php b/app/Http/Controllers/CategoryController.php
deleted file mode 100644
index 48ae4610..00000000
--- a/app/Http/Controllers/CategoryController.php
+++ /dev/null
@@ -1,85 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use App\Http\Requests\StoreCategoryRequest;
-use App\Http\Requests\UpdateCategoryRequest;
-use App\Models\Category;
-use Illuminate\Http\RedirectResponse;
-use Illuminate\Support\Facades\Auth;
-use Inertia\Inertia;
-use Inertia\Response;
-
-class CategoryController extends Controller
-{
-    public function __construct()
-    {
-        $this->authorizeResource(Category::class);
-    }
-
-    /**
-     * Display a listing of the resource.
-     */
-    public function index(): Response
-    {
-        return Inertia::render('Categories/Index', [
-            'categories' => Auth::user()->categories()->withCount('feeds')->get(),
-            'canCreate' => Auth::user()->can('create', Category::class),
-        ]);
-    }
-
-    /**
-     * Show the form for creating a new resource.
-     */
-    public function create(): Response
-    {
-        return Inertia::render('Categories/Create', [
-            'category' => new Category(),
-        ]);
-    }
-
-    /**
-     * Store a newly created resource in storage.
-     */
-    public function store(StoreCategoryRequest $request): RedirectResponse
-    {
-        $validated = $request->validated();
-
-        Auth::user()->categories()->save(new Category($validated));
-
-        return redirect()->route('categories.index');
-    }
-
-    /**
-     * Show the form for editing the specified resource.
-     */
-    public function edit(Category $category): Response
-    {
-        return Inertia::render('Categories/Edit', [
-            'category' => $category,
-            'canDelete' => Auth::user()->can('delete', $category),
-        ]);
-    }
-
-    /**
-     * Update the specified resource in storage.
-     */
-    public function update(UpdateCategoryRequest $request, Category $category): RedirectResponse
-    {
-        $validated = $request->validated();
-
-        $category->update($validated);
-
-        return redirect()->route('categories.index');
-    }
-
-    /**
-     * Remove the specified resource from storage.
-     */
-    public function destroy(Category $category): RedirectResponse
-    {
-        $category->delete();
-
-        return redirect()->route('categories.index');
-    }
-}
diff --git a/resources/js/Inertia/app.tsx b/resources/js/Inertia/app.tsx
index ce37aa55..c848dc09 100644
--- a/resources/js/Inertia/app.tsx
+++ b/resources/js/Inertia/app.tsx
@@ -1,5 +1,5 @@
-import './bootstrap';
-import '../css/app.css';
+import '../bootstrap';
+import '../../css/app.css';
 
 import {createRoot} from 'react-dom/client';
 import {createInertiaApp} from '@inertiajs/react';
diff --git a/resources/js/Inertia/test.http b/resources/js/Inertia/test.http
new file mode 100644
index 00000000..3f020523
--- /dev/null
+++ b/resources/js/Inertia/test.http
@@ -0,0 +1,4 @@
+GET http://localhost:8000/api/categories
+Accept: application/json
+
+###
diff --git a/routes/api.php b/routes/api.php
index b494fb9b..94453a1c 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -7,7 +7,9 @@
 use App\Http\Controllers\Api\FeedController;
 use App\Http\Controllers\Api\FeedDiscovererController;
 use App\Http\Controllers\Api\FeedUrlDiscovererController;
+use App\Http\Controllers\Api\MarkAllUnreadFeedItemsAsReadController;
 use App\Http\Controllers\Api\ProfileController;
+use App\Http\Controllers\Api\ToggleFeedItemController;
 use App\Http\Controllers\Auth\AuthenticatedSessionController;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
@@ -23,7 +25,7 @@
 |
 */
 
-Route::middleware('auth:sanctum')->group(function () {
+Route::middleware('auth:sanctum')->as('api.')->group(function () {
     Route::get('/user', fn (Request $request) => $request->user());
 
     Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
@@ -34,10 +36,10 @@
 
     Route::delete('/logout', [AuthenticatedSessionController::class, 'destroy'])->name('logout');
 
-    Route::resource('categories', CategoryController::class);
-    Route::put('/feeds/mark-all-as-read', \App\Http\Controllers\Api\MarkAllUnreadFeedItemsAsReadController::class)->name('mark-all-as-read');
+    Route::resource('categories', CategoryController::class)->except(['create']);
+    Route::put('/feeds/mark-all-as-read', MarkAllUnreadFeedItemsAsReadController::class)->name('mark-all-as-read');
     Route::resource('feeds', FeedController::class);
-    Route::put('/feeds/{feedItem}/toggle', \App\Http\Controllers\Api\ToggleFeedItemController::class)->name('toggle-feed-item');
+    Route::put('/feeds/{feedItem}/toggle', ToggleFeedItemController::class)->name('toggle-feed-item');
 
     Route::post('discover-feed', FeedDiscovererController::class)->name('discover-feed');
     Route::post('discover-feed-urls', FeedUrlDiscovererController::class)->name('discover-feed-urls');
diff --git a/routes/web.php b/routes/web.php
index 4132c447..a3f02cb6 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,12 +1,5 @@
 <?php
 
-use App\Http\Controllers\CategoryController;
-use App\Http\Controllers\DashboardController;
-use App\Http\Controllers\FeedController;
-use App\Http\Controllers\FeedDiscovererController;
-use App\Http\Controllers\FeedUrlDiscovererController;
-use App\Http\Controllers\MarkAllUnreadFeedItemsAsReadController;
-use App\Http\Controllers\ToggleFeedItemController;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
diff --git a/tests/Feature/Http/Controllers/CategoryControllerTest.php b/tests/Feature/Http/Controllers/Api/CategoryControllerTest.php
similarity index 61%
rename from tests/Feature/Http/Controllers/CategoryControllerTest.php
rename to tests/Feature/Http/Controllers/Api/CategoryControllerTest.php
index 431ef402..a00d991f 100644
--- a/tests/Feature/Http/Controllers/CategoryControllerTest.php
+++ b/tests/Feature/Http/Controllers/Api/CategoryControllerTest.php
@@ -1,13 +1,12 @@
 <?php
 
-namespace Tests\Feature\Http\Controllers;
+namespace Http\Controllers\Api;
 
-use App\Http\Controllers\CategoryController;
+use App\Http\Controllers\Api\CategoryController;
 use App\Models\Category;
 use App\Models\User;
 use Illuminate\Foundation\Testing\RefreshDatabase;
 use Illuminate\Support\Arr;
-use Inertia\Testing\AssertableInertia as Assert;
 use Tests\TestCase;
 
 class CategoryControllerTest extends TestCase
@@ -36,31 +35,19 @@ public function test_index(): void
     {
         $this->actingAs($user = User::factory()->create());
 
-        Category::factory()->for($user)->create();
+        $category = Category::factory()->for($user)->create();
 
-        $this->get(route('categories.index'))
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('Categories/Index')
-                ->count('categories', 1)
-                ->where('canCreate', true)
-            );
+        $this->json('get', route('api.categories.index'))
+            ->assertJson([
+                'categories' => [$category->toArray()],
+                'canCreate' => true,
+            ]);
     }
 
     public function test_cannot_access_index_as_guest(): void
     {
-        $response = $this->get(route('categories.index'));
-
-        $response->assertRedirect('/login');
-    }
-
-    public function test_create(): void
-    {
-        $this->actingAs(User::factory()->create());
-
-        $this->get(route('categories.create'))
-            ->assertInertia(fn (Assert $page) => $page
-                ->has('category')
-            );
+        $this->json('get', route('api.categories.index'))
+            ->assertUnauthorized();
     }
 
     public function test_store(): void
@@ -72,9 +59,9 @@ public function test_store(): void
         // here we test if the unique rule is only applied to a specific user's categories
         Category::factory()->state(['name' => $expectedName]);
 
-        $response = $this->post(route('categories.store'), ['name' => $expectedName]);
-
-        $response->assertRedirect(route('categories.index'));
+        $this->json('post', route('api.categories.store'), ['name' => $expectedName])
+            ->assertOk()
+            ->assertJson([]);
         static::assertSame(1, $user->categories()->count());
         static::assertSame($user->id, $user->categories()->first()->user_id);
         static::assertSame($expectedName, $user->categories()->first()->name);
@@ -86,11 +73,14 @@ public function test_store_validation_fails_due_to_duplicate_name(): void
 
         $expectedName = 'Test';
 
-        $this->get(route('categories.create'));
-        $response = $this->post(route('categories.store'), ['name' => $expectedName]);
-
-        $response->assertRedirect(route('categories.create'));
-        $response->assertSessionHasErrors(['name' => 'The Name has already been taken.']);
+        $this->json('post', route('api.categories.store'), ['name' => $expectedName])
+            ->assertUnprocessable()
+            ->assertJson([
+                'message' => 'The Name has already been taken.',
+                'errors' => [
+                    'name' => ['The Name has already been taken.'],
+                ],
+            ]);
         static::assertSame(1, $user->categories()->count());
     }
 
@@ -98,11 +88,14 @@ public function test_store_validation_fails_due_to_missing_data(): void
     {
         $this->actingAs($user = User::factory()->create());
 
-        $this->get(route('categories.create'));
-        $response = $this->post(route('categories.store'), ['name' => ' ']);
-
-        $response->assertRedirect(route('categories.create'));
-        $response->assertSessionHasErrors(['name' => 'The Name field is required.']);
+        $this->json('post', route('api.categories.store'), ['name' => ' '])
+            ->assertUnprocessable()
+            ->assertJson([
+                'message' => 'The Name field is required.',
+                'errors' => [
+                    'name' => ['The Name field is required.'],
+                ],
+            ]);
         static::assertSame(0, $user->categories()->count());
     }
 
@@ -112,11 +105,11 @@ public function test_edit(): void
 
         $category = Category::factory()->for($user)->create();
 
-        $this->get(route('categories.edit', $category))
-            ->assertInertia(fn (Assert $page) => $page
-                ->has('category')
-                ->where('canDelete', true)
-            );
+        $this->json('get', route('api.categories.edit', $category))
+            ->assertJson([
+                'category' => $category->toArray(),
+                'canDelete' => true,
+            ]);
     }
 
     public function test_cannot_edit_category_of_another_user(): void
@@ -125,7 +118,7 @@ public function test_cannot_edit_category_of_another_user(): void
 
         $category = Category::factory()->create();
 
-        $this->get(route('categories.edit', $category))
+        $this->json('get', route('api.categories.edit', $category))
             ->assertForbidden();
     }
 
@@ -140,9 +133,9 @@ public function test_update(): void
         // here we test if the unique rule is only applied to a specific user's categories
         Category::factory()->state(['name' => $expectedName]);
 
-        $response = $this->put(route('categories.update', $category), ['name' => $expectedName]);
-
-        $response->assertRedirect(route('categories.index'));
+        $this->json('put', route('api.categories.update', $category), ['name' => $expectedName])
+            ->assertOk()
+            ->assertJson([]);
         static::assertSame($user->id, $user->categories()->first()->user_id);
         static::assertSame($expectedName, $user->categories()->first()->name);
     }
@@ -153,7 +146,7 @@ public function test_cannot_update_category_of_another_user(): void
 
         $category = Category::factory()->create();
 
-        $this->put(route('categories.update', $category), ['name' => 'Test (updated)'])
+        $this->json('put', route('api.categories.update', $category), ['name' => 'Test (updated)'])
             ->assertForbidden();
     }
 
@@ -164,12 +157,14 @@ public function test_cannot_update_category_due_to_duplicate_name(): void
         Category::factory()->state(['name' => 'Test 1'])->for($user)->create();
         $category = Category::factory()->state(['name' => 'Test 2'])->for($user)->create();
 
-        $this->get(route('categories.edit', $category));
-
-        $response = $this->put(route('categories.update', $category), ['name' => 'Test 1']);
-
-        $response->assertRedirect(route('categories.edit', $category));
-        $response->assertSessionHasErrors(['name' => 'The Name has already been taken.']);
+        $this->json('put', route('api.categories.update', $category), ['name' => 'Test 1'])
+            ->assertUnprocessable()
+            ->assertJson([
+                'message' => 'The Name has already been taken.',
+                'errors' => [
+                    'name' => ['The Name has already been taken.'],
+                ],
+            ]);
     }
 
     public function test_delete(): void
@@ -178,9 +173,9 @@ public function test_delete(): void
 
         $category = Category::factory()->for($user)->create();
 
-        $response = $this->delete(route('categories.destroy', $category));
-
-        $response->assertRedirect(route('categories.index'));
+        $this->json('delete', route('api.categories.destroy', $category))
+            ->assertOk()
+            ->assertJson([]);
         static::assertSame(0, $user->categories()->count());
     }
 
@@ -190,7 +185,7 @@ public function test_cannot_delete_category_of_another_user(): void
 
         $category = Category::factory()->create();
 
-        $this->delete(route('categories.destroy', $category))
+        $this->json('delete', route('api.categories.destroy', $category))
             ->assertForbidden();
 
         static::assertSame(1, Category::count());

From 5a4e64e261fac2deea749e26b1889948ef890a1b Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 16 Mar 2024 10:14:29 +0100
Subject: [PATCH 55/79] fixed dashboard controller tests

---
 .../Controllers/Api/DashboardController.php   |   6 -
 app/Http/Controllers/DashboardController.php  |  48 -------
 routes/api.php                                |   2 +-
 .../Api/DashboardControllerTest.php           | 126 ++++++++++++++++++
 .../Controllers/DashboardControllerTest.php   | 108 ---------------
 5 files changed, 127 insertions(+), 163 deletions(-)
 delete mode 100644 app/Http/Controllers/DashboardController.php
 create mode 100644 tests/Feature/Http/Controllers/Api/DashboardControllerTest.php
 delete mode 100644 tests/Feature/Http/Controllers/DashboardControllerTest.php

diff --git a/app/Http/Controllers/Api/DashboardController.php b/app/Http/Controllers/Api/DashboardController.php
index 04f43600..3f0499d2 100644
--- a/app/Http/Controllers/Api/DashboardController.php
+++ b/app/Http/Controllers/Api/DashboardController.php
@@ -6,7 +6,6 @@
 use App\Http\Requests\DashboardRequest;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Http\JsonResponse;
-use Illuminate\Http\Response;
 use Illuminate\Routing\ResponseFactory;
 use Illuminate\Support\Facades\Auth;
 
@@ -33,11 +32,6 @@ public function __invoke(DashboardRequest $request): ResponseFactory|JsonRespons
             ->cursorPaginate()
             ->withQueryString();
 
-        // if feed filtering is active and there are no unread feed items go back to dashboard without query strings
-//        if ($feedId && $feedItems->isEmpty()) {
-//            return response()->json(new \stdClass());
-//        }
-
         return response()->json([
             'selectedFeed' => $feedId ? $unreadFeeds->firstWhere('id', $feedId) : null,
             'totalNumberOfFeedItems' => $totalNumberOfFeedItems,
diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
deleted file mode 100644
index 0d41fdb3..00000000
--- a/app/Http/Controllers/DashboardController.php
+++ /dev/null
@@ -1,48 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use App\Http\Requests\DashboardRequest;
-use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Http\RedirectResponse;
-use Illuminate\Support\Facades\Auth;
-use Inertia\Inertia;
-use Inertia\Response;
-
-class DashboardController extends Controller
-{
-    /**
-     * Handle the incoming request.
-     */
-    public function __invoke(DashboardRequest $request): RedirectResponse|Response
-    {
-        $feedId = $request->exists('feed_id') ? $request->integer('feed_id') : null;
-
-        $totalNumberOfFeedItems = Auth::user()->feedItems()->unread()->count();
-        $unreadFeeds = Auth::user()->feeds()
-            ->select(['id', 'name'])
-            ->whereHas('feedItems', fn (Builder $query) => $query->unread()) /** @phpstan-ignore-line */
-            ->withCount(['feedItems' => fn (Builder $query) => $query->unread()]) /** @phpstan-ignore-line */
-            ->get();
-
-        $feedItems = Auth::user()->feedItems()
-            ->unread()
-            ->when($feedId, fn (Builder $query) => $query->where('feed_id', $feedId)) /** @phpstan-ignore-line */
-            ->with('feed')
-            ->cursorPaginate()
-            ->withQueryString();
-
-        // if feed filtering is active and there are no unread feed items go back to dashboard without query strings
-        if ($feedId && $feedItems->isEmpty()) {
-            return redirect()->route('dashboard');
-        }
-
-        return Inertia::render('Dashboard', [
-            'selectedFeed' => $feedId ? $unreadFeeds->firstWhere('id', $feedId) : null,
-            'totalNumberOfFeedItems' => $totalNumberOfFeedItems,
-            'unreadFeeds' => $unreadFeeds,
-            'feedItems' => $feedItems,
-            'currentCursor' => $request->query('cursor'),
-        ]);
-    }
-}
diff --git a/routes/api.php b/routes/api.php
index 94453a1c..9dc7b876 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -44,7 +44,7 @@
     Route::post('discover-feed', FeedDiscovererController::class)->name('discover-feed');
     Route::post('discover-feed-urls', FeedUrlDiscovererController::class)->name('discover-feed-urls');
 
-    Route::get('feed-items', DashboardController::class);
+    Route::get('feed-items', DashboardController::class)->name('dashboard');
 
     Route::middleware('administrate')->prefix('admin')->as('admin.')->group(function () {
         Route::resource('users', UserController::class)->only(['index', 'destroy']);
diff --git a/tests/Feature/Http/Controllers/Api/DashboardControllerTest.php b/tests/Feature/Http/Controllers/Api/DashboardControllerTest.php
new file mode 100644
index 00000000..313ac212
--- /dev/null
+++ b/tests/Feature/Http/Controllers/Api/DashboardControllerTest.php
@@ -0,0 +1,126 @@
+<?php
+
+namespace Http\Controllers\Api;
+
+use App\Models\Feed;
+use App\Models\FeedItem;
+use App\Models\User;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Arr;
+use Illuminate\Support\Facades\Auth;
+use Tests\TestCase;
+
+class DashboardControllerTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_index(): void
+    {
+        $this->actingAs($user = User::factory()->create());
+
+        $feedWithUnreadFeedItems = Feed::factory()->for($user)->has(FeedItem::factory()->unread()->count(15))->create();
+        $anotherFeedWithUnreadFeedItems = Feed::factory()->for($user)->has(FeedItem::factory()->unread()->count(5))->create();
+        $feedWithoutUnreadFeedItems = Feed::factory()->for($user)->has(FeedItem::factory()->read()->count(6))->create();
+
+        // visit dashboard without any query parameters
+        $this->json('get', route('api.dashboard'))
+            ->assertJsonStructure([
+                'selectedFeed',
+                'totalNumberOfFeedItems',
+                'unreadFeeds',
+                'feedItems' => [
+                    'data',
+                    'path',
+                    'per_page',
+                    'next_cursor',
+                    'next_page_url',
+                    'prev_cursor',
+                    'prev_page_url',
+                ],
+                'currentCursor',
+            ])
+            ->assertJsonPath('selectedFeed', null)
+            ->assertJsonPath('totalNumberOfFeedItems', 20)
+            ->assertJsonCount(2, 'unreadFeeds')
+            ->assertJsonCount(15, 'feedItems.data')
+            ->assertJsonPath('currentCursor', null);
+
+        // visit dashboard with cursor query parameter
+        $feedItems = Auth::user()->feedItems()
+            ->unread()
+            ->cursorPaginate()
+            ->withQueryString();
+
+        $cursor = Arr::get($feedItems->toArray(), 'next_cursor');
+
+        $this->json('get', route('api.dashboard').'?'.Arr::query(['cursor' => $cursor]))
+            ->assertJsonStructure([
+                'selectedFeed',
+                'totalNumberOfFeedItems',
+                'unreadFeeds',
+                'feedItems' => [
+                    'data',
+                    'path',
+                    'per_page',
+                    'next_cursor',
+                    'next_page_url',
+                    'prev_cursor',
+                    'prev_page_url',
+                ],
+                'currentCursor',
+            ])
+            ->assertJsonPath('selectedFeed', null)
+            ->assertJsonPath('totalNumberOfFeedItems', 20)
+            ->assertJsonCount(2, 'unreadFeeds')
+            ->assertJsonCount(5, 'feedItems.data')
+            ->assertJsonPath('currentCursor', $cursor);
+
+        // visit dashboard with selected feed
+        $this->json('get', route('api.dashboard').'?'.Arr::query(['feed_id' => $feedWithUnreadFeedItems->id]))
+            ->assertJsonStructure([
+                'selectedFeed' => [
+                    'id',
+                    'name',
+                    'feed_items_count',
+                ],
+                'totalNumberOfFeedItems',
+                'unreadFeeds',
+                'feedItems' => [
+                    'data',
+                    'path',
+                    'per_page',
+                    'next_cursor',
+                    'next_page_url',
+                    'prev_cursor',
+                    'prev_page_url',
+                ],
+                'currentCursor',
+            ])
+            ->assertJsonPath('selectedFeed', [...$feedWithUnreadFeedItems->only(['id', 'name']), 'feed_items_count' => 15])
+            ->assertJsonPath('totalNumberOfFeedItems', 20)
+            ->assertJsonCount(2, 'unreadFeeds')
+            ->assertJsonCount(15, 'feedItems.data')
+            ->assertJsonPath('currentCursor', null);
+
+        // visit dashboard with selected feed which has no unread feed items
+        $this->get(route('api.dashboard').'?'.Arr::query(['feed_id' => $feedWithoutUnreadFeedItems->id]))
+            ->assertJsonStructure([
+                'selectedFeed',
+                'totalNumberOfFeedItems',
+                'unreadFeeds',
+                'feedItems',
+                'currentCursor',
+            ])
+            ->assertJsonPath('selectedFeed', null)
+            ->assertJsonPath('totalNumberOfFeedItems', 20)
+            ->assertJsonCount(2, 'unreadFeeds')
+            ->assertJsonCount(0, 'feedItems.data')
+            ->assertJsonPath('currentCursor', null);
+    }
+
+    public function test_cannot_access_as_guest(): void
+    {
+        $this->json('get', route('api.dashboard'))
+            ->assertUnauthorized();
+    }
+}
diff --git a/tests/Feature/Http/Controllers/DashboardControllerTest.php b/tests/Feature/Http/Controllers/DashboardControllerTest.php
deleted file mode 100644
index cb10094d..00000000
--- a/tests/Feature/Http/Controllers/DashboardControllerTest.php
+++ /dev/null
@@ -1,108 +0,0 @@
-<?php
-
-namespace Http\Controllers;
-
-use App\Models\Feed;
-use App\Models\FeedItem;
-use App\Models\User;
-use Illuminate\Foundation\Testing\RefreshDatabase;
-use Illuminate\Support\Arr;
-use Illuminate\Support\Facades\Auth;
-use Inertia\Testing\AssertableInertia as Assert;
-use Tests\TestCase;
-
-class DashboardControllerTest extends TestCase
-{
-    use RefreshDatabase;
-
-    public function test_index(): void
-    {
-        $this->actingAs($user = User::factory()->create());
-
-        $feedWithUnreadFeedItems = Feed::factory()->for($user)->has(FeedItem::factory()->unread()->count(15))->create();
-        Feed::factory()->for($user)->has(FeedItem::factory()->unread()->count(5))->create();
-        $feedWithoutUnreadFeedItems = Feed::factory()->for($user)->has(FeedItem::factory()->read()->count(3))->create();
-
-        // visit dashboard without any query parameters
-        $this->get(route('dashboard'))
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('Dashboard')
-                ->where('selectedFeed', null)
-                ->where('totalNumberOfFeedItems', 20)
-                ->count('unreadFeeds', 2)
-                ->has('feedItems', fn (Assert $page) => $page
-                    ->count('data', 15)
-                    ->has('data')
-                    ->has('path')
-                    ->has('per_page')
-                    ->has('next_cursor')
-                    ->has('next_page_url')
-                    ->has('prev_cursor')
-                    ->has('prev_page_url')
-                )
-                ->where('currentCursor', null)
-            );
-
-        // visit dashboard with cursor query parameter
-        $feedItems = Auth::user()->feedItems()
-            ->unread()
-            ->cursorPaginate()
-            ->withQueryString();
-
-        $cursor = Arr::get($feedItems->toArray(), 'next_cursor');
-
-        $this->get(route('dashboard').'?'.Arr::query(['cursor' => $cursor]))
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('Dashboard')
-                ->where('selectedFeed', null)
-                ->where('totalNumberOfFeedItems', 20)
-                ->count('unreadFeeds', 2)
-                ->has('feedItems', fn (Assert $page) => $page
-                    ->count('data', 5)
-                    ->has('data')
-                    ->has('path')
-                    ->has('per_page')
-                    ->has('next_cursor')
-                    ->has('next_page_url')
-                    ->has('prev_cursor')
-                    ->has('prev_page_url')
-                )
-                ->where('currentCursor', $cursor)
-            );
-
-        // visit dashboard with selected feed
-        $this->get(route('dashboard').'?'.Arr::query(['feed_id' => $feedWithUnreadFeedItems->id]))
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('Dashboard')
-                ->where('selectedFeed', [
-                    'id' => $feedWithUnreadFeedItems->id,
-                    'name' => $feedWithUnreadFeedItems->name,
-                    'feed_items_count' => 15,
-                ])
-                ->where('totalNumberOfFeedItems', 20)
-                ->count('unreadFeeds', 2)
-                ->has('feedItems', fn (Assert $page) => $page
-                    ->count('data', 15)
-                    ->has('data')
-                    ->has('path')
-                    ->has('per_page')
-                    ->has('next_cursor')
-                    ->has('next_page_url')
-                    ->has('prev_cursor')
-                    ->has('prev_page_url')
-                )
-                ->where('currentCursor', null)
-            );
-
-        // visit dashboard with selected feed which has no unread feed items
-        $this->get(route('dashboard').'?'.Arr::query(['feed_id' => $feedWithoutUnreadFeedItems->id]))
-            ->assertRedirect(route('dashboard'));
-    }
-
-    public function test_cannot_access_as_guest(): void
-    {
-        $response = $this->get(route('dashboard'));
-
-        $response->assertRedirect('/login');
-    }
-}

From 5466cfa7bde2673cea3566ab14a4f90b52c983e9 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 16 Mar 2024 11:25:40 +0100
Subject: [PATCH 56/79] fixed feed controller tests

---
 app/Http/Controllers/Api/FeedController.php   |  5 +-
 app/Http/Controllers/FeedController.php       | 95 -------------------
 app/Models/Feed.php                           |  1 +
 .../{ => Api}/FeedControllerTest.php          | 80 ++++++++--------
 4 files changed, 44 insertions(+), 137 deletions(-)
 delete mode 100644 app/Http/Controllers/FeedController.php
 rename tests/Feature/Http/Controllers/{ => Api}/FeedControllerTest.php (73%)

diff --git a/app/Http/Controllers/Api/FeedController.php b/app/Http/Controllers/Api/FeedController.php
index 5db6b4ac..7d307e1d 100644
--- a/app/Http/Controllers/Api/FeedController.php
+++ b/app/Http/Controllers/Api/FeedController.php
@@ -7,7 +7,6 @@
 use App\Http\Requests\UpdateFeedRequest;
 use App\Models\Feed;
 use Illuminate\Http\JsonResponse;
-use Illuminate\Http\RedirectResponse;
 use Illuminate\Support\Arr;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Auth;
@@ -43,7 +42,7 @@ public function create(): JsonResponse
     /**
      * Store a newly created resource in storage.
      */
-    public function store(StoreFeedRequest $request): RedirectResponse
+    public function store(StoreFeedRequest $request): JsonResponse
     {
         $validated = $request->validated();
 
@@ -52,7 +51,7 @@ public function store(StoreFeedRequest $request): RedirectResponse
 
         Auth::user()->feeds()->save($feed);
 
-        return redirect()->route('feeds.index');
+        return response()->json();
     }
 
     /**
diff --git a/app/Http/Controllers/FeedController.php b/app/Http/Controllers/FeedController.php
deleted file mode 100644
index 1ec3bc3a..00000000
--- a/app/Http/Controllers/FeedController.php
+++ /dev/null
@@ -1,95 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use App\Http\Requests\StoreFeedRequest;
-use App\Http\Requests\UpdateFeedRequest;
-use App\Models\Feed;
-use Illuminate\Http\RedirectResponse;
-use Illuminate\Support\Arr;
-use Illuminate\Support\Facades\Auth;
-use Inertia\Inertia;
-use Inertia\Response;
-
-class FeedController extends Controller
-{
-    public function __construct()
-    {
-        $this->authorizeResource(Feed::class);
-    }
-
-    /**
-     * Display a listing of the resource.
-     */
-    public function index(): Response
-    {
-        return Inertia::render('Feeds/Index', [
-            'feeds' => Auth::user()->feeds()->with('category')->withCount('feedItems')->get(),
-            'canCreate' => Auth::user()->can('create', Feed::class),
-        ]);
-    }
-
-    /**
-     * Show the form for creating a new resource.
-     */
-    public function create(): Response
-    {
-        return Inertia::render('Feeds/Create', [
-            'categories' => Auth::user()->categories()->pluck('name', 'id')->map(fn (string $name, int $id) => ['value' => $id, 'name' => $name])->values(),
-            'feed' => new Feed(),
-        ]);
-    }
-
-    /**
-     * Store a newly created resource in storage.
-     */
-    public function store(StoreFeedRequest $request): RedirectResponse
-    {
-        $validated = $request->validated();
-
-        $feed = new Feed($validated);
-        $feed->category_id = Arr::get($validated, 'category_id');
-
-        Auth::user()->feeds()->save($feed);
-
-        return redirect()->route('feeds.index');
-    }
-
-    /**
-     * Show the form for editing the specified resource.
-     */
-    public function edit(Feed $feed): Response
-    {
-        return Inertia::render('Feeds/Edit', [
-            'categories' => Auth::user()->categories()->pluck('name', 'id')->map(fn (string $name, int $id) => ['value' => $id, 'name' => $name])->values(),
-            'feed' => $feed,
-            'canDelete' => Auth::user()->can('delete', $feed),
-        ]);
-    }
-
-    /**
-     * Update the specified resource in storage.
-     */
-    public function update(UpdateFeedRequest $request, Feed $feed): RedirectResponse
-    {
-        $validated = $request->validated();
-
-        $feed = $feed->fill($validated);
-        $feed->category_id = Arr::get($validated, 'category_id');
-
-        $feed->save();
-
-        return redirect()->route('feeds.index');
-    }
-
-    /**
-     * Remove the specified resource from storage.
-     */
-    public function destroy(Feed $feed): RedirectResponse
-    {
-        $feed->feedItems()->delete();
-        $feed->delete();
-
-        return redirect()->route('feeds.index');
-    }
-}
diff --git a/app/Models/Feed.php b/app/Models/Feed.php
index 3b0eadaf..eb5b5b66 100644
--- a/app/Models/Feed.php
+++ b/app/Models/Feed.php
@@ -73,6 +73,7 @@ class Feed extends Model
      */
     protected $casts = [
         'is_purgeable' => 'bool',
+        'last_checked_at' => 'datetime',
     ];
 
     public function user(): BelongsTo
diff --git a/tests/Feature/Http/Controllers/FeedControllerTest.php b/tests/Feature/Http/Controllers/Api/FeedControllerTest.php
similarity index 73%
rename from tests/Feature/Http/Controllers/FeedControllerTest.php
rename to tests/Feature/Http/Controllers/Api/FeedControllerTest.php
index cc5dc234..f2814fb0 100644
--- a/tests/Feature/Http/Controllers/FeedControllerTest.php
+++ b/tests/Feature/Http/Controllers/Api/FeedControllerTest.php
@@ -1,15 +1,14 @@
 <?php
 
-namespace Http\Controllers;
+namespace Http\Controllers\Api;
 
-use App\Http\Controllers\FeedController;
+use App\Http\Controllers\Api\FeedController;
 use App\Models\Category;
 use App\Models\Feed;
 use App\Models\FeedItem;
 use App\Models\User;
 use Illuminate\Foundation\Testing\RefreshDatabase;
 use Illuminate\Support\Arr;
-use Inertia\Testing\AssertableInertia as Assert;
 use Tests\TestCase;
 
 class FeedControllerTest extends TestCase
@@ -38,31 +37,29 @@ public function test_index(): void
     {
         $this->actingAs($user = User::factory()->create());
 
-        Feed::factory()->for($user)->create();
+        $feed = Feed::factory()->for($user)->create();
 
-        $this->get(route('feeds.index'))
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('Feeds/Index')
-                ->count('feeds', 1)
-                ->where('canCreate', true)
-            );
+        $this->json('get', route('api.feeds.index'))
+            ->assertJson([
+                'feeds' => [$feed->toArray()],
+                'canCreate' => true,
+            ]);
     }
 
     public function test_cannot_access_index_as_guest(): void
     {
-        $response = $this->get(route('feeds.index'));
-
-        $response->assertRedirect('/login');
+        $this->json('get', route('api.feeds.index'))
+            ->assertUnauthorized();
     }
 
     public function test_create(): void
     {
         $this->actingAs(User::factory()->create());
 
-        $this->get(route('feeds.create'))
-            ->assertInertia(fn (Assert $page) => $page
-                ->has('feed')
-            );
+        $this->json('get', route('api.feeds.create'))
+            ->assertJsonStructure([
+                'categories',
+            ]);
     }
 
     public function test_store(): void
@@ -77,7 +74,7 @@ public function test_store(): void
         $language = 'en';
         $isPurgeable = true;
 
-        $response = $this->post(route('feeds.store'), [
+        $this->json('post', route('api.feeds.store'), [
             'category_id' => $category->id,
             'feed_url' => $feedUrl,
             'site_url' => $siteUrl,
@@ -85,9 +82,8 @@ public function test_store(): void
             'name' => $name,
             'language' => $language,
             'is_purgeable' => $isPurgeable,
-        ]);
+        ])->assertJson([]);
 
-        $response->assertRedirect(route('feeds.index'));
         static::assertSame(1, $user->feeds()->count());
         static::assertSame($user->id, $user->feeds()->first()->user_id);
         static::assertSame($category->id, $user->feeds()->first()->category_id);
@@ -103,11 +99,19 @@ public function test_store_validation_fails_due_to_missing_data(): void
     {
         $this->actingAs($user = User::factory()->create());
 
-        $this->get(route('feeds.create'));
-        $response = $this->post(route('feeds.store'), ['name' => ' ']);
-
-        $response->assertRedirect(route('feeds.create'));
-        $response->assertSessionHasErrors(['name' => 'The Name field is required.']);
+        $this->json('post', route('api.feeds.store'), ['name' => ' '])
+            ->assertUnprocessable()
+            ->assertJson([
+                'message' => 'The Category field is required. (and 5 more errors)',
+                'errors' => [
+                    'category_id' => ['The Category field is required.'],
+                    'feed_url' => ['The Feed URL field is required.'],
+                    'site_url' => ['The Site URL field is required.'],
+                    'name' => ['The Name field is required.'],
+                    'language' => ['The Language field is required.'],
+                    'is_purgeable' => ['The Purgeable field is required.'],
+                ],
+            ]);
         static::assertSame(0, $user->feeds()->count());
     }
 
@@ -117,11 +121,11 @@ public function test_edit(): void
 
         $feed = Feed::factory()->for($user)->create();
 
-        $this->get(route('feeds.edit', $feed))
-            ->assertInertia(fn (Assert $page) => $page
-                ->has('feed')
-                ->where('canDelete', true)
-            );
+        $this->json('get', route('api.feeds.edit', $feed))
+            ->assertJson([
+                'feed' => $feed->toArray(),
+                'canDelete' => true,
+            ]);
     }
 
     public function test_cannot_edit_feed_of_another_user(): void
@@ -130,7 +134,7 @@ public function test_cannot_edit_feed_of_another_user(): void
 
         $feed = Feed::factory()->create();
 
-        $this->get(route('feeds.edit', $feed))
+        $this->json('get', route('api.feeds.edit', $feed))
             ->assertForbidden();
     }
 
@@ -148,7 +152,7 @@ public function test_update(): void
         $language = 'de';
         $isPurgeable = false;
 
-        $response = $this->put(route('feeds.update', $feed), [
+        $this->json('put', route('api.feeds.update', $feed), [
             'category_id' => $category->id,
             'feed_url' => $feedUrl,
             'site_url' => $siteUrl,
@@ -156,9 +160,8 @@ public function test_update(): void
             'name' => $name,
             'language' => $language,
             'is_purgeable' => $isPurgeable,
-        ]);
+        ])->assertJson([]);
 
-        $response->assertRedirect(route('feeds.index'));
         static::assertSame($user->id, $user->feeds()->first()->user_id);
         static::assertSame($category->id, $user->feeds()->first()->category_id);
         static::assertSame($feedUrl, $user->feeds()->first()->feed_url);
@@ -175,7 +178,7 @@ public function test_cannot_update_feed_of_another_user(): void
 
         $feed = Feed::factory()->create();
 
-        $this->put(route('feeds.update', $feed), ['name' => 'Test (updated)'])
+        $this->json('put', route('api.feeds.update', $feed), ['name' => 'Test (updated)'])
             ->assertForbidden();
     }
 
@@ -185,9 +188,8 @@ public function test_delete(): void
 
         $feed = Feed::factory()->for($user)->hasFeedItems(10)->create();
 
-        $response = $this->delete(route('feeds.destroy', $feed));
-
-        $response->assertRedirect(route('feeds.index'));
+        $this->json('delete', route('api.feeds.destroy', $feed))
+            ->assertJson([]);
         static::assertSame(0, $user->feeds()->count());
         static::assertSame(0, $user->feedItems()->count());
     }
@@ -198,7 +200,7 @@ public function test_cannot_delete_feed_of_another_user(): void
 
         $feed = Feed::factory()->hasFeedItems(10)->create();
 
-        $this->delete(route('feeds.destroy', $feed))
+        $this->json('delete', route('api.feeds.destroy', $feed))
             ->assertForbidden();
 
         static::assertSame(1, Feed::count());

From 1dbbb37b441d0e823f8a50f41ec9ed49561559aa Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 16 Mar 2024 11:27:24 +0100
Subject: [PATCH 57/79] fixed ToggleFeedItemController tests

---
 .../Controllers/ToggleFeedItemController.php  | 24 -------------------
 .../ToggleFeedItemControllerTest.php          |  8 +++----
 2 files changed, 4 insertions(+), 28 deletions(-)
 delete mode 100644 app/Http/Controllers/ToggleFeedItemController.php
 rename tests/Feature/Http/Controllers/{ => Api}/ToggleFeedItemControllerTest.php (84%)

diff --git a/app/Http/Controllers/ToggleFeedItemController.php b/app/Http/Controllers/ToggleFeedItemController.php
deleted file mode 100644
index ab042454..00000000
--- a/app/Http/Controllers/ToggleFeedItemController.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use App\Models\FeedItem;
-
-class ToggleFeedItemController extends Controller
-{
-    /**
-     * Handle the incoming request.
-     *
-     * @return \Illuminate\Http\JsonResponse
-     */
-    public function __invoke(FeedItem $feedItem)
-    {
-        $this->authorize('update', $feedItem);
-
-        $feedItem->update([
-            'read_at' => $feedItem->read_at ? null : now(),
-        ]);
-
-        return response()->json($feedItem);
-    }
-}
diff --git a/tests/Feature/Http/Controllers/ToggleFeedItemControllerTest.php b/tests/Feature/Http/Controllers/Api/ToggleFeedItemControllerTest.php
similarity index 84%
rename from tests/Feature/Http/Controllers/ToggleFeedItemControllerTest.php
rename to tests/Feature/Http/Controllers/Api/ToggleFeedItemControllerTest.php
index bdf34f0e..bd6bd834 100644
--- a/tests/Feature/Http/Controllers/ToggleFeedItemControllerTest.php
+++ b/tests/Feature/Http/Controllers/Api/ToggleFeedItemControllerTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Tests\Feature\Http\Controllers;
+namespace Http\Controllers\Api;
 
 use App\Models\Feed;
 use App\Models\FeedItem;
@@ -21,7 +21,7 @@ public function test_marks_feed_item_as_read(): void
         $feed = Feed::factory()->recycle($user)->create();
         $feedItem = FeedItem::factory()->recycle($feed)->state(['read_at' => null])->create();
 
-        $this->put(route('toggle-feed-item', $feedItem))
+        $this->json('put', route('api.toggle-feed-item', $feedItem))
             ->assertOk()
             ->assertJsonPath('read_at', now()->micro(0)->toJSON());
     }
@@ -35,7 +35,7 @@ public function test_marks_feed_item_as_unread(): void
         $feed = Feed::factory()->recycle($user)->create();
         $feedItem = FeedItem::factory()->recycle($feed)->state(['read_at' => now()])->create();
 
-        $this->put(route('toggle-feed-item', $feedItem))
+        $this->json('put', route('api.toggle-feed-item', $feedItem))
             ->assertOk()
             ->assertJsonPath('read_at', null);
     }
@@ -47,7 +47,7 @@ public function test_cannot_toggle_feed_item_of_another_user(): void
         $feed = Feed::factory()->create();
         $feedItem = FeedItem::factory()->recycle($feed)->create();
 
-        $this->put(route('toggle-feed-item', $feedItem))
+        $this->json('put', route('api.toggle-feed-item', $feedItem))
             ->assertForbidden();
     }
 }

From 8d8303132fcfcd6555377855c1be8017efcc0f71 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 16 Mar 2024 11:28:58 +0100
Subject: [PATCH 58/79] fixed MarkAllUnreadFeedItemsAsReadController tests

---
 ...MarkAllUnreadFeedItemsAsReadController.php | 23 -------------------
 ...AllUnreadFeedItemsAsReadControllerTest.php |  8 +++----
 2 files changed, 4 insertions(+), 27 deletions(-)
 delete mode 100644 app/Http/Controllers/MarkAllUnreadFeedItemsAsReadController.php
 rename tests/Feature/Http/Controllers/{ => Api}/MarkAllUnreadFeedItemsAsReadControllerTest.php (85%)

diff --git a/app/Http/Controllers/MarkAllUnreadFeedItemsAsReadController.php b/app/Http/Controllers/MarkAllUnreadFeedItemsAsReadController.php
deleted file mode 100644
index 003b0117..00000000
--- a/app/Http/Controllers/MarkAllUnreadFeedItemsAsReadController.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use Illuminate\Http\Request;
-use Illuminate\Support\Facades\Auth;
-
-class MarkAllUnreadFeedItemsAsReadController extends Controller
-{
-    /**
-     * Handle the incoming request.
-     *
-     * @return void
-     */
-    public function __invoke(Request $request)
-    {
-        $now = now();
-
-        Auth::user()->feedItems()->unread()->update([
-            'read_at' => $now,
-        ]);
-    }
-}
diff --git a/tests/Feature/Http/Controllers/MarkAllUnreadFeedItemsAsReadControllerTest.php b/tests/Feature/Http/Controllers/Api/MarkAllUnreadFeedItemsAsReadControllerTest.php
similarity index 85%
rename from tests/Feature/Http/Controllers/MarkAllUnreadFeedItemsAsReadControllerTest.php
rename to tests/Feature/Http/Controllers/Api/MarkAllUnreadFeedItemsAsReadControllerTest.php
index 4a2c209b..2052a659 100644
--- a/tests/Feature/Http/Controllers/MarkAllUnreadFeedItemsAsReadControllerTest.php
+++ b/tests/Feature/Http/Controllers/Api/MarkAllUnreadFeedItemsAsReadControllerTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Tests\Feature\Http\Controllers;
+namespace Http\Controllers\Api;
 
 use App\Models\Feed;
 use App\Models\FeedItem;
@@ -27,7 +27,7 @@ public function test_marks_all_unread_feed_items_as_read_for_specific_user(): vo
         static::assertSame(50, $user->feedItems()->unread()->count());
         static::assertSame(100, $user->feedItems()->whereNotNull('read_at')->count());
 
-        $this->put(route('mark-all-as-read'))
+        $this->json('put', route('api.mark-all-as-read'))
             ->assertOk();
 
         static::assertSame(0, $user->feedItems()->unread()->count());
@@ -36,7 +36,7 @@ public function test_marks_all_unread_feed_items_as_read_for_specific_user(): vo
 
     public function test_cannot_access_as_guest(): void
     {
-        $this->put(route('mark-all-as-read'))
-            ->assertRedirect('/login');
+        $this->json('put', route('api.mark-all-as-read'))
+            ->assertUnauthorized();
     }
 }

From 0e8823c2927dc5387264fad1481cc0a80af0d402 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 16 Mar 2024 11:31:00 +0100
Subject: [PATCH 59/79] fixed FeedUrlDiscovererController tests

---
 .../FeedUrlDiscovererController.php           | 24 -------------------
 .../FeedUrlDiscovererControllerTest.php       |  4 ++--
 2 files changed, 2 insertions(+), 26 deletions(-)
 delete mode 100644 app/Http/Controllers/FeedUrlDiscovererController.php
 rename tests/Feature/Http/Controllers/{ => Api}/FeedUrlDiscovererControllerTest.php (73%)

diff --git a/app/Http/Controllers/FeedUrlDiscovererController.php b/app/Http/Controllers/FeedUrlDiscovererController.php
deleted file mode 100644
index ba79c711..00000000
--- a/app/Http/Controllers/FeedUrlDiscovererController.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use App\Http\Requests\FeedUrlDiscovererRequest;
-use Illuminate\Support\Arr;
-use Kaishiyoku\HeraRssCrawler\HeraRssCrawler;
-
-class FeedUrlDiscovererController extends Controller
-{
-    /**
-     * Handle the incoming request.
-     *
-     * @return \Illuminate\Http\JsonResponse
-     *
-     * @throws \Exception
-     */
-    public function __invoke(FeedUrlDiscovererRequest $request, HeraRssCrawler $heraRssCrawler)
-    {
-        $validated = $request->validated();
-
-        return response()->json($heraRssCrawler->discoverFeedUrls(Arr::get($validated, 'feed_url')));
-    }
-}
diff --git a/tests/Feature/Http/Controllers/FeedUrlDiscovererControllerTest.php b/tests/Feature/Http/Controllers/Api/FeedUrlDiscovererControllerTest.php
similarity index 73%
rename from tests/Feature/Http/Controllers/FeedUrlDiscovererControllerTest.php
rename to tests/Feature/Http/Controllers/Api/FeedUrlDiscovererControllerTest.php
index 63e540db..0405f814 100644
--- a/tests/Feature/Http/Controllers/FeedUrlDiscovererControllerTest.php
+++ b/tests/Feature/Http/Controllers/Api/FeedUrlDiscovererControllerTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Http\Controllers;
+namespace Http\Controllers\Api;
 
 use App\Models\User;
 use Illuminate\Foundation\Testing\RefreshDatabase;
@@ -14,7 +14,7 @@ public function test_returns_discovered_feed_urls(): void
     {
         $this->actingAs(User::factory()->create());
 
-        $this->post(route('discover-feed-urls'), ['feed_url' => 'https://tailwindcss.com'])
+        $this->json('post', route('api.discover-feed-urls'), ['feed_url' => 'https://tailwindcss.com'])
             ->assertJsonIsArray()
             ->assertJsonCount(2);
     }

From 146ae606be717b521ddf490fd6dc0b32021c5bd8 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 16 Mar 2024 11:33:44 +0100
Subject: [PATCH 60/79] fixed FeedDiscovererController tests

---
 .../Controllers/FeedDiscovererController.php  | 46 -------------------
 .../FeedDiscovererControllerTest.php          | 14 +++---
 2 files changed, 7 insertions(+), 53 deletions(-)
 delete mode 100644 app/Http/Controllers/FeedDiscovererController.php
 rename tests/Feature/Http/Controllers/{ => Api}/FeedDiscovererControllerTest.php (69%)

diff --git a/app/Http/Controllers/FeedDiscovererController.php b/app/Http/Controllers/FeedDiscovererController.php
deleted file mode 100644
index 366742e7..00000000
--- a/app/Http/Controllers/FeedDiscovererController.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use App\Http\Requests\FeedDiscovererRequest;
-use GuzzleHttp\Exception\ClientException;
-use GuzzleHttp\Exception\ConnectException;
-use Illuminate\Support\Arr;
-use Kaishiyoku\HeraRssCrawler\HeraRssCrawler;
-
-class FeedDiscovererController extends Controller
-{
-    /**
-     * Handle the incoming request.
-     *
-     * @return \Illuminate\Http\JsonResponse
-     *
-     * @throws \Exception
-     */
-    public function __invoke(FeedDiscovererRequest $request, HeraRssCrawler $heraRssCrawler)
-    {
-        $validated = $request->validated();
-
-        try {
-            $discoveredFeedUrls = $heraRssCrawler->discoverFeedUrls(Arr::get($validated, 'feed_url'));
-
-            if ($discoveredFeedUrls->isEmpty()) {
-                abort(404, 'No feeds found.');
-            }
-
-            $feedMetadata = $heraRssCrawler->parseFeed($discoveredFeedUrls->first());
-
-            return response()->json([
-                'feed_url' => $feedMetadata->getFeedUrl() ?? $feedMetadata->getUrl(),
-                'site_url' => $feedMetadata->getUrl(),
-                'favicon_url' => $heraRssCrawler->discoverFavicon($feedMetadata->getUrl()) ?? '',
-                'name' => $feedMetadata->getTitle(),
-                'language' => $feedMetadata->getLanguage() ?? '',
-            ]);
-        } catch (ConnectException) {
-            abort(422, 'The given URL is invalid.');
-        } catch (ClientException) {
-            abort(422, 'The given URL could not be resolved.');
-        }
-    }
-}
diff --git a/tests/Feature/Http/Controllers/FeedDiscovererControllerTest.php b/tests/Feature/Http/Controllers/Api/FeedDiscovererControllerTest.php
similarity index 69%
rename from tests/Feature/Http/Controllers/FeedDiscovererControllerTest.php
rename to tests/Feature/Http/Controllers/Api/FeedDiscovererControllerTest.php
index 11451bde..524cf7dd 100644
--- a/tests/Feature/Http/Controllers/FeedDiscovererControllerTest.php
+++ b/tests/Feature/Http/Controllers/Api/FeedDiscovererControllerTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Http\Controllers;
+namespace Http\Controllers\Api;
 
 use App\Models\User;
 use Illuminate\Foundation\Testing\RefreshDatabase;
@@ -14,7 +14,7 @@ public function test_success(): void
     {
         $this->actingAs(User::factory()->create());
 
-        $this->post(route('discover-feed'), ['feed_url' => 'https://tailwindcss.com/feeds/feed.xml'])
+        $this->json('post', route('api.discover-feed'), ['feed_url' => 'https://tailwindcss.com/feeds/feed.xml'])
             ->assertJsonIsObject()
             ->assertJsonStructure([
                 'feed_url',
@@ -29,7 +29,7 @@ public function test_no_feed_found(): void
     {
         $this->actingAs(User::factory()->create());
 
-        $response = $this->post(route('discover-feed'), ['feed_url' => 'https://blurha.sh/']);
+        $response = $this->json('post', route('api.discover-feed'), ['feed_url' => 'https://blurha.sh/']);
 
         $response->assertNotFound();
         static::assertSame('No feeds found.', $response->exception->getMessage());
@@ -37,15 +37,15 @@ public function test_no_feed_found(): void
 
     public function test_cannot_access_as_guest(): void
     {
-        $this->post(route('discover-feed'))
-            ->assertRedirect('/login');
+        $this->json('post', route('api.discover-feed'))
+            ->assertUnauthorized();
     }
 
     public function test_connect_exception(): void
     {
         $this->actingAs(User::factory()->create());
 
-        $response = $this->post(route('discover-feed'), ['feed_url' => 'https://test.dev']);
+        $response = $this->json('post', route('api.discover-feed'), ['feed_url' => 'https://test.dev']);
 
         $response->assertUnprocessable();
         static::assertSame('The given URL is invalid.', $response->exception->getMessage());
@@ -55,7 +55,7 @@ public function test_client_exception(): void
     {
         $this->actingAs(User::factory()->create());
 
-        $response = $this->post(route('discover-feed'), ['feed_url' => 'https://tailwindcss.com/random-page']);
+        $response = $this->json('post', route('api.discover-feed'), ['feed_url' => 'https://tailwindcss.com/random-page']);
 
         $response->assertUnprocessable();
         static::assertSame('The given URL could not be resolved.', $response->exception->getMessage());

From b42bba32ec71cb01c41b9142d3c82fd350e4c179 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 16 Mar 2024 13:39:30 +0100
Subject: [PATCH 61/79] fixed UserWithFeedsCountAndUnreadFeedItemsCount tests

---
 .../TypeScriptModelGenerator/Nodes/InheritedType.php     | 2 +-
 config/type-script-model-generator.php                   | 2 +-
 resources/js/Pages/Admin/Users/UsersIndexPage.tsx        | 4 ++--
 resources/js/types/UsersLoaderType.ts                    | 4 ++--
 resources/js/types/generated/Models/Feed.ts              | 2 +-
 .../Models/UserWithFeedsAndUnreadFeedItemsCount.ts       | 9 ---------
 .../Models/UserWithFeedsCountAndUnreadFeedItemsCount.ts  | 9 +++++++++
 .../Console/Commands/GenerateModelsToTypeScriptTest.php  | 1 +
 8 files changed, 17 insertions(+), 16 deletions(-)
 delete mode 100644 resources/js/types/generated/Models/UserWithFeedsAndUnreadFeedItemsCount.ts
 create mode 100644 resources/js/types/generated/Models/UserWithFeedsCountAndUnreadFeedItemsCount.ts

diff --git a/app/Services/TypeScriptModelGenerator/Nodes/InheritedType.php b/app/Services/TypeScriptModelGenerator/Nodes/InheritedType.php
index 1dc67813..3776b5f2 100644
--- a/app/Services/TypeScriptModelGenerator/Nodes/InheritedType.php
+++ b/app/Services/TypeScriptModelGenerator/Nodes/InheritedType.php
@@ -92,6 +92,6 @@ public function toString(): string
             ->replace('{{ model }}', $modelName)
             ->replace('{{ importPath }}', "{$importDirectory}/{$modelName}")
             ->replace('{{ name }}', $this->name)
-            ->replace('{{ fields }}', $this->additionalFields->map(fn (TypeProperty $typeProperty) => $typeProperty->toString())->join("\n"));
+            ->replace('{{ fields }}', $this->additionalFields->map(fn (TypeProperty $typeProperty) => $typeProperty->toString())->join("\n    "));
     }
 }
diff --git a/config/type-script-model-generator.php b/config/type-script-model-generator.php
index 35fe1473..22f0de19 100644
--- a/config/type-script-model-generator.php
+++ b/config/type-script-model-generator.php
@@ -41,7 +41,7 @@
             ],
         ],
         [
-            'name' => 'UserWithFeedsAndUnreadFeedItemsCount',
+            'name' => 'UserWithFeedsCountAndUnreadFeedItemsCount',
             'model' => \App\Models\User::class,
             'additional_fields' => [
                 [
diff --git a/resources/js/Pages/Admin/Users/UsersIndexPage.tsx b/resources/js/Pages/Admin/Users/UsersIndexPage.tsx
index 05e1b014..2c49b233 100644
--- a/resources/js/Pages/Admin/Users/UsersIndexPage.tsx
+++ b/resources/js/Pages/Admin/Users/UsersIndexPage.tsx
@@ -5,7 +5,7 @@ import {useLaravelReactI18n} from 'laravel-react-i18n';
 import formatDateTime from '@/Utils/formatDateTime';
 import {DangerButton} from '@/Components/Button';
 import useAuth from '@/Hooks/useAuth';
-import UserWithFeedsAndUnreadFeedItemsCount from '@/types/generated/Models/UserWithFeedsAndUnreadFeedItemsCount';
+import UserWithFeedsCountAndUnreadFeedItemsCount from '@/types/generated/Models/UserWithFeedsCountAndUnreadFeedItemsCount';
 
 export default function UsersIndexPage() {
     const {t} = useLaravelReactI18n();
@@ -13,7 +13,7 @@ export default function UsersIndexPage() {
     const {user: authUser} = useAuth();
     const {users} = useLoaderData() as UsersLoaderType;
 
-    const handleDelete = (user: UserWithFeedsAndUnreadFeedItemsCount) => () => {
+    const handleDelete = (user: UserWithFeedsCountAndUnreadFeedItemsCount) => () => {
         fetcher.submit({intent: 'delete', userId: user.id}, {method: 'delete', action: '/admin/users', fetcherKey: 'delete'});
     };
 
diff --git a/resources/js/types/UsersLoaderType.ts b/resources/js/types/UsersLoaderType.ts
index fa388b79..d2b12763 100644
--- a/resources/js/types/UsersLoaderType.ts
+++ b/resources/js/types/UsersLoaderType.ts
@@ -1,6 +1,6 @@
-import UserWithFeedsAndUnreadFeedItemsCount from '@/types/generated/Models/UserWithFeedsAndUnreadFeedItemsCount';
+import UserWithFeedsCountAndUnreadFeedItemsCount from '@/types/generated/Models/UserWithFeedsCountAndUnreadFeedItemsCount';
 
 type UsersLoaderType = {
-    users: UserWithFeedsAndUnreadFeedItemsCount[];
+    users: UserWithFeedsCountAndUnreadFeedItemsCount[];
 }
 export default UsersLoaderType;
diff --git a/resources/js/types/generated/Models/Feed.ts b/resources/js/types/generated/Models/Feed.ts
index 0632fb04..54acb462 100644
--- a/resources/js/types/generated/Models/Feed.ts
+++ b/resources/js/types/generated/Models/Feed.ts
@@ -13,7 +13,7 @@ type Feed = {
     name: string;
     language: string;
     is_purgeable: boolean /** cast attribute */;
-    last_checked_at: string | null;
+    last_checked_at: string /** cast attribute */;
     last_failed_at: string | null;
     created_at: string | null;
     updated_at: string | null;
diff --git a/resources/js/types/generated/Models/UserWithFeedsAndUnreadFeedItemsCount.ts b/resources/js/types/generated/Models/UserWithFeedsAndUnreadFeedItemsCount.ts
deleted file mode 100644
index 2d1822d9..00000000
--- a/resources/js/types/generated/Models/UserWithFeedsAndUnreadFeedItemsCount.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/* this file has been automatically generated */
-import User from '@/types/generated/Models/User';
-
-type UserWithFeedsAndUnreadFeedItemsCount = User & {
-    feeds_count: number;
-unread_feed_items_count: number;
-};
-
-export default UserWithFeedsAndUnreadFeedItemsCount;
diff --git a/resources/js/types/generated/Models/UserWithFeedsCountAndUnreadFeedItemsCount.ts b/resources/js/types/generated/Models/UserWithFeedsCountAndUnreadFeedItemsCount.ts
new file mode 100644
index 00000000..c5254ea5
--- /dev/null
+++ b/resources/js/types/generated/Models/UserWithFeedsCountAndUnreadFeedItemsCount.ts
@@ -0,0 +1,9 @@
+/* this file has been automatically generated */
+import User from '@/types/generated/Models/User';
+
+type UserWithFeedsCountAndUnreadFeedItemsCount = User & {
+    feeds_count: number;
+    unread_feed_items_count: number;
+};
+
+export default UserWithFeedsCountAndUnreadFeedItemsCount;
diff --git a/tests/Feature/Console/Commands/GenerateModelsToTypeScriptTest.php b/tests/Feature/Console/Commands/GenerateModelsToTypeScriptTest.php
index eaea5ff8..99655606 100644
--- a/tests/Feature/Console/Commands/GenerateModelsToTypeScriptTest.php
+++ b/tests/Feature/Console/Commands/GenerateModelsToTypeScriptTest.php
@@ -18,5 +18,6 @@
         'ShortFeed.ts',
         'ShortFeedWithFeedItemsCount.ts',
         'User.ts',
+        'UserWithFeedsCountAndUnreadFeedItemsCount.ts',
     ]);
 });

From 4f9ab034aa1ae34a43fba3113be7a36338cc3406 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 16 Mar 2024 13:41:00 +0100
Subject: [PATCH 62/79] adjusted feed model casts

---
 app/Models/Feed.php                         | 1 +
 resources/js/types/generated/Models/Feed.ts | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/Models/Feed.php b/app/Models/Feed.php
index eb5b5b66..b3a8ddc6 100644
--- a/app/Models/Feed.php
+++ b/app/Models/Feed.php
@@ -74,6 +74,7 @@ class Feed extends Model
     protected $casts = [
         'is_purgeable' => 'bool',
         'last_checked_at' => 'datetime',
+        'last_failed_at' => 'datetime',
     ];
 
     public function user(): BelongsTo
diff --git a/resources/js/types/generated/Models/Feed.ts b/resources/js/types/generated/Models/Feed.ts
index 54acb462..3c9d304d 100644
--- a/resources/js/types/generated/Models/Feed.ts
+++ b/resources/js/types/generated/Models/Feed.ts
@@ -14,7 +14,7 @@ type Feed = {
     language: string;
     is_purgeable: boolean /** cast attribute */;
     last_checked_at: string /** cast attribute */;
-    last_failed_at: string | null;
+    last_failed_at: string /** cast attribute */;
     created_at: string | null;
     updated_at: string | null;
     user: User;

From 8e85c08b3d5057dbaaf67cb1516137a4e85a4486 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 16 Mar 2024 13:54:09 +0100
Subject: [PATCH 63/79] fixed ProfileController tests

---
 app/Http/Controllers/ProfileController.php | 63 ----------------------
 tests/Feature/ProfileTest.php              | 58 ++++++--------------
 tests/TestCase.php                         |  1 -
 3 files changed, 17 insertions(+), 105 deletions(-)
 delete mode 100644 app/Http/Controllers/ProfileController.php

diff --git a/app/Http/Controllers/ProfileController.php b/app/Http/Controllers/ProfileController.php
deleted file mode 100644
index 681b3885..00000000
--- a/app/Http/Controllers/ProfileController.php
+++ /dev/null
@@ -1,63 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use App\Http\Requests\ProfileUpdateRequest;
-use Illuminate\Contracts\Auth\MustVerifyEmail;
-use Illuminate\Http\RedirectResponse;
-use Illuminate\Http\Request;
-use Illuminate\Support\Facades\Auth;
-use Illuminate\Support\Facades\Redirect;
-use Inertia\Inertia;
-use Inertia\Response;
-
-class ProfileController extends Controller
-{
-    /**
-     * Display the user's profile form.
-     */
-    public function edit(Request $request): Response
-    {
-        return Inertia::render('Profile/Edit', [
-            'mustVerifyEmail' => $request->user() instanceof MustVerifyEmail,
-            'status' => session('status'),
-        ]);
-    }
-
-    /**
-     * Update the user's profile information.
-     */
-    public function update(ProfileUpdateRequest $request): RedirectResponse
-    {
-        $request->user()->fill($request->validated());
-
-        if ($request->user()->isDirty('email')) {
-            $request->user()->email_verified_at = null;
-        }
-
-        $request->user()->save();
-
-        return Redirect::route('profile.edit');
-    }
-
-    /**
-     * Delete the user's account.
-     */
-    public function destroy(Request $request): RedirectResponse
-    {
-        $request->validate([
-            'password' => ['required', 'current-password'],
-        ]);
-
-        $user = $request->user();
-
-        Auth::logout();
-
-        $user->delete();
-
-        $request->session()->invalidate();
-        $request->session()->regenerateToken();
-
-        return Redirect::to('/');
-    }
-}
diff --git a/tests/Feature/ProfileTest.php b/tests/Feature/ProfileTest.php
index 49886c3e..24a06567 100644
--- a/tests/Feature/ProfileTest.php
+++ b/tests/Feature/ProfileTest.php
@@ -10,31 +10,17 @@ class ProfileTest extends TestCase
 {
     use RefreshDatabase;
 
-    public function test_profile_page_is_displayed(): void
-    {
-        $user = User::factory()->create();
-
-        $response = $this
-            ->actingAs($user)
-            ->get('/profile');
-
-        $response->assertOk();
-    }
-
     public function test_profile_information_can_be_updated(): void
     {
         $user = User::factory()->create();
 
-        $response = $this
+        $this
             ->actingAs($user)
-            ->patch('/profile', [
+            ->json('patch', route('api.profile.update'), [
                 'name' => 'Test User',
                 'email' => 'test@example.com',
-            ]);
-
-        $response
-            ->assertSessionHasNoErrors()
-            ->assertRedirect('/profile');
+            ])
+            ->assertJson([]);
 
         $user->refresh();
 
@@ -47,16 +33,13 @@ public function test_email_verification_status_is_unchanged_when_the_email_addre
     {
         $user = User::factory()->create();
 
-        $response = $this
+        $this
             ->actingAs($user)
-            ->patch('/profile', [
+            ->json('patch', route('api.profile.update'), [
                 'name' => 'Test User',
                 'email' => $user->email,
-            ]);
-
-        $response
-            ->assertSessionHasNoErrors()
-            ->assertRedirect('/profile');
+            ])
+            ->assertJson([]);
 
         $this->assertNotNull($user->refresh()->email_verified_at);
     }
@@ -65,17 +48,14 @@ public function test_user_can_delete_their_account(): void
     {
         $user = User::factory()->create();
 
-        $response = $this
+        $this
             ->actingAs($user)
-            ->delete('/profile', [
+            ->json('delete', route('api.profile.destroy'), [
                 'password' => 'password',
-            ]);
+            ])
+            ->assertJson([]);
 
-        $response
-            ->assertSessionHasNoErrors()
-            ->assertRedirect('/');
-
-        $this->assertGuest();
+        $this->assertGuest('web');
         $this->assertNull($user->fresh());
     }
 
@@ -83,16 +63,12 @@ public function test_correct_password_must_be_provided_to_delete_account(): void
     {
         $user = User::factory()->create();
 
-        $response = $this
+        $this
             ->actingAs($user)
-            ->from('/profile')
-            ->delete('/profile', [
+            ->json('delete', route('api.profile.destroy'), [
                 'password' => 'wrong-password',
-            ]);
-
-        $response
-            ->assertSessionHasErrors('password')
-            ->assertRedirect('/profile');
+            ])
+            ->assertJson([]);
 
         $this->assertNotNull($user->fresh());
     }
diff --git a/tests/TestCase.php b/tests/TestCase.php
index b02c506d..3b14486b 100644
--- a/tests/TestCase.php
+++ b/tests/TestCase.php
@@ -2,7 +2,6 @@
 
 namespace Tests;
 
-use Illuminate\Foundation\Testing\RefreshDatabase;
 use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
 
 abstract class TestCase extends BaseTestCase

From 12979d080615d5d0213c6fc582273218b0b83d1a Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 16 Mar 2024 14:01:33 +0100
Subject: [PATCH 64/79] fixed UserController tests

---
 app/Http/Controllers/Admin/UserController.php | 48 -------------------
 .../Nodes/TypeTest/it_builds_a_type.snap      |  4 +-
 .../Nodes/TypeTest/it_builds_a_type__2.snap   | 10 ++--
 .../{ => Api}/Admin/UserControllerTest.php    | 30 ++++++------
 4 files changed, 22 insertions(+), 70 deletions(-)
 delete mode 100644 app/Http/Controllers/Admin/UserController.php
 rename tests/Feature/Http/Controllers/{ => Api}/Admin/UserControllerTest.php (73%)

diff --git a/app/Http/Controllers/Admin/UserController.php b/app/Http/Controllers/Admin/UserController.php
deleted file mode 100644
index 45b4d803..00000000
--- a/app/Http/Controllers/Admin/UserController.php
+++ /dev/null
@@ -1,48 +0,0 @@
-<?php
-
-namespace App\Http\Controllers\Admin;
-
-use App\Http\Controllers\Controller;
-use App\Models\User;
-use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Http\RedirectResponse;
-use Inertia\Inertia;
-use Inertia\Response;
-
-class UserController extends Controller
-{
-    public function __construct()
-    {
-        $this->authorizeResource(User::class);
-    }
-
-    /**
-     * Display a listing of the resource.
-     */
-    public function index(): Response
-    {
-        return Inertia::render('Admin/Users/Index', [
-            'users' => User::orderBy('name')
-                ->withCount([
-                    'feeds',
-                    'feedItems as unread_feed_items_count' => function (Builder $query) {
-                        $query->whereNull('read_at');
-                    },
-                ])
-                ->get(),
-        ]);
-    }
-
-    /**
-     * Remove the specified resource from storage.
-     */
-    public function destroy(User $user): RedirectResponse
-    {
-        $user->feedItems()->delete();
-        $user->feeds()->delete();
-        $user->categories()->delete();
-        $user->delete();
-
-        return redirect()->route('admin.users.index');
-    }
-}
diff --git a/tests/.pest/snapshots/Feature/Services/TypeScriptModelGenerator/Nodes/TypeTest/it_builds_a_type.snap b/tests/.pest/snapshots/Feature/Services/TypeScriptModelGenerator/Nodes/TypeTest/it_builds_a_type.snap
index 0632fb04..3c9d304d 100644
--- a/tests/.pest/snapshots/Feature/Services/TypeScriptModelGenerator/Nodes/TypeTest/it_builds_a_type.snap
+++ b/tests/.pest/snapshots/Feature/Services/TypeScriptModelGenerator/Nodes/TypeTest/it_builds_a_type.snap
@@ -13,8 +13,8 @@ type Feed = {
     name: string;
     language: string;
     is_purgeable: boolean /** cast attribute */;
-    last_checked_at: string | null;
-    last_failed_at: string | null;
+    last_checked_at: string /** cast attribute */;
+    last_failed_at: string /** cast attribute */;
     created_at: string | null;
     updated_at: string | null;
     user: User;
diff --git a/tests/.pest/snapshots/Feature/Services/TypeScriptModelGenerator/Nodes/TypeTest/it_builds_a_type__2.snap b/tests/.pest/snapshots/Feature/Services/TypeScriptModelGenerator/Nodes/TypeTest/it_builds_a_type__2.snap
index af2682f3..51b1bded 100644
--- a/tests/.pest/snapshots/Feature/Services/TypeScriptModelGenerator/Nodes/TypeTest/it_builds_a_type__2.snap
+++ b/tests/.pest/snapshots/Feature/Services/TypeScriptModelGenerator/Nodes/TypeTest/it_builds_a_type__2.snap
@@ -76,19 +76,17 @@
         },
         {
             "returnTypes": [
-                "string",
-                "null"
+                "string"
             ],
-            "comment": null,
+            "comment": "cast attribute",
             "model": "Feed",
             "name": "last_checked_at"
         },
         {
             "returnTypes": [
-                "string",
-                "null"
+                "string"
             ],
-            "comment": null,
+            "comment": "cast attribute",
             "model": "Feed",
             "name": "last_failed_at"
         },
diff --git a/tests/Feature/Http/Controllers/Admin/UserControllerTest.php b/tests/Feature/Http/Controllers/Api/Admin/UserControllerTest.php
similarity index 73%
rename from tests/Feature/Http/Controllers/Admin/UserControllerTest.php
rename to tests/Feature/Http/Controllers/Api/Admin/UserControllerTest.php
index d5aa6181..0a0675fc 100644
--- a/tests/Feature/Http/Controllers/Admin/UserControllerTest.php
+++ b/tests/Feature/Http/Controllers/Api/Admin/UserControllerTest.php
@@ -1,8 +1,8 @@
 <?php
 
-namespace Http\Controllers\Admin;
+namespace Http\Controllers\Api\Admin;
 
-use App\Http\Controllers\Admin\UserController;
+use App\Http\Controllers\Api\Admin\UserController;
 use App\Models\Category;
 use App\Models\Feed;
 use App\Models\FeedItem;
@@ -40,23 +40,25 @@ public function test_index(): void
 
         User::factory()->count(5)->create();
 
-        $this->get(route('admin.users.index'))
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('Admin/Users/Index')
-                ->count('users', 6)
-            );
+        $this->json('get', route('api.admin.users.index'))
+            ->assertJsonStructure([
+                'users',
+            ])
+            ->assertJsonCount(6, 'users');
     }
 
     public function test_cannot_access_index_as_guest(): void
     {
-        $this->get(route('admin.users.index'))
-            ->assertRedirect('/login');
+        $this->json('get', route('api.admin.users.index'))
+            ->assertUnauthorized();
     }
 
     public function test_cannot_access_index_as_normal_user(): void
     {
-        $this->get(route('admin.users.index'))
-            ->assertRedirect('/login');
+        $this->actingAs(User::factory()->create());
+
+        $this->get(route('api.admin.users.index'))
+            ->assertForbidden();
     }
 
     public function test_delete(): void
@@ -67,8 +69,8 @@ public function test_delete(): void
             ->hasFeedItems(10)
             ->create();
 
-        $this->delete(route('admin.users.destroy', $user))
-            ->assertRedirect(route('admin.users.index'));
+        $this->json('delete', route('api.admin.users.destroy', $user))
+            ->assertJson([]);
 
         static::assertCount(1, User::get());
         static::assertCount(0, Category::get());
@@ -81,7 +83,7 @@ public function test_cannot_delete_own_user(): void
     {
         $this->actingAs($user = User::factory()->admin()->create());
 
-        $this->delete(route('admin.users.destroy', $user))
+        $this->json('delete', route('api.admin.users.destroy', $user))
             ->assertForbidden();
 
         static::assertSame(1, User::count());

From 6d58a5ffa6e355f369a85c2ec7beb7a6a7a44c11 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 16 Mar 2024 14:06:00 +0100
Subject: [PATCH 65/79] fixed administrate middleware tests

---
 tests/Feature/Http/Middleware/AdministrateTest.php | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/tests/Feature/Http/Middleware/AdministrateTest.php b/tests/Feature/Http/Middleware/AdministrateTest.php
index 71f5f557..adbef8e8 100644
--- a/tests/Feature/Http/Middleware/AdministrateTest.php
+++ b/tests/Feature/Http/Middleware/AdministrateTest.php
@@ -8,6 +8,7 @@
 use Illuminate\Foundation\Testing\RefreshDatabase;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Response;
+use Symfony\Component\HttpKernel\Exception\HttpException;
 use Tests\TestCase;
 
 class AdministrateTest extends TestCase
@@ -27,11 +28,16 @@ public function test_middleware(?UserFactory $userFactory, bool $expectVisited):
 
         $visited = false;
         $middleware = new Administrate();
-        $middleware->handle(Request::create('/telescope')->setUserResolver(fn () => $user ?? null), function () use (&$visited) {
-            $visited = true;
 
-            return Response::make();
-        });
+        try {
+            $middleware->handle(Request::create('/telescope')->setUserResolver(fn () => $user ?? null), function () use (&$visited) {
+                $visited = true;
+
+                return Response::make();
+            });
+        } catch (HttpException) {
+            //
+        }
 
         static::assertSame($expectVisited, $visited);
     }

From 99eb598d66015970299186af431af23eb9da6445 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Sat, 16 Mar 2024 14:09:18 +0100
Subject: [PATCH 66/79] adjusted administrate middleware

---
 app/Http/Middleware/Administrate.php | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/Http/Middleware/Administrate.php b/app/Http/Middleware/Administrate.php
index 72493fd3..df625453 100644
--- a/app/Http/Middleware/Administrate.php
+++ b/app/Http/Middleware/Administrate.php
@@ -23,6 +23,8 @@ public function handle(Request $request, Closure $next): Response
             abort(Response::HTTP_FORBIDDEN);
         }
 
+        // @codeCoverageIgnoreStart
         return redirect('/');
+        // @codeCoverageIgnoreEnd
     }
 }

From c65b172a912b066e00151916c4573db072e9d323 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Tue, 19 Mar 2024 20:59:35 +0100
Subject: [PATCH 67/79] fixed code style

---
 app/Http/Controllers/Api/FeedDiscovererController.php        | 1 -
 app/Http/Controllers/Auth/AuthenticatedSessionController.php | 1 -
 app/Models/User.php                                          | 1 -
 routes/web.php                                               | 5 ++---
 .../Http/Controllers/Api/Admin/UserControllerTest.php        | 1 -
 5 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/app/Http/Controllers/Api/FeedDiscovererController.php b/app/Http/Controllers/Api/FeedDiscovererController.php
index b7a2953e..b608175c 100644
--- a/app/Http/Controllers/Api/FeedDiscovererController.php
+++ b/app/Http/Controllers/Api/FeedDiscovererController.php
@@ -15,7 +15,6 @@ class FeedDiscovererController extends Controller
     /**
      * Handle the incoming request.
      *
-     * @return \Illuminate\Http\JsonResponse
      *
      * @throws \Exception
      */
diff --git a/app/Http/Controllers/Auth/AuthenticatedSessionController.php b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
index e7601ec5..67ec5a9d 100644
--- a/app/Http/Controllers/Auth/AuthenticatedSessionController.php
+++ b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
@@ -6,7 +6,6 @@
 use App\Http\Requests\Auth\LoginRequest;
 use App\Providers\RouteServiceProvider;
 use Illuminate\Http\JsonResponse;
-use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Route;
diff --git a/app/Models/User.php b/app/Models/User.php
index c76dc1f2..40f8f51e 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -10,7 +10,6 @@
 use Illuminate\Database\Eloquent\Relations\HasManyThrough;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
-use Illuminate\Support\Str;
 use Laravel\Sanctum\HasApiTokens;
 
 /**
diff --git a/routes/web.php b/routes/web.php
index a3f02cb6..3e004776 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -16,8 +16,7 @@
 */
 
 Route::get('/', function (Request $request) {
-    if ($request->user())
-    {
+    if ($request->user()) {
         return view('app');
     }
 
@@ -37,6 +36,6 @@
 
 require __DIR__.'/auth.php';
 
-Route::get('{all?}', function() {
+Route::get('{all?}', function () {
     return view('app');
 })->where(['all' => '.*']);
diff --git a/tests/Feature/Http/Controllers/Api/Admin/UserControllerTest.php b/tests/Feature/Http/Controllers/Api/Admin/UserControllerTest.php
index 0a0675fc..4ac5f4ff 100644
--- a/tests/Feature/Http/Controllers/Api/Admin/UserControllerTest.php
+++ b/tests/Feature/Http/Controllers/Api/Admin/UserControllerTest.php
@@ -9,7 +9,6 @@
 use App\Models\User;
 use Illuminate\Foundation\Testing\RefreshDatabase;
 use Illuminate\Support\Arr;
-use Inertia\Testing\AssertableInertia as Assert;
 use Tests\TestCase;
 
 class UserControllerTest extends TestCase

From 4a17b5f984c72b7ef3fa2020d330220928bfcdde Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Tue, 19 Mar 2024 21:01:01 +0100
Subject: [PATCH 68/79] fixed code inspection warnings

---
 app/Http/Controllers/Api/FeedController.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/Http/Controllers/Api/FeedController.php b/app/Http/Controllers/Api/FeedController.php
index 7d307e1d..2e07f783 100644
--- a/app/Http/Controllers/Api/FeedController.php
+++ b/app/Http/Controllers/Api/FeedController.php
@@ -93,7 +93,7 @@ public function destroy(Feed $feed): JsonResponse
     }
 
     /**
-     * @return Collection<int, array<{value: int, name: string}>>
+     * @return Collection<int, array{value: int, name: string}>
      */
     private function categories(): Collection
     {

From 3c96ae3b541a708ba9344645f11756cea1281307 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Tue, 19 Mar 2024 21:03:39 +0100
Subject: [PATCH 69/79] fixed npm build

---
 .../js/Components/Breadcrumbs/Breadcrumbs.tsx |  71 -------
 resources/js/Layouts/AuthenticatedLayout.tsx  | 198 ------------------
 2 files changed, 269 deletions(-)
 delete mode 100644 resources/js/Components/Breadcrumbs/Breadcrumbs.tsx
 delete mode 100644 resources/js/Layouts/AuthenticatedLayout.tsx

diff --git a/resources/js/Components/Breadcrumbs/Breadcrumbs.tsx b/resources/js/Components/Breadcrumbs/Breadcrumbs.tsx
deleted file mode 100644
index f87d3c2c..00000000
--- a/resources/js/Components/Breadcrumbs/Breadcrumbs.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import {Link} from '@inertiajs/react';
-import slug from 'slug';
-import {useEffect, useRef} from 'react';
-import Breadcrumb from '@/types/Breadcrumb';
-
-export default function Breadcrumbs({breadcrumbs}: { breadcrumbs?: Breadcrumb[]; }) {
-    if (!breadcrumbs) {
-        return null;
-    }
-
-    const breadcrumbsRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        setTimeout(() => {
-            breadcrumbsRef.current?.scrollTo({
-                top: 0,
-                left: breadcrumbsRef.current.getBoundingClientRect().right,
-                behavior: 'smooth',
-            });
-        }, 250);
-    }, []);
-
-    const breadcrumbMapper = (breadcrumb: Breadcrumb, index: number, arr: Breadcrumb[]) => {
-        const breadcrumbElement = breadcrumb.url
-            ? (
-                <li key={slug(breadcrumb.title)}>
-                    <Link
-                        href={breadcrumb.url}
-                        className="font-semibold text-violet-400 hover:text-violet-300 leading-tight transition"
-                    >
-                        {breadcrumb.title}
-                    </Link>
-                </li>
-            )
-            : (
-                <li key={slug(breadcrumb.title)}
-                    className="font-semibold text-gray-800 dark:text-gray-300 leading-tight">
-                    {breadcrumb.title}
-                </li>
-            );
-
-        if (index === arr.length - 1) {
-            return breadcrumbElement;
-        }
-
-        return [
-            breadcrumbElement,
-            <li key={`${slug(breadcrumb.title)}-separator`} className="text-gray-300 dark:text-gray-500">
-                <svg
-                    className="h-5 w-5 flex-shrink-0 stroke-current"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                    aria-hidden="true"
-                >
-                    <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" strokeWidth=".5"/>
-                </svg>
-            </li>,
-        ];
-    };
-
-    return (
-        <div className="overflow-y-hidden overflow-x-auto scrollbar-x-sm whitespace-nowrap" ref={breadcrumbsRef}>
-            <nav className="flex" aria-label="Breadcrumb">
-                <ol role="list" className="flex items-center space-x-2">
-                    {breadcrumbs.map(breadcrumbMapper).flat()}
-                </ol>
-            </nav>
-        </div>
-    );
-}
diff --git a/resources/js/Layouts/AuthenticatedLayout.tsx b/resources/js/Layouts/AuthenticatedLayout.tsx
deleted file mode 100644
index 76f8eafa..00000000
--- a/resources/js/Layouts/AuthenticatedLayout.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import {Fragment, ReactNode, useEffect, useState} from 'react';
-import {Link} from '@inertiajs/react';
-import {useLaravelReactI18n} from 'laravel-react-i18n';
-import ApplicationLogo from '@/Components/ApplicationLogo';
-import Dropdown from '@/Components/Dropdown';
-import NavLink from '@/Components/NavLink';
-import ResponsiveNavLink from '@/Components/ResponsiveNavLink';
-import {Transition} from '@headlessui/react';
-import DropdownArrowIcon from '@/Icons/DropdownArrowIcon';
-import {BasePageProps} from '@/types';
-
-export default function Authenticated({auth, header, children}: BasePageProps & { header: ReactNode; children: ReactNode; }) {
-    const {t} = useLaravelReactI18n();
-    const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false);
-
-    useEffect(() => {
-        document.body.style.overflowY = showingNavigationDropdown ? 'hidden' : '';
-        document.body.style.position = showingNavigationDropdown ? 'fixed' : '';
-        document.body.style.width = showingNavigationDropdown ? '100%' : '';
-    }, [showingNavigationDropdown]);
-
-    return (
-        <div className="min-h-screen text-gray-800 dark:text-gray-300 bg-gray-100 dark:bg-gray-900">
-            <div className="shadow">
-                <nav className="bg-white dark:bg-gray-800">
-                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                        <div className="flex justify-between h-14">
-                            <div className="flex">
-                                <div className="shrink-0 flex items-center">
-                                    <Link href="/">
-                                        <ApplicationLogo
-                                            className="block h-9 w-auto fill-current text-gray-800 dark:text-gray-200"/>
-                                    </Link>
-                                </div>
-
-                                <div className="hidden space-x-2 sm:-my-px sm:ml-5 sm:flex sm:items-center">
-                                    <NavLink href={route('dashboard')} active={route().current('dashboard')}>
-                                        {t('Dashboard')}
-                                    </NavLink>
-
-                                    <NavLink href={route('categories.index')} active={route().current('categories.*')}>
-                                        {t('Categories')}
-                                    </NavLink>
-
-                                    <NavLink href={route('feeds.index')} active={route().current('feeds.*')}>
-                                        {t('Feeds')}
-                                    </NavLink>
-                                </div>
-                            </div>
-
-                            <div className="hidden sm:flex sm:items-center sm:ml-6">
-                                <div className="ml-3 relative">
-                                    <Dropdown>
-                                        <Dropdown.Trigger>
-                                            <span className="inline-flex rounded-md">
-                                                <button
-                                                    type="button"
-                                                    className="inline-flex items-center space-x-2 text-gray-500 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700/50 dark:hover:text-white px-3 py-2 rounded-md text-sm transition"
-                                                >
-                                                    <span>{auth.user.name}</span>
-
-                                                    <DropdownArrowIcon/>
-                                                </button>
-                                            </span>
-                                        </Dropdown.Trigger>
-
-                                        <Dropdown.Content>
-                                            <Dropdown.Link
-                                                href={route('profile.edit')}
-                                                active={route().current('profile.edit')}
-                                            >
-                                                {t('Profile')}
-                                            </Dropdown.Link>
-                                            {!!auth.user.is_admin && (
-                                                <>
-                                                    <Dropdown.Link
-                                                        href={route('admin.users.index')}
-                                                        active={route().current('admin.users.*')}
-                                                    >
-                                                        {t('Manage users')}
-                                                    </Dropdown.Link>
-
-                                                    <Dropdown.Link
-                                                        href={route('telescope')}
-                                                        as="a"
-                                                    >
-                                                        {t('Telescope')}
-                                                    </Dropdown.Link>
-                                                </>
-                                            )}
-                                            <Dropdown.Link href={route('logout')} method="post" as="button">
-                                                {t('Log Out')}
-                                            </Dropdown.Link>
-                                        </Dropdown.Content>
-                                    </Dropdown>
-                                </div>
-                            </div>
-
-                            <div className="-mr-2 flex items-center sm:hidden">
-                                <button
-                                    onClick={() => setShowingNavigationDropdown((previousState) => !previousState)}
-                                    className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out"
-                                >
-                                    <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                                        <path
-                                            className={!showingNavigationDropdown ? 'inline-flex' : 'hidden'}
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                            strokeWidth="2"
-                                            d="M4 6h16M4 12h16M4 18h16"
-                                        />
-                                        <path
-                                            className={showingNavigationDropdown ? 'inline-flex' : 'hidden'}
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                            strokeWidth="2"
-                                            d="M6 18L18 6M6 6l12 12"
-                                        />
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <Transition show={showingNavigationDropdown} as={Fragment} leave="duration-200">
-                        <Transition.Child
-                            as={Fragment}
-                            enter="ease-out duration-300"
-                            enterFrom="opacity-0 -translate-y-8 sm:translate-y-0"
-                            enterTo="opacity-100 translate-y-0"
-                            leave="ease-in duration-200"
-                            leaveFrom="opacity-100 translate-y-0"
-                            leaveTo="opacity-0 -translate-y-8 sm:translate-y-0"
-                        >
-                            <div className="fixed overflow-y-auto scrollbar-y-sm pb-16 top-14 bg-white dark:bg-gray-800 z-20 w-full h-full sm:hidden">
-                                <div className="pt-2 pb-3 space-y-1">
-                                    <ResponsiveNavLink href={route('dashboard')} active={route().current('dashboard')}>
-                                        Dashboard
-                                    </ResponsiveNavLink>
-
-                                    <ResponsiveNavLink href={route('categories.index')} active={route().current('categories.*')}>
-                                        {t('Categories')}
-                                    </ResponsiveNavLink>
-
-                                    <ResponsiveNavLink href={route('feeds.index')} active={route().current('feeds.*')}>
-                                        {t('Feeds')}
-                                    </ResponsiveNavLink>
-                                </div>
-
-                                <div className="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
-                                    <div className="px-4">
-                                        <div className="font-medium text-base text-gray-800 dark:text-gray-200">
-                                            {auth.user.name}
-                                        </div>
-                                        <div className="font-medium text-sm text-gray-500">{auth.user.email}</div>
-                                    </div>
-
-                                    <div className="mt-3 space-y-1">
-                                        <ResponsiveNavLink href={route('profile.edit')}>
-                                            {t('Profile')}
-                                        </ResponsiveNavLink>
-                                        {!!auth.user.is_admin && (
-                                            <>
-                                                <ResponsiveNavLink
-                                                    href={route('admin.users.index')}
-                                                    active={route().current('admin.users.*')}
-                                                >
-                                                    {t('Manage users')}
-                                                </ResponsiveNavLink>
-
-                                                <ResponsiveNavLink href={route('telescope')} as="a">
-                                                    {t('Telescope')}
-                                                </ResponsiveNavLink>
-                                            </>
-                                        )}
-                                        <ResponsiveNavLink method="post" href={route('logout')} as="button">
-                                            {t('Log Out')}
-                                        </ResponsiveNavLink>
-                                    </div>
-                                </div>
-                            </div>
-                        </Transition.Child>
-                    </Transition>
-                </nav>
-            </div>
-
-            {(header) && (
-                <header className="text-xl max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-                    {header}
-                </header>
-            )}
-
-            <main className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
-                {children}
-            </main>
-        </div>
-    );
-}

From 91797636665ed791ba064fb4cdeaa70d912abce3 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Tue, 19 Mar 2024 21:07:03 +0100
Subject: [PATCH 70/79] adjusted vite.config.mjs

---
 vite.config.mjs | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/vite.config.mjs b/vite.config.mjs
index 71ca4ce4..7334de9b 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -6,7 +6,10 @@ import i18n from 'laravel-react-i18n/vite';
 export default defineConfig({
     plugins: [
         laravel({
-            input: 'resources/js/Inertia/app.tsx',
+            input: [
+                'resources/js/app.tsx',
+                'resources/js/Inertia/app.tsx',
+            ],
             refresh: true,
         }),
         react(),

From b727151d96fab8935b496c57849632a013dda9d5 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Tue, 19 Mar 2024 21:09:26 +0100
Subject: [PATCH 71/79] adjusted vite.config.mjs

---
 resources/js/app.tsx          | 2 ++
 resources/views/app.blade.php | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/resources/js/app.tsx b/resources/js/app.tsx
index 26443657..09fb239a 100644
--- a/resources/js/app.tsx
+++ b/resources/js/app.tsx
@@ -1,3 +1,5 @@
+import '../bootstrap';
+import '../../css/app.css';
 import {createRoot} from 'react-dom/client';
 import NProgress from 'nprogress';
 import {LaravelReactI18nProvider} from 'laravel-react-i18n';
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 636141f8..dcf68e2a 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -15,7 +15,7 @@
 
         <!-- Scripts -->
         @viteReactRefresh
-        @vite(['resources/js/app.tsx', 'resources/js/bootstrap.ts', 'resources/css/app.css'])
+        @vite(['resources/js/app.tsx'])
     </head>
     <body class="font-sans antialiased">
         <div id="app"></div>

From 3d1f117a68282855b6f3f06bc324579f3223bdd8 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Tue, 19 Mar 2024 21:10:21 +0100
Subject: [PATCH 72/79] adjusted app.tsx

---
 resources/js/app.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/app.tsx b/resources/js/app.tsx
index 09fb239a..9d3142be 100644
--- a/resources/js/app.tsx
+++ b/resources/js/app.tsx
@@ -1,5 +1,5 @@
-import '../bootstrap';
-import '../../css/app.css';
+import './bootstrap';
+import '../css/app.css';
 import {createRoot} from 'react-dom/client';
 import NProgress from 'nprogress';
 import {LaravelReactI18nProvider} from 'laravel-react-i18n';

From 0deb7fb793910dba2c1847622b60ea5875553a31 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Tue, 19 Mar 2024 21:13:37 +0100
Subject: [PATCH 73/79] fixed feed item toggle request

---
 resources/js/Components/FeedItemCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Components/FeedItemCard.tsx b/resources/js/Components/FeedItemCard.tsx
index 32a92520..47ac215d 100644
--- a/resources/js/Components/FeedItemCard.tsx
+++ b/resources/js/Components/FeedItemCard.tsx
@@ -21,7 +21,7 @@ export default function FeedItemCard({hueRotationIndex, feedItem}: { hueRotation
     const toggle = () => {
         setProcessing(true);
 
-        void rq.put(`/feeds/${internalFeedItem.id}/toggle`)
+        void rq.put(`/api/feeds/${internalFeedItem.id}/toggle`)
             .json<FeedItem>()
             .then((data) => {
                 if (data.read_at) {

From f5f569fbbb04c576002d1a9379f3a7b1a68adce5 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Wed, 20 Mar 2024 19:46:11 +0100
Subject: [PATCH 74/79] fixed "mark all as read" request

---
 resources/js/Pages/Home.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/Pages/Home.tsx b/resources/js/Pages/Home.tsx
index b5379125..174d13b8 100644
--- a/resources/js/Pages/Home.tsx
+++ b/resources/js/Pages/Home.tsx
@@ -79,11 +79,11 @@ export default function Home() {
     }, [fetcher]);
 
     const markAllAsRead = async () => {
-        await rq.put('/feeds/mark-all-as-read');
-
-        setTotalNumberOfFeedItems(0);
+        await rq.put('/api/feeds/mark-all-as-read');
 
         navigate('/');
+
+        setTotalNumberOfFeedItems(0);
     };
 
     return (

From bacaa8b76c1b3a3f2e3ba3ad486532ba9e4d5eae Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Wed, 20 Mar 2024 19:46:53 +0100
Subject: [PATCH 75/79] fixed "home" link

---
 resources/js/Core/AuthenticatedLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Core/AuthenticatedLayout.tsx b/resources/js/Core/AuthenticatedLayout.tsx
index bc3921ee..057fa754 100644
--- a/resources/js/Core/AuthenticatedLayout.tsx
+++ b/resources/js/Core/AuthenticatedLayout.tsx
@@ -148,7 +148,7 @@ const AuthenticatedLayout = () => {
                 >
                     <div className="fixed overflow-y-auto scrollbar-y-sm px-4 pt-16 pb-16 top-0 bg-white/50 dark:bg-gray-800/50 z-20 w-full h-full backdrop-blur-lg sm:hidden">
                         <div className="pt-2 pb-3 space-y-1">
-                            <Dropdown.Link to="/app">
+                            <Dropdown.Link to="/">
                                 {t('Home')}
                             </Dropdown.Link>
 

From 10130c38d06c719a42852b4a49d6e3cf623a1186 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Wed, 20 Mar 2024 19:47:16 +0100
Subject: [PATCH 76/79] added "home" link to navigation dropdown

---
 resources/js/Core/AuthenticatedLayout.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/resources/js/Core/AuthenticatedLayout.tsx b/resources/js/Core/AuthenticatedLayout.tsx
index 057fa754..2aec5520 100644
--- a/resources/js/Core/AuthenticatedLayout.tsx
+++ b/resources/js/Core/AuthenticatedLayout.tsx
@@ -70,6 +70,10 @@ const AuthenticatedLayout = () => {
                     </Dropdown.Trigger>
 
                     <Dropdown.Content>
+                        <Dropdown.Link to="/">
+                            {t('Home')}
+                        </Dropdown.Link>
+
                         <Dropdown.Link to="/profile">
                             {t('Profile')}
                         </Dropdown.Link>

From 353ed6e2444660b13b04127046dd8752e84ae3b6 Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Wed, 20 Mar 2024 19:48:46 +0100
Subject: [PATCH 77/79] minor layout adjustments

---
 resources/js/Pages/Home.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/resources/js/Pages/Home.tsx b/resources/js/Pages/Home.tsx
index 174d13b8..24a7e68e 100644
--- a/resources/js/Pages/Home.tsx
+++ b/resources/js/Pages/Home.tsx
@@ -88,9 +88,11 @@ export default function Home() {
 
     return (
         <div>
-            <div className="pb-4">
-                {tChoice('dashboard.unread_articles', totalNumberOfFeedItems)}
-            </div>
+            {totalNumberOfFeedItems > 0 && (
+                <div className="pb-4">
+                    {tChoice('dashboard.unread_articles', totalNumberOfFeedItems)}
+                </div>
+            )}
 
             <div className="flex flex-col sm:flex-row sm:space-x-2 space-y-2 sm:space-y-0 pb-8">
                 {data.feedItems && <FeedFilterDropdown selectedFeed={data.selectedFeed} feeds={data.unreadFeeds}/>}

From d51789b22619ee7076b9cc46a407bc8a252aeaeb Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Wed, 20 Mar 2024 19:52:13 +0100
Subject: [PATCH 78/79] adjsuted mobile navigation menu style

---
 resources/js/Components/Dropdown.tsx      | 2 +-
 resources/js/Core/AuthenticatedLayout.tsx | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/js/Components/Dropdown.tsx b/resources/js/Components/Dropdown.tsx
index 8cd9d895..d1a2d46e 100644
--- a/resources/js/Components/Dropdown.tsx
+++ b/resources/js/Components/Dropdown.tsx
@@ -146,7 +146,7 @@ const DropdownButton = ({onClick, className = '', children}: { onClick: () => vo
     );
 };
 
-const Spacer = () => <div className="pt-2 mb-2 border-b dark:border-gray-600"/>;
+const Spacer = () => <div className="pt-2 mb-2 border-b dark:border-gray-700"/>;
 
 Dropdown.Trigger = Trigger;
 Dropdown.Content = Content;
diff --git a/resources/js/Core/AuthenticatedLayout.tsx b/resources/js/Core/AuthenticatedLayout.tsx
index 2aec5520..57290919 100644
--- a/resources/js/Core/AuthenticatedLayout.tsx
+++ b/resources/js/Core/AuthenticatedLayout.tsx
@@ -150,8 +150,8 @@ const AuthenticatedLayout = () => {
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 -translate-y-8 sm:translate-y-0"
                 >
-                    <div className="fixed overflow-y-auto scrollbar-y-sm px-4 pt-16 pb-16 top-0 bg-white/50 dark:bg-gray-800/50 z-20 w-full h-full backdrop-blur-lg sm:hidden">
-                        <div className="pt-2 pb-3 space-y-1">
+                    <div className="fixed overflow-y-auto scrollbar-y-sm px-4 pt-16 pb-16 top-0 bg-white dark:bg-gray-800 z-20 w-full h-full backdrop-blur-lg sm:hidden">
+                        <div className="space-y-1">
                             <Dropdown.Link to="/">
                                 {t('Home')}
                             </Dropdown.Link>
@@ -185,7 +185,9 @@ const AuthenticatedLayout = () => {
                             )}
                         </div>
 
-                        <div className="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
+                        <Dropdown.Spacer/>
+
+                        <div className="pt-2">
                             <div className="px-4">
                                 <div className="font-medium text-base text-gray-800 dark:text-gray-200">
                                     {user.name}

From 54d24b4a7ba583828dd5c7bd54511de8723d8f7e Mon Sep 17 00:00:00 2001
From: Kaishiyoku <dmp@nfze.de>
Date: Wed, 20 Mar 2024 20:17:30 +0100
Subject: [PATCH 79/79] adjusted tests

---
 .../Controllers/Api/ProfileController.php     |  2 +
 tests/Feature/Auth/PasswordUpdateTest.php     | 37 +++++++++++++++++++
 tests/Feature/ProfileTest.php                 | 14 +++++++
 tests/Pest.php                                |  2 +-
 4 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/app/Http/Controllers/Api/ProfileController.php b/app/Http/Controllers/Api/ProfileController.php
index bbeb482e..73c57741 100644
--- a/app/Http/Controllers/Api/ProfileController.php
+++ b/app/Http/Controllers/Api/ProfileController.php
@@ -54,9 +54,11 @@ public function destroy(Request $request): JsonResponse
 
         $user->delete();
 
+        // @codeCoverageIgnoreStart
         $request->session()->invalidate();
         $request->session()->regenerateToken();
 
         return response()->json();
+        // @codeCoverageIgnoreEnd
     }
 }
diff --git a/tests/Feature/Auth/PasswordUpdateTest.php b/tests/Feature/Auth/PasswordUpdateTest.php
index bbf079d2..883f9d8d 100644
--- a/tests/Feature/Auth/PasswordUpdateTest.php
+++ b/tests/Feature/Auth/PasswordUpdateTest.php
@@ -31,6 +31,24 @@ public function test_password_can_be_updated(): void
         $this->assertTrue(Hash::check('new-password', $user->refresh()->password));
     }
 
+    public function test_password_can_be_updated_via_api(): void
+    {
+        $user = User::factory()->create();
+
+        $response = $this
+            ->actingAs($user)
+            ->json('put', route('api.password.update'), [
+                'current_password' => 'password',
+                'password' => 'new-password',
+                'password_confirmation' => 'new-password',
+            ]);
+
+        $response
+            ->assertJson([]);
+
+        $this->assertTrue(Hash::check('new-password', $user->refresh()->password));
+    }
+
     public function test_correct_password_must_be_provided_to_update_password(): void
     {
         $user = User::factory()->create();
@@ -48,4 +66,23 @@ public function test_correct_password_must_be_provided_to_update_password(): voi
             ->assertSessionHasErrors('current_password')
             ->assertRedirect('/profile');
     }
+
+    public function test_correct_password_must_be_provided_to_update_password_via_api(): void
+    {
+        $user = User::factory()->create();
+
+        $this
+            ->actingAs($user)
+            ->json('put', route('api.password.update'), [
+                'current_password' => 'wrong-password',
+                'password' => 'new-password',
+                'password_confirmation' => 'new-password',
+            ])
+            ->assertJson([
+                'message' => 'The password is incorrect.',
+                'errors' => [
+                    'current_password' => ['The password is incorrect.'],
+                ],
+            ]);
+    }
 }
diff --git a/tests/Feature/ProfileTest.php b/tests/Feature/ProfileTest.php
index 24a06567..c0badf0e 100644
--- a/tests/Feature/ProfileTest.php
+++ b/tests/Feature/ProfileTest.php
@@ -10,6 +10,20 @@ class ProfileTest extends TestCase
 {
     use RefreshDatabase;
 
+    public function test_profile_edit_information_is_returned(): void
+    {
+        $user = User::factory()->create();
+
+        $this
+            ->actingAs($user)
+            ->json('get', route('api.profile.edit'))
+            ->assertJson([
+                'mustVerifyEmail' => true,
+                'status' => null,
+                'user' => $user->toArray(),
+            ]);
+    }
+
     public function test_profile_information_can_be_updated(): void
     {
         $user = User::factory()->create();
diff --git a/tests/Pest.php b/tests/Pest.php
index b9763c6a..b1776a4d 100644
--- a/tests/Pest.php
+++ b/tests/Pest.php
@@ -13,7 +13,7 @@
 
 uses(
     Tests\TestCase::class,
-    //     Illuminate\Foundation\Testing\RefreshDatabase::class,
+         Illuminate\Foundation\Testing\RefreshDatabase::class,
 )->in('Feature');
 
 /*