botui/ui/suite/sources/accounts.html

<!-- Accounts Panel -->
<div class="accounts-panel">
    <div class="section-header">
        <h2>Connected Accounts</h2>
        <div class="header-actions">
            <button class="btn btn-primary" onclick="showAddAccountModal()">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
                Add Account
            </button>
        </div>
    </div>

    <div class="accounts-grid" id="accounts-list" hx-get="/api/sources/accounts/list" hx-trigger="load" hx-swap="innerHTML">
        <div class="loading-spinner">
            <div class="spinner"></div>
            <p>Loading accounts...</p>
        </div>
    </div>
</div>

<!-- Add Account Modal -->
<div id="add-account-modal" class="modal" style="display: none;">
    <div class="modal-backdrop" onclick="hideAddAccountModal()"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h3>Add Account</h3>
            <button class="modal-close" onclick="hideAddAccountModal()">&times;</button>
        </div>
        <div class="modal-body">
            <p class="modal-description">Connect an email or cloud storage account to enable LLM search and file operations.</p>

            <div class="provider-grid">
                <button class="provider-btn" onclick="connectAccount('google')">
                    <div class="provider-icon google">
                        <svg width="24" height="24" viewBox="0 0 24 24">
                            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                        </svg>
                    </div>
                    <span class="provider-name">Google</span>
                    <span class="provider-services">Gmail, Drive, Calendar</span>
                </button>

                <button class="provider-btn" onclick="connectAccount('microsoft')">
                    <div class="provider-icon microsoft">
                        <svg width="24" height="24" viewBox="0 0 24 24">
                            <rect x="1" y="1" width="10" height="10" fill="#F25022"/>
                            <rect x="13" y="1" width="10" height="10" fill="#7FBA00"/>
                            <rect x="1" y="13" width="10" height="10" fill="#00A4EF"/>
                            <rect x="13" y="13" width="10" height="10" fill="#FFB900"/>
                        </svg>
                    </div>
                    <span class="provider-name">Microsoft</span>
                    <span class="provider-services">Outlook, OneDrive, Calendar</span>
                </button>

                <button class="provider-btn" onclick="connectAccount('imap')">
                    <div class="provider-icon imap">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                            <polyline points="22,6 12,13 2,6"></polyline>
                        </svg>
                    </div>
                    <span class="provider-name">IMAP</span>
                    <span class="provider-services">Custom email server</span>
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.accounts-panel {
    padding: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.account-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: all 0.2s;
}

.account-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.account-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.account-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
}

.account-icon.google { background: #f1f3f4; }
.account-icon.microsoft { background: #f3f3f3; }
.account-icon.imap { background: var(--bg-tertiary); color: var(--text-secondary); }

.account-info {
    flex: 1;
    min-width: 0;
}

.account-email {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-provider {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.account-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.account-status.active {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.account-status.syncing {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.account-status.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.account-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 0.5rem;
}

.stat-item {
    flex: 1;
    text-align: center;
}

.stat-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.account-actions {
    display: flex;
    gap: 0.5rem;
}

.account-actions button {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.account-actions button:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.account-actions button.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: #ef4444;
}

/* Modal styles */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    background: var(--bg-primary);
    border-radius: 1rem;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
}

.modal-description {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.provider-grid {
    display: grid;
    gap: 1rem;
}

.provider-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.provider-btn:hover {
    border-color: var(--primary);
    background: var(--bg-tertiary);
}

.provider-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.provider-name {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}

.provider-services {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: block;
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.empty-state svg {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
</style>

<script>
function showAddAccountModal() {
    document.getElementById('add-account-modal').style.display = 'flex';
}

function hideAddAccountModal() {
    document.getElementById('add-account-modal').style.display = 'none';
}

function connectAccount(provider) {
    hideAddAccountModal();

    if (provider === 'google') {
        window.location.href = '/api/oauth/google/authorize';
    } else if (provider === 'microsoft') {
        window.location.href = '/api/oauth/microsoft/authorize';
    } else if (provider === 'imap') {
        showImapConfigModal();
    }
}

function syncAccount(accountId) {
    htmx.ajax('POST', `/api/sources/accounts/${accountId}/sync`, {
        target: '#accounts-list',
        swap: 'innerHTML'
    });
}

function removeAccount(accountId) {
    if (confirm('Are you sure you want to remove this account? All synced data will be deleted.')) {
        htmx.ajax('DELETE', `/api/sources/accounts/${accountId}`, {
            target: '#accounts-list',
            swap: 'innerHTML'
        });
    }
}
</script>