Disable inapplicable context menu options

client/components/ContextMenu.css

@@ -16,13 +16,3 @@
   opacity: 0;
   visibility: hidden;
 }
-
-.item {
-  cursor: pointer;
-  margin: 0;
-  padding: 8px 14px;
-}
-
-.item:hover {
-  background: #ffefd7;
-}

client/components/ContextMenu.jsx

@@ -1,17 +1,14 @@
 /** @jsx h */
 import {h} from 'preact';
 import cls from 'classnames';
+import ContextMenuItem from './ContextMenuItem';
 import PureComponent from '../lib/PureComponent';
 import {store} from '../store';
 import {elementIsOutside} from '../utils';
 
 import s from './ContextMenu.css';
 
 export default class ContextMenu extends PureComponent {
-  constructor(props) {
-    super(props);
-  }
-
   componentDidMount() {
     this.boundingRect = this.node.getBoundingClientRect();
   }
@@ -30,15 +27,22 @@ export default class ContextMenu extends PureComponent {
       [s.container]: true,
       [s.hidden]: !visible
     });
-    const itemClassName = cls({
-      [s.item]: true
-    });
+    const multipleChunksSelected = store.selectedChunks.length > 1;
     return (
       <ul ref={this.saveNode} className={containerClassName} style={this.getStyle()}>
-        <li className={itemClassName} onClick={this.handleClickHideChunk}>Hide chunk</li>
-        <li className={itemClassName} onClick={this.handleClickFilterToChunk}>Hide all other chunks</li>
+        <ContextMenuItem disabled={!multipleChunksSelected}
+          onClick={this.handleClickHideChunk}>
+          Hide chunk
+        </ContextMenuItem>
+        <ContextMenuItem disabled={!multipleChunksSelected}
+          onClick={this.handleClickFilterToChunk}>
+          Hide all other chunks
+        </ContextMenuItem>
         <hr/>
-        <li className={itemClassName} onClick={this.handleClickShowAllChunks}>Show all chunks</li>
+        <ContextMenuItem disabled={store.allChunksSelected}
+          onClick={this.handleClickShowAllChunks}>
+          Show all chunks
+        </ContextMenuItem>
       </ul>
     );
   }

client/components/ContextMenuItem.css

@@ -0,0 +1,24 @@
+.item {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+
+  cursor: pointer;
+  margin: 0;
+  padding: 8px 14px;
+}
+
+.item:hover {
+  background: #ffefd7;
+}
+
+.disabled {
+  cursor: default;
+  color: gray;
+}
+
+.item.disabled:hover {
+  background: transparent;
+}

client/components/ContextMenuItem.jsx

@@ -0,0 +1,17 @@
+/** @jsx h */
+import {h} from 'preact';
+import cls from 'classnames';
+import s from './ContextMenuItem.css';
+
+function noop() {
+  return false;
+}
+
+export default function ContextMenuItem({children, disabled, onClick}) {
+  const className = cls({
+    [s.item]: true,
+    [s.disabled]: disabled
+  });
+  const handler = disabled ? noop : onClick;
+  return (<li className={className} onClick={handler}>{children}</li>);
+}