Method renderWelcomeStep

chat/components/WelcomePanel.js:932–1271

()

        this.turnstileBubble?.destroy();
        this.turnstileBubble = null;
        this.turnstileInitPromise = null;
    }

    renderWelcomeStep() {
        this.ensureValidAccessMode();
        const hasError = !!this.redeemError;
        const isPreviewMode = this.isPreviewMode();
        const controlsDisabled = this.isRedeeming;
        const inputPlaceholder = isPreviewMode ? 'Email address' : 'Invite code';
        const inputMaxLength = isPreviewMode ? 254 : 24;
        const inputValue = this.getCurrentAccessValue();
        const showPreviewHint = isPreviewMode && !hasError;
        const feedbackHtml = hasError
            ? (this.redeemError === FREE_ACCESS_UNAVAILABLE_HINT
                ? FREE_ACCESS_UNAVAILABLE_HINT_HTML
                : this.escapeHtml(this.redeemError))
            : (showPreviewHint ? FREE_ACCESS_EMAIL_HINT_HTML : '');
        const feedbackClass = hasError ? 'text-red-500' : 'text-muted-foreground';

        return `
            <div id="welcome-theme-toggle" class="theme-toggle-container" role="radiogroup" aria-label="Theme selection" data-theme="${themeManager.getPreference()}" style="position:fixed;top:12px;right:12px;z-index:9999">
                <div class="theme-toggle-indicator"></div>
                <button type="button" class="theme-toggle-btn" data-theme-option="light" aria-checked="${themeManager.getPreference() === 'light'}" title="Light">
                    <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1.5m0 15V21m9-9h-1.5M4.5 12H3m15.364-6.364-1.06 1.06M6.697 17.303l-1.06 1.06m0-12.728 1.06 1.06m9.607 9.607 1.06 1.06M12 8.25a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5z"></path>
                    </svg>
                </button>
                <button type="button" class="theme-toggle-btn" data-theme-option="dark" aria-checked="${themeManager.getPreference() === 'dark'}" title="Dark">
                    <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 12.79A9 9 0 0 1 11.21 3 7.5 7.5 0 1 0 21 12.79z"></path>
                    </svg>
                </button>
                <button type="button" class="theme-toggle-btn" data-theme-option="system" aria-checked="${themeManager.getPreference() === 'system'}" title="System">
                    <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 17v2h6v-2m2 0h.75A2.25 2.25 0 0 0 20 14.75V7.25A2.25 2.25 0 0 0 17.75 5H6.25A2.25 2.25 0 0 0 4 7.25v7.5A2.25 2.25 0 0 0 6.25 17H7.5"></path>
                    </svg>
                </button>
            </div>
            <div role="dialog" aria-modal="true" class="${MODAL_CLASSES}" style="padding:28px 28px 20px">
                <style>
                    /* Entrance animation matching app's subtle motion language */
                    @keyframes welcomeModalIn {
                        from { opacity: 0; transform: scale(calc(var(--welcome-modal-scale, 1) * 0.97)) translateY(6px); }
                        to { opacity: 1; transform: scale(var(--welcome-modal-scale, 1)) translateY(0); }
                    }
                    .welcome-modal-enter {
                        animation: welcomeModalIn 0.2s ease-out;
                    }
                    .welcome-modal-glass {
                        background: hsl(var(--color-background) / 0.72);
                        backdrop-filter: blur(20px) saturate(1.2);
                        -webkit-backdrop-filter: blur(20px) saturate(1.2);
                    }
                    #welcome-panel {
                        background: rgba(0,0,0,0.35) !important;
                        backdrop-filter: blur(4px) !important;
                        -webkit-backdrop-filter: blur(4px) !important;
                    }