hello-hive

<div class="text-center mb-10">
    <div class="inline-flex items-center gap-3 bg-zinc-900 rounded-3xl px-6 py-3">
        <span class="text-4xl">🌐</span>
        <div>
            <h1 class="text-3xl font-bold tracking-tight">Hello Hive</h1>
            <p class="text-emerald-400 text-sm">Running via Shim</p>
        </div>
    </div>
</div>

<div class="bg-zinc-900 rounded-3xl p-8">
    <h2 class="text-xl font-semibold mb-6 text-center">Sign In with Hive</h2>
    
    <input id="username" 
           type="text" 
           placeholder="yourusername"
           class="w-full bg-zinc-800 border border-zinc-700 rounded-2xl px-6 py-4 text-center text-lg focus:outline-none focus:border-emerald-500 mb-6">

    <button onclick="signIn()" 
            class="w-full bg-gradient-to-r from-emerald-500 to-cyan-500 text-black font-semibold py-4 rounded-2xl text-lg hover:brightness-110 transition">
        Sign In with Keychain
    </button>
</div>

<div id="accounts" class="mt-8"></div>

<div class="text-center text-zinc-500 text-xs mt-12">
    This demo uses LocalStorage + Hive Keychain through the shim
</div>

function renderAccounts() {
const container = document.getElementById('accounts');
if (signedIn.length === 0) {
container.innerHTML = <p class="text-center text-zinc-500 py-8">No accounts signed in yet</p>;
return;
}

container.innerHTML = signedIn.map(acc => `
    <div class="bg-zinc-900 rounded-2xl p-5 mb-3 flex items-center justify-between">
        <div class="flex items-center gap-3">
            <div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center">👤</div>
            <div>
                <div class="font-medium">@${acc.username}</div>
                <div class="text-xs text-zinc-500">${new Date(acc.timestamp).toLocaleDateString()}</div>
            </div>
        </div>
        <button onclick="removeAccount('${acc.username}')" 
                class="text-red-400 hover:text-red-500 text-sm px-3 py-1">Remove</button>
    </div>
`).join('');

}

async function signIn() {
const username = document.getElementById('username').value.trim();
if (!username) return alert("Please enter a username");

if (!window.hive_keychain) {
    return alert("Hive Keychain not available");
}

const message = `Sign in to Hello Hive at ${Date.now()}`;

window.hive_keychain.requestSignBuffer(
    username,
    message,
    "Posting",
    (response) => {
        if (response.success) {
            signedIn.unshift({
                username: username,
                timestamp: new Date().toISOString()
            });
            signedIn = signedIn.slice(0, 8); // keep last 8
            localStorage.setItem('hive_signed_in', JSON.stringify(signedIn));
            renderAccounts();
            alert(`✅ Welcome, @${username}!`);
        } else {
            alert("Sign in cancelled or failed.");
        }
    }
);

}

function removeAccount(username) {
signedIn = signedIn.filter(a => a.username !== username);
localStorage.setItem('hive_signed_in', JSON.stringify(signedIn));
renderAccounts();
}

// Init
window.addEventListener('load', () => {
renderAccounts();

// Optional: Show context from shim
window.addEventListener("message", (e) => {
    if (e.data.type === "hive-shim-context") {
        console.log("✅ App running inside hive-shim", e.data);
    }
});

});