new icon and stuff

2026-07-08 21:04:44 -03:00
parent 9a964dfd73
commit 11b71966ed
6 changed files with 18 additions and 11 deletions
--- a/README.md
+++ b/README.md
@@ -1,4 +1,7 @@
-# Transmission Manager
+<h1 align="center">
+  <img src="web/transmission-manager.png" height="64" style="vertical-align: middle;" />
+  Transmission Manager
+</h1>

 A lightweight, modern, single-binary web application for viewing and managing torrents from a [Transmission](https://transmissionbt.com/) RPC daemon.

--- a/project-context.md
+++ b/project-context.md
@@ -23,6 +23,8 @@ The app is intentionally small: one Go binary serves both the API and embedded f

 - `main.go`: backend entrypoint. Owns the HTTP server, embedded static file serving, environment-driven Transmission RPC client configuration, session-ID handshake, connection warning page, JSON helpers, and API routes.
 - `web/index.html`: SPA shell. Defines the header, stats pills, filter input, sort buttons, list container, empty state, error state, footer, and script/style links.
+- `web/icon.svg`: editable vector source for the app icon.
+- `web/icon.png`: reusable raster app icon used by the SPA header and browser tab.
 - `web/app.js`: frontend application logic. Owns state, polling, fetch helpers, formatting, torrent classification, sorting, keyed DOM reconciliation, pause/resume actions, and event wiring.
 - `web/styles.css`: all styling. Owns dark theme variables, layout, cards, badges, progress bars, action buttons, empty/error states, and responsive rules.
 - `go.mod`: Go module declaration.
--- a/web/icon.png
+++ b/web/icon.png
--- a/web/index.html
+++ b/web/index.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="color-scheme" content="dark" />
+  <meta name="theme-color" content="#0a0a0f" />
  <title>Transmission Manager</title>
+  <link rel="icon" href="/icon.png" type="image/png" sizes="128x128" />
  <link rel="stylesheet" href="/styles.css" />
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='48' fill='%230a0a0f'/><path d='M50 8 L20 78 L80 78 Z' fill='none' stroke='%2300d4ff' stroke-width='6'/></svg>" />
 </head>
+
 <body>
  <header class="app-header">
    <div class="header-inner">
      <div class="brand">
        <div class="logo" aria-hidden="true">
-          <svg viewBox="0 0 100 100">
-            <path d="M50 8 L20 78 L80 78 Z" fill="none" stroke="currentColor" stroke-width="6" stroke-linejoin="round"/>
-            <path d="M50 32 L38 68 L62 68 Z" fill="currentColor"/>
-          </svg>
+          <img src="/icon.png" alt="" />
        </div>
        <div class="brand-text">
          <h1>Transmission</h1>
@@ -66,7 +66,8 @@
            <option value="10000">10s</option>
          </select>
        </label>
-        <div class="refresh-indicator" id="refresh-indicator" title="Auto-refreshes every 3s" role="status" aria-label="Auto-refresh active">
+        <div class="refresh-indicator" id="refresh-indicator" title="Auto-refreshes every 3s" role="status"
+          aria-label="Auto-refresh active">
          <span class="dot" aria-hidden="true"></span>
        </div>
      </div>
@@ -77,7 +78,8 @@
    <div id="empty-state" class="empty-state hidden">
      <div class="empty-box">
        <svg viewBox="0 0 100 100" aria-hidden="true">
-          <path d="M50 8 L20 78 L80 78 Z" fill="none" stroke="currentColor" stroke-width="5" stroke-linejoin="round" opacity="0.4"/>
+          <path d="M50 8 L20 78 L80 78 Z" fill="none" stroke="currentColor" stroke-width="5" stroke-linejoin="round"
+            opacity="0.4" />
        </svg>
      </div>
      <p class="empty-title">No torrents</p>
@@ -99,4 +101,5 @@

  <script src="/app.js"></script>
 </body>
+
 </html>
--- a/web/styles.css
+++ b/web/styles.css
@@ -107,11 +107,10 @@ button { font-family: inherit; }

 .logo {
  width: 38px; height: 38px;
-  color: var(--accent);
  display: grid; place-items: center;
  filter: drop-shadow(0 0 10px var(--accent-glow));
 }
-.logo svg { width: 100%; height: 100%; }
+.logo img { display: block; width: 100%; height: 100%; }

 .brand-text { display: flex; flex-direction: column; line-height: 1; }
 .brand-text h1 { font-size: 17px; color: var(--text-0); }
--- a/web/transmission-manager.png
+++ b/web/transmission-manager.png