From e10552d0768676bea6933f31b7310f2c783dde7c Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Tue, 18 Nov 2025 21:22:46 -0800
Subject: [PATCH] Feat: Extract sidebars

---
 src/parts/sidebars.html | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 src/parts/sidebars.html

diff --git a/src/parts/sidebars.html b/src/parts/sidebars.html
new file mode 100644
index 0000000..fe6c785
--- /dev/null
+++ b/src/parts/sidebars.html
@@ -0,0 +1,21 @@
+<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">
+  <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 id="suneList" class="flex-1 overflow-y-auto divide-y"></div>
+  <div class="p-3 border-t relative">
+    <button id="userMenuBtn" class="w-full 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 class="h-6 w-6 rounded-full bg-gray-900 text-white flex items-center justify-center">👤</span><span class="text-sm">Account & Backup</span></span><i data-lucide="chevron-down" class="h-4 w-4"></i></button>
+    <div id="userMenu" class="absolute left-3 right-3 bottom-16 translate-y-2 rounded-xl border border-gray-200 bg-white shadow-lg hidden overflow-hidden">
+      <button id="accountSettingsOption" class="menu-item"><i data-lucide="settings" class="h-4 w-4"></i><span>Settings</span></button>
+      <button id="sunesImportOption" class="menu-item">Import sunes (.sune)</button>
+      <button id="sunesExportOption" class="menu-item">Export sunes (.sune)</button>
+      <button id="threadsImportOption" class="menu-item">Import threads (.json)</button>
+      <button id="threadsExportOption" class="menu-item">Export threads (.json)</button>
+    </div>
+    <input id="importInput" type="file" accept="application/json,.json,.sune" class="hidden"/>
+  </div>
+</aside>
+<div id="sidebarOverlayRight" class="fixed inset-0 z-40 bg-black/20 hidden" @click="$el.classList.add('hidden');document.getElementById('sidebarRight').classList.add('translate-x-full')"></div>
+<aside id="sidebarRight" class="fixed inset-y-0 right-0 z-50 w-80 max-w-[90vw] bg-white border-l border-gray-200 shadow-xl transform translate-x-full transition-transform duration-200 ease-out flex flex-col">
+  <div class="p-3 border-b text-sm font-medium flex items-center justify-between"><span>Threads</span><button id="closeThreads" class="p-1 rounded hover:bg-gray-100" aria-label="Close" @click="document.getElementById('sidebarOverlayRight').classList.add('hidden');document.getElementById('sidebarRight').classList.add('translate-x-full')"><svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
+  <div id="threadList" class="flex-1 overflow-y-auto divide-y"></div>
+</aside>