kryten-webqueue 0.18.0__tar.gz → 0.19.0__tar.gz

{kryten_webqueue-0.18.0 → kryten_webqueue-0.19.0}/CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ## [Unreleased]
 
+## [0.19.0] — 2026-06-17
+
+### Changed
+
+- **Z-Coin dashboard reorganized into tabs.** The account page was overcrowded with three side-by-side columns. It's now a widened account card (balance, rank, progress, perks) beside a tabbed container with **Queue History**, **Recent Transactions**, and a new **Vanity Items** tab. Each tab lazy-loads its data on first view; the vanity greeting/color editors moved out of the cramped left column into their own roomier tab. Collapses to a single column on narrow screens.
+
+[0.19.0]: https://github.com/grobertson/kryten-webqueue/releases/tag/v0.19.0
+
 ## [0.18.0] — 2026-06-17
 
 ### Fixed

{kryten_webqueue-0.18.0 → kryten_webqueue-0.19.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: kryten-webqueue
-Version: 0.18.0
+Version: 0.19.0
 Summary: Netflix/Tubi-style catalog browser and pay-to-play queue management for CyTube
 Author: grobertson
 License-Expression: MIT

{kryten_webqueue-0.18.0 → kryten_webqueue-0.19.0}/kryten_webqueue/static/css/main.css

@@ -797,20 +797,50 @@ a.np-chip {
 }
 .dashboard-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: minmax(280px, 360px) 1fr;
     gap: 1.5rem;
     margin-top: 1.5rem;
+    align-items: start;
 }
 @media (max-width: 900px) {
     .dashboard-grid {
         grid-template-columns: 1fr;
     }
 }
-.balance-card, .history-card, .transactions-card {
+.balance-card, .history-card, .transactions-card, .dashboard-tabs-card {
     background: var(--bg-card);
     border-radius: var(--radius);
     padding: 1.5rem;
 }
+
+/* Dashboard tabbed container */
+.tabs {
+    display: flex;
+    gap: 0.25rem;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 1rem;
+}
+.tab-btn {
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 0.95rem;
+    font-weight: 600;
+    padding: 0.6rem 0.9rem;
+    margin-bottom: -1px;
+}
+.tab-btn:hover {
+    color: var(--text-primary);
+}
+.tab-btn.active {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+.tab-panel[hidden] {
+    display: none;
+}
 .balance-amount {
     font-size: 2rem;
     font-weight: 700;
@@ -911,17 +941,7 @@ a.np-chip {
     color: var(--success);
 }
 
-/* Vanity items (dashboard left column) */
-.vanity-section {
-    margin-top: 1.25rem;
-    padding-top: 1.25rem;
-    border-top: 1px solid var(--border);
-}
-.vanity-section h3 {
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-    margin-bottom: 0.6rem;
-}
+/* Vanity items (dashboard "Vanity Items" tab) */
 .vanity-item {
     margin-bottom: 0.85rem;
 }

{kryten_webqueue-0.18.0 → kryten_webqueue-0.19.0}/kryten_webqueue/templates/user/dashboard.html

@@ -10,7 +10,7 @@
     </div>
 
     <div class="dashboard-grid">
-        <!-- LEFT: Account -->
+        <!-- LEFT: Account (widened) -->
         <div class="balance-card">
             <h2>Z Coin Balance</h2>
             <p class="balance-amount" id="balance-amount">Loading…</p>
@@ -18,9 +18,37 @@
 
             <div class="account-rank" id="account-rank"></div>
             <div class="account-perks" id="account-perks"></div>
+        </div>
+
+        <!-- RIGHT: Tabbed container -->
+        <div class="dashboard-tabs-card">
+            <div class="tabs" role="tablist">
+                <button class="tab-btn active" data-tab="queue" role="tab" aria-selected="true">Queue History</button>
+                <button class="tab-btn" data-tab="transactions" role="tab" aria-selected="false">Recent Transactions</button>
+                <button class="tab-btn" data-tab="vanity" role="tab" aria-selected="false">Vanity Items</button>
+            </div>
+
+            <div class="tab-panel" id="tab-queue" role="tabpanel">
+                <div id="queue-history">
+                    <p class="empty-state">Loading…</p>
+                </div>
+                <div class="history-pager" id="queue-pager"></div>
+            </div>
 
-            <div class="vanity-section" id="vanity-section">
-                <h3>Vanity</h3>
+            <div class="tab-panel" id="tab-transactions" role="tabpanel" hidden>
+                <div class="tx-toggle" id="tx-toggle">
+                    <button class="tx-toggle-btn active" data-filter="all">All</button>
+                    <button class="tx-toggle-btn" data-filter="credit">Credits</button>
+                    <button class="tx-toggle-btn" data-filter="debit">Debits</button>
+                </div>
+                <div id="transactions">
+                    <p class="empty-state">Loading…</p>
+                </div>
+                <div class="tx-pager" id="tx-pager"></div>
+            </div>
+
+            <div class="tab-panel" id="tab-vanity" role="tabpanel" hidden>
+                <p class="muted">Personalize how the bot greets you and your chat color. Each update is a one-time purchase.</p>
                 <div class="vanity-item">
                     <div class="vanity-row">
                         <span class="vanity-label">Greeting</span>
@@ -37,29 +65,6 @@
                 </div>
             </div>
         </div>
-
-        <!-- MIDDLE: Queue history -->
-        <div class="history-card">
-            <h2>Queue History</h2>
-            <div id="queue-history">
-                <p class="empty-state">Loading…</p>
-            </div>
-            <div class="history-pager" id="queue-pager"></div>
-        </div>
-
-        <!-- RIGHT: Transactions -->
-        <div class="transactions-card">
-            <h2>Recent Transactions</h2>
-            <div class="tx-toggle" id="tx-toggle">
-                <button class="tx-toggle-btn active" data-filter="all">All</button>
-                <button class="tx-toggle-btn" data-filter="credit">Credits</button>
-                <button class="tx-toggle-btn" data-filter="debit">Debits</button>
-            </div>
-            <div id="transactions">
-                <p class="empty-state">Loading…</p>
-            </div>
-            <div class="tx-pager" id="tx-pager"></div>
-        </div>
     </div>
 </div>
 {% endblock %}
@@ -442,8 +447,31 @@ document.querySelectorAll('.tx-toggle-btn').forEach(b => b.addEventListener('cli
     renderTransactions();
 }));
 
+// Tabs: show one panel at a time; lazy-load each panel's data on first view.
+const tabLoaded = { queue: false, transactions: false, vanity: false };
+function loadTabOnce(tab) {
+    if (tabLoaded[tab]) return;
+    tabLoaded[tab] = true;
+    if (tab === 'queue') loadQueue(0);
+    else if (tab === 'transactions') loadTransactions(true);
+    // 'vanity' needs no fetch — populated by loadAccount().
+}
+function showTab(tab) {
+    document.querySelectorAll('.tab-btn').forEach(b => {
+        const on = b.dataset.tab === tab;
+        b.classList.toggle('active', on);
+        b.setAttribute('aria-selected', on ? 'true' : 'false');
+    });
+    document.querySelectorAll('.tab-panel').forEach(p => {
+        p.hidden = p.id !== `tab-${tab}`;
+    });
+    loadTabOnce(tab);
+}
+document.querySelectorAll('.tab-btn').forEach(b => {
+    b.addEventListener('click', () => showTab(b.dataset.tab));
+});
+
 loadAccount();
-loadQueue(0);
-loadTransactions(true);
+showTab('queue');  // default tab; lazy-loads queue history
 </script>
 {% endblock %}

{kryten_webqueue-0.18.0 → kryten_webqueue-0.19.0}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "kryten-webqueue"
-version = "0.18.0"
+version = "0.19.0"
 description = "Netflix/Tubi-style catalog browser and pay-to-play queue management for CyTube"
 readme = "README.md"
 license = "MIT"