bincio-activity/site/src/pages/index.astro

---
import Base from '../layouts/Base.astro';
import ActivityFeed from '../components/ActivityFeed.svelte';
import { readShardHandles, isInstancePrivate } from '../lib/manifest';

const base        = import.meta.env.BASE_URL;
const activityUrl = import.meta.env.PUBLIC_ACTIVITY_URL ?? '';
const wikiUrl     = import.meta.env.PUBLIC_WIKI_URL     ?? '';

const shards       = readShardHandles();
const isSingleUser = shards.length === 1 && !isInstancePrivate();
const singleHandle = isSingleUser ? shards[0].handle : null;
---

{activityUrl ? (
  <!-- ── Hub mode: bincio.org — login form / app selector ─────────────── -->
  <Base title="Bincio" public={true}>
    <div class="max-w-sm mx-auto mt-16 px-4"
         id="hub-root"
         data-activity-url={activityUrl}
         data-wiki-url={wikiUrl}
         style="visibility:hidden">

      <!-- Login (shown when not authenticated) -->
      <div id="hub-login">
        <p class="text-center text-zinc-600 text-sm italic mb-8 leading-relaxed">
          mangia<br/>bevi<br/>stai calmo<br/>non strappare
        </p>
        <h1 class="text-2xl font-bold text-white mb-6 text-center">Bincio</h1>
        <form id="login-form" class="space-y-4">
          <div>
            <label class="block text-sm text-zinc-400 mb-1" for="handle">Handle</label>
            <input id="handle" name="handle" type="text" autocomplete="username"
              class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white placeholder-zinc-500 focus:outline-none focus:border-[--accent]"
              placeholder="your handle" required />
          </div>
          <div>
            <label class="block text-sm text-zinc-400 mb-1" for="password">Password</label>
            <input id="password" name="password" type="password" autocomplete="current-password"
              class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white focus:outline-none focus:border-[--accent]"
              required />
          </div>
          <p id="login-error" class="text-red-400 text-sm hidden"></p>
          <button type="submit"
            class="w-full py-2 rounded-lg bg-[--accent] hover:opacity-90 text-white font-medium transition-opacity">
            Sign in
          </button>
        </form>
        <p class="text-center text-zinc-500 text-sm mt-6">
          <a href="/reset-password/" class="hover:text-zinc-400 transition-colors">Forgot password?</a>
        </p>
      </div>

      <!-- App selector (shown when authenticated) -->
      <div id="hub-apps" style="display:none">
        <p class="text-center text-zinc-600 text-sm italic mb-8 leading-relaxed">
          mangia<br/>bevi<br/>stai calmo<br/>non strappare
        </p>
        <p id="hub-greeting" class="text-center text-zinc-400 text-sm mb-6"></p>
        <div id="hub-cards" class="space-y-3"></div>
        <p class="text-center mt-8">
          <button id="hub-logout"
            class="text-xs text-zinc-600 hover:text-zinc-400 transition-colors">
            Log out
          </button>
        </p>
      </div>

    </div>
  </Base>
) : isSingleUser ? (
  <!-- Single-user: redirect / → /u/{handle}/ -->
  <meta http-equiv="refresh" content={`0;url=${base}u/${singleHandle}/`} />
  <script define:vars={{ base, singleHandle }}>
    window.location.replace(base + 'u/' + singleHandle + '/');
  </script>
) : (
  <!-- Multi-user activity feed -->
  <Base title="BincioActivity — Feed">
    <h1 class="text-2xl font-bold text-white mb-6">Feed</h1>
    <ActivityFeed {base} client:only="svelte" />
  </Base>
)}

<script>
  const root        = document.getElementById('hub-root') as HTMLElement | null;
  if (!root) {
    // Not in hub mode — nothing to do.
  } else {
    const activityUrl = root.dataset.activityUrl ?? '';
    const wikiUrl     = root.dataset.wikiUrl     ?? '';

    const loginDiv  = document.getElementById('hub-login')  as HTMLElement;
    const appsDiv   = document.getElementById('hub-apps')   as HTMLElement;
    const greeting  = document.getElementById('hub-greeting') as HTMLElement;
    const cardsDiv  = document.getElementById('hub-cards')  as HTMLElement;
    const form      = document.getElementById('login-form') as HTMLFormElement;
    const errEl     = document.getElementById('login-error') as HTMLElement;

    function appCard(label: string, sub: string, href: string): HTMLAnchorElement {
      const a = document.createElement('a');
      a.href = href;
      a.className = 'block rounded-xl bg-zinc-900 border border-zinc-800 px-5 py-4 hover:border-zinc-600 transition-colors';
      a.innerHTML = `
        <p class="font-semibold text-white">${label}</p>
        <p class="text-xs text-zinc-500 mt-0.5">${sub}</p>
      `;
      return a;
    }

    function showApps(user: { handle: string; display_name: string; activity_access: boolean; wiki_access: boolean }) {
      loginDiv.style.display = 'none';
      appsDiv.style.display  = '';
      greeting.textContent   = `Ciao, ${user.display_name || user.handle}.`;
      cardsDiv.innerHTML     = '';
      if (user.activity_access && activityUrl) {
        // If activityUrl is the same origin (dev --hub mode), go to the user page
        // directly so we don't loop back to the hub root.
        const activityHref = activityUrl === window.location.origin
          ? `${activityUrl}/u/${user.handle}/`
          : activityUrl;
        cardsDiv.appendChild(appCard('BincioActivity', 'Tracks, strade e numeri', activityHref));
      }
      if (user.wiki_access && wikiUrl)
        cardsDiv.appendChild(appCard('BincioWiki', 'La memoria collettiva del gruppo', wikiUrl));
    }

    // Check if already authenticated
    fetch('/api/me', { credentials: 'include' })
      .then(async r => {
        root.style.visibility = 'visible';
        if (r.ok) showApps(await r.json());
        // else: show login form (already visible)
      })
      .catch(() => { root.style.visibility = 'visible'; });

    // Login form submit
    form?.addEventListener('submit', async e => {
      e.preventDefault();
      const handle   = (form.querySelector('#handle')   as HTMLInputElement).value.trim();
      const password = (form.querySelector('#password') as HTMLInputElement).value;
      errEl.classList.add('hidden');

      try {
        const r = await fetch('/api/auth/login', {
          method: 'POST',
          credentials: 'include',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ handle, password }),
        });
        if (!r.ok) {
          const d = await r.json().catch(() => ({}));
          errEl.textContent = d.detail ?? 'Invalid credentials';
          errEl.classList.remove('hidden');
          return;
        }
        showApps(await r.json());
      } catch {
        errEl.textContent = 'Could not reach server';
        errEl.classList.remove('hidden');
      }
    });

    // Logout
    document.getElementById('hub-logout')?.addEventListener('click', async () => {
      try { await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }); } catch (_) {}
      appsDiv.style.display = 'none';
      loginDiv.style.display = '';
      (form.querySelector('#handle') as HTMLInputElement).value = '';
      (form.querySelector('#password') as HTMLInputElement).value = '';
    });
  }
</script>