POC: Use gomponents for Explore Users page

components/components.go

@@ -0,0 +1,28 @@
+// Copyright 2020 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+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 { //nolint:unparam
+	if condition {
+		return class
+	}
+	return ""
+}

components/explore_navbar.go

@@ -0,0 +1,69 @@
+// Copyright 2020 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+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,48 @@
+// Copyright 2020 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+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,63 @@
+// Copyright 2020 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+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
+	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{
+					Context:          data.Context,
+					Users:            data.Users,
+					IsSigned:         data.IsSigned,
+					Locale:           data.Locale,
+					PageIsAdminUsers: false,
+				}),
+				// TODO Pagination(data),
+			),
+		),
+		g.Raw(footer),
+	})
+}

components/search_button.go

@@ -0,0 +1,35 @@
+// Copyright 2020 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+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,22 @@
+// Copyright 2020 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+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(locale, value, placeholder, disabled),
+		// TODO SearchModeDropdown
+		SearchButton(disabled, ""),
+	)
+}

components/search_input.go

@@ -0,0 +1,28 @@
+// Copyright 2020 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package components
+
+import (
+	"code.gitea.io/gitea/modules/translation"
+	g "maragu.dev/gomponents"
+	gh "maragu.dev/gomponents/html"
+)
+
+func SearchInput(locale translation.Locale, value, placeholder string, disabled bool) g.Node {
+	// Corresponds to templates/shared/search/input.tmpl
+
+	if placeholder == "" {
+		placeholder = string(locale.Tr("search.search"))
+	}
+
+	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,24 @@
+// Copyright 2020 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+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),
+	)
+}