@ibgib/space-gib 0.0.33 → 0.0.34

package/src/client/ui/component/file-explorer/file-explorer.mts

@@ -0,0 +1,346 @@
+import thisCss from "./file-explorer.css";
+import thisHtml from "./file-explorer.html";
+
+import { ROOT_ADDR } from "@ibgib/ts-gib/dist/V1/constants.mjs";
+import { IbGibAddr } from "@ibgib/ts-gib/dist/types.mjs";
+import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
+import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { promptForText } from "@ibgib/web-gib/dist/helpers.web.mjs";
+import {
+    IbGibDynamicComponentMetaBase, IbGibDynamicComponentInstanceBase,
+} from "@ibgib/web-gib/dist/ui/component/ibgib-dynamic-component-bases.mjs";
+import {
+    ElementsBase, IbGibDynamicComponentInstance,
+} from "@ibgib/web-gib/dist/ui/component/component-types.mjs";
+import { getComponentCtorArg } from "@ibgib/web-gib/dist/app-bootstrap/init-orchestration.mjs";
+
+export const FILE_EXPLORER_COMPONENT_NAME = 'space-gib-file-explorer';
+
+/**
+ * Metadata factory for space-gib-file-explorer Web Component.
+ */
+export class FileExplorerComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[${FileExplorerComponentMeta.name}]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${FILE_EXPLORER_COMPONENT_NAME}$`);
+    componentName = FILE_EXPLORER_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, FileExplorerComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const component = document.createElement(this.componentName) as FileExplorerComponentInstance;
+        await component.initialize({
+            ibGibAddr: ibGibAddr || ROOT_ADDR,
+            meta: this,
+            html: thisHtml,
+            css: [thisCss],
+        });
+        return component;
+    }
+}
+
+/**
+ * References to DOM elements within the component's Shadow Root.
+ */
+export interface FileExplorerElements extends ElementsBase {
+    rootEl: HTMLDivElement;
+    branchHeaderEl: HTMLDivElement;
+    btnBranchToggleEl: HTMLButtonElement;
+    branchTitleEl: HTMLSpanElement;
+    fileTreeContainerEl: HTMLDivElement;
+    btnNewFileEl: HTMLButtonElement;
+    btnNewFolderEl: HTMLButtonElement;
+    btnCollapseAllEl: HTMLButtonElement;
+    btnBranchBranchEl?: HTMLButtonElement;
+    btnCloneBranchEl?: HTMLButtonElement;
+}
+
+/**
+ * Concrete implementation of the Branch File Explorer component.
+ */
+export class FileExplorerComponentInstance
+    extends IbGibDynamicComponentInstanceBase<IbGib_V1, FileExplorerElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, FileExplorerElements> {
+
+    protected lc: string = `[${FileExplorerComponentInstance.name}]`;
+
+    private branchName: string = 'main';
+    private isBranchExpanded: boolean = true;
+    private selectedFilePath: string = 'src/index.ts';
+
+    get el(): FileExplorerElements {
+        if (!this.elements) {
+            throw new Error(`elements is not defined in ${this.lc}`);
+        }
+        return this.elements;
+    }
+
+    override async created(): Promise<void> {
+        const lc = `${this.lc}[${this.created.name}]`;
+        try {
+            const shadow = this.shadowRoot!;
+            this.elements = {
+                rootEl: shadow.getElementById('file-explorer-root') as HTMLDivElement,
+                branchHeaderEl: shadow.getElementById('branch-header') as HTMLDivElement,
+                btnBranchToggleEl: shadow.getElementById('btn-branch-toggle') as HTMLButtonElement,
+                branchTitleEl: shadow.getElementById('branch-title') as HTMLSpanElement,
+                fileTreeContainerEl: shadow.getElementById('file-tree-container') as HTMLDivElement,
+                btnNewFileEl: shadow.getElementById('btn-new-file') as HTMLButtonElement,
+                btnNewFolderEl: shadow.getElementById('btn-new-folder') as HTMLButtonElement,
+                btnCollapseAllEl: shadow.getElementById('btn-collapse-all') as HTMLButtonElement,
+                btnBranchBranchEl: shadow.getElementById('btn-branch-branch') as HTMLButtonElement,
+                btnCloneBranchEl: shadow.getElementById('btn-clone-branch') as HTMLButtonElement,
+                contentEl: shadow.getElementById('file-explorer-root') as HTMLDivElement,
+            };
+
+            this.bindHandlers();
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private bindHandlers(): void {
+        const shadow = this.shadowRoot!;
+
+        // Branch header toggle
+        this.el.branchHeaderEl.addEventListener('click', (e) => {
+            const target = e.target as HTMLElement;
+            if (target.closest('.action-btn')) return; // ignore action buttons
+            this.toggleBranchAccordion();
+        });
+
+        // Action buttons
+        this.el.btnNewFileEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.dispatchEvent(new CustomEvent('space-gib-new-file-requested', {
+                detail: { branch: this.branchName },
+                bubbles: true,
+                composed: true,
+            }));
+        });
+
+        this.el.btnNewFolderEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.dispatchEvent(new CustomEvent('space-gib-new-folder-requested', {
+                detail: { branch: this.branchName },
+                bubbles: true,
+                composed: true,
+            }));
+        });
+
+        this.el.btnCollapseAllEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.collapseAllFolders();
+        });
+
+        // Worktree Branch action
+        this.el.btnBranchBranchEl?.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            const newBranchName = await promptForText({
+                title: 'Branch from Worktree',
+                msg: `Create new branch diverging from [${this.branchName}]:`,
+                defaultValue: `feature/branch-from-${this.branchName}`,
+                cancelable: true,
+            });
+            if (newBranchName) {
+                console.log(`${this.lc} New branch created from worktree [${this.branchName}]: ${newBranchName}`);
+                this.setBranch(newBranchName);
+                this.dispatchEvent(new CustomEvent('space-gib-branch-requested', {
+                    detail: {
+                        galaxyName: 'Code Galaxy',
+                        sourceBranch: this.branchName,
+                        newBranchName,
+                        scope: 'branch',
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        });
+
+        // Branch Clone action
+        this.el.btnCloneBranchEl?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.dispatchEvent(new CustomEvent('space-gib-clone-requested', {
+                detail: {
+                    galaxyName: 'Code Galaxy',
+                    branchName: this.branchName,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        });
+
+        // Single Item Branch actions
+        shadow.querySelectorAll('.file-branch-btn').forEach(btn => {
+            btn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                const treeItem = btn.closest('.tree-item');
+                const path = treeItem?.getAttribute('data-path') || treeItem?.getAttribute('data-folder') || '';
+                const isDir = treeItem?.classList.contains('folder') || false;
+                const filename = path.split('/').pop() || path;
+                const defaultBranch = `feature/branch-${filename.replace(/[^a-zA-Z0-9]/g, '-')}`;
+
+                const newBranchName = await promptForText({
+                    title: `Branch from ${isDir ? 'Directory' : 'File'} Item`,
+                    msg: `Create new branch isolating and diverging from item [${path}]:`,
+                    defaultValue: defaultBranch,
+                    cancelable: true,
+                });
+
+                if (newBranchName) {
+                    console.log(`${this.lc} New branch created from item [${path}]: ${newBranchName}`);
+                    this.setBranch(newBranchName);
+                    this.dispatchEvent(new CustomEvent('space-gib-branch-requested', {
+                        detail: {
+                            galaxyName: 'Code Galaxy',
+                            sourceBranch: this.branchName,
+                            itemPath: path,
+                            isDir,
+                            newBranchName,
+                            scope: 'item',
+                        },
+                        bubbles: true,
+                        composed: true,
+                    }));
+                }
+            });
+        });
+
+        // Single Item Clone actions
+        shadow.querySelectorAll('.file-clone-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const treeItem = btn.closest('.tree-item');
+                const path = treeItem?.getAttribute('data-path') || treeItem?.getAttribute('data-folder') || '';
+                const isDir = treeItem?.classList.contains('folder') || false;
+                this.dispatchEvent(new CustomEvent('space-gib-clone-requested', {
+                    detail: {
+                        singleItem: {
+                            path,
+                            isDir,
+                            galaxyName: 'Code Galaxy',
+                            branchName: this.branchName,
+                        },
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+        });
+
+        // Folder toggles
+        shadow.querySelectorAll('.tree-item.folder').forEach(folderEl => {
+            folderEl.addEventListener('click', () => {
+                const folderName = folderEl.getAttribute('data-folder');
+                if (!folderName) { return; }
+
+                const isExpanded = folderEl.classList.contains('expanded');
+                const chevron = folderEl.querySelector('.tree-chevron');
+
+                if (isExpanded) {
+                    folderEl.classList.remove('expanded');
+                    if (chevron) { chevron.textContent = '▼'; }
+                    shadow.querySelectorAll(`.child-of-${folderName}`).forEach(child => child.classList.add('hidden'));
+                } else {
+                    folderEl.classList.add('expanded');
+                    if (chevron) { chevron.textContent = '▼'; }
+                    shadow.querySelectorAll(`.child-of-${folderName}`).forEach(child => child.classList.remove('hidden'));
+                }
+            });
+        });
+
+        // File selections
+        shadow.querySelectorAll('.tree-item.file').forEach(fileEl => {
+            fileEl.addEventListener('click', () => {
+                const path = fileEl.getAttribute('data-path') || '';
+                const name = fileEl.getAttribute('data-name') || '';
+                this.selectFile(path);
+
+                this.dispatchEvent(new CustomEvent('space-gib-file-selected', {
+                    detail: {
+                        branch: this.branchName,
+                        path,
+                        name,
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+        });
+    }
+
+    public toggleBranchAccordion(): void {
+        this.isBranchExpanded = !this.isBranchExpanded;
+        if (this.isBranchExpanded) {
+            this.el.branchHeaderEl.classList.remove('collapsed');
+            this.el.branchHeaderEl.classList.add('expanded');
+            this.el.fileTreeContainerEl.classList.remove('collapsed');
+        } else {
+            this.el.branchHeaderEl.classList.add('collapsed');
+            this.el.branchHeaderEl.classList.remove('expanded');
+            this.el.fileTreeContainerEl.classList.add('collapsed');
+        }
+    }
+
+    public collapseAllFolders(): void {
+        const shadow = this.shadowRoot!;
+        shadow.querySelectorAll('.tree-item.folder').forEach(folderEl => {
+            const folderName = folderEl.getAttribute('data-folder');
+            folderEl.classList.remove('expanded');
+            const chevron = folderEl.querySelector('.tree-chevron');
+            // if (chevron) chevron.textContent = '▶';
+            if (chevron) { chevron.textContent = '▼'; }
+            if (folderName) {
+                shadow.querySelectorAll(`.child-of-${folderName}`).forEach(child => child.classList.add('hidden'));
+            }
+        });
+    }
+
+    public selectFile(path: string): void {
+        this.selectedFilePath = path;
+        const shadow = this.shadowRoot!;
+        shadow.querySelectorAll('.tree-item.file').forEach(el => {
+            if (el.getAttribute('data-path') === path) {
+                el.classList.add('selected');
+            } else {
+                el.classList.remove('selected');
+            }
+        });
+    }
+
+    public setBranch(branchName: string): void {
+        this.branchName = branchName;
+        if (this.el?.branchTitleEl) {
+            this.el.branchTitleEl.textContent = branchName;
+        }
+    }
+
+    public getBranch(): string {
+        return this.branchName;
+    }
+
+    public getSelectedFilePath(): string {
+        return this.selectedFilePath;
+    }
+
+    override async disconnected(): Promise<void> {
+        const lc = `${this.lc}[${this.disconnected.name}]`;
+        try {
+            // cleanup if needed
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+}

package/src/client/ui/component/file-explorer/index.mts

@@ -0,0 +1,9 @@
+import { getComponentSvc } from "@ibgib/web-gib/dist/ui/component/ibgib-component-service.mjs";
+import { FileExplorerComponentMeta } from "./file-explorer.mjs";
+
+export * from "./file-explorer.mjs";
+
+export async function registerFileExplorerComponent(): Promise<void> {
+    const componentSvc = await getComponentSvc();
+    componentSvc.registerComponentMeta(new FileExplorerComponentMeta());
+}

package/src/client/ui/component/nested-chat/IMPLEMENTATION.md

@@ -0,0 +1,18 @@
+# space-gib-nested-chat Component Implementation
+
+## 1. Overview
+`space-gib-nested-chat` is a dynamic container Web Component that hosts recursive `space-gib-chat` instances in the `space-gib` right panel. It extends `IbGibDynamicComponentInstanceBase_ParentOfTabs` to manage child tabs formatted as an interactive breadcrumb navigation rail.
+
+## 2. Core Concepts & Navigation Paradigm
+- **Breadcrumb-Styled Tabs**:
+  - Rather than traditional square tabs, tabs are styled as a horizontal breadcrumb path (`[🌿 src/index.ts] › [💬 Architectural Rationale...] › [💬 Boundary Try/Catch...]`).
+  - The currently active breadcrumb has high-contrast accent styling.
+- **Non-Destructive Ancestor Navigation**:
+  - Clicking any ancestor breadcrumb activates that ancestor's `space-gib-chat` component in the main content viewport (`this.activateIbGib({ addr })`).
+  - Descendant breadcrumb tabs remain in the rail so the user can easily hop back and forth along the conversation trail.
+- **Branch Divergence**:
+  - If the user is currently focused on an ancestor tab and selects a *different* comment to drill down into, any descendant tabs beyond the active tab are pruned and the new child comment is appended as the new active tab.
+
+## 3. Events Handled & Dispatched
+- Listens for `space-gib-chat-drill-down`: Triggers drill-down into child comment context.
+- Dispatches `space-gib-chat-closed` / `space-gib-chat-close-requested`: Requests shell collapse/close of right chat panel.

package/src/client/ui/component/nested-chat/chat/IMPLEMENTATION.md

@@ -0,0 +1,14 @@
+# space-gib-chat Component Implementation
+
+## 1. Overview
+`space-gib-chat` is a dynamic Web Component representing a single chatroom context within the `space-gib-nested-chat` container. In the ibGib model, any ibGib (a source file, commit, diff, or individual comment) can act as a chatroom context.
+
+## 2. Responsibilities
+- Renders the list of living comments attached to the context ibGib (`this.ibGib.rel8ns.chat`).
+- Renders author identity, avatar, role (Keystone/Peer/Agent), timestamps, and optional code anchors.
+- Provides a drill-down trigger (`↳ N replies / Drill In 🔍`) that fires `space-gib-chat-drill-down` custom event upward to `space-gib-nested-chat`.
+- Provides an inline message composer to append new living comments to the current context.
+
+## 3. Events Dispatched
+- `space-gib-chat-drill-down`: Bubbling, composed event carrying `{ addr: IbGibAddr, text: string, author?: string }`.
+- `space-gib-chat-message-sent`: Notification event carrying `{ message: ChatCommentItem, contextAddr: IbGibAddr }`.

package/src/client/ui/component/nested-chat/chat/chat-constants.mts

@@ -0,0 +1,14 @@
+/**
+ * in the chat component, there are two different types of behavior for ENTER
+ * key: "send" | "newline".
+ *
+ * This is the key used in storage for storing this small settings locally.
+ *
+ * ## driving use case
+ *
+ * It drives me bonkers when I have to remember to hit SHIFT+ENTER in order to
+ * avoid sending a complex message/text.
+ */
+export const SPACE_GIB_CHAT_ENTER_BEHAVIOR_KEY = 'space_gib_enter_behavior';
+
+export const SPACE_GIB_CHAT_ENTER_BEHAVIOR_KEY_DEFAULT = 'newline';

package/src/client/ui/component/nested-chat/chat/chat-helpers.mts

@@ -0,0 +1,66 @@
+import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { storageGet, storagePut } from "@ibgib/web-gib/dist/storage/storage-helpers.web.mjs";
+
+
+import { APP_CONFIG, GLOBAL_LOG_A_LOT } from "../../../../constants.mjs";
+import { SPACE_GIB_CHAT_ENTER_BEHAVIOR_KEY, SPACE_GIB_CHAT_ENTER_BEHAVIOR_KEY_DEFAULT } from "./chat-constants.mjs";
+
+const logalot = GLOBAL_LOG_A_LOT;
+
+/**
+ * gets value of how the ENTER key should behave when pressed in the chat.
+ * First looks in storage, and if not found (or errored), returns default.
+ *
+ * ## driving use case
+ *
+ * It drives me bonkers when I have to remember to hit SHIFT+ENTER in order to
+ * avoid sending a complex message/text.
+ *
+ * @returns enter behavior from storage or default
+ *
+ * @see {@link SPACE_GIB_CHAT_ENTER_BEHAVIOR_KEY}
+ * @see {@link SPACE_GIB_CHAT_ENTER_BEHAVIOR_KEY_DEFAULT}
+ */
+export async function getSavedEnterBehavior(): Promise<'send' | 'newline'> {
+    const lc = `[${getSavedEnterBehavior.name}]`;
+    try {
+        const saved = await storageGet({
+            dbName: APP_CONFIG.dbName,
+            storeName: APP_CONFIG.storeName,
+            key: SPACE_GIB_CHAT_ENTER_BEHAVIOR_KEY,
+        });
+        if (saved === 'newline' || saved === 'send') {
+            return saved;
+        } else {
+            throw new Error(`invalid saved value: ${saved}. expected "newline" or "send" (E: 2ff05888161f88781ec3a778b8dbdc26)`);
+        }
+    } catch (error) {
+        console.log(`${lc} (NOT THROWN) error: ${extractErrorMsg(error)}. returning default value: ${SPACE_GIB_CHAT_ENTER_BEHAVIOR_KEY_DEFAULT} (E: 71a0df6714c22a322e65702a2f743126)`);
+        return SPACE_GIB_CHAT_ENTER_BEHAVIOR_KEY_DEFAULT;
+    }
+}
+
+/**
+ * @see {@link getSavedEnterBehavior}
+ */
+export async function setSavedEnterBehavior(value: 'send' | 'newline'): Promise<void> {
+    const lc = `[${setSavedEnterBehavior.name}]`;
+    try {
+        if (logalot) { console.log(`${lc} starting... (I: 39e3f846651cb92cfec3da4ee305ea26)`); }
+
+        if (value !== "send" && value !== "newline") {
+            throw new Error(`(UNEXPECTED) invalid val (val)? should be "send" or "newline" (E: b5323681d3d66ddb3868cc9aa7fae826)`);
+        }
+
+        await storagePut({
+            dbName: APP_CONFIG.dbName,
+            storeName: APP_CONFIG.storeName,
+            key: SPACE_GIB_CHAT_ENTER_BEHAVIOR_KEY,
+            value,
+        });
+    } catch (error) {
+        console.error(`${lc} (NOT THROWN) ${extractErrorMsg(error)}`);
+    } finally {
+        if (logalot) { console.log(`${lc} complete.`); }
+    }
+}