zlocalz/dist/tui/panes/inspector.js

ZLocalz - TUI Locale Guardian for Flutter ARB l10n/i18n validation and translation with AI-powered fixes

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.InspectorPane = void 0;
const blessed = __importStar(require("blessed"));
const events_1 = require("events");
const diff_view_1 = require("../components/diff-view");
const icu_view_1 = require("../components/icu-view");
const metadata_editor_1 = require("../components/metadata-editor");
class InspectorPane extends events_1.EventEmitter {
    container;
    tabBar;
    contentArea;
    currentTab = 'value';
    state;
    valueEditor;
    diffView;
    icuView;
    metadataEditor;
    constructor(parent, options) {
        super();
        this.container = blessed.box({
            parent,
            ...options,
            border: 'line',
            label: ' Inspector ',
            tags: true,
            style: {
                border: { fg: '#4a4a4a' },
                label: { fg: '#888888' }
            }
        });
        this.tabBar = blessed.box({
            parent: this.container,
            top: 0,
            left: 0,
            width: '100%-2',
            height: 3,
            style: {
                bg: '#2a2a2a'
            }
        });
        this.contentArea = blessed.box({
            parent: this.container,
            top: 3,
            left: 0,
            width: '100%-2',
            height: '100%-5'
        });
        this.createTabs();
        this.setupTabNavigation();
    }
    createTabs() {
        const tabNames = ['value', 'icu', 'diff', 'meta'];
        const tabLabels = {
            value: 'Value',
            icu: 'ICU',
            diff: 'Diff',
            meta: 'Meta'
        };
        let x = 1;
        for (const tab of tabNames) {
            const label = tabLabels[tab];
            const tabButton = blessed.box({
                parent: this.tabBar,
                content: ` ${label} `,
                left: x,
                top: 1,
                height: 1,
                shrink: true,
                style: {
                    fg: tab === this.currentTab ? 'white' : '#666666',
                    bg: tab === this.currentTab ? '#0066cc' : '#2a2a2a',
                    hover: {
                        fg: 'white',
                        bg: '#444444'
                    }
                },
                clickable: true
            });
            tabButton.on('click', () => this.switchTab(tab));
            x += label.length + 3;
        }
        this.createTabContents();
    }
    createTabContents() {
        this.valueEditor = blessed.textarea({
            parent: this.contentArea,
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            keys: true,
            mouse: true,
            inputOnFocus: false,
            style: {
                fg: 'white',
                bg: '#1e1e1e',
                focus: {
                    border: { fg: '#0066cc' }
                }
            },
            scrollbar: {
                ch: ' ',
                track: { bg: '#333333' },
                style: { inverse: true }
            }
        });
        this.valueEditor.on('submit', () => {
            const value = this.valueEditor.getValue();
            if (this.state?.currentKey) {
                this.emit('edit-value', {
                    key: this.state.currentKey,
                    value
                });
            }
        });
        this.diffView = new diff_view_1.DiffView(this.contentArea);
        this.icuView = new icu_view_1.ICUView(this.contentArea);
        this.metadataEditor = new metadata_editor_1.MetadataEditor(this.contentArea);
        this.metadataEditor.on('save', (metadata) => {
            if (this.state?.currentKey) {
                this.emit('edit-metadata', {
                    key: this.state.currentKey,
                    metadata
                });
            }
        });
        this.showTab('value');
    }
    setupTabNavigation() {
        this.container.key(['tab'], () => {
            const tabs = ['value', 'icu', 'diff', 'meta'];
            const currentIndex = tabs.indexOf(this.currentTab);
            const nextIndex = (currentIndex + 1) % tabs.length;
            this.switchTab(tabs[nextIndex]);
        });
        this.container.key(['S-tab'], () => {
            const tabs = ['value', 'icu', 'diff', 'meta'];
            const currentIndex = tabs.indexOf(this.currentTab);
            const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;
            this.switchTab(tabs[prevIndex]);
        });
    }
    switchTab(tab) {
        this.currentTab = tab;
        this.updateTabBar();
        this.showTab(tab);
        this.container.screen.render();
    }
    updateTabBar() {
        const children = this.tabBar.children;
        const tabs = ['value', 'icu', 'diff', 'meta'];
        children.forEach((child, index) => {
            if (index < tabs.length) {
                const isActive = tabs[index] === this.currentTab;
                child.style.fg = isActive ? 'white' : '#666666';
                child.style.bg = isActive ? '#0066cc' : '#2a2a2a';
            }
        });
    }
    showTab(tab) {
        this.valueEditor?.hide();
        this.diffView?.hide();
        this.icuView?.hide();
        this.metadataEditor?.hide();
        switch (tab) {
            case 'value':
                this.valueEditor?.show();
                break;
            case 'diff':
                this.diffView?.show();
                break;
            case 'icu':
                this.icuView?.show();
                break;
            case 'meta':
                this.metadataEditor?.show();
                break;
        }
    }
    update(state) {
        this.state = state;
        if (!state.currentKey || !state.currentLocale) {
            this.valueEditor?.setValue('Select a key to edit');
            return;
        }
        const targetFile = state.currentLocale === state.sourceFile?.locale
            ? state.sourceFile
            : state.targetFiles.get(state.currentLocale);
        if (!targetFile)
            return;
        const entry = targetFile.entries[state.currentKey];
        const sourceEntry = state.sourceFile?.entries[state.currentKey];
        if (entry) {
            this.valueEditor?.setValue(entry.value);
            if (this.diffView && sourceEntry) {
                this.diffView.setContent(sourceEntry.value, entry.value);
            }
            if (this.icuView && this.isICUMessage(entry.value)) {
                this.icuView.setContent(entry.value, sourceEntry?.value);
            }
            if (this.metadataEditor) {
                this.metadataEditor.setMetadata(entry.metadata || {});
            }
        }
        else if (sourceEntry) {
            this.valueEditor?.setValue('(missing - will be added)');
            if (this.diffView) {
                this.diffView.setContent(sourceEntry.value, '');
            }
        }
    }
    isICUMessage(value) {
        return value.includes('{') && (value.includes(', plural,') ||
            value.includes(', select,') ||
            value.includes(', selectordinal,'));
    }
    editValue() {
        this.switchTab('value');
        this.valueEditor?.focus();
        this.valueEditor?.readInput();
    }
    editMetadata() {
        this.switchTab('meta');
        this.metadataEditor?.focus();
    }
    focus() {
        this.container.focus();
        switch (this.currentTab) {
            case 'value':
                this.valueEditor?.focus();
                break;
            case 'meta':
                this.metadataEditor?.focus();
                break;
        }
    }
}
exports.InspectorPane = InspectorPane;
//# sourceMappingURL=inspector.js.map