feat: sidebar icon

app/lib/settings.server.ts

@@ -1,11 +1,12 @@
 import {asyncForEach} from '@arcath/utils'
 import {getPrisma} from './prisma.server'
 
-type SettingKey = 'site-name' | 'site-color'
+type SettingKey = 'site-name' | 'site-color' | 'site-icon'
 
 export const DEFAULT_SETTINGS: {[setting in SettingKey]: string} = {
   'site-name': 'Net Doc',
-  'site-color': '#d1d5db'
+  'site-color': '#d1d5db',
+  'site-icon': '/icon.png'
 }
 
 export const getSetting = async (setting: SettingKey) => {

app/routes/app.system.tsx

@@ -3,7 +3,8 @@ import {
   type LoaderFunctionArgs,
   type ActionFunctionArgs,
   json,
-  redirect
+  redirect,
+  unstable_parseMultipartFormData
 } from '@remix-run/node'
 import {useLoaderData} from '@remix-run/react'
 import path from 'path'
@@ -16,6 +17,7 @@ import {pageTitle} from '~/lib/utils/page-title'
 import {ensureUser} from '~/lib/utils/ensure-user'
 import {getSettings, setSetting} from '~/lib/settings.server'
 import {HelperText, Input, Label} from '~/lib/components/input'
+import {getUploadHandler} from '~/lib/utils/upload-handler.server'
 
 export const loader = async ({request}: LoaderFunctionArgs) => {
   const user = await ensureUser(request, 'system', {})
@@ -31,12 +33,17 @@ export const loader = async ({request}: LoaderFunctionArgs) => {
 export const action = async ({request}: ActionFunctionArgs) => {
   await ensureUser(request, 'system', {})
 
-  const formData = await request.formData()
+  const uploadHandler = getUploadHandler()
+
+  const formData = await unstable_parseMultipartFormData(request, uploadHandler)
 
   const settings = await getSettings(['site-name', 'site-color'])
 
   const siteName = formData.get('site-name') as string | undefined
   const siteColor = formData.get('site-color') as string | undefined
+  const siteIcon = formData.get('site-icon') as unknown as
+    | {filepath: string; type: string}
+    | undefined
 
   invariant(siteName)
   invariant(siteColor)
@@ -49,6 +56,12 @@ export const action = async ({request}: ActionFunctionArgs) => {
     await setSetting('site-color', siteColor)
   }
 
+  if (siteIcon && siteIcon.filepath) {
+    const fileName = path.basename(siteIcon.filepath)
+
+    await setSetting('site-icon', `/uploads/${fileName}`)
+  }
+
   return redirect('/app/system')
 }
 
@@ -65,7 +78,7 @@ const System = () => {
       <div className="grid grid-cols-2 gap-8">
         <div className="entry">
           <h2>System Settings</h2>
-          <form method="POST">
+          <form method="POST" encType="multipart/form-data">
             <Label>
               Site Name
               <Input name="site-name" defaultValue={settings['site-name']} />
@@ -81,6 +94,11 @@ const System = () => {
               />
               <HelperText>This color is used for the sidebar.</HelperText>
             </Label>
+            <Label>
+              Icon
+              <Input type="file" name="site-icon" />
+              <HelperText>The icon at the top of the sidebar</HelperText>
+            </Label>
             <Button className="bg-success">Update Settings</Button>
           </form>
         </div>

app/routes/app.tsx

@@ -47,7 +47,7 @@ export const loader = async ({request}: LoaderFunctionArgs) => {
     })
   ])
 
-  const settings = await getSettings(['site-name', 'site-color'])
+  const settings = await getSettings(['site-name', 'site-color', 'site-icon'])
 
   return json({user, assets, cans, settings})
 }
@@ -158,6 +158,11 @@ const Dashboard = () => {
           color: contrastColor(settings['site-color'].replace('#', ''))
         }}
       >
+        <img
+          src={settings['site-icon']}
+          alt={settings['site-name']}
+          className="mb-8 mx-auto w-24 h-24"
+        />
         <h1 className="text-center text-4xl mb-8">{settings['site-name']}</h1>
         <h2 className="text-xl ml-4 mb-4">Core</h2>
         <div className="pl-8 mb-2 flex flex-col gap-2 mt-2">