feat(cellar-explorer): add objects management

src/components/cc-breadcrumbs/cc-breadcrumbs.events.js

@@ -0,0 +1,16 @@
+import { CcEvent } from '../../lib/events.js';
+
+/**
+ * Dispatched when a breadcrumb item is clicked.
+ * @extends {CcEvent<{path: Array<string>}>}
+ */
+export class CcBreadcrumbClickEvent extends CcEvent {
+  static TYPE = 'cc-breadcrumb-click';
+
+  /**
+   * @param {{path: Array<string>}} details
+   */
+  constructor(details) {
+    super(CcBreadcrumbClickEvent.TYPE, details);
+  }
+}

src/components/cc-breadcrumbs/cc-breadcrumbs.js

@@ -0,0 +1,127 @@
+import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../cc-link/cc-link.js';
+import { CcBreadcrumbClickEvent } from './cc-breadcrumbs.events.js';
+
+/**
+ * @import { CcBreadcrumbsItem } from './cc-breadcrumbs.types.js'
+ */
+
+/**
+ * A breadcrumb navigation component that displays a hierarchical path of items.
+ *
+ * Each breadcrumb item is clickable except the last item.
+ * Clicking a breadcrumb item dispatches a `CcBreadcrumbClickEvent` with the path to that item.
+ *
+ * WARNING: When a breadcrumb item's `label` is an empty string, you MUST set the `iconA11yName` value to provide accessible text for the icon.
+ * Otherwise, the link will have no discernible text, which is a serious accessibility issue (WCAG: Links must have discernible text).
+ *
+ * @cssdisplay block
+ */
+export class CcBreadcrumbs extends LitElement {
+  static get properties() {
+    return {
+      disabled: { type: Boolean },
+      items: { type: Array },
+    };
+  }
+
+  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+
+  constructor() {
+    super();
+
+    /** @type {Array<CcBreadcrumbsItem>} Set the items. */
+    this.items = [];
+  }
+
+  /**
+   * @param {Event} event
+   * @param {Array<string>} path
+   */
+  _onItemClick(event, path) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.dispatchEvent(new CcBreadcrumbClickEvent({ path }));
+  }
+
+  render() {
+    /** @type {Array<string>} */
+    let current = [];
+    const parts = this.items ?? [];
+
+    return html`<ul>
+      ${parts.map((item, index) => {
+        let path = [...current, item.value];
+        current = path;
+        const isLast = index === parts.length - 1;
+        const label = item.label ?? item.value;
+
+        const itemView =
+          item.icon != null
+            ? html`<span class="item-wrapper"
+                ><cc-icon .icon=${item.icon} .a11yName=${item.iconA11yName}></cc-icon>${label}</span
+              >`
+            : label;
+
+        return html`<li aria-current=${ifDefined(isLast ? 'page' : undefined)}>
+          ${isLast ? itemView : ''}
+          ${!isLast
+            ? html`<cc-link href="#" @click=${/** @param {Event} event */ (event) => this._onItemClick(event, path)}
+                >${itemView}</cc-link
+              >`
+            : ''}
+        </li>`;
+      })}
+    </ul>`;
+  }
+
+  static get styles() {
+    return [
+      // language=CSS
+      css`
+        :host {
+          display: block;
+
+          --gap: 0.5em;
+        }
+
+        ul {
+          align-items: end;
+          display: flex;
+          flex-wrap: wrap;
+          gap: var(--gap);
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+
+        li {
+          align-items: center;
+          display: flex;
+          gap: var(--gap);
+        }
+
+        .item-wrapper {
+          align-items: center;
+          display: flex;
+          gap: 0.2em;
+          min-width: 0;
+        }
+
+        cc-icon {
+          flex-shrink: 0;
+        }
+
+        li + li::before {
+          color: var(--cc-color-text-disabled, #ccc);
+          content: '/';
+          font-size: 1.2em;
+          font-weight: bold;
+        }
+      `,
+    ];
+  }
+}
+
+window.customElements.define('cc-breadcrumbs', CcBreadcrumbs);

src/components/cc-breadcrumbs/cc-breadcrumbs.stories.js

@@ -0,0 +1,100 @@
+import { html, render } from 'lit';
+import { iconRemixHome_3Line as iconHouse } from '../../assets/cc-remix.icons.js';
+import { makeStory } from '../../stories/lib/make-story.js';
+import './cc-breadcrumbs.js';
+
+export default {
+  tags: ['autodocs'],
+  title: '🧬 Atoms/<cc-breadcrumbs>',
+  component: 'cc-breadcrumbs',
+};
+
+/**
+ * @import { CcBreadcrumbs } from './cc-breadcrumbs.js'
+ */
+
+const conf = {
+  component: 'cc-breadcrumbs',
+};
+
+export const defaultStory = makeStory(conf, {
+  /** @type {Partial<CcBreadcrumbs>[]} */
+  items: [
+    {
+      items: [{ value: 'first' }, { value: 'second' }, { value: 'third' }],
+    },
+  ],
+});
+
+export const withIconStory = makeStory(conf, {
+  /** @type {Partial<CcBreadcrumbs>[]} */
+  items: [
+    {
+      items: [{ value: 'home', icon: iconHouse }, { value: 'first' }, { value: 'second' }, { value: 'third' }],
+    },
+  ],
+});
+
+export const withNoLabelStory = makeStory(conf, {
+  /** @type {Partial<CcBreadcrumbs>[]} */
+  items: [
+    {
+      items: [
+        { value: 'home', label: '', icon: iconHouse, iconA11yName: 'Home' },
+        { value: 'first' },
+        { value: 'second' },
+        { value: 'third' },
+      ],
+    },
+  ],
+});
+
+export const withSmallContainerStory = makeStory(conf, {
+  dom: /** @param {HTMLElement} container */ (container) => {
+    let width = '25';
+
+    /**
+     * @param {Event & { target: { value: string }}} e
+     */
+    function _onChange(e) {
+      width = e.target.value;
+      refresh();
+    }
+
+    const items = [{ value: 'home', icon: iconHouse }, { value: 'first' }, { value: 'second' }, { value: 'third' }];
+
+    function refresh() {
+      render(
+        html`
+          <div class="main">
+            <div class="form">
+              <label for="width">Width: (${width}%)</label>
+              <input type="range" id="width" .value=${String(width)} min="3" max="100" @input=${_onChange} />
+            </div>
+            <cc-breadcrumbs .items=${items} style="width:${width}%"></cc-breadcrumbs>
+          </div>
+        `,
+        container,
+      );
+    }
+
+    refresh();
+  },
+  // language=CSS
+  css: `
+    cc-breadcrumbs {
+      border: 2px solid #ccc;
+    }
+    .main {
+      display: flex;
+      flex-direction: column;
+      gap: 1em;
+    }
+    .form {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25em;
+      align-items: start;
+    }
+  `,
+});

src/components/cc-breadcrumbs/cc-breadcrumbs.types.d.ts

@@ -0,0 +1,12 @@
+import { IconModel } from '../common.types.js';
+
+export interface CcBreadcrumbsItem {
+  value: string;
+  label?: string;
+  icon?: IconModel;
+  /**
+   * WARNING: When `label` is an empty string, you MUST set this value to provide accessible text for the icon.
+   * Otherwise, the link will have no discernible text, which is a serious accessibility issue (WCAG: Links must have discernible text).
+   */
+  iconA11yName?: string;
+}

src/components/cc-cellar-bucket-list/cc-cellar-bucket-list.ctrl.js

@@ -1,3 +1,4 @@
+import { Abortable } from '../../lib/abortable.js';
 import { notifyError, notifySuccess } from '../../lib/notifications.js';
 import { isStringEmpty, sortByProps } from '../../lib/utils.js';
 import { i18n } from '../../translations/translation.js';
@@ -28,6 +29,8 @@ export class BucketsListController {
   #sort;
   /** @type {string} */
   #filter;
+  /** @type {Abortable} */
+  #abortable;
 
   /**
    * @param {CellarExplorerClient} cellarClient
@@ -41,6 +44,7 @@ export class BucketsListController {
     this.#buckets = [];
     this.#sort = { column: 'name', direction: 'asc' };
     this.#filter = '';
+    this.#abortable = new Abortable();
   }
 
   /**
@@ -74,10 +78,14 @@ export class BucketsListController {
     });
   }
 
+  abort() {
+    this.#abortable.abort();
+  }
+
   async initialFetch() {
     this.#updateState({ type: 'loading' });
     try {
-      const response = await this.#cellarClient.listBuckets();
+      const response = await this.#abortable.run(() => this.#cellarClient.listBuckets());
       this.#buckets = response.buckets.map((bucket) => ({ state: 'idle', ...bucket }));
       this.#updateState({
         type: 'loaded',
@@ -190,7 +198,7 @@ export class BucketsListController {
   async showBucketDetails(bucketName) {
     this.#updateBucketState(bucketName, { state: 'fetching' });
     try {
-      const bucketDetails = await this.#cellarClient.getBucket(bucketName);
+      const bucketDetails = await this.#abortable.run(() => this.#cellarClient.getBucket(bucketName));
       this.#updateState(
         /** @param {CellarBucketListStateLoaded} list */ (list) => {
           list.details = { state: 'idle', ...bucketDetails };

src/components/cc-cellar-bucket-list/cc-cellar-bucket-list.js

@@ -14,6 +14,7 @@ import { accessibilityStyles } from '../../styles/accessibility.js';
 import { i18n } from '../../translations/translation.js';
 import '../cc-badge/cc-badge.js';
 import '../cc-button/cc-button.js';
+import { CcCellarNavigateToBucketEvent } from '../cc-cellar-object-list/cc-cellar-object-list.events.js';
 import '../cc-clipboard/cc-clipboard.js';
 import '../cc-dialog-confirm-actions/cc-dialog-confirm-actions.js';
 import '../cc-dialog/cc-dialog.js';
@@ -98,7 +99,7 @@ export class CcCellarBucketList extends LitElement {
     this.updateComplete.then(() => {
       if (this.state.type === 'loaded') {
         const index = this.state.buckets.findIndex((b) => b.name === bucketName);
-        this._gridRef?.value.scrollToIndex(index);
+        this._gridRef.value?.scrollToIndex(index);
       }
     });
   }
@@ -155,6 +156,13 @@ export class CcCellarBucketList extends LitElement {
 
   //#region Event handlers
 
+  /**
+   * @param {string} bucketName
+   */
+  _onBucketClick(bucketName) {
+    this.dispatchEvent(new CcCellarNavigateToBucketEvent(bucketName));
+  }
+
   /**
    * @param {string} bucketName
    */
@@ -339,10 +347,11 @@ export class CcCellarBucketList extends LitElement {
       {
         header: i18n('cc-cellar-bucket-list.grid.column.name'),
         cellAt: (bucketState) => ({
-          type: 'text',
+          type: 'link',
           value: bucketState.name,
           icon: iconBucket,
           enableCopyToClipboard: true,
+          onClick: () => this._onBucketClick(bucketState.name),
         }),
         width: 'minmax(max-content, 1fr)',
         sort: getSort('name'),
@@ -598,7 +607,7 @@ export class CcCellarBucketList extends LitElement {
         .details-wrapper {
           display: flex;
           flex-direction: column;
-          width: 25em;
+          max-width: 25em;
         }
 
         .details-wrapper .details-icon-wrapper {