fix: ctrl+click, shared pill rendering, header layout — all in one

Three recurring issues fixed together:

1. Ctrl+click: All protocol and collection pills now use <a href>
   instead of <div onclick>, so ctrl/cmd+click opens in new tab.
   text-decoration:none and color:inherit prevent link styling.

2. Consistent modules: Shared renderProtocolPill() and
   renderCollectionPill() functions used everywhere — library,
   collections list, collection detail, user profile. All produce
   identical HTML with .protocol-grid wrapper for consistent spacing.
   Profile collections no longer have .icon divs.

3. Header layout: Logo (32px) on left with crumb-text wrapper.
   $ protocol-droid on first line, crumb path below it.
   Favicon links and PWA manifest restored.
   Relative paths (frontend/ not /frontend/) for subdirectory support.
This commit is contained in:
Protocolbot
2026-07-09 09:46:31 -06:00
parent 10ee5fe1df
commit b5ce383147
3 changed files with 43 additions and 41 deletions
+11 -4
View File
@@ -4,15 +4,22 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protocol Droid</title>
<link rel="stylesheet" href="/frontend/style.css">
<link rel="icon" type="image/svg+xml" href="frontend/logo.svg">
<link rel="icon" type="image/x-icon" href="frontend/favicon.ico">
<link rel="apple-touch-icon" href="frontend/icon-192.png">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="frontend/style.css">
<meta name="theme-color" content="#0a1929">
</head>
<body>
<header>
<div class="breadcrumb" onclick="navigate('library')">
<span><span class="prompt">$</span> protocol-droid</span>
<span class="crumb-path" id="crumbPath"></span>
<img src="frontend/logo.svg" class="header-logo" alt="">
<div class="crumb-text">
<span><span class="prompt">$</span> protocol-droid</span>
<span class="crumb-path" id="crumbPath"></span>
</div>
</div>
<nav id="navBar">
<a href="#library" class="active" data-view="library">PROTOCOLS</a>
@@ -259,6 +266,6 @@
</main>
<script src="/frontend/app.js"></script>
<script src="frontend/app.js"></script>
</body>
</html>