vs-p/src/panels/views/BaseView.ts

// src/panels/views/BaseView.ts
import * as vscode from 'vscode';

export abstract class BaseView {
    protected extensionUri: vscode.Uri;

    constructor(extensionUri: vscode.Uri) {
        this.extensionUri = extensionUri;
    }

    abstract render(data?: any): string;
    
    protected getStyles(): string {
        return `
        <style>
            body {
                font-family: var(--vscode-font-family);
                padding: 20px;
                background: var(--vscode-editor-background);
                color: var(--vscode-editor-foreground);
                margin: 0;
            }
            .table { 
                width: 100%; 
                border-collapse: collapse;
                margin-top: 20px;
            }
            .table th, .table td { 
                padding: 12px; 
                text-align: left; 
                border-bottom: 1px solid var(--vscode-panel-border); 
            }
            .table th { 
                background: var(--vscode-panel-background); 
                font-weight: bold;
            }
            .clickable { 
                cursor: pointer; 
                color: var(--vscode-textLink-foreground); 
            }
            .clickable:hover { 
                text-decoration: underline; 
            }
            .editable { 
                border: 1px dashed transparent; 
                padding: 2px 4px; 
                border-radius: 2px;
                cursor: pointer;
            }
            .editable:hover { 
                border-color: var(--vscode-input-border);
                background: var(--vscode-input-background);
            }
            .btn-new { 
                background: var(--vscode-button-background); 
                color: var(--vscode-button-foreground); 
                padding: 8px 16px; 
                border: none; 
                border-radius: 4px;
                cursor: pointer;
            }
            .btn-new:hover {
                background: var(--vscode-button-hoverBackground);
            }
            .btn-delete {
                background: var(--vscode-inputValidation-errorBackground);
                color: white;
                padding: 4px 8px;
                border: none;
                border-radius: 2px;
                cursor: pointer;
            }
            .back-btn { 
                background: var(--vscode-button-secondaryBackground); 
                color: var(--vscode-button-secondaryForeground); 
                padding: 6px 12px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }
            .back-btn:hover {
                background: var(--vscode-button-secondaryHoverBackground);
            }
            .header { 
                display: flex; 
                justify-content: space-between; 
                align-items: center; 
                margin-bottom: 20px;
                border-bottom: 1px solid var(--vscode-panel-border);
                padding-bottom: 15px;
            }
            h2 {
                color: var(--vscode-titleBar-activeForeground);
                margin-bottom: 10px;
            }
            .config-editor { 
                margin-top: 30px; 
                border: 1px solid var(--vscode-panel-border);
                border-radius: 4px;
                padding: 20px;
                background: var(--vscode-panel-background);
            }
            textarea { 
                width: 100%; 
                height: 300px; 
                font-family: 'Courier New', monospace;
                background: var(--vscode-input-background);
                color: var(--vscode-input-foreground);
                border: 1px solid var(--vscode-input-border);
                padding: 10px;
                border-radius: 4px;
                resize: vertical;
            }
            .btn-primary {
                background: var(--vscode-button-background);
                color: var(--vscode-button-foreground);
                padding: 8px 16px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                margin-right: 10px;
            }
                    .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .modal-dialog {
            background: var(--vscode-editor-background);
            border: 1px solid var(--vscode-panel-border);
            border-radius: 4px;
            padding: 20px;
            min-width: 300px;
            max-width: 500px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }
        
        .modal-title {
            margin-bottom: 15px;
            font-weight: bold;
            color: var(--vscode-editor-foreground);
        }
        
        .modal-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        
        .modal-btn {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .modal-btn-primary {
            background: var(--vscode-button-background);
            color: var(--vscode-button-foreground);
        }
        
        .modal-btn-secondary {
            background: var(--vscode-button-secondaryBackground);
            color: var(--vscode-button-secondaryForeground);
        }
        </style>
        `;
    }
}