feat: add webcontent no select placeholder

Author: moonrailgun

src/renderer/assets/web-page.svg

@@ -1,5 +1,8 @@
 import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
 import { useTreeStore, WebsiteTreeNode } from '../store/tree';
+import webpageSvg from '../assets/web-page.svg';
+import { AddWebsiteBtn } from './AddWebsiteBtn';
 
 const WebviewRender: React.FC<{ node: WebsiteTreeNode }> = React.memo(
   (props) => {
@@ -64,11 +67,47 @@ const WebviewRender: React.FC<{ node: WebsiteTreeNode }> = React.memo(
 );
 WebviewRender.displayName = 'WebviewRender';
 
+const WebPlaceholderRoot = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  flex-direction: column;
+
+  img {
+    width: 120px;
+  }
+`;
+
+const WebPlaceholder: React.FC = React.memo(() => {
+  useEffect(() => {
+    window.electron.ipcRenderer.sendMessage('hide-all-webview');
+  }, []);
+
+  return (
+    <WebPlaceholderRoot>
+      <div>
+        <img src={webpageSvg} />
+      </div>
+      <div>Please Select Any Page on Left</div>
+      <div>
+        <small>OR</small>
+      </div>
+      <div>
+        <AddWebsiteBtn />
+      </div>
+    </WebPlaceholderRoot>
+  );
+});
+WebPlaceholder.displayName = 'WebPlaceholder';
+
 export const WebContent: React.FC = React.memo(() => {
   const selectedNode = useTreeStore((state) => state.selectedNode);
 
   if (!selectedNode) {
-    return <div>Please Select Node</div>;
+    return <WebPlaceholder />;
   }
 
   return <WebviewRender node={selectedNode} />;