From 2cf5eb65a3aae418d1e21fc7a958f45d881169ad Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Sun, 7 Sep 2025 05:52:19 +0200
Subject: [PATCH] feat(ui): improve subscriptions screen filters (#9192)

Refreshed the screen at `/notifications/subscriptions` a little.

General improvements:
- Use the new switch style

Notable mobile usability improvements:
- Add a minimum gap between the Subscriptions/Watching switch and the Notifications button
- Add a minimum h gap between the All/Open/Closed switch and the dropdown filters
- Let the second row overflow instead of breaking the viewport

Preview:
- https://codeberg.org/attachments/1e5d2d2e-9f36-4117-a2bc-dd237aba0091
- https://codeberg.org/attachments/8c337739-3c8a-424a-ada8-20718800fe3b
- https://codeberg.org/attachments/d72027a1-5fe1-440c-9112-3a7fe7020b39

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9192
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
---
 .../notification_subscriptions.tmpl           | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/templates/user/notification/notification_subscriptions.tmpl b/templates/user/notification/notification_subscriptions.tmpl
index 0b8193f797..300d117e2b 100644
--- a/templates/user/notification/notification_subscriptions.tmpl
+++ b/templates/user/notification/notification_subscriptions.tmpl
@@ -1,7 +1,7 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user notification">
 	<div class="ui container">
-		<div class="tw-flex tw-items-center tw-justify-between tw-mb-4">
+		<div class="tw-flex tw-items-center tw-justify-between tw-mb-4 tw-gap-2">
 			<div class="switch">
 				<a href="{{AppSubUrl}}/notifications/subscriptions" class="{{if eq .Status 1}}active {{end}}item">
 					{{ctx.Locale.Tr "notification.subscriptions"}}
@@ -16,23 +16,21 @@
 		</div>
 		<div class="ui bottom active tab segment">
 			{{if eq .Status 1}}
-				<div class="tw-flex tw-justify-between">
-					<div class="tw-flex">
-						<div class="small-menu-items ui compact tiny menu">
-							<a class="{{if eq .State "all"}}active {{end}}item" href="?sort={{$.SortType}}&state=all&issueType={{$.IssueType}}&labels={{$.Labels}}">
-								{{ctx.Locale.Tr "all"}}
-							</a>
-							<a class="{{if eq .State "open"}}active {{end}}item" href="?sort={{$.SortType}}&state=open&issueType={{$.IssueType}}&labels={{$.Labels}}">
-								{{svg "octicon-issue-opened" 16 "tw-mr-2"}}
-								{{ctx.Locale.Tr "repo.issues.open_title"}}
-							</a>
-							<a class="{{if eq .State "closed"}}active {{end}}item" href="?sort={{$.SortType}}&state=closed&issueType={{$.IssueType}}&labels={{$.Labels}}">
-								{{svg "octicon-issue-closed" 16 "tw-mr-2"}}
-								{{ctx.Locale.Tr "repo.issues.closed_title"}}
-							</a>
-						</div>
+				<div class="tw-flex tw-justify-between tw-flex-wrap tw-gap-y-4 tw-gap-x-2">
+					<div class="switch">
+						<a class="{{if eq .State "all"}}active {{end}}item" href="?sort={{$.SortType}}&state=all&issueType={{$.IssueType}}&labels={{$.Labels}}">
+							{{ctx.Locale.Tr "all"}}
+						</a>
+						<a class="{{if eq .State "open"}}active {{end}}item" href="?sort={{$.SortType}}&state=open&issueType={{$.IssueType}}&labels={{$.Labels}}">
+							{{svg "octicon-issue-opened" 16}}
+							{{ctx.Locale.Tr "repo.issues.open_title"}}
+						</a>
+						<a class="{{if eq .State "closed"}}active {{end}}item" href="?sort={{$.SortType}}&state=closed&issueType={{$.IssueType}}&labels={{$.Labels}}">
+							{{svg "octicon-issue-closed" 16}}
+							{{ctx.Locale.Tr "repo.issues.closed_title"}}
+						</a>
 					</div>
-					<div class="tw-flex tw-justify-between">
+					<div class="tw-flex">
 						<div class="ui right aligned secondary filter menu labels">
 							<!-- Type -->
 								<div class="ui dropdown type jump item">