Custom branding - Add primary color and app name customization

.env.example

@@ -1,6 +1,8 @@
 # your domain, e.g https://example.com
 APP_URL=http://localhost:3000
 PORT=3000
+# Customize the name displayed in the header and in the tab. Empty fallback to Forkmost
+APP_NAME=
 
 # can be useful for debugging
 VITE_HOST=

apps/client/src/App.tsx

@@ -44,11 +44,11 @@ export default function App() {
         <Route path={"/forgot-password"} element={<ForgotPassword />} />
         <Route path={"/password-reset"} element={<PasswordReset />} />
         <Route path={"/auth/oidc/callback"} element={<OidcCallbackPage />} />
-        { /* <Route path={"/login/mfa"} element={<MfaChallengePage />} />
+        {/* <Route path={"/login/mfa"} element={<MfaChallengePage />} />
         <Route
           path={"/login/mfa/setup"}
           element={<MfaSetupRequiredPage />}
-        /> */ }
+        /> */}
 
         {!isCloud() && (
           <Route path={"/setup/register"} element={<SetupWorkspace />} />
@@ -71,10 +71,7 @@ export default function App() {
           <Route path={"/s/:spaceSlug"} element={<SpaceHome />} />
           <Route path={"/s/:spaceSlug/graph"} element={<SpaceGraph />} />
           <Route path={"/s/:spaceSlug/trash"} element={<SpaceTrash />} />
-          <Route
-            path={"/s/:spaceSlug/p/:pageSlug"}
-            element={<Page />}
-          />
+          <Route path={"/s/:spaceSlug/p/:pageSlug"} element={<Page />} />
 
           <Route path={"/settings"}>
             <Route path={"account/profile"} element={<AccountSettings />} />

apps/client/src/components/layouts/global/app-header.tsx

@@ -12,7 +12,7 @@ import {
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 import SidebarToggle from "@/components/ui/sidebar-toggle-button.tsx";
 import { useTranslation } from "react-i18next";
-import { isCloud } from "@/lib/config.ts";
+import { isCloud, getAppName } from "@/lib/config.ts";
 import {
   SearchControl,
   SearchMobileControl,
@@ -78,7 +78,7 @@ export function AppHeader() {
             component={Link}
             to="/home"
           >
-            {import.meta.env.VITE_APP_NAME || "Forkmost"}
+            {getAppName()}
           </Text>
 
           <Group ml={50} gap={5} className={classes.links} visibleFrom="sm">

apps/client/src/components/ui/error-404.tsx

@@ -3,14 +3,17 @@ import classes from "./error-404.module.css";
 import { Link } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
+import { getAppName } from "@/lib/config";
 
 export function Error404() {
   const { t } = useTranslation();
 
   return (
     <>
       <Helmet>
-        <title>{t("404 page not found")} - Forkmost</title>
+        <title>
+          {t("404 page not found")} - {getAppName()}
+        </title>
       </Helmet>
       <Container className={classes.root}>
         <Title className={classes.title}>{t("404 page not found")}</Title>

apps/client/src/features/attachments/services/attachment-service.ts

@@ -80,6 +80,22 @@ export async function uploadWorkspaceIcon(file: File): Promise<IAttachment> {
   return uploadIcon(file, AvatarIconType.WORKSPACE_ICON);
 }
 
+export async function uploadWorkspaceFavicon(file: File): Promise<string> {
+  const formData = new FormData();
+  formData.append("image", file);
+
+  const response = await api.post<{ faviconUrl: string }>(
+    "/attachments/upload-favicon",
+    formData,
+    {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    },
+  );
+  return response.faviconUrl;
+}
+
 async function removeIcon(
   type: AvatarIconType,
   spaceId?: string,
@@ -104,3 +120,7 @@ export async function removeSpaceIcon(spaceId: string): Promise<void> {
 export async function removeWorkspaceIcon(): Promise<void> {
   await removeIcon(AvatarIconType.WORKSPACE_ICON);
 }
+
+export async function removeWorkspaceFavicon(): Promise<void> {
+  await removeIcon(AvatarIconType.WORKSPACE_FAVICON);
+}

apps/client/src/features/attachments/types/attachment.types.ts

@@ -19,6 +19,7 @@ export enum AvatarIconType {
   AVATAR = "avatar",
   SPACE_ICON = "space-icon",
   WORKSPACE_ICON = "workspace-icon",
+  WORKSPACE_FAVICON = "workspace-favicon",
 }
 
 export enum AttachmentType {

apps/client/src/features/auth/components/auth-layout.tsx

@@ -1,12 +1,20 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Group, Text } from "@mantine/core";
 import classes from "./auth.module.css";
+import { useWorkspacePublicDataQuery } from "@/features/workspace/queries/workspace-query.ts";
+import { applyWorkspaceBranding } from "@/lib/branding.ts";
 
 type AuthLayoutProps = {
   children: React.ReactNode;
 };
 
 export function AuthLayout({ children }: AuthLayoutProps) {
+  const { data: workspace } = useWorkspacePublicDataQuery();
+
+  useEffect(() => {
+    applyWorkspaceBranding(workspace?.settings);
+  }, [workspace?.settings]);
+
   return (
     <>
       <Group justify="center" gap={8} className={classes.logo}>

apps/client/src/features/share/components/share-shell.tsx

@@ -5,7 +5,7 @@ import {
   Group,
   ScrollArea,
   Text,
-  Tooltip
+  Tooltip,
 } from "@mantine/core";
 import { useGetSharedPageTreeQuery } from "@/features/share/queries/share-query.ts";
 import { Link, useParams } from "react-router-dom";
@@ -15,7 +15,10 @@ import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
 import { ThemeToggle } from "@/components/ui/theme-toggle.tsx";
 import { useAtomValue, useSetAtom } from "jotai";
 import { useAtom } from "jotai";
-import { sharedPageTreeAtom, sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom";
+import {
+  sharedPageTreeAtom,
+  sharedTreeDataAtom,
+} from "@/features/share/atoms/shared-page-atom";
 import { buildSharedPageTree } from "@/features/share/utils";
 import {
   desktopSidebarAtom,
@@ -38,6 +41,7 @@ import {
 import { ShareSearchSpotlight } from "@/features/search/components/share-search-spotlight.tsx";
 import { shareSearchSpotlight } from "@/features/search/constants";
 import { FullWidthToggle } from "@/components/ui/full-width-toggle";
+import { getAppName } from "@/lib/config.ts";
 
 const MemoizedSharedTree = React.memo(SharedTree);
 
@@ -58,8 +62,13 @@ export default function ShareShell({
   const toggleToc = useToggleToc(tableOfContentAsideAtom);
 
   const { shareId } = useParams();
-  const sessionPassword = shareId ? sessionStorage.getItem(`share-password-${shareId}`) : null;
-  const { data } = useGetSharedPageTreeQuery(shareId, sessionPassword || undefined);
+  const sessionPassword = shareId
+    ? sessionStorage.getItem(`share-password-${shareId}`)
+    : null;
+  const { data } = useGetSharedPageTreeQuery(
+    shareId,
+    sessionPassword || undefined,
+  );
   const readOnlyEditor = useAtomValue(readOnlyEditorAtom);
 
   // @ts-ignore
@@ -127,11 +136,8 @@ export default function ShareShell({
                 </Tooltip>
               </>
             )}
-            <Text
-              size="lg"
-              fw={600}
-            >
-              {import.meta.env.VITE_APP_NAME || "Forkmost"}
+            <Text size="lg" fw={600}>
+              {getAppName()}
             </Text>
           </Group>
 
@@ -186,9 +192,7 @@ export default function ShareShell({
         </AppShell.Navbar>
       )}
 
-      <AppShell.Main>
-        {children}
-      </AppShell.Main>
+      <AppShell.Main>{children}</AppShell.Main>
 
       <AppShell.Aside
         p="md"

apps/client/src/features/user/user-provider.tsx

@@ -11,6 +11,7 @@ import { useTreeSocket } from "@/features/websocket/use-tree-socket.ts";
 import { useNotificationSocket } from "@/features/notification/hooks/use-notification-socket.ts";
 import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
 import { Error404 } from "@/components/ui/error-404.tsx";
+import { applyWorkspaceBranding } from "@/lib/branding.ts";
 
 export function UserProvider({ children }: React.PropsWithChildren) {
   const [, setCurrentUser] = useAtom(currentUserAtom);
@@ -50,6 +51,7 @@ export function UserProvider({ children }: React.PropsWithChildren) {
   useEffect(() => {
     if (data && data.user && data.workspace) {
       setCurrentUser(data);
+      applyWorkspaceBranding(data.workspace.settings);
       i18n.changeLanguage(
         data.user.locale === "en" ? "en-US" : data.user.locale,
       );