bruce-cesium 7.1.0 → 7.1.1

package/dist/lib/bruce-cesium.js

@@ -69,6 +69,8 @@ __exportStar(require("./widgets/controls-view-bar/widget-control-view-bar"), exp
 __exportStar(require("./widgets/controls-view-bar/widget-control-view-bar-search"), exports);
 __exportStar(require("./widgets/tabs-left-panel/widget-left-panel-tab"), exports);
 __exportStar(require("./widgets/tabs-left-panel/widget-left-panel-tab-bookmarks"), exports);
+__exportStar(require("./widgets/tabs-left-panel/widget-left-panel-tab-dashboard"), exports);
+__exportStar(require("./widgets/tabs-left-panel/widget-left-panel-tab-menu-items"), exports);
 __exportStar(require("./widgets/widget"), exports);
 __exportStar(require("./widgets/widget-bookmarks"), exports);
 __exportStar(require("./widgets/widget-branding"), exports);
@@ -78,7 +80,7 @@ __exportStar(require("./widgets/widget-info-view"), exports);
 __exportStar(require("./widgets/widget-left-panel"), exports);
 __exportStar(require("./widgets/widget-nav-compass"), exports);
 __exportStar(require("./widgets/widget-view-bar"), exports);
-exports.VERSION = "7.1.0";
+exports.VERSION = "7.1.1";
 /**
  * Updates the environment instance used by bruce-cesium to one specified.
  * This can be used to ensure that the instance a parent is referencing is shared between bruce-cesium, bruce-models, and the parent app.

package/dist/lib/bruce-cesium.js.map

@@ -1 +1 @@
-{"version":3,"file":"bruce-cesium.js","sourceRoot":"","sources":["../../src/bruce-cesium.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAE3C,qEAAmD;AACnD,uEAAqD;AACrD,mEAAiD;AACjD,2EAAyD;AACzD,yEAAuD;AACvD,2EAAyD;AACzD,4EAA0D;AAC1D,gEAA8C;AAC9C,gEAA8C;AAC9C,qFAAmE;AACnE,kFAAgE;AAChE,iFAA+D;AAC/D,oFAAkE;AAClE,yGAAuF;AACvF,uGAAqF;AACrF,mGAAiF;AACjF,sGAAoF;AACpF,+FAA6E;AAC7E,6FAA2E;AAC3E,4FAA0E;AAC1E,iGAA+E;AAC/E,6FAA2E;AAC3E,6EAA2D;AAC3D,kGAAgF;AAChF,kGAAgF;AAChF,uGAAqF;AACrF,4GAA0F;AAC1F,kGAAgF;AAChF,yGAAuF;AACvF,iEAA+C;AAC/C,oEAAkD;AAClD,iEAA+C;AAC/C,qEAAmD;AACnD,+DAA6C;AAC7C,mEAAiD;AACjD,+DAA6C;AAC7C,wDAAsC;AACtC,uDAAqC;AACrC,wDAAsC;AACtC,sDAAoC;AACpC,qDAAmC;AACnC,+DAA6C;AAC7C,4DAA0C;AAC1C,gEAA8C;AAC9C,wDAAsC;AACtC,mEAAiD;AACjD,oEAAkD;AAClD,mEAAiD;AACjD,+DAA6C;AAC7C,sFAAoE;AACpE,6FAA2E;AAC3E,kFAAgE;AAChE,4FAA0E;AAC1E,mDAAiC;AACjC,6DAA2C;AAC3C,4DAA0C;AAC1C,6DAA2C;AAC3C,sEAAoD;AACpD,6DAA2C;AAC3C,8DAA4C;AAC5C,+DAA6C;AAC7C,4DAA0C;AAE7B,QAAA,OAAO,GAAG,OAAO,CAAC;AAE/B;;;;GAIG;AACI,MAAM,cAAc,GAAG,CAAC,MAAW,EAAE,EAAE;IAC1C,0BAAW,CAAC,MAAM,GAAG,MAAM,CAAC;AAChC,CAAC,CAAC;AAFW,QAAA,cAAc,kBAEzB;AAEF;;;GAGG;AACI,MAAM,cAAc,GAAG,GAAG,EAAE;IAC/B,OAAO,0BAAW,CAAC;AACvB,CAAC,CAAA;AAFY,QAAA,cAAc,kBAE1B"}
+{"version":3,"file":"bruce-cesium.js","sourceRoot":"","sources":["../../src/bruce-cesium.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAE3C,qEAAmD;AACnD,uEAAqD;AACrD,mEAAiD;AACjD,2EAAyD;AACzD,yEAAuD;AACvD,2EAAyD;AACzD,4EAA0D;AAC1D,gEAA8C;AAC9C,gEAA8C;AAC9C,qFAAmE;AACnE,kFAAgE;AAChE,iFAA+D;AAC/D,oFAAkE;AAClE,yGAAuF;AACvF,uGAAqF;AACrF,mGAAiF;AACjF,sGAAoF;AACpF,+FAA6E;AAC7E,6FAA2E;AAC3E,4FAA0E;AAC1E,iGAA+E;AAC/E,6FAA2E;AAC3E,6EAA2D;AAC3D,kGAAgF;AAChF,kGAAgF;AAChF,uGAAqF;AACrF,4GAA0F;AAC1F,kGAAgF;AAChF,yGAAuF;AACvF,iEAA+C;AAC/C,oEAAkD;AAClD,iEAA+C;AAC/C,qEAAmD;AACnD,+DAA6C;AAC7C,mEAAiD;AACjD,+DAA6C;AAC7C,wDAAsC;AACtC,uDAAqC;AACrC,wDAAsC;AACtC,sDAAoC;AACpC,qDAAmC;AACnC,+DAA6C;AAC7C,4DAA0C;AAC1C,gEAA8C;AAC9C,wDAAsC;AACtC,mEAAiD;AACjD,oEAAkD;AAClD,mEAAiD;AACjD,+DAA6C;AAC7C,sFAAoE;AACpE,6FAA2E;AAC3E,kFAAgE;AAChE,4FAA0E;AAC1E,4FAA0E;AAC1E,6FAA2E;AAC3E,mDAAiC;AACjC,6DAA2C;AAC3C,4DAA0C;AAC1C,6DAA2C;AAC3C,sEAAoD;AACpD,6DAA2C;AAC3C,8DAA4C;AAC5C,+DAA6C;AAC7C,4DAA0C;AAE7B,QAAA,OAAO,GAAG,OAAO,CAAC;AAE/B;;;;GAIG;AACI,MAAM,cAAc,GAAG,CAAC,MAAW,EAAE,EAAE;IAC1C,0BAAW,CAAC,MAAM,GAAG,MAAM,CAAC;AAChC,CAAC,CAAC;AAFW,QAAA,cAAc,kBAEzB;AAEF;;;GAGG;AACI,MAAM,cAAc,GAAG,GAAG,EAAE;IAC/B,OAAO,0BAAW,CAAC;AACvB,CAAC,CAAA;AAFY,QAAA,cAAc,kBAE1B"}

package/dist/lib/widgets/tabs-left-panel/widget-left-panel-tab-bookmarks.js

@@ -3,15 +3,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WidgetLeftPanelTabBookmarks = void 0;
 const bruce_models_1 = require("bruce-models");
 const widget_left_panel_tab_1 = require("./widget-left-panel-tab");
+// Icons are inline so the library stays dependency free.
+const ICON_FOLDER = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 6C3 5.44772 3.44772 5 4 5H9L11 7.5H20C20.5523 7.5 21 7.94772 21 8.5V18C21 18.5523 20.5523 19 20 19H4C3.44772 19 3 18.5523 3 18V6Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`;
+const ICON_FOLDER_OPEN = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 6C3 5.44772 3.44772 5 4 5H9L11 7.5H20C20.5523 7.5 21 7.94772 21 8.5V10H3V6Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M3 10H21.5L19.5 18.5C19.4 18.8 19.1 19 18.8 19H4C3.44772 19 3 18.5523 3 18V10Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`;
+const OPEN_STATE_STORAGE_PREFIX = "NextspaceBookmarkGroupOpen_";
+const COMPACT_MODE_STORAGE_KEY = "NextspaceBookmarksCompactMode";
+// Group id used for the synthetic list of bookmarks that belong to no group.
+const UNGROUPED_ID = null;
 class WidgetLeftPanelTabBookmarks extends widget_left_panel_tab_1.WidgetLeftPanelTab.ATab {
     constructor(params) {
+        var _a, _b;
         super(params);
         this.STYLESHEET_ID = "nextspace-left-panel-tab-bookmarks-stylesheet";
+        this._compact = false;
+        this._compact = this._getStoredCompact();
         this._generateStyles();
         this._generateElement();
         this._widget.Loading.then(() => {
             this._updateBookmarks();
         });
+        // The panel can be opened before a view has rendered, so the list has to rebuild when one arrives.
+        this._viewIdChangeRemoval = (_b = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.OnViewIdChange) === null || _b === void 0 ? void 0 : _b.Subscribe(() => {
+            this._widget.Loading.then(() => {
+                this._updateBookmarks();
+            });
+        });
         // In case another widget messed with the panel width.
         // Probably should just add a SetWidth method to avoid having plugins mess with the container CSS.
         if (this.Container) {
@@ -19,6 +35,8 @@ class WidgetLeftPanelTabBookmarks extends widget_left_panel_tab_1.WidgetLeftPane
         }
     }
     Dispose() {
+        var _a;
+        (_a = this._viewIdChangeRemoval) === null || _a === void 0 ? void 0 : _a.call(this);
         super.Dispose();
     }
     _generateStyles() {
@@ -28,11 +46,16 @@ class WidgetLeftPanelTabBookmarks extends widget_left_panel_tab_1.WidgetLeftPane
         const style = document.createElement("style");
         style.id = this.STYLESHEET_ID;
         style.innerHTML = `
+            .NextspaceLeftPanelTabBookmarks * {
+                box-sizing: border-box;
+            }
+
             .NextspaceLeftPanelTabBookmarks {
                 display: flex;
                 flex-direction: column;
                 flex-grow: 1;
                 flex-shrink: 1;
+                font-family: Arial, sans-serif;
                 overflow: hidden;
                 width: 100%;
             }
@@ -58,6 +81,59 @@ class WidgetLeftPanelTabBookmarks extends widget_left_panel_tab_1.WidgetLeftPane
                 margin-bottom: 15px;
             }
 
+            .NextspaceLeftPanelTabBookmarksCompactBar {
+                align-items: center;
+                color: #fff;
+                display: flex;
+                flex-shrink: 0;
+                font-size: 12px;
+                justify-content: flex-end;
+                margin-bottom: 10px;
+                user-select: none;
+            }
+
+            .NextspaceLeftPanelTabBookmarksCompactToggle {
+                align-items: center;
+                cursor: pointer;
+                display: flex;
+                opacity: .7;
+                transition: opacity .3s ease;
+            }
+
+            .NextspaceLeftPanelTabBookmarksCompactToggle:hover {
+                opacity: 1;
+            }
+
+            .NextspaceLeftPanelTabBookmarksCompactToggle >.NextspaceLeftPanelTabBookmarksCompactToggleTrack {
+                background: rgba(255, 255, 255, .2);
+                border-radius: 8px;
+                height: 16px;
+                margin-right: 8px;
+                position: relative;
+                transition: background .3s ease;
+                width: 30px;
+            }
+
+            .NextspaceLeftPanelTabBookmarksCompactToggle >.NextspaceLeftPanelTabBookmarksCompactToggleTrack:after {
+                background: #fff;
+                border-radius: 50%;
+                content: "";
+                height: 12px;
+                left: 2px;
+                position: absolute;
+                top: 2px;
+                transition: left .3s ease;
+                width: 12px;
+            }
+
+            .NextspaceLeftPanelTabBookmarksCompactToggle[is-on="true"] >.NextspaceLeftPanelTabBookmarksCompactToggleTrack {
+                background: #33b1ff;
+            }
+
+            .NextspaceLeftPanelTabBookmarksCompactToggle[is-on="true"] >.NextspaceLeftPanelTabBookmarksCompactToggleTrack:after {
+                left: 16px;
+            }
+
             .NextspaceLeftPanelTabBookmarksList {
                 display: flex;
                 flex-direction: column;
@@ -66,30 +142,110 @@ class WidgetLeftPanelTabBookmarks extends widget_left_panel_tab_1.WidgetLeftPane
                 overflow: auto;
             }
 
-            .NextspaceLeftPanelTabBookmarksListItem {
-                margin-bottom: 15px;
+            .NextspaceLeftPanelTabBookmarksGroupHeader {
+                align-items: flex-end;
+                border-left: 2px solid rgba(255, 255, 255, .2);
+                color: #fff;
+                cursor: pointer;
+                display: flex;
+                font-size: 12px;
+                font-weight: 300;
+                letter-spacing: .01em;
+                padding-left: 8px;
+                transition: border-left-color .3s ease;
+                user-select: none;
+            }
+
+            .NextspaceLeftPanelTabBookmarksGroupHeader:hover {
+                border-left-color: rgba(255, 255, 255, .5);
+            }
+
+            .NextspaceLeftPanelTabBookmarksGroupHeader[is-opened="false"] {
+                margin-bottom: 10px;
+            }
+
+            .NextspaceLeftPanelTabBookmarksGroupHeader[is-opened="true"] {
+                padding-bottom: 5px;
+            }
+
+            .NextspaceLeftPanelTabBookmarksGroupHeader >.NextspaceLeftPanelTabBookmarksGroupHeaderIcon {
                 align-items: center;
                 display: flex;
+                flex-shrink: 0;
+                height: 20px;
+                justify-content: center;
+                margin-right: 8px;
+                width: 20px;
+            }
+
+            .NextspaceLeftPanelTabBookmarksGroupHeader >.NextspaceLeftPanelTabBookmarksGroupHeaderIcon >svg {
+                height: 20px;
+                width: 20px;
+            }
+
+            .NextspaceLeftPanelTabBookmarksGroupHeader >.NextspaceLeftPanelTabBookmarksGroupHeaderName {
+                margin-right: 8px;
+                opacity: .7;
+                overflow: hidden;
+                padding-bottom: 8px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .NextspaceLeftPanelTabBookmarksGroupHeader >.NextspaceLeftPanelTabBookmarksGroupHeaderCount {
+                margin-right: 3px;
+                opacity: .7;
+                padding-bottom: 8px;
+            }
+
+            .NextspaceLeftPanelTabBookmarksGroupBody {
+                display: flex;
+                flex-direction: column;
+            }
+
+            .NextspaceLeftPanelTabBookmarksGroupBody[is-grouped="true"] {
+                border-left: 2px solid rgba(255, 255, 255, .2);
+                margin-bottom: 12px;
+                padding-left: 8px;
+            }
+
+            .NextspaceLeftPanelTabBookmarksListItem {
+                background: rgba(255, 255, 255, .05);
+                border: 1px solid rgba(255, 255, 255, .1);
+                border-radius: 8px;
+                cursor: pointer;
+                display: flex;
                 flex-direction: column;
+                margin-bottom: 6px;
+                overflow: hidden;
+                padding: 12px;
+                transition: background .3s ease, border-color .3s ease, transform .3s ease;
                 width: 100%;
             }
 
-            .NextspaceLeftPanelTabBookmarksListItem[is-selected="true"] >.NextspaceLeftPanelTabBookmarksListItemImageBox {
-                border: 3px solid #0072c3;
+            .NextspaceLeftPanelTabBookmarksListItem:hover {
+                background: rgba(255, 255, 255, .08);
+                border-color: rgba(255, 255, 255, .2);
+                transform: translateY(-2px);
+            }
+
+            .NextspaceLeftPanelTabBookmarksListItem[is-selected="true"] {
+                background: rgba(51, 177, 255, .1);
+                border-color: #33b1ff;
             }
 
             .NextspaceLeftPanelTabBookmarksListItemImageBox {
-                border: 3px solid #0000;
-                border-radius: 5px;
+                background-color: rgba(255, 255, 255, .05);
+                border-radius: 6px;
                 display: flex;
-                height: 132px;
+                flex-shrink: 0;
+                height: 120px;
                 margin-bottom: 8px;
                 overflow: hidden;
                 width: 100%;
             }
 
             .NextspaceLeftPanelTabBookmarksListItemImageBoxImage {
-                cursor: pointer;
                 display: flex;
                 flex-direction: column;
                 flex-grow: 1;
@@ -105,25 +261,59 @@ class WidgetLeftPanelTabBookmarks extends widget_left_panel_tab_1.WidgetLeftPane
                 width: 100%;
             }
 
-            .NextspaceLeftPanelTabBookmarksListItemTitle {
-                color: #fff;
-                display: flex;
-                padding-right: 15px;
-                text-align: center;
-                width: 100%;
-            }
-
             .NextspaceLeftPanelTabBookmarksListItemTitleText {
+                color: #f2f4f8;
                 display: block;
-                margin-left: 35px;
-                margin-right: 20px;
+                font-family: Arial;
+                font-size: 13px;
+                font-weight: 600;
                 overflow: hidden;
-                text-align: center;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 width: 100%;
-                font-family: Arial;
+            }
+
+            .NextspaceLeftPanelTabBookmarksListItemDescription {
+                color: rgba(255, 255, 255, .7);
+                font-size: 12px;
+                margin-top: 4px;
+                overflow: hidden;
+                width: 100%;
+            }
+
+            .NextspaceLeftPanelTabBookmarks[is-compact="true"] .NextspaceLeftPanelTabBookmarksListItem {
+                align-items: center;
+                flex-direction: row;
+                margin-bottom: 4px;
+                min-height: 54px;
+                padding: 0;
+                transform: none;
+            }
+
+            .NextspaceLeftPanelTabBookmarks[is-compact="true"] .NextspaceLeftPanelTabBookmarksListItemImageBox {
+                border-radius: 8px 0 0 8px;
+                border-right: 1px solid #6a6a6a;
+                height: 60px;
+                margin-bottom: 0;
+                margin-right: 10px;
+                width: 70px;
+            }
+
+            .NextspaceLeftPanelTabBookmarks[is-compact="true"] .NextspaceLeftPanelTabBookmarksListItemTitleText {
+                font-size: 12px;
+                font-weight: 400;
+                padding-right: 10px;
+                text-align: right;
+            }
+
+            .NextspaceLeftPanelTabBookmarks[is-compact="true"] .NextspaceLeftPanelTabBookmarksListItemDescription {
+                display: none;
+            }
+
+            .NextspaceLeftPanelTabBookmarksEmpty {
+                color: #fff;
                 font-size: 13px;
+                opacity: .7;
             }
         `;
         document.head.appendChild(style);
@@ -131,6 +321,7 @@ class WidgetLeftPanelTabBookmarks extends widget_left_panel_tab_1.WidgetLeftPane
     _generateElement() {
         const element = document.createElement("div");
         element.className = "NextspaceLeftPanelTabBookmarks";
+        element.setAttribute("is-compact", String(this._compact));
         const title = document.createElement("div");
         title.className = "NextspaceLeftPanelTabBookmarksTitleBar";
         title.textContent = "Bookmarks";
@@ -138,52 +329,224 @@ class WidgetLeftPanelTabBookmarks extends widget_left_panel_tab_1.WidgetLeftPane
         const breaker = document.createElement("div");
         breaker.className = "NextspaceLeftPanelTabBookmarksTitleBreaker";
         element.appendChild(breaker);
+        const compactBar = document.createElement("div");
+        compactBar.className = "NextspaceLeftPanelTabBookmarksCompactBar";
+        const compactToggle = document.createElement("div");
+        compactToggle.className = "NextspaceLeftPanelTabBookmarksCompactToggle";
+        compactToggle.title = "Compact";
+        compactToggle.setAttribute("is-on", String(this._compact));
+        const compactTrack = document.createElement("div");
+        compactTrack.className = "NextspaceLeftPanelTabBookmarksCompactToggleTrack";
+        compactToggle.appendChild(compactTrack);
+        const compactLabel = document.createElement("div");
+        compactLabel.textContent = "Compact";
+        compactToggle.appendChild(compactLabel);
+        compactToggle.onclick = () => {
+            this._setCompact(!this._compact);
+        };
+        compactBar.appendChild(compactToggle);
+        element.appendChild(compactBar);
+        const empty = document.createElement("div");
+        empty.className = "NextspaceLeftPanelTabBookmarksEmpty";
+        empty.textContent = "No bookmarks in this project view.";
+        empty.style.display = "none";
+        element.appendChild(empty);
         const list = document.createElement("div");
         list.className = "NextspaceLeftPanelTabBookmarksList";
         element.appendChild(list);
         this.Container.appendChild(element);
         this._element = element;
     }
+    _getStoredCompact() {
+        try {
+            return window.localStorage.getItem(COMPACT_MODE_STORAGE_KEY) === "true";
+        }
+        catch (e) {
+            // Storage can be unavailable (private mode, blocked cookies). The default layout still works.
+            return false;
+        }
+    }
+    _setCompact(compact) {
+        this._compact = compact;
+        this._element.setAttribute("is-compact", String(compact));
+        const toggle = this._element.querySelector(".NextspaceLeftPanelTabBookmarksCompactToggle");
+        if (toggle) {
+            toggle.setAttribute("is-on", String(compact));
+        }
+        try {
+            window.localStorage.setItem(COMPACT_MODE_STORAGE_KEY, String(compact));
+        }
+        catch (e) {
+            console.warn(e);
+        }
+    }
+    _getGroupOpen(groupId) {
+        try {
+            return window.localStorage.getItem(OPEN_STATE_STORAGE_PREFIX + groupId) === "true";
+        }
+        catch (e) {
+            return false;
+        }
+    }
+    _setGroupOpen(groupId, open) {
+        try {
+            window.localStorage.setItem(OPEN_STATE_STORAGE_PREFIX + groupId, String(open));
+        }
+        catch (e) {
+            console.warn(e);
+        }
+    }
+    /**
+     * Sorts the bookmarks into their groups, ordering both by display order then name.
+     * Bookmarks with no group, or one that no longer exists, land in a trailing ungrouped list.
+     */
+    _buildGroupLists() {
+        var _a, _b;
+        const bookmarks = (_a = this._widget.Bookmarks) !== null && _a !== void 0 ? _a : [];
+        const groups = ((_b = this._widget.BookmarkGroups) !== null && _b !== void 0 ? _b : []).slice().sort((a, b) => {
+            var _a, _b, _c, _d;
+            const orderDiff = ((_a = a.DisplayOrder) !== null && _a !== void 0 ? _a : 0) - ((_b = b.DisplayOrder) !== null && _b !== void 0 ? _b : 0);
+            if (orderDiff !== 0) {
+                return orderDiff;
+            }
+            return ((_c = a.Name) !== null && _c !== void 0 ? _c : "").toLowerCase().localeCompare(((_d = b.Name) !== null && _d !== void 0 ? _d : "").toLowerCase());
+        });
+        const lists = groups.map(group => ({
+            groupId: group.ID,
+            group,
+            bookmarks: []
+        }));
+        const listsById = new Map(lists.map(list => [list.groupId, list]));
+        const ungrouped = {
+            groupId: UNGROUPED_ID,
+            group: null,
+            bookmarks: []
+        };
+        for (const bookmark of bookmarks) {
+            const groupId = bookmark["UI.SlideGroup.ID"];
+            const list = groupId ? listsById.get(groupId) : null;
+            (list !== null && list !== void 0 ? list : ungrouped).bookmarks.push(bookmark);
+        }
+        for (const list of lists) {
+            list.bookmarks.sort(this._compareBookmarks);
+        }
+        ungrouped.bookmarks.sort(this._compareBookmarks);
+        // Ungrouped always trails the named groups.
+        lists.push(ungrouped);
+        return lists;
+    }
+    _compareBookmarks(a, b) {
+        var _a, _b, _c, _d;
+        const orderDiff = ((_a = a.DisplayOrder) !== null && _a !== void 0 ? _a : 0) - ((_b = b.DisplayOrder) !== null && _b !== void 0 ? _b : 0);
+        if (orderDiff !== 0) {
+            return orderDiff;
+        }
+        return ((_c = a.Title) !== null && _c !== void 0 ? _c : "").localeCompare((_d = b.Title) !== null && _d !== void 0 ? _d : "");
+    }
     _updateBookmarks() {
-        var _a;
-        const bookmarks = this._widget.Bookmarks;
-        this._element.style.display = bookmarks.length ? "flex" : "none";
-        const api = this._widget._getApiGetters().GetBruceApi();
+        var _a, _b;
+        const bookmarks = (_a = this._widget.Bookmarks) !== null && _a !== void 0 ? _a : [];
         const list = this._element.querySelector(".NextspaceLeftPanelTabBookmarksList");
+        const empty = this._element.querySelector(".NextspaceLeftPanelTabBookmarksEmpty");
+        const compactBar = this._element.querySelector(".NextspaceLeftPanelTabBookmarksCompactBar");
         list.innerHTML = "";
-        for (const bookmark of bookmarks) {
-            const item = document.createElement("div");
-            item.className = "NextspaceLeftPanelTabBookmarksListItem";
-            const imageBox = document.createElement("div");
-            imageBox.className = "NextspaceLeftPanelTabBookmarksListItemImageBox";
-            item.appendChild(imageBox);
-            const image = document.createElement("div");
-            image.className = "NextspaceLeftPanelTabBookmarksListItemImageBoxImage";
-            imageBox.appendChild(image);
-            const previewUrl = bookmark["Screenshot.ClientFile.ID"] ? ((_a = bookmark["Screenshot.URL"]) !== null && _a !== void 0 ? _a : bruce_models_1.ClientFile.GetUrl({
-                fileId: bookmark["Screenshot.ClientFile.ID"],
-                api,
-                viaCdn: true
-            })) : "";
-            // TODO: Some nice empty image.
+        const hasBookmarks = bookmarks.length > 0;
+        empty.style.display = hasBookmarks ? "none" : "block";
+        compactBar.style.display = hasBookmarks ? "flex" : "none";
+        if (!hasBookmarks) {
+            return;
+        }
+        const api = (_b = this._widget._getApiGetters()) === null || _b === void 0 ? void 0 : _b.GetBruceApi();
+        for (const groupList of this._buildGroupLists()) {
+            if (!groupList.bookmarks.length) {
+                continue;
+            }
+            this._renderGroup(groupList, list, api);
+        }
+        this._updateBookmark();
+    }
+    _renderGroup(groupList, parent, api) {
+        var _a;
+        const isGrouped = groupList.groupId != null;
+        // Ungrouped bookmarks have no header, so they're always visible.
+        const opened = isGrouped ? this._getGroupOpen(groupList.groupId) : true;
+        const body = document.createElement("div");
+        body.className = "NextspaceLeftPanelTabBookmarksGroupBody";
+        body.setAttribute("is-grouped", String(isGrouped));
+        if (isGrouped) {
+            const header = document.createElement("div");
+            header.className = "NextspaceLeftPanelTabBookmarksGroupHeader";
+            header.setAttribute("group-id", String(groupList.groupId));
+            header.setAttribute("is-opened", String(opened));
+            const icon = document.createElement("div");
+            icon.className = "NextspaceLeftPanelTabBookmarksGroupHeaderIcon";
+            icon.innerHTML = opened ? ICON_FOLDER_OPEN : ICON_FOLDER;
+            header.appendChild(icon);
+            const name = document.createElement("div");
+            name.className = "NextspaceLeftPanelTabBookmarksGroupHeaderName";
+            name.textContent = ((_a = groupList.group) === null || _a === void 0 ? void 0 : _a.Name) || "Unnamed Group";
+            header.appendChild(name);
+            const count = document.createElement("div");
+            count.className = "NextspaceLeftPanelTabBookmarksGroupHeaderCount";
+            count.textContent = "(" + groupList.bookmarks.length + ")";
+            header.appendChild(count);
+            header.onclick = () => {
+                this._setGroupOpen(groupList.groupId, !this._getGroupOpen(groupList.groupId));
+                this._updateBookmarks();
+            };
+            parent.appendChild(header);
+            body.style.display = opened ? "flex" : "none";
+        }
+        parent.appendChild(body);
+        if (!opened) {
+            return;
+        }
+        for (const bookmark of groupList.bookmarks) {
+            this._renderBookmark(bookmark, body, api);
+        }
+    }
+    _renderBookmark(bookmark, parent, api) {
+        var _a;
+        const item = document.createElement("div");
+        item.className = "NextspaceLeftPanelTabBookmarksListItem";
+        const imageBox = document.createElement("div");
+        imageBox.className = "NextspaceLeftPanelTabBookmarksListItemImageBox";
+        item.appendChild(imageBox);
+        const image = document.createElement("div");
+        image.className = "NextspaceLeftPanelTabBookmarksListItemImageBoxImage";
+        imageBox.appendChild(image);
+        const previewUrl = bookmark["Screenshot.ClientFile.ID"] ? ((_a = bookmark["Screenshot.URL"]) !== null && _a !== void 0 ? _a : bruce_models_1.ClientFile.GetUrl({
+            fileId: bookmark["Screenshot.ClientFile.ID"],
+            api,
+            viaCdn: true
+        })) : "";
+        // A bookmark without a screenshot keeps the empty tinted box rather than a broken image.
+        if (previewUrl) {
             const img = document.createElement("img");
             img.src = previewUrl;
+            img.loading = "lazy";
             image.appendChild(img);
-            const title = document.createElement("div");
-            title.className = "NextspaceLeftPanelTabBookmarksListItemTitle";
-            item.appendChild(title);
-            const titleText = document.createElement("div");
-            titleText.className = "NextspaceLeftPanelTabBookmarksListItemTitleText";
-            titleText.textContent = bookmark.Title ? bookmark.Title : "Untitled Bookmark";
-            title.appendChild(titleText);
-            item.setAttribute("bookmark-id", bookmark.ID);
-            item.setAttribute("is-selected", String(bookmark.ID === this._widget.LastEnabledBookmarkId));
-            item.onclick = () => {
-                this._selectBookmark(bookmark);
-            };
-            list.appendChild(item);
         }
-        this._updateBookmark();
+        const content = document.createElement("div");
+        content.className = "NextspaceLeftPanelTabBookmarksListItemContent";
+        item.appendChild(content);
+        const titleText = document.createElement("div");
+        titleText.className = "NextspaceLeftPanelTabBookmarksListItemTitleText";
+        titleText.textContent = bookmark.Title ? bookmark.Title : "Untitled Bookmark";
+        titleText.title = titleText.textContent;
+        content.appendChild(titleText);
+        if (bookmark.Note) {
+            const description = document.createElement("div");
+            description.className = "NextspaceLeftPanelTabBookmarksListItemDescription";
+            description.textContent = bookmark.Note;
+            content.appendChild(description);
+        }
+        item.setAttribute("bookmark-id", bookmark.ID);
+        item.setAttribute("is-selected", String(bookmark.ID === this._widget.LastEnabledBookmarkId));
+        item.onclick = () => {
+            this._selectBookmark(bookmark);
+        };
+        parent.appendChild(item);
     }
     _selectBookmark(bookmark) {
         this._widget.SelectBookmark(bookmark);
@@ -199,19 +562,20 @@ class WidgetLeftPanelTabBookmarks extends widget_left_panel_tab_1.WidgetLeftPane
                 item.setAttribute("is-selected", "false");
             }
         }
-        // Scroll the selected bookmark into view.
+        // Scroll the selected bookmark into view. This list is vertical, unlike the bookmark strip widget's.
         const selected = this._element.querySelector(".NextspaceLeftPanelTabBookmarksListItem[is-selected='true']");
         if (selected) {
             const list = this._element.querySelector(".NextspaceLeftPanelTabBookmarksList");
-            const scrollLeft = list.scrollLeft;
-            const scrollRight = scrollLeft + list.clientWidth;
-            const left = selected.offsetLeft;
-            const right = left + selected.clientWidth;
-            if (left < scrollLeft) {
-                list.scrollLeft = left;
-            }
-            else if (right > scrollRight) {
-                list.scrollLeft = right - list.clientWidth;
+            const scrollTop = list.scrollTop;
+            const scrollBottom = scrollTop + list.clientHeight;
+            // Both share the panel container as their offset parent, so this is the item's offset within the list.
+            const top = selected.offsetTop - list.offsetTop;
+            const bottom = top + selected.clientHeight;
+            if (top < scrollTop) {
+                list.scrollTop = top;
+            }
+            else if (bottom > scrollBottom) {
+                list.scrollTop = bottom - list.clientHeight;
             }
         }
     }