Started reworking WBBrowseDialog to make it managable.

frontend/src/js/dialog/wb-browse-dialog-collection-content.js

@@ -0,0 +1,11 @@
+import { h, Component } from 'preact';
+
+class WBBrowseDialogCollectionContent extends Component {
+  render() {
+    return (
+      <div>WBBrowseDialogCollectionContent</div>
+    );
+  }
+}
+
+export default WBBrowseDialogCollectionContent;

frontend/src/js/dialog/wb-browse-dialog-collection-list.js

@@ -0,0 +1,11 @@
+import { h, Component } from 'preact';
+
+class WBBrowseDialogCollectionList extends Component {
+  render() {
+    return (
+      <div>WBBrowseDialogCollectionList</div>
+    );
+  }
+}
+
+export default WBBrowseDialogCollectionList;

frontend/src/js/dialog/wb-browse-dialog-user-list.js

@@ -0,0 +1,11 @@
+import { h, Component } from 'preact';
+
+class WBBrowseDialogUserList extends Component {
+  render() {
+    return (
+      <div>WBBrowseDialogUserList</div>
+    );
+  }
+}
+
+export default WBBrowseDialogUserList;

frontend/src/js/dialog/wb-browse-dialog.js

@@ -1,94 +1,152 @@
 import { h, Component } from 'preact';
 import WBBrowseDialogProjectList from 'wb-browse-dialog-project-list';
 import WBBrowseDialogCollectionList from 'wb-browse-dialog-project-list';
+import WBBrowseDialogCollectionContent from 'wb-browse-dialog-collection-content';
+import WBBrowseDialogUserList from 'wb-browse-dialog-user-list';
 import linkState from 'linkstate';
 import { Router } from 'preact-router';
 import { createHashHistory } from 'history';
 
+//
+// internal URLs look like this
+//
+// /browse-dialog/browse/( owner-uuid )/( project-page )/( text-search )
+// /browse-dialog/users//( users-page )/( text-search )
+// /browse-dialog/shared-with-me//( project-page )/( collection-page )/( text-search )
+// /browse-dialog/content/( collection-uuid )//( content-page )/( text-search )
+//
+// general pattern therefore:
+// /browse-dialog/( mode )/( uuid )/( top-page )/( bottom-page )/( text-search )
+//
+// props:
+//   selectMany: Boolean
+//   selectWhat: [ 'file', 'directory' ]
+//
+// state:
+//   selected: Array of UUID
+//   textSearch: string
+//   textSearchInput: string
+//
+
 class WBBrowseDialog extends Component {
   constructor(...args) {
     super(...args);
     this.state.history = [];
-    this.state.history_1 = createHashHistory();
+    this.state.selected = {};
+    this.state.selectedOrder = [];
+    const { currentUser } = this.props.app.state;
+    this.navigate('/browse-dialog/browse/' + currentUser.uuid, false);
   }
 
-  resetSearch() {
+  navigateBack() {
+    if (this.history.length === 0)
+      return;
+    const url = this.history.pop();
+    navigate(url, false);
+  }
+
+  navigate(url, history=true) {
+    if (history)
+      this.history.push(this.state.currentUrl);
+    let [ _1, _2, mode, uuid, topPage, bottomPage, textSearch ] = url.split('/');
+    topPage = parseInt(topPage, 10) || 0;
+    bottomPage = parseInt(bottomPage, 10) || 0;
     this.setState({
-      'textSearch': null,
-      'textSearchInput': null
+      'currentUrl': url,
+      mode, uuid, topPage, bottomPage, textSearch
     });
   }
 
-  pushHistory(child) {
-    const { history, textSearch } = this.state;
-    history.push([ child, { textSearch } ]);
-    this.state.history = history.slice(history.length - 1000);
+  select(uuid) {
+    let { selected, selectedOrder } = this.state;
+    if (uuid in selected) {
+      const n = selectedOrder.indexOf(uuid);
+      selectedOrder = selected.splice(n, n + 1);
+    }
+    selected[uuid] = true;
+    selectedOrder.push(uuid);
+    this.setState({
+      selected, selectedOrder
+    });
   }
 
-  popHistory() {
-    if (this.history.length === 0)
+  deselect(uuid) {
+    let { selected, selectedOrder } = this.state;
+    if (!(uuid in selected))
       return;
-    const entry = history.pop();
-    this.setState(entry[1]);
-    entry[0].popHistory();
+    const n = selectedOrder.indexOf(uuid);
+    selectedOrder = selected.splice(n, n + 1);
+    delete selected[uuid];
+    this.setState({
+      selected, selectedOrder
+    });
   }
 
-  render({ app, id }, { mode, textSearch, textSearchInput, history, history_1 }) {
+  resetSelection() {
+    this.setState({
+      'selected': {},
+      'selectedOrder': []
+    });
+  }
+
+  render({ app, id, selectMany, selectWhat }, { currentUrl, mode, uuid, topPage, bottomPage, textSearch }) {
     return (
       <div class="modal" id={ id } tabindex="-1" role="dialog">
         <div class="modal-dialog modal-lg" role="document">
           <div class="modal-content">
             <div class="modal-header">
-              <h5 class="modal-title">Browse</h5>
+              { false ? <h5 class="modal-title">Browse</h5> : null }
+              <div>{ currentUrl }</div>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
               </button>
             </div>
 
             <div class="modal-body">
-              <Router history={ history_1 }>
-                <div path="/a">
-                  A
-                </div>
-                <div path="/b">
-                  B
-                </div>
-              </Router>
-
-              <div>
-                <h5>Go to: <a href="#">Home</a>, <a href="#">All Projects</a>,
-                  <a href="#">All Users</a>, <a href="#">Shared with Me</a></h5>
+              <div class="mb-3">
+                <a href="#" class="btn btn-outline-secondary mr-2">Back</a>
+                <a href="#" class="btn btn-outline-primary mr-2">Home</a>
+                <a href="#" class="btn btn-outline-primary mr-2">All Projects</a>
+                <a href="#" class="btn btn-outline-primary mr-2">All Users</a>
+                <a href="#" class="btn btn-outline-primary mr-2">Shared with Me</a>
               </div>
 
               <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <button class="btn btn-outline-secondary" type="button">Back</button>
-                </div>
-
                 <input type="text" class="form-control" placeholder="Search"
-                  aria-label="Search" value={ textSearchInput }
-                  onChange={ linkState(this, 'textSearchInput') } />
+                  aria-label="Search" value={ textSearch }
+                  onChange={ linkState(this, 'textSearch') } />
 
                 <div class="input-group-append">
-                  <button class="btn btn-outline-primary" type="button"
-                    onclick={ () => this.setState({ 'textSearch': this.state.textSearchInput }) }>Search</button>
+                  <button class="btn btn-outline-primary" type="button">Search</button>
                 </div>
               </div>
 
-              <h5>Projects</h5>
-              <WBBrowseDialogProjectList app={ app } textSearch={ textSearch }
-                resetSearch={ () => this.resetSearch() }
-                pushHistory={ () => this.pushHistory() }
-                popHistory={ () => this.popHistory() } />
+              { (mode === 'browse' || mode === 'shared-with-me') ? (
+                <div>
+                  <h5>Projects</h5>
+                  <WBBrowseDialogProjectList app={ app } parent={ this }
+                    page={ topPage } />
+                </div>
+              ) : null }
+
+              { (mode === 'users') ? (
+                <WBBrowseDialogUserList app={ app } parent={ this } />
+              ) : null }
+
+              { (mode === 'content') ? (
+                <div>
+                  <h5>Content</h5>
+                  <WBBrowseDialogCollectionContent app={ app } parent={ this }
+                    selectMany={ selectMany } selectWhat={ selectWhat }/>
+                </div>
 
-              { mode === 'collection-content' ? (
-                <h5>Content</h5>
-              ) : (
+              ) : (mode === 'browse' || mode === 'shared-with-me') ? (
                 <div>
                   <h5>Collections</h5>
-                  <WBBrowseDialogCollectionList app={ app } />
+                  <WBBrowseDialogCollectionList app={ app } parent={ this }
+                    selectMany={ selectMany } selectWhat={ selectWhat } />
                 </div>
-              ) }
+              ) : null }
             </div>
 
             <div class="modal-footer">