Mobile: Sidebar is now a vertically sliding panel

Switched the phone sidebar to use the iOS half/full-height sliding sheet design. This is better for finger reachability and for retaining access to the current page.

10 files changed, 340 insertions, 131 deletions

diff --git a/src/ui/documentwidget.c b/src/ui/documentwidget.c
index 95286566..0ef80690 100644
--- a/src/ui/documentwidget.c
+++ b/src/ui/documentwidget.c
@@ -2620,9 +2620,9 @@ static iBool handleSwipe_DocumentWidget_(iDocumentWidget *d, const char *cmd) {
             /* The temporary "swipeIn" will display the previous page until the finger is lifted. */
             iDocumentWidget *swipeIn = findChild_Widget(swipeParent, "swipein");
             if (!swipeIn) {
-                const iBool sidebarSwipe = (isPortraitPhone_App() &&
+                const iBool sidebarSwipe = iFalse; /* && (isPortraitPhone_App() &&
                                             d->flags & openedFromSidebar_DocumentWidgetFlag &&
-                                            !isVisible_Widget(findWidget_App("sidebar")));
+                                            !isVisible_Widget(findWidget_App("sidebar"))); */
                 swipeIn = new_DocumentWidget();
                 setId_Widget(as_Widget(swipeIn), "swipein");
                 setFlags_Widget(as_Widget(swipeIn),
@@ -3235,6 +3235,7 @@ static iBool handleCommand_DocumentWidget_(iDocumentWidget *d, const char *cmd)
         return iTrue;
     }
     else if (equal_Command(cmd, "navigate.back") && document_App() == d) {
+#if 0
         if (isPortraitPhone_App()) {
             if (d->flags & openedFromSidebar_DocumentWidgetFlag &&
                 !isVisible_Widget(findWidget_App("sidebar"))) {
@@ -3247,6 +3248,7 @@ static iBool handleCommand_DocumentWidget_(iDocumentWidget *d, const char *cmd)
             }
             d->flags &= ~openedFromSidebar_DocumentWidgetFlag;
         }
+#endif
         if (d->request) {
             postCommandf_Root(w->root,
                 "document.request.cancelled doc:%p url:%s", d, cstr_String(d->mod.url));
diff --git a/src/ui/listwidget.c b/src/ui/listwidget.c
index 82e4e451..d12afc4c 100644
--- a/src/ui/listwidget.c
+++ b/src/ui/listwidget.c
@@ -81,6 +81,7 @@ void init_ListWidget(iListWidget *d) {
     setThumb_ScrollWidget(d->scroll, 0, 0);
     init_SmoothScroll(&d->scrollY, w, scrollBegan_ListWidget_);
     d->itemHeight = 0;
+    d->scrollMode = normal_ScrollMode;
     d->noHoverWhileScrolling = iFalse;
     init_PtrArray(&d->items);
     d->hoverItem = iInvalidPos;
@@ -187,6 +188,10 @@ void setScrollPos_ListWidget(iListWidget *d, int pos) {
     refresh_Widget(as_Widget(d));
 }
 
+void setScrollMode_ListWidget(iListWidget *d, enum iScrollMode mode) {
+    d->scrollMode = mode;
+}
+
 void scrollOffset_ListWidget(iListWidget *d, int offset) {
     moveSpan_SmoothScroll(&d->scrollY, offset, 0);
 }
@@ -366,12 +371,28 @@ static iBool endDrag_ListWidget_(iListWidget *d, iInt2 endPos) {
     return iTrue;
 }
 
+static iBool isScrollDisabled_ListWidget_(const iListWidget *d, const SDL_Event *ev) {
+    int dir = 0;
+    if (ev->type == SDL_MOUSEWHEEL) {
+        dir = iSign(ev->wheel.y);
+    }
+    switch (d->scrollMode) {
+        case disabledAtTopBothDirections_ScrollMode:
+            return scrollPos_ListWidget(d) <= 0;
+        case disabledAtTopUpwards_ScrollMode:
+            return scrollPos_ListWidget(d) <= 0 && dir > 0;
+        default:
+            break;
+    }
+    return iFalse;
+}
+
 static iBool processEvent_ListWidget_(iListWidget *d, const SDL_Event *ev) {
     iWidget *w = as_Widget(d);
     if (isMetricsChange_UserEvent(ev)) {
         invalidate_ListWidget(d);
     }
-    else if (processEvent_SmoothScroll(&d->scrollY, ev)) {
+    else if (!isScrollDisabled_ListWidget_(d, ev) && processEvent_SmoothScroll(&d->scrollY, ev)) {
         return iTrue;
     }
     else if (isCommand_SDLEvent(ev)) {
@@ -420,6 +441,18 @@ static iBool processEvent_ListWidget_(iListWidget *d, const SDL_Event *ev) {
         }
     }
     if (ev->type == SDL_MOUSEWHEEL && isHover_Widget(w)) {
+        if (isScrollDisabled_ListWidget_(d, ev)) {
+            if (ev->wheel.which == SDL_TOUCH_MOUSEID) {
+                /* TODO: Could generalize this selection of the scrollable parent. */
+                extern iWidgetClass Class_SidebarWidget;
+                iWidget *sidebar = findParentClass_Widget(w, &Class_SidebarWidget);
+                if (sidebar) {
+                    transferAffinity_Touch(w, sidebar);
+                    d->noHoverWhileScrolling = iTrue;
+                }
+            }
+            return iFalse;
+        }
         int amount = -ev->wheel.y;
         if (isPerPixel_MouseWheelEvent(&ev->wheel)) {
             stop_Anim(&d->scrollY.pos);
diff --git a/src/ui/listwidget.h b/src/ui/listwidget.h
index 7e6624a0..081109e8 100644
--- a/src/ui/listwidget.h
+++ b/src/ui/listwidget.h
@@ -51,6 +51,12 @@ iDeclareObjectConstruction(ListWidget)
 
 iDeclareType(VisBuf)
 
+enum iScrollMode {
+    normal_ScrollMode,
+    disabledAtTopBothDirections_ScrollMode,
+    disabledAtTopUpwards_ScrollMode,
+};
+
 struct Impl_ListWidget {
     iWidget        widget;
     iScrollWidget *scroll;
@@ -63,6 +69,7 @@ struct Impl_ListWidget {
     iClick         click;
     iIntSet        invalidItems;
     iVisBuf       *visBuf;
+    enum iScrollMode scrollMode;
     iBool          noHoverWhileScrolling;
 };
 
@@ -82,6 +89,7 @@ int     itemHeight_ListWidget       (const iListWidget *);
 int     scrollPos_ListWidget        (const iListWidget *);
 
 void    setScrollPos_ListWidget     (iListWidget *, int pos);
+void    setScrollMode_ListWidget    (iListWidget *, enum iScrollMode mode);
 void    scrollToItem_ListWidget     (iListWidget *, size_t index, uint32_t span);
 void    scrollOffset_ListWidget     (iListWidget *, int offset);
 void    scrollOffsetSpan_ListWidget (iListWidget *, int offset, uint32_t span);
diff --git a/src/ui/root.c b/src/ui/root.c
index f722df94..65fc11d1 100644
--- a/src/ui/root.c
+++ b/src/ui/root.c
@@ -487,11 +487,23 @@ static iBool handleRootCommands_(iWidget *root, const char *cmd) {
     else if (deviceType_App() == phone_AppDeviceType && equal_Command(cmd, "window.resized")) {
         /* Place the sidebar next to or under doctabs depending on orientation. */
         iSidebarWidget *sidebar = findChild_Widget(root, "sidebar");
-        iSidebarWidget *sidebar2 = findChild_Widget(root, "sidebar2");
         removeChild_Widget(parent_Widget(sidebar), sidebar);
-        //        setBackgroundColor_Widget(findChild_Widget(as_Widget(sidebar), "buttons"),
-        //                                  isPortrait_App() ? uiBackgroundUnfocusedSelection_ColorId
-        //                                                   : uiBackgroundSidebar_ColorId);
+        if (isLandscape_App()) {
+            addChildPos_Widget(findChild_Widget(root, "tabs.content"), iClob(sidebar), front_WidgetAddPos);
+            setWidth_SidebarWidget(sidebar, 73.0f);
+            setFlags_Widget(as_Widget(sidebar), fixedHeight_WidgetFlag, iFalse);
+        }
+        else {
+            addChild_Widget(root, iClob(sidebar));
+            setWidth_SidebarWidget(sidebar, (float) width_Widget(root) / (float) gap_UI);
+            const int midHeight = height_Widget(root) / 2;// + lineHeight_Text(uiLabelLarge_FontId);
+            setMidHeight_SidebarWidget(sidebar, midHeight);
+            setFixedSize_Widget(as_Widget(sidebar), init_I2(-1, midHeight));
+            setPos_Widget(as_Widget(sidebar), init_I2(0, height_Widget(root) - midHeight));
+        }
+#if 0
+        iSidebarWidget *sidebar = findChild_Widget(root, "sidebar");
+        iSidebarWidget *sidebar2 = findChild_Widget(root, "sidebar2");
         setFlags_Widget(findChild_Widget(as_Widget(sidebar), "buttons"),
                         borderTop_WidgetFlag,
                         isPortrait_App());
@@ -507,6 +519,7 @@ static iBool handleRootCommands_(iWidget *root, const char *cmd) {
             setWidth_SidebarWidget(sidebar, (float) width_Widget(root) / (float) gap_UI);
             setWidth_SidebarWidget(sidebar2, (float) width_Widget(root) / (float) gap_UI);
         }
+#endif
         return iFalse;
     }
     else if (handleCommand_App(cmd)) {
@@ -609,14 +622,14 @@ void updatePadding_Root(iRoot *d) {
         }
     }
 #endif
-    if (toolBar) {
+//    if (toolBar) {
         /* TODO: get this from toolBar height, but it's buggy for some reason */
-        const int sidebarBottomPad = isPortrait_App() ? 11 * gap_UI + bottom : 0;
-        setPadding_Widget(findChild_Widget(d->widget, "sidebar"), 0, 0, 0, sidebarBottomPad);
-        setPadding_Widget(findChild_Widget(d->widget, "sidebar2"), 0, 0, 0, sidebarBottomPad);
+//        const int sidebarBottomPad = isPortrait_App() ? 11 * gap_UI + bottom : 0;
+//        setPadding_Widget(findChild_Widget(d->widget, "sidebar"), 0, 0, 0, sidebarBottomPad);
+        //setPadding_Widget(findChild_Widget(d->widget, "sidebar2"), 0, 0, 0, sidebarBottomPad);
         /* TODO: There seems to be unrelated layout glitch in the sidebar where its children
            are not arranged correctly until it's hidden and reshown. */
-    }
+//    }
     /* Note that `handleNavBarCommands_` also adjusts padding and spacing. */
 }
 
@@ -1015,30 +1028,17 @@ static iBool handleToolBarCommands_(iWidget *toolBar, const char *cmd) {
     }
     else if (equal_Command(cmd, "toolbar.showview")) {
         /* TODO: Clean this up. */
-        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);
+//        iWidget *sidebar  = findWidget_App("sidebar");
+//        iWidget *sidebar2 = findWidget_App("sidebar2");
+//        dismissSidebar_(sidebar2, "toolbar.ident");
+//        const iBool isVisible = isVisible_Widget(sidebar);
         /* If a sidebar hasn't been shown yet, it's height is zero. */
-        const int viewHeight = size_Root(get_Root()).y;
+//        const int viewHeight = size_Root(get_Root()).y;
         if (arg_Command(cmd) >= 0) {
             postCommandf_App("sidebar.mode arg:%d show:1", arg_Command(cmd));
-//            if (!isVisible) {
-//                setVisualOffset_Widget(sidebar, viewHeight, 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, viewHeight, 0, 0);
-//                setVisualOffset_Widget(sidebar, 0, 400, easeOut_AnimFlag | softer_AnimFlag);
-//            }
         }
         return iTrue;
     }
@@ -1110,41 +1110,22 @@ void updateMetrics_Root(iRoot *d) {
         setFixedSize_Widget(appClose, appMin->rect.size);
         setFixedSize_Widget(appIcon, init_I2(appIconSize_Root(), appMin->rect.size.y));
     }
-    iWidget *navBar     = findChild_Widget(d->widget, "navbar");
-//    iWidget *lock       = findChild_Widget(navBar, "navbar.lock");
-    iWidget *url        = findChild_Widget(d->widget, "url");
-    iWidget *rightEmbed = findChild_Widget(navBar, "url.rightembed");
-    iWidget *embedPad   = findChild_Widget(navBar, "url.embedpad");
-    iWidget *urlButtons = findChild_Widget(navBar, "url.buttons");
+    iWidget      *navBar     = findChild_Widget(d->widget, "navbar");
+    iWidget      *url        = findChild_Widget(d->widget, "url");
+    iWidget      *rightEmbed = findChild_Widget(navBar, "url.rightembed");
+    iWidget      *embedPad   = findChild_Widget(navBar, "url.embedpad");
+    iWidget      *urlButtons = findChild_Widget(navBar, "url.buttons");
+    iLabelWidget *idName     = findChild_Widget(d->widget, "toolbar.name");
     setPadding_Widget(as_Widget(url), 0, gap_UI, 0, gap_UI);
     navBar->rect.size.y = 0; /* recalculate height based on children (FIXME: shouldn't be needed) */
-//    updateSize_LabelWidget((iLabelWidget *) lock);
-//    updateSize_LabelWidget((iLabelWidget *) findChild_Widget(navBar, "reload"));
-//    arrange_Widget(urlButtons);
     setFixedSize_Widget(embedPad, init_I2(width_Widget(urlButtons) + gap_UI / 2, 1));
-//    setContentPadding_InputWidget((iInputWidget *) url, width_Widget(lock) * 0.75,
-//                                  width_Widget(lock) * 0.75);
     rightEmbed->rect.pos.y = gap_UI;
     updatePadding_Root(d);
     arrange_Widget(d->widget);
     updateUrlInputContentPadding_(navBar);
-    /* Position the toolbar identity name label manually. */ {
-        iLabelWidget *idName = findChild_Widget(d->widget, "toolbar.name");
-        if (idName) {
-            const iWidget *toolBar = findChild_Widget(d->widget, "toolbar");
-            const iWidget *viewButton = findChild_Widget(d->widget, "toolbar.view");
-            const iWidget *idButton = findChild_Widget(toolBar, "toolbar.ident");
-//            const int font = uiLabelTiny_FontId;
-            setFixedSize_Widget(as_Widget(idName), init_I2(-1, 2 * gap_UI + lineHeight_Text(uiLabelTiny_FontId)));
-//            setFont_LabelWidget(idName, font);
-            /*setPos_Widget(as_Widget(idName),
-                          windowToLocal_Widget(as_Widget(idName),
-                                               init_I2(left_Rect(bounds_Widget(idButton)),
-                                                       bottom_Rect(bounds_Widget(viewButton)) -
-                                                           lineHeight_Text(font) - gap_UI / 2)));
-            setFixedSize_Widget(as_Widget(idName), init_I2(width_Widget(idButton),
-                                                           lineHeight_Text(font)));*/
-        }
+    if (idName) {
+        setFixedSize_Widget(as_Widget(idName),
+                            init_I2(-1, 2 * gap_UI + lineHeight_Text(uiLabelTiny_FontId)));
     }
     postRefresh_App();
 }
@@ -1168,11 +1149,9 @@ void createUserInterface_Root(iRoot *d) {
     setFlags_Widget(
         root, resizeChildren_WidgetFlag | fixedSize_WidgetFlag | focusRoot_WidgetFlag, iTrue);
     setCommandHandler_Widget(root, handleRootCommands_);
-
     iWidget *div = makeVDiv_Widget();
     setId_Widget(div, "navdiv");
     addChild_Widget(root, iClob(div));
-
 #if defined (LAGRANGE_ENABLE_CUSTOM_FRAME)
     /* Window title bar. */
     if (prefs_App()->customFrame) {
@@ -1446,20 +1425,19 @@ void createUserInterface_Root(iRoot *d) {
             "newtab");
     }
     /* Sidebars. */ {
-        iWidget *content = findChild_Widget(root, "tabs.content");
         iSidebarWidget *sidebar1 = new_SidebarWidget(left_SidebarSide);
-        addChildPos_Widget(content, iClob(sidebar1), front_WidgetAddPos);
         if (deviceType_App() != phone_AppDeviceType) {
+            /* Sidebars are next to the tab content. */
+            iWidget *content = findChild_Widget(root, "tabs.content");
+            addChildPos_Widget(content, iClob(sidebar1), front_WidgetAddPos);
             iSidebarWidget *sidebar2 = new_SidebarWidget(right_SidebarSide);
             addChildPos_Widget(content, iClob(sidebar2), back_WidgetAddPos);
         }
-#if 0
         else {
-            /* The identities sidebar is always in the main area. */
-            addChild_Widget(findChild_Widget(root, "stack"), iClob(sidebar2));
-            setFlags_Widget(as_Widget(sidebar2), hidden_WidgetFlag, iTrue);
+            /* Sidebar is a slide-over. */
+            addChild_Widget(/*findChild_Widget(root, "stack")*/ root, iClob(sidebar1));
+            setFlags_Widget(as_Widget(sidebar1), hidden_WidgetFlag, iTrue);            
         }
-#endif
     }
     /* Lookup results. */ {
         iLookupWidget *lookup = new_LookupWidget();
diff --git a/src/ui/sidebarwidget.c b/src/ui/sidebarwidget.c
index 13fc33b1..401c5d25 100644
--- a/src/ui/sidebarwidget.c
+++ b/src/ui/sidebarwidget.c
@@ -39,6 +39,7 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */
 #include "paint.h"
 #include "root.h"
 #include "scrollwidget.h"
+#include "touch.h"
 #include "util.h"
 #include "visited.h"
 
@@ -99,13 +100,15 @@ struct Impl_SidebarWidget {
     iListWidget *     list;
     iCertListWidget * certList;
     iWidget *         actions; /* below the list, area for buttons */
+    int               midHeight; /* on portrait phone, the height for the middle state */
+    iBool             isBeingDraggedVertically; /* on portrait phone, sidebar can be dragged up/down */
     int               modeScroll[max_SidebarMode];
     iLabelWidget *    modeButtons[max_SidebarMode];
     int               maxButtonLabelWidth;
     float             widthAsGaps;
     int               buttonFont;
     int               itemFonts[2];
-    size_t            numUnreadEntries;
+    size_t            numUnreadEntries;    
     iWidget *         resizer;
     iWidget *         menu; /* context menu for an item */
     iWidget *         modeMenu; /* context menu for the sidebar mode (no item) */
@@ -194,9 +197,9 @@ static iLabelWidget *addActionButton_SidebarWidget_(iSidebarWidget *d, const cha
                                              //(deviceType_App() != desktop_AppDeviceType ?
                                              // extraPadding_WidgetFlag : 0) |
                                              flags);
-    setFont_LabelWidget(btn, deviceType_App() == phone_AppDeviceType && d->side == right_SidebarSide
-                                 ? uiLabelBig_FontId
-                                 : d->buttonFont);
+    setFont_LabelWidget(btn, /*deviceType_App() == phone_AppDeviceType && d->side == right_SidebarSide
+                                 ? uiLabelBig_FontId : */
+                                 d->buttonFont);
     checkIcon_LabelWidget(btn);
     return btn;
 }
@@ -211,7 +214,12 @@ static iBool isBookmarkFolded_SidebarWidget_(const iSidebarWidget *d, const iBoo
     return iFalse;
 }
 
+static iBool isSlidingSheet_SidebarWidget_(const iSidebarWidget *d) {
+    return isPortraitPhone_App();// && scrollPos_ListWidget(d->list) <= 0;
+}
+
 static void updateItemsWithFlags_SidebarWidget_(iSidebarWidget *d, iBool keepActions) {
+    const iBool isMobile = (deviceType_App() != desktop_AppDeviceType);
     clear_ListWidget(d->list);
     releaseChildren_Widget(d->blank);
     if (!keepActions) {
@@ -299,9 +307,10 @@ static void updateItemsWithFlags_SidebarWidget_(iSidebarWidget *d, iBool keepAct
             }
             /* Actions. */
             if (!keepActions) {
-                addActionButton_SidebarWidget_(
-                    d, check_Icon " ${sidebar.action.feeds.markallread}", "feeds.markallread", expand_WidgetFlag |
-                    tight_WidgetFlag);
+                addActionButton_SidebarWidget_(d,
+                                               check_Icon " ${sidebar.action.feeds.markallread}",
+                                               "feeds.markallread",
+                                               expand_WidgetFlag | tight_WidgetFlag);
                 updateSize_LabelWidget(addChildFlags_Widget(d->actions,
                                      iClob(new_LabelWidget("${sidebar.action.show}", NULL)),
                                                             frameless_WidgetFlag | tight_WidgetFlag));
@@ -617,6 +626,10 @@ void setClosedFolders_SidebarWidget(iSidebarWidget *d, const iIntSet *closedFold
     }
 }
 
+void setMidHeight_SidebarWidget(iSidebarWidget *d, int midHeight) {
+    d->midHeight = midHeight;
+}
+
 enum iSidebarMode mode_SidebarWidget(const iSidebarWidget *d) {
     return d ? d->mode : 0;
 }
@@ -686,6 +699,8 @@ void init_SidebarWidget(iSidebarWidget *d, enum iSidebarSide side) {
     d->side = side;
     d->mode = -1;
     d->feedsMode = all_FeedsMode;
+    d->midHeight = 0;
+    d->isBeingDraggedVertically = iFalse;
     d->numUnreadEntries = 0;
     d->buttonFont = uiLabel_FontId; /* wiil be changed later */
     d->itemFonts[0] = uiContent_FontId;
@@ -703,15 +718,24 @@ void init_SidebarWidget(iSidebarWidget *d, enum iSidebarSide side) {
     iWidget *vdiv = makeVDiv_Widget();
     addChildFlags_Widget(w, vdiv, resizeToParentWidth_WidgetFlag | resizeToParentHeight_WidgetFlag);
     iZap(d->modeButtons);
-    d->resizer = NULL;
-    d->list = NULL;
-    d->certList = NULL;
-    d->actions = NULL;
+    d->resizer       = NULL;
+    d->list          = NULL;
+    d->certList      = NULL;
+    d->actions       = NULL;
     d->closedFolders = new_IntSet();
     /* On a phone, the right sidebar is not used. */
-    const iBool isPhone = deviceType_App() == phone_AppDeviceType;
-    //if (!isPhone || d->side == left_SidebarSide) {
-    iWidget *buttons = new_Widget();        
+    const iBool isPhone = (deviceType_App() == phone_AppDeviceType);
+    if (isPhone) {
+        iLabelWidget *closeButton =
+            addChildFlags_Widget(vdiv,
+                                 iClob(new_LabelWidget("${sidebar.close}", "sidebar.toggle")),
+                                 collapse_WidgetFlag | alignRight_WidgetFlag |
+                                 extraPadding_WidgetFlag | frameless_WidgetFlag);
+        as_Widget(closeButton)->flags2 |= slidingSheetDraggable_WidgetFlag2; /* phone */
+        setId_Widget(as_Widget(closeButton), "sidebar.close");
+        setFont_LabelWidget(closeButton, uiLabelBigBold_FontId);
+    }
+    iWidget *buttons = new_Widget();
     setId_Widget(buttons, "buttons");
     setDrawBufferEnabled_Widget(buttons, iTrue);
     for (int i = 0; i < max_SidebarMode; i++) {
@@ -725,28 +749,14 @@ void init_SidebarWidget(iSidebarWidget *d, enum iSidebarSide side) {
                 tightModeLabels_[i],
                 format_CStr("%s.mode arg:%d", cstr_String(id_Widget(w)), i))),
                 frameless_WidgetFlag | noBackground_WidgetFlag);
+        as_Widget(d->modeButtons[i])->flags2 |= slidingSheetDraggable_WidgetFlag2; /* phone */
     }
     setButtonFont_SidebarWidget(d, isPhone ? uiLabelBig_FontId : uiLabel_FontId);
     addChildFlags_Widget(vdiv,
                          iClob(buttons),
-                         arrangeHorizontal_WidgetFlag |
-                             resizeWidthOfChildren_WidgetFlag |
-                         arrangeHeight_WidgetFlag | resizeToParentWidth_WidgetFlag); // |
-//                             drawBackgroundToHorizontalSafeArea_WidgetFlag);
+                         arrangeHorizontal_WidgetFlag | resizeWidthOfChildren_WidgetFlag |
+                             arrangeHeight_WidgetFlag | resizeToParentWidth_WidgetFlag);
     setBackgroundColor_Widget(buttons, uiBackgroundSidebar_ColorId);
-//    }
-#if 0
-    else {
-        iLabelWidget *heading = new_LabelWidget(person_Icon " ${sidebar.identities}", NULL);
-        checkIcon_LabelWidget(heading);
-        setBackgroundColor_Widget(as_Widget(heading), uiBackgroundSidebar_ColorId);
-        setTextColor_LabelWidget(heading, uiTextSelected_ColorId);
-        setFont_LabelWidget(addChildFlags_Widget(vdiv, iClob(heading), borderTop_WidgetFlag |
-                                                 alignLeft_WidgetFlag | frameless_WidgetFlag |
-                                                 drawBackgroundToHorizontalSafeArea_WidgetFlag),
-                            uiLabelLargeBold_FontId);
-    }
-#endif
     iWidget *content = new_Widget();
     setFlags_Widget(content, resizeChildren_WidgetFlag, iTrue);
     iWidget *listAndActions = makeVDiv_Widget();
@@ -756,15 +766,17 @@ void init_SidebarWidget(iSidebarWidget *d, enum iSidebarSide side) {
     d->list = new_ListWidget();    
     setPadding_Widget(as_Widget(d->list), 0, gap_UI, 0, gap_UI);
     addChild_Widget(listArea, iClob(d->list));
-    d->certList = new_CertListWidget();
-    setPadding_Widget(as_Widget(d->certList), 0, gap_UI, 0, gap_UI);
-    addChild_Widget(listArea, iClob(d->certList));
+    if (!isPhone) {
+        d->certList = new_CertListWidget();
+        setPadding_Widget(as_Widget(d->certList), 0, gap_UI, 0, gap_UI);
+        addChild_Widget(listArea, iClob(d->certList));
+    }
     addChildFlags_Widget(listAndActions,
                          iClob(listArea),
                          expand_WidgetFlag); // | drawBackgroundToHorizontalSafeArea_WidgetFlag);
     setId_Widget(addChildPosFlags_Widget(listAndActions,
                                          iClob(d->actions = new_Widget()),
-                                         isPhone ? front_WidgetAddPos : back_WidgetAddPos,
+                                         /*isPhone ? front_WidgetAddPos :*/ back_WidgetAddPos,
                                          arrangeHorizontal_WidgetFlag | arrangeHeight_WidgetFlag |
                                          resizeWidthOfChildren_WidgetFlag), // |
 //                                             drawBackgroundToHorizontalSafeArea_WidgetFlag),
@@ -891,7 +903,7 @@ static void checkModeButtonLayout_SidebarWidget_(iSidebarWidget *d) {
 //            updateMetrics_SidebarWidget_(d);
             updateItemHeight_SidebarWidget_(d);
         }
-        setButtonFont_SidebarWidget(d, isPortrait_App() ? uiLabelBig_FontId : uiLabel_FontId);
+        setButtonFont_SidebarWidget(d, isPortrait_App() ? uiLabelMedium_FontId : uiLabel_FontId);
     }
     const iBool isTight =
         (width_Rect(bounds_Widget(as_Widget(d->modeButtons[0]))) < d->maxButtonLabelWidth);
@@ -982,6 +994,52 @@ iBool handleBookmarkEditorCommands_SidebarWidget_(iWidget *editor, const char *c
     return iFalse;
 }
 
+static void animateSlidingSheetHeight_SidebarWidget_(iAny *sidebar) {
+    iWidget *d = sidebar;
+    const int oldSize = d->rect.size.y;
+    const int newSize = bottom_Rect(safeRect_Root(d->root)) - top_Rect(bounds_Widget(d));
+    if (oldSize != newSize) {
+        d->rect.size.y = newSize;
+        arrange_Widget(d);
+    }
+//    printf("[%p] %u: %d  animating %d\n", d, window_Widget(d)->frameTime,
+//           (flags_Widget(sidebar) & visualOffset_WidgetFlag) != 0,
+//           newSize);
+    if (!isFinished_Anim(&d->visualOffset)) {
+        addTicker_App(animateSlidingSheetHeight_SidebarWidget_, sidebar);
+    }
+}
+
+enum iSlidingSheetPos {
+    top_SlidingSheetPos,
+    middle_SlidingSheetPos,
+    bottom_SlidingSheetPos,
+};
+
+static void setSlidingSheetPos_SidebarWidget_(iSidebarWidget *d, enum iSlidingSheetPos slide) {
+    iWidget *w = as_Widget(d);
+    const int pos = w->rect.pos.y;
+    const iRect safeRect = safeRect_Root(w->root);
+    if (slide == top_SlidingSheetPos) {
+        w->rect.pos.y = top_Rect(safeRect);
+        w->rect.size.y = height_Rect(safeRect);
+        setVisualOffset_Widget(w, pos - w->rect.pos.y, 0, 0);
+        setVisualOffset_Widget(w, 0, 200, easeOut_AnimFlag | softer_AnimFlag);
+        setScrollMode_ListWidget(d->list, disabledAtTopUpwards_ScrollMode);
+    }
+    else if (slide == bottom_SlidingSheetPos) {
+        postCommand_Widget(w, "sidebar.toggle");
+    }
+    else {
+        w->rect.size.y = d->midHeight;
+        w->rect.pos.y = height_Rect(safeRect) - w->rect.size.y;
+        setVisualOffset_Widget(w, pos - w->rect.pos.y, 0, 0);
+        setVisualOffset_Widget(w, 0, 200, easeOut_AnimFlag | softer_AnimFlag);
+        setScrollMode_ListWidget(d->list, disabledAtTopBothDirections_ScrollMode);
+    }
+    animateSlidingSheetHeight_SidebarWidget_(d);
+}
+
 static iBool handleSidebarCommand_SidebarWidget_(iSidebarWidget *d, const char *cmd) {
     iWidget *w = as_Widget(d);
     if (equal_Command(cmd, "width")) {
@@ -1011,35 +1069,58 @@ static iBool handleSidebarCommand_SidebarWidget_(iSidebarWidget *d, const char *
                                  argLabel_Command(cmd, "noanim") == 0 &&
                                  (d->side == left_SidebarSide || deviceType_App() != phone_AppDeviceType);
         int visX = 0;
+        int visY = 0;
         if (isVisible_Widget(w)) {
             visX = left_Rect(bounds_Widget(w)) - left_Rect(w->root->widget->rect);
+            visY = top_Rect(bounds_Widget(w)) - top_Rect(w->root->widget->rect);
         }
-        setFlags_Widget(w, hidden_WidgetFlag, isVisible_Widget(w));
+        const iBool isHiding = isVisible_Widget(w);
+        setFlags_Widget(w, hidden_WidgetFlag, isHiding);
         /* Safe area inset for mobile. */
         const int safePad = (d->side == left_SidebarSide ? left_Rect(safeRect_Root(w->root)) : 0);
-        if (isVisible_Widget(w)) {
-            setFlags_Widget(w, keepOnTop_WidgetFlag, iFalse);
-            w->rect.size.x = d->widthAsGaps * gap_UI;
-            invalidate_ListWidget(d->list);
-            if (isAnimated) {
+        const int animFlags = easeOut_AnimFlag | softer_AnimFlag;
+        if (!isPortraitPhone_App()) {
+            if (!isHiding) {
+                setFlags_Widget(w, keepOnTop_WidgetFlag, iFalse);
+                w->rect.size.x = d->widthAsGaps * gap_UI;
+                invalidate_ListWidget(d->list);
+                if (isAnimated) {
+                    setFlags_Widget(w, horizontalOffset_WidgetFlag, iTrue);
+                    setVisualOffset_Widget(
+                        w, (d->side == left_SidebarSide ? -1 : 1) * (w->rect.size.x + safePad), 0, 0);
+                    setVisualOffset_Widget(w, 0, 300, animFlags);
+                }
+            }
+            else if (isAnimated) {
                 setFlags_Widget(w, horizontalOffset_WidgetFlag, iTrue);
-                setVisualOffset_Widget(
-                    w, (d->side == left_SidebarSide ? -1 : 1) * (w->rect.size.x + safePad), 0, 0);
-                setVisualOffset_Widget(w, 0, 300, easeOut_AnimFlag | softer_AnimFlag);
+                if (d->side == right_SidebarSide) {
+                    setVisualOffset_Widget(w, visX, 0, 0);
+                    setVisualOffset_Widget(
+                        w, visX + w->rect.size.x + safePad, 300, animFlags);
+                }
+                else {
+                    setFlags_Widget(w, keepOnTop_WidgetFlag, iTrue);
+                    setVisualOffset_Widget(
+                        w, -w->rect.size.x - safePad, 300, animFlags);
+                }
             }
+            setScrollMode_ListWidget(d->list, normal_ScrollMode);
         }
-        else if (isAnimated) {
-            setFlags_Widget(w, horizontalOffset_WidgetFlag, iTrue);
-            if (d->side == right_SidebarSide) {
-                setVisualOffset_Widget(w, visX, 0, 0);
-                setVisualOffset_Widget(
-                    w, visX + w->rect.size.x + safePad, 300, easeOut_AnimFlag | softer_AnimFlag);
+        else {
+            /* Portrait phone sidebar works differently: it slides up from the bottom. */
+            setFlags_Widget(w, horizontalOffset_WidgetFlag, iFalse);
+            if (!isHiding) {
+                invalidate_ListWidget(d->list);
+                w->rect.pos.y = height_Rect(safeRect_Root(w->root)) - d->midHeight;
+                setVisualOffset_Widget(w, bottom_Rect(rect_Root(w->root)) - w->rect.pos.y, 0, 0);
+                setVisualOffset_Widget(w, 0, 300, animFlags);
+                animateSlidingSheetHeight_SidebarWidget_(d);
+                setScrollMode_ListWidget(d->list, disabledAtTopBothDirections_ScrollMode);
             }
             else {
-                setFlags_Widget(w, keepOnTop_WidgetFlag, iTrue);
-                setVisualOffset_Widget(
-                    w, -w->rect.size.x - safePad, 300, easeOut_AnimFlag | softer_AnimFlag);
+                setVisualOffset_Widget(w, bottom_Rect(rect_Root(w->root)) - w->rect.pos.y, 300, animFlags);
             }
+            showToolbar_Root(w->root, isHiding);
         }
         updateToolbarColors_Root(w->root);
         arrange_Widget(w->parent);
@@ -1097,13 +1178,32 @@ static size_t numBookmarks_(const iPtrArray *bmList) {
     return num;
 }
 
+static iRangei SlidingSheetMiddleRegion_SidebarWidget_(const iSidebarWidget *d) {
+    const iWidget *w = constAs_Widget(d);
+    const iRect safeRect = safeRect_Root(w->root);
+    const int midY = bottom_Rect(safeRect) - d->midHeight;
+    const int topHalf = (top_Rect(safeRect) + midY) / 2;
+    const int bottomHalf = (bottom_Rect(safeRect) + midY * 2) / 3;
+    return (iRangei){ topHalf, bottomHalf };
+}
+
+static void gotoNearestSlidingSheetPos_SidebarWidget_(iSidebarWidget *d) {
+    const iRangei midRegion = SlidingSheetMiddleRegion_SidebarWidget_(d);
+    const int pos = top_Rect(d->widget.rect);
+    setSlidingSheetPos_SidebarWidget_(d, pos < midRegion.start
+                                      ? top_SlidingSheetPos
+                                      : pos > midRegion.end ? bottom_SlidingSheetPos
+                                                            : middle_SlidingSheetPos);
+}
+
 static iBool processEvent_SidebarWidget_(iSidebarWidget *d, const SDL_Event *ev) {
     iWidget *w = as_Widget(d);
     /* Handle commands. */
     if (isResize_UserEvent(ev)) {
         checkModeButtonLayout_SidebarWidget_(d);
-        if (deviceType_App() == phone_AppDeviceType && d->side == left_SidebarSide) {
-            setFlags_Widget(w, rightEdgeDraggable_WidgetFlag, isPortrait_App());
+        if (deviceType_App() == phone_AppDeviceType) { // && d->side == left_SidebarSide) {
+//            setFlags_Widget(w, rightEdgeDraggable_WidgetFlag, isPortrait_App());
+            setFlags_Widget(findChild_Widget(w, "sidebar.close"), hidden_WidgetFlag, isLandscape_App());
             /* In landscape, visibility of the toolbar is controlled separately. */
             if (isVisible_Widget(w)) {
                 postCommand_Widget(w, "sidebar.toggle");
@@ -1117,6 +1217,10 @@ static iBool processEvent_SidebarWidget_(iSidebarWidget *d, const SDL_Event *ev)
             setFlags_Widget(as_Widget(d->list),
                             drawBackgroundToHorizontalSafeArea_WidgetFlag,
                             isLandscape_App());
+            setFlags_Widget(w,
+                            drawBackgroundToBottom_WidgetFlag,
+                            isPortrait_App());
+            setBackgroundColor_Widget(w, isPortrait_App() ? uiBackgroundSidebar_ColorId : none_ColorId);
             return iFalse;
         }
     }
@@ -1572,6 +1676,61 @@ static iBool processEvent_SidebarWidget_(iSidebarWidget *d, const SDL_Event *ev)
             return iTrue;
         }
     }
+    if (isSlidingSheet_SidebarWidget_(d)) {
+        if (ev->type == SDL_MOUSEWHEEL) {
+            enum iWidgetTouchMode touchMode = widgetMode_Touch(w);
+            if (touchMode == momentum_WidgetTouchMode) {
+                /* We don't do momentum. */
+                float swipe = stopWidgetMomentum_Touch(w);
+//                printf("swipe: %f\n", swipe);
+                const iRangei midRegion = SlidingSheetMiddleRegion_SidebarWidget_(d);
+                const int pos = top_Rect(w->rect);
+                if (swipe < 500) {
+                    gotoNearestSlidingSheetPos_SidebarWidget_(d);
+                }
+                else if (swipe > 6500 && ev->wheel.y > 0) {
+                    /* Fast swipe down will dismiss. */
+                    setSlidingSheetPos_SidebarWidget_(d, bottom_SlidingSheetPos);
+                }
+                else if (ev->wheel.y < 0) {
+                    setSlidingSheetPos_SidebarWidget_(d, top_SlidingSheetPos);
+                }
+                else if (pos < (midRegion.start + midRegion.end) / 2) {
+                    setSlidingSheetPos_SidebarWidget_(d, middle_SlidingSheetPos);
+                }
+                else {
+                    setSlidingSheetPos_SidebarWidget_(d, bottom_SlidingSheetPos);
+                }
+            }
+            else if (touchMode == touch_WidgetTouchMode) {
+                /* Move with the finger. */
+                adjustEdges_Rect(&w->rect, ev->wheel.y, 0, 0, 0);
+                /* Upon reaching the top, scrolling is switched back to the list. */
+                const iRect rootRect = safeRect_Root(w->root);
+                const int top = top_Rect(rootRect);
+                if (w->rect.pos.y < top) {
+                    setScrollMode_ListWidget(d->list, disabledAtTopUpwards_ScrollMode);
+                    setScrollPos_ListWidget(d->list, top - w->rect.pos.y);
+                    transferAffinity_Touch(w, as_Widget(d->list));
+                    w->rect.pos.y = top;
+                    w->rect.size.y = height_Rect(rootRect);
+                }
+                else {
+                    setScrollMode_ListWidget(d->list, disabledAtTopBothDirections_ScrollMode);
+                }
+                arrange_Widget(w);
+                refresh_Widget(w);
+            }
+            else {
+                return iFalse;
+            }
+            return iTrue;
+        }
+        if (ev->type == SDL_USEREVENT && ev->user.code == widgetTouchEnds_UserEventCode) {
+            gotoNearestSlidingSheetPos_SidebarWidget_(d);
+            return iTrue;
+        }
+    }
     if (ev->type == SDL_MOUSEBUTTONDOWN &&
         contains_Widget(as_Widget(d->list), init_I2(ev->button.x, ev->button.y))) {
         if (hoverItem_ListWidget(d->list) || isVisible_Widget(d->menu)) {
diff --git a/src/ui/sidebarwidget.h b/src/ui/sidebarwidget.h
index 81c6681f..2a930a60 100644
--- a/src/ui/sidebarwidget.h
+++ b/src/ui/sidebarwidget.h
@@ -54,6 +54,7 @@ iBool               setMode_SidebarWidget       (iSidebarWidget *, enum iSidebar
 void                setWidth_SidebarWidget      (iSidebarWidget *, float widthAsGaps);
 iBool               setButtonFont_SidebarWidget (iSidebarWidget *, int font);
 void                setClosedFolders_SidebarWidget  (iSidebarWidget *, const iIntSet *closedFolders);
+void                setMidHeight_SidebarWidget  (iSidebarWidget *, int midHeight); /* phone layout */
 
 enum iSidebarMode   mode_SidebarWidget          (const iSidebarWidget *);
 enum iFeedsMode     feedsMode_SidebarWidget     (const iSidebarWidget *);
diff --git a/src/ui/touch.c b/src/ui/touch.c
index 195d1dff..aee5a383 100644
--- a/src/ui/touch.c
+++ b/src/ui/touch.c
@@ -589,9 +589,18 @@ iBool processEvent_Touch(const SDL_Event *ev) {
                     divvf_F3(&touch->accum, 6);
                     divfv_I2(&pixels, 6);
                     /* Allow scrolling a scrollable widget. */
-                    iWidget *flow = findOverflowScrollable_Widget(touch->affinity);
-                    if (flow) {
-                        touch->affinity = flow;
+                    if (touch->affinity && touch->affinity->flags2 & slidingSheetDraggable_WidgetFlag2) {
+                        extern iWidgetClass Class_SidebarWidget; /* The only type of sliding sheet for now. */
+                        iWidget *slider = findParentClass_Widget(touch->affinity, &Class_SidebarWidget);
+                        if (slider) {
+                            touch->affinity = slider;
+                        }
+                    }
+                    else {
+                        iWidget *flow = findOverflowScrollable_Widget(touch->affinity);
+                        if (flow) {
+                            touch->affinity = flow;
+                        }
                     }
                 }
                 else {
@@ -617,11 +626,13 @@ iBool processEvent_Touch(const SDL_Event *ev) {
             if (touch->axis == y_TouchAxis) {
                 pixels.x = 0;
             }
-//            printf("%p (%s) py: %i wy: %f acc: %f edge: %d\n",
-//                   touch->affinity,
-//                   class_Widget(touch->affinity)->name,
-//                   pixels.y, y_F3(amount), y_F3(touch->accum),
-//                   touch->edge);
+#if 0
+            printf("%p (%s) py: %i wy: %f acc: %f edge: %d\n",
+                   touch->affinity,
+                   class_Widget(touch->affinity)->name,
+                   pixels.y, y_F3(amount), y_F3(touch->accum),
+                   touch->edge);
+#endif
             if (pixels.x || pixels.y) {
                 //setFocus_Widget(NULL);
                 dispatchMotion_Touch_(touch->startPos /*pos[0]*/, 0);
@@ -801,6 +812,16 @@ void widgetDestroyed_Touch(iWidget *widget) {
     }
 }
 
+void transferAffinity_Touch(iWidget *src, iWidget *dst) {
+    iTouchState *d = touchState_();
+    iForEach(Array, i, d->touches) {
+        iTouch *touch = i.value;
+        if (touch->affinity == src) {
+            touch->affinity = dst;
+        }
+    }
+}
+
 iInt2 latestPosition_Touch(void) {
     return touchState_()->currentTouchPos;
 }
diff --git a/src/ui/touch.h b/src/ui/touch.h
index e048224a..c9c76d86 100644
--- a/src/ui/touch.h
+++ b/src/ui/touch.h
@@ -39,6 +39,7 @@ void    update_Touch            (void);
 float                   stopWidgetMomentum_Touch    (const iWidget *widget);
 enum iWidgetTouchMode   widgetMode_Touch            (const iWidget *widget);
 void                    widgetDestroyed_Touch       (iWidget *widget);
+void                    transferAffinity_Touch      (iWidget *src, iWidget *dst);
 
 iInt2   latestPosition_Touch    (void); /* valid during processing of current event */
 iBool   isHovering_Touch        (void); /* stationary touch or a long-press drag ongoing */
diff --git a/src/ui/widget.c b/src/ui/widget.c
index 210fe899..0d20cca9 100644
--- a/src/ui/widget.c
+++ b/src/ui/widget.c
@@ -124,6 +124,7 @@ void init_Widget(iWidget *d) {
     init_String(&d->id);
     d->root           = get_Root(); /* never changes after this */
     d->flags          = 0;
+    d->flags2         = 0;
     d->rect           = zero_Rect();
     d->minSize        = zero_I2();
     d->sizeRef        = NULL;
diff --git a/src/ui/widget.h b/src/ui/widget.h
index 4025f5c5..35be1bcb 100644
--- a/src/ui/widget.h
+++ b/src/ui/widget.h
@@ -123,6 +123,10 @@ enum iWidgetFlag {
 #define refChildrenOffset_WidgetFlag        iBit64(63) /* visual offset determined by the offset of referenced children */
 #define nativeMenu_WidgetFlag               iBit64(64)
 
+enum iWidgetFlag2 {
+    slidingSheetDraggable_WidgetFlag2 = iBit(1),
+};
+
 enum iWidgetAddPos {
     back_WidgetAddPos,
     front_WidgetAddPos,
@@ -139,6 +143,7 @@ struct Impl_Widget {
     iObject      object;
     iString      id;
     int64_t      flags;
+    int          flags2;
     iRect        rect;
     iInt2        minSize;
     iWidget *    sizeRef;