Add Hide Presence Tab Feature

This enhancement allows users to toggle the visibility of the Presence tab, providing a more focused view of the content they are interested in.
yorkie-team · Jul 20, 2024 · f5e538a · f5e538a
1 parent e191153
commit f5e538a
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 16 deletions.
diff --git a/tools/devtools/src/devtools/panel/index.tsx b/tools/devtools/src/devtools/panel/index.tsx
@@ -60,6 +60,7 @@ const Panel = () => {
     axis: 'x',
     initial: 300,
   });
+  const [hidePresenceTab, setHidePresenceTab] = useState(false);
 
   // filter out presence events in History tab
   const [hidePresenceEvent, setHidePresenceEvent] = useState(false);
@@ -151,19 +152,29 @@ const Panel = () => {
         <SelectedNodeProvider>
           <Document
             style={{
-              width: documentW,
+              width: hidePresenceTab ? '100%' : documentW,
+              maxWidth: hidePresenceTab ? '100%' : '90%',
+              borderRight: hidePresenceTab
+                ? 'none'
+                : '1px solid var(--gray-300)',
             }}
+            hidePresenceTab={hidePresenceTab}
+            setHidePresenceTab={setHidePresenceTab}
           />
         </SelectedNodeProvider>
 
-        <Separator
-          isDragging={isDocumentDragging}
-          {...documentSeparatorProps}
-        />
-
-        <SelectedPresenceProvider>
-          <Presence />
-        </SelectedPresenceProvider>
+        {!hidePresenceTab && (
+          <>
+            <Separator
+              isDragging={isDocumentDragging}
+              {...documentSeparatorProps}
+            />
+
+            <SelectedPresenceProvider>
+              <Presence />
+            </SelectedPresenceProvider>
+          </>
+        )}
       </div>
     </div>
   );

diff --git a/tools/devtools/src/devtools/panel/styles.css b/tools/devtools/src/devtools/panel/styles.css
@@ -83,13 +83,13 @@
   width: 100%;
 }
 
-.devtools-history-toolbar {
+.devtools-tab-toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.toggle-history-btn {
+.toggle-tab-btn {
   margin-left: 4px;
   padding: 2px 6px;
   border: 1px solid var(--gray-300);
@@ -100,7 +100,7 @@
   font-size: 10px;
 }
 
-.toggle-history-btn:hover {
+.toggle-tab-btn:hover {
   background: var(--gray-200);
 }
 

diff --git a/tools/devtools/src/devtools/tabs/Document.tsx b/tools/devtools/src/devtools/tabs/Document.tsx
@@ -23,7 +23,7 @@ import { useSelectedNode } from '../contexts/SelectedNode';
 import { useCurrentDocKey, useYorkieDoc } from '../contexts/YorkieSource';
 import { CloseIcon } from '../icons';
 
-export function Document({ style }) {
+export function Document({ style, hidePresenceTab, setHidePresenceTab }) {
   const currentDocKey = useCurrentDocKey();
   const [doc] = useYorkieDoc();
   const [selectedNode, setSelectedNode] = useSelectedNode();
@@ -60,7 +60,18 @@ export function Document({ style }) {
 
   return (
     <div className="yorkie-root content-wrap" style={{ ...style }}>
-      <div className="title">{currentDocKey || 'Document'}</div>
+      <div className="devtools-tab-toolbar">
+        <span className="title">{currentDocKey || 'Document'}</span>
+        <button
+          className="toggle-tab-btn"
+          onClick={() => {
+            setHidePresenceTab((v: boolean) => !v);
+          }}
+        >
+          {hidePresenceTab ? '⏴' : '⏵'}
+        </button>
+      </div>
+
       <div className="content">
         <RootTree root={root} />
         {selectedNode && (

diff --git a/tools/devtools/src/devtools/tabs/History.tsx b/tools/devtools/src/devtools/tabs/History.tsx
@@ -149,11 +149,11 @@ export function History({
       }}
     >
       <div className="content-wrap">
-        <div className="devtools-history-toolbar">
+        <div className="devtools-tab-toolbar">
           <span className="title">
             History
             <button
-              className="toggle-history-btn"
+              className="toggle-tab-btn"
               onClick={() => {
                 setOpenHistory((v) => !v);
               }}