@jackuait/blok 0.10.3 → 0.10.4

package/src/tools/database/database-tab-bar.ts

@@ -0,0 +1,558 @@
+import { generateKeyBetween } from 'fractional-indexing';
+import { IconBoard, IconList, IconPencil, IconCopy, IconTrash, IconPlus } from '../../components/icons';
+import { DatabaseViewPopover } from './database-view-popover';
+import { PopoverDesktop } from '../../components/utils/popover';
+import { PopoverItemType } from '../../components/utils/popover/components/popover-item';
+import { PopoverEvent } from '@/types/utils/popover/popover-event';
+import type { DatabaseViewConfig, ViewType } from './types';
+
+const DRAG_THRESHOLD = 10;
+
+const VIEW_ICONS: Record<string, string> = {
+  board: IconBoard,
+  list: IconList,
+};
+
+export interface TabBarOptions {
+  views: DatabaseViewConfig[];
+  activeViewId: string;
+  onTabClick: (viewId: string) => void;
+  onAddView: (type: ViewType) => void;
+  onRename: (viewId: string, newName: string) => void;
+  onDuplicate: (viewId: string) => void;
+  onDelete: (viewId: string) => void;
+  onReorder: (viewId: string, newPosition: string) => void;
+  readOnly?: boolean;
+}
+
+export class DatabaseTabBar {
+  private readonly options: TabBarOptions;
+  private readonly views: DatabaseViewConfig[];
+  private readonly onReorder: (viewId: string, newPosition: string) => void;
+  private element: HTMLElement | null = null;
+  private barEl: HTMLElement | null = null;
+  private addBtnEl: HTMLElement | null = null;
+  private readOnly: boolean;
+  private viewPopover: DatabaseViewPopover | null = null;
+  private contextPopover: PopoverDesktop | null = null;
+
+  private overflowDropdownEl: HTMLElement | null = null;
+  private boundOverflowClose: ((e: MouseEvent) => void) | null = null;
+  private moreBtnEl: HTMLElement | null = null;
+
+  private isDragging = false;
+  private dragViewId = '';
+  private dragStartX = 0;
+  private ghostEl: HTMLElement | null = null;
+  private readonly boundDragMove: (e: PointerEvent) => void;
+  private readonly boundDragUp: (e: PointerEvent) => void;
+  private readonly boundDragCancel: () => void;
+  private readonly boundDragKeyDown: (e: KeyboardEvent) => void;
+
+  constructor(options: TabBarOptions) {
+    this.options = options;
+    this.views = options.views;
+    this.onReorder = options.onReorder;
+    this.readOnly = options.readOnly ?? false;
+
+    this.boundDragMove = this.handleDragMove.bind(this);
+    this.boundDragUp = this.handleDragUp.bind(this);
+    this.boundDragCancel = this.cleanupDrag.bind(this);
+    this.boundDragKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') { this.cleanupDrag(); }
+    };
+  }
+
+  render(): HTMLElement {
+    const bar = document.createElement('div');
+    bar.setAttribute('data-blok-database-tab-bar', '');
+    this.barEl = bar;
+    this.element = bar;
+
+    const sorted = [...this.options.views].sort((a, b) => (a.position < b.position ? -1 : 1));
+
+    for (const view of sorted) {
+      bar.appendChild(this.createTab(view));
+    }
+
+    const addBtn = document.createElement('button');
+    addBtn.setAttribute('data-blok-database-add-view', '');
+    addBtn.innerHTML = IconPlus;
+    addBtn.addEventListener('click', () => {
+      this.openViewPopover(addBtn);
+    });
+    this.addBtnEl = addBtn;
+    if (!this.readOnly) {
+      bar.appendChild(addBtn);
+    }
+
+    bar.addEventListener('click', (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const tab = target.closest('[data-blok-database-tab]');
+      if (!(tab instanceof HTMLElement)) {
+        return;
+      }
+      const viewId = tab.getAttribute('data-view-id');
+      if (viewId === null) {
+        return;
+      }
+      if (tab.hasAttribute('data-active')) {
+        return;
+      }
+      this.options.onTabClick(viewId);
+    });
+
+    bar.addEventListener('contextmenu', (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const tab = target.closest('[data-blok-database-tab]');
+      if (!(tab instanceof HTMLElement)) {
+        return;
+      }
+      e.preventDefault();
+      const viewId = tab.getAttribute('data-view-id');
+      if (viewId === null) {
+        return;
+      }
+      this.openContextPopover(tab, viewId);
+    });
+
+    bar.addEventListener('dblclick', (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const tab = target.closest('[data-blok-database-tab]');
+      if (!(tab instanceof HTMLElement)) {
+        return;
+      }
+      const viewId = tab.getAttribute('data-view-id');
+      if (viewId === null) {
+        return;
+      }
+      this.openContextPopover(tab, viewId);
+    });
+
+    bar.addEventListener('pointerdown', (e) => {
+      const target = e.target as HTMLElement;
+      const tab = target.closest<HTMLElement>('[data-blok-database-tab]');
+      if (tab === null) return;
+      const viewId = tab.getAttribute('data-view-id');
+      if (viewId === null) return;
+      this.dragViewId = viewId;
+      this.dragStartX = e.clientX;
+      this.isDragging = false;
+      document.addEventListener('pointermove', this.boundDragMove);
+      document.addEventListener('pointerup', this.boundDragUp);
+      document.addEventListener('pointercancel', this.boundDragCancel);
+      document.addEventListener('keydown', this.boundDragKeyDown);
+    });
+
+    if (typeof ResizeObserver !== 'undefined') {
+      const ro = new ResizeObserver(() => {
+        if (this.element === null) {
+          return;
+        }
+
+        const tabs = Array.from(this.element.querySelectorAll<HTMLElement>('[data-blok-database-tab]'));
+
+        for (const tab of tabs) {
+          tab.style.display = '';
+        }
+        this.moreBtnEl?.remove();
+        this.moreBtnEl = null;
+
+        const barWidth = this.element.clientWidth;
+        const addBtnWidth = 40;
+        const visibleCount = tabs.findIndex((_tab, i) => {
+          const consumed = addBtnWidth + tabs.slice(0, i + 1).reduce((w, t) => w + t.offsetWidth + 2, 0);
+
+          return consumed > barWidth;
+        });
+        const resolved = visibleCount === -1 ? tabs.length : visibleCount;
+
+        if (resolved < tabs.length) {
+          this.handleOverflow(resolved);
+        }
+      });
+
+      ro.observe(bar);
+    }
+
+    return bar;
+  }
+
+  private createTab(view: DatabaseViewConfig): HTMLElement {
+    const tab = document.createElement('div');
+    tab.setAttribute('data-blok-database-tab', '');
+    tab.setAttribute('data-view-id', view.id);
+
+    if (view.id === this.options.activeViewId) {
+      tab.setAttribute('data-active', '');
+    }
+
+    const iconSpan = document.createElement('span');
+    iconSpan.innerHTML = VIEW_ICONS[view.type] ?? '';
+    tab.appendChild(iconSpan);
+
+    const nameSpan = document.createElement('span');
+    nameSpan.setAttribute('data-blok-database-tab-name', '');
+    nameSpan.textContent = view.name;
+    tab.appendChild(nameSpan);
+
+    return tab;
+  }
+
+  private openContextPopover(tab: HTMLElement, viewId: string): void {
+    this.closeContextPopover();
+
+    const canDelete = this.options.views.length > 1;
+
+    const baseItems = [
+      {
+        icon: IconPencil,
+        title: 'Rename',
+        closeOnActivate: true,
+        onActivate: () => {
+          this.startInlineRename(tab, viewId);
+        },
+      },
+      {
+        icon: IconCopy,
+        title: 'Duplicate',
+        closeOnActivate: true,
+        onActivate: () => {
+          this.options.onDuplicate(viewId);
+        },
+      },
+    ];
+
+    const deleteItems = canDelete
+      ? [
+          { type: PopoverItemType.Separator as const },
+          {
+            icon: IconTrash,
+            title: 'Delete',
+            isDestructive: true,
+            closeOnActivate: true,
+            onActivate: () => {
+              this.options.onDelete(viewId);
+            },
+          },
+        ]
+      : [];
+
+    this.contextPopover = new PopoverDesktop({
+      trigger: tab,
+      width: 'auto',
+      minWidth: '160px',
+      autoFocusFirstItem: false,
+      items: [...baseItems, ...deleteItems],
+    });
+
+    this.contextPopover.on(PopoverEvent.Closed, () => {
+      if (this.contextPopover !== null) {
+        const p = this.contextPopover;
+        this.contextPopover = null;
+        p.destroy();
+      }
+    });
+
+    this.contextPopover.show();
+  }
+
+  private closeContextPopover(): void {
+    if (this.contextPopover !== null) {
+      const popover = this.contextPopover;
+      this.contextPopover = null;
+      popover.destroy();
+    }
+  }
+
+  private startInlineRename(tab: HTMLElement, viewId: string): void {
+    const nameSpan = tab.querySelector('[data-blok-database-tab-name]');
+    if (!(nameSpan instanceof HTMLElement)) {
+      return;
+    }
+
+    const originalName = nameSpan.textContent ?? '';
+
+    const input = document.createElement('input');
+    input.setAttribute('data-blok-database-tab-rename-input', '');
+    input.value = originalName;
+    nameSpan.replaceWith(input);
+    input.focus();
+    input.select();
+
+    const commit = (): void => {
+      const newName = input.value.trim() || originalName;
+      const newSpan = document.createElement('span');
+      newSpan.setAttribute('data-blok-database-tab-name', '');
+      newSpan.textContent = newName;
+      input.replaceWith(newSpan);
+      if (newName !== originalName) {
+        this.options.onRename(viewId, newName);
+      }
+    };
+
+    input.addEventListener('blur', commit);
+    input.addEventListener('keydown', (e: KeyboardEvent) => {
+      e.stopPropagation();
+      if (e.key === 'Enter') {
+        input.blur();
+      } else if (e.key === 'Escape') {
+        input.removeEventListener('blur', commit);
+        const cancelSpan = document.createElement('span');
+        cancelSpan.setAttribute('data-blok-database-tab-name', '');
+        cancelSpan.textContent = originalName;
+        input.replaceWith(cancelSpan);
+      }
+    });
+  }
+
+  private openViewPopover(anchor: HTMLElement): void {
+    if (this.viewPopover !== null) {
+      this.viewPopover.destroy();
+    }
+    anchor.setAttribute('data-popover-open', '');
+    this.barEl?.setAttribute('data-popover-open', '');
+    this.viewPopover = new DatabaseViewPopover({
+      onSelect: (type) => {
+        this.options.onAddView(type);
+      },
+      onClose: () => {
+        anchor.removeAttribute('data-popover-open');
+        this.barEl?.removeAttribute('data-popover-open');
+      },
+    });
+    this.viewPopover.open(anchor);
+  }
+
+  handleOverflow(visibleCount: number): void {
+    if (this.element === null) return;
+
+    // Remove existing more button
+    this.moreBtnEl?.remove();
+
+    const orderedViews = [...this.views].sort((a, b) => (a.position < b.position ? -1 : 1));
+    const hiddenCount = orderedViews.length - visibleCount;
+    if (hiddenCount <= 0) return;
+
+    // Hide overflow tabs
+    const tabs = Array.from(this.element.querySelectorAll<HTMLElement>('[data-blok-database-tab]'));
+
+    for (const tab of tabs.slice(visibleCount)) {
+      tab.style.display = 'none';
+    }
+
+    // Add "N more..." button before the + button
+    const moreBtn = document.createElement('div');
+    moreBtn.setAttribute('data-blok-database-tab-more', '');
+    moreBtn.textContent = `${hiddenCount} more...`;
+    moreBtn.style.cursor = 'pointer';
+    moreBtn.addEventListener('click', () => {
+      this.openOverflowDropdown(moreBtn);
+    });
+
+    const addBtn = this.element.querySelector('[data-blok-database-add-view]');
+    if (addBtn !== null) {
+      this.element.insertBefore(moreBtn, addBtn);
+    } else {
+      this.element.appendChild(moreBtn);
+    }
+    this.moreBtnEl = moreBtn;
+  }
+
+  private openOverflowDropdown(anchor: HTMLElement): void {
+    this.closeOverflowDropdown();
+
+    const dropdown = document.createElement('div');
+    dropdown.setAttribute('data-blok-popover', '');
+    dropdown.setAttribute('data-blok-database-tab-overflow-dropdown', '');
+    dropdown.style.position = 'fixed';
+    dropdown.style.zIndex = '1000';
+
+    const rect = anchor.getBoundingClientRect();
+    dropdown.style.top = `${rect.bottom + 4}px`;
+    dropdown.style.left = `${rect.left}px`;
+
+    const orderedViews = [...this.views].sort((a, b) => (a.position < b.position ? -1 : 1));
+
+    for (const view of orderedViews) {
+      const item = document.createElement('div');
+      item.setAttribute('data-blok-database-tab-overflow-item', '');
+      item.setAttribute('data-view-id', view.id);
+
+      if (view.id === this.options.activeViewId) {
+        item.setAttribute('data-active', '');
+      }
+
+      const iconSpan = document.createElement('span');
+      iconSpan.innerHTML = VIEW_ICONS[view.type] ?? '';
+      item.appendChild(iconSpan);
+
+      const nameSpan = document.createElement('span');
+      nameSpan.textContent = view.name;
+      item.appendChild(nameSpan);
+
+      item.addEventListener('click', () => {
+        if (view.id !== this.options.activeViewId) {
+          this.options.onTabClick(view.id);
+        }
+        this.closeOverflowDropdown();
+      });
+
+      dropdown.appendChild(item);
+    }
+
+    const separator = document.createElement('div');
+    separator.setAttribute('data-blok-database-tab-overflow-separator', '');
+    dropdown.appendChild(separator);
+
+    const addBtn = this.element?.querySelector<HTMLElement>('[data-blok-database-add-view]');
+    const newViewBtn = document.createElement('div');
+    newViewBtn.setAttribute('data-blok-database-tab-overflow-new', '');
+    newViewBtn.textContent = '+ New view';
+    newViewBtn.addEventListener('click', () => {
+      this.closeOverflowDropdown();
+      if (addBtn !== null && addBtn !== undefined) {
+        this.openViewPopover(addBtn);
+      }
+    });
+    dropdown.appendChild(newViewBtn);
+
+    document.body.appendChild(dropdown);
+    this.overflowDropdownEl = dropdown;
+
+    this.boundOverflowClose = (e: MouseEvent): void => {
+      const target = e.target as HTMLElement;
+      if (!dropdown.contains(target) && !anchor.contains(target)) {
+        this.closeOverflowDropdown();
+      }
+    };
+
+    document.addEventListener('mousedown', this.boundOverflowClose);
+  }
+
+  private closeOverflowDropdown(): void {
+    if (this.overflowDropdownEl !== null) {
+      this.overflowDropdownEl.remove();
+      this.overflowDropdownEl = null;
+    }
+    if (this.boundOverflowClose !== null) {
+      document.removeEventListener('mousedown', this.boundOverflowClose);
+      this.boundOverflowClose = null;
+    }
+  }
+
+  private handleDragMove(e: PointerEvent): void {
+    const dx = Math.abs(e.clientX - this.dragStartX);
+    if (!this.isDragging && dx < DRAG_THRESHOLD) return;
+    if (!this.isDragging) {
+      this.isDragging = true;
+      this.element?.setAttribute('data-dragging', '');
+      const sourceTab = this.element?.querySelector(`[data-view-id="${this.dragViewId}"]`) as HTMLElement | null;
+      if (sourceTab !== null) {
+        this.ghostEl = sourceTab.cloneNode(true) as HTMLElement;
+        this.ghostEl.setAttribute('data-blok-database-tab-ghost', '');
+        this.ghostEl.style.position = 'fixed';
+        this.ghostEl.style.pointerEvents = 'none';
+        this.ghostEl.style.zIndex = '50';
+        this.ghostEl.style.opacity = '0.7';
+        const rect = sourceTab.getBoundingClientRect();
+        this.ghostEl.style.top = `${rect.top}px`;
+        this.ghostEl.style.width = `${rect.width}px`;
+        document.body.appendChild(this.ghostEl);
+        sourceTab.style.opacity = '0.4';
+      }
+    }
+    if (this.ghostEl !== null) {
+      this.ghostEl.style.left = `${e.clientX - 50}px`;
+    }
+  }
+
+  private handleDragUp(e: PointerEvent): void {
+    if (!this.isDragging) {
+      this.removeDragListeners();
+      return;
+    }
+    const tabs = Array.from(
+      this.element?.querySelectorAll<HTMLElement>('[data-blok-database-tab]') ?? []
+    ).filter((t) => t.getAttribute('data-view-id') !== this.dragViewId);
+
+    const dropIndex = tabs.findIndex((t) => {
+      const rect = t.getBoundingClientRect();
+      return e.clientX < (rect.left + rect.right) / 2;
+    });
+
+    const beforeViewId = dropIndex >= 0 ? tabs[dropIndex].getAttribute('data-view-id') : null;
+    const afterViewId = ((): string | null => {
+      if (dropIndex > 0) return tabs[dropIndex - 1].getAttribute('data-view-id');
+      if (dropIndex === -1 && tabs.length > 0) return tabs[tabs.length - 1].getAttribute('data-view-id');
+      return null;
+    })();
+
+    const orderedViews = [...this.views].sort((a, b) => (a.position < b.position ? -1 : 1));
+    const beforeView = beforeViewId !== null ? orderedViews.find((v) => v.id === beforeViewId) : null;
+    const afterView = afterViewId !== null ? orderedViews.find((v) => v.id === afterViewId) : null;
+
+    const newPosition = generateKeyBetween(
+      afterView?.position ?? null,
+      beforeView?.position ?? null
+    );
+
+    this.cleanupDrag();
+    this.onReorder(this.dragViewId, newPosition);
+  }
+
+  private cleanupDrag(): void {
+    if (this.ghostEl !== null) {
+      this.ghostEl.remove();
+      this.ghostEl = null;
+    }
+    this.element?.removeAttribute('data-dragging');
+    const sourceTab = this.element?.querySelector(`[data-view-id="${this.dragViewId}"]`) as HTMLElement | null;
+    if (sourceTab !== null) {
+      sourceTab.style.opacity = '';
+    }
+    this.isDragging = false;
+    this.removeDragListeners();
+  }
+
+  private removeDragListeners(): void {
+    document.removeEventListener('pointermove', this.boundDragMove);
+    document.removeEventListener('pointerup', this.boundDragUp);
+    document.removeEventListener('pointercancel', this.boundDragCancel);
+    document.removeEventListener('keydown', this.boundDragKeyDown);
+  }
+
+  setReadOnly(state: boolean): void {
+    if (this.readOnly === state) {
+      return;
+    }
+    this.readOnly = state;
+
+    if (this.barEl === null || this.addBtnEl === null) {
+      return;
+    }
+
+    if (state) {
+      this.addBtnEl.remove();
+    } else {
+      // Only re-attach to bar if the button isn't already placed elsewhere (e.g. title row)
+      if (!this.addBtnEl.isConnected) {
+        this.barEl.appendChild(this.addBtnEl);
+      }
+    }
+  }
+
+  destroy(): void {
+    this.cleanupDrag();
+    this.closeContextPopover();
+    this.closeOverflowDropdown();
+    if (this.viewPopover !== null) {
+      this.viewPopover.destroy();
+      this.viewPopover = null;
+    }
+  }
+
+  getAddBtnEl(): HTMLElement | null {
+    return this.addBtnEl;
+  }
+}

package/src/tools/database/database-view-popover.ts

@@ -0,0 +1,129 @@
+import { IconBoard, IconList } from '../../components/icons';
+import { PopoverDesktop } from '../../components/utils/popover';
+import { PopoverItemType } from '../../components/utils/popover/components/popover-item';
+import { PopoverEvent } from '@/types/utils/popover/popover-event';
+import type { ViewType } from './types';
+
+interface ViewTypeOption {
+  type: ViewType;
+  icon: string;
+  label: string;
+  description: string;
+}
+
+const VIEW_TYPES: ViewTypeOption[] = [
+  { type: 'board', icon: IconBoard, label: 'Board', description: 'Visualize work as columns' },
+  { type: 'list', icon: IconList, label: 'List', description: 'A simple linear view' },
+];
+
+export interface ViewPopoverOptions {
+  onSelect: (type: ViewType) => void;
+  onClose?: () => void;
+}
+
+export class DatabaseViewPopover {
+  private readonly onSelect: (type: ViewType) => void;
+  private readonly onClose: (() => void) | undefined;
+  private popover: PopoverDesktop | null = null;
+
+  constructor(options: ViewPopoverOptions) {
+    this.onSelect = options.onSelect;
+    this.onClose = options.onClose;
+  }
+
+  open(anchor: HTMLElement): void {
+    this.close();
+
+    const headingEl = document.createElement('div');
+
+    headingEl.setAttribute('data-blok-database-view-popover-heading', '');
+    headingEl.textContent = 'Add view';
+
+    const headingItem = {
+      type: PopoverItemType.Html as const,
+      element: headingEl,
+    };
+
+    const items = [
+      headingItem,
+      ...VIEW_TYPES.map((option) => {
+        const el = this.createViewItem(option);
+
+        return {
+          type: PopoverItemType.Html as const,
+          element: el,
+          closeOnActivate: true,
+        };
+      }),
+    ];
+
+    this.popover = new PopoverDesktop({
+      items,
+      trigger: anchor,
+      width: 'auto',
+      minWidth: '200px',
+      flippable: false,
+      autoFocusFirstItem: false,
+    });
+
+    this.popover.on(PopoverEvent.Closed, () => {
+      if (this.popover !== null) {
+        const p = this.popover;
+        this.popover = null;
+        p.destroy();
+        this.onClose?.();
+      }
+    });
+
+    this.popover.show();
+  }
+
+  private createViewItem(option: ViewTypeOption): HTMLElement {
+    const item = document.createElement('div');
+
+    item.setAttribute('data-blok-database-view-option', option.type);
+
+    const iconEl = document.createElement('div');
+
+    iconEl.setAttribute('data-blok-database-view-option-icon', '');
+    iconEl.innerHTML = option.icon;
+    item.appendChild(iconEl);
+
+    const textEl = document.createElement('div');
+
+    textEl.setAttribute('data-blok-database-view-option-text', '');
+
+    const labelEl = document.createElement('span');
+
+    labelEl.setAttribute('data-blok-database-view-option-label', '');
+    labelEl.textContent = option.label;
+    textEl.appendChild(labelEl);
+
+    const descEl = document.createElement('span');
+
+    descEl.setAttribute('data-blok-database-view-option-desc', '');
+    descEl.textContent = option.description;
+    textEl.appendChild(descEl);
+
+    item.appendChild(textEl);
+
+    item.addEventListener('click', () => {
+      this.onSelect(option.type);
+    });
+
+    return item;
+  }
+
+  close(): void {
+    if (this.popover !== null) {
+      const popover = this.popover;
+      this.popover = null;
+      popover.destroy();
+      this.onClose?.();
+    }
+  }
+
+  destroy(): void {
+    this.close();
+  }
+}

package/src/tools/database/database-view-renderer.ts

@@ -0,0 +1,25 @@
+import type { DatabaseRow, SelectOption } from './types';
+
+/**
+ * Shared contract for all database view renderers (board, list, etc.).
+ * Each implementation receives its data through the constructor and renders via createView().
+ */
+export interface DatabaseViewRenderer {
+  /** Creates the full view DOM. Data is bound at construction time. */
+  createView(): HTMLDivElement;
+
+  /** Appends a row element to the appropriate container within the view. */
+  appendRow(container: HTMLElement, row: DatabaseRow): void;
+
+  /** Removes a row element from the view by its row ID. */
+  removeRow(wrapper: HTMLElement, rowId: string): void;
+
+  /** Updates the visible title of a row element found by its row ID. */
+  updateRowTitle(wrapper: HTMLElement, rowId: string, title: string): void;
+
+  /** Appends a group container (board: column, list: group section). Optional — not all views support it. */
+  appendGroup?(wrapper: HTMLElement, option: SelectOption): void;
+
+  /** Removes a group container by its option ID. Optional. */
+  removeGroup?(wrapper: HTMLElement, optionId: string): void;
+}