Use background + space theme in standalone chat

app/src/renderer/apps/Courier/views/Inbox/Inbox.tsx

@@ -15,8 +15,14 @@ export const InboxPresenter = ({ isStandaloneChat = false }: Props) => {
   const { loggedInAccount, shellStore } = useAppState();
   const { chatStore, spacesStore } = useShipStore();
 
-  const { sortedChatList, loader, setChat, setSubroute, isChatPinned } =
-    chatStore;
+  const {
+    sortedChatList,
+    loader,
+    setChat,
+    setStandaloneChat,
+    setSubroute,
+    isChatPinned,
+  } = chatStore;
   const currentSpace = spacesStore.selected;
 
   useEffect(() => {
@@ -33,6 +39,7 @@ export const InboxPresenter = ({ isStandaloneChat = false }: Props) => {
       isChatPinned={isChatPinned}
       onClickInbox={(path) => {
         setChat(path);
+        isStandaloneChat ? setStandaloneChat(path) : setChat(path);
         setSubroute('chat');
       }}
       onClickNewInbox={() => {

app/src/renderer/apps/StandaloneChat/StandaloneChatBody.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
 import { observer } from 'mobx-react';
+import styled, { css } from 'styled-components';
 
 import { Flex, Spinner, Text } from '@holium/design-system/general';
 
@@ -17,8 +19,29 @@ import {
 import { StandaloneChatPassport } from './StandaloneChatPassport';
 import { StandaloneChatPassportPreview } from './StandaloneChatPassportPreview';
 
+const StandaloneBackgroundImage = styled(motion.img)`
+  ${(props: { src?: string }) =>
+    props.src &&
+    css`
+      user-select: none;
+      position: absolute;
+      right: 0px;
+      left: 0px;
+      z-index: -1;
+      top: 0px;
+      bottom: 0px;
+      width: calc(100%);
+      height: calc(100vh);
+      object-fit: cover;
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+      background-image: url(${props.src});
+    `}
+`;
+
 export const StandaloneChatBodyPresenter = () => {
-  const { showTitleBar } = useAppState();
+  const { showTitleBar, theme } = useAppState();
   const { chatStore } = useShipStore();
 
   const [sidebarWidth, setSidebarWidth] = useState(400);
@@ -94,13 +117,20 @@ export const StandaloneChatBodyPresenter = () => {
           }}
         />
       </Flex>
-      <Flex
-        flex={1}
-        height="100%"
-        position="relative"
-        minWidth={360}
-        background="var(--rlm-dock-color)"
-      >
+      <Flex flex={1} height="100%" position="relative" minWidth={360}>
+        <StandaloneBackgroundImage
+          key={theme.wallpaper}
+          src={theme.wallpaper}
+          initial={{ opacity: 0 }}
+          exit={{ opacity: 0 }}
+          animate={{
+            opacity: 1,
+            filter: `var(--blur)`,
+          }}
+          transition={{
+            opacity: { duration: 0.5 },
+          }}
+        />
         {chatStore.subroute === 'chat' && <ChatLog isStandaloneChat />}
         {chatStore.subroute === 'chat-info' && <ChatInfo isStandaloneChat />}
         {chatStore.subroute === 'new' && <CreateNewChat isStandaloneChat />}

app/src/renderer/apps/StandaloneChat/StandaloneChatPassport.tsx

@@ -22,7 +22,6 @@ const StandaloneChatPassportPresenter = ({ onBack }: Props) => {
       width="100%"
       height="100%"
       borderTop="1px solid var(--rlm--color)"
-      background="var(--rlm-base-color)"
     >
       <ChatLogHeader
         path={loggedInAccount.serverId}

app/src/renderer/stores/chat.store.ts

@@ -187,6 +187,10 @@ export const ChatStore = types
       }
       self.subroute = subroute;
     }),
+    setStandaloneChat(path: string) {
+      this.setChat(path);
+      this.updateStandaloneChatTheme();
+    },
     setChat(path: string) {
       self.selectedChat = tryReference(() =>
         self.inbox.find((chat) => chat.path === path)
@@ -283,6 +287,23 @@ export const ChatStore = types
     refreshInbox: flow(function* () {
       self.inbox = yield ChatIPC.getChatList();
     }),
+    updateStandaloneChatTheme() {
+      const selectedChat = self.selectedChat;
+      if (!selectedChat) return;
+      const spacesStore: SpacesStoreType = getParentOfType(
+        self,
+        ShipStore
+      ).spacesStore;
+      if (selectedChat.type === 'space') {
+        // get space theme
+        const selectedSpace = spacesStore.getSpaceByChatPath(selectedChat.path);
+        if (!selectedSpace) return;
+        spacesStore.selectSpace(selectedSpace?.path);
+      } else {
+        // personal theme
+        spacesStore.selectSpace(spacesStore.ourSpace.path);
+      }
+    },
     reset() {
       self.subroute = 'inbox';
       self.pinnedChats.clear();