ui: overhaul sidebar, add content filters and state improvements

Sidebar layout:
- Replace AdwNavigationSplitView with GtkPaned for a resizable sidebar
  with a persistent width stored in GSettings.
- Apply navigation-sidebar CSS class to the content Stack only (not the
  ToolbarView) so both header bars share the same colour and height.
- Override Adwaita's automatic paned-first-child header tint and gap via
  application-level CSS.
- Remove the gap between the sidebar header and the first list item.
- Add toggle-sidebar button and F9 shortcut; sidebar visibility and width
  are persisted across restarts.

Loading indicator:
- Replace the large AdwSpinner status page + header Stack with a small
  Gtk.Spinner (16×16) in the header Stack so the header height never
  changes during loading.

Article row:
- Add hexpand to title and excerpt labels so text reflows when the
  sidebar is resized.

Content:
- Inline CSS into the HTML template at load time (/*INJECT_CSS*/
  placeholder) so WebKit does not need a custom URI scheme handler.
- Fix max-width centering and padding for article body and header.
- Fix embedded video/iframe auto-opening in browser by checking
  NavigationType::LinkClicked instead of is_user_gesture().

Content filters:
- Add Preferences dialog with a TextView for content-rewrite rules
  stored in GSettings (content-filters key).
- Rule format: "domain find replace [find replace …]" one per line.
- Rules are applied to article HTML before display and reloaded on
  every refresh.

Shortcuts:
- Add Ctrl+W to close, Ctrl+Q to quit, F1 for keyboard shortcuts
  overlay, j/k and arrow-key navigation via a capture-phase controller
  so keys work regardless of which widget has focus.

Misc:
- Set window title to "FeedTheMonkey" (fixes Hyprland title bar).
- Update About dialog website URL.
This commit is contained in:
Jeena 2026-03-21 01:13:01 +00:00
parent 141f9ee32d
commit 8fd52dd8a0
16 changed files with 680 additions and 320 deletions

View file

@ -2,35 +2,47 @@
<html>
<head>
<meta charset="UTF-8">
<meta name="color-scheme" content="light dark">
<title>FeedTheMonkey</title>
<link rel="stylesheet" href="content.css">
<style>/*INJECT_CSS*/</style>
</head>
<body>
<div id="header">
<div id="feed-title"></div>
<h1 id="title"></h1>
<div id="meta">
<span id="author"></span>
<span id="date"></span>
<header>
<div class="inner">
<p><span id="feed_title"></span> <span id="author"></span></p>
<h1><a id="title" href=""></a></h1>
<p><time id="date"></time></p>
</div>
<a id="link" href="#" onclick="window.location='feedthemonkey:open'; return false;">Open in Browser</a>
</div>
<div id="content"></div>
</header>
<article id="article"></article>
<script>
function setArticle(article) {
document.getElementById('feed-title').textContent = article.feed_title || '';
document.getElementById('title').textContent = article.title || '';
document.getElementById('author').textContent = article.author || '';
document.getElementById('content').innerHTML = article.content || '';
var ts = article.updated;
if (ts) {
document.getElementById('date').textContent = new Date(ts * 1000).toLocaleDateString();
}
window.scrollTo(0, 0);
window._article = article;
document.getElementById('date').textContent = '';
document.getElementById('title').textContent = '';
document.getElementById('title').href = '';
document.getElementById('feed_title').textContent = '';
document.getElementById('author').textContent = '';
document.getElementById('article').innerHTML = '';
if (!article) return;
document.getElementById('date').textContent =
new Date(parseInt(article.updated, 10) * 1000).toLocaleDateString();
document.getElementById('title').textContent = article.title || '';
document.getElementById('title').href = article.link || '';
document.getElementById('feed_title').textContent = article.feed_title || '';
if (article.author && article.author.length > 0)
document.getElementById('author').textContent = '\u2013 ' + article.author;
document.getElementById('article').innerHTML = article.content || '';
}
function setDark(isDark) {
document.documentElement.setAttribute('data-dark', isDark ? '1' : '0');
}
function setFont(family, sizePx) {
document.documentElement.style.setProperty('--font', family);
document.documentElement.style.setProperty('--font-size', sizePx + 'px');
}
function checkKey(e) {