2 files changed, 5 insertions, 31 deletions
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 1cd7cf82a..45dec2661 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -98,12 +98,12 @@
         width: unset;
     }
 
-    >svg, .treeView-lock, .treeView-hide, .treeView-lock-active, .treeView-hide-active {
+    >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active {
         margin-left: 0.25rem;
         margin-right: 0.25rem; 
     }
 
-    >svg, .treeView-lock, .treeView-hide {
+    >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
         display: none;
     }
 
@@ -131,7 +131,7 @@
         }
     }
 
-    .treeView-lock, .treeView-hide {
+    .styleProvider-treeView-lock, .styleProvider-treeView-hide {
         display: inherit;
     }
 }
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index bc0fd287b..8d25cc295 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -466,33 +466,6 @@ export class TreeView extends React.Component<TreeViewProps> {
             }
         </div>;
     }
-    
-    @action
-    toggleHidden = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        this.doc.hidden = this.doc.hidden ? undefined : true;
-    }
-
-    @action
-    toggleLock = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        this.doc.lockedPosition = this.doc.lockedPosition ? undefined : true;
-    }
-
-    @computed get renderRightButtons() {
-        TraceMobx();
-        const hidden = this.doc.hidden;
-        const locked = this.doc.lockedPosition;
-        return this.doc._viewType == CollectionViewType.Docking || (Doc.IsSystem(this.doc) && Doc.UserDoc().noviceMode) ? (null) :
-            <>
-                <div className={`treeView-hide${hidden ? "-active" : ""}`} onClick={this.toggleHidden}>
-                    <FontAwesomeIcon icon={hidden ? "eye-slash" : "eye"} size="sm" />
-                </div>
-                <div className={`treeView-lock${locked ? "-active" : ""}`} onClick={this.toggleLock}>
-                    <FontAwesomeIcon icon={locked ? "lock" : "unlock"} size="sm" />
-                </div>
-            </>
-    }
 
     @computed get showTitleEditorControl() { return ["*", this._uniqueId, this.props.treeView._uniqueId].includes(Doc.GetT(this.doc, "editTitle", "string", true) || ""); }
     @computed get headerElements() {
@@ -612,7 +585,8 @@ export class TreeView extends React.Component<TreeViewProps> {
                 }} >
                 {view}
             </div >
-            {this.renderRightButtons}
+            {/* hide and lock buttons */}
+            {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} 
             {this.headerElements}
         </>;
     }