From 4f5dd8528cc2badef94950725a5435ee07d23edb Mon Sep 17 00:00:00 2001
From: AML - A Laycock <aml@lhs.lancs.sch.uk>
Date: Mon, 28 Oct 2024 13:02:57 +0000
Subject: [PATCH] feat: sidebar icon

---
 app/lib/settings.server.ts |   5 +++--
 app/routes/app.system.tsx  |  24 +++++++++++++++++++++---
 app/routes/app.tsx         |   7 ++++++-
 public/icon.png            | Bin 0 -> 889 bytes
 4 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 public/icon.png

diff --git a/app/lib/settings.server.ts b/app/lib/settings.server.ts
index 3b4eaf6..549f6bd 100644
--- a/app/lib/settings.server.ts
+++ b/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) => {
diff --git a/app/routes/app.system.tsx b/app/routes/app.system.tsx
index eb42ee2..7e603bd 100644
--- a/app/routes/app.system.tsx
+++ b/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>
diff --git a/app/routes/app.tsx b/app/routes/app.tsx
index b64c245..15db2c5 100644
--- a/app/routes/app.tsx
+++ b/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">
diff --git a/public/icon.png b/public/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..704bd620b6097514805bf3ce4d55c4a26aef0a24
GIT binary patch
literal 889
zcmeAS@N?(olHy`uVBq!ia0vp^DIm<j1|$m}O$`B3jKx9jP7LeL$-HD>U^e!2aSW-5
zdppOm=(Yim>*M6FEO9s3U!J<WxMa^O*F7INt8~g2NiJWd)6Mcj(dpG`weAV?AJj8s
z8cyMt|Ffj%!2~U-rk@hbl@HuEGoR(;n~=t)&*U2r*I*+j(lzzs!w-iJ@Ukj|eNVq-
z-&mvenWK-J%i)NF-P5QA3@QvB+*4c?jz10*c=t{9-S^**RE~LH+p%zY5JS*J{Wyhr
zUW^_F0@@-CYZ#6&wfgR5@>qFtw{6O;^=bZ$9w*;+?Z3{nawX7!?YGw|$;_H_{`tX{
zTfu!xy%svL{7hLn;d#OP1q@4sCzPKScW7~tTFNHY?U3eYcsKdly7liEt;$4xvP|gX
z+21zrovKdc+?5PVj2kW;PI|R?@}-4wM)|Q1XJ{??{?Xcj$A9*^k_DH$nU`@L++V@Y
zAoPA?CQHMNH(mKTOi7hYcRx?AP!Vfz+4cH@8Drs#%ST@@IP|o+nwv8Q{yF}k#H#kJ
z=UVaHYf`@$A`hn?me5nUzwf_9+mFAmpMUsWwO6ctPmG@P?44X2U)gS5R&`Xt>;i+r
zNrjyaTh27vrrfk`*pd?N5HCET;p4<P77P<oG#Mx8GH;a8b30r7zJ1y<E=G@#S%0sZ
zGIsK}3o=a7VQ1Kss<3xGqv~frv2#DFCa-j2P)h#LKSA2V$6`gFtU)NpwWHPvOot|k
zG9THS!l)uSVMakfD!=C(<~NF*4>q)`G#Kz5<W;$8QzqG$dGgj$=96lvOoxu&lc;*9
z%B^s+;Ydrf)_KLw;svkeKH2YimXpdausZqRTVIE!WXHN^(Hnk#nt3kMv9*NFK=vMs
z%3;@?FIm2oO%_y$UN<3S<9j2S;MO;n8dD}4F$V5AHYexb(Sl>^ABakGOED}-c%;^_
zMs|t9$1_6buO__Rxl1eMt-{$nE-MC?ghfG23SQ={Q4E4JR!m{&xa8X?=D?z+rOL3V
zBzOU<Kx3yDXM@IFkqkzvC^chsvHbWZD*OJ1!dT{0d5etpU2&Kq?3#U#F}O7$X%BO-
bLOnx`(&6UHdHpkid5OW()z4*}Q$iB}#6)&U

literal 0
HcmV?d00001