diff options
| -rw-r--r-- | .thicket/tickets.jsonl | 2 | ||||
| -rw-r--r-- | frontend/src/App.css | 4 | ||||
| -rw-r--r-- | frontend/src/components/FeedList.css | 73 |
3 files changed, 57 insertions, 22 deletions
diff --git a/.thicket/tickets.jsonl b/.thicket/tickets.jsonl index ec21934..5b14ce3 100644 --- a/.thicket/tickets.jsonl +++ b/.thicket/tickets.jsonl @@ -89,7 +89,7 @@ {"id":"NK-zl922p","title":"slow scrolling in v2 ui compared to v1","description":"When using j/k to go to the next feed, they appeared instantly, now it feels like a slow scroll. Make it speedy again.","type":"bug","status":"closed","priority":0,"labels":null,"assignee":"","created":"2026-02-14T03:41:02.267766275Z","updated":"2026-02-14T04:27:10.368160216Z"} {"id":"NK-zs9we8","title":"UI Styling: Sidebar (Fixed, Gray Background)","description":"","type":"","status":"closed","priority":2,"labels":null,"assignee":"","created":"2026-02-13T18:05:16.188317572Z","updated":"2026-02-13T18:11:46.213993245Z"} {"id":"NK-zt4e32","title":"Implement Frontend Feed List","description":"Create feed list view in new frontend. Fetch feeds from API.","type":"task","status":"closed","priority":1,"labels":null,"assignee":"","created":"2026-02-13T05:44:01.58866298Z","updated":"2026-02-13T05:59:46.132148641Z"} -{"id":"NK-zvt8hi","title":"neko button always must be visible","description":"once you hide the sidebar with the nekoo button, there's no way to unhide it in the v2 ui after the recent changes","type":"bug","status":"open","priority":0,"labels":null,"assignee":"","created":"2026-02-14T17:58:18.468707709Z","updated":"2026-02-14T17:58:18.468707709Z"} +{"id":"NK-zvt8hi","title":"neko button always must be visible","description":"once you hide the sidebar with the nekoo button, there's no way to unhide it in the v2 ui after the recent changes","type":"bug","status":"closed","priority":0,"labels":null,"assignee":"","created":"2026-02-14T17:58:18.468707709Z","updated":"2026-02-14T18:00:05.356506442Z"} {"id":"NK-d0ghccy","from_ticket_id":"NK-ric1zs","to_ticket_id":"NK-1phdpf","type":"created_from","created":"2026-02-13T04:26:55.875394997Z"} {"id":"NK-d0lgaab","from_ticket_id":"NK-sne5ox","to_ticket_id":"NK-0ppv3f","type":"created_from","created":"2026-02-13T15:05:23.289745853Z"} {"id":"NK-d1q1e8a","from_ticket_id":"NK-wjnczv","to_ticket_id":"NK-chns2b","type":"created_from","created":"2026-02-14T05:13:23.323181359Z"} diff --git a/frontend/src/App.css b/frontend/src/App.css index 7478777..773e114 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -26,7 +26,7 @@ body { } .dashboard-sidebar { - width: 15rem; + width: 11rem; background: var(--sidebar-bg); border-right: 1px solid var(--border-color); display: flex; @@ -37,7 +37,7 @@ body { } .dashboard-sidebar.hidden { - margin-left: -15rem; + margin-left: -11rem; } .dashboard-main { diff --git a/frontend/src/components/FeedList.css b/frontend/src/components/FeedList.css index 41b8f73..7bb0f4c 100644 --- a/frontend/src/components/FeedList.css +++ b/frontend/src/components/FeedList.css @@ -1,11 +1,14 @@ .feed-list { padding: 1rem; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - color: var(--text-color); + color: #777; + /* specific v1 color */ + font-size: 0.8rem; } .feed-list h1.logo { - font-size: 3rem; + font-size: 2rem; + /* match v1 */ margin: 0 0 1rem 0; line-height: 1; cursor: pointer; @@ -14,10 +17,23 @@ background: var(--sidebar-bg); z-index: 10; padding-bottom: 0.5rem; + color: var(--text-color); + /* Usually dark/white depending on theme, v1 was white on blue? No, white on fixed header? No, v1 logo class says color: white. But sidebar is #ccc. */ + /* In v1 logo was fixed top left (blue header bar?). In v2 sidebar is #ccc. + Let's use theme text color but maybe bolder? */ +} + +/* Override logo color if necessary for themes */ +.theme-light .feed-list h1.logo { + color: #333; +} + +.theme-dark .feed-list h1.logo { + color: #eee; } .search-section { - margin-bottom: 1.5rem; + margin-bottom: 1rem; } .search-input { @@ -26,18 +42,24 @@ border: 1px solid var(--border-color, #999); background: var(--bg-color); color: var(--text-color); - font-size: 0.9rem; + font-size: 0.8rem; font-family: inherit; + border-radius: 0; + /* v1 didn't have rounded inputs usually */ } .section-header { font-size: 1rem; + /* v1 h4 size? */ font-weight: bold; - margin: 1.5rem 0 0.5rem 0; + margin: 1rem 0 0.25rem 0; cursor: pointer; user-select: none; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - color: var(--text-color); + color: #333; + /* Darker than list items */ + text-transform: lowercase; + font-variant: small-caps; } .filter-list, @@ -51,7 +73,7 @@ .filter-list li, .nav-list li { - margin-bottom: 0.25rem; + margin-bottom: 0.1rem; } .filter-list a, @@ -61,7 +83,8 @@ .logout-link { text-decoration: none; color: var(--link-color, blue); - font-size: 0.9rem; + font-size: 0.8rem; + /* Matches v1 .75em approx */ display: block; cursor: pointer; background: none; @@ -70,6 +93,9 @@ font-family: inherit; font-variant: small-caps; text-transform: lowercase; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .filter-list a:hover, @@ -78,18 +104,20 @@ .feed-title:hover, .logout-link:hover { text-decoration: underline; + color: var(--link-color, blue); } .filter-list a.active, .tag-link.active, .feed-title.active { font-weight: bold; - color: var(--text-color); + color: #000; + /* Active state black */ } .tag-item, .sidebar-feed-item { - margin-bottom: 0.1rem; + margin-bottom: 0; } .feed-category { @@ -98,13 +126,19 @@ .nav-section { margin-top: 2rem; - border-top: 1px solid var(--border-color, #ccc); - padding-top: 1rem; + border-top: 1px solid var(--border-color, #999); + padding-top: 0.5rem; } .logout-link { text-align: left; width: 100%; + color: #777; + /* Make logout less prominent */ +} + +.logout-link:hover { + color: var(--link-color, blue); } .theme-section { @@ -118,22 +152,23 @@ .theme-selector button { background: transparent; - border: 1px solid var(--border-color, #ccc); + border: 1px solid var(--border-color, #999); cursor: pointer; - padding: 0.25rem 0.5rem; - font-size: 1rem; - border-radius: 4px; + padding: 0.1rem 0.3rem; + font-size: 0.9rem; + border-radius: 0; } .theme-selector button.active { - background: var(--border-color, #ccc); + background: var(--border-color, #999); + color: white; } /* Scrollbar styling for webkit */ .dashboard-sidebar::-webkit-scrollbar { - width: 6px; + width: 4px; } .dashboard-sidebar::-webkit-scrollbar-thumb { - background-color: var(--border-color, #ccc); + background-color: var(--border-color, #999); }
\ No newline at end of file |