Improve filter options list in notebook

If the current user shows up in the filter list. (e.g they have annotations), then sort that user to the front of the list and add " (Me)" suffix to the end of the displayed name to make it easier for a user to find and filter their own annotations.

src/sidebar/components/hooks/test/use-filter-options-test.js

@@ -38,6 +38,7 @@ describe('sidebar/components/hooks/use-user-filter-options', () => {
       allAnnotations: sinon.stub().returns([]),
       getFocusFilters: sinon.stub().returns({}),
       isFeatureEnabled: sinon.stub().returns(false),
+      profile: sinon.stub().returns({}),
     };
 
     $imports.$mock({
@@ -74,28 +75,25 @@ describe('sidebar/components/hooks/use-user-filter-options', () => {
     ]);
   });
 
-  it('should add focused-user filter information if configured', () => {
+  it('sorts the current user to the front with " (Me)" suffix', () => {
     fakeStore.allAnnotations.returns(annotationFixtures());
-    fakeStore.isFeatureEnabled.withArgs('client_display_names').returns(true);
-    fakeStore.getFocusFilters.returns({
-      user: { value: 'carrotNumberOne', display: 'Number One Carrot' },
+    fakeStore.profile.returns({
+      userid: 'acct:bananagram@localhost',
     });
 
     mount(<DummyComponent />);
 
     assert.deepEqual(lastUserOptions, [
-      { value: 'abalone', display: 'Aba Lone' },
-      { value: 'dingbat', display: 'Ding Bat' },
-      { value: 'carrotNumberOne', display: 'Number One Carrot' },
-      { value: 'bananagram', display: 'Zerk' },
+      { value: 'bananagram', display: 'bananagram (Me)' },
+      { value: 'abalone', display: 'abalone' },
+      { value: 'dingbat', display: 'dingbat' },
     ]);
   });
 
-  it('always uses display name for focused user', () => {
+  it('does not add (Me)" suffix if user has no annotations', () => {
     fakeStore.allAnnotations.returns(annotationFixtures());
-    fakeStore.isFeatureEnabled.withArgs('client_display_names').returns(false);
-    fakeStore.getFocusFilters.returns({
-      user: { value: 'carrotNumberOne', display: 'Numero Uno Zanahoria' },
+    fakeStore.profile.returns({
+      userid: 'acct:fakeaccount@localhost',
     });
 
     mount(<DummyComponent />);
@@ -104,7 +102,81 @@ describe('sidebar/components/hooks/use-user-filter-options', () => {
       { value: 'abalone', display: 'abalone' },
       { value: 'bananagram', display: 'bananagram' },
       { value: 'dingbat', display: 'dingbat' },
-      { value: 'carrotNumberOne', display: 'Numero Uno Zanahoria' },
     ]);
   });
+
+  describe('when focused-user filter is configured', () => {
+    beforeEach(() => {
+      fakeStore.getFocusFilters.returns({
+        user: { value: 'carrotNumberOne', display: 'Number One Carrot' },
+      });
+    });
+
+    it('should add focused-user filter information', () => {
+      fakeStore.allAnnotations.returns(annotationFixtures());
+      fakeStore.isFeatureEnabled.withArgs('client_display_names').returns(true);
+
+      mount(<DummyComponent />);
+
+      assert.deepEqual(lastUserOptions, [
+        { value: 'abalone', display: 'Aba Lone' },
+        { value: 'dingbat', display: 'Ding Bat' },
+        { value: 'carrotNumberOne', display: 'Number One Carrot' },
+        { value: 'bananagram', display: 'Zerk' },
+      ]);
+    });
+
+    it('always uses display name for focused user', () => {
+      fakeStore.allAnnotations.returns(annotationFixtures());
+      fakeStore.isFeatureEnabled
+        .withArgs('client_display_names')
+        .returns(false);
+      fakeStore.getFocusFilters.returns({
+        user: { value: 'carrotNumberOne', display: 'Numero Uno Zanahoria' },
+      });
+
+      mount(<DummyComponent />);
+
+      assert.deepEqual(lastUserOptions, [
+        { value: 'abalone', display: 'abalone' },
+        { value: 'bananagram', display: 'bananagram' },
+        { value: 'dingbat', display: 'dingbat' },
+        { value: 'carrotNumberOne', display: 'Numero Uno Zanahoria' },
+      ]);
+    });
+
+    it('sorts the current user to the front with " (Me)" suffix', () => {
+      fakeStore.allAnnotations.returns(annotationFixtures());
+      fakeStore.isFeatureEnabled.withArgs('client_display_names').returns(true);
+      fakeStore.profile.returns({
+        userid: 'acct:bananagram@localhost',
+      });
+
+      mount(<DummyComponent />);
+
+      assert.deepEqual(lastUserOptions, [
+        { value: 'bananagram', display: 'Zerk (Me)' },
+        { value: 'abalone', display: 'Aba Lone' },
+        { value: 'dingbat', display: 'Ding Bat' },
+        { value: 'carrotNumberOne', display: 'Number One Carrot' },
+      ]);
+    });
+
+    it('does not add (Me)" suffix if user has no annotations', () => {
+      fakeStore.allAnnotations.returns(annotationFixtures());
+      fakeStore.isFeatureEnabled.withArgs('client_display_names').returns(true);
+      fakeStore.profile.returns({
+        userid: 'acct:fakeid@localhost',
+      });
+
+      mount(<DummyComponent />);
+
+      assert.deepEqual(lastUserOptions, [
+        { value: 'abalone', display: 'Aba Lone' },
+        { value: 'dingbat', display: 'Ding Bat' },
+        { value: 'carrotNumberOne', display: 'Number One Carrot' },
+        { value: 'bananagram', display: 'Zerk' },
+      ]);
+    });
+  });
 });

src/sidebar/components/hooks/use-filter-options.js

@@ -16,6 +16,7 @@ export function useUserFilterOptions() {
   const annotations = store.allAnnotations();
   const focusFilters = store.getFocusFilters();
   const showDisplayNames = store.isFeatureEnabled('client_display_names');
+  const currentUsername = username(store.profile().userid);
 
   return useMemo(() => {
     // Determine unique users (authors) in annotation collection
@@ -39,13 +40,25 @@ export function useUserFilterOptions() {
       users[username_] = focusFilters.user.display;
     }
 
-    // Convert to `FilterOption` objects
+    // Convert to an array of `FilterOption` objects
     const userOptions = Object.keys(users).map(user => {
-      return { display: users[user], value: user };
+      // If the user is the current user, add "(Me)" to the displayed name
+      const display =
+        user === currentUsername ? `${users[user]} (Me)` : users[user];
+      return { display, value: user };
     });
 
-    userOptions.sort((a, b) => a.display.localeCompare(b.display));
+    userOptions.sort((a, b) => {
+      // Ensure that the current user "Me" resides at the front of the list
+      if (currentUsername === a.value) {
+        return -1;
+      } else if (currentUsername === b.value) {
+        return 1;
+      } else {
+        return a.display.localeCompare(b.display);
+      }
+    });
 
     return userOptions;
-  }, [annotations, focusFilters, showDisplayNames]);
+  }, [annotations, currentUsername, focusFilters.user, showDisplayNames]);
 }