feat(about): show the other tools' mascots and open their own sites

PRIVACY.md

@@ -108,7 +108,7 @@ When you explicitly click one of the links in **Settings → About**, CoPanda op
 - **Sponsor the project** → `https://github.com/sponsors/rgdevment`
 - **Buy me a coffee** → `https://buymeacoffee.com/rgdevment`
 - **Rate it on the Store** (Windows only) → opens the Microsoft Store app on CoPanda's review page
-- **Other tools** → `https://rgdevment.com/tisty/` and `https://rgdevment.com/linkunbound/`
+- **Other tools** → `https://www.tisty.app/` and `https://www.linkunbound.app/`
 
 The same goes for a link you open from a card in the panel. If [LinkUnbound](https://github.com/rgdevment/LinkUnbound) is installed, these web links go through it so it can pick the browser; otherwise they go straight to your default browser.
 

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="resources/icon_app_256.png" width="140" height="140" alt="CoPanda — Free Open Source Clipboard Manager for Windows and macOS"/>
+  <img src="resources/brand/copanda-head.svg" width="140" height="126" alt="CoPanda — Free Open Source Clipboard Manager for Windows and macOS"/>
 
   <h1>CoPanda (formerly CopyPaste) — Free Open Source Clipboard Manager</h1>
   <p><em>An extra thumb for your clipboard.</em></p>
@@ -92,23 +92,23 @@ This isn't a company product. I'm a developer who needed a better **copy paste**
 ## See CoPanda in Action
 
 <div align="center">
-    <img src="resources/demo.gif" alt="CoPanda clipboard manager demo — search clipboard history, paste with keyboard shortcuts, cross-platform on Windows and macOS"/>
+    <img src="resources/screens/demo.gif" alt="CoPanda clipboard manager demo — search clipboard history, paste with keyboard shortcuts, cross-platform on Windows and macOS"/>
 </div>
 <div align="center"><em>Fast search, clean cards, and a native feel across Windows and macOS.</em></div>
 
 <br/>
 
 <div align="center">
-    <img src="resources/3.2/en-7-panda.png" alt="CoPanda, an extra thumb for your clipboard: searchable, private and always on your machine" width="98%"/>
+    <img src="resources/screens/3.2/en-7-panda.png" alt="CoPanda, an extra thumb for your clipboard: searchable, private and always on your machine" width="98%"/>
     <br/><br/>
-    <img src="resources/3.2/en-1-hero.png" alt="CoPanda clipboard history — the panel with everything you copied, opened with Ctrl+Alt+V on Windows and macOS" width="49%"/>
-    <img src="resources/3.2/en-2-filters.png" alt="CoPanda copy tool — type #image, #link or #token to filter the clipboard history by kind" width="49%"/>
+    <img src="resources/screens/3.2/en-1-hero.png" alt="CoPanda clipboard history — the panel with everything you copied, opened with Ctrl+Alt+V on Windows and macOS" width="49%"/>
+    <img src="resources/screens/3.2/en-2-filters.png" alt="CoPanda copy tool — type #image, #link or #token to filter the clipboard history by kind" width="49%"/>
     <br/><br/>
-    <img src="resources/3.2/en-3-paste-as.png" alt="CoPanda paste as — paste a token as a header or curl, a colour in rgb(), JSON minified or a link in Markdown" width="49%"/>
-    <img src="resources/3.2/en-4-privacy.png" alt="CoPanda privacy — 100% local, no account, no telemetry, passwords from 1Password or Bitwarden are ignored" width="49%"/>
+    <img src="resources/screens/3.2/en-3-paste-as.png" alt="CoPanda paste as — paste a token as a header or curl, a colour in rgb(), JSON minified or a link in Markdown" width="49%"/>
+    <img src="resources/screens/3.2/en-4-privacy.png" alt="CoPanda privacy — 100% local, no account, no telemetry, passwords from 1Password or Bitwarden are ignored" width="49%"/>
     <br/><br/>
-    <img src="resources/3.2/en-5-settings.png" alt="CoPanda settings — light, dark or system theme, six accent colours and your own shortcut" width="49%"/>
-    <img src="resources/3.2/en-6-free.png" alt="CoPanda is a free and open source clipboard manager for Windows and macOS under GPL-3.0" width="49%"/>
+    <img src="resources/screens/3.2/en-5-settings.png" alt="CoPanda settings — light, dark or system theme, six accent colours and your own shortcut" width="49%"/>
+    <img src="resources/screens/3.2/en-6-free.png" alt="CoPanda is a free and open source clipboard manager for Windows and macOS under GPL-3.0" width="49%"/>
 </div>
 
 ---
@@ -675,19 +675,13 @@ way you work.
 
 I build free, open source tools focused on privacy and productivity. If you like CoPanda, you might also find these useful:
 
-<p align="center">
-  <a href="https://rgdevment.com/linkunbound/">
-    <img src="https://raw.githubusercontent.com/rgdevment/LinkUnbound/main/resources/assets/icon_256.png" alt="LinkUnbound" width="72" height="72"/>
-  </a>
-</p>
-
-### [LinkUnbound](https://rgdevment.com/linkunbound/)
+### <img src="app/src/linkunbound.svg" width="28" height="28" alt=""/> [LinkUnbound](https://www.linkunbound.app/)
 
 A free, open source browser picker for Windows and Mac. Every link you click gets intercepted — domain rules open the assigned browser instantly, or a small picker appears near your cursor to let you choose. Resolves Microsoft SafeLinks and redirect wrappers before matching rules.
 
 No ads. No telemetry. No accounts. Everything local.
 
-### [Tisty](https://rgdevment.com/tisty/)
+### <img src="app/src/tisty.svg" width="28" height="28" alt=""/> [Tisty](https://www.tisty.app/)
 
 Notes, documents and tasks that stay on your machine, in plain files you can read
 without it. Same rules as everything else here: no accounts, no telemetry, no cloud.

app/src-tauri/capabilities/default.json

@@ -17,6 +17,12 @@
         {
           "url": "https://rgdevment.com/*"
         },
+        {
+          "url": "https://www.tisty.app/*"
+        },
+        {
+          "url": "https://www.linkunbound.app/*"
+        },
         {
           "url": "https://github.com/*"
         },

app/src/index.css

@@ -873,15 +873,10 @@ button:disabled {
 }
 
 .tool .ico {
-  width: 24px;
-  height: 24px;
+  width: 28px;
+  height: 28px;
   flex: none;
-  display: grid;
-  place-items: center;
-  border-radius: var(--r-inset);
-  color: #ffffff;
-  font-size: var(--fs-small);
-  font-weight: 600;
+  object-fit: contain;
 }
 
 .tool b {
@@ -1508,15 +1503,17 @@ button:disabled {
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) .welcome-panda,
   :root:not([data-theme="light"]) .welcome-mark,
-  :root:not([data-theme="light"]) .brow .mark {
+  :root:not([data-theme="light"]) .brow .mark,
+  :root:not([data-theme="light"]) .tool .ico {
     filter: drop-shadow(0 0 1px rgb(248 250 255 / 0.9))
       drop-shadow(0 0 10px rgb(248 250 255 / 0.25));
   }
 }
 
 :root[data-theme="dark"] .welcome-panda,
 :root[data-theme="dark"] .welcome-mark,
-:root[data-theme="dark"] .brow .mark {
+:root[data-theme="dark"] .brow .mark,
+:root[data-theme="dark"] .tool .ico {
   filter: drop-shadow(0 0 1px rgb(248 250 255 / 0.9)) drop-shadow(0 0 10px rgb(248 250 255 / 0.25));
 }
 

app/src/tests/links.test.ts

@@ -5,7 +5,7 @@ import { LINKS } from "../ui/About";
 type Allowed = { url: string };
 type Permission = string | { identifier: string; allow?: Allowed[] };
 
-const TOOLS = ["https://rgdevment.com/tisty/", "https://rgdevment.com/linkunbound/"];
+const TOOLS = ["https://www.tisty.app/", "https://www.linkunbound.app/"];
 
 function allowed(): string[] {
   const said = readFileSync("src-tauri/capabilities/default.json", "utf8");
@@ -40,7 +40,7 @@ describe("the links in About", () => {
 
   it("the other tools lead to their own page, not to the repository", () => {
     for (const url of TOOLS) {
-      expect(url.startsWith("https://rgdevment.com/")).toBe(true);
+      expect(url.startsWith("https://github.com/")).toBe(false);
     }
   });
 });

app/src/ui/About.tsx

@@ -3,9 +3,11 @@ import { invoke } from "@tauri-apps/api/core";
 import { openUrl, revealItemInDir } from "@tauri-apps/plugin-opener";
 import { useEffect, useRef, useState } from "react";
 import { licences, notices, type Route, useUpdate } from "../core";
+import linkunbound from "../linkunbound.svg";
 import { fill, t } from "../locales";
 import { composed } from "../markdown";
 import panda from "../panda.svg";
+import tisty from "../tisty.svg";
 import { CloudOff, Code, Gift, Info, Key } from "./Icons";
 
 const STARS = "https://github.com/rgdevment/CopyPaste";
@@ -57,15 +59,15 @@ function Newer() {
 const TOOLS = [
   {
     name: "Tisty",
-    hue: "#7c6cf0",
+    icon: tisty,
     says: "toolTisty",
-    at: "https://rgdevment.com/tisty/",
+    at: "https://www.tisty.app/",
   },
   {
     name: "LinkUnbound",
-    hue: "#3fbfa6",
+    icon: linkunbound,
     says: "toolLinkUnbound",
-    at: "https://rgdevment.com/linkunbound/",
+    at: "https://www.linkunbound.app/",
   },
 ];
 
@@ -266,9 +268,7 @@ export default function About() {
       <div className="rule">{t("otherTools")}</div>
       {TOOLS.map((tool) => (
         <button key={tool.name} type="button" className="tool" onClick={() => go(tool.at)}>
-          <span className="ico" style={{ background: tool.hue }}>
-            {tool.name.slice(0, 1)}
-          </span>
+          <img className="ico" src={tool.icon} alt="" />
           <span style={{ flex: 1, minWidth: 0 }}>
             <b>{tool.name}</b>
             <span>