fix: error when editing collection

app/controllers/collections_controller.ts

@@ -15,7 +15,7 @@ export default class CollectionsController {
       return response.redirectToNamedRoute('collection.create-form');
     }
 
-    const activeCollectionId = request.qs()?.collectionId ?? '';
+    const activeCollectionId = Number(request.qs()?.collectionId ?? '');
     const activeCollection = collections.find(
       (c) => c.id === activeCollectionId
     );

app/middleware/log_request.ts

@@ -10,7 +10,7 @@ export default class LogRequest {
       !request.url().startsWith('/@react-refresh') &&
       !request.url().includes('.ts')
     ) {
-      logger.info(`[${request.method()}]: ${request.url()}`);
+      logger.debug(`[${request.method()}]: ${request.url()}`);
     }
     await next();
   }

app/models/collection.ts

@@ -16,7 +16,7 @@ export default class Collection extends AppBaseModel {
   declare visibility: Visibility;
 
   @column()
-  declare next_id: number;
+  declare nextId: number;
 
   @column()
   declare authorId: number;

inertia/components/dashboard/collection/list/collection_item.tsx

@@ -2,6 +2,7 @@ import type Collection from '#models/collection';
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
+import { useEffect, useRef } from 'react';
 import { AiFillFolderOpen, AiOutlineFolder } from 'react-icons/ai';
 import TextEllipsis from '~/components/common/text_ellipsis';
 import { Item } from '~/components/dashboard/side_nav/nav_item';
@@ -29,14 +30,22 @@ export default function CollectionItem({
 }: {
   collection: Collection;
 }) {
+  const itemRef = useRef<HTMLDivElement>(null);
   const { activeCollection } = useActiveCollection();
   const isActiveCollection = collection.id === activeCollection?.id;
   const FolderIcon = isActiveCollection ? AiFillFolderOpen : AiOutlineFolder;
 
+  useEffect(() => {
+    if (collection.id === activeCollection?.id) {
+      itemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+  }, [collection.id, activeCollection?.id]);
+
   return (
     <CollectionItemLink
       href={appendCollectionId(route('dashboard').url, collection.id)}
       isActive={isActiveCollection}
+      ref={itemRef}
     >
       <FolderIcon css={{ minWidth: '24px' }} size={24} />
       <TextEllipsis>{collection.name}</TextEllipsis>

inertia/components/dashboard/link/link_list.tsx

@@ -23,9 +23,11 @@ export default function LinkList({ links }: { links: Link[] }) {
 
   return (
     <LinkListStyle>
-      {links.map((link) => (
-        <LinkItem link={link} key={link.id} showUserControls />
-      ))}
+      {links
+        .sort((a, b) => (a.created_at > b.created_at ? 1 : -1))
+        .map((link) => (
+          <LinkItem link={link} key={link.id} showUserControls />
+        ))}
     </LinkListStyle>
   );
 }

inertia/components/form/form_collection.tsx

@@ -1,3 +1,4 @@
+import type Collection from '#models/collection';
 import { FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import Checkbox from '~/components/common/form/checkbox';
@@ -10,6 +11,7 @@ export type FormCollectionData = {
   name: string;
   description: string | null;
   visibility: Visibility;
+  nextId: Collection['id'];
 };
 
 interface FormCollectionProps {

inertia/pages/collections/edit.tsx

@@ -18,6 +18,7 @@ export default function EditCollectionPage({
       name: collection.name,
       description: collection.description,
       visibility: collection.visibility,
+      nextId: collection.nextId,
     });
   const canSubmit = useMemo<boolean>(() => {
     const isFormEdited =