POC: Use gomponents for Explore Users page

Author: philip-peterson

components/components.go

@@ -0,0 +1,25 @@
+package components
+
+import (
+	"code.gitea.io/gitea/modules/svg"
+	g "maragu.dev/gomponents"
+)
+
+func If(condition bool, node g.Node) g.Node {
+	if condition {
+		return node
+	}
+	return nil
+}
+
+func SVG(icon string, others ...any) g.Node {
+	return g.Raw(string(svg.RenderHTML(icon)))
+}
+
+// Utility to add "active" class if condition is true
+func classIf(condition bool, class string) string {
+	if condition {
+		return class
+	}
+	return ""
+}

components/explore_navbar.go

@@ -0,0 +1,66 @@
+package components
+
+import (
+	"code.gitea.io/gitea/models/unit"
+	"code.gitea.io/gitea/modules/translation"
+	g "maragu.dev/gomponents"
+	gh "maragu.dev/gomponents/html"
+)
+
+type ExploreNavbarProps struct {
+	PageIsExploreRepositories   bool
+	UsersPageIsDisabled         bool
+	AppSubUrl                   string
+	PageIsExploreUsers          bool
+	PageIsExploreCode           bool
+	IsRepoIndexerEnabled        bool
+	CodePageIsDisabled          bool
+	PageIsExploreOrganizations  bool
+	OrganizationsPageIsDisabled bool
+	Locale                      translation.Locale
+}
+
+func ExploreNavbar(data ExploreNavbarProps) g.Node {
+	tr := func(key string) string {
+		return string(data.Locale.Tr(key))
+	}
+
+	isCodeGlobalDisabled := unit.TypeCode.UnitGlobalDisabled()
+
+	return g.El("overflow-menu",
+		gh.Class("ui secondary pointing tabular top attached borderless menu secondary-nav"),
+		gh.Div(
+			gh.Class("overflow-menu-items tw-justify-center"),
+			gh.A(
+				gh.Class(classIf(data.PageIsExploreRepositories, "active ")+"item"),
+				gh.Href(data.AppSubUrl+"/explore/repos"),
+				SVG("octicon-repo"),
+				g.Text(" "+tr("explore.repos")),
+			),
+			If(!data.UsersPageIsDisabled,
+				gh.A(
+					gh.Class(classIf(data.PageIsExploreUsers, "active ")+"item"),
+					gh.Href(data.AppSubUrl+"/explore/users"),
+					SVG("octicon-person"),
+					g.Text(" "+tr("explore.users")),
+				),
+			),
+			If(!data.OrganizationsPageIsDisabled,
+				gh.A(
+					gh.Class(classIf(data.PageIsExploreOrganizations, "active ")+"item"),
+					gh.Href(data.AppSubUrl+"/explore/organizations"),
+					SVG("octicon-organization"),
+					g.Text(" "+tr("explore.organizations")),
+				),
+			),
+			If(!isCodeGlobalDisabled && data.IsRepoIndexerEnabled && !data.CodePageIsDisabled,
+				gh.A(
+					gh.Class(classIf(data.PageIsExploreCode, "active ")+"item"),
+					gh.Href(data.AppSubUrl+"/explore/code"),
+					SVG("octicon-code"),
+					g.Text(" "+tr("explore.code")),
+				),
+			),
+		),
+	)
+}

components/explore_search.go

@@ -0,0 +1,45 @@
+package components
+
+import (
+	g "maragu.dev/gomponents"
+	gh "maragu.dev/gomponents/html"
+)
+
+func ExploreSearchMenu(data ExploreUsersPageProps, pageIsExploreUsers bool) g.Node {
+	// Corresponds to templates/explore/search.tmpl
+
+	tr := func(key string) string {
+		return string(data.Locale.Tr(key))
+	}
+
+	return g.Group([]g.Node{
+		gh.Div(
+			gh.Class("ui small secondary filter menu tw-items-center tw-mx-0"),
+			gh.Form(
+				gh.Class("ui form ignore-dirty tw-flex-1"),
+				If(pageIsExploreUsers,
+					SearchCombo(data.Locale, data.Keyword, tr("search.user_kind")),
+				),
+				If(!pageIsExploreUsers,
+					SearchCombo(data.Locale, data.Keyword, tr("search.org_kind")),
+				),
+			),
+			gh.Div(
+				gh.Class("ui small dropdown type jump item tw-mr-0"),
+				gh.Span(
+					gh.Class("text"),
+					g.Text(tr("repo.issues.filter_sort")),
+				),
+				SVG("octicon-triangle-down", 14, "dropdown icon"),
+				gh.Div(
+					gh.Class("menu"),
+					SortOption(data, "newest", tr("repo.issues.filter_sort.latest")),
+					SortOption(data, "oldest", tr("repo.issues.filter_sort.oldest")),
+					SortOption(data, "alphabetically", tr("repo.issues.label.filter_sort.alphabetically")),
+					SortOption(data, "reversealphabetically", tr("repo.issues.label.filter_sort.reverse_alphabetically")),
+				),
+			),
+		),
+		gh.Div(gh.Class("divider")),
+	})
+}

components/explore_users_page.go

@@ -0,0 +1,62 @@
+package components
+
+import (
+	"code.gitea.io/gitea/models/user"
+	"code.gitea.io/gitea/modules/translation"
+	"code.gitea.io/gitea/services/context"
+	g "maragu.dev/gomponents"
+	gh "maragu.dev/gomponents/html"
+)
+
+type ExploreUsersPageProps struct {
+	Title    string
+	Locale   translation.Locale
+	Keyword  string
+	SortType string
+	Users    []*user.User
+	// ContextUser          *user.User
+	Context  *context.Context
+	IsSigned bool
+}
+
+func ExploreUsersPage(data ExploreUsersPageProps) g.Node {
+	// pageIsExplore := true
+	pageIsExploreUsers := true
+
+	head, err := data.Context.HTMLPartial(200, "base/head")
+	if err != nil {
+		panic("could not render head")
+	}
+
+	footer, err := data.Context.HTMLPartial(200, "base/footer")
+	if err != nil {
+		panic("could not render footer")
+	}
+
+	return g.Group([]g.Node{
+		g.Raw(head),
+		gh.Div(
+			gh.Role("main"),
+			gh.Aria("label", data.Title),
+			gh.Class("page-content explore users"),
+			ExploreNavbar(ExploreNavbarProps{
+				Locale:             data.Locale,
+				PageIsExploreUsers: pageIsExploreUsers,
+			}),
+			gh.Div(
+				gh.Class("ui container"),
+				ExploreSearchMenu(data, true),
+				UserList(UserListProps{
+					// ContextUser:      data.ContextUser,
+					Context:          data.Context,
+					Users:            data.Users,
+					IsSigned:         data.IsSigned,
+					Locale:           data.Locale,
+					PageIsAdminUsers: false,
+				}),
+				// Pagination(data),
+			),
+		),
+		g.Raw(footer),
+	})
+}

components/search_button.go

@@ -0,0 +1,32 @@
+package components
+
+import (
+	g "maragu.dev/gomponents"
+	gh "maragu.dev/gomponents/html"
+)
+
+func SearchButton(disabled bool, tooltip string) g.Node {
+	// Corresponds to templates/shared/search/button.tmpl
+
+	class := "ui icon button"
+	if disabled {
+		class += " disabled"
+	}
+
+	btn := gh.Button(
+		gh.Type("submit"),
+		gh.Class(class),
+		SVG("octicon-search", 16),
+	)
+
+	if tooltip != "" {
+		btn = gh.Button(
+			gh.Type("submit"),
+			gh.Class(class),
+			g.Attr("data-tooltip-content", tooltip),
+			SVG("octicon-search", 16),
+		)
+	}
+
+	return btn
+}

components/search_combo.go

@@ -0,0 +1,19 @@
+package components
+
+import (
+	"code.gitea.io/gitea/modules/translation"
+	g "maragu.dev/gomponents"
+	gh "maragu.dev/gomponents/html"
+)
+
+func SearchCombo(locale translation.Locale, value, placeholder string) g.Node {
+	// Corresponds to templates/shared/search/combo.tmpl
+
+	disabled := false
+	return gh.Div(
+		gh.Class("ui small fluid action input"),
+		SearchInput(value, placeholder, disabled),
+		// TODO SearchModeDropdown
+		SearchButton(disabled, ""),
+	)
+}

components/search_input.go

@@ -0,0 +1,20 @@
+package components
+
+import (
+	g "maragu.dev/gomponents"
+	gh "maragu.dev/gomponents/html"
+)
+
+func SearchInput(value, placeholder string, disabled bool) g.Node {
+	// Corresponds to templates/shared/search/input.tmpl
+
+	return gh.Input(
+		gh.Type("search"),
+		gh.Name("q"),
+		gh.MaxLength("255"),
+		g.Attr("spellcheck", "false"),
+		gh.Value(value),
+		gh.Placeholder(placeholder),
+		If(disabled, gh.Disabled()),
+	)
+}

components/sort_option.go

@@ -0,0 +1,21 @@
+package components
+
+import (
+	"fmt"
+	"net/url"
+
+	g "maragu.dev/gomponents"
+	gh "maragu.dev/gomponents/html"
+)
+
+func SortOption(data ExploreUsersPageProps, sortType, label string) g.Node {
+	active := ""
+	if data.SortType == sortType {
+		active = "active "
+	}
+	return gh.A(
+		gh.Class(active+"item"),
+		gh.Href(fmt.Sprintf("?sort=%s&q=%s", sortType, url.QueryEscape(data.Keyword))),
+		g.Text(label),
+	)
+}

components/user_list.go

@@ -0,0 +1,92 @@
+package components
+
+import (
+	"code.gitea.io/gitea/models/user"
+	"code.gitea.io/gitea/modules/setting"
+	templates "code.gitea.io/gitea/modules/templates"
+	"code.gitea.io/gitea/modules/translation"
+	"code.gitea.io/gitea/services/context"
+	g "maragu.dev/gomponents"
+	gh "maragu.dev/gomponents/html"
+)
+
+type UserListProps struct {
+	Users []*user.User
+	// ContextUser      *user.User
+	IsSigned         bool
+	PageIsAdminUsers bool
+	Locale           translation.Locale
+	Context          *context.Context
+}
+
+func UserList(data UserListProps) g.Node {
+	tr := func(key string, args ...any) string {
+		return string(data.Locale.Tr(key, args...))
+	}
+
+	if len(data.Users) == 0 {
+		return gh.Div(
+			gh.Class("flex-list"),
+			gh.Div(
+				gh.Class("flex-item"),
+				g.Text(tr("search.no_results")),
+			),
+		)
+	}
+
+	return gh.Div(
+		gh.Class("flex-list"),
+		g.Group(g.Map(data.Users, func(u *user.User) g.Node {
+			utils := templates.NewAvatarUtils(data.Context)
+
+			return gh.Div(
+				gh.Class("flex-item tw-items-center"),
+				gh.Div(
+					gh.Class("flex-item-leading"),
+					g.Raw(string(utils.Avatar(u, 48))),
+				),
+				gh.Div(
+					gh.Class("flex-item-main"),
+					gh.Div(
+						gh.Class("flex-item-title"),
+						UserName(UserNameProps{
+							Locale: data.Locale,
+							User:   u,
+						}),
+						If(u.Visibility.IsPrivate(),
+							gh.Span(
+								gh.Class("ui basic tiny label"),
+								g.Text(tr("repo.desc.private")),
+							),
+						),
+					),
+					gh.Div(
+						gh.Class("flex-item-body"),
+						If(u.Location != "",
+							gh.Span(
+								gh.Class("flex-text-inline"),
+								SVG("octicon-location", 16),
+								g.Text(u.Location),
+							),
+						),
+						If(u.Email != "" && (data.PageIsAdminUsers || (setting.UI.ShowUserEmail && data.IsSigned && !u.KeepEmailPrivate)),
+							gh.Span(
+								gh.Class("flex-text-inline"),
+								SVG("octicon-mail", 16),
+								gh.A(
+									gh.Href("mailto:"+u.Email),
+									g.Text(u.Email),
+								),
+							),
+						),
+						gh.Span(
+							gh.Class("flex-text-inline"),
+							SVG("octicon-calendar", 16),
+							g.Raw(tr("user.joined_on", templates.NewDateUtils().AbsoluteShort(u.CreatedUnix))),
+						),
+					),
+				),
+			)
+		})),
+	)
+}