added user filter to pdf/web sidebar.

2 files changed, 19 insertions, 2 deletions

diff --git a/src/client/views/SidebarAnnos.scss b/src/client/views/SidebarAnnos.scss
index 9eea83d59..9686cce85 100644
--- a/src/client/views/SidebarAnnos.scss
+++ b/src/client/views/SidebarAnnos.scss
@@ -4,7 +4,8 @@
     overflow: auto;
     flex-flow: row;
     flex-wrap: wrap;
-    .sidebarAnnos-filterTag, .sidebarAnnos-filterTag-active {
+    .sidebarAnnos-filterTag, .sidebarAnnos-filterTag-active,
+    .sidebarAnnos-filterUser, .sidebarAnnos-filterUser-active {
         font-weight: bold;
         padding-left: 6;
         padding-right: 6;
@@ -14,6 +15,9 @@
         height: 20;
         background-color: lightgrey;
     }
+    .sidebarAnnos-filterUser, .sidebarAnnos-filterUser-active {
+        border-radius: 15px;
+    }
     .sidebarAnnos-filterTag-active {
         background-color: white;
     }
diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx
index 9d085e2b6..a859dcab4 100644
--- a/src/client/views/SidebarAnnos.tsx
+++ b/src/client/views/SidebarAnnos.tsx
@@ -37,6 +37,11 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> {
         DocListCast(this.props.rootDoc[this.sidebarKey()]).forEach(doc => SearchBox.documentKeys(doc).forEach(key => keys.add(key)));
         return Array.from(keys.keys()).filter(key => key[0]).filter(key => !key.startsWith("_") && (key[0] === "#" || key[0] === key[0].toUpperCase())).sort();
     }
+    @computed get allUsers() {
+        const keys = new Set<string>();
+        DocListCast(this.props.rootDoc[this.sidebarKey()]).forEach(doc => keys.add(StrCast(doc.author)));
+        return Array.from(keys.keys()).sort();
+    }
     get filtersKey() { return "_" + this.sidebarKey() + "-docFilters"; }
 
     anchorMenuClick = (anchor: Doc) => {
@@ -73,7 +78,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> {
     docFilters = () => [...StrListCast(this.props.layoutDoc._docFilters), ...StrListCast(this.props.layoutDoc[this.filtersKey])];
 
     sidebarStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string) => {
-        if (property === StyleProp.ShowTitle) return "title";
+        if (property === StyleProp.ShowTitle) return StrCast(this.props.layoutDoc["sidebar-childShowTitle"], "title");
         return this.props.styleProvider?.(doc, props, property)
     }
     render() {
@@ -84,6 +89,13 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> {
                 {tag}
             </div>;
         };
+        const renderUsers = (user: string) => {
+            const active = StrListCast(this.props.rootDoc[this.filtersKey]).includes(`author:${user}:check`);
+            return <div key={user} className={`sidebarAnnos-filterUser${active ? "-active" : ""}`}
+                onClick={e => Doc.setDocFilter(this.props.rootDoc, "author", user, "check", true, this.sidebarKey(), e.shiftKey)}>
+                {user}
+            </div>;
+        };
         return !this.props.layoutDoc._showSidebar ? (null) :
             <div style={{
                 position: "absolute", pointerEvents: this.props.active() ? "all" : undefined, top: 0, right: 0,
@@ -120,6 +132,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> {
                     />
                 </div>
                 <div className="sidebarAnnos-tagList" style={{ height: this.filtersHeight(), width: this.panelWidth() }}>
+                    {this.allUsers.map(renderUsers)}
                     {this.allHashtags.map(renderTag)}
                 </div>
             </div>;