templates/views/apps.html

<div style="flex:1;overflow-y:auto;padding:var(--sp-4);-webkit-overflow-scrolling:touch">
    <h2 style="font-size:18px;font-weight:600;margin-bottom:var(--sp-4)"><i class="fa-solid fa-plug" style="color:var(--accent)"></i> Connected Apps</h2>

    <div style="background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-4);display:flex;align-items:center;gap:var(--sp-4)">
        <div style="width:44px;height:44px;background:rgba(255,255,255,0.06);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0"><i class="fa-brands fa-github"></i></div>
        <div style="flex:1;min-width:0">
            <h3 style="font-size:15px;font-weight:600;margin-bottom:2px">GitHub</h3>
            <p style="font-size:12px;color:var(--text-3);margin:0">Import your repositories</p>
        </div>
        <div id="github-auth-status" style="flex-shrink:0">
            <button class="ed-btn primary" onclick="connectGithub()" style="min-height:var(--touch-min);white-space:nowrap">Connect</button>
        </div>
    </div>

    <div id="github-repos-section" style="display:none;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4)">
        <h3 style="font-size:14px;font-weight:600;margin-bottom:var(--sp-3)"><i class="fa-solid fa-code-branch"></i> Repositories</h3>
        <div id="github-repos-list" style="display:grid;gap:var(--sp-3)"></div>
    </div>

    <div id="import-loading-overlay" style="display:none;position:fixed;inset:0;background:var(--scrim);z-index:9999;justify-content:center;align-items:center;flex-direction:column;backdrop-filter:blur(4px)" role="alert">
        <i class="fa-solid fa-circle-notch fa-spin" style="font-size:40px;color:var(--accent);margin-bottom:var(--sp-4)"></i>
        <h2 style="color:var(--text-1);font-size:16px">Importing...</h2>
        <p style="color:var(--text-3);font-size:13px;margin-top:var(--sp-1)">Cloning files into workspace</p>
    </div>
</div>