refactor: create types instead of using models

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

@@ -1,4 +1,3 @@
-import type Collection from '#models/collection';
 import { route } from '@izzyjs/route/client';
 import { useTranslation } from 'react-i18next';
 import { BsThreeDotsVertical } from 'react-icons/bs';
@@ -8,6 +7,7 @@ import { IoTrashOutline } from 'react-icons/io5';
 import Dropdown from '~/components/common/dropdown/dropdown';
 import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
 import { appendCollectionId } from '~/lib/navigation';
+import { Collection } from '~/types/app';
 
 export default function CollectionControls({
   collectionId,

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

@@ -1,4 +1,3 @@
-import type Collection from '#models/collection';
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
@@ -8,6 +7,7 @@ import TextEllipsis from '~/components/common/text_ellipsis';
 import { Item } from '~/components/dashboard/side_nav/nav_item';
 import useActiveCollection from '~/hooks/use_active_collection';
 import { appendCollectionId } from '~/lib/navigation';
+import { CollectionWithLinks } from '~/types/app';
 
 const CollectionItemStyle = styled(Item, {
   shouldForwardProp: (propName) => propName !== 'isActive',
@@ -28,7 +28,7 @@ const LinksCount = styled.div(({ theme }) => ({
 export default function CollectionItem({
   collection,
 }: {
-  collection: Collection;
+  collection: CollectionWithLinks;
 }) {
   const itemRef = useRef<HTMLDivElement>(null);
   const { activeCollection } = useActiveCollection();

inertia/components/dashboard/link/link_controls.tsx

@@ -1,4 +1,3 @@
-import type Link from '#models/link';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { route } from '@izzyjs/route/client';
@@ -17,6 +16,7 @@ import useActiveCollection from '~/hooks/use_active_collection';
 import useCollections from '~/hooks/use_collections';
 import { appendLinkId } from '~/lib/navigation';
 import { makeRequest } from '~/lib/request';
+import { Link } from '~/types/app';
 
 const StartItem = styled(DropdownItemButton)(({ theme }) => ({
   color: theme.colors.yellow,
@@ -54,7 +54,7 @@ export default function LinkControls({ link }: { link: Link }) {
 
   const onFavorite = () => {
     const { url, method } = route('link.toggle-favorite', {
-      params: { id: link.id },
+      params: { id: link.id.toString() },
     });
     makeRequest({
       url,

inertia/components/dashboard/link/link_item.tsx

@@ -1,9 +1,9 @@
-import type Link from '#models/link';
 import styled from '@emotion/styled';
 import { AiFillStar } from 'react-icons/ai';
 import ExternalLink from '~/components/common/external_link';
 import LinkControls from '~/components/dashboard/link/link_controls';
 import LinkFavicon from '~/components/dashboard/link/link_favicon';
+import { Link } from '~/types/app';
 
 const LinkWrapper = styled.li(({ theme }) => ({
   userSelect: 'none',

inertia/components/dashboard/link/link_list.tsx

@@ -1,8 +1,8 @@
-import type Link from '#models/link';
 import styled from '@emotion/styled';
 import LinkItem from '~/components/dashboard/link/link_item';
 import { NoLink } from '~/components/dashboard/link/no_item';
 import { sortByCreationDate } from '~/lib/array';
+import { Link } from '~/types/app';
 
 const LinkListStyle = styled.ul({
   height: '100%',

inertia/components/dashboard/quick_action/_quick_action_style.tsx

@@ -1,22 +0,0 @@
-import styled from '@emotion/styled';
-
-const ActionStyle = styled.div(({ theme }) => ({
-  border: '0 !important',
-  margin: '0 !important',
-  padding: '0 !important',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-
-  '& svg': {
-    height: '20px',
-    width: '20px',
-    transition: theme.transition.delay,
-  },
-
-  '&:hover svg': {
-    transform: 'scale(1.25)',
-  },
-}));
-
-export default ActionStyle;

inertia/components/dashboard/quick_action/quick_action.tsx

@@ -1,55 +0,0 @@
-import type Collection from '#models/collection';
-import type Link from '#models/link';
-import { Link as LinkTag } from '@inertiajs/react';
-import { MouseEventHandler } from 'react';
-import { useTranslation } from 'react-i18next';
-import { AiOutlineEdit } from 'react-icons/ai';
-import { CgTrashEmpty } from 'react-icons/cg';
-import { IoAddOutline } from 'react-icons/io5';
-import ActionStyle from '~/components/dashboard/quick_action/_quick_action_style';
-import { appendCollectionId, appendResourceId } from '~/lib/navigation';
-
-type Resource = 'collection' | 'link';
-type Action = 'create' | 'edit' | 'remove';
-
-const getIconFromAction = (action: Action) => {
-  switch (action) {
-    case 'create':
-      return IoAddOutline;
-    case 'edit':
-      return AiOutlineEdit;
-    case 'remove':
-      return CgTrashEmpty;
-  }
-};
-
-const QuickResourceActionStyle = ActionStyle.withComponent(LinkTag);
-export default function QuickResourceAction({
-  resource,
-  action,
-  collectionId,
-  resourceId,
-  onClick,
-}: {
-  resource: Resource;
-  action: Action;
-  collectionId?: Collection['id'];
-  resourceId?: Collection['id'] | Link['id'];
-  onClick?: MouseEventHandler<HTMLAnchorElement>;
-}) {
-  const { t } = useTranslation('common');
-  const ActionIcon = getIconFromAction(action);
-
-  return (
-    <QuickResourceActionStyle
-      href={appendCollectionId(
-        appendResourceId(`/${resource}/${action}`, resourceId),
-        collectionId
-      )}
-      title={t(`${resource}.${action}`)}
-      onClick={onClick ? (event) => onClick(event) : undefined}
-    >
-      <ActionIcon />
-    </QuickResourceActionStyle>
-  );
-}

inertia/components/dashboard/quick_action/quick_favorite_link.tsx

@@ -1,26 +0,0 @@
-import styled from '@emotion/styled';
-import { MouseEventHandler } from 'react';
-import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
-import ActionStyle from '~/components/dashboard/quick_action/_quick_action_style';
-
-const StartIcon = styled(AiFillStar)(({ theme }) => ({
-  color: theme.colors.yellow,
-}));
-const UnstaredIcon = StartIcon.withComponent(AiOutlineStar);
-
-const QuickLinkFavoriteStyle = ActionStyle.withComponent('div');
-const QuickLinkFavorite = ({
-  isFavorite,
-  onClick,
-}: {
-  isFavorite?: boolean;
-  onClick: MouseEventHandler<HTMLDivElement>;
-}) => (
-  <QuickLinkFavoriteStyle
-    onClick={onClick ? (event) => onClick(event) : undefined}
-  >
-    {isFavorite ? <StartIcon /> : <UnstaredIcon />}
-  </QuickLinkFavoriteStyle>
-);
-
-export default QuickLinkFavorite;

inertia/components/form/form_collection.tsx

@@ -1,11 +1,11 @@
 import { Visibility } from '#enums/visibility';
-import type Collection from '#models/collection';
 import { FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import Checkbox from '~/components/common/form/checkbox';
 import TextBox from '~/components/common/form/textbox';
 import BackToDashboard from '~/components/common/navigation/back_to_dashboard';
 import FormLayout from '~/components/layouts/form_layout';
+import { Collection } from '~/types/app';
 
 export type FormCollectionData = {
   name: string;

inertia/components/form/form_link.tsx

@@ -1,4 +1,3 @@
-import type Collection from '#models/collection';
 import { FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import Checkbox from '~/components/common/form/checkbox';
@@ -6,6 +5,7 @@ import TextBox from '~/components/common/form/textbox';
 import BackToDashboard from '~/components/common/navigation/back_to_dashboard';
 import FormLayout from '~/components/layouts/form_layout';
 import useSearchParam from '~/hooks/use_search_param';
+import { Collection } from '~/types/app';
 
 export type FormLinkData = {
   name: string;