Cieric/Naut-Plugin-WebUI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit: NAUT torrent web UI with stubbed server

Browse source 
Advanced torrent client web UI aimed at power users, with a
zero-dependency Node stub server (built-in http + SSE) serving live
mock data.

- Dense sortable/multi-select torrent grid with live updates
- Detail panel: General/Trackers/Peers/Content/Pieces (resizable)
- Sidebar filters: status, categories, tags, trackers
- Create/delete categories and tags (sidebar + right-click)
- Add via magnet or client-side-parsed .torrent upload
- RSS, integrated search, and read-only engine views
- Hand-drawn SVG icon set, dark theme, keyboard shortcuts

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ookami125 2026-06-16 21:15:31 -04:00
commit bc1be49a37
12 changed files with 2677 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

83
public/index.html Normal file
View file

@ -0,0 +1,83 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Naut · Torrent Console</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='14' font-size='14'>🛰️</text></svg>" />
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<div id="app">
<!-- Top toolbar -->
<header class="toolbar">
<div class="brand">
<span class="brand-mark">⬡</span>
<span class="brand-name">NAUT</span>
<span class="brand-sub">torrent console</span>
</div>
<div class="tb-actions">
<button class="btn" data-act="add" title="Add torrent / magnet (N)">
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M12 5v14M5 12h14"/></svg> Add</button>
<div class="tb-sep"></div>
<button class="btn icon" data-act="resume" title="Resume (selection)">
<svg viewBox="0 0 24 24" class="ic-svg fill"><path d="M8 5.5v13l11-6.5z"/></svg></button>
<button class="btn icon" data-act="pause" title="Pause (selection)">
<svg viewBox="0 0 24 24" class="ic-svg fill"><rect x="6.5" y="5" width="3.5" height="14" rx="1"/><rect x="14" y="5" width="3.5" height="14" rx="1"/></svg></button>
<button class="btn icon" data-act="recheck" title="Force recheck">
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M20.5 12a8.5 8.5 0 1 1-2.5-6"/><path d="M20.5 4v5h-5"/></svg></button>
<button class="btn icon danger" data-act="delete" title="Delete (Del)">
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M4 6.5h16M9.5 6.5V4.5h5v2M17.5 6.5l-1 13.5a1.8 1.8 0 0 1-1.8 1.5H9.3a1.8 1.8 0 0 1-1.8-1.5l-1-13.5M10 10.5v7M14 10.5v7"/></svg></button>
<div class="tb-sep"></div>
<button class="btn icon" data-act="topPriority" title="Move to top of queue">
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M5 4.5h14M12 20.5V9M7 14l5-5 5 5"/></svg></button>
<button class="btn icon" data-act="increasePriority" title="Queue up one">
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M12 20V6M6.5 11.5L12 6l5.5 5.5"/></svg></button>
<button class="btn icon" data-act="decreasePriority" title="Queue down one">
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M12 4v14M6.5 12.5L12 18l5.5-5.5"/></svg></button>
<button class="btn icon" data-act="bottomPriority" title="Move to bottom of queue">
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M5 19.5h14M12 3.5V15M7 10l5 5 5-5"/></svg></button>
</div>
<div class="tb-spacer"></div>
<input id="quickFilter" class="quick-filter" type="search" placeholder="Filter torrents… (/)" />
<div class="tb-rates">
<span class="rate dl" title="Global download rate">▼ <b id="globalDl">–</b></span>
<span class="rate up" title="Global upload rate">▲ <b id="globalUp">–</b></span>
</div>
<button class="btn alt-toggle" data-act="altspeed" title="Toggle alternative speed limits">
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M4 18a8 8 0 0 1 16 0M12 18l3.5-5"/><circle cx="12" cy="18" r="1.3" fill="currentColor" stroke="none"/></svg> Alt</button>
</header>
<div class="main">
<!-- Sidebar: status / categories / tags / trackers -->
<aside class="sidebar" id="sidebar"></aside>
<!-- Center: nav tabs + content -->
<section class="content">
<nav class="viewtabs" id="viewtabs">
<button class="vtab active" data-view="torrents">Torrents</button>
<button class="vtab" data-view="rss">RSS &amp; Automation</button>
<button class="vtab" data-view="search">Search</button>
<button class="vtab" data-view="settings">Engine</button>
</nav>
<div class="view-host" id="viewHost"></div>
</section>
</div>
<!-- Status bar -->
<footer class="statusbar" id="statusbar"></footer>
</div>
<!-- Modal host -->
<div class="modal-backdrop" id="modalBackdrop" hidden>
<div class="modal" id="modal"></div>
</div>
<script type="module" src="/js/app.js"></script>
</body>
</html>