@fgv/ts-app-shell 5.1.0-12 → 5.1.0-15

package/dist/packlets/sidebar/CollectionSection.js

@@ -29,7 +29,7 @@
  */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { StarIcon as StarIconOutline } from '@heroicons/react/24/outline';
-import { StarIcon as StarIconSolid, ExclamationTriangleIcon, BuildingLibraryIcon, ShieldCheckIcon, ShieldExclamationIcon, ArrowDownTrayIcon, PencilSquareIcon, ArrowsPointingInIcon, TrashIcon, FolderPlusIcon, ArchiveBoxArrowDownIcon, FolderOpenIcon, ArrowUpTrayIcon, PlusIcon, ChevronRightIcon } from '@heroicons/react/20/solid';
+import { StarIcon as StarIconSolid, ExclamationTriangleIcon, BuildingLibraryIcon, BuildingStorefrontIcon, ShieldCheckIcon, ShieldExclamationIcon, ArrowDownTrayIcon, PencilSquareIcon, ArrowsPointingInIcon, TrashIcon, FolderPlusIcon, ArchiveBoxArrowDownIcon, FolderOpenIcon, ArrowUpTrayIcon, PlusIcon, ChevronRightIcon } from '@heroicons/react/20/solid';
 import { renderStatusBadge } from '../badge';
 // ============================================================================
 // Context Menu (internal)
@@ -82,7 +82,7 @@ function useLongPress(onLongPress) {
 // CollectionRow (internal)
 // ============================================================================
 function CollectionRow(props) {
-    var _a;
+    var _a, _b, _c;
     const { collection, onToggleVisibility, onSetDefault, onDelete, onExport, onUnlock, onRename, onMerge, borderColorClass, onContextMenu, isHiddenRow } = props;
     const displayName = (_a = collection.name) !== null && _a !== void 0 ? _a : collection.id;
     const handleContextMenu = useCallback((e) => {
@@ -113,8 +113,7 @@ function CollectionRow(props) {
                     : 'Set as default collection for new items', "aria-label": collection.isDefault ? `${displayName} is default` : `Set ${displayName} as default`, "aria-pressed": collection.isDefault }, collection.isDefault ? (React.createElement(StarIconSolid, { className: "w-4 h-4" })) : (React.createElement(StarIconOutline, { className: "w-4 h-4" })))),
             collection.hasConflict && (React.createElement("span", { className: "shrink-0 text-status-warning-strong cursor-default", title: "An encrypted copy of this collection from another storage root has the same ID. Go to Settings \u2192 Storage to resolve the conflict.", "aria-label": `Conflict: encrypted shadow for ${displayName}` },
                 React.createElement(ExclamationTriangleIcon, { className: "w-4 h-4" }))),
-            !collection.isMutable && (React.createElement("span", { className: "shrink-0 text-muted", title: "Built-in collection (read-only)" },
-                React.createElement(BuildingLibraryIcon, { className: "w-4 h-4" }))),
+            !collection.isMutable && (React.createElement("span", { className: "shrink-0 text-muted", title: (_b = collection.readOnlyLabel) !== null && _b !== void 0 ? _b : 'Built-in collection (read-only)' }, collection.isDeletable ? (React.createElement(BuildingStorefrontIcon, { className: "w-4 h-4" })) : (React.createElement(BuildingLibraryIcon, { className: "w-4 h-4" })))),
             collection.isProtected &&
                 (collection.isUnlocked || !onUnlock ? (React.createElement("span", { className: `shrink-0 ${collection.isUnlocked ? 'text-status-success-icon' : 'text-muted'}`, title: collection.isUnlocked ? 'Protected (unlocked)' : 'Protected (locked)' }, collection.isUnlocked ? (React.createElement(ShieldCheckIcon, { className: "w-4 h-4" })) : (React.createElement(ShieldExclamationIcon, { className: "w-4 h-4" })))) : (React.createElement("button", { onClick: (e) => {
                         e.stopPropagation();
@@ -140,12 +139,12 @@ function CollectionRow(props) {
                     onMerge(collection.id);
                 }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-brand-accent transition-colors", title: `Merge ${displayName} into another collection`, "aria-label": `Merge ${displayName}` },
                 React.createElement(ArrowsPointingInIcon, { className: "w-4 h-4" }))),
-            collection.isMutable && onDelete && (React.createElement("button", { onClick: (e) => {
+            (collection.isMutable || collection.isDeletable) && onDelete && (React.createElement("button", { onClick: (e) => {
                     e.stopPropagation();
                     onDelete(collection.id);
                 }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-status-error-icon transition-colors", title: `Remove ${displayName}`, "aria-label": `Remove ${displayName}` },
                 React.createElement(TrashIcon, { className: "w-4 h-4" }))),
-            !collection.isMutable && React.createElement("span", { className: "text-xs text-muted" }, "(built-in)"))));
+            !collection.isMutable && (React.createElement("span", { className: "text-xs text-muted" }, (_c = collection.readOnlyLabel) !== null && _c !== void 0 ? _c : '(built-in)')))));
 }
 // ============================================================================
 // CollectionSection

package/lib/packlets/sidebar/CollectionSection.d.ts

@@ -49,6 +49,17 @@ export interface ICollectionRowItem {
     readonly sourceName?: string;
     /** Optional badge rendered alongside the collection name */
     readonly badge?: ICollectionBadge;
+    /**
+     * Label shown for immutable collections. Defaults to `"(built-in)"` when
+     * omitted. Set to e.g. `"(trading post)"` for imported read-only content.
+     */
+    readonly readOnlyLabel?: string;
+    /**
+     * When true, the collection can be deleted even though it is not mutable.
+     * Use for user-imported read-only content (e.g., Trading Post collections)
+     * that the user should be able to remove but not edit.
+     */
+    readonly isDeletable?: boolean;
 }
 /**
  * Props for the CollectionSection component.

package/lib/packlets/sidebar/CollectionSection.js

@@ -118,7 +118,7 @@ function useLongPress(onLongPress) {
 // CollectionRow (internal)
 // ============================================================================
 function CollectionRow(props) {
-    var _a;
+    var _a, _b, _c;
     const { collection, onToggleVisibility, onSetDefault, onDelete, onExport, onUnlock, onRename, onMerge, borderColorClass, onContextMenu, isHiddenRow } = props;
     const displayName = (_a = collection.name) !== null && _a !== void 0 ? _a : collection.id;
     const handleContextMenu = (0, react_1.useCallback)((e) => {
@@ -149,8 +149,7 @@ function CollectionRow(props) {
                     : 'Set as default collection for new items', "aria-label": collection.isDefault ? `${displayName} is default` : `Set ${displayName} as default`, "aria-pressed": collection.isDefault }, collection.isDefault ? (react_1.default.createElement(solid_1.StarIcon, { className: "w-4 h-4" })) : (react_1.default.createElement(outline_1.StarIcon, { className: "w-4 h-4" })))),
             collection.hasConflict && (react_1.default.createElement("span", { className: "shrink-0 text-status-warning-strong cursor-default", title: "An encrypted copy of this collection from another storage root has the same ID. Go to Settings \u2192 Storage to resolve the conflict.", "aria-label": `Conflict: encrypted shadow for ${displayName}` },
                 react_1.default.createElement(solid_1.ExclamationTriangleIcon, { className: "w-4 h-4" }))),
-            !collection.isMutable && (react_1.default.createElement("span", { className: "shrink-0 text-muted", title: "Built-in collection (read-only)" },
-                react_1.default.createElement(solid_1.BuildingLibraryIcon, { className: "w-4 h-4" }))),
+            !collection.isMutable && (react_1.default.createElement("span", { className: "shrink-0 text-muted", title: (_b = collection.readOnlyLabel) !== null && _b !== void 0 ? _b : 'Built-in collection (read-only)' }, collection.isDeletable ? (react_1.default.createElement(solid_1.BuildingStorefrontIcon, { className: "w-4 h-4" })) : (react_1.default.createElement(solid_1.BuildingLibraryIcon, { className: "w-4 h-4" })))),
             collection.isProtected &&
                 (collection.isUnlocked || !onUnlock ? (react_1.default.createElement("span", { className: `shrink-0 ${collection.isUnlocked ? 'text-status-success-icon' : 'text-muted'}`, title: collection.isUnlocked ? 'Protected (unlocked)' : 'Protected (locked)' }, collection.isUnlocked ? (react_1.default.createElement(solid_1.ShieldCheckIcon, { className: "w-4 h-4" })) : (react_1.default.createElement(solid_1.ShieldExclamationIcon, { className: "w-4 h-4" })))) : (react_1.default.createElement("button", { onClick: (e) => {
                         e.stopPropagation();
@@ -176,12 +175,12 @@ function CollectionRow(props) {
                     onMerge(collection.id);
                 }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-brand-accent transition-colors", title: `Merge ${displayName} into another collection`, "aria-label": `Merge ${displayName}` },
                 react_1.default.createElement(solid_1.ArrowsPointingInIcon, { className: "w-4 h-4" }))),
-            collection.isMutable && onDelete && (react_1.default.createElement("button", { onClick: (e) => {
+            (collection.isMutable || collection.isDeletable) && onDelete && (react_1.default.createElement("button", { onClick: (e) => {
                     e.stopPropagation();
                     onDelete(collection.id);
                 }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-status-error-icon transition-colors", title: `Remove ${displayName}`, "aria-label": `Remove ${displayName}` },
                 react_1.default.createElement(solid_1.TrashIcon, { className: "w-4 h-4" }))),
-            !collection.isMutable && react_1.default.createElement("span", { className: "text-xs text-muted" }, "(built-in)"))));
+            !collection.isMutable && (react_1.default.createElement("span", { className: "text-xs text-muted" }, (_c = collection.readOnlyLabel) !== null && _c !== void 0 ? _c : '(built-in)')))));
 }
 // ============================================================================
 // CollectionSection

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fgv/ts-app-shell",
-  "version": "5.1.0-12",
+  "version": "5.1.0-15",
   "description": "Shared React UI primitives for application shells: column cascade, sidebar, toast/log messages, command palette, keybinding registry",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -17,8 +17,8 @@
   "dependencies": {
     "@heroicons/react": "~2.2.0",
     "tslib": "^2.8.1",
-    "@fgv/ts-utils": "5.1.0-12",
-    "@fgv/ts-extras": "5.1.0-12"
+    "@fgv/ts-utils": "5.1.0-15",
+    "@fgv/ts-extras": "5.1.0-15"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -51,8 +51,8 @@
     "@rushstack/heft-jest-plugin": "1.2.6",
     "@testing-library/dom": "^10.4.0",
     "@rushstack/heft-node-rig": "2.11.27",
-    "@fgv/ts-utils-jest": "5.1.0-12",
-    "@fgv/heft-dual-rig": "5.1.0-12"
+    "@fgv/ts-utils-jest": "5.1.0-15",
+    "@fgv/heft-dual-rig": "5.1.0-15"
   },
   "exports": {
     ".": {