Feat: Add Sune repo sync UI to left sidebar

Co-authored-by: gemini-3-flash-preview <noreply@google.com>
This commit is contained in:
2026-08-31 17:24:51 -07:00
parent c9663c037b
commit 0b3f97246b

View File

@@ -1,6 +1,12 @@
<div id="sidebarOverlayLeft" class="fixed inset-0 z-40 bg-black/20 hidden" @click="document.getElementById('sidebarLeft').classList.add('-translate-x-full');$el.classList.add('hidden');document.getElementById('sidebarRight').classList.add('translate-x-full');document.getElementById('sidebarOverlayRight').classList.add('hidden');hideThreadPopover();hideSunePopover()"></div> <div id="sidebarOverlayLeft" class="fixed inset-0 z-40 bg-black/20 hidden" @click="document.getElementById('sidebarLeft').classList.add('-translate-x-full');$el.classList.add('hidden');document.getElementById('sidebarRight').classList.add('translate-x-full');document.getElementById('sidebarOverlayRight').classList.add('hidden');hideThreadPopover();hideSunePopover()"></div>
<aside id="sidebarLeft" class="fixed inset-y-0 left-0 z-50 w-72 max-w-[85vw] bg-white border-r border-gray-200 shadow-xl transform -translate-x-full transition-transform duration-200 ease-out flex flex-col"> <aside id="sidebarLeft" class="fixed inset-y-0 left-0 z-50 w-72 max-w-[85vw] bg-white border-r border-gray-200 shadow-xl transform -translate-x-full transition-transform duration-200 ease-out flex flex-col">
<div class="p-3 border-b flex items-center gap-2"><button id="newSuneBtn" class="px-3 py-2 rounded-xl bg-black text-white text-sm hover:bg-black/90">New sune</button><span class="text-xs text-gray-500">Click name to equip</span></div> <div class="p-2 border-b flex flex-col gap-2">
<input id="suneRepoInput" type="text" placeholder="gh://owner/sunes" class="w-full h-9 rounded-lg border-0 bg-gray-100 px-3 text-xs font-mono focus:ring-2 focus:ring-black focus:bg-white"/>
<div class="flex items-center justify-between gap-2">
<button id="newSuneBtn" class="px-3 py-1.5 rounded-lg bg-black text-white text-[10px] font-bold uppercase tracking-wider hover:bg-black/90 transition">New Sune</button>
<button id="suneSyncBtn" class="px-3 py-1.5 rounded-lg bg-gray-100 text-gray-900 text-[10px] font-bold uppercase tracking-wider hover:bg-gray-200 transition flex items-center gap-1"><i data-lucide="refresh-cw" class="h-3 w-3"></i><span>Sync</span></button>
</div>
</div>
<div id="suneList" class="flex-1 overflow-y-auto divide-y"></div> <div id="suneList" class="flex-1 overflow-y-auto divide-y"></div>
<div class="p-3 border-t relative flex items-center gap-2"> <div class="p-3 border-t relative flex items-center gap-2">
<button id="userMenuBtn" class="flex-1 flex items-center justify-between px-3 py-2 rounded-xl bg-gray-100 hover:bg-gray-200 active:scale-[.99] transition" @click.stop="document.getElementById('userMenu').classList.toggle('hidden')"><span class="flex items-center gap-2"><span id="userMenuAvatar" class="h-6 w-6 rounded-full bg-gray-900 text-white flex items-center justify-center overflow-hidden shrink-0">👤</span><span class="text-sm">User</span></span><i data-lucide="chevron-down" class="h-4 w-4"></i></button> <button id="userMenuBtn" class="flex-1 flex items-center justify-between px-3 py-2 rounded-xl bg-gray-100 hover:bg-gray-200 active:scale-[.99] transition" @click.stop="document.getElementById('userMenu').classList.toggle('hidden')"><span class="flex items-center gap-2"><span id="userMenuAvatar" class="h-6 w-6 rounded-full bg-gray-900 text-white flex items-center justify-center overflow-hidden shrink-0">👤</span><span class="text-sm">User</span></span><i data-lucide="chevron-down" class="h-4 w-4"></i></button>