Function buildStatusPanelHtml

chat/components/ShareModals.js:272–329

* Build the shared status panel HTML for after-sharing and share control views * @param {Object} opts - {isPlaintext, apiKeyShared, apiKeyExpiresAt, isExpired, expiryDate, messageCount, shareUrl, previewHtml}

(opts)

    // Format API key expiry as relative time
    const keyExpiry = apiKeyExpiresAt ? formatKeyExpiry(apiKeyExpiresAt) : null;
    const statusText = isExpired ? 'Expired' : 'Active';
    const statusClass = isExpired ? 'text-amber-600 dark:text-amber-400' : 'text-status-success';

    const encryptionValue = isPlaintext
        ? '<span class="text-xs text-foreground">None</span>'
        : '<span class="text-[10px] px-1.5 py-0.5 rounded badge-status-success">Encrypted</span>';

    const apiKeyValue = apiKeyShared
        ? (keyExpiry
            ? (keyExpiry.isExpired
                ? '<span class="text-amber-600 dark:text-amber-400">Included (expired)</span>'
                : `<span class="text-xs text-foreground">Included (expires ${keyExpiry.text})</span>`)
            : '<span class="text-xs text-foreground">Included</span>')
        : '<span class="text-xs text-foreground">Not included</span>';

    return `
        <!-- Content section that grows -->
        <div class="flex-1">
            ${buildInfoRow('Sharing Status', `<span class="text-sm font-medium ${statusClass}">${statusText}</span>`)}
            ${buildInfoRow('Encrypted Sharing', encryptionValue)}
            ${buildInfoRow('Expires', `<span class="text-xs text-foreground">${expiryDate || 'Never'}</span>`)}
            ${buildInfoRow('Messages', `<span class="text-xs text-foreground">${messageCount || 0}</span>`)}
            ${buildInfoRow('Session API key', apiKeyValue, 'mb-4')}

            <!-- Share link box -->
            <div class="mb-4 rounded-lg border border-border/50 overflow-hidden">
                <div class="flex items-center gap-1.5 text-xs text-muted-foreground px-2.5 py-1.5 bg-muted/30 border-b border-border/30">
                    ${LINK_ICON_SMALL_SVG}
                    Share link
                </div>
                <div class="px-2.5 py-2 flex items-center gap-2">
                    <input type="text" readonly class="share-url-input flex-1 text-xs bg-transparent text-foreground/80 outline-none truncate" value="${shareUrl}">
                </div>
            </div>

            ${buildPreviewContainerHtml(previewHtml, 'Shared content preview')}
        </div>

        <!-- Bottom buttons (equally spaced) -->
        <div class="flex justify-between items-center mt-auto">
            <button id="done-btn" class="btn-ghost-hover px-4 py-1.5 text-sm rounded-md border border-border bg-background text-foreground transition-colors">
                Done
            </button>
            <button id="revoke-btn" class="btn-destructive-bright inline-flex items-center justify-center rounded-md bg-destructive px-4 py-1.5 text-sm font-medium text-destructive-foreground shadow-sm transition-all duration-200">
                Stop Sharing
            </button>
            <button id="copy-link-btn" class="btn-primary-bright px-4 py-1.5 text-sm rounded-md bg-blue-600 text-white transition-all duration-200 flex items-center gap-1.5">
                ${COPY_ICON_SVG}
                <span>Copy link</span>
            </button>
        </div>
    `;
}

/**
 * Build expired share panel with "Share Again" button
 */
function buildExpiredPanelHtml(opts) {