Restore follow mode (#812)

* Attempt to fix follow

The idea is that we'd pass in a custom icon renderer function to the
UsersItem component. Our custom function is based on the old code prior
to [PR #723](#723).

I really don't know what I'm doing here. ToolbarWidget isn't a react
component, so I don't know how to manage state! Perhaps we don't need to
keep track of state at all, we just need to update the model and let the
model keep track of it.

Co-authored-by: Arjun Verma <[email protected]>

* bring back follow mode

* pointer and border for user item

---------

Co-authored-by: Arjun Verma <[email protected]>

Author: mfisher87

packages/base/src/toolbar/widget.tsx

@@ -1,5 +1,9 @@
-import { UsersItem } from '@jupyter/collaboration';
-import { IJGISExternalCommand, JupyterGISModel } from '@jupytergis/schema';
+import { UsersItem, DefaultIconRenderer } from '@jupyter/collaboration';
+import {
+  IUserData,
+  IJGISExternalCommand,
+  JupyterGISModel,
+} from '@jupytergis/schema';
 import { CommandToolbarButton } from '@jupyterlab/apputils';
 import {
   MenuSvg,
@@ -32,10 +36,41 @@ export class Separator extends Widget {
   }
 }
 
+function createUserIconRenderer(model: JupyterGISModel) {
+  let selectedUserId: number | undefined;
+
+  return (props: { user: IUserData }): JSX.Element => {
+    const { user } = props;
+    const isSelected = user.userId === selectedUserId;
+    const className = isSelected ? 'selected' : '';
+
+    const onClick = () => {
+      if (user.userId === selectedUserId) {
+        selectedUserId = undefined;
+        model.setUserToFollow(undefined);
+      } else {
+        selectedUserId = user.userId;
+        model.setUserToFollow(user.userId);
+      }
+    };
+
+    return (
+      <DefaultIconRenderer
+        user={user}
+        onClick={onClick}
+        className={className}
+      />
+    );
+  };
+}
+
 export class ToolbarWidget extends ReactiveToolbar {
+  private _model: JupyterGISModel;
+
   constructor(options: ToolbarWidget.IOptions) {
     super();
 
+    this._model = options.model;
     this.addClass('jGIS-toolbar-widget');
 
     if (options.commands) {
@@ -138,9 +173,12 @@ export class ToolbarWidget extends ReactiveToolbar {
       this.addItem('spacer', ReactiveToolbar.createSpacerItem());
 
       // Users
+      const iconRenderer = createUserIconRenderer(this._model);
       this.addItem(
         'users',
-        ReactWidget.create(<UsersItem model={options.model} />),
+        ReactWidget.create(
+          <UsersItem model={this._model} iconRenderer={iconRenderer} />,
+        ),
       );
     }
   }

python/jupytergis_lab/style/base.css

@@ -830,3 +830,13 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
   border-bottom: 2px solid var(--jp-brand-color1);
   font-weight: 500;
 }
+
+.jp-toolbar-users-item > .lm-MenuBar-itemIcon {
+  cursor: pointer !important;
+  border: 2px solid transparent;
+  border-radius: 50%;
+}
+
+.jp-toolbar-users-item > .lm-MenuBar-itemIcon.selected {
+  border-color: var(--jp-brand-color1);
+}