keystone_ui-app 0.3.2 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 212b3a2339346db6ef60600e92c827266be5aceb55abe863f0e528b20f397b5f
-  data.tar.gz: be8069bbf3b0a9ec98c681bb71dc0114606b931ae147c3781ddce7eadbe104f4
+  metadata.gz: 7a6cdad5c44b2fa3fc519cc758c0b8b99641457035c225a84afe6cc4741bcb3d
+  data.tar.gz: cfa779ce21f5cf17a37240b9229ed6205db21938809944d733cf77a535af4c46
 SHA512:
-  metadata.gz: bfcb75b375a224b33da6373aed1c5592e62db6c554d5216e398001dc3207fb6b1fad5503d261bcc0da6ed29de701f9ae83858705499734e781477fda5ae279f2
-  data.tar.gz: 21632cbb807b95428a45e9e385debdec0885de72dca1e5555a279ab2370ea64daaa8f6633a10025b4886b74dd2f8a96da0d02ce71e264dfacd008aa7a95a5846
+  metadata.gz: 046a185c7e455766e39168ce20d65984addbb8a1c6b626da6abf37954366e067b023c03132fd9a16b59dc05831c7d41e411058704490b54dcbbeeb4112e8d72f
+  data.tar.gz: b9db43449c3593b9a260453d2f1646ede0a2cd90d9d87780dcb07dbae7f992e603547e71ded173b268c1f3282092740f14073bea9009ee5f78f8aacee6d21f7f

data/README.md

@@ -59,14 +59,95 @@ end
 
 A page that should show no bottom tabs calls `content_for :hide_bottom_tabs, true`.
 
+## App areas
+
+An app area is a part of the app that covers one or more keystone_ui navigation groups and gets one bottom tab. Declare the areas and the More page in the same initializer as the bottom tabs:
+
+```ruby
+KeystoneUi::App.configure do |config|
+  config.bottom_tab(label: "Home", href: "/", icon: HOME_ICON_SVG, permitted: ->(view) { view.user_signed_in? }, section: nil, ios_system_image: "house", android_icon: "home")
+  config.app_area(name: "Selling", description: "Quotes and orders", groups: [ "Sales" ], on_by_default: true, opens: :quotes, icon: ->(view) { view.render("icons/sales") }, ios_system_image: "cart", android_icon: "shopping_cart")
+  config.more_page(href: ->(view) { view.main_app.more_path }, icon: MORE_ICON_SVG, ios_system_image: "ellipsis", android_icon: "more_horiz")
+end
+```
+
+- `name:` is the area's name, and its tab is labelled with it.
+- `description:` says what the area holds.
+- `groups:` lists the labels of the keystone_ui navigation groups the area covers.
+- `on_by_default:` says whether the area is on for an account, and until accounts can save a choice it decides for every account.
+- `opens:` is the key of the navigation page the area's tab opens, and is optional.
+- `icon:`, `ios_system_image:` and `android_icon:` are the tab's icons, given as a bottom tab's are.
+- `more_page` declares the address of the app's More page and its tab's icons, and `href:` and `icon:` take a string or a callable given the view.
+
+The bar on a phone shows, in this order:
+
+1. The bottom tabs the person may see.
+2. One tab for each area that is on and holds a page the person may open. The tabs follow the order the person saved for their navigation groups, each area in the place of its first group, or the order the areas are declared in when the person saved none.
+3. A More tab, when the app declares a More page and the person may open a page that no tab in the bar opens.
+
+The bar holds no more than five tabs, More included, and leaves out the areas that come last first. An area's tab opens the page `opens:` names when the person may open it, and otherwise the first page in the area the person may open, in their saved order. An area's tab is marked current on any page in one of its groups, and the More tab is marked current on the More page.
+
+An app that declares no areas and no More page keeps the bar its bottom tabs give it.
+
+### The More page
+
+The app adds the route its `more_page` declaration points at, and draws the page in its own view with one call:
+
+```erb
+<%= ui_more_page %>
+```
+
+It lists every navigation group the person may see, each under a heading with the group's label and with the pages they may open under it. Groups and pages follow the person's desktop menu, including an order they saved, and a page declared with `navigation_tab` outside any group is a single row with no heading. Each row opens its page.
+
+## The account menu
+
+The person's account links, accounts and notifications are declared once and drawn the same way on desktop and on a phone:
+
+```ruby
+KeystoneUi::App.configure do |config|
+  config.person_supplier = ->(view) { { name: view.current_user.name, email: view.current_user.email, avatar_url: view.current_user.avatar_url } }
+  config.accounts_supplier = ->(view) { view.current_user.accounts.map { |account| { name: account.name, href: view.main_app.switch_account_path(account), current: account == view.current_account } } }
+  config.notifications(href: ->(view) { view.main_app.notifications_path }, unread_count: ->(view) { view.current_user.notifications.unread.count })
+  config.account_page(href: ->(view) { view.main_app.account_path })
+  config.account_link(label: "Settings", href: ->(view) { view.main_app.edit_user_registration_path }, permitted: ->(view) { view.user_signed_in? })
+  config.account_link(label: "Sign out", href: ->(view) { view.main_app.destroy_user_session_path }, permitted: ->(view) { view.user_signed_in? }, sign_out: true)
+end
+```
+
+- `account_link` declares one link, and the links are listed in the order they are declared.
+- `label:` is the link's label, `href:` takes a string or a callable given the view, and `permitted:` is a callable given the view that says whether the person sees the link.
+- `sign_out: true` draws the link as a button that sends DELETE to its address.
+- `account_page` declares the address of the app's Account page, and `href:` takes a string or a callable given the view.
+- `person_supplier` returns the person's `name`, `email` and an optional `avatar_url`. The avatar shows the picture when `avatar_url` is given, and otherwise the first letter of the name.
+- `accounts_supplier` returns the person's accounts, each with a `name`, the `href` that switches to it and whether it is `current`. Choosing an account sends PATCH to its `href`.
+- `notifications` declares the notifications address and the unread count, and each takes a value or a callable given the view.
+
+Once the app declares an account link, the right of the desktop top bar shows the bell with the unread count, the account switcher named after the current account, and the person's avatar, which opens a dropdown of the account links they may see. These take the place of the menus the layout passes to the frame. An app that declares no account links keeps the menus it passes.
+
+When the app declares an Account page, the top of every screen on a phone browser shows the person's avatar as a link to it, beside the phone menus. Inside the native app the avatar is not drawn.
+
+### The Account page
+
+The app adds the route its `account_page` declaration points at, and draws the page in its own view with one call:
+
+```erb
+<%= ui_account_page %>
+```
+
+It shows the person's avatar, name and email, then every account with the current one marked, then a Notifications row with the unread count, then the account links the person may see in the same order as the desktop dropdown. A long name wraps and a long email is cut short. Inside the native app it is drawn as an ordinary web page.
+
 ## Boot check
 
-The app refuses to boot when its bottom tabs or screen rules are declared wrong, and the error says which one:
+The app refuses to boot when its bottom tabs, areas, More page or screen rules are declared wrong, and the error says which one:
 
 - A bottom tab with no label, address, icon, iOS image or Android icon.
 - A bottom tab whose `section:` is not the label of a declared keystone_ui navigation group.
 - Two bottom tabs with the same label.
 - More than five bottom tabs.
+- A More page with more than four bottom tabs.
+- An area with no tab icon, iOS image or Android icon.
+- An area that names a group that is not a declared keystone_ui navigation group, named with the area.
+- Two areas that cover the same group, named with the group.
 - A screen rule with no pattern.
 
 A tab with no label and a screen rule with no pattern are named by their position in the order they were declared, counting from 1.
@@ -124,7 +205,7 @@ That adds two addresses:
 
 The controller behind them inherits from the host's `ApplicationController`, so a bottom tab's `permitted:` and `href:` callables are given a view with the host's helpers. The host keeps both addresses open to a person who is not signed in, since the native app reads them before sign-in.
 
-Each configuration's `settings.tabs` holds one native tab for each bottom tab the person is permitted to see, with its label as the title and its address as the path. The iOS app gets a list with each tab's `ios_system_image_name`. The Android app gets the same tabs with each tab's `icon`, encoded as one JSON string.
+Each configuration's `settings.tabs` holds the same tabs, in the same order, as the person's bar on a phone browser, with each tab's label as the title and its address as the path. The iOS app gets a list with each tab's `ios_system_image_name`. The Android app gets the same tabs with each tab's `icon`, encoded as one JSON string.
 
 Both configurations ship a rule that opens a page whose address ends in `/new` or `/edit` as a modal. The Android configuration also ships a rule before it that opens every page in the `hotwire://fragment/web` fragment with pull to refresh.
 
@@ -142,7 +223,8 @@ end
 - The `html` element carries keystone_ui's theme attributes and the current locale.
 - The `html` element carries the `dark` class when the theme mode keystone_ui chooses for the person is dark, and leaves it off for any other mode.
 - The `body` element carries the attributes the layout passes as `body:`.
-- On a desktop browser, keystone_ui's navigation bar with the logo and the menus.
+- On a desktop browser, keystone_ui's navigation bar with the logo and the menus, or the account menu once the app declares account links.
+- On a phone browser, the person's avatar at the top of the header, linking to the Account page, when the app declares one.
 - On a phone browser, the phone menus at the top of the header on every page, including form and show pages, inside an element hidden from the `lg` breakpoint up.
 - On a phone browser, keystone_ui's phone header for a page drawn with `ui_form_page` or `ui_show_page`, with its back link, title and subtitle.
 - On a phone browser, a page that is not a form or show page shows a menu of the current section's tabs, with the tab the page belongs to marked as active. The section is the navigation group holding the tab keystone_ui's current tab supplier names, and the menu leaves out tabs the person is not permitted to see. A page in no section shows no menu.
@@ -151,7 +233,7 @@ end
 - Inside the native app, the `add-button` bridge component sends a page header's add action to the native plus button, and a page with no add action sends none.
 - Inside the native app, a `style` element in the head that hides the web submit button of a form marked with `ui_native_form_data` once the native app has connected its `form` bridge component.
 - Inside the native app, no navigation bar, no phone menus, no phone header and no footer, the `hotwire-native` class on the `html` element, and a viewport that cannot be pinch-zoomed.
-- On a phone browser, keystone_ui's bottom nav at the foot of every page with the tabs the app declares, leaving out tabs the person is not permitted to see. The tab whose section is the navigation group holding the current tab is marked as active. The bar is hidden from the `lg` breakpoint up, and is not drawn inside the native app, on a page that calls `content_for :hide_bottom_tabs, true`, or when the person may see none of the declared tabs.
+- On a phone browser, keystone_ui's bottom nav at the foot of every page with the bottom tabs the person is permitted to see, then the tabs of the app's areas and the More tab as the App areas section says. The tab whose section, or whose area's groups, hold the current tab is marked as active. The bar is hidden from the `lg` breakpoint up, and is not drawn inside the native app, on a page that calls `content_for :hide_bottom_tabs, true`, or when the person may see none of the declared tabs.
 - In a browser, the footer, unless the page calls `content_for :hide_footer, true`.
 
 ## Licence

data/app/components/keystone_ui/app/account_menu_component.html.erb

@@ -0,0 +1,32 @@
+<div class="<%= WRAPPER_CLASSES %>">
+  <% if notifications %>
+    <%= link_to notifications.href_for(helpers), class: BELL_CLASSES, aria: { label: "Notifications" } do %>
+      <%= BELL_ICON.html_safe %>
+      <% if unread_count.positive? %>
+        <%= render Keystone::Ui::BadgeComponent.new(label: unread_count.to_s, variant: :info) %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% if current_account %>
+    <div class="<%= SWITCHER_CLASSES %>">
+      <%= render Keystone::Ui::NavDropdownComponent.new(title: current_account[:name], area: "accounts") do %>
+        <% accounts.each do |account| %>
+          <% if account[:current] %>
+            <span class="ks-nav-item active" aria-current="true"><%= account[:name] %></span>
+          <% else %>
+            <%= button_to account[:name], account[:href], method: :patch, class: BUTTON_CLASSES %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+  <%= render Keystone::Ui::NavDropdownComponent.new(title: render(KeystoneUi::App::AvatarComponent.new), area: "account") do %>
+    <% links.each do |link| %>
+      <% if link.sign_out %>
+        <%= button_to link.label, link.href_for(helpers), method: :delete, class: BUTTON_CLASSES %>
+      <% else %>
+        <%= render Keystone::Ui::NavItemComponent.new(label: link.label, href: link.href_for(helpers)) %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/keystone_ui/app/account_menu_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module App
+    class AccountMenuComponent < ViewComponent::Base
+      WRAPPER_CLASSES = "ks-app-account-menu flex items-center gap-2"
+      BUTTON_CLASSES = "ks-nav-item w-full text-left cursor-pointer"
+
+      SWITCHER_CLASSES = "ks-app-account-switcher"
+      BELL_CLASSES = "ks-app-notifications-bell ks-nav-item inline-flex items-center gap-1"
+      BELL_ICON = <<~SVG.freeze
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-5" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
+        </svg>
+      SVG
+
+      def notifications
+        KeystoneUi::App.configuration.notifications_link
+      end
+
+      def unread_count
+        notifications.unread_count_for(helpers).to_i
+      end
+
+      def accounts
+        KeystoneUi::App.configuration.accounts(helpers)
+      end
+
+      def current_account
+        accounts.find { |account| account[:current] }
+      end
+
+      def links
+        KeystoneUi::App.configuration.visible_account_links(helpers)
+      end
+    end
+  end
+end

data/app/components/keystone_ui/app/account_page_component.html.erb

@@ -0,0 +1,60 @@
+<section>
+  <%= render Keystone::Ui::SectionComponent.new do %>
+    <div class="<%= PERSON_CLASSES %>">
+      <%= render KeystoneUi::App::AvatarComponent.new %>
+      <div class="min-w-0 flex-1">
+        <span class="<%= NAME_CLASSES %>"><%= person[:name] %></span>
+        <span class="<%= EMAIL_CLASSES %>"><%= person[:email] %></span>
+      </div>
+    </div>
+  <% end %>
+</section>
+<% if accounts.any? %>
+  <section class="ks-app-account-accounts">
+    <%= render Keystone::Ui::SectionComponent.new(title: "Accounts") do %>
+      <div class="ks-value-list">
+        <% accounts.each do |account| %>
+          <% if account[:current] %>
+            <div class="<%= ROW_CLASSES %>" aria-current="true">
+              <span class="<%= LABEL_CLASSES %>"><%= account[:name] %></span>
+              <%= render Keystone::Ui::BadgeComponent.new(label: "Current", variant: :success, class: "shrink-0") %>
+            </div>
+          <% else %>
+            <%= button_to account[:href], method: :patch, class: BUTTON_ROW_CLASSES do %>
+              <span class="<%= LABEL_CLASSES %>"><%= account[:name] %></span>
+              <%= CHEVRON_ICON.html_safe %>
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  </section>
+<% end %>
+<% if notifications %>
+  <section>
+    <%= render Keystone::Ui::SectionComponent.new do %>
+      <%= render Keystone::Ui::LinkListComponent.new(rows: [ notifications_row ]) %>
+    <% end %>
+  </section>
+<% end %>
+<% if links.any? %>
+  <section class="ks-app-account-links">
+    <%= render Keystone::Ui::SectionComponent.new do %>
+      <div class="ks-value-list">
+        <% links.each do |link| %>
+          <% if link.sign_out %>
+            <%= button_to link.href_for(helpers), method: :delete, class: BUTTON_ROW_CLASSES do %>
+              <span class="<%= LABEL_CLASSES %>"><%= link.label %></span>
+              <%= CHEVRON_ICON.html_safe %>
+            <% end %>
+          <% else %>
+            <%= link_to link.href_for(helpers), class: ROW_CLASSES do %>
+              <span class="<%= LABEL_CLASSES %>"><%= link.label %></span>
+              <%= CHEVRON_ICON.html_safe %>
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  </section>
+<% end %>

data/app/components/keystone_ui/app/account_page_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module App
+    class AccountPageComponent < ViewComponent::Base
+      PERSON_CLASSES = "ks-app-account-person flex min-w-0 items-center gap-3"
+      NAME_CLASSES = "ks-paragraph block font-semibold break-words"
+      EMAIL_CLASSES = "ks-value-list-note block truncate"
+      ROW_CLASSES = "ks-value-list-row items-center no-underline"
+      BUTTON_ROW_CLASSES = "#{ROW_CLASSES} w-full text-left cursor-pointer"
+      CHEVRON_ICON = Keystone::Ui::SettingsLinkComponent::CHEVRON_ICON
+      LABEL_CLASSES = "ks-paragraph ks-settings-link-label block min-w-0 flex-1 break-words"
+
+      def accounts
+        KeystoneUi::App.configuration.accounts(helpers)
+      end
+
+      def notifications
+        KeystoneUi::App.configuration.notifications_link
+      end
+
+      def notifications_row
+        count = notifications.unread_count_for(helpers).to_i
+        row = { label: "Notifications", href: notifications.href_for(helpers) }
+        count.positive? ? row.merge(badge: { label: count.to_s, variant: :info }) : row
+      end
+
+      def links
+        KeystoneUi::App.configuration.visible_account_links(helpers)
+      end
+
+      def person
+        KeystoneUi::App.configuration.person(helpers)
+      end
+    end
+  end
+end

data/app/components/keystone_ui/app/avatar_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module App
+    class AvatarComponent < ViewComponent::Base
+      CLASSES = "ks-app-avatar inline-flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-gray-200 text-sm font-semibold text-gray-700 dark:bg-gray-700 dark:text-gray-100"
+
+      def call
+        tag.span(picture || initial, class: CLASSES)
+      end
+
+      private
+
+      def person
+        KeystoneUi::App.configuration.person(helpers)
+      end
+
+      def picture
+        tag.img(src: person[:avatar_url], alt: person[:name].to_s, class: "size-full object-cover") if person[:avatar_url].present?
+      end
+
+      def initial
+        person[:name].to_s.strip[0].to_s.upcase
+      end
+    end
+  end
+end

data/app/components/keystone_ui/app/bottom_tabs_component.html.erb

@@ -1,5 +1,5 @@
 <%= render Keystone::Ui::BottomNavComponent.new do %>
   <% tabs.each do |tab| %>
-    <%= render Keystone::Ui::BottomNavItemComponent.new(label: tab.label, href: tab.href_for(helpers), icon: tab.icon_for(helpers), active: active?(tab)) %>
+    <%= render Keystone::Ui::BottomNavItemComponent.new(label: tab.label, href: tab.href, icon: tab.icon, active: active?(tab)) %>
   <% end %>
 <% end %>

data/app/components/keystone_ui/app/bottom_tabs_component.rb

@@ -2,6 +2,7 @@
 
 require "uri"
 require "rack/utils"
+require "keystone_ui/app/bottom_bar"
 require "keystone_ui/app/current_section"
 
 module KeystoneUi
@@ -12,21 +13,21 @@ module KeystoneUi
       end
 
       def tabs
-        @tabs ||= KeystoneUi::App.configuration.bottom_tabs.select { |tab| tab.permitted.call(helpers) }
+        @tabs ||= KeystoneUi::App::BottomBar.new(helpers).tabs
       end
 
       def active?(tab)
-        return in_section?(tab) if tab.section
+        return in_section?(tab) if tab.sections.any?
 
         tabs.none? { |other| in_section?(other) } && on_page?(tab)
       end
 
       def in_section?(tab)
-        section.present? && tab.section == section.label
+        section.present? && tab.sections.include?(section.label)
       end
 
       def on_page?(tab)
-        address = URI.parse(tab.href_for(helpers))
+        address = URI.parse(tab.href)
         address.path == request.path &&
           Rack::Utils.parse_query(address.query).all? { |name, value| request.query_parameters[name] == value }
       end

data/app/components/keystone_ui/app/more_page_component.html.erb

@@ -0,0 +1,7 @@
+<% groups.each do |group| %>
+  <section>
+    <%= render Keystone::Ui::SectionComponent.new(title: group.label) do %>
+      <%= render Keystone::Ui::LinkListComponent.new(rows: group.rows) %>
+    <% end %>
+  </section>
+<% end %>

data/app/components/keystone_ui/app/more_page_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+require "keystone_ui/visible_navigation"
+
+module KeystoneUi
+  module App
+    class MorePageComponent < ViewComponent::Base
+      Group = Struct.new(:label, :rows, keyword_init: true)
+
+      def groups
+        visible_groups.map do |group|
+          Group.new(label: (group.label unless group.standalone), rows: group.tabs.map { |page| { label: page.label, href: page.href } })
+        end
+      end
+
+      private
+
+      def visible_groups
+        KeystoneUi::VisibleNavigation.new(
+          KeystoneUi.configuration.navigation_groups,
+          view: helpers,
+          saved_order: saved_order,
+          current_tab: nil
+        ).groups
+      end
+
+      def saved_order
+        value = KeystoneUi.configuration.supplied_preference(helpers, :navigation)&.dig(:value)
+        value.is_a?(Hash) && value["order"].is_a?(Array) ? value["order"] : []
+      end
+    end
+  end
+end

data/app/components/keystone_ui/app/shell_component.html.erb

@@ -8,7 +8,16 @@
   <%= tag.body(**body) do %>
     <header>
       <%= flash %>
-      <%= tag.div(phone_menus, class: PHONE_ONLY) if phone_menus? && !native_app? %>
+      <% if phone_avatar_shown? %>
+        <%= tag.div(class: PHONE_AVATAR_ROW) do %>
+          <%= tag.div(phone_menus, class: "min-w-0 flex-1") %>
+          <%= link_to account_page.href_for(helpers), class: "shrink-0", aria: { label: "Account" } do %>
+            <%= render KeystoneUi::App::AvatarComponent.new %>
+          <% end %>
+        <% end %>
+      <% elsif phone_menus? && !native_app? %>
+        <%= tag.div(phone_menus, class: PHONE_ONLY) %>
+      <% end %>
       <% if phone_header_shown? %>
         <%= helpers.ui_mobile_header(title: page_signalled(:title), back_url: page_signalled(:back_url), subtitle: page_signalled(:subtitle)) %>
       <% elsif !native_app? %>
@@ -24,7 +33,11 @@
     <% else %>
       <%= helpers.ui_navigation do |navigation| %>
         <% navigation.with_logo { logo.to_s } if logo? %>
-        <% navigation.with_menus { menus.to_s } if menus? %>
+        <% if account_menu? %>
+          <% navigation.with_menus { render KeystoneUi::App::AccountMenuComponent.new } %>
+        <% elsif menus? %>
+          <% navigation.with_menus { menus.to_s } %>
+        <% end %>
         <%= page %>
       <% end %>
     <% end %>

data/app/components/keystone_ui/app/shell_component.rb

@@ -13,6 +13,7 @@ module KeystoneUi
       renders_one :footer
 
       PHONE_ONLY = "lg:hidden"
+      PHONE_AVATAR_ROW = "#{PHONE_ONLY} flex items-center gap-2 pr-4"
       PAGE_SIGNALS = %i[show_page form_page].freeze
       VIEWPORT = "width=device-width, initial-scale=1"
       NATIVE_APP_VIEWPORT = "#{VIEWPORT}, maximum-scale=1.0, user-scalable=0"
@@ -46,6 +47,18 @@ module KeystoneUi
         page_signal && !native_app?
       end
 
+      def account_page
+        KeystoneUi::App.configuration.account_page_link
+      end
+
+      def phone_avatar_shown?
+        account_page && !native_app?
+      end
+
+      def account_menu?
+        KeystoneUi::App.configuration.account_links.any?
+      end
+
       def footer_shown?
         !native_app? && !helpers.content_for?(:hide_footer)
       end

data/app/controllers/keystone_ui/app/path_configurations_controller.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "keystone_ui/app/bottom_bar"
+
 module KeystoneUi
   module App
     class PathConfigurationsController < ::ApplicationController
@@ -21,11 +23,11 @@ module KeystoneUi
       private
 
       def ios_tabs
-        permitted_tabs.map { |tab| { title: tab.label, path: tab.href_for(view), ios_system_image_name: tab.ios_system_image } }
+        bar_tabs.map { |tab| { title: tab.label, path: tab.href, ios_system_image_name: tab.ios_system_image } }
       end
 
       def android_tabs
-        permitted_tabs.map { |tab| { title: tab.label, path: tab.href_for(view), icon: tab.android_icon } }
+        bar_tabs.map { |tab| { title: tab.label, path: tab.href, icon: tab.android_icon } }
       end
 
       def app_settings
@@ -36,8 +38,8 @@ module KeystoneUi
         KeystoneUi::App.configuration.native_rules
       end
 
-      def permitted_tabs
-        KeystoneUi::App.configuration.bottom_tabs.select { |tab| tab.permitted.call(view) }
+      def bar_tabs
+        @bar_tabs ||= KeystoneUi::App::BottomBar.new(view).tabs
       end
 
       def view

data/app/helpers/keystone_ui_app_helper.rb

@@ -5,6 +5,14 @@ module KeystoneUiAppHelper
     render KeystoneUi::App::ShellComponent.new(body: body), &block
   end
 
+  def ui_more_page
+    render KeystoneUi::App::MorePageComponent.new
+  end
+
+  def ui_account_page
+    render KeystoneUi::App::AccountPageComponent.new
+  end
+
   def ui_native_form_data
     { controller: "bridge--form", action: "turbo:submit-start->bridge--form#submitStart turbo:submit-end->bridge--form#submitEnd" }
   end

data/lib/keystone_ui/app/bottom_bar.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+require "keystone_ui/navigation_order"
+require "keystone_ui/app/shell_check"
+
+module KeystoneUi
+  module App
+    class BottomBar
+      Tab = Struct.new(:label, :href, :icon, :ios_system_image, :android_icon, :sections, keyword_init: true)
+
+      MORE_LABEL = "More"
+      MOST_TABS = ShellCheck::MOST_BOTTOM_TABS
+
+      def initialize(view)
+        @view = view
+      end
+
+      def tabs
+        shown = fixed_tabs + area_tabs
+        full = shown.first(MOST_TABS)
+        more_tab_needed?(full) ? shown.first(MOST_TABS - 1) + [ more_tab ] : full
+      end
+
+      private
+
+      def fixed_tabs
+        configuration.bottom_tabs.select { |tab| tab.permitted.call(@view) }.map do |tab|
+          Tab.new(label: tab.label, href: tab.href_for(@view), icon: tab.icon_for(@view), ios_system_image: tab.ios_system_image, android_icon: tab.android_icon, sections: [ tab.section ].compact)
+        end
+      end
+
+      def area_tabs
+        shown = configuration.app_areas.select { |area| area.on_by_default && area_pages(area).any? }
+        in_person_order(shown).map { |area| area_tab(area) }
+      end
+
+      def area_tab(area)
+        Tab.new(label: area.name, href: opened_page(area).href_for(@view), icon: area.icon_for(@view), ios_system_image: area.ios_system_image, android_icon: area.android_icon, sections: area.groups)
+      end
+
+      def more_tab_needed?(shown)
+        configuration.more_page_tab && (permitted_groups.flat_map(&:last).map { |page| page.href_for(@view) } - shown.map(&:href)).any?
+      end
+
+      def more_tab
+        more = configuration.more_page_tab
+        Tab.new(label: MORE_LABEL, href: more.href_for(@view), icon: more.icon_for(@view), ios_system_image: more.ios_system_image, android_icon: more.android_icon, sections: [])
+      end
+
+      def opened_page(area)
+        pages = area_pages(area)
+        pages.find { |page| page.key == area.opens } || pages.first
+      end
+
+      def in_person_order(areas)
+        return areas if saved_order.empty?
+
+        labels = arranged_groups.map { |group, _pages| group.label }
+        areas.each_with_index
+          .sort_by { |area, declared| [ area.groups.filter_map { |label| labels.index(label) }.min, declared ] }
+          .map(&:first)
+      end
+
+      def area_pages(area)
+        arranged_groups.select { |group, _pages| area.groups.include?(group.label) }.flat_map(&:last)
+      end
+
+      def arranged_groups
+        @arranged_groups ||= KeystoneUi::NavigationOrder.new(saved_order).arrange(permitted_groups)
+      end
+
+      def permitted_groups
+        @permitted_groups ||= KeystoneUi.configuration.navigation_groups
+          .map { |group| [ group, group.tabs_permitted_for(@view) ] }
+          .reject { |_group, pages| pages.empty? }
+      end
+
+      def saved_order
+        @saved_order ||= begin
+          value = KeystoneUi.configuration.supplied_preference(@view, :navigation)&.dig(:value)
+          value.is_a?(Hash) && value["order"].is_a?(Array) ? value["order"] : []
+        end
+      end
+
+      def configuration
+        KeystoneUi::App.configuration
+      end
+    end
+  end
+end

data/lib/keystone_ui/app/configuration.rb

@@ -13,10 +13,52 @@ module KeystoneUi
         end
       end
 
-      attr_reader :bottom_tabs, :native_rules, :native_settings
+      AppArea = Struct.new(:name, :description, :groups, :on_by_default, :opens, :icon, :ios_system_image, :android_icon, keyword_init: true) do
+        def icon_for(view)
+          icon.respond_to?(:call) ? icon.call(view) : icon
+        end
+      end
+
+      MorePage = Struct.new(:href, :icon, :ios_system_image, :android_icon, keyword_init: true) do
+        def href_for(view)
+          href.respond_to?(:call) ? href.call(view) : href
+        end
+
+        def icon_for(view)
+          icon.respond_to?(:call) ? icon.call(view) : icon
+        end
+      end
+
+      AccountLink = Struct.new(:label, :href, :permitted, :sign_out, keyword_init: true) do
+        def href_for(view)
+          href.respond_to?(:call) ? href.call(view) : href
+        end
+      end
+
+      AccountPage = Struct.new(:href, keyword_init: true) do
+        def href_for(view)
+          href.respond_to?(:call) ? href.call(view) : href
+        end
+      end
+
+      Notifications = Struct.new(:href, :unread_count, keyword_init: true) do
+        def href_for(view)
+          href.respond_to?(:call) ? href.call(view) : href
+        end
+
+        def unread_count_for(view)
+          unread_count.respond_to?(:call) ? unread_count.call(view) : unread_count
+        end
+      end
+
+      attr_accessor :person_supplier, :accounts_supplier
+
+      attr_reader :bottom_tabs, :app_areas, :more_page_tab, :account_links, :account_page_link, :notifications_link, :native_rules, :native_settings
 
       def initialize
         @bottom_tabs = []
+        @app_areas = []
+        @account_links = []
         @native_rules = []
         @native_settings = {}
       end
@@ -25,6 +67,38 @@ module KeystoneUi
         @bottom_tabs << BottomTab.new(label: label, href: href, icon: icon, permitted: permitted, section: section, ios_system_image: ios_system_image, android_icon: android_icon)
       end
 
+      def app_area(name:, description:, groups:, on_by_default:, icon:, ios_system_image:, android_icon:, opens: nil)
+        @app_areas << AppArea.new(name: name, description: description, groups: groups, on_by_default: on_by_default, opens: opens, icon: icon, ios_system_image: ios_system_image, android_icon: android_icon)
+      end
+
+      def more_page(href:, icon:, ios_system_image:, android_icon:)
+        @more_page_tab = MorePage.new(href: href, icon: icon, ios_system_image: ios_system_image, android_icon: android_icon)
+      end
+
+      def account_link(label:, href:, permitted:, sign_out: false)
+        @account_links << AccountLink.new(label: label, href: href, permitted: permitted, sign_out: sign_out)
+      end
+
+      def visible_account_links(view)
+        account_links.select { |link| link.permitted.call(view) }
+      end
+
+      def account_page(href:)
+        @account_page_link = AccountPage.new(href: href)
+      end
+
+      def notifications(href:, unread_count:)
+        @notifications_link = Notifications.new(href: href, unread_count: unread_count)
+      end
+
+      def person(view)
+        person_supplier ? person_supplier.call(view) : {}
+      end
+
+      def accounts(view)
+        accounts_supplier ? accounts_supplier.call(view) : []
+      end
+
       def native_rule(patterns:, properties:)
         @native_rules << { patterns: patterns, properties: properties }
       end

data/lib/keystone_ui/app/engine.rb

@@ -11,7 +11,9 @@ module KeystoneUi
         KeystoneUi::App::ShellCheck.new(
           bottom_tabs: configuration.bottom_tabs,
           native_rules: configuration.native_rules,
-          sections: KeystoneUi.configuration.navigation_groups.map(&:label)
+          sections: KeystoneUi.configuration.navigation_groups.map(&:label),
+          app_areas: configuration.app_areas,
+          more_page: configuration.more_page_tab
         ).call
       end
 

data/lib/keystone_ui/app/shell_check.rb

@@ -7,8 +7,10 @@ module KeystoneUi
 
       MOST_BOTTOM_TABS = 5
 
-      def initialize(bottom_tabs:, native_rules:, sections:)
+      def initialize(bottom_tabs:, native_rules:, sections:, app_areas: [], more_page: nil)
         @bottom_tabs = bottom_tabs
+        @more_page = more_page
+        @app_areas = app_areas
         @native_rules = native_rules
         @sections = sections
       end
@@ -24,6 +26,9 @@ module KeystoneUi
         end
         raise Error, "More than one bottom tab has the label #{shared_label}." if shared_label
         raise Error, "#{@bottom_tabs.size} bottom tabs are declared, and no more than #{MOST_BOTTOM_TABS} are allowed." if @bottom_tabs.size > MOST_BOTTOM_TABS
+        raise Error, "#{@bottom_tabs.size} bottom tabs are declared with a More page, and no more than #{MOST_BOTTOM_TABS - 1} are allowed." if @more_page && @bottom_tabs.size > MOST_BOTTOM_TABS - 1
+        @app_areas.each { |area| check_area(area) }
+        raise Error, "More than one area covers the #{shared_group} group." if shared_group
         @native_rules.each.with_index(1) do |rule, position|
           raise Error, "Screen rule #{position} has no pattern." if Array(rule[:patterns]).all? { |pattern| blank?(pattern) }
         end
@@ -32,6 +37,18 @@ module KeystoneUi
 
       private
 
+      def check_area(area)
+        raise Error, "The #{area.name} area's tab has no icon." if blank?(area.icon)
+        raise Error, "The #{area.name} area's tab has no iOS image." if blank?(area.ios_system_image)
+        raise Error, "The #{area.name} area's tab has no Android icon." if blank?(area.android_icon)
+        undeclared = area.groups.find { |group| !@sections.include?(group) }
+        raise Error, "The #{area.name} area names the #{undeclared} group, which is not a declared navigation group." if undeclared
+      end
+
+      def shared_group
+        @app_areas.flat_map { |area| area.groups.uniq }.tally.find { |_group, count| count > 1 }&.first
+      end
+
       def shared_label
         @bottom_tabs.map(&:label).tally.find { |_label, count| count > 1 }&.first
       end

data/lib/keystone_ui/app/version.rb

@@ -2,6 +2,6 @@
 
 module KeystoneUi
   module App
-    VERSION = "0.3.2"
+    VERSION = "0.4.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui-app
 version: !ruby/object:Gem::Version
-  version: 0.3.2
+  version: 0.4.0
 platform: ruby
 authors:
 - Tyler Schneider
@@ -80,8 +80,15 @@ files:
 - app/assets/javascripts/keystone_ui_app/hotwire_native_bridge.js
 - app/assets/javascripts/keystone_ui_app/index.js
 - app/assets/javascripts/keystone_ui_app/menu_button_controller.js
+- app/components/keystone_ui/app/account_menu_component.html.erb
+- app/components/keystone_ui/app/account_menu_component.rb
+- app/components/keystone_ui/app/account_page_component.html.erb
+- app/components/keystone_ui/app/account_page_component.rb
+- app/components/keystone_ui/app/avatar_component.rb
 - app/components/keystone_ui/app/bottom_tabs_component.html.erb
 - app/components/keystone_ui/app/bottom_tabs_component.rb
+- app/components/keystone_ui/app/more_page_component.html.erb
+- app/components/keystone_ui/app/more_page_component.rb
 - app/components/keystone_ui/app/native_add_button_component.rb
 - app/components/keystone_ui/app/native_menu_button_component.rb
 - app/components/keystone_ui/app/page_actions_component.html.erb
@@ -96,6 +103,7 @@ files:
 - config/routes.rb
 - lib/keystone_ui-app.rb
 - lib/keystone_ui/app.rb
+- lib/keystone_ui/app/bottom_bar.rb
 - lib/keystone_ui/app/configuration.rb
 - lib/keystone_ui/app/current_section.rb
 - lib/keystone_ui/app/engine.rb