Gallery shell: AppShell, search, sidebar, theme/density/locale, palette, code, keys, events, Overture

2026-10-05 13:00:36 -04:00
1 parent cfdccfec5c
commit 9c1e2ad36d
@@ -1,35 +1,157 @@
 package main

 import (
+	"fmt"
+	"log/slog"
+	"time"
+
 	"github.com/egoist/mygo/ui"

 	mujica "mujicaui"
+	"mujicaui/icons"
+	"mujicaui/theme"
 )

+// event is one line of the gallery's event log.
+type event struct {
+	at   time.Time
+	page string
+	text string
+}
+
 type gallery struct {
 	pages    []page
-	selected int
-	events   []string
+	byID     map[string]int
+	selected string
+	query    string
+	mode     int
+	density  int
+	zh       bool
+	folded   bool
+	autoFold bool
+	palette  bool
+	events   []event
+	scrolls  map[string]*ui.ScrollState
+	overture overtureState
 }

-func newGallery() *gallery { return &gallery{pages: catalog()} }
+// densities maps the density control's segments to theme densities.
+var densities = []theme.Density{theme.Compact, theme.Default, theme.Comfortable}

-func (g *gallery) log(s string) { g.events = append(g.events, s) }
+func newGallery() *gallery {
+	g := &gallery{pages: catalog(), byID: map[string]int{}, selected: overtureID, density: 1, scrolls: map[string]*ui.ScrollState{}}
+	for i, p := range g.pages {
+		if _, dup := g.byID[p.ID]; dup {
+			panic("gallery: duplicate page " + p.ID)
+		}
+		g.byID[p.ID] = i
+	}
+	return g
+}
+
+// logFor returns the event logger of one page.
+func (g *gallery) logFor(id string) func(string) {
+	return func(s string) {
+		g.events = append(g.events, event{time.Now(), id, s})
+		if len(g.events) > 200 {
+			g.events = g.events[len(g.events)-200:]
+		}
+		slog.Info("gallery: event", "page", id, "event", s)
+	}
+}
+
+func (g *gallery) settings() mujica.Settings {
+	s := mujica.Settings{Mode: mujica.Mode(g.mode), Density: densities[g.density], Locale: mujica.EnUS}
+	if g.zh {
+		s.Locale = mujica.ZhCN
+	}
+	return s
+}

 func (g *gallery) view(c *ui.Context) {
-	mujica.Use(c, mujica.Settings{})
-	ui.Row(c).Fill().Children(func() {
-		ui.Scroll(c).Width(240).FillHeight().Children(func() {
-			for i, p := range g.pages {
-				if mujica.Button(c, p.ID+" "+p.Name, mujica.ButtonOptions{Variant: mujica.Ghost}).Key(p.ID).Clicked() {
-					g.selected = i
-				}
+	mujica.Use(c, g.settings())
+	w, _ := c.Size()
+	if narrow := w < 900; narrow != g.autoFold {
+		g.autoFold, g.folded = narrow, narrow
+	}
+	scroll := g.scrolls[g.selected]
+	if scroll == nil {
+		scroll = &ui.ScrollState{}
+		g.scrolls[g.selected] = scroll
+	}
+	mujica.AppShell(c, &g.folded, mujica.AppShellOptions{
+		TitleBar:      func() { g.titleBar(c) },
+		Sidebar:       func() { g.sidebar(c) },
+		Content:       func() { g.content(c) },
+		StatusBar:     func() { g.statusBar(c) },
+		ContentScroll: scroll,
+	})
+	g.commandPalette(c)
+	mujica.Toaster(c)
+}
+
+func (g *gallery) titleBar(c *ui.Context) {
+	mujica.TitleBar(c, "MujicaUI", mujica.TitleBarOptions{Trailing: func() {
+		ui.Row(c).Gap(8).AlignItems(ui.Center).Children(func() {
+			mode := g.mode
+			if mujica.SegmentedControl(c, &g.mode, []mujica.Segment{
+				{Label: g.t("System", "跟随系统"), Icon: icons.Must("settings"), HideLabel: true},
+				{Label: g.t("Light", "浅色"), Icon: icons.Must("sun"), HideLabel: true},
+				{Label: g.t("Dark", "深色"), Icon: icons.Must("moon"), HideLabel: true},
+			}, mujica.SegmentedControlOptions{Label: g.t("Theme", "主题")}).Changed() && mode != g.mode {
+				g.logFor("shell")("theme " + mujica.Mode(g.mode).String())
+				g.overture.switches++
+			}
+			density := g.density
+			if mujica.SegmentedControl(c, &g.density, []mujica.Segment{
+				{Label: g.t("Compact", "紧凑")}, {Label: g.t("Default", "默认")}, {Label: g.t("Comfortable", "宽松")},
+			}, mujica.SegmentedControlOptions{Label: g.t("Density", "密度")}).Changed() && density != g.density {
+				g.logFor("shell")("density " + densities[g.density].String())
+				g.overture.switches++
+			}
+			if mujica.Button(c, g.t("中文", "English"), mujica.ButtonOptions{Variant: mujica.Ghost}).Clicked() {
+				g.zh = !g.zh
+				g.logFor("shell")(fmt.Sprintf("locale %s", g.settings().Locale))
+			}
+			if mujica.IconButton(c, icons.Must("command"), g.t("Command palette", "命令面板"), mujica.IconButtonOptions{Variant: mujica.Ghost}).Clicked() {
+				g.palette = true
 			}
 		})
-		ui.Scroll(c).Fill().Padding(24).Children(func() {
-			if len(g.pages) > 0 {
-				g.pages[g.selected].Demo(c, g.log)
+	}})
+}
+
+func (g *gallery) statusBar(c *ui.Context) {
+	left := []mujica.StatusItem{
+		{ID: "count", Text: fmt.Sprintf(g.t("%d components", "%d 个组件"), len(g.pages)), Icon: icons.Must("layout-grid")},
+		{ID: "look", Text: fmt.Sprintf("%s · %s", mujica.Mode(g.mode), densities[g.density]), Secondary: true},
+	}
+	var right []mujica.StatusItem
+	if n := len(g.events); n > 0 {
+		e := g.events[n-1]
+		right = append(right, mujica.StatusItem{ID: "last", Text: e.page + " · " + e.text, Icon: icons.Must("bell"), Secondary: true})
+	}
+	mujica.StatusBar(c, mujica.StatusBarOptions{Left: left, Right: right})
+}
+
+func (g *gallery) content(c *ui.Context) {
+	ui.Box(c).Key(g.selected).FillWidth().Children(func() {
+		switch g.selected {
+		case overtureID:
+			g.overturePage(c)
+		default:
+			i, ok := g.byID[g.selected]
+			if !ok {
+				panic("gallery: no page " + g.selected)
 			}
-		})
+			g.componentPage(c, g.pages[i])
+		}
 	})
 }
+
+// t picks the English or Chinese copy for the gallery's own text.
+func (g *gallery) t(en, zh string) string {
+	if g.zh {
+		return zh
+	}
+	return en
+}
@@ -0,0 +1,115 @@
+package main
+
+import (
+	"strings"
+
+	"github.com/egoist/mygo/ui"
+
+	mujica "mujicaui"
+	"mujicaui/icons"
+)
+
+const overtureID = "overture"
+
+// categoryZh names each PRD group in Chinese.
+var categoryZh = map[string]string{
+	"Layout": "布局与桌面", "Display": "基础展示", "Inputs": "基础输入", "Choices": "选择控件",
+	"Forms": "表单组合", "Date & Time": "日期与时间", "Navigation": "导航", "Data": "内容与数据",
+	"Overlays": "浮层与菜单", "Feedback": "反馈与状态",
+}
+
+// matches reports whether p fits the search query in English or Chinese.
+func matches(p page, q string) bool {
+	q = strings.ToLower(strings.TrimSpace(q))
+	if q == "" {
+		return true
+	}
+	for _, s := range []string{p.ID, p.Name, p.ZhName, p.Category, categoryZh[p.Category]} {
+		if strings.Contains(strings.ToLower(s), q) {
+			return true
+		}
+	}
+	return false
+}
+
+func (g *gallery) categoryName(cat string) string {
+	zh, ok := categoryZh[cat]
+	if !ok {
+		panic("gallery: unknown category " + cat)
+	}
+	return g.t(cat, zh)
+}
+
+func (g *gallery) pageName(p page) string { return g.t(p.Name, p.ZhName) }
+
+// sections groups the pages that match the query by category, in PRD order.
+func (g *gallery) sections() []mujica.SidebarSection {
+	out := []mujica.SidebarSection{{Title: g.t("Overture", "序章"), Items: []mujica.SidebarItem{
+		{ID: overtureID, Label: g.t("Overture", "序章"), Icon: icons.Must("house")},
+	}}}
+	index := map[string]int{}
+	for _, p := range g.pages {
+		if !matches(p, g.query) {
+			continue
+		}
+		i, ok := index[p.Category]
+		if !ok {
+			i = len(out)
+			index[p.Category] = i
+			out = append(out, mujica.SidebarSection{Title: g.categoryName(p.Category)})
+		}
+		out[i].Items = append(out[i].Items, mujica.SidebarItem{ID: p.ID, Label: p.ID + "  " + g.pageName(p)})
+	}
+	return out
+}
+
+func (g *gallery) sidebar(c *ui.Context) {
+	ui.Column(c).FillWidth().Gap(8).Padding(8, 8, 0, 8).Children(func() {
+		before := g.query
+		mujica.SearchInput(c, &g.query, mujica.SearchInputOptions{Placeholder: g.t("Search · 搜索", "搜索 · Search")})
+		if g.query != before {
+			g.logFor("shell")("search " + g.query)
+		}
+	})
+	sections := g.sections()
+	if len(sections) == 1 && g.query != "" {
+		ui.Text(c, g.t("No component matches.", "没有匹配的组件。")).Padding(8, 16)
+	}
+	if mujica.Sidebar(c, &g.selected, sections, mujica.SidebarOptions{}).Changed() {
+		g.logFor("shell")("open " + g.selected)
+	}
+}
+
+func (g *gallery) commandPalette(c *ui.Context) {
+	cmds := []mujica.Command{
+		{ID: overtureID, Label: g.t("Overture", "序章"), Group: g.t("Go to", "前往")},
+		{ID: "theme", Label: g.t("Cycle theme", "切换主题"), Group: g.t("Window", "窗口"), Keywords: []string{"dark", "light", "深色", "浅色"}},
+		{ID: "density", Label: g.t("Cycle density", "切换密度"), Group: g.t("Window", "窗口"), Keywords: []string{"compact", "紧凑"}},
+		{ID: "locale", Label: g.t("Switch to Chinese", "切换到英文"), Group: g.t("Window", "窗口"), Keywords: []string{"language", "语言"}},
+	}
+	for _, p := range g.pages {
+		cmds = append(cmds, mujica.Command{ID: "page:" + p.ID, Label: p.ID + " " + g.pageName(p), Group: g.categoryName(p.Category),
+			Keywords: []string{p.Name, p.ZhName, p.Category, categoryZh[p.Category]}})
+	}
+	id, ok := mujica.CommandPalette(c, &g.palette, cmds, mujica.CommandPaletteOptions{}).Chosen()
+	if !ok {
+		return
+	}
+	g.logFor("shell")("command " + id)
+	switch {
+	case id == overtureID:
+		g.selected = overtureID
+	case id == "theme":
+		g.mode = (g.mode + 1) % 3
+		g.overture.switches++
+	case id == "density":
+		g.density = (g.density + 1) % len(densities)
+		g.overture.switches++
+	case id == "locale":
+		g.zh = !g.zh
+	case strings.HasPrefix(id, "page:"):
+		g.selected = strings.TrimPrefix(id, "page:")
+	default:
+		panic("gallery: unknown command " + id)
+	}
+}
@@ -0,0 +1,116 @@
+package main
+
+import (
+	"fmt"
+
+	"github.com/egoist/mygo/ui"
+
+	mujica "mujicaui"
+	"mujicaui/icons"
+)
+
+// overtureState is the continuity proof: values that must survive theme changes.
+type overtureState struct {
+	note     string
+	tempo    float64
+	sealed   bool
+	switches int
+}
+
+func (g *gallery) overturePage(c *ui.Context) {
+	k := mujica.Tokens(c)
+	w, _ := c.Size()
+	mujica.Container(c, mujica.ContainerOptions{MaxWidth: 1080, Center: true}, func() {
+		ui.Column(c).FillWidth().Gap(32).Children(func() {
+			mujica.Heading(c, "MujicaUI", mujica.HeadingOptions{
+				Subtitle: g.t("One hundred court-gothic components for MyGo native UI.", "为 MyGo 原生界面打造的一百件宫廷哥特组件。"),
+				Divider:  true,
+			})
+			ui.Text(c, g.t(
+				"Every pixel here is drawn by Go. No HTML, no WebView. Ivory and charcoal, a wine accent, old gold on the edges.",
+				"这里每一个像素都由 Go 绘制。没有 HTML，没有 WebView。象牙白与炭黑，酒红为主色，旧金只落在边缘。",
+			)).TextColor(k.TextMuted).FillWidth()
+			mujica.Grid(c, mujica.GridOptions{Columns: []ui.Track{ui.Fr(1), ui.Fr(1), ui.Fr(1)}}, func() {
+				mujica.Statistic(c, float64(len(g.pages)), mujica.StatisticOptions{Title: g.t("Components", "组件")})
+				mujica.Statistic(c, 2, mujica.StatisticOptions{Title: g.t("Themes", "主题")})
+				mujica.Statistic(c, 3, mujica.StatisticOptions{Title: g.t("Densities", "密度")})
+			})
+			g.continuity(c)
+			g.categoryGrid(c, w)
+		})
+	})
+}
+
+// continuity holds live state while the user flips theme and density.
+func (g *gallery) continuity(c *ui.Context) {
+	s := &g.overture
+	k := mujica.Tokens(c)
+	mujica.Card(c, mujica.CardOptions{Title: g.t("Proof of continuity", "连续性证明"), Decorated: true}, func() {
+		ui.Column(c).FillWidth().Gap(16).Children(func() {
+			ui.Text(c, g.t(
+				"Type a line, move the slider, then switch theme or density above, or press ⌘K. Nothing resets: not the text, not the caret, not the focus.",
+				"写下一行字，拖动滑块，再切换上方的主题或密度，或按 ⌘K。什么都不会重置：文字、光标、焦点都留在原处。",
+			)).FillWidth()
+			if mujica.TextInput(c, &s.note, mujica.TextInputOptions{Placeholder: g.t("A line for the court ledger", "写给宫廷账簿的一行"), Label: g.t("Ledger line", "账簿")}).Changed() {
+				g.logFor(overtureID)("ledger line edited")
+			}
+			if mujica.Slider(c, &s.tempo, mujica.SliderOptions{Max: 100, Step: 1, ShowValue: true, Label: g.t("Tempo", "速度")}).Changed() {
+				g.logFor(overtureID)(fmt.Sprintf("tempo %.0f", s.tempo))
+			}
+			if mujica.Checkbox(c, &s.sealed, g.t("Seal with wax", "以火漆封缄"), mujica.CheckboxOptions{}).Changed() {
+				g.logFor(overtureID)(fmt.Sprintf("sealed %v", s.sealed))
+			}
+			ui.Row(c).Gap(12).AlignItems(ui.Center).Children(func() {
+				if mujica.Button(c, g.t("Cycle theme", "切换主题"), mujica.ButtonOptions{Icon: icons.Must("moon")}).Clicked() {
+					g.mode = (g.mode + 1) % 3
+					s.switches++
+					g.logFor(overtureID)("theme " + mujica.Mode(g.mode).String())
+				}
+				if mujica.Button(c, g.t("Cycle density", "切换密度"), mujica.ButtonOptions{Variant: mujica.Secondary}).Clicked() {
+					g.density = (g.density + 1) % len(densities)
+					s.switches++
+					g.logFor(overtureID)("density " + densities[g.density].String())
+				}
+				ui.Text(c, fmt.Sprintf(g.t("%d switches · %d characters kept", "已切换 %d 次 · 保留 %d 个字符"), s.switches, len([]rune(s.note)))).
+					TextColor(k.TextMuted)
+			})
+		})
+	})
+}
+
+// categoryGrid lists the ten PRD groups as doors into the gallery.
+func (g *gallery) categoryGrid(c *ui.Context, width float32) {
+	cols := 3
+	if width < 1000 {
+		cols = 2
+	}
+	tracks := make([]ui.Track, cols)
+	for i := range tracks {
+		tracks[i] = ui.Fr(1)
+	}
+	var cats []string
+	first := map[string]page{}
+	count := map[string]int{}
+	for _, p := range g.pages {
+		if _, ok := first[p.Category]; !ok {
+			cats = append(cats, p.Category)
+			first[p.Category] = p
+		}
+		count[p.Category]++
+	}
+	mujica.Grid(c, mujica.GridOptions{Columns: tracks}, func() {
+		for _, cat := range cats {
+			ui.Box(c).Key(cat).Children(func() {
+				mujica.Card(c, mujica.CardOptions{Title: g.categoryName(cat), Footer: func() {
+					if mujica.Button(c, g.t("Enter", "进入"), mujica.ButtonOptions{Variant: mujica.Outline}).Clicked() {
+						g.selected = first[cat].ID
+						g.logFor(overtureID)("enter " + cat)
+					}
+				}}, func() {
+					ui.Text(c, fmt.Sprintf(g.t("%d components, from %s", "%d 个组件，始于 %s"), count[cat], g.pageName(first[cat]))).
+						TextColor(mujica.Tokens(c).TextMuted)
+				})
+			})
+		}
+	})
+}
@@ -0,0 +1,62 @@
+package main
+
+import (
+	"fmt"
+
+	"github.com/egoist/mygo/ui"
+
+	mujica "mujicaui"
+	"mujicaui/icons"
+	"mujicaui/theme"
+)
+
+// componentPage shows one component: demo, code, keys and its events.
+func (g *gallery) componentPage(c *ui.Context, p page) {
+	k := mujica.Tokens(c)
+	mujica.Container(c, mujica.ContainerOptions{MaxWidth: 1080, Center: true}, func() {
+		ui.Column(c).FillWidth().Gap(24).Children(func() {
+			mujica.Heading(c, g.pageName(p), mujica.HeadingOptions{
+				Subtitle: fmt.Sprintf("%s · %s · %s", p.ID, g.t(p.ZhName, p.Name), g.categoryName(p.Category)),
+				Divider:  true,
+			})
+			ui.Column(c).FillWidth().Gap(16).Children(func() { p.Demo(c, g.logFor(p.ID)) })
+			mujica.Grid(c, mujica.GridOptions{Columns: []ui.Track{ui.Fr(3), ui.Fr(2)}, Gap: mujica.SpaceL}, func() {
+				mujica.Card(c, mujica.CardOptions{Title: g.t("Code", "代码"), Footer: func() {
+					if mujica.Button(c, g.t("Copy", "复制"), mujica.ButtonOptions{Variant: mujica.Secondary, Icon: icons.Must("copy")}).Clicked() {
+						c.WriteClipboard(p.Code)
+						g.logFor(p.ID)("code copied")
+						mujica.ShowToast(c, mujica.ToastMessage{ID: "copied", Severity: mujica.SeveritySuccess, Message: g.t("Code copied", "代码已复制")})
+					}
+				}}, func() {
+					ui.Text(c, p.Code).Font(theme.MonoFont).FontSize(mujica.FontSize(c, theme.CaptionSize)).Selectable().FillWidth()
+				})
+				mujica.Card(c, mujica.CardOptions{Title: g.t("Keyboard", "键盘")}, func() {
+					ui.Text(c, p.Keys).TextColor(k.TextMuted).FillWidth()
+				})
+			})
+			g.eventCard(c, p.ID)
+		})
+	})
+}
+
+// eventCard lists the newest events of one page.
+func (g *gallery) eventCard(c *ui.Context, id string) {
+	k := mujica.Tokens(c)
+	mujica.Card(c, mujica.CardOptions{Title: g.t("Events", "事件")}, func() {
+		shown := 0
+		for i := len(g.events) - 1; i >= 0 && shown < 8; i-- {
+			e := g.events[i]
+			if e.page != id {
+				continue
+			}
+			shown++
+			ui.Row(c).Gap(12).Children(func() {
+				ui.Text(c, e.at.Format("15:04:05.000")).Font(theme.MonoFont).FontSize(mujica.FontSize(c, theme.CaptionSize)).TextColor(k.TextMuted)
+				ui.Text(c, e.text).Grow(1)
+			})
+		}
+		if shown == 0 {
+			ui.Text(c, g.t("Interact with the demo; its events appear here.", "操作上方示例，事件会显示在这里。")).TextColor(k.TextMuted)
+		}
+	})
+}