feat: implement custom project data image

apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx

@@ -1,16 +1,11 @@
 import { useEffect, useState } from 'react';
-import { useFieldArray, useForm } from 'react-hook-form';
-import { IoAdd, IoTrash } from 'react-icons/io5';
-import { useQueryClient } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
 
-import { PROJECT_LIST } from '../../../../common/api/constants';
 import { createProject } from '../../../../common/api/db';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import Input from '../../../../common/components/input/input/Input';
-import Textarea from '../../../../common/components/input/textarea/Textarea';
 import { preventEscape } from '../../../../common/utils/keyEvent';
-import { documentationUrl } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
 
 import style from './ProjectPanel.module.scss';
@@ -31,12 +26,10 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
   const { onClose } = props;
 
   const [error, setError] = useState<string | null>(null);
-  const queryClient = useQueryClient();
 
   const {
     handleSubmit,
     register,
-    control,
     formState: { isSubmitting, isValid },
     setFocus,
   } = useForm<ProjectCreateFormValues>({
@@ -47,11 +40,6 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
     },
   });
 
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: 'custom',
-  });
-
   // set focus to first field
   useEffect(() => {
     setFocus('title');
@@ -63,22 +51,14 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
 
       const filename = values.title ?? 'untitled';
 
-      await createProject({
-        ...values,
-        filename,
-      });
+      await createProject({ filename });
 
-      await queryClient.invalidateQueries({ queryKey: PROJECT_LIST });
       onClose();
     } catch (error) {
       setError(maybeAxiosError(error));
     }
   };
 
-  const handleAddCustom = () => {
-    append({ title: '', value: '' });
-  };
-
   return (
     <Panel.Section
       as='form'
@@ -100,44 +80,8 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
       <Panel.Section className={style.innerColumn}>
         <label>
           Project title
-          <Input fluid maxLength={50} placeholder='Your project name' {...register('title')} />
+          <Input fluid placeholder='Your project name' {...register('title')} />
         </label>
-        <label>
-          Project description
-          <Input fluid maxLength={100} placeholder='Euro Love, Malmö 2024' {...register('description')} />
-        </label>
-        <label>
-          Project info
-          <Textarea fluid maxLength={150} placeholder='Wi-Fi password: 1234' resize='vertical' {...register('info')} />
-        </label>
-        <label>
-          Project QR code URL
-          <Input fluid placeholder={documentationUrl} {...register('url')} />
-        </label>
-        <Panel.Section>
-          <Panel.ListItem>
-            <Panel.Field title='Custom data' description='Add custom data for your project' />
-            <Button onClick={handleAddCustom}>
-              Add <IoAdd />
-            </Button>
-          </Panel.ListItem>
-          {fields.map((field, idx) => (
-            <div key={field.id} className={style.customDataItem}>
-              <Panel.Paragraph>{idx + 1}.</Panel.Paragraph>
-              <label>
-                Title
-                <Input placeholder={field.title} {...register(`custom.${idx}.title` as const)} />
-              </label>
-              <label>
-                Value
-                <Input placeholder={field.value} autoComplete='off' {...register(`custom.${idx}.value` as const)} />
-              </label>
-              <Button variant='ghosted' onClick={() => remove(idx)}>
-                <IoTrash />
-              </Button>
-            </div>
-          ))}
-        </Panel.Section>
       </Panel.Section>
     </Panel.Section>
   );

apps/client/src/features/app-settings/panel/settings-panel/ProjectData.tsx

@@ -87,7 +87,7 @@ export default function ProjectData() {
   };
 
   const handleAddCustom = () => {
-    append({ title: '', value: '' });
+    append({ title: '', value: '', url: '' });
   };
 
   const onSubmit = async (formData: ProjectData) => {
@@ -208,7 +208,7 @@ export default function ProjectData() {
                 return (
                   <div key={field.id} className={style.customDataItem}>
                     <div className={style.titleRow}>
-                      <label>
+                      <label className={style.title}>
                         Title
                         <Input
                           fluid
@@ -221,12 +221,12 @@ export default function ProjectData() {
                       </label>
                       <Button variant='subtle-destructive' onClick={() => remove(idx)}>
                         <IoTrash />
-                        Delete Entry
+                        Delete
                       </Button>
                     </div>
                     {rowErrors?.title?.message && <Panel.Error>{rowErrors.title.message}</Panel.Error>}
                     <label>
-                      Value
+                      Text
                       <Textarea
                         fluid
                         rows={3}
@@ -239,6 +239,20 @@ export default function ProjectData() {
                       />
                       {rowErrors?.value?.message && <Panel.Error>{rowErrors.value.message}</Panel.Error>}
                     </label>
+                    <label>
+                      Image URL (optional)
+                      <div className={style.customImage}>
+                        <Input
+                          fluid
+                          defaultValue={field.value}
+                          placeholder='Paste image URL (optional)'
+                          {...register(`custom.${idx}.url`)}
+                        />
+                        <div className={style.imageContainer}>
+                          <img src={watch(`custom.${idx}.url`)} alt='' loading='lazy' className='info__image' />
+                        </div>
+                      </div>
+                    </label>
                   </div>
                 );
               })}

apps/client/src/features/app-settings/panel/settings-panel/SettingsPanel.module.scss

@@ -31,3 +31,15 @@
     flex: 1;
   }
 }
+
+.customImage {
+  display: grid;
+  grid-template-columns: 1fr 72px;
+  gap: 1rem;
+}
+
+.imageContainer {
+  width: 72px;
+  height: 72px;
+  background-color: $gray-1250;
+}