feat: create edit collection page

inertia/components/common/dropdown/dropdown_item.tsx

@@ -1,19 +1,19 @@
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
 
-const DropdownItemBase = styled.div<{ danger?: boolean }>(
-  ({ theme, danger }) => ({
-    fontSize: '14px',
-    whiteSpace: 'nowrap',
-    color: danger ? theme.colors.lightRed : theme.colors.primary,
-    padding: '8px 12px',
-    borderRadius: theme.border.radius,
+const DropdownItemBase = styled('div', {
+  shouldForwardProp: (propName) => propName !== 'danger',
+})<{ danger?: boolean }>(({ theme, danger }) => ({
+  fontSize: '14px',
+  whiteSpace: 'nowrap',
+  color: danger ? theme.colors.lightRed : theme.colors.primary,
+  padding: '8px 12px',
+  borderRadius: theme.border.radius,
 
-    '&:hover': {
-      backgroundColor: theme.colors.background,
-    },
-  })
-);
+  '&:hover': {
+    backgroundColor: theme.colors.background,
+  },
+}));
 
 const DropdownItemButton = styled(DropdownItemBase)({
   display: 'flex',

inertia/components/common/form/textbox.tsx

@@ -1,12 +1,20 @@
+import styled from '@emotion/styled';
 import { ChangeEvent, InputHTMLAttributes, useState } from 'react';
 import FormField from '~/components/common/form/_form_field';
 import Input from '~/components/common/form/_input';
 
+// TODO: create a global style variable (fontSize)
+const InputLegend = styled.p(({ theme }) => ({
+  fontSize: '12px',
+  color: theme.colors.lightRed,
+}));
+
 interface InputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
   label: string;
   name: string;
   value?: string;
+  errors?: string[];
   onChange?: (name: string, value: string) => void;
 }
 
@@ -14,6 +22,7 @@ export default function TextBox({
   name,
   label,
   value = '',
+  errors = [],
   onChange,
   required = false,
   ...props
@@ -39,6 +48,8 @@ export default function TextBox({
         value={inputValue}
         placeholder={props.placeholder ?? 'Type something...'}
       />
+      {errors.length > 0 &&
+        errors.map((error) => <InputLegend>{error}</InputLegend>)}
     </FormField>
   );
 }

inertia/components/dashboard/collection/collection_container.tsx

@@ -63,7 +63,7 @@ export default function CollectionContainer({
           </Link>
         )}
         <CollectionHeader />
-        <CollectionControls />
+        <CollectionControls collectionId={activeCollection.id} />
       </CollectionHeaderWrapper>
       <CollectionDescription />
       <LinkList links={activeCollection.links} />

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

@@ -1,20 +1,31 @@
 import PATHS from '#constants/paths';
+import type Collection from '#models/collection';
 import { BsThreeDotsVertical } from 'react-icons/bs';
-import { HiOutlinePencil } from 'react-icons/hi2';
+import { GoPencil } from 'react-icons/go';
 import { IoIosAddCircleOutline } from 'react-icons/io';
 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';
 
-const CollectionControls = () => (
+const CollectionControls = ({
+  collectionId,
+}: {
+  collectionId: Collection['id'];
+}) => (
   <Dropdown label={<BsThreeDotsVertical />} svgSize={18}>
     <DropdownItemLink href={PATHS.LINK.CREATE}>
       <IoIosAddCircleOutline /> Add
     </DropdownItemLink>
-    <DropdownItemLink href={PATHS.COLLECTION.EDIT}>
-      <HiOutlinePencil /> Edit
+    <DropdownItemLink
+      href={appendCollectionId(PATHS.COLLECTION.EDIT, collectionId)}
+    >
+      <GoPencil /> Edit
     </DropdownItemLink>
-    <DropdownItemLink href={PATHS.COLLECTION.REMOVE} danger>
+    <DropdownItemLink
+      href={appendCollectionId(PATHS.COLLECTION.REMOVE, collectionId)}
+      danger
+    >
       <IoTrashOutline /> Delete
     </DropdownItemLink>
   </Dropdown>

inertia/components/dashboard/link/link_controls.tsx

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { useCallback } from 'react';
 import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
 import { BsThreeDotsVertical } from 'react-icons/bs';
-import { HiOutlinePencil } from 'react-icons/hi2';
+import { GoPencil } from 'react-icons/go';
 import { IoTrashOutline } from 'react-icons/io5';
 import Dropdown from '~/components/common/dropdown/dropdown';
 import {
@@ -82,7 +82,7 @@ export default function LinkControls({ link }: { link: Link }) {
       <DropdownItemLink
         href={appendCollectionId(PATHS.LINK.EDIT, link.collectionId)}
       >
-        <HiOutlinePencil /> Edit
+        <GoPencil /> Edit
       </DropdownItemLink>
       <DropdownItemLink
         href={appendCollectionId(PATHS.LINK.REMOVE, link.collectionId)}

inertia/components/form/form_collection.tsx

@@ -16,6 +16,7 @@ export default function FormCollection({
   canSubmit,
   disableHomeLink,
   data,
+  errors,
 
   setData,
   handleSubmit,
@@ -24,6 +25,7 @@ export default function FormCollection({
   canSubmit: boolean;
   disableHomeLink?: boolean;
   data: FormCollectionData;
+  errors?: Record<string, Array<string>>;
 
   setData: (name: string, value: string) => void;
   handleSubmit: () => void;
@@ -53,6 +55,7 @@ export default function FormCollection({
           name="name"
           onChange={setData}
           value={data.name}
+          errors={errors?.name}
           required
           autoFocus
         />
@@ -62,13 +65,14 @@ export default function FormCollection({
           name="description"
           onChange={setData}
           value={data.description ?? undefined}
+          errors={errors?.description}
         />
         <FormField>
           <label htmlFor="visibility">Public</label>
           <input
             type="checkbox"
             onChange={handleOnCheck}
-            value={data.visibility}
+            checked={data.visibility === Visibility.PUBLIC}
             id="visibility"
           />
         </FormField>

inertia/components/layouts/dashboard_layout.tsx

@@ -4,7 +4,7 @@ import BaseLayout from './_base_layout';
 
 const DashboardLayoutStyle = styled.div(({ theme }) => ({
   height: '100%',
-  width: theme.media.small_desktop,
+  width: theme.media.medium_desktop,
   maxWidth: '100%',
   padding: '0.75em 1em',
 }));