Improve app bar layout

internal/app/ui/account.go

@@ -33,9 +33,10 @@ type accountCharacter struct {
 
 // AccountArea is the UI area for managing of characters.
 type AccountArea struct {
-	Content *fyne.Container
+	Content fyne.CanvasObject
 
 	characters []accountCharacter
+	emptyHint  *widget.Label
 	list       *widget.List
 	title      *widget.Label
 	window     fyne.Window
@@ -45,29 +46,36 @@ type AccountArea struct {
 }
 
 func (u *BaseUI) NewAccountArea() *AccountArea {
+	info := widget.NewLabel("No characters")
+	info.Importance = widget.LowImportance
 	a := &AccountArea{
 		characters: make([]accountCharacter, 0),
 		title:      widget.NewLabel(""),
 		window:     u.Window,
+		emptyHint:  info,
 		u:          u,
 	}
 
 	a.list = a.makeCharacterList()
 	a.title.TextStyle.Bold = true
 	add := widget.NewButtonWithIcon("Add Character", theme.ContentAddIcon(), func() {
-		a.showAddCharacterDialog()
+		a.ShowAddCharacterDialog()
 	})
 	add.Importance = widget.HighImportance
 	if a.u.IsOffline {
 		add.Disable()
 	}
-	a.Content = container.NewBorder(
-		a.title,
-		container.NewVBox(add, container.NewPadded()),
-		nil,
-		nil,
-		a.list,
-	)
+	if a.u.IsDesktop() {
+		a.Content = container.NewBorder(
+			a.title,
+			container.NewVBox(add, container.NewPadded()),
+			nil,
+			nil,
+			a.list,
+		)
+	} else {
+		a.Content = container.NewStack(a.emptyHint, a.list)
+	}
 	return a
 }
 
@@ -189,11 +197,16 @@ func (a *AccountArea) Refresh() {
 		cc2[i] = accountCharacter{id: c.ID, name: c.Name, hasTokenWithScope: hasToken}
 	}
 	a.characters = cc2
+	if len(a.characters) == 0 {
+		a.emptyHint.Show()
+	} else {
+		a.emptyHint.Hide()
+	}
 	a.list.Refresh()
 	a.title.SetText(fmt.Sprintf("Characters (%d)", len(a.characters)))
 }
 
-func (a *AccountArea) showAddCharacterDialog() {
+func (a *AccountArea) ShowAddCharacterDialog() {
 	cancelCTX, cancel := context.WithCancel(context.TODO())
 	s := "Please follow instructions in your browser to add a new character."
 	infoText := binding.BindString(&s)

internal/app/ui/mobile/appbarwidget.go

@@ -29,10 +29,12 @@ type AppBar struct {
 
 // NewAppBar returns a new AppBar. The toolbar items are optional.
 func NewAppBar(title string, body fyne.CanvasObject, items ...widget.ToolbarItem) *AppBar {
+	bg := canvas.NewRectangle(theme.Color(colorAppBarBackground))
+	bg.SetMinSize(fyne.NewSize(10, 45))
 	w := &AppBar{
 		body:  body,
 		items: items,
-		bg:    canvas.NewRectangle(theme.Color(colorAppBarBackground)),
+		bg:    bg,
 	}
 	w.ExtendBaseWidget(w)
 	if title != "" {
@@ -64,34 +66,20 @@ func (w *AppBar) Refresh() {
 }
 
 func (w *AppBar) CreateRenderer() fyne.WidgetRenderer {
-	top := container.NewVBox()
-	if w.Navigator == nil {
-		row := container.NewHBox()
-		if w.title != nil {
-			row.Add(w.title)
-			row.Add(layout.NewSpacer())
-		}
-		if len(w.items) > 0 {
-			row.Add(container.NewVBox(widget.NewToolbar(w.items...)))
-		}
-		top.Add(row)
-	} else {
-		row := container.NewHBox(
-			kxwidget.NewTappableIcon(theme.NavigateBackIcon(), func() {
-				w.Navigator.Pop()
-			}),
-			layout.NewSpacer(),
-		)
-		if len(w.items) > 0 {
-			row.Add(container.NewVBox(widget.NewToolbar(w.items...)))
-		}
-		top.Add(row)
-		if w.title != nil {
-			top.Add(w.title)
-		}
+	row := container.NewStack()
+	if w.title != nil {
+		row.Add(container.NewHBox(layout.NewSpacer(), w.title, layout.NewSpacer()))
+	}
+	if w.Navigator != nil {
+		row.Add(container.NewHBox(kxwidget.NewTappableIcon(theme.NavigateBackIcon(), func() {
+			w.Navigator.Pop()
+		})))
+	}
+	if len(w.items) > 0 {
+		row.Add(container.NewHBox(layout.NewSpacer(), widget.NewToolbar(w.items...)))
 	}
 	p := theme.Padding()
-	top2 := container.New(layout.NewCustomPaddedLayout(-p, -p, -p, -p), container.NewStack(w.bg, top))
-	c := container.NewBorder(top2, nil, nil, nil, w.body)
+	top := container.New(layout.NewCustomPaddedLayout(-p, -p, -p, -p), container.NewStack(w.bg, row))
+	c := container.NewBorder(top, nil, nil, nil, w.body)
 	return widget.NewSimpleRenderer(c)
 }

internal/app/ui/mobile/mobile.go

@@ -352,7 +352,11 @@ func NewMobileUI(fyneApp fyne.App) *MobileUI {
 			theme.NewThemedResource(ui.IconManageaccountsSvg),
 			"Manage characters",
 			func() {
-				moreNav.Push(NewAppBar("Manage characters", u.AccountArea.Content))
+				moreNav.Push(NewAppBar(
+					"Manage characters",
+					u.AccountArea.Content,
+					widget.NewToolbarAction(theme.ContentAddIcon(), u.AccountArea.ShowAddCharacterDialog),
+				))
 			},
 		),
 		NewNavListItemWithIcon(

internal/app/ui/overview.go

@@ -89,7 +89,7 @@ func (a *OverviewArea) makeList() *widget.List {
 			for col := range len(overviewHeaders) {
 				row := f[col*2].(*fyne.Container).Objects[1].(*fyne.Container).Objects
 				data := row[1].(*widget.Label)
-				data.Text, data.Alignment, data.Importance = a.makeDataLabel(col, c)
+				data.Text, _, data.Importance = a.makeDataLabel(col, c)
 				data.Truncation = fyne.TextTruncateEllipsis
 				bg := f[col*2].(*fyne.Container).Objects[0]
 				if col == 0 {