Equicord/src/equicordplugins/vcNarratorCustom/styles.css

/* Troubleshooting section */
.vc-narrator-troubleshooting {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vc-narrator-divider {
    margin: 24px 0 12px;
}

.vc-narrator-title {
    margin-bottom: 4px;
}

.vc-narrator-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.vc-narrator-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vc-narrator-cache-text {
    margin: 0;
    opacity: 0.85;
    white-space: nowrap;
}

.vc-narrator-api-text {
    margin: 0;
    opacity: 0.9;
}

.vc-narrator-api-time {
    opacity: 0.75;
}

.vc-narrator-api-status-success {
    color: var(--text-positive);
}

.vc-narrator-api-status-error {
    color: var(--text-danger);
}

.vc-narrator-api-status-muted {
    color: var(--text-muted);
}

/* Voice select modal */
.vc-narrator-modal-title {
    flex-grow: 1;
}

.vc-narrator-preview-hint {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 12px;
    margin-bottom: 8px;
    text-align: center;
}

.vc-narrator-preview-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.vc-narrator-modal-footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

/* Settings about component */
.vc-narrator-author-note {
    padding: 10px 12px;
    background: var(--background-secondary-alt);
    border-radius: 8px;
    border: 1px solid var(--background-tertiary);
    border-left: 3px solid var(--brand-experiment);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.vc-narrator-author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    margin-top: 2px;
}

.vc-narrator-author-content {
    min-width: 0;
}

.vc-narrator-author-title {
    margin-bottom: 2px;
    font-weight: 600;
    font-size: 12px;
}

.vc-narrator-author-text {
    font-size: 12px;
    opacity: 0.85;
}

.vc-narrator-preview-section {
    padding: 12px 16px;
    background: var(--background-secondary-alt);
    border-radius: 8px;
    border: 1px solid var(--background-tertiary);
}

.vc-narrator-preview-title {
    margin-top: 0;
}

.vc-narrator-preview-subtitle {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 12px;
}

.vc-narrator-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
Fix VCNarratorCustom & TikTokTTS (#627) * Revamped and restored VCNarratorCustom with a new cloudflare worker api that's morre optimized for this plugin alone and unlikely to be shutdown hopefully * fixed some linting erros * Replaced <Forms.FormSection> with a React fragment <> * Changed from children={[...]} prop to nesting the children between opening and closing tags * Add Forms and UserStore imports to fakeNitro * cleaned up the UI and comments a bit * GIT CHANGES: Refactored: Extracted constants (VOICE_OPTIONS), string helpers (clean, formatText), and user map helpers from index.tsx to util.ts. Moved basic TTS cache logic to util.ts. New Features: LRU Cache Eviction: util.ts now implements voices_meta store (DB v2) to track file size/access time and auto-delete old entries when cache exceeds 100MB. Smoke Test: Created vcNarratorCustomSmokeTest.ts to verify API connectivity, helper logic, and browser storage (persistence/eviction). UI: Added Divider component between troubleshooting and main settings. * Removed redeined voicestatestore in favor oif an import from webpack * made the smoke test more comprehensikve with clear out put of expectations anmd success/failure. that way someone savvy can diagnose if them plugin fails without my assisstance if needed. index.tsx - only minor lint formatting changes * Changed tiktoktts plugin to use the new endpoint and switcfhed it from universal channel reads to a context menu o ption on messages. * removed smoke test from git files, will just keep a local copy * replace inline styles with classNameFactory 2026-01-21 13:12:42 -05:00			`/* Troubleshooting section */`
			`.vc-narrator-troubleshooting {`
			`display: flex;`
			`flex-direction: column;`
			`gap: 10px;`
			`}`

			`.vc-narrator-divider {`
			`margin: 24px 0 12px;`
			`}`

			`.vc-narrator-title {`
			`margin-bottom: 4px;`
			`}`

			`.vc-narrator-row {`
			`display: flex;`
			`align-items: center;`
			`gap: 12px;`
			`flex-wrap: wrap;`
			`}`

			`.vc-narrator-buttons {`
			`display: flex;`
			`align-items: center;`
			`gap: 8px;`
			`}`

			`.vc-narrator-cache-text {`
			`margin: 0;`
			`opacity: 0.85;`
			`white-space: nowrap;`
			`}`

			`.vc-narrator-api-text {`
			`margin: 0;`
			`opacity: 0.9;`
			`}`

			`.vc-narrator-api-time {`
			`opacity: 0.75;`
			`}`

			`.vc-narrator-api-status-success {`
			`color: var(--text-positive);`
			`}`

			`.vc-narrator-api-status-error {`
			`color: var(--text-danger);`
			`}`

			`.vc-narrator-api-status-muted {`
			`color: var(--text-muted);`
			`}`

			`/* Voice select modal */`
			`.vc-narrator-modal-title {`
			`flex-grow: 1;`
			`}`

			`.vc-narrator-preview-hint {`
			`font-size: 12px;`
			`opacity: 0.7;`
			`margin-top: 12px;`
			`margin-bottom: 8px;`
			`text-align: center;`
			`}`

			`.vc-narrator-preview-buttons {`
			`display: flex;`
			`gap: 8px;`
			`flex-wrap: wrap;`
			`justify-content: center;`
			`}`

			`.vc-narrator-modal-footer {`
			`display: flex;`
			`justify-content: center;`
			`gap: 8px;`
			`width: 100%;`
			`}`

			`/* Settings about component */`
			`.vc-narrator-author-note {`
			`padding: 10px 12px;`
			`background: var(--background-secondary-alt);`
			`border-radius: 8px;`
			`border: 1px solid var(--background-tertiary);`
			`border-left: 3px solid var(--brand-experiment);`
			`display: flex;`
			`gap: 10px;`
			`align-items: flex-start;`
			`margin-bottom: 16px;`
			`}`

			`.vc-narrator-author-avatar {`
			`width: 24px;`
			`height: 24px;`
			`border-radius: 999px;`
			`margin-top: 2px;`
			`}`

			`.vc-narrator-author-content {`
			`min-width: 0;`
			`}`

			`.vc-narrator-author-title {`
			`margin-bottom: 2px;`
			`font-weight: 600;`
			`font-size: 12px;`
			`}`

			`.vc-narrator-author-text {`
			`font-size: 12px;`
			`opacity: 0.85;`
			`}`

			`.vc-narrator-preview-section {`
			`padding: 12px 16px;`
			`background: var(--background-secondary-alt);`
			`border-radius: 8px;`
			`border: 1px solid var(--background-tertiary);`
			`}`

			`.vc-narrator-preview-title {`
			`margin-top: 0;`
			`}`

			`.vc-narrator-preview-subtitle {`
			`font-size: 12px;`
			`opacity: 0.7;`
			`margin-bottom: 12px;`
			`}`

			`.vc-narrator-preview-grid {`
			`display: flex;`
			`flex-wrap: wrap;`
			`gap: 6px;`
			`justify-content: center;`
			`}`