Replace Ziggy with Wayfinder

benbjurstrom · benbjurstrom · commit 9a4a45bf019f · 2025-08-07T18:06:27.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,9 @@
 /public/build
 /public/hot
 /public/storage
+/resources/js/actions
+/resources/js/routes
+/resources/js/wayfinder
 /storage/*.key
 /storage/pail
 /vendor
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,2 @@
 resources/js/components/ui/*
-resources/js/ziggy.js
 resources/views/mail/*
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
@@ -5,7 +5,6 @@
 use Illuminate\Foundation\Inspiring;
 use Illuminate\Http\Request;
 use Inertia\Middleware;
-use Tighten\Ziggy\Ziggy;
 
 class HandleInertiaRequests extends Middleware
 {
@@ -46,10 +45,6 @@ public function share(Request $request): array
             'auth' => [
                 'user' => $request->user(),
             ],
-            'ziggy' => fn (): array => [
-                ...(new Ziggy)->toArray(),
-                'location' => $request->url(),
-            ],
             'sidebarOpen' => ! $request->hasCookie('sidebar_state') || $request->cookie('sidebar_state') === 'true',
         ];
     }
diff --git a/composer.json b/composer.json
@@ -13,7 +13,7 @@
         "inertiajs/inertia-laravel": "^2.0",
         "laravel/framework": "^12.0",
         "laravel/tinker": "^2.10.1",
-        "tightenco/ziggy": "^2.4"
+        "laravel/wayfinder": "^0.1.6"
     },
     "require-dev": {
         "fakerphp/faker": "^1.23",
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.19.0",
+        "@laravel/vite-plugin-wayfinder": "^0.1.3",
         "@types/node": "^22.13.5",
         "eslint": "^9.17.0",
         "eslint-config-prettier": "^10.0.1",
diff --git a/resources/js/components/delete-user.tsx b/resources/js/components/delete-user.tsx
@@ -9,6 +9,7 @@ import { Label } from '@/components/ui/label';
 import HeadingSmall from '@/components/heading-small';
 
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { destroy as profileControllerDestroy } from '@/actions/App/Http/Controllers/Settings/ProfileController';
 
 export default function DeleteUser() {
     const passwordInput = useRef<HTMLInputElement>(null);
@@ -17,7 +18,7 @@ export default function DeleteUser() {
     const deleteUser: FormEventHandler = (e) => {
         e.preventDefault();
 
-        destroy(route('profile.destroy'), {
+        destroy(profileControllerDestroy.url(), {
             preserveScroll: true,
             onSuccess: () => closeModal(),
             onError: () => passwordInput.current?.focus(),
diff --git a/resources/js/components/user-menu-content.tsx b/resources/js/components/user-menu-content.tsx
@@ -4,6 +4,8 @@ import { useMobileNavigation } from '@/hooks/use-mobile-navigation';
 import { type User } from '@/types';
 import { Link, router } from '@inertiajs/react';
 import { LogOut, Settings } from 'lucide-react';
+import { edit as profileEditRoute } from '@/routes/profile';
+import { logout as logoutRoute } from '@/routes';
 
 interface UserMenuContentProps {
     user: User;
@@ -27,15 +29,15 @@ export function UserMenuContent({ user }: UserMenuContentProps) {
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
                 <DropdownMenuItem asChild>
-                    <Link className="block w-full" href={route('profile.edit')} as="button" prefetch onClick={cleanup}>
+                    <Link className="block w-full" href={profileEditRoute.url()} as="button" prefetch onClick={cleanup}>
                         <Settings className="mr-2" />
                         Settings
                     </Link>
                 </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <DropdownMenuItem asChild>
-                <Link className="block w-full" method="post" href={route('logout')} as="button" onClick={handleLogout}>
+                <Link className="block w-full" method="post" href={logoutRoute.url()} as="button" onClick={handleLogout}>
                     <LogOut className="mr-2" />
                     Log out
                 </Link>
diff --git a/resources/js/layouts/auth/auth-card-layout.tsx b/resources/js/layouts/auth/auth-card-layout.tsx
@@ -2,6 +2,7 @@ import AppLogoIcon from '@/components/app-logo-icon';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Link } from '@inertiajs/react';
 import { type PropsWithChildren } from 'react';
+import { home as homeRoute } from '@/routes';
 
 export default function AuthCardLayout({
     children,
@@ -15,7 +16,7 @@ export default function AuthCardLayout({
     return (
         <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
             <div className="flex w-full max-w-md flex-col gap-6">
-                <Link href={route('home')} className="flex items-center gap-2 self-center font-medium">
+                <Link href={homeRoute.url()} className="flex items-center gap-2 self-center font-medium">
                     <div className="flex h-9 w-9 items-center justify-center">
                         <AppLogoIcon className="size-9 fill-current text-black dark:text-white" />
                     </div>
diff --git a/resources/js/layouts/auth/auth-simple-layout.tsx b/resources/js/layouts/auth/auth-simple-layout.tsx
@@ -1,6 +1,7 @@
 import AppLogoIcon from '@/components/app-logo-icon';
 import { Link } from '@inertiajs/react';
 import { type PropsWithChildren } from 'react';
+import { home as homeRoute } from '@/routes';
 
 interface AuthLayoutProps {
     name?: string;
@@ -14,7 +15,7 @@ export default function AuthSimpleLayout({ children, title, description }: Props
             <div className="w-full max-w-sm">
                 <div className="flex flex-col gap-8">
                     <div className="flex flex-col items-center gap-4">
-                        <Link href={route('home')} className="flex flex-col items-center gap-2 font-medium">
+                        <Link href={homeRoute.url()} className="flex flex-col items-center gap-2 font-medium">
                             <div className="mb-1 flex h-9 w-9 items-center justify-center rounded-md">
                                 <AppLogoIcon className="size-9 fill-current text-[var(--foreground)] dark:text-white" />
                             </div>
diff --git a/resources/js/layouts/auth/auth-split-layout.tsx b/resources/js/layouts/auth/auth-split-layout.tsx
@@ -2,6 +2,7 @@ import AppLogoIcon from '@/components/app-logo-icon';
 import { type SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/react';
 import { type PropsWithChildren } from 'react';
+import { home as homeRoute } from '@/routes';
 
 interface AuthLayoutProps {
     title?: string;
@@ -15,7 +16,7 @@ export default function AuthSplitLayout({ children, title, description }: PropsW
         <div className="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
             <div className="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r">
                 <div className="absolute inset-0 bg-zinc-900" />
-                <Link href={route('home')} className="relative z-20 flex items-center text-lg font-medium">
+                <Link href={homeRoute.url()} className="relative z-20 flex items-center text-lg font-medium">
                     <AppLogoIcon className="mr-2 size-8 fill-current text-white" />
                     {name}
                 </Link>
@@ -30,7 +31,7 @@ export default function AuthSplitLayout({ children, title, description }: PropsW
             </div>
             <div className="w-full lg:p-8">
                 <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-                    <Link href={route('home')} className="relative z-20 flex items-center justify-center lg:hidden">
+                    <Link href={homeRoute.url()} className="relative z-20 flex items-center justify-center lg:hidden">
                         <AppLogoIcon className="h-10 fill-current text-black sm:h-12" />
                     </Link>
                     <div className="flex flex-col items-start gap-2 text-left sm:items-center sm:text-center">
diff --git a/resources/js/pages/auth/confirm-password.tsx b/resources/js/pages/auth/confirm-password.tsx
@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/auth-layout';
+import { store as confirmablePasswordControllerStore } from '@/actions/App/Http/Controllers/Auth/ConfirmablePasswordController';
 
 export default function ConfirmPassword() {
     const { data, setData, post, processing, errors, reset } = useForm<Required<{ password: string }>>({
@@ -17,7 +18,7 @@ export default function ConfirmPassword() {
     const submit: FormEventHandler = (e) => {
         e.preventDefault();
 
-        post(route('password.confirm'), {
+        post(confirmablePasswordControllerStore.url(), {
             onFinish: () => reset('password'),
         });
     };
diff --git a/resources/js/pages/auth/forgot-password.tsx b/resources/js/pages/auth/forgot-password.tsx
@@ -9,6 +9,8 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/auth-layout';
+import { store as passwordResetLinkControllerStore } from '@/actions/App/Http/Controllers/Auth/PasswordResetLinkController';
+import { login as loginRoute } from '@/routes';
 
 export default function ForgotPassword({ status }: { status?: string }) {
     const { data, setData, post, processing, errors } = useForm<Required<{ email: string }>>({
@@ -18,7 +20,7 @@ export default function ForgotPassword({ status }: { status?: string }) {
     const submit: FormEventHandler = (e) => {
         e.preventDefault();
 
-        post(route('password.email'));
+        post(passwordResetLinkControllerStore.url());
     };
 
     return (
@@ -55,7 +57,7 @@ export default function ForgotPassword({ status }: { status?: string }) {
 
                 <div className="space-x-1 text-center text-sm text-muted-foreground">
                     <span>Or, return to</span>
-                    <TextLink href={route('login')}>log in</TextLink>
+                    <TextLink href={loginRoute.url()}>log in</TextLink>
                 </div>
             </div>
         </AuthLayout>
diff --git a/resources/js/pages/auth/login.tsx b/resources/js/pages/auth/login.tsx
@@ -9,6 +9,9 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/auth-layout';
+import { store as authenticatedSessionControllerStore } from '@/actions/App/Http/Controllers/Auth/AuthenticatedSessionController';
+import { register as registerRoute } from '@/routes';
+import { request as passwordRequestRoute } from '@/routes/password';
 
 type LoginForm = {
     email: string;
@@ -30,7 +33,7 @@ export default function Login({ status, canResetPassword }: LoginProps) {
 
     const submit: FormEventHandler = (e) => {
         e.preventDefault();
-        post(route('login'), {
+        post(authenticatedSessionControllerStore.url(), {
             onFinish: () => reset('password'),
         });
     };
@@ -61,7 +64,7 @@ export default function Login({ status, canResetPassword }: LoginProps) {
                         <div className="flex items-center">
                             <Label htmlFor="password">Password</Label>
                             {canResetPassword && (
-                                <TextLink href={route('password.request')} className="ml-auto text-sm" tabIndex={5}>
+                                <TextLink href={passwordRequestRoute.url()} className="ml-auto text-sm" tabIndex={5}>
                                     Forgot password?
                                 </TextLink>
                             )}
@@ -98,7 +101,7 @@ export default function Login({ status, canResetPassword }: LoginProps) {
 
                 <div className="text-center text-sm text-muted-foreground">
                     Don't have an account?{' '}
-                    <TextLink href={route('register')} tabIndex={5}>
+                    <TextLink href={registerRoute.url()} tabIndex={5}>
                         Sign up
                     </TextLink>
                 </div>
diff --git a/resources/js/pages/auth/register.tsx b/resources/js/pages/auth/register.tsx
@@ -8,6 +8,8 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/auth-layout';
+import { store as registeredUserControllerStore } from '@/actions/App/Http/Controllers/Auth/RegisteredUserController';
+import { login as loginRoute } from '@/routes';
 
 type RegisterForm = {
     name: string;
@@ -26,7 +28,7 @@ export default function Register() {
 
     const submit: FormEventHandler = (e) => {
         e.preventDefault();
-        post(route('register'), {
+        post(registeredUserControllerStore.url(), {
             onFinish: () => reset('password', 'password_confirmation'),
         });
     };
@@ -109,7 +111,7 @@ export default function Register() {
 
                 <div className="text-center text-sm text-muted-foreground">
                     Already have an account?{' '}
-                    <TextLink href={route('login')} tabIndex={6}>
+                    <TextLink href={loginRoute.url()} tabIndex={6}>
                         Log in
                     </TextLink>
                 </div>
diff --git a/resources/js/pages/auth/reset-password.tsx b/resources/js/pages/auth/reset-password.tsx
@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/auth-layout';
+import { store as newPasswordControllerStore } from '@/actions/App/Http/Controllers/Auth/NewPasswordController';
 
 interface ResetPasswordProps {
     token: string;
@@ -30,7 +31,7 @@ export default function ResetPassword({ token, email }: ResetPasswordProps) {
 
     const submit: FormEventHandler = (e) => {
         e.preventDefault();
-        post(route('password.store'), {
+        post(newPasswordControllerStore.url(), {
             onFinish: () => reset('password', 'password_confirmation'),
         });
     };
diff --git a/resources/js/pages/auth/verify-email.tsx b/resources/js/pages/auth/verify-email.tsx
@@ -6,14 +6,16 @@ import { FormEventHandler } from 'react';
 import TextLink from '@/components/text-link';
 import { Button } from '@/components/ui/button';
 import AuthLayout from '@/layouts/auth-layout';
+import { send as verificationSendRoute } from '@/routes/verification';
+import { logout as logoutRoute } from '@/routes';
 
 export default function VerifyEmail({ status }: { status?: string }) {
     const { post, processing } = useForm({});
 
     const submit: FormEventHandler = (e) => {
         e.preventDefault();
 
-        post(route('verification.send'));
+        post(verificationSendRoute.url());
     };
 
     return (
@@ -32,7 +34,7 @@ export default function VerifyEmail({ status }: { status?: string }) {
                     Resend verification email
                 </Button>
 
-                <TextLink href={route('logout')} method="post" className="mx-auto block text-sm">
+                <TextLink href={logoutRoute.url()} method="post" className="mx-auto block text-sm">
                     Log out
                 </TextLink>
             </form>
diff --git a/resources/js/pages/settings/password.tsx b/resources/js/pages/settings/password.tsx
@@ -10,6 +10,7 @@ import HeadingSmall from '@/components/heading-small';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { update as passwordControllerUpdate } from '@/actions/App/Http/Controllers/Settings/PasswordController';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -31,7 +32,7 @@ export default function Password() {
     const updatePassword: FormEventHandler = (e) => {
         e.preventDefault();
 
-        put(route('password.update'), {
+        put(passwordControllerUpdate.url(), {
             preserveScroll: true,
             onSuccess: () => reset(),
             onError: (errors) => {
diff --git a/resources/js/pages/settings/profile.tsx b/resources/js/pages/settings/profile.tsx
@@ -11,6 +11,8 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/app-layout';
 import SettingsLayout from '@/layouts/settings/layout';
+import { update as profileControllerUpdate } from '@/actions/App/Http/Controllers/Settings/ProfileController';
+import { send as verificationSendRoute } from '@/routes/verification';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -35,7 +37,7 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
     const submit: FormEventHandler = (e) => {
         e.preventDefault();
 
-        patch(route('profile.update'), {
+        patch(profileControllerUpdate.url(), {
             preserveScroll: true,
         });
     };
@@ -87,7 +89,7 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
                                 <p className="-mt-4 text-sm text-muted-foreground">
                                     Your email address is unverified.{' '}
                                     <Link
-                                        href={route('verification.send')}
+                                        href={verificationSendRoute.url()}
                                         method="post"
                                         as="button"
                                         className="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
diff --git a/resources/js/pages/welcome.tsx b/resources/js/pages/welcome.tsx
diff --git a/resources/js/ssr.tsx b/resources/js/ssr.tsx
diff --git a/resources/js/types/global.d.ts b/resources/js/types/global.d.ts
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/vite.config.ts b/vite.config.ts

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,2 @@`
`1`	`1`	`resources/js/components/ui/*`
`2`		`-resources/js/ziggy.js`
`3`	`2`	`resources/views/mail/*`