Mobile: Redoing Preferences

Contents of the Preferences split panel view are created based on arrays of MenuItems. This removes the confusing indirection of trying to modify the desktop widget tree to fit mobile.

10 files changed, 426 insertions, 92 deletions

diff --git a/src/gmdocument.h b/src/gmdocument.h
index 9f8ee2ef..332c3e00 100644
--- a/src/gmdocument.h
+++ b/src/gmdocument.h
@@ -59,6 +59,7 @@ enum iGmDocumentTheme {
     white_GmDocumentTheme,
     sepia_GmDocumentTheme,
     highContrast_GmDocumentTheme,
+    max_GmDocumentTheme
 };
 
 iBool isDark_GmDocumentTheme(enum iGmDocumentTheme);
diff --git a/src/ui/documentwidget.c b/src/ui/documentwidget.c
index e280bc84..6ca4fd8d 100644
--- a/src/ui/documentwidget.c
+++ b/src/ui/documentwidget.c
@@ -1010,6 +1010,9 @@ static void documentRunsInvalidated_DocumentWidget_(iDocumentWidget *d) {
 }
 
 iBool isPinned_DocumentWidget_(const iDocumentWidget *d) {
+    if (deviceType_App() == phone_AppDeviceType) {
+        return iFalse;
+    }
     if (d->flags & otherRootByDefault_DocumentWidgetFlag) {
         return iTrue;
     }
diff --git a/src/ui/labelwidget.c b/src/ui/labelwidget.c
index 3bfa600b..b84e17f4 100644
--- a/src/ui/labelwidget.c
+++ b/src/ui/labelwidget.c
@@ -44,11 +44,13 @@ struct Impl_LabelWidget {
     iString command;
     iClick  click;
     struct {
-        uint8_t alignVisual     : 1; /* align according to visible bounds, not font metrics */
-        uint8_t noAutoMinHeight : 1; /* minimum height is not set automatically */
-        uint8_t drawAsOutline   : 1; /* draw as outline, filled with background color */
-        uint8_t noTopFrame      : 1;
-        uint8_t wrap            : 1;
+        uint8_t alignVisual         : 1; /* align according to visible bounds, not font metrics */
+        uint8_t noAutoMinHeight     : 1; /* minimum height is not set automatically */
+        uint8_t drawAsOutline       : 1; /* draw as outline, filled with background color */
+        uint8_t noTopFrame          : 1;
+        uint8_t wrap                : 1;
+        uint8_t allCaps             : 1;
+        uint8_t removeTrailingColon : 1;
     } flags;
 };
 
@@ -442,11 +444,18 @@ void updateSize_LabelWidget(iLabelWidget *d) {
 
 static void replaceVariables_LabelWidget_(iLabelWidget *d) {
     translate_Lang(&d->label);
+    if (d->flags.allCaps) {
+        set_String(&d->label, collect_String(upper_String(&d->label)));
+    }
+    if (d->flags.removeTrailingColon && endsWith_String(&d->label, ":")) {
+        removeEnd_String(&d->label, 1);
+    }
 }
 
 void init_LabelWidget(iLabelWidget *d, const char *label, const char *cmd) {
     iWidget *w = &d->widget;
     init_Widget(w);
+    iZap(d->flags);
     d->font = uiLabel_FontId;
     d->forceFg = none_ColorId;
     d->icon = 0;
@@ -464,11 +473,6 @@ void init_LabelWidget(iLabelWidget *d, const char *label, const char *cmd) {
     d->kmods = 0;
     init_Click(&d->click, d, !isEmpty_String(&d->command) ? SDL_BUTTON_LEFT : 0);
     setFlags_Widget(w, hover_WidgetFlag, d->click.button != 0);
-    d->flags.alignVisual     = iFalse;
-    d->flags.noAutoMinHeight = iFalse;
-    d->flags.drawAsOutline   = iFalse;
-    d->flags.noTopFrame      = iFalse;
-    d->flags.wrap            = iFalse;
     updateSize_LabelWidget(d);
     updateKey_LabelWidget_(d); /* could be bound to another key */
 }
@@ -525,6 +529,20 @@ void setOutline_LabelWidget(iLabelWidget *d, iBool drawAsOutline) {
     }
 }
 
+void setAllCaps_LabelWidget(iLabelWidget *d, iBool allCaps) {
+    if (d) {
+        d->flags.allCaps = allCaps;
+        replaceVariables_LabelWidget_(d);
+    }
+}
+
+void setRemoveTrailingColon_LabelWidget(iLabelWidget *d, iBool removeTrailingColon) {
+    if (d) {
+        d->flags.removeTrailingColon = removeTrailingColon;
+        replaceVariables_LabelWidget_(d);
+    }
+}
+
 void updateText_LabelWidget(iLabelWidget *d, const iString *text) {
     set_String(&d->label, text);
     set_String(&d->srcLabel, text);
diff --git a/src/ui/labelwidget.h b/src/ui/labelwidget.h
index b8b6fd87..6275d2c8 100644
--- a/src/ui/labelwidget.h
+++ b/src/ui/labelwidget.h
@@ -30,10 +30,12 @@ iDeclareWidgetClass(LabelWidget)
 iDeclareObjectConstructionArgs(LabelWidget, const char *label, const char *command)
 
 void    setAlignVisually_LabelWidget(iLabelWidget *, iBool alignVisual);
-void    setNoAutoMinHeight_LabelWidget(iLabelWidget *, iBool noAutoMinHeight);
+void    setNoAutoMinHeight_LabelWidget  (iLabelWidget *, iBool noAutoMinHeight);
 void    setNoTopFrame_LabelWidget   (iLabelWidget *, iBool noTopFrame);
 void    setWrap_LabelWidget         (iLabelWidget *, iBool wrap);
 void    setOutline_LabelWidget      (iLabelWidget *, iBool drawAsOutline);
+void    setAllCaps_LabelWidget      (iLabelWidget *, iBool allCaps);
+void    setRemoveTrailingColon_LabelWidget  (iLabelWidget *, iBool removeTrailingColon);
 void    setFont_LabelWidget         (iLabelWidget *, int fontId);
 void    setTextColor_LabelWidget    (iLabelWidget *, int color);
 void    setText_LabelWidget         (iLabelWidget *, const iString *text); /* resizes widget */
diff --git a/src/ui/mobile.c b/src/ui/mobile.c
index 168a92b8..4ccbb0cb 100644
--- a/src/ui/mobile.c
+++ b/src/ui/mobile.c
@@ -57,7 +57,6 @@ static enum iFontId labelBoldFont_(void) {
 
 static void updatePanelSheetMetrics_(iWidget *sheet) {
     iWidget *navi       = findChild_Widget(sheet, "panel.navi");
-//    iWidget *naviPad    = child_Widget(navi, 0);
     int      naviHeight = lineHeight_Text(labelFont_()) + 4 * gap_UI;
 #if defined (iPlatformMobile)
     float left = 0.0f, right = 0.0f, top = 0.0f, bottom = 0.0f;
@@ -339,7 +338,7 @@ static iWidget *makeValuePaddingWithHeading_(iLabelWidget *heading, iWidget *val
         addChildFlags_Widget(div, iClob(new_Widget()), expand_WidgetFlag);
         addChild_Widget(div, iClob(value));
     }
-    printTree_Widget(div);
+//    printTree_Widget(div);
     return div;
 }
 
@@ -369,6 +368,205 @@ static iWidget *addChildPanel_(iWidget *parent, iLabelWidget *panelButton,
 }
 
 void finalizeSheet_Mobile(iWidget *sheet) {
+    arrange_Widget(sheet);
+//    postRefresh_App();
+}
+
+static size_t countItems_(const iMenuItem *itemsNullTerminated) {
+    size_t num = 0;
+    for (; itemsNullTerminated->label; num++, itemsNullTerminated++) {}
+    return num;
+}
+
+void makePanelItem_Mobile(iWidget *panel, const iMenuItem *item) {
+    const char *  spec    = item->label;
+    const char *  id      = cstr_Rangecc(range_Command(spec, "id"));
+    const char *  label   = format_CStr("${%s}", id);
+    iWidget *     widget  = NULL;
+    iLabelWidget *heading = NULL;
+    if (hasLabel_Command(spec, "device") && deviceType_App() != argLabel_Command(spec, "device")) {
+        return;
+    }
+    if (equal_Command(spec, "title")) {
+        iLabelWidget *title = addChildFlags_Widget(panel,
+                                                   iClob(new_LabelWidget(label, NULL)),
+                                                   alignLeft_WidgetFlag | frameless_WidgetFlag);
+        setFont_LabelWidget(title, uiLabelLargeBold_FontId);
+        setTextColor_LabelWidget(title, uiHeading_ColorId);
+        setAllCaps_LabelWidget(title, iTrue);
+    }
+    else if (equal_Command(spec, "heading")) {
+        addChild_Widget(panel, iClob(makePadding_Widget(lineHeight_Text(labelFont_()))));
+        heading = makeHeading_Widget(label);
+        setAllCaps_LabelWidget(heading, iTrue);
+        setRemoveTrailingColon_LabelWidget(heading, iTrue);
+        addChild_Widget(panel, iClob(heading));
+    }    
+    else if (equal_Command(spec, "toggle")) {
+        iLabelWidget *toggle = (iLabelWidget *) makeToggle_Widget(id);
+        setFont_LabelWidget(toggle, labelFont_());
+        widget = makeValuePaddingWithHeading_(heading = makeHeading_Widget(label),
+                                              as_Widget(toggle));
+    }
+    else if (equal_Command(spec, "dropdown")) {
+        const iMenuItem *dropItems = item->data;
+        iLabelWidget *drop = makeMenuButton_LabelWidget("", dropItems, countItems_(dropItems));
+        setFont_LabelWidget(drop, labelFont_());
+        setFlags_Widget(as_Widget(drop),
+                        alignRight_WidgetFlag | noBackground_WidgetFlag |
+                            frameless_WidgetFlag, iTrue);
+        setId_Widget(as_Widget(drop), id);
+        widget = makeValuePaddingWithHeading_(heading = makeHeading_Widget(label), as_Widget(drop));
+    }
+    else if (equal_Command(spec, "radio")) {
+        addChild_Widget(panel, iClob(makePadding_Widget(lineHeight_Text(labelFont_()))));
+        iLabelWidget *head = makeHeading_Widget(label);
+        setAllCaps_LabelWidget(head, iTrue);
+        setRemoveTrailingColon_LabelWidget(head, iTrue);
+        addChild_Widget(panel, iClob(head));
+        widget = new_Widget();
+        setBackgroundColor_Widget(widget, uiBackgroundSidebar_ColorId);
+        setPadding_Widget(widget, 4 * gap_UI, 2 * gap_UI, 4 * gap_UI, 2 * gap_UI);
+//        setFlags_Widget(widget, arrangeWidth_WidgetFlag, iFalse);
+        setFlags_Widget(widget,
+                        borderBottom_WidgetFlag |
+                            arrangeHorizontal_WidgetFlag |
+                            arrangeHeight_WidgetFlag |
+                            resizeToParentWidth_WidgetFlag |
+                            resizeWidthOfChildren_WidgetFlag,
+                        iTrue);
+        setId_Widget(widget, id);
+        for (const iMenuItem *radioItem = item->data; radioItem->label; radioItem++) {
+            const char *  radId     = cstr_Rangecc(range_Command(radioItem->label, "id"));
+            const char *  radLabel  = hasLabel_Command(radioItem->label, "label")
+                                          ? format_CStr("${%s}", cstr_Rangecc(range_Command(radioItem->label, "label")))
+                                          : suffixPtr_Command(radioItem->label, "text");
+            iLabelWidget *radButton = new_LabelWidget(radLabel, radioItem->command);
+            setId_Widget(as_Widget(radButton), radId);
+            setFont_LabelWidget(radButton, defaultMedium_FontId);
+            addChildFlags_Widget(widget, iClob(radButton), radio_WidgetFlag | noBackground_WidgetFlag);
+        }
+    }
+    else if (equal_Command(spec, "input")) {
+        iInputWidget *input = new_InputWidget(argU32Label_Command(spec, "maxlen"));
+        setId_Widget(as_Widget(input), id);
+        setFont_InputWidget(input, labelFont_());
+        setContentPadding_InputWidget(input, 3 * gap_UI, 0);
+        setUrlContent_InputWidget(input, argLabel_Command(spec, "url"));
+        widget = makeValuePaddingWithHeading_(heading = makeHeading_Widget(label),
+                                              as_Widget(input));        
+    }
+    else if (equal_Command(spec, "padding")) {
+        widget = makePadding_Widget(lineHeight_Text(labelFont_()) * 1.5f);
+    }
+    if (heading) {
+        setRemoveTrailingColon_LabelWidget(heading, iTrue);
+        const iChar icon = toInt_String(string_Command(item->label, "icon"));
+        if (icon) {
+            setIcon_LabelWidget(heading, icon);
+        }
+    }
+    if (widget) {
+        addChild_Widget(panel, iClob(widget));
+    }
+}
+
+void makePanelItems_Mobile(iWidget *panel, const iMenuItem *itemsNullTerminated) {
+    for (const iMenuItem *item = itemsNullTerminated; item->label; item++) {
+        makePanelItem_Mobile(panel, item);
+    }
+}
+
+iWidget *makeSplitMultiPanel_Mobile(const iMenuItem *itemsNullTerminated) {
+    /* A multipanel widget has a top panel and one or more detail panels. In a horizontal layout,
+       the detail panels slide in from the right and cover the top panel. In a landscape layout,
+       the detail panels are always visible on the side. */
+    iWidget *sheet = new_Widget();
+    setBackgroundColor_Widget(sheet, uiBackground_ColorId);
+    setFlags_Widget(sheet,
+                    resizeToParentWidth_WidgetFlag |
+                    resizeToParentHeight_WidgetFlag |
+                    frameless_WidgetFlag | focusRoot_WidgetFlag | commandOnClick_WidgetFlag |
+                        overflowScrollable_WidgetFlag | leftEdgeDraggable_WidgetFlag,
+                    iTrue);
+    /* The top-level split between main and detail panels. */
+    iWidget *mainDetailSplit = makeHDiv_Widget(); {
+        setCommandHandler_Widget(mainDetailSplit, mainDetailSplitHandler_);
+        setFlags_Widget(mainDetailSplit, resizeHeightOfChildren_WidgetFlag, iFalse);
+        setId_Widget(mainDetailSplit, "mdsplit");
+        addChild_Widget(sheet, iClob(mainDetailSplit));
+    }
+    /* The panel roots. */
+    iWidget *topPanel = new_Widget(); {
+        setId_Widget(topPanel, "panel.top");
+        setCommandHandler_Widget(topPanel, topPanelHandler_);
+        setFlags_Widget(topPanel,
+                        arrangeVertical_WidgetFlag | resizeWidthOfChildren_WidgetFlag |
+                            arrangeHeight_WidgetFlag | overflowScrollable_WidgetFlag |
+                            commandOnClick_WidgetFlag,
+                        iTrue);
+        addChild_Widget(mainDetailSplit, iClob(topPanel));
+        setId_Widget(addChild_Widget(topPanel, iClob(makePadding_Widget(0))), "panel.toppad");
+    }
+    iWidget *detailStack = new_Widget(); {
+        setId_Widget(detailStack, "detailstack");
+        setFlags_Widget(detailStack, collapse_WidgetFlag | resizeWidthOfChildren_WidgetFlag, iTrue);
+        addChild_Widget(mainDetailSplit, iClob(detailStack));
+    }
+    addChild_Widget(topPanel, iClob(makePadding_Widget(lineHeight_Text(labelFont_()))));
+    /* Slide top panel with detail panels. */ {
+        setFlags_Widget(topPanel, refChildrenOffset_WidgetFlag, iTrue);
+        topPanel->offsetRef = detailStack;
+    }
+    /* Navigation bar at the top. */
+    iWidget *navi = new_Widget(); {
+        setId_Widget(navi, "panel.navi");
+        setBackgroundColor_Widget(navi, uiBackground_ColorId);
+        addChild_Widget(navi, iClob(makePadding_Widget(0)));
+        iLabelWidget *back = addChildFlags_Widget(
+            navi,
+            iClob(new_LabelWidget(leftAngle_Icon " ${panel.back}", "panel.close")),
+            noBackground_WidgetFlag | frameless_WidgetFlag | alignLeft_WidgetFlag |
+                extraPadding_WidgetFlag);
+        checkIcon_LabelWidget(back);
+        setId_Widget(as_Widget(back), "panel.back");
+        setFont_LabelWidget(back, labelFont_());
+        addChildFlags_Widget(sheet, iClob(navi),
+                             drawBackgroundToVerticalSafeArea_WidgetFlag |
+                                 arrangeHeight_WidgetFlag | resizeWidthOfChildren_WidgetFlag |
+                                 resizeToParentWidth_WidgetFlag | arrangeVertical_WidgetFlag);        
+    }
+    /* Create panel contents based on provided items. */
+    for (size_t i = 0; itemsNullTerminated[i].label; i++) {
+        const iMenuItem *item = &itemsNullTerminated[i];
+        if (equal_Command(item->label, "panel")) {
+            const char *id = cstr_Rangecc(range_Command(item->label, "id"));
+            const iString *label = collectNewFormat_String("${%s}", id);
+            iLabelWidget *button =
+                addChildFlags_Widget(topPanel,
+                                     iClob(makePanelButton_(cstr_String(label), "panel.open")),
+                                     chevron_WidgetFlag | borderTop_WidgetFlag);
+            const iChar icon = toInt_String(string_Command(item->label, "icon"));
+            if (icon) {
+                setIcon_LabelWidget(button, icon);
+            }
+            iWidget *panel = addChildPanel_(detailStack, button, NULL);
+            makePanelItems_Mobile(panel, item->data);
+        }
+        else {
+            makePanelItem_Mobile(topPanel, item);
+        }
+    }
+    /* Finalize the layout. */
+    addChild_Widget(sheet->root->widget, iClob(sheet));
+    mainDetailSplitHandler_(mainDetailSplit, "window.resized"); /* make it resize the split */
+    updatePanelSheetMetrics_(sheet);
+    arrange_Widget(sheet);
+    postCommand_App("widget.overflow"); /* with the correct dimensions */    
+    return sheet;
+}
+
+#if 0
     /* The sheet contents are completely rearranged and restyled on a phone.
        We'll set up a linear fullscreen arrangement of the widgets. Sheets are already
        scrollable so they can be taller than the display. In hindsight, it may have been
@@ -399,7 +597,7 @@ void finalizeSheet_Mobile(iWidget *sheet) {
         │         │ └┤                   ││    │         │└┤      ││
         │         │  └───────────────────┘│    │         │ └──────┘
         └─────────┴───────────────────────┘    └─────────┴ ─ ─ ─ ─ ┘
-                                                          offscreen
+                                                          underneath
         */
         /* Modify the top sheet to act as a fullscreen background. */
         setPadding1_Widget(sheet, 0);
@@ -774,6 +972,7 @@ void finalizeSheet_Mobile(iWidget *sheet) {
     }
     postRefresh_App();
 }
+#endif
 
 void setupMenuTransition_Mobile(iWidget *sheet, iBool isIncoming) {
     if (!useMobileSheetLayout_()) {
diff --git a/src/ui/mobile.h b/src/ui/mobile.h
index 44134389..50b89e32 100644
--- a/src/ui/mobile.h
+++ b/src/ui/mobile.h
@@ -22,11 +22,14 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */
 
 #pragma once
 
-#include <the_Foundation/defs.h>
+#include <the_Foundation/rect.h>
 
 iDeclareType(Widget)
-
-void        setupMenuTransition_Mobile          (iWidget *menu, iBool isIncoming);
-void        setupSheetTransition_Mobile         (iWidget *sheet, iBool isIncoming);
+iDeclareType(MenuItem)
+    
+iWidget *   makeSplitMultiPanel_Mobile  (const iMenuItem *itemsNullTerminated);
+    
+void        setupMenuTransition_Mobile  (iWidget *menu, iBool isIncoming);
+void        setupSheetTransition_Mobile (iWidget *sheet, iBool isIncoming);
 
 void        finalizeSheet_Mobile        (iWidget *sheet);
diff --git a/src/ui/util.c b/src/ui/util.c
index 906d30ae..995b730e 100644
--- a/src/ui/util.c
+++ b/src/ui/util.c
@@ -707,6 +707,9 @@ iWidget *makeMenu_Widget(iWidget *parent, const iMenuItem *items, size_t n) {
     iBool haveIcons = iFalse;
     for (size_t i = 0; i < n; ++i) {
         const iMenuItem *item = &items[i];
+        if (!item->label) {
+            break;
+        }
         if (equal_CStr(item->label, "---")) {
             addChild_Widget(menu, iClob(makeMenuSeparator_()));
         }
@@ -1506,7 +1509,7 @@ static void addRadioButton_(iWidget *parent, const char *id, const char *label,
         id);
 }
 
-static void addFontButtons_(iWidget *parent, const char *id) {
+static const iArray *makeFontItems_(const char *id) {
     const struct {
         const char *   name;
         enum iTextFont cfgId;
@@ -1518,7 +1521,7 @@ static void addFontButtons_(iWidget *parent, const char *id) {
                   { "Tinos", tinos_TextFont },
                   { "---", -1 },
                   { "Iosevka", iosevka_TextFont } };
-    iArray *items = new_Array(sizeof(iMenuItem));
+    iArray *items = collectNew_Array(sizeof(iMenuItem));
     iForIndices(i, fonts) {
         pushBack_Array(items,
                        &(iMenuItem){ fonts[i].name,
@@ -1528,11 +1531,18 @@ static void addFontButtons_(iWidget *parent, const char *id) {
                                          ? format_CStr("!%s.set arg:%d", id, fonts[i].cfgId)
                                          : NULL });
     }
-    iLabelWidget *button = makeMenuButton_LabelWidget("Source Sans 3", data_Array(items), size_Array(items));
-    setBackgroundColor_Widget(findChild_Widget(as_Widget(button), "menu"), uiBackgroundMenu_ColorId);
+    pushBack_Array(items, &(iMenuItem){ NULL }); /* terminator */
+    return items;
+}
+
+static void addFontButtons_(iWidget *parent, const char *id) {
+    const iArray *items = makeFontItems_(id);
+    iLabelWidget *button = makeMenuButton_LabelWidget("Source Sans 3",
+                                                      constData_Array(items), size_Array(items));
+    setBackgroundColor_Widget(findChild_Widget(as_Widget(button), "menu"),
+                              uiBackgroundMenu_ColorId);
     setId_Widget(as_Widget(button), format_CStr("prefs.%s", id));
     addChildFlags_Widget(parent, iClob(button), alignLeft_WidgetFlag);
-    delete_Array(items);
 }
 
 #if 0
@@ -1615,7 +1625,7 @@ static void addPrefsInputWithHeading_(iWidget *headings, iWidget *values,
 static size_t findWidestItemLabel_(const iMenuItem *items, size_t num) {
     int widest = 0;
     size_t widestPos = iInvalidPos;
-    for (size_t i = 0; i < num; i++) {
+    for (size_t i = 0; i < num && items[i].label; i++) {
         const int width =
             measure_Text(uiLabel_FontId,
                          translateCStr_Lang(items[i].label))
@@ -1629,6 +1639,153 @@ static size_t findWidestItemLabel_(const iMenuItem *items, size_t num) {
 }
 
 iWidget *makePreferences_Widget(void) {
+    /* Common items. */
+    const iMenuItem langItems[] = { { "${lang.de} - de", 0, 0, "uilang id:de" },
+                                    { "${lang.en} - en", 0, 0, "uilang id:en" },
+                                    { "${lang.es} - es", 0, 0, "uilang id:es" },
+                                    { "${lang.fi} - fi", 0, 0, "uilang id:fi" },
+                                    { "${lang.fr} - fr", 0, 0, "uilang id:fr" },
+                                    { "${lang.ia} - ia", 0, 0, "uilang id:ia" },
+                                    { "${lang.ie} - ie", 0, 0, "uilang id:ie" },
+                                    { "${lang.pl} - pl", 0, 0, "uilang id:pl" },
+                                    { "${lang.ru} - ru", 0, 0, "uilang id:ru" },
+                                    { "${lang.sr} - sr", 0, 0, "uilang id:sr" },
+                                    { "${lang.tok} - tok", 0, 0, "uilang id:tok" },
+                                    { "${lang.zh.hans} - zh", 0, 0, "uilang id:zh_Hans" },
+                                    { "${lang.zh.hant} - zh", 0, 0, "uilang id:zh_Hant" },
+                                    { NULL } };
+    const iMenuItem returnKeyBehaviors[] = {
+        { "${prefs.returnkey.linebreak} " uiTextAction_ColorEscape shift_Icon return_Icon
+                                                                    restore_ColorEscape
+          "    ${prefs.returnkey.accept} " uiTextAction_ColorEscape return_Icon,
+          0,
+          0,
+          format_CStr("returnkey.set arg:%d", default_ReturnKeyBehavior) },
+        { "${prefs.returnkey.linebreak} " uiTextAction_ColorEscape return_Icon restore_ColorEscape
+          "    ${prefs.returnkey.accept} " uiTextAction_ColorEscape shift_Icon return_Icon,
+          0,
+          0,
+          format_CStr("returnkey.set arg:%d", acceptWithShift_ReturnKeyBehavior) },
+        { "${prefs.returnkey.linebreak} " uiTextAction_ColorEscape return_Icon restore_ColorEscape
+          "    ${prefs.returnkey.accept} " uiTextAction_ColorEscape
+#if defined (iPlatformApple)
+          "\u2318" return_Icon,
+#else
+          "Ctrl" return_Icon,
+#endif
+          0,
+          0,
+          format_CStr("returnkey.set arg:%d", acceptWithPrimaryMod_ReturnKeyBehavior) },
+        { NULL }
+    };
+    iMenuItem docThemes[2][max_GmDocumentTheme + 1];
+    for (int i = 0; i < 2; ++i) {
+        const iBool isDark = (i == 0);
+        const char *mode = isDark ? "dark" : "light";
+        const iMenuItem items[max_GmDocumentTheme + 1] = {
+            { "${prefs.doctheme.name.colorfuldark}", 0, 0, format_CStr("doctheme.%s.set arg:%d", mode, colorfulDark_GmDocumentTheme) },
+            { "${prefs.doctheme.name.colorfullight}", 0, 0, format_CStr("doctheme.%s.set arg:%d", mode, colorfulLight_GmDocumentTheme) },
+            { "${prefs.doctheme.name.black}", 0, 0, format_CStr("doctheme.%s.set arg:%d", mode, black_GmDocumentTheme) },
+            { "${prefs.doctheme.name.gray}", 0, 0, format_CStr("doctheme.%s.set arg:%d", mode, gray_GmDocumentTheme) },
+            { "${prefs.doctheme.name.white}", 0, 0, format_CStr("doctheme.%s.set arg:%d", mode, white_GmDocumentTheme) },
+            { "${prefs.doctheme.name.sepia}", 0, 0, format_CStr("doctheme.%s.set arg:%d", mode, sepia_GmDocumentTheme) },
+            { "${prefs.doctheme.name.highcontrast}", 0, 0, format_CStr("doctheme.%s.set arg:%d", mode, highContrast_GmDocumentTheme) },
+            { NULL }
+        };
+        memcpy(docThemes[i], items, sizeof(items));
+    }
+    const iMenuItem imgStyles[] = {
+        { "${prefs.imagestyle.original}",  0, 0, format_CStr("imagestyle.set arg:%d", original_ImageStyle) },
+        { "${prefs.imagestyle.grayscale}", 0, 0, format_CStr("imagestyle.set arg:%d", grayscale_ImageStyle) },
+        { "${prefs.imagestyle.bgfg}",      0, 0, format_CStr("imagestyle.set arg:%d", bgFg_ImageStyle) },
+        { "${prefs.imagestyle.text}",      0, 0, format_CStr("imagestyle.set arg:%d", textColorized_ImageStyle) },
+        { "${prefs.imagestyle.preformat}", 0, 0, format_CStr("imagestyle.set arg:%d", preformatColorized_ImageStyle) },
+        { NULL }
+    };
+    /* Create the Preferences UI. */
+    if (deviceType_App() != desktop_AppDeviceType) {
+        const iMenuItem pinSplit[] = {
+            { "button id:prefs.pinsplit.0 label:prefs.pinsplit.none",  0, 0, "pinsplit.set arg:0" },
+            { "button id:prefs.pinsplit.1 label:prefs.pinsplit.left",  0, 0, "pinsplit.set arg:1" },
+            { "button id:prefs.pinsplit.2 label:prefs.pinsplit.right", 0, 0, "pinsplit.set arg:2" },
+            { NULL }
+        };
+        const iMenuItem themeItems[] = {
+            { "button id:prefs.theme.0 label:prefs.theme.black", 0, 0, "theme.set arg:0" },
+            { "button id:prefs.theme.1 label:prefs.theme.dark",  0, 0, "theme.set arg:1" },
+            { "button id:prefs.theme.2 label:prefs.theme.light", 0, 0, "theme.set arg:2" },
+            { "button id:prefs.theme.3 label:prefs.theme.white", 0, 0, "theme.set arg:3" },
+            { NULL }  
+        };
+        const iMenuItem accentItems[] = {
+            { "button id:prefs.accent.0 label:prefs.accent.teal", 0, 0, "accent.set arg:0" },
+            { "button id:prefs.accent.1 label:prefs.accent.orange", 0, 0, "accent.set arg:1" },
+            { NULL }
+        };
+        const iMenuItem satItems[] = {
+            { "button id:prefs.saturation.3 text:100 %", 0, 0, "saturation.set arg:100" },
+            { "button id:prefs.saturation.2 text:66 %", 0, 0, "saturation.set arg:66" },
+            { "button id:prefs.saturation.1 text:33 %", 0, 0, "saturation.set arg:33" },
+            { "button id:prefs.saturation.0 text:0 %", 0, 0, "saturation.set arg:0" },
+            { NULL }  
+        };
+        const iMenuItem generalItems[] = {
+            { "title id:heading.prefs.general", 0, 0, NULL },
+            { "input id:prefs.searchurl url:1", 0, 0, NULL },
+            { "padding", 0, 0, NULL },
+            { "toggle id:prefs.hoverlink", 0, 0, NULL },
+            { "toggle id:prefs.archive.openindex", 0, 0, NULL },
+            { "radio device:1 id:prefs.pinsplit", 0, 0, (const void *) pinSplit },
+            { "padding", 0, 0, NULL },
+            { "dropdown id:prefs.uilang", 0, 0, (const void *) langItems },
+            { NULL }
+        };
+        const iMenuItem uiItems[] = {
+            { "title id:heading.prefs.interface", 0, 0, NULL },
+            { "dropdown device:1 id:prefs.returnkey", 0, 0, (const void *) returnKeyBehaviors },
+            { "padding device:1", 0, 0, NULL },
+            { "toggle device:2 id:prefs.hidetoolbarscroll", 0, 0, NULL },
+            { "heading id:heading.prefs.sizing", 0, 0, NULL },
+            { "input id:prefs.uiscale maxlen:8", 0, 0, NULL },
+            { NULL }
+        };
+        const iMenuItem colorItems[] = {
+            { "title id:heading.prefs.colors", 0, 0, NULL },
+            { "heading id:heading.prefs.uitheme", 0, 0, NULL },
+            { "toggle id:prefs.ostheme", 0, 0, NULL },
+            { "radio id:prefs.theme", 0, 0, (const void *) themeItems },
+            { "radio id:prefs.accent", 0, 0, (const void *) accentItems },
+            { "heading id:heading.prefs.pagecontent", 0, 0, NULL },
+            { "dropdown id:prefs.doctheme.dark", 0, 0, (const void *) docThemes[0] },
+            { "dropdown id:prefs.doctheme.light", 0, 0, (const void *) docThemes[1] },
+            { "radio id:prefs.saturation", 0, 0, (const void *) satItems },
+            { "padding", 0, 0, NULL },
+            { "dropdown id:prefs.imagestyle", 0, 0, (const void *) imgStyles },
+            { NULL }  
+        };
+        const iMenuItem fontItems[] = {
+            { "title id:heading.prefs.fonts", 0, 0, NULL },
+            { "dropdown id:prefs.headingfont", 0, 0, (const void *) constData_Array(makeFontItems_("headingfont")) },
+            { "dropdown id:prefs.font", 0, 0, (const void *) constData_Array(makeFontItems_("font")) },
+            { NULL }  
+        };
+        const iMenuItem items[] = { { "panel icon:0x2699 id:heading.prefs.general",
+                                      '1', 0,
+                                      (const void *) generalItems },
+                                    { "panel icon:0x1f4f1 id:heading.prefs.interface",
+                                      '2', 0,
+                                      (const void *) uiItems },
+                                    { "panel icon:0x1f3a8 id:heading.prefs.colors",
+                                      '3', 0,
+                                      (const void *) colorItems },
+                                    { "panel icon:0x1f5da id:heading.prefs.fonts",
+                                      '4', 0,
+                                      (const void *) fontItems },
+                                    { NULL } };
+        iWidget *dlg = makeSplitMultiPanel_Mobile(items);
+        setupSheetTransition_Mobile(dlg, iTrue);
+        return dlg;
+    }
     iWidget *dlg = makeSheet_Widget("prefs");
     addChildFlags_Widget(dlg,
                          iClob(new_LabelWidget(uiHeading_ColorEscape "${heading.prefs}", NULL)),
@@ -1666,22 +1823,7 @@ iWidget *makePreferences_Widget(void) {
         addChild_Widget(values, iClob(makePadding_Widget(bigGap)));
         /* UI languages. */ {
             iArray *uiLangs = collectNew_Array(sizeof(iMenuItem));
-            const iMenuItem langItems[] = {
-                { "${lang.de} - de", 0, 0, "uilang id:de" },
-                { "${lang.en} - en", 0, 0, "uilang id:en" },
-                { "${lang.es} - es", 0, 0, "uilang id:es" },
-                { "${lang.fi} - fi", 0, 0, "uilang id:fi" },
-                { "${lang.fr} - fr", 0, 0, "uilang id:fr" },
-                { "${lang.ia} - ia", 0, 0, "uilang id:ia" },
-                { "${lang.ie} - ie", 0, 0, "uilang id:ie" },
-                { "${lang.pl} - pl", 0, 0, "uilang id:pl" },
-                { "${lang.ru} - ru", 0, 0, "uilang id:ru" },
-                { "${lang.sr} - sr", 0, 0, "uilang id:sr" },
-                { "${lang.tok} - tok", 0, 0, "uilang id:tok" },
-                { "${lang.zh.hans} - zh", 0, 0, "uilang id:zh_Hans" },
-                { "${lang.zh.hant} - zh", 0, 0, "uilang id:zh_Hant" },
-            };
-            pushBackN_Array(uiLangs, langItems, iElemCount(langItems));
+            pushBackN_Array(uiLangs, langItems, iElemCount(langItems) - 1);
             /* TODO: Add an arrange flag for resizing parent to widest child. */
             size_t widestPos = findWidestItemLabel_(data_Array(uiLangs), size_Array(uiLangs));
             addChild_Widget(headings, iClob(makeHeading_Widget("${prefs.uilang}")));
@@ -1702,39 +1844,12 @@ iWidget *makePreferences_Widget(void) {
 #endif
         addChild_Widget(headings, iClob(makeHeading_Widget("${prefs.returnkey}")));
         /* Return key behaviors. */ {
-            const iMenuItem returnKeyBehaviors[] = {
-                { "${prefs.returnkey.linebreak} "
-                  uiTextAction_ColorEscape shift_Icon return_Icon restore_ColorEscape
-                  "    ${prefs.returnkey.accept} "
-                  uiTextAction_ColorEscape return_Icon,
-                  0,
-                  0,
-                  format_CStr("returnkey.set arg:%d", default_ReturnKeyBehavior) },
-                { "${prefs.returnkey.linebreak} "
-                  uiTextAction_ColorEscape return_Icon restore_ColorEscape
-                  "    ${prefs.returnkey.accept} "
-                  uiTextAction_ColorEscape shift_Icon return_Icon,
-                  0,
-                  0,
-                  format_CStr("returnkey.set arg:%d", acceptWithShift_ReturnKeyBehavior) },
-                { "${prefs.returnkey.linebreak} "
-                   uiTextAction_ColorEscape return_Icon restore_ColorEscape
-                   "    ${prefs.returnkey.accept} " uiTextAction_ColorEscape
-#if defined (iPlatformApple)
-                    "\u2318" return_Icon,
-#else
-                     "Ctrl" return_Icon,
-#endif
-                    0,
-                    0,
-                    format_CStr("returnkey.set arg:%d", acceptWithPrimaryMod_ReturnKeyBehavior) },
-            };
             iLabelWidget *returnKey = makeMenuButton_LabelWidget(
                 returnKeyBehaviors[findWidestItemLabel_(returnKeyBehaviors,
-                                                        iElemCount(returnKeyBehaviors))]
+                                                        iElemCount(returnKeyBehaviors) - 1)]
                     .label,
                 returnKeyBehaviors,
-                iElemCount(returnKeyBehaviors));
+                iElemCount(returnKeyBehaviors) - 1);
             setBackgroundColor_Widget(findChild_Widget(as_Widget(returnKey), "menu"),
                                       uiBackgroundMenu_ColorId);
             setId_Widget(addChildFlags_Widget(values, iClob(returnKey), alignLeft_WidgetFlag),
@@ -1804,20 +1919,13 @@ iWidget *makePreferences_Widget(void) {
         for (int i = 0; i < 2; ++i) {
             const iBool isDark = (i == 0);
             const char *mode = isDark ? "dark" : "light";
-            const iMenuItem themes[] = {
-                { "${prefs.doctheme.name.colorfuldark}", 0, 0, format_CStr("doctheme.%s.set arg:%d", mode, colorfulDark_GmDocumentTheme) },
-                { "${prefs.doctheme.name.colorfullight}", 0, 0, format_CStr("doctheme.%s.set arg:%d", mode, colorfulLight_GmDocumentTheme) },
-                { "${prefs.doctheme.name.black}", 0, 0, format_CStr("doctheme.%s.set arg:%d", mode, black_GmDocumentTheme) },
-                { "${prefs.doctheme.name.gray}", 0, 0, format_CStr("doctheme.%s.set arg:%d", mode, gray_GmDocumentTheme) },
-                { "${prefs.doctheme.name.white}", 0, 0, format_CStr("doctheme.%s.set arg:%d", mode, white_GmDocumentTheme) },
-                { "${prefs.doctheme.name.sepia}", 0, 0, format_CStr("doctheme.%s.set arg:%d", mode, sepia_GmDocumentTheme) },
-                { "${prefs.doctheme.name.highcontrast}", 0, 0, format_CStr("doctheme.%s.set arg:%d", mode, highContrast_GmDocumentTheme) },
-            };
             addChild_Widget(headings, iClob(makeHeading_Widget(isDark ? "${prefs.doctheme.dark}" : "${prefs.doctheme.light}")));
-            iLabelWidget *button =
-                makeMenuButton_LabelWidget(themes[1].label, themes, iElemCount(themes));
-//            setFrameColor_Widget(findChild_Widget(as_Widget(button), "menu"),
-//                                 uiBackgroundSelected_ColorId);
+            iLabelWidget *button = makeMenuButton_LabelWidget(
+                docThemes[i][findWidestItemLabel_(docThemes[i], max_GmDocumentTheme)].label,
+                docThemes[i],
+                max_GmDocumentTheme);
+            //            setFrameColor_Widget(findChild_Widget(as_Widget(button), "menu"),
+            //                                 uiBackgroundSelected_ColorId);
             setBackgroundColor_Widget(findChild_Widget(as_Widget(button), "menu"), uiBackgroundMenu_ColorId);
             setId_Widget(addChildFlags_Widget(values, iClob(button), alignLeft_WidgetFlag),
                          format_CStr("prefs.doctheme.%s", mode));
@@ -1833,17 +1941,10 @@ iWidget *makePreferences_Widget(void) {
         addChildFlags_Widget(values, iClob(sats), arrangeHorizontal_WidgetFlag | arrangeSize_WidgetFlag);
         /* Colorize images. */ {
             addChild_Widget(headings, iClob(makeHeading_Widget("${prefs.imagestyle}")));
-            const iMenuItem imgStyles[] = {
-                { "${prefs.imagestyle.original}",  0, 0, format_CStr("imagestyle.set arg:%d", original_ImageStyle) },
-                { "${prefs.imagestyle.grayscale}", 0, 0, format_CStr("imagestyle.set arg:%d", grayscale_ImageStyle) },
-                { "${prefs.imagestyle.bgfg}",      0, 0, format_CStr("imagestyle.set arg:%d", bgFg_ImageStyle) },
-                { "${prefs.imagestyle.text}",      0, 0, format_CStr("imagestyle.set arg:%d", textColorized_ImageStyle) },
-                { "${prefs.imagestyle.preformat}", 0, 0, format_CStr("imagestyle.set arg:%d", preformatColorized_ImageStyle) },   
-            };
             iLabelWidget *button = makeMenuButton_LabelWidget(
-                imgStyles[findWidestItemLabel_(imgStyles, iElemCount(imgStyles))].label,
+                imgStyles[findWidestItemLabel_(imgStyles, iElemCount(imgStyles) - 1)].label,
                 imgStyles,
-                iElemCount(imgStyles));
+                iElemCount(imgStyles) - 1);
             setBackgroundColor_Widget(findChild_Widget(as_Widget(button), "menu"),
                                       uiBackgroundMenu_ColorId);
             setId_Widget(addChildFlags_Widget(values, iClob(button), alignLeft_WidgetFlag),
diff --git a/src/ui/util.h b/src/ui/util.h
index 2423f834..87b72394 100644
--- a/src/ui/util.h
+++ b/src/ui/util.h
@@ -220,7 +220,10 @@ struct Impl_MenuItem {
     const char *label;
     int key;
     int kmods;
-    const char *command;
+    union {
+        const char *command;
+        const void *data;
+    };
 };
 
 iWidget *   makeMenu_Widget     (iWidget *parent, const iMenuItem *items, size_t n); /* returns no ref */
diff --git a/src/ui/widget.c b/src/ui/widget.c
index 4f567989..0d6787ce 100644
--- a/src/ui/widget.c
+++ b/src/ui/widget.c
@@ -1402,6 +1402,7 @@ iAny *hitChild_Widget(const iWidget *d, iInt2 coord) {
 }
 
 iAny *findChild_Widget(const iWidget *d, const char *id) {
+    if (!d) return NULL;
     if (cmp_String(id_Widget(d), id) == 0) {
         return iConstCast(iAny *, d);
     }
diff --git a/src/ui/window.c b/src/ui/window.c
index 3ac02495..096853cc 100644
--- a/src/ui/window.c
+++ b/src/ui/window.c
@@ -1136,6 +1136,9 @@ void setTitle_Window(iWindow *d, const iString *title) {
 }
 
 void setUiScale_Window(iWindow *d, float uiScale) {
+    if (uiScale <= 0.0f) {
+        uiScale = 1.0f;
+    }
     uiScale = iClamp(uiScale, 0.5f, 4.0f);
     if (d) {
         if (iAbs(d->uiScale - uiScale) > 0.0001f) {