feat/theme-and-sort #16
+23
-4
@@ -33,6 +33,7 @@
|
||||
fillValues: {},
|
||||
fillActive: 0,
|
||||
searchQuery: '',
|
||||
cardsSort: 'newest',
|
||||
};
|
||||
|
||||
const $ = (sel) => document.querySelector(sel);
|
||||
@@ -611,11 +612,17 @@
|
||||
panel.insertBefore(hdr, list);
|
||||
}
|
||||
const scope = state.activeTag ? `${state.intent} · #${state.activeTag}` : state.intent;
|
||||
const sorts = ['newest', 'oldest', 'most used'];
|
||||
const options = sorts.map(s => `<option${s === state.cardsSort ? ' selected' : ''}>${s}</option>`).join('');
|
||||
hdr.innerHTML = `
|
||||
<span class="cards-scope">${scope}</span>
|
||||
<span class="cards-count">${state.entities.length} cards</span>
|
||||
<select class="cards-sort"><option>newest</option><option>most used</option></select>
|
||||
<select class="cards-sort">${options}</select>
|
||||
`;
|
||||
hdr.querySelector('.cards-sort').addEventListener('change', (ev) => {
|
||||
state.cardsSort = ev.target.value;
|
||||
loadEntities();
|
||||
});
|
||||
}
|
||||
|
||||
function renderCardRow(e, idx) {
|
||||
@@ -1103,12 +1110,20 @@
|
||||
if (state.activeTag) params.tag = state.activeTag;
|
||||
if (state.view === 'cards') {
|
||||
params.cards_only = true;
|
||||
if (state.cardsSort === 'oldest') {
|
||||
params.sort = 'created';
|
||||
params.order = 'asc';
|
||||
} else if (state.cardsSort === 'most used') {
|
||||
params.sort = 'use_count';
|
||||
params.order = 'desc';
|
||||
} else {
|
||||
params.sort = 'created';
|
||||
params.order = 'desc';
|
||||
}
|
||||
} else {
|
||||
params.sort = 'created';
|
||||
params.order = 'desc';
|
||||
}
|
||||
if (state.activeMonth) {
|
||||
const [y, m] = state.activeMonth.split('-').map(Number);
|
||||
params.from = state.activeMonth + '-01';
|
||||
@@ -1590,16 +1605,20 @@
|
||||
|
||||
// ========== Theme ==========
|
||||
|
||||
const THEMES = ['dark', 'paper', 'tinycard'];
|
||||
const THEME_ICONS = { dark: '◑', paper: '◐', tinycard: '◈' };
|
||||
|
||||
const themeToggle = $('#theme-toggle');
|
||||
let nibTheme = localStorage.getItem('nib:theme') || 'dark';
|
||||
if (!THEMES.includes(nibTheme)) nibTheme = 'dark';
|
||||
document.documentElement.setAttribute('data-theme', nibTheme);
|
||||
themeToggle.textContent = nibTheme === 'paper' ? '◐' : '◑';
|
||||
themeToggle.textContent = THEME_ICONS[nibTheme];
|
||||
|
||||
themeToggle.addEventListener('click', () => {
|
||||
nibTheme = nibTheme === 'dark' ? 'paper' : 'dark';
|
||||
nibTheme = THEMES[(THEMES.indexOf(nibTheme) + 1) % THEMES.length];
|
||||
document.documentElement.setAttribute('data-theme', nibTheme);
|
||||
localStorage.setItem('nib:theme', nibTheme);
|
||||
themeToggle.textContent = nibTheme === 'paper' ? '◐' : '◑';
|
||||
themeToggle.textContent = THEME_ICONS[nibTheme];
|
||||
});
|
||||
|
||||
// ========== Init ==========
|
||||
|
||||
+1
-1
@@ -6,7 +6,7 @@
|
||||
<title>nib</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
+35
-6
@@ -50,6 +50,30 @@
|
||||
--lineage: #5830a0;
|
||||
}
|
||||
|
||||
[data-theme="tinycard"] {
|
||||
color-scheme: dark;
|
||||
--bg: #0f1117;
|
||||
--surf: #161922;
|
||||
--raised: #1e2130;
|
||||
--border: #2a2e3d;
|
||||
--soft: #222639;
|
||||
--text: #e1e4ed;
|
||||
--muted: #8b90a0;
|
||||
--dim: #555a6a;
|
||||
--accent: #ad8ee6;
|
||||
--a-bg: rgba(173,142,230,.09);
|
||||
--a-str: rgba(173,142,230,.22);
|
||||
--todo: #fbbf24;
|
||||
--note: #22d3ee;
|
||||
--event: #22d3ee;
|
||||
--remind: #e8845a;
|
||||
--ok: #4ade80;
|
||||
--danger: #ef4444;
|
||||
--lineage: #a78bfa;
|
||||
--sans: 'Inter', system-ui, sans-serif;
|
||||
--mono: 'JetBrains Mono', ui-monospace, monospace;
|
||||
}
|
||||
|
||||
/* ── RESET ──────────────────────────────────────────── */
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body { height: 100%; overflow: hidden; }
|
||||
@@ -641,7 +665,12 @@ main {
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--surf);
|
||||
flex-shrink: 0;
|
||||
transition: border-top-color var(--t-base);
|
||||
padding: 4px 0;
|
||||
transition: border-top-color var(--t-base), box-shadow var(--t-base);
|
||||
}
|
||||
|
||||
#capture-bar:focus-within {
|
||||
box-shadow: 0 -2px 12px rgba(200,148,42,.08);
|
||||
}
|
||||
|
||||
/* ── Capture preview ── */
|
||||
@@ -673,7 +702,7 @@ main {
|
||||
.cap-pill-card { color: var(--accent); border-color: rgba(200,148,42,.25); }
|
||||
.cap-pill-query { color: var(--event); border-color: rgba(104,152,200,.3); }
|
||||
|
||||
#capture-bar:focus-within { border-top-color: rgba(200,148,42,.35); }
|
||||
#capture-bar:focus-within { border-top-color: var(--accent); }
|
||||
|
||||
.cap-row {
|
||||
display: flex;
|
||||
@@ -683,10 +712,10 @@ main {
|
||||
|
||||
.cap-prompt {
|
||||
font-family: var(--mono);
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
color: var(--accent);
|
||||
opacity: .4;
|
||||
padding-bottom: 8px;
|
||||
padding-bottom: 10px;
|
||||
flex-shrink: 0;
|
||||
transition: opacity var(--t-base);
|
||||
}
|
||||
@@ -698,9 +727,9 @@ main {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 8px 10px;
|
||||
padding: 10px 10px;
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
line-height: 1.5;
|
||||
resize: none;
|
||||
|
||||
Reference in New Issue
Block a user