feat: migrate from paths constant to new route management system

inertia/components/dashboard/collection/collection_container.tsx

@@ -21,7 +21,7 @@ const LinksWrapper = styled.div({
 const CollectionHeaderWrapper = styled.h2(({ theme }) => ({
   fontWeight: 400,
   color: theme.colors.font,
-  paddingInline: '0.8em 1.1em',
+  paddingRight: '1.1em',
   display: 'flex',
   gap: '0.4em',
   alignItems: 'center',

inertia/components/dashboard/collection/header/collection_controls.tsx

@@ -1,5 +1,5 @@
-import PATHS from '#constants/paths';
 import type Collection from '#models/collection';
+import { route } from '@izzyjs/route/client';
 import { BsThreeDotsVertical } from 'react-icons/bs';
 import { GoPencil } from 'react-icons/go';
 import { IoIosAddCircleOutline } from 'react-icons/io';
@@ -14,16 +14,19 @@ const CollectionControls = ({
   collectionId: Collection['id'];
 }) => (
   <Dropdown label={<BsThreeDotsVertical />} svgSize={18}>
-    <DropdownItemLink href={PATHS.LINK.CREATE}>
+    <DropdownItemLink href={route('link.create-form').url}>
       <IoIosAddCircleOutline /> Add
     </DropdownItemLink>
     <DropdownItemLink
-      href={appendCollectionId(PATHS.COLLECTION.EDIT, collectionId)}
+      href={appendCollectionId(route('collection.edit-form').url, collectionId)}
     >
       <GoPencil /> Edit
     </DropdownItemLink>
     <DropdownItemLink
-      href={appendCollectionId(PATHS.COLLECTION.REMOVE, collectionId)}
+      href={appendCollectionId(
+        route('collection.delete-form').url,
+        collectionId
+      )}
       danger
     >
       <IoTrashOutline /> Delete

inertia/components/dashboard/link/link_controls.tsx

@@ -1,7 +1,7 @@
-import PATHS from '#constants/paths';
 import type Link from '#models/link';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { route } from '@izzyjs/route/client';
 import { useCallback } from 'react';
 import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
 import { BsThreeDotsVertical } from 'react-icons/bs';
@@ -48,9 +48,12 @@ export default function LinkControls({ link }: { link: Link }) {
   );
 
   const onFavorite = () => {
+    const editRoute = route('link.edit', {
+      params: { id: link.id },
+    });
     makeRequest({
-      url: `${PATHS.API.LINK}/${link.id}`,
-      method: 'PUT',
+      url: editRoute.url,
+      method: editRoute.method,
       body: {
         name: link.name,
         url: link.url,
@@ -80,12 +83,18 @@ export default function LinkControls({ link }: { link: Link }) {
         )}
       </StartItem>
       <DropdownItemLink
-        href={appendCollectionId(PATHS.LINK.EDIT, link.collectionId)}
+        href={appendCollectionId(
+          route('link.edit-form').url,
+          link.collectionId
+        )}
       >
         <GoPencil /> Edit
       </DropdownItemLink>
       <DropdownItemLink
-        href={appendCollectionId(PATHS.LINK.REMOVE, link.collectionId)}
+        href={appendCollectionId(
+          route('link.delete-form').url,
+          link.collectionId
+        )}
         danger
       >
         <IoTrashOutline /> Delete

inertia/components/dashboard/link/no_item.tsx

@@ -1,6 +1,6 @@
-import PATHS from '#constants/paths';
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
 import { useTranslation } from 'react-i18next';
 import useActiveCollection from '~/hooks/use_active_collection';
 import { appendCollectionId } from '~/lib/navigation';
@@ -30,7 +30,9 @@ export function NoCollection() {
   return (
     <NoCollectionStyle>
       <Text>{t('select-collection')}</Text>
-      <Link href={PATHS.COLLECTION.CREATE}>{t('or-create-one')}</Link>
+      <Link href={route('collection.create-form').url}>
+        {t('or-create-one')}
+      </Link>
     </NoCollectionStyle>
   );
 }
@@ -51,7 +53,12 @@ export function NoLink() {
           ),
         }}
       />
-      <Link href={appendCollectionId(PATHS.LINK.CREATE, activeCollection?.id)}>
+      <Link
+        href={appendCollectionId(
+          route('link.create-form').url,
+          activeCollection?.id
+        )}
+      >
         {t('link.create')}
       </Link>
     </NoCollectionStyle>