Animated widget offsets; phone sidebars

9 files changed, 264 insertions, 57 deletions

diff --git a/src/ui/inputwidget.c b/src/ui/inputwidget.c
index 9b36b057..e51ec64b 100644
--- a/src/ui/inputwidget.c
+++ b/src/ui/inputwidget.c
@@ -133,6 +133,7 @@ void init_InputWidget(iInputWidget *d, size_t maxLen) {
 
 void deinit_InputWidget(iInputWidget *d) {
     if (isSelected_Widget(d)) {
+        SDL_StopTextInput();
         enableEditorKeysInMenus_(iTrue);
     }
     delete_TextBuf(d->buffered);
diff --git a/src/ui/sidebarwidget.c b/src/ui/sidebarwidget.c
index da76c4d4..b1dfc378 100644
--- a/src/ui/sidebarwidget.c
+++ b/src/ui/sidebarwidget.c
@@ -451,6 +451,10 @@ static const char *tightModeLabels_[max_SidebarMode] = {
     "\U0001f5b9",
 };
 
+const char *icon_SidebarMode(enum iSidebarMode mode) {
+    return tightModeLabels_[mode];
+}
+
 void init_SidebarWidget(iSidebarWidget *d, enum iSidebarSide side) {
     iWidget *w = as_Widget(d);
     init_Widget(w);
@@ -470,28 +474,43 @@ void init_SidebarWidget(iSidebarWidget *d, enum iSidebarSide side) {
     d->width = 73 * gap_UI;
 #endif
     setFlags_Widget(w, fixedWidth_WidgetFlag, iTrue);
-    d->maxButtonLabelWidth = 0;
     iWidget *vdiv = makeVDiv_Widget();
     addChildFlags_Widget(w, vdiv, resizeToParentWidth_WidgetFlag | resizeToParentHeight_WidgetFlag);
-    iWidget *buttons = new_Widget();
-    for (int i = 0; i < max_SidebarMode; i++) {
-        d->modeButtons[i] = addChildFlags_Widget(
-            buttons,
-            iClob(new_LabelWidget(
-                tightModeLabels_[i],
-                format_CStr("%s.mode arg:%d", cstr_String(id_Widget(w)), i))),
-            frameless_WidgetFlag);
-        d->maxButtonLabelWidth =
-            iMaxi(d->maxButtonLabelWidth,
-                  3 * gap_UI + measure_Text(uiLabel_FontId, normalModeLabels_[i]).x);
+    if (deviceType_App() == phone_AppDeviceType && d->side == left_SideBarSide) {
     }
-    addChildFlags_Widget(vdiv,
-                         iClob(buttons),
-                         arrangeHorizontal_WidgetFlag | resizeWidthOfChildren_WidgetFlag |
+    iZap(d->modeButtons);
+    /* On a phone, the right sidebar is used exclusively for Identities. */
+    const iBool isPhone = deviceType_App() == phone_AppDeviceType;
+    if (!isPhone || d->side == left_SideBarSide) {
+        iWidget *buttons = new_Widget();
+        setId_Widget(buttons, "buttons");
+        for (int i = 0; i < max_SidebarMode; i++) {
+            if (deviceType_App() == phone_AppDeviceType && i == identities_SidebarMode) {
+                continue;
+            }
+            d->modeButtons[i] = addChildFlags_Widget(
+                buttons,
+                iClob(new_LabelWidget(
+                    tightModeLabels_[i],
+                    format_CStr("%s.mode arg:%d", cstr_String(id_Widget(w)), i))),
+                    frameless_WidgetFlag | (isPhone ? noBackground_WidgetFlag : 0));
+        }
+        setButtonFont_SidebarWidget(d, isPhone ? uiLabelLarge_FontId : uiLabel_FontId);
+        addChildFlags_Widget(vdiv,
+                             iClob(buttons),
+                             arrangeHorizontal_WidgetFlag | resizeWidthOfChildren_WidgetFlag |
                              arrangeHeight_WidgetFlag | resizeToParentWidth_WidgetFlag |
-                         drawBackgroundToHorizontalSafeArea_WidgetFlag);
-    if (deviceType_App() == phone_AppDeviceType) {
-        setBackgroundColor_Widget(buttons, uiBackground_ColorId);
+                             drawBackgroundToHorizontalSafeArea_WidgetFlag);
+        if (deviceType_App() == phone_AppDeviceType) {
+            setBackgroundColor_Widget(buttons, uiBackground_ColorId);
+        }
+    }
+    else {
+        iLabelWidget *heading = new_LabelWidget("Identities", NULL);
+        setBackgroundColor_Widget(as_Widget(heading), uiBackgroundUnfocusedSelection_ColorId);
+        setTextColor_LabelWidget(heading, uiIcon_ColorId);
+        setFont_LabelWidget(addChild_Widget(vdiv, iClob(heading)),
+                            uiLabelLarge_FontId);
     }
     iWidget *content = new_Widget();
     setFlags_Widget(content, resizeChildren_WidgetFlag, iTrue);
@@ -502,7 +521,9 @@ void init_SidebarWidget(iSidebarWidget *d, enum iSidebarSide side) {
     d->blank = new_Widget();
     addChildFlags_Widget(content, iClob(d->blank), resizeChildren_WidgetFlag);
     addChildFlags_Widget(vdiv, iClob(content), expand_WidgetFlag);
-    setMode_SidebarWidget(d, bookmarks_SidebarMode);
+    setMode_SidebarWidget(d,
+                          deviceType_App() == phone_AppDeviceType && d->side == right_SideBarSide ?
+                          identities_SidebarMode : bookmarks_SidebarMode);
     d->resizer =
         addChildFlags_Widget(w,
                              iClob(new_Widget()),
@@ -524,6 +545,18 @@ void deinit_SidebarWidget(iSidebarWidget *d) {
     deinit_String(&d->cmdPrefix);
 }
 
+void setButtonFont_SidebarWidget(iSidebarWidget *d, int font) {
+    d->maxButtonLabelWidth = 0;
+    for (int i = 0; i < max_SidebarMode; i++) {
+        if (d->modeButtons[i]) {
+            setFont_LabelWidget(d->modeButtons[i], font);
+            d->maxButtonLabelWidth =
+                iMaxi(d->maxButtonLabelWidth,
+                      3 * gap_UI + measure_Text(font, normalModeLabels_[i]).x);
+        }
+    }
+}
+
 static const iGmIdentity *constHoverIdentity_SidebarWidget_(const iSidebarWidget *d) {
     if (d->mode == identities_SidebarMode) {
         const iSidebarItem *hoverItem = constHoverItem_ListWidget(d->list);
@@ -591,9 +624,11 @@ static void itemClicked_SidebarWidget_(iSidebarWidget *d, const iSidebarItem *it
 }
 
 static void checkModeButtonLayout_SidebarWidget_(iSidebarWidget *d) {
+    if (!d->modeButtons[0]) return;
     const iBool isTight =
         (width_Rect(bounds_Widget(as_Widget(d->modeButtons[0]))) < d->maxButtonLabelWidth);
     for (int i = 0; i < max_SidebarMode; i++) {
+        if (!d->modeButtons[i]) continue;
         if (isTight && ~flags_Widget(as_Widget(d->modeButtons[i])) & tight_WidgetFlag) {
             setFlags_Widget(as_Widget(d->modeButtons[i]), tight_WidgetFlag, iTrue);
             updateTextCStr_LabelWidget(d->modeButtons[i], tightModeLabels_[i]);
@@ -662,6 +697,9 @@ static iBool handleSidebarCommand_SidebarWidget_(iSidebarWidget *d, const char *
             postCommandf_App("%s.toggle", cstr_String(id_Widget(w)));
         }
         scrollOffset_ListWidget(d->list, 0);
+        if (wasChanged) {
+            postCommandf_App("%s.mode.changed arg:%d", cstr_String(id_Widget(w)), d->mode);
+        }
         return iTrue;
     }
     else if (equal_Command(cmd, "toggle")) {
diff --git a/src/ui/sidebarwidget.h b/src/ui/sidebarwidget.h
index fa74e049..d7029b0f 100644
--- a/src/ui/sidebarwidget.h
+++ b/src/ui/sidebarwidget.h
@@ -33,6 +33,8 @@ enum iSidebarMode {
     max_SidebarMode
 };
 
+const char *    icon_SidebarMode    (enum iSidebarMode mode);
+
 enum iSidebarSide {
     left_SideBarSide,
     right_SideBarSide,
@@ -41,8 +43,9 @@ enum iSidebarSide {
 iDeclareWidgetClass(SidebarWidget)
 iDeclareObjectConstructionArgs(SidebarWidget, enum iSidebarSide side)
 
-iBool               setMode_SidebarWidget   (iSidebarWidget *, enum iSidebarMode mode);
+iBool               setMode_SidebarWidget       (iSidebarWidget *, enum iSidebarMode mode);
+void                setButtonFont_SidebarWidget (iSidebarWidget *, int font);
 
-enum iSidebarMode   mode_SidebarWidget      (const iSidebarWidget *);
-int                 width_SidebarWidget     (const iSidebarWidget *);
-void                setWidth_SidebarWidget  (iSidebarWidget *, int width);
+enum iSidebarMode   mode_SidebarWidget          (const iSidebarWidget *);
+int                 width_SidebarWidget         (const iSidebarWidget *);
+void                setWidth_SidebarWidget      (iSidebarWidget *, int width);
diff --git a/src/ui/touch.c b/src/ui/touch.c
index 505b85f9..eb5f4f7f 100644
--- a/src/ui/touch.c
+++ b/src/ui/touch.c
@@ -94,7 +94,7 @@ static iTouch *find_TouchState_(iTouchState *d, SDL_FingerID id) {
     return NULL;
 }
 
-static const uint32_t longPressSpanMs_ = 500;
+static const uint32_t longPressSpanMs_ = 425;
 static const int      tapRadiusPt_     = 15;
 
 static iBool isStationary_Touch_(const iTouch *d) {
diff --git a/src/ui/util.c b/src/ui/util.c
index db9e4507..c55b2c36 100644
--- a/src/ui/util.c
+++ b/src/ui/util.c
@@ -198,14 +198,18 @@ static float valueAt_Anim_(const iAnim *d, const uint32_t now) {
         return d->from;
     }
     float t = pos_Anim_(d, now);
+    const iBool isSoft = (d->flags & softer_AnimFlag) != 0;
     if ((d->flags & easeBoth_AnimFlag) == easeBoth_AnimFlag) {
         t = easeBoth_(t);
+        if (isSoft) t = easeBoth_(t);
     }
     else if (d->flags & easeIn_AnimFlag) {
         t = easeIn_(t);
+        if (isSoft) t = easeIn_(t);
     }
     else if (d->flags & easeOut_AnimFlag) {
         t = easeOut_(t);
+        if (isSoft) t = easeOut_(t);
     }
     return d->from * (1.0f - t) + d->to * t;
 }
@@ -428,6 +432,9 @@ iWidget *makeMenu_Widget(iWidget *parent, const iMenuItem *items, size_t n) {
     iWidget *menu = new_Widget();
     setFrameColor_Widget(menu, uiSeparator_ColorId);
     setBackgroundColor_Widget(menu, uiBackground_ColorId);
+    if (deviceType_App() != desktop_AppDeviceType) {
+        setPadding1_Widget(menu, gap_UI);
+    }
     setFlags_Widget(menu,
                     keepOnTop_WidgetFlag | collapse_WidgetFlag | hidden_WidgetFlag |
                         arrangeVertical_WidgetFlag | arrangeSize_WidgetFlag |
@@ -439,6 +446,9 @@ iWidget *makeMenu_Widget(iWidget *parent, const iMenuItem *items, size_t n) {
             iWidget *sep = addChild_Widget(menu, iClob(new_Widget()));
             setBackgroundColor_Widget(sep, uiSeparator_ColorId);
             sep->rect.size.y = gap_UI / 3;
+            if (deviceType_App() != desktop_AppDeviceType) {
+                sep->rect.size.y = gap_UI / 2;
+            }
             setFlags_Widget(sep, hover_WidgetFlag | fixedHeight_WidgetFlag, iTrue);
         }
         else {
@@ -447,6 +457,9 @@ iWidget *makeMenu_Widget(iWidget *parent, const iMenuItem *items, size_t n) {
                 iClob(newKeyMods_LabelWidget(item->label, item->key, item->kmods, item->command)),
                 frameless_WidgetFlag | alignLeft_WidgetFlag | drawKey_WidgetFlag);
             updateSize_LabelWidget(label); /* drawKey was set */
+            if (deviceType_App() != desktop_AppDeviceType) {
+                setFont_LabelWidget(label, uiContent_FontId);
+            }
         }
     }
     addChild_Widget(parent, iClob(menu));
@@ -468,13 +481,6 @@ void openMenu_Widget(iWidget *d, iInt2 coord) {
     d->rect.pos = coord;
     /* Ensure the full menu is visible. */
     const iInt2 rootSize = rootSize_Window(get_Window());
-#if defined (iPlatformAppleMobile)
-    /* Move out from under the user's hand/finger. */
-    if (!parentMenuButton_(d)) {
-        const float normX = (float) left_Rect(bounds_Widget(d)) / rootSize.x;
-        subv_I2(&d->rect.pos, init_I2(normX * width_Rect(d->rect), height_Rect(d->rect)));
-    }
-#endif
     const iRect bounds       = bounds_Widget(d);
     int         leftExcess   = -left_Rect(bounds);
     int         rightExcess  = right_Rect(bounds) - rootSize.x;
diff --git a/src/ui/util.h b/src/ui/util.h
index a280fedb..829a9c74 100644
--- a/src/ui/util.h
+++ b/src/ui/util.h
@@ -75,7 +75,8 @@ enum iAnimFlag {
     indefinite_AnimFlag = iBit(1), /* does not end; must be linear */
     easeIn_AnimFlag     = iBit(2),
     easeOut_AnimFlag    = iBit(3),
-    easeBoth_AnimFlag = easeIn_AnimFlag | easeOut_AnimFlag,
+    easeBoth_AnimFlag   = easeIn_AnimFlag | easeOut_AnimFlag,
+    softer_AnimFlag     = iBit(4),
 };
 
 struct Impl_Anim {
diff --git a/src/ui/widget.c b/src/ui/widget.c
index 9320659c..31544cf8 100644
--- a/src/ui/widget.c
+++ b/src/ui/widget.c
@@ -77,6 +77,7 @@ void init_Widget(iWidget *d) {
     d->rect           = zero_Rect();
     d->bgColor        = none_ColorId;
     d->frameColor     = none_ColorId;
+    init_Anim(&d->visualOffset, 0.0f);
     d->children       = NULL;
     d->parent         = NULL;
     d->commandHandler = NULL;
@@ -86,6 +87,10 @@ void init_Widget(iWidget *d) {
 void deinit_Widget(iWidget *d) {
     releaseChildren_Widget(d);
     deinit_String(&d->id);
+//    printf("widget %p deleted (on top:%d)\n", d, d->flags & keepOnTop_WidgetFlag ? 1 : 0);
+    if (d->flags & keepOnTop_WidgetFlag) {
+        removeAll_PtrArray(onTop_RootData_(), d);
+    }
 }
 
 static void aboutToBeDestroyed_Widget_(iWidget *d) {
@@ -166,8 +171,33 @@ void setPadding_Widget(iWidget *d, int left, int top, int right, int bottom) {
     d->padding[3] = bottom;
 }
 
+static void visualOffsetAnimation_Widget_(void *ptr) {
+    iWidget *d = ptr;
+    postRefresh_App();
+    if (!isFinished_Anim(&d->visualOffset)) {
+        addTicker_App(visualOffsetAnimation_Widget_, ptr);
+    }
+    else {
+        setFlags_Widget(d, visualOffset_WidgetFlag, iFalse);
+    }
+}
+
+void setVisualOffset_Widget(iWidget *d, int value, uint32_t span, int animFlags) {
+    setFlags_Widget(d, visualOffset_WidgetFlag, iTrue);
+    if (span == 0) {
+        init_Anim(&d->visualOffset, value);
+    }
+    else {
+        setValue_Anim(&d->visualOffset, value, span);
+        d->visualOffset.flags = animFlags;
+        addTicker_App(visualOffsetAnimation_Widget_, d);
+    }
+}
+
 void setBackgroundColor_Widget(iWidget *d, int bgColor) {
-    d->bgColor = bgColor;
+    if (d) {
+        d->bgColor = bgColor;
+    }
 }
 
 void setFrameColor_Widget(iWidget *d, int frameColor) {
@@ -456,8 +486,15 @@ void arrange_Widget(iWidget *d) {
 
 iRect bounds_Widget(const iWidget *d) {
     iRect bounds = d->rect;
+    if (d->flags & visualOffset_WidgetFlag) {
+        bounds.pos.y += iRound(value_Anim(&d->visualOffset));
+    }
     for (const iWidget *w = d->parent; w; w = w->parent) {
-        addv_I2(&bounds.pos, w->rect.pos);
+        iInt2 pos = w->rect.pos;
+        if (w->flags & visualOffset_WidgetFlag) {
+            pos.y += iRound(value_Anim(&w->visualOffset));
+        }
+        addv_I2(&bounds.pos, pos);
     }
     return bounds;
 }
@@ -677,11 +714,17 @@ void drawBackground_Widget(const iWidget *d) {
     }
 }
 
+iLocalDef iBool isDrawn_Widget_(const iWidget *d) {
+    return ~d->flags & hidden_WidgetFlag || d->flags & visualOffset_WidgetFlag;
+}
+
 void drawChildren_Widget(const iWidget *d) {
-    if (d->flags & hidden_WidgetFlag) return;
+    if (!isDrawn_Widget_(d)) {
+        return;
+    }
     iConstForEach(ObjectList, i, d->children) {
         const iWidget *child = constAs_Widget(i.object);
-        if (~child->flags & keepOnTop_WidgetFlag && ~child->flags & hidden_WidgetFlag) {
+        if (~child->flags & keepOnTop_WidgetFlag && isDrawn_Widget_(child)) {
             class_Widget(child)->draw(child);
         }
     }
diff --git a/src/ui/widget.h b/src/ui/widget.h
index 66fe222b..02ee091f 100644
--- a/src/ui/widget.h
+++ b/src/ui/widget.h
@@ -25,6 +25,7 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */
 /* Base class for UI widgets. */
 
 #include "metrics.h"
+#include "util.h"
 
 #include <the_Foundation/object.h>
 #include <the_Foundation/objectlist.h>
@@ -96,6 +97,7 @@ enum iWidgetFlag {
 #define noBackground_WidgetFlag             iBit64(42)
 #define drawBackgroundToHorizontalSafeArea_WidgetFlag   iBit64(43)
 #define drawBackgroundToVerticalSafeArea_WidgetFlag     iBit64(44)
+#define visualOffset_WidgetFlag             iBit64(45)
 
 enum iWidgetAddPos {
     back_WidgetAddPos,
@@ -113,6 +115,7 @@ struct Impl_Widget {
     int64_t      flags;
     iRect        rect;
     int          padding[4]; /* left, top, right, bottom */
+    iAnim        visualOffset;
     int          bgColor;
     int          frameColor;
     iObjectList *children;
@@ -200,6 +203,7 @@ void    setPos_Widget       (iWidget *, iInt2 pos);
 void    setSize_Widget      (iWidget *, iInt2 size);
 void    setPadding_Widget   (iWidget *, int left, int top, int right, int bottom);
 iLocalDef void setPadding1_Widget   (iWidget *d, int padding) { setPadding_Widget(d, padding, padding, padding, padding); }
+void    setVisualOffset_Widget      (iWidget *d, int value, uint32_t span, int animFlags);
 void    setBackgroundColor_Widget   (iWidget *, int bgColor);
 void    setFrameColor_Widget        (iWidget *, int frameColor);
 void    setCommandHandler_Widget    (iWidget *, iBool (*handler)(iWidget *, const char *));
diff --git a/src/ui/window.c b/src/ui/window.c
index 4d6a197a..3c77b18b 100644
--- a/src/ui/window.c
+++ b/src/ui/window.c
@@ -129,9 +129,16 @@ static iBool handleRootCommands_(iWidget *root, const char *cmd) {
         /* Place the sidebar next to or under doctabs depending on orientation. */
         iSidebarWidget *sidebar = findChild_Widget(root, "sidebar");
         removeChild_Widget(parent_Widget(sidebar), sidebar);
+        setButtonFont_SidebarWidget(sidebar, isLandscape_App() ? uiLabel_FontId : uiLabelLarge_FontId);
+        setBackgroundColor_Widget(findChild_Widget(as_Widget(sidebar), "buttons"),
+                                  isPortrait_App() ? uiBackgroundUnfocusedSelection_ColorId
+                                                   : uiBackground_ColorId);
         if (isLandscape_App()) {
             addChildPos_Widget(findChild_Widget(root, "tabs.content"), iClob(sidebar), front_WidgetAddPos);
             setWidth_SidebarWidget(sidebar, 73 * gap_UI);
+            if (isVisible_Widget(findWidget_App("sidebar2"))) {
+                postCommand_App("sidebar2.toggle");
+            }
         }
         else {
             addChildPos_Widget(findChild_Widget(root, "stack"), iClob(sidebar), back_WidgetAddPos);
@@ -184,9 +191,7 @@ static const iMenuItem navMenuItems_[] = {
     { "Close Tab", 'w', KMOD_PRIMARY, "tabs.close" },
     { "---", 0, 0, NULL },
     { "Save to Downloads", SDLK_s, KMOD_PRIMARY, "document.save" },
-    { "Copy Source Text", SDLK_c, KMOD_PRIMARY, "copy" },
     { "---", 0, 0, NULL },
-    { "Toggle Sidebar", SDLK_l, KMOD_PRIMARY | KMOD_SHIFT, "sidebar.toggle" },
     { "Zoom In", SDLK_EQUALS, KMOD_PRIMARY, "zoom.delta arg:10" },
     { "Zoom Out", SDLK_MINUS, KMOD_PRIMARY, "zoom.delta arg:-10" },
     { "Reset Zoom", SDLK_0, KMOD_PRIMARY, "zoom.set arg:100" },
@@ -266,20 +271,31 @@ static const iMenuItem helpMenuItems_[] = {
 };
 #endif
 
+#if defined (iPlatformAppleMobile)
 static const iMenuItem identityButtonMenuItems_[] = {
     { "No Active Identity", 0, 0, "ident.showactive" },
     { "---", 0, 0, NULL },
-#if !defined (iHaveNativeMenus)
+    { "New Identity...", SDLK_n, KMOD_PRIMARY | KMOD_SHIFT, "ident.new" },
+    { "Import...", SDLK_i, KMOD_PRIMARY | KMOD_SHIFT, "ident.import" },
+    { "---", 0, 0, NULL },
+    { "Show Identities", 0, 0, "toolbar.showident" },
+};
+#else /* desktop */
+static const iMenuItem identityButtonMenuItems_[] = {
+    { "No Active Identity", 0, 0, "ident.showactive" },
+    { "---", 0, 0, NULL },
+#   if !defined (iHaveNativeMenus)
     { "New Identity...", SDLK_n, KMOD_PRIMARY | KMOD_SHIFT, "ident.new" },
     { "Import...", SDLK_i, KMOD_PRIMARY | KMOD_SHIFT, "ident.import" },
     { "---", 0, 0, NULL },
     { "Show Identities", '4', KMOD_PRIMARY, "sidebar.mode arg:3 show:1" },
-#else
+#   else
     { "New Identity...", 0, 0, "ident.new" },
     { "---", 0, 0, NULL },
     { "Show Identities", 0, 0, "sidebar.mode arg:3 show:1" },
 #endif
 };
+#endif
 
 static const char *reloadCStr_ = "\U0001f503";
 
@@ -418,14 +434,26 @@ static void updatePadding_Window_(iWindow *d) {
         safeAreaInsets_iOS(&left, &top, &right, &bottom);
         setPadding_Widget(findChild_Widget(d->root, "navdiv"), left, top, right, 0);
         iWidget *toolBar = findChild_Widget(d->root, "toolbar");
-        if (isPortrait_App()) {
-            setPadding_Widget(toolBar, left, 0, right, bottom);
+        setPadding_Widget(toolBar, left, 0, right, bottom);
+    }
+#endif
+}
+
+static void dismissPortraitPhoneSidebars_(void) {
+    if (deviceType_App() == phone_AppDeviceType && isPortrait_App()) {
+        iWidget *sidebar = findWidget_App("sidebar");
+        iWidget *sidebar2 = findWidget_App("sidebar2");
+        if (isVisible_Widget(sidebar)) {
+            postCommand_App("sidebar.toggle");
+            setVisualOffset_Widget(sidebar, height_Widget(sidebar), 250, easeIn_AnimFlag);
         }
-        else {
-            setPadding1_Widget(toolBar, 0);
+        if (isVisible_Widget(sidebar2)) {
+            postCommand_App("sidebar2.toggle");
+            setVisualOffset_Widget(sidebar2, height_Widget(sidebar2), 250, easeIn_AnimFlag);
         }
+        setFlags_Widget(findWidget_App("toolbar.ident"), noBackground_WidgetFlag, iTrue);
+        setFlags_Widget(findWidget_App("toolbar.view"), noBackground_WidgetFlag, iTrue);
     }
-#endif
 }
 
 static iBool handleNavBarCommands_(iWidget *navBar, const char *cmd) {
@@ -521,12 +549,11 @@ static iBool handleNavBarCommands_(iWidget *navBar, const char *cmd) {
                 postCommand_App("visited.changed"); /* sidebar will update */
                 setText_InputWidget(url, urlStr);
                 checkLoadAnimation_Window_(get_Window());
+                dismissPortraitPhoneSidebars_();
                 updateNavBarIdentity_(navBar);
                 /* Icon updates should be limited to automatically chosen icons if the user
                    is allowed to pick their own in the future. */
-                if (updateBookmarkIcon_Bookmarks(
-                    bookmarks_App(),
-                    urlStr,
+                if (updateBookmarkIcon_Bookmarks(bookmarks_App(), urlStr,
                         siteIcon_GmDocument(document_DocumentWidget(document_App())))) {
                     postCommand_App("bookmarks.changed");
                 }
@@ -540,11 +567,7 @@ static iBool handleNavBarCommands_(iWidget *navBar, const char *cmd) {
                 iInputWidget *url = findChild_Widget(navBar, "url");
                 setTextCStr_InputWidget(url, suffixPtr_Command(cmd, "url"));
                 checkLoadAnimation_Window_(get_Window());
-                if (deviceType_App() == phone_AppDeviceType && isPortrait_App()) {
-                    if (isVisible_Widget(findWidget_App("sidebar"))) {
-                        postCommand_App("sidebar.toggle");
-                    }
-                }
+                dismissPortraitPhoneSidebars_();
                 return iFalse;
             }
         }
@@ -627,6 +650,77 @@ static iBool handleSearchBarCommands_(iWidget *searchBar, const char *cmd) {
     return iFalse;
 }
 
+#if defined (iPlatformAppleMobile)
+static void dismissSidebar_(iWidget *sidebar, const char *toolButtonId) {
+    if (isVisible_Widget(sidebar)) {
+        postCommandf_App("%s.toggle", cstr_String(id_Widget(sidebar)));
+        if (toolButtonId) {
+            setFlags_Widget(findWidget_App(toolButtonId), noBackground_WidgetFlag, iTrue);
+        }
+        setVisualOffset_Widget(sidebar, height_Widget(sidebar), 250, easeIn_AnimFlag);
+    }
+}
+
+static iBool handleToolBarCommands_(iWidget *toolBar, const char *cmd) {
+    if (equalWidget_Command(cmd, toolBar, "mouse.clicked") && arg_Command(cmd) &&
+        argLabel_Command(cmd, "button") == SDL_BUTTON_RIGHT) {
+        iWidget *menu = findChild_Widget(toolBar, "toolbar.menu");
+        arrange_Widget(menu);
+        openMenu_Widget(menu, init_I2(0, -height_Widget(menu)));
+        return iTrue;
+    }
+    else if (equal_Command(cmd, "toolbar.showview")) {
+        iWidget *sidebar  = findWidget_App("sidebar");
+        iWidget *sidebar2 = findWidget_App("sidebar2");
+        dismissSidebar_(sidebar2, "toolbar.ident");
+        const iBool isVisible = isVisible_Widget(sidebar);
+        setFlags_Widget(findChild_Widget(toolBar, "toolbar.view"), noBackground_WidgetFlag,
+                        isVisible);
+        if (arg_Command(cmd) >= 0) {
+            postCommandf_App("sidebar.mode arg:%d show:1", arg_Command(cmd));
+            if (!isVisible) {
+                setVisualOffset_Widget(sidebar, height_Widget(sidebar), 0, 0);
+                setVisualOffset_Widget(sidebar, 0, 400, easeOut_AnimFlag | softer_AnimFlag);
+            }
+        }
+        else {
+            postCommandf_App("sidebar.toggle");
+            if (isVisible) {
+                setVisualOffset_Widget(sidebar, height_Widget(sidebar), 250, easeIn_AnimFlag);
+            }
+            else {
+                setVisualOffset_Widget(sidebar, height_Widget(sidebar), 0, 0);
+                setVisualOffset_Widget(sidebar, 0, 400, easeOut_AnimFlag | softer_AnimFlag);
+            }
+        }
+        return iTrue;
+    }
+    else if (equal_Command(cmd, "toolbar.showident")) {
+        iWidget *sidebar  = findWidget_App("sidebar");
+        iWidget *sidebar2 = findWidget_App("sidebar2");
+        dismissSidebar_(sidebar, "toolbar.view");
+        const iBool isVisible = isVisible_Widget(sidebar2);
+        setFlags_Widget(findChild_Widget(toolBar, "toolbar.ident"), noBackground_WidgetFlag,
+                        isVisible);
+        if (isVisible) {            
+            dismissSidebar_(sidebar2, NULL);
+        }
+        else {
+            postCommand_App("sidebar2.mode arg:3 show:1");
+            setVisualOffset_Widget(sidebar2, height_Widget(sidebar2), 0, 0);
+            setVisualOffset_Widget(sidebar2, 0, 400, easeOut_AnimFlag | softer_AnimFlag);
+        }
+        return iTrue;
+    }
+    else if (equal_Command(cmd, "sidebar.mode.changed")) {
+        iLabelWidget *viewTool = findChild_Widget(toolBar, "toolbar.view");
+        updateTextCStr_LabelWidget(viewTool, icon_SidebarMode(arg_Command(cmd)));
+        return iFalse;
+    }
+    return iFalse;
+}
+#endif /* defined (iPlatformAppleMobile) */
+
 static iLabelWidget *newLargeIcon_LabelWidget(const char *text, const char *cmd) {
     iLabelWidget *lab = newIcon_LabelWidget(text, 0, 0, cmd);
     setFont_LabelWidget(lab, uiLabelLarge_FontId);
@@ -804,10 +898,15 @@ static void setupUserInterface_Window(iWindow *d) {
         iWidget *content = findChild_Widget(d->root, "tabs.content");
         iSidebarWidget *sidebar1 = new_SidebarWidget(left_SideBarSide);
         addChildPos_Widget(content, iClob(sidebar1), front_WidgetAddPos);
+        iSidebarWidget *sidebar2 = new_SidebarWidget(right_SideBarSide);
         if (deviceType_App() != phone_AppDeviceType) {
-            iSidebarWidget *sidebar2 = new_SidebarWidget(right_SideBarSide);
             addChildPos_Widget(content, iClob(sidebar2), back_WidgetAddPos);
         }
+        else {
+            /* The identities sidebar is always in the main area. */
+            addChild_Widget(findChild_Widget(d->root, "stack"), iClob(sidebar2));
+            setFlags_Widget(as_Widget(sidebar2), hidden_WidgetFlag, iTrue);
+        }
     }
     /* Lookup results. */ {
         iLookupWidget *lookup = new_LookupWidget();
@@ -841,21 +940,33 @@ static void setupUserInterface_Window(iWindow *d) {
         iWidget *toolBar = new_Widget();
         addChild_Widget(div, iClob(toolBar));
         setId_Widget(toolBar, "toolbar");
+        setCommandHandler_Widget(toolBar, handleToolBarCommands_);
         setFlags_Widget(toolBar, collapse_WidgetFlag | resizeWidthOfChildren_WidgetFlag |
                         arrangeHeight_WidgetFlag | arrangeHorizontal_WidgetFlag, iTrue);
         setBackgroundColor_Widget(toolBar, tmBannerBackground_ColorId);
         addChildFlags_Widget(toolBar, iClob(newLargeIcon_LabelWidget("\U0001f870", "navigate.back")), frameless_WidgetFlag);
         addChildFlags_Widget(toolBar, iClob(newLargeIcon_LabelWidget("\U0001f872", "navigate.forward")), frameless_WidgetFlag);
-        setId_Widget(addChildFlags_Widget(toolBar, iClob(newLargeIcon_LabelWidget("\U0001f464", "sidebar.mode arg:3 toggle:1")), frameless_WidgetFlag), "toolbar.ident");
-        addChildFlags_Widget(toolBar, iClob(newLargeIcon_LabelWidget("\U0001f588", "sidebar.mode arg:0 toggle:1")), frameless_WidgetFlag);
+        setId_Widget(addChildFlags_Widget(toolBar, iClob(newLargeIcon_LabelWidget("\U0001f464", "toolbar.showident")), frameless_WidgetFlag), "toolbar.ident");
+        setId_Widget(addChildFlags_Widget(toolBar, iClob(newLargeIcon_LabelWidget("\U0001f588", "toolbar.showview arg:-1")),
+                             frameless_WidgetFlag | commandOnClick_WidgetFlag), "toolbar.view");
         iLabelWidget *menuButton = makeMenuButton_LabelWidget("\U0001d362", navMenuItems_, iElemCount(navMenuItems_));
         setFont_LabelWidget(menuButton, uiLabelLarge_FontId);
         addChildFlags_Widget(toolBar, iClob(menuButton), frameless_WidgetFlag);
         iForEach(ObjectList, i, children_Widget(toolBar)) {
             iLabelWidget *btn = i.object;
             setFlags_Widget(i.object, noBackground_WidgetFlag, iTrue);
-            setTextColor_LabelWidget(i.object, tmBannerIcon_ColorId);            
+            setTextColor_LabelWidget(i.object, tmBannerIcon_ColorId);
+            setBackgroundColor_Widget(i.object, tmBannerSideTitle_ColorId);
         }
+        const iMenuItem items[] = {
+            { "Bookmarks", 0, 0, "toolbar.showview arg:0" },
+            { "Feeds", 0, 0, "toolbar.showview arg:1" },
+            { "History", 0, 0, "toolbar.showview arg:2" },
+            { "Page Outline", 0, 0, "toolbar.showview arg:4" },
+        };
+        iWidget *menu = makeMenu_Widget(findChild_Widget(toolBar, "toolbar.view"),
+                                        items, iElemCount(items));
+        setId_Widget(menu, "toolbar.menu");
     }
 #endif
     updatePadding_Window_(d);