Skip to content

Notifications: Moved subscriptions and watching beside the notifications sidebar #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
whereareiam merged 1 commit into from
Oct 23, 2026
Merged

Notifications: Moved subscriptions and watching beside the notifications sidebar #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion components/common/box-list/box-list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,15 @@
font-weight: 600;
}

.theme-box-list-header > .theme-dropdown > summary.theme-control {
/* More than one menu on the right of the header (Type and Sort). */
.theme-box-list-filters {
display: flex;
align-items: center;
gap: 4px;
}

.theme-box-list-header > .theme-dropdown > summary.theme-control,
.theme-box-list-filters > .theme-dropdown > summary.theme-control {
font-weight: 400;
}

Expand Down
10 changes: 10 additions & 0 deletions src/build-output.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -661,6 +661,16 @@ describe("Forgejo 15 native integration", () => {
expect(layout).toContain('template "components/common/settings/context"');
});

it("shows subscriptions and watched repositories in the notifications sidebar layout", () => {
const read = (...parts: string[]) =>
fs.readFileSync(path.join(ROOT_DIR, "templates", "user", "notification", ...parts), "utf-8");
expect(read("notification_div.tmpl")).toContain('template "user/notification/sidebar"');
const subscriptions = read("notification_subscriptions.tmpl");
expect(subscriptions).toContain('template "user/notification/sidebar" dict "Data" . "Current" $current');
expect(subscriptions).toContain('"Items" "user/notification/subscriptions_sort"');
expect(read("sidebar.tmpl")).toContain('href="{{AppSubUrl}}/notifications/watching"');
});

it("matches GitHub's repository About, visibility, and code-search details", () => {
const headerStyle = fs.readFileSync(path.join(ROOT_DIR, "styles", "templates", "repo", "header.ts"), "utf-8");
const headerTemplate = fs.readFileSync(path.join(ROOT_DIR, "templates", "repo", "home_header.tmpl"), "utf-8");
Expand Down
8 changes: 7 additions & 1 deletion styles/pages/dashboard-lists.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* The dashboard's own lists: issues, pull requests and notifications. */
/* The dashboard's own lists: issues, pull requests, notifications and subscriptions. */

/* The context switcher sits at the top of the sidebar instead of in a bar across the page. */
.dashboard-list-context .secondary-nav {
Expand Down Expand Up @@ -84,3 +84,9 @@
.dashboard-list-context .ui.secondary.menu > .item {
align-self: flex-start;
}

/* Subscriptions: the issue list sits in the box under its header instead of drawing its own border. As specific as
the issue list rule for notification pages, and loaded after it. */
.page-content.user.notification .theme-box-list #issue-list {
border: 0;
}
15 changes: 2 additions & 13 deletions templates/user/notification/notification_div.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,7 @@
<div role="main" aria-label="{{.Title}}" class="page-content user notification theme-sidebar-layout github-notifications" id="notification_div" data-sequence-number="{{.SequenceNumber}}" data-theme-sidebar="notification_sidebar_collapsed">
{{$notificationUnreadCount := call .NotificationUnreadCount}}
<aside class="theme-sidebar" aria-label="{{.Title}}">
<div class="theme-sidebar-content">
<nav aria-label="{{.Title}}">
<a class="{{if eq .Status 1}}active{{end}}" href="{{AppSubUrl}}/notifications?q=unread">{{svg "octicon-inbox" 16}}<span>{{ctx.Locale.Tr "notification.unread"}}</span><span class="theme-counter notifications-unread-count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span></a>
<a class="{{if eq .Status 2}}active{{end}}" href="{{AppSubUrl}}/notifications?q=read">{{svg "octicon-check" 16}}<span>{{ctx.Locale.Tr "notification.read"}}</span></a>
</nav>
<hr>
<nav>
<a href="{{AppSubUrl}}/notifications/subscriptions">{{svg "octicon-eye" 16}}<span>{{ctx.Locale.Tr "notification.subscriptions"}}</span></a>
</nav>
</div>
{{template "components/common/sidebar/toggle" .}}
</aside>
{{$current := "unread"}}{{if eq .Status 2}}{{$current = "read"}}{{end}}
{{template "user/notification/sidebar" dict "Data" . "Current" $current}}
<div class="ui container theme-sidebar-main">
<div class="theme-list-heading">
<div class="theme-list-title">
Expand Down
43 changes: 43 additions & 0 deletions templates/user/notification/notification_subscriptions.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{{/* Subscriptions and watched repositories in the notifications sidebar layout, as the inbox: the heading, then the
subscribed issues in a box headed by All, Open and Closed with Type and Sort, or the watched repositories. */}}
{{template "base/head" .}}
{{$current := "subscriptions"}}{{if eq .Status 2}}{{$current = "watching"}}{{end}}
<div role="main" aria-label="{{.Title}}" class="page-content user notification theme-sidebar-layout github-notifications github-subscriptions" data-theme-sidebar="notification_sidebar_collapsed">
{{template "user/notification/sidebar" dict "Data" . "Current" $current}}
<div class="ui container theme-sidebar-main">
<div class="theme-list-heading">
<div class="theme-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 .Status 1}}{{ctx.Locale.Tr "notification.subscriptions"}}{{else}}{{ctx.Locale.Tr "notification.watching"}}{{end}}</h1>
</div>
</div>
{{if eq .Status 1}}
<div class="theme-box-list">
<div class="theme-box-list-header">
<nav class="theme-box-list-states" aria-label="{{ctx.Locale.Tr "notification.subscriptions"}}">
<a href="?sort={{$.SortType}}&state=all&issueType={{$.IssueType}}&labels={{$.Labels}}"{{if eq .State "all"}} aria-current="page"{{end}}>{{ctx.Locale.Tr "all"}}</a>
<a href="?sort={{$.SortType}}&state=open&issueType={{$.IssueType}}&labels={{$.Labels}}"{{if eq .State "open"}} aria-current="page"{{end}}>{{ctx.Locale.Tr "repo.issues.open_title"}}</a>
<a href="?sort={{$.SortType}}&state=closed&issueType={{$.IssueType}}&labels={{$.Labels}}"{{if eq .State "closed"}} aria-current="page"{{end}}>{{ctx.Locale.Tr "repo.issues.closed_title"}}</a>
</nav>
<div class="theme-box-list-filters">
{{template "components/common/dropdown/dropdown" dict "Kind" "actions" "Label" (ctx.Locale.Tr "repo.issues.filter_type") "Quiet" true "Items" "user/notification/subscriptions_type" "Data" .}}
{{template "components/common/dropdown/dropdown" dict "Kind" "actions" "Label" (ctx.Locale.Tr "repo.issues.filter_sort") "Quiet" true "Items" "user/notification/subscriptions_sort" "Data" .}}
</div>
</div>
{{if .Issues}}
{{template "shared/issuelist" dict "." . "listType" "dashboard"}}
{{else}}
<div class="theme-empty theme-empty-compact">
{{svg "octicon-bell" 24}}
<h3>{{ctx.Locale.Tr "notification.no_subscriptions"}}</h3>
</div>
{{end}}
</div>
{{else}}
{{template "shared/repo_search" .}}
{{template "explore/repo_list" .}}
{{template "base/paginate" .}}
{{end}}
</div>
</div>
{{template "base/footer" .}}
17 changes: 17 additions & 0 deletions templates/user/notification/sidebar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{{/* The notifications sidebar, shared by the inbox and the subscription pages. Data is the page context; Current names
the page (unread, read, subscriptions or watching). */}}
{{$notificationUnreadCount := call .Data.NotificationUnreadCount}}
<aside class="theme-sidebar" aria-label="{{ctx.Locale.Tr "notifications"}}">
<div class="theme-sidebar-content">
<nav aria-label="{{ctx.Locale.Tr "notifications"}}">
<a class="{{if eq .Current "unread"}}active{{end}}" href="{{AppSubUrl}}/notifications?q=unread">{{svg "octicon-inbox" 16}}<span>{{ctx.Locale.Tr "notification.unread"}}</span><span class="theme-counter notifications-unread-count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span></a>
<a class="{{if eq .Current "read"}}active{{end}}" href="{{AppSubUrl}}/notifications?q=read">{{svg "octicon-check" 16}}<span>{{ctx.Locale.Tr "notification.read"}}</span></a>
</nav>
<hr>
<nav aria-label="{{ctx.Locale.Tr "notification.subscriptions"}}">
<a class="{{if eq .Current "subscriptions"}}active{{end}}" href="{{AppSubUrl}}/notifications/subscriptions">{{svg "octicon-bell" 16}}<span>{{ctx.Locale.Tr "notification.subscriptions"}}</span></a>
<a class="{{if eq .Current "watching"}}active{{end}}" href="{{AppSubUrl}}/notifications/watching">{{svg "octicon-eye" 16}}<span>{{ctx.Locale.Tr "notification.watching"}}</span></a>
</nav>
</div>
{{template "components/common/sidebar/toggle" .Data}}
</aside>
9 changes: 9 additions & 0 deletions templates/user/notification/subscriptions_sort.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{{$query := print "?state=" .State "&issueType=" .IssueType "&labels=" .Labels}}
<a class="theme-dropdown-action" href="{{$query}}&sort=latest"{{if or (eq .SortType "latest") (not .SortType)}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-box-list-check"}}{{ctx.Locale.Tr "issues.search.sort.latest"}}</a>
<a class="theme-dropdown-action" href="{{$query}}&sort=oldest"{{if eq .SortType "oldest"}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-box-list-check"}}{{ctx.Locale.Tr "issues.search.sort.oldest"}}</a>
<a class="theme-dropdown-action" href="{{$query}}&sort=recentupdate"{{if eq .SortType "recentupdate"}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-box-list-check"}}{{ctx.Locale.Tr "issues.search.sort.recentupdate"}}</a>
<a class="theme-dropdown-action" href="{{$query}}&sort=leastupdate"{{if eq .SortType "leastupdate"}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-box-list-check"}}{{ctx.Locale.Tr "issues.search.sort.leastupdate"}}</a>
<a class="theme-dropdown-action" href="{{$query}}&sort=mostcomment"{{if eq .SortType "mostcomment"}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-box-list-check"}}{{ctx.Locale.Tr "issues.search.sort.mostcomment"}}</a>
<a class="theme-dropdown-action" href="{{$query}}&sort=leastcomment"{{if eq .SortType "leastcomment"}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-box-list-check"}}{{ctx.Locale.Tr "issues.search.sort.leastcomment"}}</a>
<a class="theme-dropdown-action" href="{{$query}}&sort=nearduedate"{{if eq .SortType "nearduedate"}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-box-list-check"}}{{ctx.Locale.Tr "issues.search.sort.nearduedate"}}</a>
<a class="theme-dropdown-action" href="{{$query}}&sort=farduedate"{{if eq .SortType "farduedate"}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-box-list-check"}}{{ctx.Locale.Tr "issues.search.sort.farduedate"}}</a>
4 changes: 4 additions & 0 deletions templates/user/notification/subscriptions_type.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{{$query := print "?sort=" .SortType "&state=" .State "&labels=" .Labels}}
<a class="theme-dropdown-action" href="{{$query}}&issueType=all"{{if or (eq .IssueType "all") (not .IssueType)}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-box-list-check"}}{{ctx.Locale.Tr "all"}}</a>
<a class="theme-dropdown-action" href="{{$query}}&issueType=issues"{{if eq .IssueType "issues"}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-box-list-check"}}{{ctx.Locale.Tr "issues"}}</a>
<a class="theme-dropdown-action" href="{{$query}}&issueType=pulls"{{if eq .IssueType "pulls"}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-box-list-check"}}{{ctx.Locale.Tr "pull_requests"}}</a>
Loading