lerko/nib-v1
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge pull request 'feat/theme-and-sort' (#16) from feat/theme-and-sort into main

Browse Source 
Reviewed-on: #16
This commit was merged in pull request #16.
This commit is contained in:
Tyler Koenig
2026-05-16 23:35:30 +00:00
parent 1f2daf4d0e ef647aea7a
commit b580ed46b0
3 changed files with 61 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+25 -6
View File
@@ -33,6 +33,7 @@
fillValues: {}, fillValues: {},
fillActive: 0, fillActive: 0,
searchQuery: '', searchQuery: '',
cardsSort: 'newest',
}; };
const $ = (sel) => document.querySelector(sel); const $ = (sel) => document.querySelector(sel);
@@ -611,11 +612,17 @@
panel.insertBefore(hdr, list); panel.insertBefore(hdr, list);
} }
const scope = state.activeTag ? `${state.intent} · #${state.activeTag}` : state.intent; 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 = ` hdr.innerHTML = `
<span class="cards-scope">${scope}</span> <span class="cards-scope">${scope}</span>
<span class="cards-count">${state.entities.length} cards</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) { function renderCardRow(e, idx) {
@@ -1103,8 +1110,16 @@
if (state.activeTag) params.tag = state.activeTag; if (state.activeTag) params.tag = state.activeTag;
if (state.view === 'cards') { if (state.view === 'cards') {
params.cards_only = true; params.cards_only = true;
params.sort = 'use_count'; if (state.cardsSort === 'oldest') {
params.order = 'desc'; 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 { } else {
params.sort = 'created'; params.sort = 'created';
params.order = 'desc'; params.order = 'desc';
@@ -1590,16 +1605,20 @@
// ========== Theme ========== // ========== Theme ==========
const THEMES = ['dark', 'paper', 'tinycard'];
const THEME_ICONS = { dark: '◑', paper: '◐', tinycard: '◈' };
const themeToggle = $('#theme-toggle'); const themeToggle = $('#theme-toggle');
let nibTheme = localStorage.getItem('nib:theme') || 'dark'; let nibTheme = localStorage.getItem('nib:theme') || 'dark';
if (!THEMES.includes(nibTheme)) nibTheme = 'dark';
document.documentElement.setAttribute('data-theme', nibTheme); document.documentElement.setAttribute('data-theme', nibTheme);
themeToggle.textContent = nibTheme === 'paper' ? '◐' : '◑'; themeToggle.textContent = THEME_ICONS[nibTheme];
themeToggle.addEventListener('click', () => { themeToggle.addEventListener('click', () => {
nibTheme = nibTheme === 'dark' ? 'paper' : 'dark'; nibTheme = THEMES[(THEMES.indexOf(nibTheme) + 1) % THEMES.length];
document.documentElement.setAttribute('data-theme', nibTheme); document.documentElement.setAttribute('data-theme', nibTheme);
localStorage.setItem('nib:theme', nibTheme); localStorage.setItem('nib:theme', nibTheme);
themeToggle.textContent = nibTheme === 'paper' ? '◐' : '◑'; themeToggle.textContent = THEME_ICONS[nibTheme];
}); });
// ========== Init ========== // ========== Init ==========
web/index.html
+1 -1
View File
@@ -6,7 +6,7 @@
<title>nib</title> <title>nib</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <link rel="stylesheet" href="/style.css">
</head> </head>
<body> <body>
web/style.css
+35 -6
View File
@@ -50,6 +50,30 @@
--lineage: #5830a0; --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 ──────────────────────────────────────────── */ /* ── RESET ──────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; } html, body { height: 100%; overflow: hidden; }
@@ -641,7 +665,12 @@ main {
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
background: var(--surf); background: var(--surf);
flex-shrink: 0; 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 ── */ /* ── Capture preview ── */
@@ -673,7 +702,7 @@ main {
.cap-pill-card { color: var(--accent); border-color: rgba(200,148,42,.25); } .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); } .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 { .cap-row {
display: flex; display: flex;
@@ -683,10 +712,10 @@ main {
.cap-prompt { .cap-prompt {
font-family: var(--mono); font-family: var(--mono);
font-size: 14px; font-size: 16px;
color: var(--accent); color: var(--accent);
opacity: .4; opacity: .4;
padding-bottom: 8px; padding-bottom: 10px;
flex-shrink: 0; flex-shrink: 0;
transition: opacity var(--t-base); transition: opacity var(--t-base);
} }
@@ -698,9 +727,9 @@ main {
background: transparent; background: transparent;
border: none; border: none;
outline: none; outline: none;
padding: 8px 10px; padding: 10px 10px;
font-family: var(--mono); font-family: var(--mono);
font-size: 12px; font-size: 13px;
color: var(--text); color: var(--text);
line-height: 1.5; line-height: 1.5;
resize: none; resize: none;