From 109e52f3630fbd58004227887e89eb7f68286e5c Mon Sep 17 00:00:00 2001
From: whereareiam <mmm.g032@gmail.com>
Date: Thu, 22 Oct 2026 18:42:51 +0200
Subject: [PATCH] feat(repo): GitHub's header, tab counters and repository
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Measured against github.com (signed in) at 1280, 1011, 900, 768, 600 and
400px. These parts are shared by every repository page, and the changes go
through the theme's shared components instead of page-specific copies:

- Global header: one transparent, outlined menu button before the logo
  opens the existing navigation drawer on every width; the logo is a bare
  32px mark and is dropped below 600px; the repository breadcrumb shows a
  repository icon instead of the owner avatar and folds the owner into a
  "…" menu on narrow screens. A transparent 197px search field (the shared
  search component, with a new monospace shortcut hint) searches
  repositories from 1012px, "/" focuses it, and a search button from the
  shared header icons replaces it below 1012px. On mobile the header keeps
  only search and the inbox; the drawer holds the dashboard links.
- Tabs: repository, organisation and profile tabs use the counter's tab
  variant (18px, semibold), 8px after the label; tab icons drop on mobile
  and the tabs keep a 16px gutter.
- Watch, Fork and Star are single small controls with the count inside;
  Fork gets a split menu with forks and "Fork repository" through the
  shared dropdown, which gains a small size and a square icon-only
  trigger. The feed button is gone, as on GitHub.
- Buttons: the shared control gets GitHub's 4px gap and muted icons at the
  small size, and sizes the branch selector and Add file buttons (14px,
  weight 500, 16px carets).
- The Code page uses GitHub's gutter: 16px, and 32px from 1012px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 components/common/button/button.css         | 57 ++++++++++++++++-
 components/common/dropdown/dropdown.tmpl    |  4 +-
 components/common/search/search.css         | 22 +++++++
 components/common/search/search.js          | 10 +++
 components/common/search/search.tmpl        |  5 +-
 public/assets/js/navbar-drawer.js           | 16 ++---
 public/navbar-drawer.css                    |  7 +++
 src/build-output.test.ts                    | 16 +++--
 src/navbar-drawer.test.ts                   | 15 +++--
 styles/components/navbar.ts                 | 50 ++++++++++++++-
 styles/pages/user-profile.css               |  2 +
 styles/templates/repo/header.ts             | 68 +++++++++------------
 styles/templates/repo/home.ts               | 13 ++--
 templates/base/head_navbar.tmpl             | 15 ++++-
 templates/base/head_navbar_icons.tmpl       | 12 +++-
 templates/base/navbar_breadcrumb_items.tmpl |  1 +
 templates/org/menu.tmpl                     | 10 +--
 templates/repo/global_header.tmpl           | 12 ++--
 templates/repo/header.tmpl                  |  6 +-
 templates/repo/header_fork.tmpl             | 49 +++++++++++++++
 templates/repo/header_fork_menu.tmpl        |  4 ++
 templates/repo/star_unstar.tmpl             | 11 ++++
 templates/repo/view_content.tmpl            |  2 +-
 templates/repo/watch_unwatch.tmpl           | 47 ++++++++++++++
 templates/user/overview/header.tmpl         |  8 +--
 25 files changed, 365 insertions(+), 97 deletions(-)
 create mode 100644 templates/base/navbar_breadcrumb_items.tmpl
 create mode 100644 templates/repo/header_fork.tmpl
 create mode 100644 templates/repo/header_fork_menu.tmpl
 create mode 100644 templates/repo/star_unstar.tmpl
 create mode 100644 templates/repo/watch_unwatch.tmpl

diff --git a/components/common/button/button.css b/components/common/button/button.css
index 14383318..9acbc975 100644
--- a/components/common/button/button.css
+++ b/components/common/button/button.css
@@ -22,6 +22,7 @@
 }
 
 .button.theme-control-small {
+  gap: 4px;
   height: 28px;
   min-height: 28px;
   padding: 0 8px;
@@ -29,10 +30,43 @@
   line-height: 18px;
 }
 
+/* A main action and its menu joined into one shape, like GitHub's Fork button. */
+.theme-control-split {
+  display: inline-flex;
+  align-items: stretch;
+}
+.theme-control-split > .theme-control {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.theme-control-split > .theme-dropdown > summary.theme-control {
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+/* An icon-only small menu trigger is a 28px square, like GitHub's "…" and split carets. */
+.theme-dropdown > summary.theme-control-small:not(:has(> span)) {
+  width: 28px;
+  padding: 0;
+}
+
 .theme-control:hover {
   background: var(--color-hover);
 }
 
+/* GitHub draws a default button's icons muted; a filled star keeps its own colour. */
+.theme-control:not(.primary) > svg:not(.octicon-star-fill) {
+  color: var(--color-text-light-1);
+}
+
+/* Forgejo sizes buttons in dropdown summaries through --button-min-height on more specific rules. */
+details > summary.button.theme-control {
+  min-height: 32px;
+}
+details > summary.button.theme-control-small {
+  min-height: 28px;
+}
+
 .theme-control:focus-visible {
   outline: 2px solid var(--github-fgColor-accent);
   outline-offset: 2px;
@@ -87,7 +121,9 @@
   .comment-code-cloud .field.footer .ui.ui.ui.button,
   .comment-code-cloud :is(.button-row, .button-sequence):has(.comment-form-reply) .ui.ui.ui.button,
   .page-content.repository.new.issue.github-issue-new .issue-content-left .text.right .ui.ui.ui.button,
-  .page-content.repository.new.release .ui.form .ui.ui.ui.button:not(.mini)
+  .page-content.repository.new.release .ui.form .ui.ui.ui.button:not(.mini),
+  .repo-button-row .ui.ui.ui.button.repo-add-file,
+  .js-branch-tag-selector .ui.ui.ui.button.branch-dropdown-button
 ) {
   height: 32px;
   min-height: 32px;
@@ -96,3 +132,22 @@
   font-weight: 500;
   line-height: 20px;
 }
+
+/* The branch selector is a Forgejo Vue component: GitHub sets its branch name in the button's weight and uses a
+   16px caret. */
+/* Its spacing comes from Forgejo's Tailwind utilities, which are !important. */
+.js-branch-tag-selector .ui.ui.ui.ui.button.branch-dropdown-button {
+  padding: 5px 12px !important;
+}
+.js-branch-tag-selector .branch-dropdown-button > .text {
+  gap: 8px;
+  margin-right: 0 !important;
+}
+.js-branch-tag-selector .branch-dropdown-button strong {
+  margin-left: 0 !important;
+  font-weight: inherit;
+}
+.js-branch-tag-selector .branch-dropdown-button > svg:last-child {
+  width: 16px;
+  height: 16px;
+}
diff --git a/components/common/dropdown/dropdown.tmpl b/components/common/dropdown/dropdown.tmpl
index 3663931f..502c92af 100644
--- a/components/common/dropdown/dropdown.tmpl
+++ b/components/common/dropdown/dropdown.tmpl
@@ -1,6 +1,6 @@
-{{/* Kind: single (radio), multiple (checkbox), or actions (links/buttons). Items owns page-specific content. */}}
+{{/* Kind: single (radio), multiple (checkbox), or actions (links/buttons). Items owns page-specific content. Small uses the 28px control. */}}
 <details class="theme-dropdown{{if .Quiet}} theme-dropdown-quiet{{end}}" data-theme-dropdown="{{.Kind}}">
-	<summary class="theme-control"{{if .IconOnly}} aria-label="{{.Label}}" data-tooltip-content="{{.Label}}"{{end}}>
+	<summary class="theme-control{{if .Small}} button theme-control-small{{end}}"{{if .IconOnly}} aria-label="{{.Label}}" data-tooltip-content="{{.Label}}"{{end}}>
 		{{if .Icon}}{{svg .Icon 16}}{{end}}
 		{{if not .IconOnly}}<span{{if .UpdateLabel}} data-theme-dropdown-label{{end}}>{{.Label}}</span>{{svg "octicon-triangle-down" 12}}{{end}}
 	</summary>
diff --git a/components/common/search/search.css b/components/common/search/search.css
index 0f317dd3..4d87e693 100644
--- a/components/common/search/search.css
+++ b/components/common/search/search.css
@@ -98,6 +98,28 @@
   display: none;
 }
 
+/* A shortcut hint, like the "/" in GitHub's header search; it gives way to the clear button once there is text. */
+.theme-search-field > .theme-search-shortcut {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  box-sizing: border-box;
+  min-width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  padding: 0 3px;
+  border: 1px solid var(--color-text-light-1);
+  border-radius: 3px;
+  box-shadow: none;
+  background: transparent;
+  color: var(--color-text-light-1);
+  font: 12px/1 var(--fonts-monospace);
+}
+
+.theme-search-field:not(:has(> input:placeholder-shown)) > .theme-search-shortcut {
+  display: none;
+}
+
 /* Syntax fields: a mirror behind the transparent input text colours qualifier values (author:<value>). */
 .theme-search-syntax-control {
   position: relative;
diff --git a/components/common/search/search.js b/components/common/search/search.js
index a8eee458..eb5fb60b 100644
--- a/components/common/search/search.js
+++ b/components/common/search/search.js
@@ -13,6 +13,16 @@
     if (applied && input.form) input.form.requestSubmit();
   });
 
+  // A field with a shortcut takes focus when its key is pressed outside another text field.
+  document.addEventListener("keydown", event => {
+    if (event.ctrlKey || event.metaKey || event.altKey || event.isComposing) return;
+    if (event.target.closest("input, textarea, select, [contenteditable]")) return;
+    const input = document.querySelector(`input[data-search-shortcut="${CSS.escape(event.key)}"]`);
+    if (!input || !input.checkVisibility()) return;
+    event.preventDefault();
+    input.focus();
+  });
+
   // Qualifiers Forgejo's issue search understands; their values are highlighted like GitHub's.
   const qualifiers = new Set(["is", "author", "assignee", "review", "mentions", "sort", "modified"]);
 
diff --git a/components/common/search/search.tmpl b/components/common/search/search.tmpl
index 34f5aa81..f26a9a1c 100644
--- a/components/common/search/search.tmpl
+++ b/components/common/search/search.tmpl
@@ -1,10 +1,11 @@
-{{/* Kind: submit (default, trailing search button), icon (leading search icon), or plain. Local marks a client-side filter that is never submitted. Class adds page layout hooks. Syntax adds GitHub's qualifier popup and value highlighting (issue and pull request searches). */}}
+{{/* Kind: submit (default, trailing search button), icon (leading search icon), or plain. Local marks a client-side filter that is never submitted. Class adds page layout hooks. Syntax adds GitHub's qualifier popup and value highlighting (issue and pull request searches). Shortcut shows a key that focuses the field from anywhere on the page. */}}
 {{$icon := eq .Kind "icon"}}
 {{if .Syntax}}<div class="theme-search-syntax-control">{{end}}
 {{if $icon}}<label class="theme-search-field theme-search-field-icon{{if .Class}} {{.Class}}{{end}}">{{svg "octicon-search" 16}}{{else}}<div class="theme-search-field{{if .Class}} {{.Class}}{{end}}">{{end}}
 	{{if .Syntax}}<span class="theme-search-input-wrap"><span class="theme-search-highlight" aria-hidden="true"></span>{{end}}
-	<input type="search"{{if .ID}} id="{{.ID}}"{{end}}{{if .Local}} autocomplete="off"{{else}} name="{{or .Name "q"}}" value="{{.Value}}" maxlength="255"{{end}}{{if .Syntax}} autocomplete="off" data-search-syntax role="combobox" aria-autocomplete="list" aria-expanded="false"{{end}} placeholder="{{.Placeholder}}" aria-label="{{or .Label .Placeholder}}" spellcheck="false" dir="auto">
+	<input type="search"{{if .ID}} id="{{.ID}}"{{end}}{{if .Local}} autocomplete="off"{{else}} name="{{or .Name "q"}}" value="{{.Value}}" maxlength="255"{{end}}{{if .Syntax}} autocomplete="off" data-search-syntax role="combobox" aria-autocomplete="list" aria-expanded="false"{{end}} placeholder="{{.Placeholder}}" aria-label="{{or .Label .Placeholder}}"{{if .Shortcut}} data-search-shortcut="{{.Shortcut}}" aria-keyshortcuts="{{.Shortcut}}"{{end}} spellcheck="false" dir="auto">
 	{{if .Syntax}}</span>{{end}}
+	{{if .Shortcut}}<kbd class="theme-search-shortcut" aria-hidden="true">{{.Shortcut}}</kbd>{{end}}
 	<button type="button" class="theme-search-clear" aria-label="Clear search" tabindex="-1">{{svg "octicon-x-circle-fill" 16}}</button>
 	{{if not (or $icon (eq .Kind "plain"))}}<button type="submit" class="theme-search-submit" aria-label="{{ctx.Locale.Tr "search.search"}}">{{svg "octicon-search" 16}}</button>{{end}}
 {{if $icon}}</label>{{else}}</div>{{end}}
diff --git a/public/assets/js/navbar-drawer.js b/public/assets/js/navbar-drawer.js
index 8fe194b5..e1d656d8 100644
--- a/public/assets/js/navbar-drawer.js
+++ b/public/assets/js/navbar-drawer.js
@@ -13,9 +13,13 @@
     extraNodes.push(node);
   }
 
+  // The drawer opens on every width, like GitHub's. Custom navbar links only move into it on mobile, where the
+  // navbar hides them; on desktop they stay in the navbar.
+  let movedExtras = false;
   toggle.addEventListener("click", () => {
-    if (!mobile.matches || drawer.open) return;
-    if (extraSlot && extraEnd) {
+    if (drawer.open) return;
+    movedExtras = mobile.matches && Boolean(extraSlot && extraEnd);
+    if (movedExtras) {
       extraSlot.hidden = !extraNodes.some(node => node.nodeType === 1 || node.textContent.trim());
       extraSlot.append(...extraNodes);
     }
@@ -41,11 +45,12 @@
     }
   });
   drawer.addEventListener("close", () => {
-    extraEnd?.before(...extraNodes);
+    if (movedExtras) extraEnd.before(...extraNodes);
+    movedExtras = false;
     toggle.setAttribute("aria-expanded", "false");
     document.documentElement.classList.remove("navbar-drawer-open");
     drawer.querySelectorAll("details[open]").forEach(details => (details.open = false));
-    if (mobile.matches) toggle.focus();
+    toggle.focus();
   });
 
   // A modal dialog reports backdrop clicks on the dialog itself. Check both
@@ -64,9 +69,6 @@
     if (backdropPress && event.target === drawer && outside(event)) drawer.close();
     backdropPress = false;
   });
-  mobile.addEventListener("change", () => {
-    if (!mobile.matches && drawer.open) drawer.close();
-  });
   window.addEventListener("pagehide", () => {
     if (drawer.open) drawer.close();
   });
diff --git a/public/navbar-drawer.css b/public/navbar-drawer.css
index 0f8f8d63..e7565be9 100644
--- a/public/navbar-drawer.css
+++ b/public/navbar-drawer.css
@@ -155,3 +155,10 @@ html.navbar-drawer-open {
     animation: none;
   }
 }
+
+/* On desktop the avatar and create menus stay in the header, as on GitHub, so the drawer only navigates. */
+@media (min-width: 768px) {
+  .navbar-drawer .navbar-drawer-group:has(> .navbar-drawer-create, > .navbar-drawer-account) {
+    display: none;
+  }
+}
diff --git a/src/build-output.test.ts b/src/build-output.test.ts
index 06a632d6..0d369c50 100644
--- a/src/build-output.test.ts
+++ b/src/build-output.test.ts
@@ -387,11 +387,17 @@ describe("Forgejo 15 native integration", () => {
       "utf-8"
     );
     const navbarTemplate = fs.readFileSync(path.join(ROOT_DIR, "templates", "base", "head_navbar.tmpl"), "utf-8");
+    const navbarStyle = fs.readFileSync(path.join(ROOT_DIR, "styles", "components", "navbar.ts"), "utf-8");
 
     expect(header).toContain("height: 52px;");
     expect(header).toContain("padding-top: 16px;");
     expect(header).toContain("border-bottom: 0;");
-    expect(header).toContain(".navbar-left > #navbar-logo.item");
+    // GitHub: the menu button, 12px, a bare 32px logo, 8px, "owner / repo" with a repository icon and no avatar.
+    expect(navbarStyle).toContain("&#navbar-logo {");
+    expect(navbarStyle).toContain("min-width: 32px;");
+    expect(navbarTemplate.indexOf('id="navbar-drawer-toggle"')).toBeLessThan(
+      navbarTemplate.indexOf('id="navbar-logo"')
+    );
     expect(header).toContain("height: 48px;");
     expect(header).toContain("gap: 8px;");
     expect(header).toContain("margin: 0 7px;");
@@ -401,8 +407,8 @@ describe("Forgejo 15 native integration", () => {
     expect(header).toContain("line-height: 21px;");
     expect(header).toContain("bottom: -8px;");
     expect(secondaryMenu).toContain(".overflow-menu-items {\n      gap: 8px;");
-    expect(navbarTemplate).toContain("{{ctx.AvatarUtils.Avatar .Owner 16}}");
-    expect(navbarTemplate).not.toContain('class="repository-navbar-owner-avatar"');
+    expect(navbarTemplate).not.toContain("{{ctx.AvatarUtils.Avatar .Owner 16}}");
+    expect(navbarTemplate).toContain("{{svg $repoIcon 16}}");
   });
 
   it("ships the mobile drawer assets and keeps its toggle independent of Forgejo's inline menu", () => {
@@ -615,7 +621,9 @@ describe("Forgejo 15 native integration", () => {
       expect(style).toContain("@media (max-width: 767.98px)");
     }
 
-    expect(headerStyle).toContain("padding-left: 8px;");
+    // GitHub keeps its 16px gutter on phones and drops the tab icons there.
+    expect(headerStyle).not.toContain("padding-left: 8px;");
+    expect(headerStyle).toContain(".overflow-menu-items > .item > svg {");
     expect(headerStyle).toContain(".repo-buttons");
     expect(viewContentStyle).toContain("> .repo-button-row-left");
     expect(viewContentStyle).toContain("> .repo-button-row-right");
diff --git a/src/navbar-drawer.test.ts b/src/navbar-drawer.test.ts
index cdfbfc94..c9332078 100644
--- a/src/navbar-drawer.test.ts
+++ b/src/navbar-drawer.test.ts
@@ -92,7 +92,7 @@ function fixture() {
   };
 }
 
-describe("mobile navigation drawer", () => {
+describe("navigation drawer", () => {
   it("opens once as a modal and restores focus, scroll, and disclosure state on close", () => {
     const f = fixture();
     f.toggle.emit("click");
@@ -132,16 +132,15 @@ describe("mobile navigation drawer", () => {
     expect(preventDefault).toHaveBeenCalledTimes(2);
   });
 
-  it("closes when crossing to desktop and does not reopen there", () => {
+  it("opens on desktop too, leaving the custom links in the navbar", () => {
     const f = fixture();
-    f.toggle.emit("click");
     f.media.matches = false;
-    f.media.emit("change");
     f.toggle.emit("click");
-    expect(f.drawer.open).toBe(false);
-    expect(f.drawer.showModal).toHaveBeenCalledTimes(1);
-    expect(f.classes.has("navbar-drawer-open")).toBe(false);
-    expect(f.toggle.focus).not.toHaveBeenCalled();
+    expect(f.drawer.showModal).toHaveBeenCalledOnce();
+    expect(f.slot.append).not.toHaveBeenCalled();
+    f.closeButton.emit("click");
+    expect(f.end.before).not.toHaveBeenCalled();
+    expect(f.toggle.focus).toHaveBeenCalledOnce();
   });
 
   it("moves existing custom links into the drawer and restores the same nodes", () => {
diff --git a/styles/components/navbar.ts b/styles/components/navbar.ts
index 11fe1e48..81bf7a36 100644
--- a/styles/components/navbar.ts
+++ b/styles/components/navbar.ts
@@ -35,6 +35,44 @@ const navbarRight = css`
       position: relative;
       text-decoration: none;
     }
+    /* GitHub: the menu button, 12px, the logo, 8px, the page's name. Header controls are transparent with a border. */
+    #navbar-drawer-toggle {
+      background: transparent;
+      &:hover {
+        background: ${themeVars.github.control.transparent.bgColor.hover};
+      }
+    }
+    /* GitHub's header search: a 197px field first on the right from 1012px, a search button below that. */
+    .navbar-search {
+      width: 197px;
+    }
+    .navbar-search-field {
+      padding-left: 12px;
+      background: transparent;
+    }
+    .navbar-search-button {
+      order: -1;
+    }
+    @media (min-width: 1012px) {
+      .navbar-search-button {
+        display: none !important;
+      }
+    }
+    @media (max-width: 1011.98px) {
+      .navbar-search {
+        display: none;
+      }
+    }
+    /* On mobile GitHub keeps only search and the inbox on the right; the drawer has the dashboard links. */
+    .navbar-mobile-right > .navbar-dashboard-link {
+      display: none !important;
+    }
+    /* GitHub drops the logo below 600px. */
+    @media (max-width: 599.98px) {
+      .navbar-left > #navbar-logo.item {
+        display: none;
+      }
+    }
     .navbar-left {
       gap: 8px;
       > .item {
@@ -48,10 +86,18 @@ const navbarRight = css`
           font-weight: 600;
         }
         &#navbar-logo {
-          /* 与下方的用户切换头像对齐 */
-          padding-left: 6px;
+          /* GitHub: a bare 32px mark 12px after the menu button. */
+          flex: none;
+          box-sizing: border-box;
+          width: 32px;
+          min-width: 32px;
+          height: 32px;
+          min-height: 32px;
+          margin-left: 4px;
+          padding: 0;
           &:hover {
             background: unset;
+            box-shadow: none;
           }
           img {
             height: 32px;
diff --git a/styles/pages/user-profile.css b/styles/pages/user-profile.css
index 99c496c2..68d36ba1 100644
--- a/styles/pages/user-profile.css
+++ b/styles/pages/user-profile.css
@@ -374,6 +374,8 @@
 }
 
 #navbar .profile-navbar-name {
+  /* Like the repository breadcrumb: the name starts 6px into its link. */
+  padding-inline: 6px;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/styles/templates/repo/header.ts b/styles/templates/repo/header.ts
index 6fb1e19f..9d6730b4 100644
--- a/styles/templates/repo/header.ts
+++ b/styles/templates/repo/header.ts
@@ -46,16 +46,6 @@ const repositoryHeader = css`
     gap: 8px;
   }
 
-  #navbar.repository-navbar .navbar-left > #navbar-logo.item {
-    box-sizing: border-box;
-    flex: none;
-    height: 32px;
-    min-height: 32px;
-    min-width: 32px;
-    padding: 0;
-    width: 32px;
-  }
-
   #navbar .repository-navbar-breadcrumb {
     align-items: center;
     display: flex;
@@ -80,20 +70,20 @@ const repositoryHeader = css`
     background: ${themeVars.color.nav.hoverBg};
   }
 
-  #navbar .repository-navbar-owner {
+  #navbar .repository-navbar-breadcrumb > a.repository-navbar-name {
     gap: 8px;
+    font-weight: 600;
+    padding: 4px;
   }
 
-  #navbar .repository-navbar-owner img {
-    border-radius: 9999px;
-    height: 16px;
-    margin: 0 !important;
-    width: 16px;
+  /* The owner menu only replaces the owner on narrow screens. */
+  #navbar .repository-navbar-breadcrumb > .theme-dropdown {
+    display: none;
   }
-
-  #navbar .repository-navbar-breadcrumb > a.repository-navbar-name {
-    font-weight: 600;
-    padding: 4px;
+  @media (max-width: 767.98px) {
+    #navbar .repository-navbar-breadcrumb > .theme-dropdown {
+      display: block;
+    }
   }
 
   #navbar .repository-navbar-separator {
@@ -158,6 +148,11 @@ const repositoryHeader = css`
   .repository-tab-nav.page-content.repository .ui.secondary.pointing.menu .overflow-menu-items > .item {
     border-bottom: 0 !important;
     box-sizing: border-box;
+    /* GitHub: 8px between the icon, the label and the counter. */
+    gap: 8px;
+    & > svg {
+      margin-right: 0;
+    }
     height: 32px;
     line-height: 21px;
     margin: 0 0 8px !important;
@@ -310,7 +305,7 @@ const repositoryHeader = css`
     z-index: 1;
   }
 
-  .page-content.repository > .secondary-nav .ui.secondary.pointing.menu .active.item > .ui.label::after {
+  .page-content.repository > .secondary-nav .ui.secondary.pointing.menu .active.item > .theme-counter::after {
     content: none;
   }
 
@@ -366,33 +361,28 @@ const repositoryHeader = css`
       flex: 1;
       min-width: 0;
     }
-    #navbar.repository-navbar .repository-navbar-owner,
-    #navbar.repository-navbar .repository-navbar-separator {
+    #navbar.repository-navbar .repository-navbar-owner {
       display: none;
     }
     #navbar.repository-navbar .repository-navbar-name {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: block;
+      min-width: 0;
+      & > span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      & > svg {
+        flex: none;
+      }
     }
     #navbar.repository-navbar .navbar-mobile-right {
       order: 2;
       flex-shrink: 0;
     }
 
-    #navbar.repository-navbar {
-      padding-left: 8px;
-      padding-right: 8px;
-    }
-
-    .repository-tab-nav.page-content.repository > .secondary-nav > overflow-menu.ui.container {
-      padding-left: 8px;
-      padding-right: 8px;
-    }
-
-    .repository-tab-nav.page-content.repository .ui.secondary.pointing.menu .overflow-menu-items {
-      gap: 4px;
+    /* GitHub drops the tab icons once the tabs run out of room; with Forgejo's longer tab list that is mobile. */
+    .repository-tab-nav.page-content.repository .ui.secondary.pointing.menu .overflow-menu-items > .item > svg {
+      display: none;
     }
 
     .page-content.repository > .repository-content-header {
diff --git a/styles/templates/repo/home.ts b/styles/templates/repo/home.ts
index 82508029..218d925a 100644
--- a/styles/templates/repo/home.ts
+++ b/styles/templates/repo/home.ts
@@ -33,13 +33,20 @@ const repositoryHome = css`
     grid-template-rows: auto auto 1fr;
   }
 
+  /* GitHub's page gutter: 16px, and 32px from 1012px. */
   .page-content.repository.file.list.repo-has-sidebar > .ui.container,
   .page-content.repository.file.list.repo-has-sidebar > .repository-content-header > .ui.container {
-    width: calc(100% - 64px);
+    width: calc(100% - 32px);
     max-width: 1216px;
     margin-left: auto;
     margin-right: auto;
   }
+  @media (min-width: 1012px) {
+    .page-content.repository.file.list.repo-has-sidebar > .ui.container,
+    .page-content.repository.file.list.repo-has-sidebar > .repository-content-header > .ui.container {
+      width: calc(100% - 64px);
+    }
+  }
   .page-content.repository.file.list.repo-has-sidebar > .repository-content-header > .ui.container {
     padding-bottom: 18px;
   }
@@ -224,10 +231,6 @@ const repositoryHome = css`
       order: 2;
     }
 
-    .page-content.repository.file.list.repo-has-sidebar > .ui.container,
-    .page-content.repository.file.list.repo-has-sidebar > .repository-content-header > .ui.container {
-      width: calc(100% - 32px);
-    }
     .page-content.repository.file.list .repo-grid-filelist-sidebar {
       grid-template-columns: 100%;
       grid-template-rows: auto auto auto;
diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index d5b44583..3b665489 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -8,6 +8,8 @@
 {{/* Forgejo 15 navigation adapted to the theme's GitHub-style layout. */}}
 <nav id="navbar"{{if .Repository}} class="repository-navbar"{{end}} aria-label="{{ctx.Locale.Tr "aria.navbar"}}">
 	<div class="navbar-left">
+		{{/* GitHub opens its navigation drawer from a button before the logo on every width. */}}
+		<button type="button" class="theme-icon-button theme-icon-button-outlined" id="navbar-drawer-toggle" aria-controls="navbar-drawer" aria-haspopup="dialog" aria-expanded="false" aria-label="{{ctx.Locale.Tr "toggle_menu"}}">{{svg "octicon-three-bars" 16}}</button>
 		<!-- the logo -->
 		<a class="item" id="navbar-logo" href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}">
 			<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
@@ -16,19 +18,20 @@
 		<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
 		<div class="ui secondary menu navbar-mobile-right only-mobile">
 			{{template "base/head_navbar_icons" dict "Data" .}}
-			<button class="item ui icon mini button tw-m-0" id="navbar-drawer-toggle" aria-controls="navbar-drawer" aria-haspopup="dialog" aria-expanded="false" aria-label="{{ctx.Locale.Tr "toggle_menu"}}">{{svg "octicon-three-bars"}}</button>
 		</div>
 
 		<!-- navbar links non-mobile -->
 		{{if .Repository}}
 			{{with .Repository}}
 			<div class="repository-navbar-breadcrumb not-mobile">
+				{{/* On narrow screens GitHub folds the owner into a menu before the slash. */}}
+				{{template "components/common/dropdown/dropdown" dict "Kind" "actions" "Icon" "octicon-kebab-horizontal" "IconOnly" true "Small" true "Quiet" true "Label" .Owner.Name "Items" "base/navbar_breadcrumb_items" "Data" $}}
 				<a class="repository-navbar-owner" href="{{.Owner.HomeLink}}">
-					{{ctx.AvatarUtils.Avatar .Owner 16}}
 					<span>{{.Owner.Name}}</span>
 				</a>
 				<span class="repository-navbar-separator">/</span>
-				<a class="repository-navbar-name" href="{{$.RepoLink}}">{{.Name}}</a>
+				{{$repoIcon := "octicon-repo"}}{{if .IsPrivate}}{{$repoIcon = "octicon-lock"}}{{else if .IsFork}}{{$repoIcon = "octicon-repo-forked"}}{{else if .IsMirror}}{{$repoIcon = "octicon-mirror"}}{{end}}
+				<a class="repository-navbar-name" href="{{$.RepoLink}}">{{svg $repoIcon 16}}<span>{{.Name}}</span></a>
 			</div>
 			{{end}}
 		{{else if $isOrganization}}
@@ -56,6 +59,12 @@
 
 	<!-- the full dropdown menus -->
 	<div class="navbar-right">
+		{{if not (and .IsSigned .HideNavbarLinks)}}
+			{{/* GitHub's search sits first on the right; here it searches repositories and "/" focuses it. */}}
+			<form class="navbar-search not-mobile" action="{{AppSubUrl}}/explore/repos" method="get" role="search">
+				{{template "components/common/search/search" dict "Kind" "icon" "Placeholder" (ctx.Locale.Tr "search.repo_kind") "Shortcut" "/" "Class" "navbar-search-field"}}
+			</form>
+		{{end}}
 		{{if and .IsSigned .HideNavbarLinks}}
 			<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
 				<span class="text">
diff --git a/templates/base/head_navbar_icons.tmpl b/templates/base/head_navbar_icons.tmpl
index 4c3b6279..023a9846 100644
--- a/templates/base/head_navbar_icons.tmpl
+++ b/templates/base/head_navbar_icons.tmpl
@@ -1,6 +1,12 @@
 {{/* Forgejo 15 navbar actions using the native route and data contracts. */}}
 {{- $itemExtraClass := .ItemExtraClass -}}
 {{- $data := .Data -}}
+{{if not (and $data.IsSigned $data.HideNavbarLinks)}}
+	{{/* Below 1012px GitHub's header search collapses to this button. */}}
+	<a class="item navbar-search-button {{$itemExtraClass}}" href="{{AppSubUrl}}/explore/repos" data-tooltip-content="{{ctx.Locale.Tr "search.repo_kind"}}" aria-label="{{ctx.Locale.Tr "search.repo_kind"}}">
+		{{svg "octicon-search"}}
+	</a>
+{{end}}
 {{if and $data $data.IsSigned}}
 	{{- $notificationUnreadCount := 0 -}}
 	{{- if $data.NotificationUnreadCount -}}
@@ -15,17 +21,17 @@
 	</a>
 	{{end}}
 	{{if not $data.UnitIssuesGlobalDisabled}}
-	<a class="item {{$itemExtraClass}}" href="{{AppSubUrl}}/issues" data-tooltip-content="{{ctx.Locale.Tr "issues"}}" aria-label="{{ctx.Locale.Tr "issues"}}">
+	<a class="item navbar-dashboard-link {{$itemExtraClass}}" href="{{AppSubUrl}}/issues" data-tooltip-content="{{ctx.Locale.Tr "issues"}}" aria-label="{{ctx.Locale.Tr "issues"}}">
 		{{svg "octicon-issue-opened"}}
 	</a>
 	{{end}}
 	{{if not $data.UnitPullsGlobalDisabled}}
-	<a class="item {{$itemExtraClass}}" href="{{AppSubUrl}}/pulls" data-tooltip-content="{{ctx.Locale.Tr "pull_requests"}}" aria-label="{{ctx.Locale.Tr "pull_requests"}}">
+	<a class="item navbar-dashboard-link {{$itemExtraClass}}" href="{{AppSubUrl}}/pulls" data-tooltip-content="{{ctx.Locale.Tr "pull_requests"}}" aria-label="{{ctx.Locale.Tr "pull_requests"}}">
 		{{svg "octicon-git-pull-request"}}
 	</a>
 	{{end}}
 	{{if and (not (and $data.UnitIssuesGlobalDisabled $data.UnitPullsGlobalDisabled)) $data.ShowMilestonesDashboardPage}}
-	<a class="item {{$itemExtraClass}}" href="{{AppSubUrl}}/milestones" data-tooltip-content="{{ctx.Locale.Tr "milestones"}}" aria-label="{{ctx.Locale.Tr "milestones"}}">
+	<a class="item navbar-dashboard-link {{$itemExtraClass}}" href="{{AppSubUrl}}/milestones" data-tooltip-content="{{ctx.Locale.Tr "milestones"}}" aria-label="{{ctx.Locale.Tr "milestones"}}">
 		{{svg "octicon-milestone"}}
 	</a>
 	{{end}}
diff --git a/templates/base/navbar_breadcrumb_items.tmpl b/templates/base/navbar_breadcrumb_items.tmpl
new file mode 100644
index 00000000..bfb07cb6
--- /dev/null
+++ b/templates/base/navbar_breadcrumb_items.tmpl
@@ -0,0 +1 @@
+<a class="theme-dropdown-action" href="{{.Repository.Owner.HomeLink}}">{{svg "octicon-person" 16}}{{.Repository.Owner.Name}}</a>
diff --git a/templates/org/menu.tmpl b/templates/org/menu.tmpl
index ec0961bd..58de900d 100644
--- a/templates/org/menu.tmpl
+++ b/templates/org/menu.tmpl
@@ -8,7 +8,7 @@
 		<a class="{{if and .PageIsViewRepositories $repositories}}active {{end}}item" href="{{$.Org.HomeLink}}?tab=repositories"{{if and .PageIsViewRepositories $repositories}} aria-current="page"{{end}}>
 			{{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}}
 			{{if .RepoCount}}
-				<span class="theme-counter profile-nav-count">{{.RepoCount}}</span>
+				<span class="theme-counter theme-counter-tab profile-nav-count">{{.RepoCount}}</span>
 			{{end}}
 			<span hidden test-name="repository-count">{{.RepoCount}}</span>
 		</a>
@@ -16,7 +16,7 @@
 		<a class="{{if .PageIsViewProjects}}active {{end}}item" href="{{$.Org.HomeLink}}/-/projects"{{if .PageIsViewProjects}} aria-current="page"{{end}}>
 			{{svg "octicon-project-symlink"}} {{ctx.Locale.Tr "user.projects"}}
 			{{if .ProjectCount}}
-				<span class="theme-counter profile-nav-count">{{.ProjectCount}}</span>
+				<span class="theme-counter theme-counter-tab profile-nav-count">{{.ProjectCount}}</span>
 			{{end}}
 			<span hidden test-name="project-count">{{.ProjectCount}}</span>
 		</a>
@@ -25,7 +25,7 @@
 		<a class="{{if .IsPackagesPage}}active {{end}}item" href="{{$.Org.HomeLink}}/-/packages"{{if .IsPackagesPage}} aria-current="page"{{end}}>
 			{{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}}
 			{{if .PackageCount}}
-				<span class="theme-counter profile-nav-count">{{.PackageCount}}</span>
+				<span class="theme-counter theme-counter-tab profile-nav-count">{{.PackageCount}}</span>
 			{{end}}
 			<span hidden test-name="package-count">{{.PackageCount}}</span>
 		</a>
@@ -39,7 +39,7 @@
 		<a class="{{if $.PageIsOrgTeams}}active {{end}}item" href="{{$.OrgLink}}/teams"{{if .PageIsOrgTeams}} aria-current="page"{{end}}>
 			{{svg "octicon-people"}} {{ctx.Locale.Tr "org.teams"}}
 			{{if .NumTeams}}
-				<span class="theme-counter profile-nav-count">{{.NumTeams}}</span>
+				<span class="theme-counter theme-counter-tab profile-nav-count">{{.NumTeams}}</span>
 			{{end}}
 		</a>
 		{{end}}
@@ -47,7 +47,7 @@
 		{{if .NumMembers}}
 		<a class="{{if $.PageIsOrgMembers}}active {{end}}item" href="{{$.OrgLink}}/members"{{if .PageIsOrgMembers}} aria-current="page"{{end}}>
 			{{svg "octicon-person"}} {{ctx.Locale.Tr "org.members"}}
-			<span class="theme-counter profile-nav-count">{{.NumMembers}}</span>
+			<span class="theme-counter theme-counter-tab profile-nav-count">{{.NumMembers}}</span>
 		</a>
 		{{end}}
 		<span hidden test-name="member-count">{{.NumMembers}}</span>
diff --git a/templates/repo/global_header.tmpl b/templates/repo/global_header.tmpl
index 88107755..f2e573c7 100644
--- a/templates/repo/global_header.tmpl
+++ b/templates/repo/global_header.tmpl
@@ -13,7 +13,7 @@
 					<a class="{{if .PageIsIssueList}}active {{end}}item" href="{{.RepoLink}}/issues">
 						{{svg "octicon-issue-opened"}} {{ctx.Locale.Tr "repo.issues"}}
 						{{if (.Repository.NumOpenIssues ctx)}}
-							<span class="ui small label">{{CountFmt (.Repository.NumOpenIssues ctx)}}</span>
+							<span class="theme-counter theme-counter-tab">{{CountFmt (.Repository.NumOpenIssues ctx)}}</span>
 						{{end}}
 					</a>
 				{{end}}
@@ -28,7 +28,7 @@
 					<a class="{{if .PageIsPullList}}active {{end}}item" href="{{.RepoLink}}/pulls?state=open">
 						{{svg "octicon-git-pull-request"}} {{ctx.Locale.Tr "repo.pulls"}}
 						{{if (.Repository.NumOpenPulls ctx)}}
-							<span class="ui small label">{{CountFmt (.Repository.NumOpenPulls ctx)}}</span>
+							<span class="theme-counter theme-counter-tab">{{CountFmt (.Repository.NumOpenPulls ctx)}}</span>
 						{{end}}
 					</a>
 				{{end}}
@@ -37,7 +37,7 @@
 					<a href="{{.RepoLink}}/projects" class="{{if .IsProjectsPage}}active {{end}}item">
 						{{svg "octicon-project"}} {{ctx.Locale.Tr "repo.project"}}
 						{{if .Repository.NumOpenProjects}}
-							<span class="ui small label">{{CountFmt .Repository.NumOpenProjects}}</span>
+							<span class="theme-counter theme-counter-tab">{{CountFmt .Repository.NumOpenProjects}}</span>
 						{{end}}
 					</a>
 				{{end}}
@@ -46,7 +46,7 @@
 					<a class="{{if or .PageIsReleaseList .PageIsTagList}}active {{end}}item" href="{{.RepoLink}}/releases">
 						{{svg "octicon-tag"}} {{ctx.Locale.Tr "repo.releases"}}
 						{{if .NumReleases}}
-							<span class="ui small label">{{CountFmt .NumReleases}}</span>
+							<span class="theme-counter theme-counter-tab">{{CountFmt .NumReleases}}</span>
 						{{end}}
 					</a>
 				{{end}}
@@ -55,7 +55,7 @@
 					<a href="{{.RepoLink}}/packages" class="{{if .IsPackagesPage}}active {{end}}item">
 						{{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}}
 						{{if .NumPackages}}
-							<span class="ui small label">{{CountFmt .NumPackages}}</span>
+							<span class="theme-counter theme-counter-tab">{{CountFmt .NumPackages}}</span>
 						{{end}}
 					</a>
 				{{end}}
@@ -82,7 +82,7 @@
 					<a class="{{if .PageIsActions}}active {{end}}item" href="{{.RepoLink}}/actions">
 						{{svg "octicon-play"}} {{ctx.Locale.Tr "actions.actions"}}
 						{{if .NumOpenActionRuns}}
-							<span class="ui small label">{{CountFmt .NumOpenActionRuns}}</span>
+							<span class="theme-counter theme-counter-tab">{{CountFmt .NumOpenActionRuns}}</span>
 						{{end}}
 					</a>
 				{{end}}
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 2c357a6d..e93f2da8 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -57,11 +57,7 @@
 							</div>
 						</form>
 					{{end}}
-					{{if $.EnableFeed}}
-					<a class="ui compact small basic button" href="{{$.RepoLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
-						{{svg "octicon-rss" 16}}
-					</a>
-					{{end}}
+					{{/* GitHub has no feed button here; the feed stays linked from the page head. */}}
 					{{template "repo/watch_unwatch" $}}
 					{{if not $.DisableForks}}
 					{{template "repo/header_fork" $}}
diff --git a/templates/repo/header_fork.tmpl b/templates/repo/header_fork.tmpl
new file mode 100644
index 00000000..b86c94d7
--- /dev/null
+++ b/templates/repo/header_fork.tmpl
@@ -0,0 +1,49 @@
+{{with .Repository}}
+{{if and (not .IsEmpty) ($.Permission.CanRead $.UnitTypeCode)}}
+	{{/* GitHub's Fork button: the count inside, and a menu for existing forks and a new fork beside it. */}}
+	{{$disabled := or (not $.IsSigned) (and (not $.CanSignedUserFork) (not $.UserAndOrgForks))}}
+	<div class="theme-control-split repo-header-fork">
+		<a class="button theme-control theme-control-small repo-header-control{{if $.ShowForkModal}} show-modal{{end}}{{if $disabled}} disabled{{end}}"
+			{{if not $.IsSigned}}
+				data-tooltip-content="{{ctx.Locale.Tr "repo.fork_guest_user"}}"
+			{{else if and (not $.CanSignedUserFork) (not $.UserAndOrgForks)}}
+				data-tooltip-content="{{ctx.Locale.Tr "repo.fork_from_self"}}"
+			{{end}}
+			{{if not $.CanSignedUserFork}}
+				{{if gt (len $.UserAndOrgForks) 1}}
+					href="#" data-modal="#fork-repo-modal"
+				{{else if eq (len $.UserAndOrgForks) 1}}
+					href="{{AppSubUrl}}/{{(index $.UserAndOrgForks 0).FullName}}"
+				{{/*else is not required here, because the button shouldn't link to any site if you can't create a fork*/}}
+				{{end}}
+			{{else if not $.UserAndOrgForks}}
+				href="{{$.RepoLink}}/fork"
+			{{else}}
+				href="#" data-modal="#fork-repo-modal"
+			{{end}}
+		>
+			{{svg "octicon-repo-forked"}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.fork"}}</span>
+			<span class="theme-counter theme-counter-tab" aria-label="{{ctx.Locale.TrPluralString .NumForks "fork.n_forks" (printf "%d" .NumForks)}}">{{CountFmt .NumForks}}</span>
+		</a>
+		{{template "components/common/dropdown/dropdown" dict "Kind" "actions" "Icon" "octicon-triangle-down" "IconOnly" true "Small" true "Label" (ctx.Locale.Tr "repo.forks") "Items" "repo/header_fork_menu" "Data" $}}
+		<dialog id="fork-repo-modal">
+			<article>
+				<header>{{ctx.Locale.Tr "repo.already_forked" .Name}}</header>
+				<div class="content tw-text-left">
+					<div class="ui list">
+						{{range $.UserAndOrgForks}}
+							<div class="ui item tw-py-2">
+								<a href="{{.Link}}">{{svg "octicon-repo-forked" 16 "tw-mr-2"}}{{.FullName}}</a>
+							</div>
+						{{end}}
+					</div>
+					{{if $.CanSignedUserFork}}
+					<div class="divider"></div>
+					<a href="{{$.RepoLink}}/fork">{{ctx.Locale.Tr "repo.fork_to_different_account"}}</a>
+					{{end}}
+				</div>
+			</article>
+		</dialog>
+	</div>
+{{end}}
+{{end}}
diff --git a/templates/repo/header_fork_menu.tmpl b/templates/repo/header_fork_menu.tmpl
new file mode 100644
index 00000000..7dbb3e8f
--- /dev/null
+++ b/templates/repo/header_fork_menu.tmpl
@@ -0,0 +1,4 @@
+<a class="theme-dropdown-action" href="{{.Repository.Link}}/forks">{{svg "octicon-repo-forked" 16}}{{ctx.Locale.Tr "repo.forks"}}</a>
+{{if .CanSignedUserFork}}
+	<a class="theme-dropdown-action" href="{{.RepoLink}}/fork">{{svg "octicon-plus" 16}}{{ctx.Locale.Tr "repo.fork_repo"}}</a>
+{{end}}
diff --git a/templates/repo/star_unstar.tmpl b/templates/repo/star_unstar.tmpl
new file mode 100644
index 00000000..9d32e522
--- /dev/null
+++ b/templates/repo/star_unstar.tmpl
@@ -0,0 +1,11 @@
+<form hx-target="this" hx-post="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star" hx-on::after-settle="this.querySelector('button').focus()" method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star">
+	{{/* GitHub's Star button: one control with the count inside. Forgejo has no star lists, so there is no menu. */}}
+	<button type="submit" class="button theme-control theme-control-small repo-header-control{{if $.IsStaringRepo}} repo-header-starred{{end}}"{{if not $.IsSigned}} disabled data-tooltip-content="{{ctx.Locale.Tr "repo.star_guest_user"}}"{{end}} aria-label="{{if $.IsStaringRepo}}{{ctx.Locale.Tr "repo.unstar"}}{{else}}{{ctx.Locale.Tr "repo.star"}}{{end}}">
+		{{if $.IsStaringRepo}}
+			{{svg "octicon-star-fill"}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.unstar"}}</span>
+		{{else}}
+			{{svg "octicon-star"}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.star"}}</span>
+		{{end}}
+		<span class="theme-counter theme-counter-tab" aria-label="{{ctx.Locale.TrPluralString .Repository.NumStars "stars.n_stars" (printf "%d" .Repository.NumStars)}}">{{CountFmt .Repository.NumStars}}</span>
+	</button>
+</form>
diff --git a/templates/repo/view_content.tmpl b/templates/repo/view_content.tmpl
index 3ce3e28e..58543349 100644
--- a/templates/repo/view_content.tmpl
+++ b/templates/repo/view_content.tmpl
@@ -48,7 +48,7 @@
 		{{if and .CanWriteCode .IsViewBranch (not .Repository.IsMirror) (not .Repository.IsArchived) (not .IsViewFile)}}
 			<button class="ui dropdown basic compact jump button repo-add-file"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
 				{{ctx.Locale.Tr "file_editor.add_file"}}
-				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				{{svg "octicon-triangle-down" 16 "dropdown icon"}}
 				<div class="menu">
 					<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
 						{{svg "octicon-plus" 16}}{{ctx.Locale.Tr "file_editor.new_file"}}
diff --git a/templates/repo/watch_unwatch.tmpl b/templates/repo/watch_unwatch.tmpl
new file mode 100644
index 00000000..a2e847c2
--- /dev/null
+++ b/templates/repo/watch_unwatch.tmpl
@@ -0,0 +1,47 @@
+{{if $.IsSigned}}
+	<details class="dropdown" id="watch-button">
+		{{/* GitHub's Watch button: one control with the count inside, opening the notification choices. */}}
+		<summary class="button theme-control theme-control-small repo-header-control">
+			{{svg "octicon-eye" 16}}
+			<span class="text not-mobile">{{if $.RepoWatchSelection.IsWatching}}{{ctx.Locale.Tr "repo.watching"}}{{else}}{{ctx.Locale.Tr "repo.watch"}}{{end}}</span>
+			<span class="theme-counter theme-counter-tab" aria-label="{{ctx.Locale.TrPluralString .Repository.NumWatches "watch.n_watchers" (printf "%d" .Repository.NumWatches)}}">{{CountFmt .Repository.NumWatches}}</span>
+			{{svg "octicon-triangle-down" 16}}
+		</summary>
+		<div class="content">
+			<form class="ui form tw-p-3" hx-target="#watch-button" method="post" hx-post="{{$.RepoLink}}/action/watch/select" action="{{$.RepoLink}}/action/watch/select" hx-swap="outerHTML">
+				<fieldset>
+					<label>
+						<input type="checkbox" name="watch_issues" value="true" {{if $.RepoWatchSelection.Issues}}checked{{end}}>
+						{{svg "octicon-issue-opened"}}
+						{{ctx.Locale.Tr "repo.watch.issues"}}
+					</label>
+					<label>
+						<input type="checkbox" name="watch_pull_requests" value="true" {{if $.RepoWatchSelection.PullRequests}}checked{{end}}>
+						{{svg "octicon-git-pull-request"}}
+						{{ctx.Locale.Tr "repo.watch.pull_requests"}}
+					</label>
+					<label>
+						<input type="checkbox" name="watch_releases" value="true" {{if $.RepoWatchSelection.Releases}}checked{{end}}>
+						{{svg "octicon-tag"}}
+						{{ctx.Locale.Tr "repo.watch.releases"}}
+						<span class="help">{{ctx.Locale.Tr "repo.watch.releases.hint"}}</span>
+					</label>
+					<div class="small button-sequence tw-mt-3">
+						<button type="submit" class="primary button">{{ctx.Locale.Tr "save"}}</button>
+						{{if $.RepoWatchSelection.IsWatching}}
+							<button type="button" class="secondary button" hx-post="{{$.RepoLink}}/action/unwatch" hx-target="#watch-button" hx-swap="outerHTML">
+								{{ctx.Locale.Tr "repo.unwatch"}}
+							</button>
+						{{end}}
+					</div>
+				</fieldset>
+			</form>
+		</div>
+	</details>
+{{else}}
+	{{/* not logged-in user */}}
+	<a class="button theme-control theme-control-small repo-header-control" href="{{.RepoLink}}/watchers" data-tooltip-content="{{ctx.Locale.Tr "repo.watch_guest_user"}}">
+		{{svg "octicon-eye" 16}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.watch"}}</span>
+		<span class="theme-counter theme-counter-tab" aria-label="{{ctx.Locale.TrPluralString .Repository.NumWatches "watch.n_watchers" (printf "%d" .Repository.NumWatches)}}">{{CountFmt .Repository.NumWatches}}</span>
+	</a>
+{{end}}
diff --git a/templates/user/overview/header.tmpl b/templates/user/overview/header.tmpl
index 14353694..c6b755b0 100644
--- a/templates/user/overview/header.tmpl
+++ b/templates/user/overview/header.tmpl
@@ -10,7 +10,7 @@
 		<a class="{{if eq .TabName "repositories"}}active {{end}} item" href="{{.ContextUser.HomeLink}}?tab=repositories"{{if eq .TabName "repositories"}} aria-current="page"{{end}}>
 			{{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}}
 			{{if .RepoCount}}
-				<span class="theme-counter profile-nav-count">{{.RepoCount}}</span>
+				<span class="theme-counter theme-counter-tab profile-nav-count">{{.RepoCount}}</span>
 			{{end}}
 			<span hidden test-name="repository-count">{{.RepoCount}}</span>
 		</a>
@@ -18,7 +18,7 @@
 		<a href="{{.ContextUser.HomeLink}}/-/projects"{{if .PageIsViewProjects}} aria-current="page"{{end}} class="{{if .PageIsViewProjects}}active {{end}}item">
 			{{svg "octicon-project-symlink"}} {{ctx.Locale.Tr "user.projects"}}
 			{{if .ProjectCount}}
-				<span class="theme-counter profile-nav-count">{{.ProjectCount}}</span>
+				<span class="theme-counter theme-counter-tab profile-nav-count">{{.ProjectCount}}</span>
 			{{end}}
 			<span hidden test-name="project-count">{{.ProjectCount}}</span>
 		</a>
@@ -27,7 +27,7 @@
 			<a href="{{.ContextUser.HomeLink}}/-/packages"{{if .IsPackagesPage}} aria-current="page"{{end}} class="{{if .IsPackagesPage}}active {{end}}item">
 				{{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}}
 				{{if .PackageCount}}
-					<span class="theme-counter profile-nav-count">{{.PackageCount}}</span>
+					<span class="theme-counter theme-counter-tab profile-nav-count">{{.PackageCount}}</span>
 				{{end}}
 				<span hidden test-name="package-count">{{.PackageCount}}</span>
 			</a>
@@ -52,7 +52,7 @@
 			<a class="{{if eq .TabName "stars"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=stars"{{if eq .TabName "stars"}} aria-current="page"{{end}}>
 				{{svg "octicon-star"}} {{ctx.Locale.Tr "user.starred"}}
 				{{if .ContextUser.NumStars}}
-					<span class="theme-counter profile-nav-count">{{.ContextUser.NumStars}}</span>
+					<span class="theme-counter theme-counter-tab profile-nav-count">{{.ContextUser.NumStars}}</span>
 				{{end}}
 			</a>
 			{{else}}