feat: use route management system for collections

app/controllers/collections_controller.ts

@@ -1,4 +1,3 @@
-import PATHS from '#constants/paths';
 import Collection from '#models/collection';
 import User from '#models/user';
 import {
@@ -12,7 +11,7 @@ export default class CollectionsController {
   async index({ auth, inertia, request, response }: HttpContext) {
     const collections = await this.getCollectionsByAuthorId(auth.user!.id);
     if (collections.length === 0) {
-      return response.redirect('/collections/create');
+      return response.redirectToNamedRoute('collection.create-form');
     }
 
     const activeCollectionId = request.qs()?.collectionId ?? '';
@@ -21,7 +20,7 @@ export default class CollectionsController {
     );
 
     if (!activeCollection && !!activeCollectionId) {
-      return response.redirect('/dashboard');
+      return response.redirectToNamedRoute('dashboard');
     }
 
     return inertia.render('dashboard', {
@@ -51,7 +50,7 @@ export default class CollectionsController {
   async showEditPage({ auth, request, inertia, response }: HttpContext) {
     const collectionId = request.qs()?.collectionId;
     if (!collectionId) {
-      return response.redirect('/dashboard');
+      return response.redirectToNamedRoute('dashboard');
     }
 
     const collection = await this.getCollectionById(
@@ -105,6 +104,8 @@ export default class CollectionsController {
     response: HttpContext['response'],
     collectionId: Collection['id']
   ) {
-    return response.redirect(`${PATHS.DASHBOARD}?collectionId=${collectionId}`);
+    return response.redirectToNamedRoute('dashboard', {
+      qs: { collectionId },
+    });
   }
 }

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

@@ -13,12 +13,13 @@ const CollectionNameWrapper = styled.div({
   alignItems: 'center',
 });
 
-const CollectionName = styled.div({
+const CollectionName = styled.div(({ theme }) => ({
   minWidth: 0,
+  color: theme.colors.primary,
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
-});
+}));
 
 const LinksCount = styled.div(({ theme }) => ({
   minWidth: 'fit-content',

inertia/components/dashboard/side_nav/side_navigation.tsx

@@ -1,12 +1,14 @@
-import PATHS from '#constants/paths';
 import styled from '@emotion/styled';
+import { route } from '@izzyjs/route/client';
 import { AiOutlineFolderAdd } from 'react-icons/ai';
 import { BsGear } from 'react-icons/bs';
 import { IoAdd } from 'react-icons/io5';
 import { MdOutlineAdminPanelSettings } from 'react-icons/md';
 import FavoriteList from '~/components/dashboard/side_nav/favorite/favorite_list';
-import { ItemLink } from '~/components/dashboard/side_nav/nav_item';
+import { Item, ItemLink } from '~/components/dashboard/side_nav/nav_item';
 import UserCard from '~/components/dashboard/side_nav/user_card';
+import useActiveCollection from '~/hooks/use_active_collection';
+import { appendCollectionId } from '~/lib/navigation';
 
 const SideMenu = styled.nav({
   height: '100%',
@@ -15,11 +17,11 @@ const SideMenu = styled.nav({
   flexDirection: 'column',
 });
 
-const AdminButton = styled(ItemLink)(({ theme }) => ({
+const AdminButton = styled(Item)(({ theme }) => ({
   color: theme.colors.lightRed,
 }));
 
-const SettingsButton = styled(ItemLink)(({ theme }) => ({
+const SettingsButton = styled(Item)(({ theme }) => ({
   color: theme.colors.grey,
 }));
 
@@ -27,26 +29,32 @@ const AddButton = styled(ItemLink)(({ theme }) => ({
   color: theme.colors.primary,
 }));
 
-const SideNavigation = () => (
+export default function SideNavigation() {
+  const { activeCollection } = useActiveCollection();
+  return (
     <SideMenu>
       <div css={{ paddingInline: '10px' }}>
         <UserCard />
-      <AdminButton href="/admin">
+        <AdminButton>
           <MdOutlineAdminPanelSettings /> Administrator
         </AdminButton>
-      <SettingsButton href="/settings">
+        <SettingsButton>
           <BsGear />
           Settings
         </SettingsButton>
-      <AddButton href={PATHS.LINK.CREATE}>
+        <AddButton
+          href={appendCollectionId(
+            route('link.create-form').url,
+            activeCollection?.id
+          )}
+        >
           <IoAdd /> Create link
         </AddButton>
-      <AddButton href={PATHS.COLLECTION.CREATE}>
+        <AddButton href={route('collection.create-form').url}>
           <AiOutlineFolderAdd /> Create collection
         </AddButton>
       </div>
       <FavoriteList />
     </SideMenu>
-);
-
-export default SideNavigation;
+  );
+}

inertia/pages/dashboard.tsx

@@ -4,6 +4,7 @@ import type Collection from '#models/collection';
 import Link from '#models/link';
 import styled from '@emotion/styled';
 import { router } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
 import { ReactNode, useEffect, useMemo, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSwipeable } from 'react-swipeable';
@@ -18,6 +19,7 @@ import FavoritesContext from '~/contexts/favorites_context';
 import GlobalHotkeysContext from '~/contexts/global_hotkeys_context';
 import { useMediaQuery } from '~/hooks/use_media_query';
 import useToggle from '~/hooks/use_modal';
+import { appendCollectionId } from '~/lib/navigation';
 
 interface DashboardPageProps {
   collections: Collection[];
@@ -78,8 +80,10 @@ function DashboardProviders(
     props.activeCollection || collections?.[0]
   );
 
-  const handleChangeCollection = (collection: Collection) =>
+  const handleChangeCollection = (collection: Collection) => {
     setActiveCollection(collection);
+    router.visit(appendCollectionId(route('dashboard').url, collection.id));
+  };
 
   const favorites = useMemo<Link[]>(
     () =>