Dashboard: Give the issue, pull request, milestone and notification pages GitHub's list layout

components/common/sidebar/sidebar.js

@@ -1,6 +1,6 @@
 (() => {
   const mobile = matchMedia("(max-width: 767.98px)");
-  for (const page of document.querySelectorAll("[data-theme-sidebar]")) {
+  const init = page => {
     let collapsed = mobile.matches;
     try {
       if (!mobile.matches) collapsed = localStorage.getItem(page.dataset.themeSidebar) === "true";
@@ -31,5 +31,13 @@
       update();
     });
     update();
-  }
+  };
+  for (const page of document.querySelectorAll("[data-theme-sidebar]")) init(page);
+  // Forgejo replaces the whole notifications page element after an action; set the new one up too.
+  if (typeof MutationObserver === "undefined" || !document.body) return;
+  new MutationObserver(records => {
+    for (const record of records)
+      for (const node of record.addedNodes)
+        if (node instanceof Element && node.matches("[data-theme-sidebar]")) init(node);
+  }).observe(document.body, { childList: true, subtree: true });
 })();

public/assets/js/issue-list.js

@@ -5,8 +5,11 @@
   const form = page.querySelector(".issue-list-search");
   const input = form?.querySelector('input[name="q"]');
   if (!input) return;
-  input.setAttribute("aria-label", isPullList ? "Search pull requests" : "Search Issues");
-  input.placeholder = isPullList ? "Search all pull requests" : "Search Issues";
+  // The dashboard's milestone list reuses this layout and keeps its own translated placeholder.
+  if (!page.classList.contains("github-milestones")) {
+    input.setAttribute("aria-label", isPullList ? "Search pull requests" : "Search Issues");
+    input.placeholder = isPullList ? "Search all pull requests" : "Search Issues";
+  }
   const toolbar = page.querySelector("#issue-filters");
   const filterRow = toolbar?.querySelector(".issue-list-toolbar-right");
   if (filterRow) {

scripts/assembleForgejo.ts

@@ -43,7 +43,7 @@ for (const directory of ["common", "repository"]) {
   }
 }
 
-for (const file of ["organization.css", "profile-subpages.css", "user-profile.css"]) {
+for (const file of ["dashboard-lists.css", "organization.css", "profile-subpages.css", "user-profile.css"]) {
   cpSync(join(root, "styles", "pages", file), join(css, "components", "pages", file));
 }
 for (const file of readdirSync(join(root, "public"))) {

styles/pages/dashboard-lists.css

@@ -0,0 +1,144 @@
+/* The dashboard's own lists: issues, pull requests, milestones and notifications. */
+
+/* The context switcher sits at the top of the sidebar instead of in a bar across the page. */
+.dashboard-list-context .secondary-nav {
+  padding: 0;
+  border: 0 !important;
+  background: transparent;
+}
+
+.dashboard-list-context .ui.secondary.menu {
+  flex-direction: column;
+  align-items: stretch;
+  min-height: 0;
+  margin: 0;
+  padding: 0 8px;
+}
+
+.dashboard-list-context .ui.secondary.menu > .item {
+  margin: 0;
+  padding: 6px 8px;
+}
+
+/* Counts sit at the right edge of a sidebar entry, as in GitHub's sidebars. */
+:is(.dashboard-issue-list, .github-notifications) .theme-sidebar nav a > .theme-counter {
+  margin-left: auto;
+}
+
+:is(.dashboard-issue-list, .github-notifications) .theme-sidebar nav a > span:not(.theme-counter) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Milestones: the cards form one bordered list under the Open/Closed bar. */
+.github-milestones .milestone-list {
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--color-light-border);
+  border-top: 0;
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+  list-style: none;
+}
+
+.github-milestones .milestone-list > .milestone-card {
+  margin: 0;
+  padding: 12px 16px;
+  border: 0;
+  border-radius: 0;
+}
+
+.github-milestones .milestone-list > .milestone-card + .milestone-card {
+  border-top: 1px solid var(--color-light-border);
+}
+
+/* Notifications */
+.github-notifications-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 32px;
+  margin: 0 0 16px;
+}
+
+.github-notifications-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.github-notifications-title h1 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.github-notifications #notification_table {
+  overflow: hidden;
+  border: 1px solid var(--color-light-border);
+  border-radius: var(--border-radius);
+}
+
+.github-notifications .notifications-item {
+  min-height: 55px;
+  padding: 8px 16px !important;
+  background: var(--color-box-header);
+}
+
+.github-notifications .notifications-item + .notifications-item {
+  border-top: 1px solid var(--color-light-border);
+}
+
+/* Read notifications recede: no tint and a muted title. */
+.github-notifications .notifications-item[data-status="2"] {
+  background: transparent;
+}
+
+.github-notifications .notifications-item[data-status="2"] .issue-title {
+  color: var(--color-text-light-1);
+}
+
+.github-notifications .notifications-item:hover {
+  background: var(--color-hover);
+}
+
+.github-notifications .notifications-top-row {
+  color: var(--color-text-light-1);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.github-notifications .notifications-bottom-row {
+  padding: 0;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.github-notifications .notifications-updated {
+  color: var(--color-text-light-1);
+  font-size: 12px;
+}
+
+.github-notifications .notifications-buttons .btn {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: var(--border-radius);
+  color: var(--color-text-light-1);
+}
+
+.dashboard-list-context .ui.secondary.menu > .item {
+  align-self: flex-start;
+}
+
+/* Forgejo's milestone page gives the list header its own box; the shared heading has none. */
+.github-milestones .list-header.list-header-issues {
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+}

templates/base/component_assets.tmpl

@@ -11,6 +11,7 @@
 <script src="{{AssetUrlPrefix}}/js/components/common/dropdown/dropdown.js" defer></script>
 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/repository/results/results.css">
 <script src="{{AssetUrlPrefix}}/js/components/repository/results/results.js" defer></script>
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/pages/dashboard-lists.css">
 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/pages/organization.css">
 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/pages/profile-subpages.css">
 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/pages/user-profile.css">

templates/user/dashboard/issues.tmpl

@@ -0,0 +1,94 @@
+{{template "base/head" .}}
+{{/*
+	The dashboard's issue and pull request lists use the repository list's layout and classes
+	("repository issue-list") so they share its styles; nothing repository-specific is rendered.
+*/}}
+{{$keyword := StringUtils.RemoveAll $.Keyword "is:open" "-is:open" "is:closed" "-is:closed" "is:all"}}
+<div role="main" aria-label="{{.Title}}" class="page-content repository issue-list dashboard-issue-list theme-sidebar-layout{{if .PageIsPulls}} github-pull-list{{else}} github-issues{{end}}" data-theme-sidebar="{{if .PageIsPulls}}dashboard_pull_sidebar_collapsed{{else}}dashboard_issue_sidebar_collapsed{{end}}">
+	<aside class="theme-sidebar" aria-label="{{.Title}}">
+		<div class="theme-sidebar-content">
+			<div class="dashboard-list-context">{{template "user/dashboard/navbar" .}}</div>
+			<nav aria-label="{{ctx.Locale.Tr "repo.issues.filter_type"}}">
+				<a class="{{if eq .ViewType "your_repositories"}}active{{end}}" href="?type=your_repositories&sort={{$.SortType}}&project={{$.ProjectID}}&state={{.State}}&q={{$.Keyword}}">{{svg "octicon-repo" 16}}<span>{{ctx.Locale.Tr "home.issues.in_your_repos"}}</span><span class="theme-counter">{{CountFmt .IssueStats.YourRepositoriesCount}}</span></a>
+				<a class="{{if eq .ViewType "assigned"}}active{{end}}" href="?type=assigned&sort={{$.SortType}}&project={{$.ProjectID}}&state={{.State}}&q={{$.Keyword}}">{{svg "octicon-people" 16}}<span>{{ctx.Locale.Tr "repo.issues.filter_type.assigned_to_you"}}</span><span class="theme-counter">{{CountFmt .IssueStats.AssignCount}}</span></a>
+				<a class="{{if eq .ViewType "created_by"}}active{{end}}" href="?type=created_by&sort={{$.SortType}}&project={{$.ProjectID}}&state={{.State}}&q={{$.Keyword}}">{{svg "octicon-person" 16}}<span>{{ctx.Locale.Tr "repo.issues.filter_type.created_by_you"}}</span><span class="theme-counter">{{CountFmt .IssueStats.CreateCount}}</span></a>
+				<a class="{{if eq .ViewType "mentioned"}}active{{end}}" href="?type=mentioned&sort={{$.SortType}}&project={{$.ProjectID}}&state={{.State}}&q={{$.Keyword}}">{{svg "octicon-mention" 16}}<span>{{ctx.Locale.Tr "repo.issues.filter_type.mentioning_you"}}</span><span class="theme-counter">{{CountFmt .IssueStats.MentionCount}}</span></a>
+				{{if .PageIsPulls}}
+					<a class="{{if eq .ViewType "review_requested"}}active{{end}}" href="?type=review_requested&sort={{$.SortType}}&project={{$.ProjectID}}&state={{.State}}&q={{$.Keyword}}">{{svg "octicon-code-review" 16}}<span>{{ctx.Locale.Tr "repo.issues.filter_type.review_requested"}}</span><span class="theme-counter">{{CountFmt .IssueStats.ReviewRequestedCount}}</span></a>
+					<a class="{{if eq .ViewType "reviewed_by"}}active{{end}}" href="?type=reviewed_by&sort={{$.SortType}}&project={{$.ProjectID}}&state={{.State}}&q={{$.Keyword}}">{{svg "octicon-check-circle" 16}}<span>{{ctx.Locale.Tr "repo.issues.filter_type.reviewed_by_you"}}</span><span class="theme-counter">{{CountFmt .IssueStats.ReviewedCount}}</span></a>
+				{{end}}
+			</nav>
+		</div>
+		{{template "components/common/sidebar/toggle" .}}
+	</aside>
+	<div class="ui container issue-list-main theme-sidebar-main">
+		{{template "base/alert" .}}
+		<div class="list-header list-header-issues">
+			<div class="issue-list-title">
+				<button type="button" class="theme-icon-button" data-theme-sidebar-toggle data-theme-sidebar-expand aria-expanded="false" aria-label="Expand sidebar">{{svg "octicon-sidebar-expand" 16}}</button>
+				<h1>{{if eq .ViewType "assigned"}}{{ctx.Locale.Tr "repo.issues.filter_type.assigned_to_you"}}{{else if eq .ViewType "created_by"}}{{ctx.Locale.Tr "repo.issues.filter_type.created_by_you"}}{{else if eq .ViewType "mentioned"}}{{ctx.Locale.Tr "repo.issues.filter_type.mentioning_you"}}{{else if eq .ViewType "review_requested"}}{{ctx.Locale.Tr "repo.issues.filter_type.review_requested"}}{{else if eq .ViewType "reviewed_by"}}{{ctx.Locale.Tr "repo.issues.filter_type.reviewed_by_you"}}{{else}}{{ctx.Locale.Tr "home.issues.in_your_repos"}}{{end}}</h1>
+			</div>
+		</div>
+		<form class="list-header-search ui form ignore-dirty issue-list-search">
+			<input type="hidden" name="type" value="{{$.ViewType}}">
+			<input type="hidden" name="sort" value="{{$.SortType}}">
+			<input type="hidden" name="project" value={{$.ProjectID}}>
+			<input type="hidden" name="state" value="{{$.State}}">
+			{{if .PageIsPulls}}
+				{{template "components/common/search/search" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.pull_kind") "Tooltip" (ctx.Locale.Tr "explore.go_to")}}
+			{{else}}
+				{{template "components/common/search/search" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.issue_kind") "Tooltip" (ctx.Locale.Tr "explore.go_to")}}
+			{{end}}
+			{{template "shared/search/issue/syntax"}}
+		</form>
+		<div id="issue-filters" class="issue-list-toolbar">
+			<div class="issue-list-toolbar-left">
+				<div class="switch">
+					<a class="{{if not .IsShowClosed}}active {{end}}item" href="?type={{$.ViewType}}&sort={{$.SortType}}&project={{$.ProjectID}}&state=open&labels={{.SelectLabels}}&q={{$keyword}}" data-test-name="open-issue-count">
+						{{if .PageIsPulls}}{{svg "octicon-git-pull-request" 16}}{{else}}{{svg "octicon-issue-opened" 16}}{{end}}
+						{{ctx.Locale.PrettyNumber .IssueStats.OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}}
+					</a>
+					<a class="{{if .IsShowClosed}}active {{end}}item" href="?type={{$.ViewType}}&sort={{$.SortType}}&project={{$.ProjectID}}&state=closed&labels={{.SelectLabels}}&q={{$keyword}}" data-test-name="closed-issue-count">
+						{{svg "octicon-issue-closed" 16}}
+						{{ctx.Locale.PrettyNumber .IssueStats.ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}}
+					</a>
+				</div>
+			</div>
+			<div class="issue-list-toolbar-right">
+				<div class="ui secondary filter menu">
+					{{if .PageIsOrgIssues}}
+						{{template "shared/label_filter" .}}
+					{{end}}
+					<div class="list-header ui dropdown type jump item" data-test-tag="filter-project">
+						<span class="text tw-whitespace-nowrap">{{ctx.Locale.Tr "repo.issues.filter_project"}}</span>
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+						<div class="ui menu">
+							<a class="item" rel="nofollow" href="?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.filter_project_all"}}</a>
+							<a class="item" rel="nofollow" href="?type={{$.ViewType}}&sort={{$.SortType}}&project=-1&state={{$.State}}&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.filter_project_none"}}</a>
+							<div class="divider"></div>
+							{{range $project := $.Projects}}
+								<a class="{{if eq $.ProjectID $project.ID}}active {{end}}item" rel="nofollow" href="?type={{$.ViewType}}&sort={{$.SortType}}&project={{$project.ID}}&state={{$.State}}&q={{$.Keyword}}">{{svg $project.IconName 16 "tw-mr-2 tw-shrink-0"}}{{$project.Title}}</a>
+							{{end}}
+						</div>
+					</div>
+					<div class="list-header-sort ui dropdown type jump item">
+						<span class="text tw-whitespace-nowrap">{{ctx.Locale.Tr "repo.issues.filter_sort"}}</span>
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+						<div class="menu">
+							{{$sortKeyword := StringUtils.RemoveAllPrefix $.Keyword "sort:"}}
+							{{$o := .}}
+							{{range $opt := StringUtils.Make "recentupdate" "leastupdate" "latest" "oldest" "mostcomment" "leastcomment" "nearduedate" "farduedate"}}
+								{{$text := ctx.Locale.Tr (printf "repo.issues.filter_sort.%s" $opt)}}
+								<a class="{{if or (eq $o.SortType $opt) (and (eq $opt "latest") (not $o.SortType))}}active {{end}}item" href="?type={{$.ViewType}}&sort={{$opt}}&project={{$.ProjectID}}&state={{$.State}}&labels={{$o.SelectLabels}}&q={{$sortKeyword}}">{{$text}}</a>
+							{{end}}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		{{template "shared/issuelist" dict "." . "listType" "dashboard"}}
+	</div>
+</div>
+<script src="{{AssetUrlPrefix}}/js/issue-list.js" defer></script>
+<script src="{{AssetUrlPrefix}}/js/repository-labels.js" defer></script>
+{{template "base/footer" .}}