Frontend imprevements.

client/src/App.tsx

@@ -5,6 +5,7 @@ import routerBindings, {
   DocumentTitleHandler,
   UnsavedChangesNotifier,
 } from '@refinedev/react-router-v6'
+import { useEffect } from 'react'
 import {
   BrowserRouter,
   Navigate,
@@ -24,10 +25,58 @@ import { ActionList, ActionShow } from './pages/actions'
 import { FlowShow } from './pages/flow'
 import { dataProvider as launchrDataProvider } from './rest-data-provider'
 import { ThemeProvider } from './ThemeProvider'
+import { svgToBase64 } from './utils/helpers'
 
 const apiUrl = import.meta.env.VITE_API_URL
 
+const fetchData = async () => {
+  const response = await fetch(`${apiUrl}/customisation`, {
+    method: 'GET',
+  })
+  const data = await response.json()
+  if (data?.plasmactl_web_ui_platform_favicon) {
+    const base64Favicon = svgToBase64(data.plasmactl_web_ui_platform_favicon)
+    sessionStorage.setItem('plasmactl_web_ui_platform_favicon', base64Favicon)
+    setFavicon(base64Favicon)
+
+    sessionStorage.setItem(
+      'plasmactl_web_ui_platform_logo',
+      data?.plasmactl_web_ui_platform_logo
+    )
+  }
+  if (data?.plasmactl_web_ui_platform_logo) {
+    const base64Logo = svgToBase64(data.plasmactl_web_ui_platform_logo)
+    sessionStorage.setItem('plasmactl_web_ui_platform_logo', base64Logo)
+  }
+
+  if (data?.plasmactl_web_ui_platform_name) {
+    sessionStorage.setItem(
+      'plasmactl_web_ui_platform_name',
+      data?.plasmactl_web_ui_platform_name
+    )
+  }
+}
+
+const setFavicon = (faviconUrl: string) => {
+  const link: HTMLLinkElement =
+    (document.querySelector("link[rel*='icon']") as HTMLLinkElement) ||
+    (document.createElement('link') as HTMLLinkElement)
+  link.type = 'image/svg+xml'
+  link.rel = 'icon'
+  link.href = faviconUrl
+  document.getElementsByTagName('head')[0].append(link)
+}
+
 export function App() {
+  useEffect(() => {
+    const favicon = sessionStorage.getItem('plasmactl_web_ui_platform_favicon')
+    if (favicon) {
+      setFavicon(favicon)
+    } else {
+      fetchData()
+    }
+  }, [])
+
   return (
     <AppProvider>
       <ActionProvider>

client/src/components/layout/Title.tsx

@@ -32,16 +32,22 @@ export const ThemedTitleV2: FC<RefineLayoutThemedTitleProps> = ({
         ...wrapperStyles,
       }}
     >
-      <img src={Logo} width="24" height="24" alt={t('Logo')} />
+      <img
+        src={sessionStorage.getItem('plasmactl_web_ui_platform_logo') || Logo}
+        width="24"
+        height="24"
+        alt={t('Logo')}
+      />
       <Typography
         variant="h5"
         fontWeight={700}
         color="text.primary"
         fontSize="15px"
         textOverflow="ellipsis"
         overflow="hidden"
+        sx={{ textTransform: 'uppercase' }}
       >
-        {text}
+        {sessionStorage.getItem('plasmactl_web_ui_platform_name') || text}
       </Typography>
     </MuiLink>
   )

client/src/utils/helpers.tsx

@@ -46,3 +46,12 @@ export const extractDateTimeFromId = (id: string) => {
 
   return formattedDate
 }
+
+export const svgToBase64 = (svg: string) => {
+  const base64 = btoa(
+    encodeURIComponent(svg).replaceAll(/%([\dA-F]{2})/g, (_, p1) =>
+      String.fromCodePoint(Number.parseInt(p1, 16))
+    )
+  )
+  return `data:image/svg+xml;base64,${base64}`
+}

client/src/utils/react-flow-builder.tsx

@@ -471,7 +471,11 @@ export const getNodesAndEdges = (
 
   const nodes: IFolder = {
     id: 'start',
-    data: { label: 'Platform name' },
+    data: {
+      label:
+        sessionStorage.getItem('plasmactl_web_ui_platform_name') ||
+        'Platform name',
+    },
     type: 'node-start',
     folders: {},
     actions: {},