@ibgib/space-gib 0.0.33 → 0.0.34

package/src/client/ui/component/notes-explorer/notes-explorer.css

@@ -0,0 +1,313 @@
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: #e2e8f0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    background: transparent;
+    user-select: none;
+}
+
+.notes-explorer-root {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow-y: auto;
+    background: transparent;
+}
+
+/* Header */
+.notes-header {
+    padding: 12px 14px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.notes-title-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.notes-icon {
+    font-size: 16px;
+}
+
+.notes-title {
+    font-weight: 600;
+    font-size: 13px;
+    letter-spacing: 0.3px;
+    color: #f1f5f9;
+    flex: 1;
+}
+
+.notes-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.btn-notes-action {
+    background: #6366f1;
+    color: #ffffff;
+    border: none;
+    border-radius: 4px;
+    padding: 3px 8px;
+    font-size: 11px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.15s ease, transform 0.1s ease;
+}
+
+.btn-notes-action:hover {
+    background: #4f46e5;
+    transform: translateY(-1px);
+}
+
+.btn-notes-action:active {
+    transform: translateY(0);
+}
+
+.notes-search-bar {
+    width: 100%;
+}
+
+.notes-filter-input {
+    width: 100%;
+    box-sizing: border-box;
+    background: rgba(0, 0, 0, 0.25);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    padding: 5px 8px;
+    color: #f8fafc;
+    font-size: 11.5px;
+    outline: none;
+    transition: border-color 0.15s ease;
+}
+
+.notes-filter-input:focus {
+    border-color: #818cf8;
+    background: rgba(0, 0, 0, 0.35);
+}
+
+/* Accordion Sections */
+.notes-sections-container {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 24px;
+}
+
+.notes-accordion-section {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.accordion-header {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    cursor: pointer;
+    background: rgba(255, 255, 255, 0.02);
+    transition: background 0.15s ease;
+    gap: 6px;
+}
+
+.accordion-header:hover {
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.accordion-arrow {
+    font-size: 9px;
+    color: #94a3b8;
+    width: 12px;
+    text-align: center;
+    transition: transform 0.15s ease;
+}
+
+.accordion-title {
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    color: #94a3b8;
+    flex: 1;
+}
+
+.btn-section-mini {
+    background: transparent;
+    color: #94a3b8;
+    border: none;
+    cursor: pointer;
+    font-size: 13px;
+    padding: 0 4px;
+    line-height: 1;
+    border-radius: 3px;
+}
+
+.btn-section-mini:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8fafc;
+}
+
+.accordion-content {
+    display: flex;
+    flex-direction: column;
+    padding: 4px 8px 8px 8px;
+    gap: 2px;
+}
+
+.accordion-content.hidden {
+    display: none;
+}
+
+/* Lens Items */
+.lens-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease;
+}
+
+.lens-item:hover {
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.lens-item.active {
+    background: rgba(99, 102, 241, 0.18);
+    color: #c7d2fe;
+    font-weight: 500;
+}
+
+.lens-icon {
+    font-size: 13px;
+}
+
+.lens-label {
+    flex: 1;
+    font-size: 12px;
+}
+
+.lens-count {
+    font-size: 11px;
+    color: #94a3b8;
+    background: rgba(0, 0, 0, 0.25);
+    padding: 1px 6px;
+    border-radius: 10px;
+}
+
+/* Tag Pills */
+.tag-pill-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.15s ease;
+}
+
+.tag-pill-item:hover {
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.tag-pill-item.active {
+    background: rgba(129, 140, 248, 0.16);
+    color: #c7d2fe;
+}
+
+.tag-hash {
+    color: #818cf8;
+    font-weight: 700;
+    font-size: 12px;
+}
+
+.tag-name {
+    flex: 1;
+    font-size: 12px;
+    color: #cbd5e1;
+}
+
+.tag-badge {
+    font-size: 10.5px;
+    color: #94a3b8;
+    background: rgba(0, 0, 0, 0.25);
+    padding: 1px 5px;
+    border-radius: 8px;
+}
+
+/* Living Code Anchors */
+.code-anchor-group {
+    display: flex;
+    flex-direction: column;
+    margin-top: 4px;
+}
+
+.anchor-dir-label {
+    font-size: 11px;
+    font-family: monospace;
+    color: #64748b;
+    padding: 4px 6px;
+}
+
+.code-anchor-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 8px 5px 18px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.15s ease;
+}
+
+.code-anchor-item:hover {
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.code-anchor-item.active {
+    background: rgba(99, 102, 241, 0.16);
+    color: #c7d2fe;
+}
+
+.anchor-file-icon {
+    font-size: 12px;
+}
+
+.anchor-file-name {
+    flex: 1;
+    font-size: 11.5px;
+    font-family: monospace;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #cbd5e1;
+}
+
+.anchor-notes-count {
+    font-size: 10px;
+    color: #94a3b8;
+    background: rgba(0, 0, 0, 0.25);
+    padding: 1px 5px;
+    border-radius: 8px;
+}
+
+/* Settings */
+.settings-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 5px 8px;
+    font-size: 11px;
+}
+
+.settings-label {
+    color: #64748b;
+}
+
+.settings-value {
+    color: #cbd5e1;
+    font-weight: 500;
+    text-align: right;
+}

package/src/client/ui/component/notes-explorer/notes-explorer.html

@@ -0,0 +1,136 @@
+<div id="notes-explorer-root" class="notes-explorer-root">
+    <!-- Galaxy Header -->
+    <div class="notes-header">
+        <div class="notes-title-row">
+            <span class="notes-icon">📝</span>
+            <span id="notes-space-title" class="notes-title">Notes Space 1</span>
+            <div class="notes-header-actions">
+                <button id="btn-notes-new-topic" class="btn-notes-action" title="New Topic or Discussion">+ New</button>
+            </div>
+        </div>
+        <div class="notes-search-bar">
+            <input type="text" id="notes-filter-input" class="notes-filter-input" placeholder="Filter topics, #tags, or code..." />
+        </div>
+    </div>
+
+    <!-- Accordion Sections Container -->
+    <div class="notes-sections-container">
+        <!-- Section 1: Smart Lenses -->
+        <div class="notes-accordion-section open" data-section="lenses">
+            <div class="accordion-header" id="header-lenses">
+                <span class="accordion-arrow">▼</span>
+                <span class="accordion-title">🧭 SMART LENSES</span>
+            </div>
+            <div class="accordion-content" id="content-lenses">
+                <div class="lens-item active" data-lens="all">
+                    <span class="lens-icon">📥</span>
+                    <span class="lens-label">All Activity</span>
+                    <span class="lens-count">18</span>
+                </div>
+                <div class="lens-item" data-lens="issues">
+                    <span class="lens-icon">🐛</span>
+                    <span class="lens-label">Issues &amp; Tasks</span>
+                    <span class="lens-count">4</span>
+                </div>
+                <div class="lens-item" data-lens="discussions">
+                    <span class="lens-icon">💡</span>
+                    <span class="lens-label">Discussions &amp; RFCs</span>
+                    <span class="lens-count">9</span>
+                </div>
+                <div class="lens-item" data-lens="anchors">
+                    <span class="lens-icon">📎</span>
+                    <span class="lens-label">Living Code Anchors</span>
+                    <span class="lens-count">5</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Section 2: Tags & Topics -->
+        <div class="notes-accordion-section open" data-section="tags">
+            <div class="accordion-header" id="header-tags">
+                <span class="accordion-arrow">▼</span>
+                <span class="accordion-title">🏷️ TAGS &amp; TOPICS</span>
+                <button id="btn-notes-add-tag" class="btn-section-mini" title="Add Tag">+</button>
+            </div>
+            <div class="accordion-content" id="content-tags">
+                <div class="tag-pill-item" data-tag="architecture">
+                    <span class="tag-hash">#</span>
+                    <span class="tag-name">architecture</span>
+                    <span class="tag-badge">6</span>
+                </div>
+                <div class="tag-pill-item" data-tag="bug">
+                    <span class="tag-hash">#</span>
+                    <span class="tag-name">bug</span>
+                    <span class="tag-badge">4</span>
+                </div>
+                <div class="tag-pill-item" data-tag="frontend-ui">
+                    <span class="tag-hash">#</span>
+                    <span class="tag-name">frontend-ui</span>
+                    <span class="tag-badge">12</span>
+                </div>
+                <div class="tag-pill-item" data-tag="v1-mvp">
+                    <span class="tag-hash">#</span>
+                    <span class="tag-name">v1-mvp</span>
+                    <span class="tag-badge">8</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Section 3: Living Code Anchors -->
+        <div class="notes-accordion-section open" data-section="anchors">
+            <div class="accordion-header" id="header-anchors">
+                <span class="accordion-arrow">▼</span>
+                <span class="accordion-title">🌲 LIVING CODE ANCHORS</span>
+            </div>
+            <div class="accordion-content" id="content-anchors">
+                <div class="code-anchor-group">
+                    <div class="anchor-dir-label">📁 src/client/ui/shell/</div>
+                    <div class="code-anchor-item active" data-file="src/client/ui/shell/space-gib-shell-service.mts" data-line="1080">
+                        <span class="anchor-file-icon">📄</span>
+                        <span class="anchor-file-name" title="space-gib-shell-service.mts">space-gib-shell-service.mts</span>
+                        <span class="anchor-notes-count">3</span>
+                    </div>
+                    <div class="code-anchor-item" data-file="src/client/ui/shell/cosmic-big-bang.mts" data-line="335">
+                        <span class="anchor-file-icon">📄</span>
+                        <span class="anchor-file-name" title="cosmic-big-bang.mts">cosmic-big-bang.mts</span>
+                        <span class="anchor-notes-count">1</span>
+                    </div>
+                </div>
+                <div class="code-anchor-group">
+                    <div class="anchor-dir-label">📁 libs/core-gib/</div>
+                    <div class="code-anchor-item" data-file="libs/core-gib/src/witness/space/space-helper.mts" data-line="1263">
+                        <span class="anchor-file-icon">📄</span>
+                        <span class="anchor-file-name" title="space-helper.mts">space-helper.mts</span>
+                        <span class="anchor-notes-count">1</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Section 4: Galaxy Settings -->
+        <div class="notes-accordion-section" data-section="settings">
+            <div class="accordion-header" id="header-settings">
+                <span class="accordion-arrow">▶</span>
+                <span class="accordion-title">⚙️ GALAXY SETTINGS</span>
+            </div>
+            <div class="accordion-content hidden" id="content-settings">
+                <div class="settings-row">
+                    <span class="settings-label">Galaxy Type:</span>
+                    <span class="settings-value">Metatext &amp; Notes</span>
+                </div>
+                <div class="settings-row">
+                    <span class="settings-label">Space Topology:</span>
+                    <span class="settings-value">Single Continuous Timeline</span>
+                </div>
+                <div class="settings-row">
+                    <span class="settings-label">Encryption:</span>
+                    <span class="settings-value">None (Public in Cosmos)</span>
+                </div>
+                <div class="settings-row">
+                    <span class="settings-label">Living Soft Links:</span>
+                    <span class="settings-value">Inverted space-qualified</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,240 @@
+import thisCss from "./notes-explorer.css";
+import thisHtml from "./notes-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 { 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 NOTES_EXPLORER_COMPONENT_NAME = 'space-gib-notes-explorer';
+
+/**
+ * Metadata factory for space-gib-notes-explorer Web Component.
+ */
+export class NotesExplorerComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[${NotesExplorerComponentMeta.name}]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${NOTES_EXPLORER_COMPONENT_NAME}$`);
+    componentName = NOTES_EXPLORER_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, NotesExplorerComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const component = document.createElement(this.componentName) as NotesExplorerComponentInstance;
+        await component.initialize({
+            ibGibAddr: ibGibAddr || ROOT_ADDR,
+            meta: this,
+            html: thisHtml,
+            css: [thisCss],
+        });
+        return component;
+    }
+}
+
+/**
+ * Elements inside Shadow Root.
+ */
+export interface NotesExplorerElements extends ElementsBase {
+    rootEl: HTMLDivElement;
+    spaceTitleEl: HTMLSpanElement;
+    btnNewTopicEl: HTMLButtonElement;
+    filterInputEl: HTMLInputElement;
+    btnAddTagEl: HTMLButtonElement;
+    contentEl: HTMLDivElement;
+}
+
+/**
+ * Notes Explorer Left Panel Accordion Component Instance.
+ */
+export class NotesExplorerComponentInstance
+    extends IbGibDynamicComponentInstanceBase<IbGib_V1, NotesExplorerElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, NotesExplorerElements> {
+
+    protected lc: string = `[${NotesExplorerComponentInstance.name}]`;
+
+    get el(): NotesExplorerElements {
+        if (!this.elements) {
+            throw new Error(`elements is not defined in ${this.lc}`);
+        }
+        return this.elements;
+    }
+
+    override async created(): Promise<void> {
+        const shadow = this.shadowRoot!;
+        this.elements = {
+            rootEl: shadow.getElementById('notes-explorer-root') as HTMLDivElement,
+            spaceTitleEl: shadow.getElementById('notes-space-title') as HTMLSpanElement,
+            btnNewTopicEl: shadow.getElementById('btn-notes-new-topic') as HTMLButtonElement,
+            filterInputEl: shadow.getElementById('notes-filter-input') as HTMLInputElement,
+            btnAddTagEl: shadow.getElementById('btn-notes-add-tag') as HTMLButtonElement,
+            contentEl: shadow.getElementById('notes-explorer-root') as HTMLDivElement,
+        };
+
+        this.bindEvents();
+    }
+
+    override async disconnected(): Promise<void> {
+        // Lifecycle teardown if required
+    }
+
+    public setTitle(title: string): void {
+        if (this.elements?.spaceTitleEl) {
+            this.elements.spaceTitleEl.textContent = title || 'Notes Space 1';
+        }
+    }
+
+    private bindEvents(): void {
+        const shadow = this.shadowRoot!;
+
+        // Accordion headers toggle
+        shadow.querySelectorAll('.accordion-header').forEach(header => {
+            header.addEventListener('click', (e) => {
+                // Ignore if clicked on a mini button inside header
+                if ((e.target as HTMLElement).tagName.toLowerCase() === 'button') return;
+
+                const section = header.closest('.notes-accordion-section');
+                const content = section?.querySelector('.accordion-content');
+                const arrow = header.querySelector('.accordion-arrow');
+
+                if (content) {
+                    const isHidden = content.classList.toggle('hidden');
+                    if (arrow) {
+                        arrow.textContent = isHidden ? '▶' : '▼';
+                    }
+                }
+            });
+        });
+
+        // Smart Lenses selection
+        shadow.querySelectorAll('.lens-item').forEach(item => {
+            item.addEventListener('click', () => {
+                shadow.querySelectorAll('.lens-item').forEach(l => l.classList.remove('active'));
+                item.classList.add('active');
+                const lens = item.getAttribute('data-lens');
+
+                this.dispatchEvent(new CustomEvent('space-gib-lens-selected', {
+                    detail: { lens },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+        });
+
+        // Tag selection
+        shadow.querySelectorAll('.tag-pill-item').forEach(pill => {
+            pill.addEventListener('click', () => {
+                shadow.querySelectorAll('.tag-pill-item').forEach(t => t.classList.remove('active'));
+                pill.classList.add('active');
+                const tag = pill.getAttribute('data-tag');
+
+                this.dispatchEvent(new CustomEvent('space-gib-notes-tag-selected', {
+                    detail: { tag },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+        });
+
+        // Living Code Anchors selection
+        shadow.querySelectorAll('.code-anchor-item').forEach(anchor => {
+            anchor.addEventListener('click', () => {
+                shadow.querySelectorAll('.code-anchor-item').forEach(a => a.classList.remove('active'));
+                anchor.classList.add('active');
+                const file = anchor.getAttribute('data-file');
+                const line = anchor.getAttribute('data-line');
+
+                this.dispatchEvent(new CustomEvent('space-gib-note-selected', {
+                    detail: { file, line: Number(line) || 1 },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+        });
+
+        // New Topic button
+        this.el.btnNewTopicEl?.addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('space-gib-new-note-requested', {
+                bubbles: true,
+                composed: true,
+            }));
+        });
+
+        // Add Tag button
+        this.el.btnAddTagEl?.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            const newTag = await promptForText({
+                title: 'Add Project Tag',
+                msg: 'Enter tag name (e.g. p0-blocker or security):',
+            });
+            if (newTag) {
+                this.addTagPill(newTag);
+            }
+        });
+
+        // Filter search input
+        this.el.filterInputEl?.addEventListener('input', () => {
+            const query = (this.el.filterInputEl.value || '').toLowerCase().trim();
+            this.filterItems(query);
+        });
+    }
+
+    private addTagPill(tagName: string): void {
+        const shadow = this.shadowRoot!;
+        const cleanTag = tagName.replace(/^#/, '').trim();
+        const contentTags = shadow.getElementById('content-tags');
+        if (!contentTags || !cleanTag) { return; }
+
+        const pill = document.createElement('div');
+        pill.className = 'tag-pill-item active';
+        pill.setAttribute('data-tag', cleanTag);
+        pill.innerHTML = `
+            <span class="tag-hash">#</span>
+            <span class="tag-name">${cleanTag}</span>
+            <span class="tag-badge">1</span>
+        `;
+        pill.addEventListener('click', () => {
+            shadow.querySelectorAll('.tag-pill-item').forEach(t => t.classList.remove('active'));
+            pill.classList.add('active');
+            this.dispatchEvent(new CustomEvent('space-gib-notes-tag-selected', {
+                detail: { tag: cleanTag },
+                bubbles: true,
+                composed: true,
+            }));
+        });
+        contentTags.appendChild(pill);
+    }
+
+    private filterItems(query: string): void {
+        const shadow = this.shadowRoot!;
+
+        // Filter tags
+        shadow.querySelectorAll('.tag-pill-item').forEach((el: any) => {
+            const name = (el.querySelector('.tag-name')?.textContent || '').toLowerCase();
+            el.style.display = !query || name.includes(query) ? 'flex' : 'none';
+        });
+
+        // Filter code anchors
+        shadow.querySelectorAll('.code-anchor-item').forEach((el: any) => {
+            const name = (el.querySelector('.anchor-file-name')?.textContent || '').toLowerCase();
+            el.style.display = !query || name.includes(query) ? 'flex' : 'none';
+        });
+    }
+}

package/src/client/ui/component/notes-inspector/index.mts

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