Improve theme picker

Signed-off-by: Minecon724 <minecon724@noreply.git.m724.eu>

modules/theme/theme.go

@@ -78,3 +78,15 @@ func loadThemesInner(assetFs *assetfs.LayeredFS) ([]string, error) {
 		return nil, fmt.Errorf("no themes found")
 	}
 }
+
+// GetFriendlyThemeName converts an raw theme name (forgejo-dark) to a friendly name (Forgejo Dark)
+//
+// Example: forgejo-dark -> Forgejo Dark, catppuccin-maroon-auto -> Catppuccin Maroon Auto
+func GetFriendlyThemeName(themeName string) string {
+	themeName = strings.ReplaceAll(themeName, "-", " ")
+
+	themeName = strings.ToLower(themeName)
+	themeName = strings.Title(themeName)
+
+	return themeName
+}

routers/web/user/setting/profile.go

@@ -345,6 +345,10 @@ func Appearance(ctx *context.Context) {
 		if ctx.Locale.HasKey(fullThemeName) {
 			return ctx.Locale.TrString(fullThemeName)
 		}
+
+		// We should probably cache, because this does some operations on the string
+		themeName = theme.GetFriendlyThemeName(themeName)
+
 		return themeName
 	}
 

templates/user/settings/appearance.tmpl

@@ -15,8 +15,7 @@
 			<form class="ui form" action="{{.Link}}/theme" method="post">
 				{{.CsrfTokenHtml}}
 					<div class="field">
-						<label for="ui">{{ctx.Locale.Tr "settings.ui"}}</label>
-						<div class="ui selection dropdown" id="ui">
+						<div class="ui search selection dropdown" id="ui">
 							<input name="theme" type="hidden" value="{{.SignedUser.Theme}}">
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="text">
@@ -53,7 +52,7 @@
 				</div>
 				{{.CsrfTokenHtml}}
 				<div class="field">
-					<div class="ui language selection dropdown" id="language">
+					<div class="ui search language selection dropdown" id="language">
 						<input name="language" type="hidden" value="{{.SignedUser.Language}}">
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="text">{{range .AllLangs}}{{if eq $.SignedUser.Language .Lang}}{{.Name}}{{end}}{{end}}</div>