Document outline; jumping to clicked heading

12 files changed, 316 insertions, 92 deletions

diff --git a/src/gmdocument.c b/src/gmdocument.c
index 76b5ef22..25427391 100644
--- a/src/gmdocument.c
+++ b/src/gmdocument.c
@@ -86,6 +86,7 @@ struct Impl_GmDocument {
     iArray layout; /* contents of source, laid out in document space */
     iPtrArray links;
     iString title; /* the first top-level title */
+    iArray headings;
     iPtrArray images; /* persistent across layouts, references links by ID */
     uint32_t themeSeed;
     iChar siteIcon;
@@ -98,9 +99,9 @@ enum iGmLineType {
     bullet_GmLineType,
     preformatted_GmLineType,
     quote_GmLineType,
-    header1_GmLineType,
-    header2_GmLineType,
-    header3_GmLineType,
+    heading1_GmLineType,
+    heading2_GmLineType,
+    heading3_GmLineType,
     link_GmLineType,
     max_GmLineType,
 };
@@ -116,13 +117,13 @@ static enum iGmLineType lineType_GmDocument_(const iGmDocument *d, const iRangec
         return link_GmLineType;
     }
     if (startsWith_Rangecc(line, "###")) {
-        return header3_GmLineType;
+        return heading3_GmLineType;
     }
     if (startsWith_Rangecc(line, "##")) {
-        return header2_GmLineType;
+        return heading2_GmLineType;
     }
     if (startsWith_Rangecc(line, "#")) {
-        return header1_GmLineType;
+        return heading1_GmLineType;
     }
     if (startsWith_Rangecc(line, "```")) {
         return preformatted_GmLineType;
@@ -260,9 +261,9 @@ static void doLayout_GmDocument_(iGmDocument *d) {
         paragraph_FontId, /* bullet */
         preformatted_FontId,
         quote_FontId,
-        header1_FontId,
-        header2_FontId,
-        header3_FontId,
+        heading1_FontId,
+        heading2_FontId,
+        heading3_FontId,
         regular_FontId,
     };
     static const int colors[max_GmLineType] = {
@@ -270,9 +271,9 @@ static void doLayout_GmDocument_(iGmDocument *d) {
         tmParagraph_ColorId,
         tmPreformatted_ColorId,
         tmQuote_ColorId,
-        tmHeader1_ColorId,
-        tmHeader2_ColorId,
-        tmHeader3_ColorId,
+        tmHeading1_ColorId,
+        tmHeading2_ColorId,
+        tmHeading3_ColorId,
         tmLinkText_ColorId,
     };
     static const int indents[max_GmLineType] = {
@@ -291,6 +292,7 @@ static void doLayout_GmDocument_(iGmDocument *d) {
     const float midRunSkip = 0.1f; /* extra space between wrapped text/quote lines */
     clear_Array(&d->layout);
     clearLinks_GmDocument_(d);
+    clear_Array(&d->headings);
     clear_String(&d->title);
     if (d->size.x <= 0 || isEmpty_String(&d->source)) {
         return;
@@ -345,6 +347,12 @@ static void doLayout_GmDocument_(iGmDocument *d) {
             }
             trimLine_Rangecc_(&line, type);
             run.font = fonts[type];
+            /* Remember headings for the document outline. */
+            if (type == heading1_GmLineType || type == heading2_GmLineType || type == heading3_GmLineType) {
+                pushBack_Array(
+                    &d->headings,
+                    &(iGmHeading){ .text = line, .level = type - heading1_GmLineType });
+            }
         }
         else {
             /* Preformatted line. */
@@ -363,7 +371,7 @@ static void doLayout_GmDocument_(iGmDocument *d) {
             addSiteBanner = iFalse;
             const iRangecc bannerText = urlHost_String(&d->url);
             if (!isEmpty_Range(&bannerText)) {
-                iGmRun banner    = { .flags = siteBanner_GmRunFlag };
+                iGmRun banner    = { .flags = decoration_GmRunFlag | siteBanner_GmRunFlag };
                 banner.bounds    = zero_Rect();
                 banner.visBounds = init_Rect(0, 0, d->size.x, lineHeight_Text(banner_FontId) * 2);
                 banner.font      = banner_FontId;
@@ -406,33 +414,37 @@ static void doLayout_GmDocument_(iGmDocument *d) {
             }
         }
         /* Save the document title. */
-        if (type == header1_GmLineType && isEmpty_String(&d->title)) {
+        if (type == heading1_GmLineType && isEmpty_String(&d->title)) {
             setRange_String(&d->title, line);
         }
         /* List bullet. */
         run.color = colors[type];
         if (type == bullet_GmLineType) {
-            run.visBounds.pos  = addX_I2(pos, indent * gap_Text);
-            run.visBounds.size = advance_Text(run.font, bullet);
-            run.visBounds.pos.x -= 4 * gap_Text - width_Rect(run.visBounds) / 2;
-            run.bounds = zero_Rect(); /* just visual */
-            run.text = range_CStr(bullet);
-            pushBack_Array(&d->layout, &run);
+            iGmRun bulRun = run;
+            bulRun.visBounds.pos  = addX_I2(pos, indent * gap_Text);
+            bulRun.visBounds.size = advance_Text(run.font, bullet);
+            bulRun.visBounds.pos.x -= 4 * gap_Text - width_Rect(run.visBounds) / 2;
+            bulRun.bounds = zero_Rect(); /* just visual */
+            bulRun.text = range_CStr(bullet);
+            bulRun.flags |= decoration_GmRunFlag;
+            pushBack_Array(&d->layout, &bulRun);
         }
         /* Link icon. */
         if (type == link_GmLineType) {
-            run.visBounds.pos  = pos;
-            run.visBounds.size = init_I2(indent * gap_Text, lineHeight_Text(run.font));
-            run.bounds         = zero_Rect(); /* just visual */
+            iGmRun icon = run;
+            icon.visBounds.pos  = pos;
+            icon.visBounds.size = init_I2(indent * gap_Text, lineHeight_Text(run.font));
+            icon.bounds         = zero_Rect(); /* just visual */
             const iGmLink *link = constAt_PtrArray(&d->links, run.linkId - 1);
-            run.text            = range_CStr(link->flags & file_GmLinkFlag
-                                      ? folder
-                                      : link->flags & remote_GmLinkFlag ? globe : arrow);
+            icon.text           = range_CStr(link->flags & file_GmLinkFlag
+                                       ? folder
+                                       : link->flags & remote_GmLinkFlag ? globe : arrow);
             if (link->flags & remote_GmLinkFlag) {
-                run.visBounds.pos.x -= gap_Text / 2;
+                icon.visBounds.pos.x -= gap_Text / 2;
             }
-            run.color = linkColor_GmDocument(d, run.linkId, icon_GmLinkPart);
-            pushBack_Array(&d->layout, &run);
+            icon.color = linkColor_GmDocument(d, run.linkId, icon_GmLinkPart);
+            icon.flags |= decoration_GmRunFlag;
+            pushBack_Array(&d->layout, &icon);
         }
         run.color = colors[type];
         if (d->format == plainText_GmDocumentFormat) {
@@ -446,7 +458,7 @@ static void doLayout_GmDocument_(iGmDocument *d) {
             bigCount = 15; /* max lines -- what if the whole document is one paragraph? */
             isFirstText = iFalse;
         }
-        else if (type != header1_GmLineType) {
+        else if (type != heading1_GmLineType) {
             isFirstText = iFalse;
         }
         iRangecc runLine = line;
@@ -531,6 +543,7 @@ void init_GmDocument(iGmDocument *d) {
     init_Array(&d->layout, sizeof(iGmRun));
     init_PtrArray(&d->links);
     init_String(&d->title);
+    init_Array(&d->headings, sizeof(iGmHeading));
     init_PtrArray(&d->images);
     setThemeSeed_GmDocument(d, NULL);
 }
@@ -539,6 +552,7 @@ void deinit_GmDocument(iGmDocument *d) {
     deinit_String(&d->title);
     clearLinks_GmDocument_(d);
     deinit_PtrArray(&d->links);
+    deinit_Array(&d->headings);
     deinit_Array(&d->layout);
     deinit_String(&d->localHost);
     deinit_String(&d->url);
@@ -553,6 +567,7 @@ void reset_GmDocument(iGmDocument *d) {
     clear_PtrArray(&d->images);
     clearLinks_GmDocument_(d);
     clear_Array(&d->layout);
+    clear_Array(&d->headings);
     clear_String(&d->url);
     clear_String(&d->localHost);
     d->themeSeed = 0;
@@ -576,9 +591,9 @@ void setThemeSeed_GmDocument(iGmDocument *d, const iBlock *seed) {
         setHsl_Color(tmFirstParagraph_ColorId, addSatLum_HSLColor(base, 0, 0.75f));
         set_Color(tmQuote_ColorId, get_Color(cyan_ColorId));
         set_Color(tmPreformatted_ColorId, get_Color(cyan_ColorId));
-        set_Color(tmHeader1_ColorId, get_Color(white_ColorId));
-        setHsl_Color(tmHeader2_ColorId, addSatLum_HSLColor(base, 0, 0.7f));
-        setHsl_Color(tmHeader3_ColorId, addSatLum_HSLColor(base, 0, 0.6f));
+        set_Color(tmHeading1_ColorId, get_Color(white_ColorId));
+        setHsl_Color(tmHeading2_ColorId, addSatLum_HSLColor(base, 0, 0.7f));
+        setHsl_Color(tmHeading3_ColorId, addSatLum_HSLColor(base, 0, 0.6f));
         set_Color(tmBannerBackground_ColorId, get_Color(black_ColorId));
         set_Color(tmBannerTitle_ColorId, get_Color(white_ColorId));
         set_Color(tmBannerIcon_ColorId, get_Color(orange_ColorId));
@@ -652,15 +667,15 @@ void setThemeSeed_GmDocument(iGmDocument *d, const iBlock *seed) {
             const float altHue2  = hues[altHues[primIndex].index[altIndex[1]]];
             iHSLColor   altBase  = { altHue, base.sat, base.lum, 1 };
             const float titleLum = 0.2f * ((d->themeSeed >> 17) & 0x7) / 7.0f;
-            setHsl_Color(tmHeader1_ColorId, setLum_HSLColor(altBase, titleLum + 0.80f));
-            setHsl_Color(tmHeader2_ColorId, setLum_HSLColor(altBase, titleLum + 0.70f));
-            setHsl_Color(tmHeader3_ColorId, setLum_HSLColor(altBase, titleLum + 0.60f));
+            setHsl_Color(tmHeading1_ColorId, setLum_HSLColor(altBase, titleLum + 0.80f));
+            setHsl_Color(tmHeading2_ColorId, setLum_HSLColor(altBase, titleLum + 0.70f));
+            setHsl_Color(tmHeading3_ColorId, setLum_HSLColor(altBase, titleLum + 0.60f));
 
             setHsl_Color(tmParagraph_ColorId, addSatLum_HSLColor(base, 0.1f, 0.6f));
             setHsl_Color(tmFirstParagraph_ColorId, addSatLum_HSLColor(base, 0.2f, 0.8f));
             setHsl_Color(tmPreformatted_ColorId, (iHSLColor){ altHue2, 1.0f, 0.75f, 1.0f });
             set_Color(tmQuote_ColorId, get_Color(tmPreformatted_ColorId));
-            set_Color(tmInlineContentMetadata_ColorId, get_Color(tmHeader3_ColorId));
+            set_Color(tmInlineContentMetadata_ColorId, get_Color(tmHeading3_ColorId));
 
             /* Adjust colors based on light/dark mode. */
             for (int i = tmFirst_ColorId; i < max_ColorId; i++) {
@@ -675,7 +690,7 @@ void setThemeSeed_GmDocument(iGmDocument *d, const iBlock *seed) {
                         color.sat = (color.sat + 1) / 2;
                         color.lum += 0.06f;
                     }
-                    else if (i == tmHeader3_ColorId) {
+                    else if (i == tmHeading3_ColorId) {
                         color.lum *= 0.75f;
                     }
                     else if (isLink_ColorId(i)) {
@@ -888,6 +903,10 @@ iBool hasSiteBanner_GmDocument(const iGmDocument *d) {
     return (first->flags & siteBanner_GmRunFlag) != 0;
 }
 
+const iArray *headings_GmDocument(const iGmDocument *d) {
+    return &d->headings;
+}
+
 iRangecc findText_GmDocument(const iGmDocument *d, const iString *text, const char *start) {
     const char * src      = constBegin_String(&d->source);
     const size_t startPos = (start ? start - src : 0);
@@ -934,6 +953,9 @@ const char *findLoc_GmDocument(const iGmDocument *d, iInt2 pos) {
 const iGmRun *findRunAtLoc_GmDocument(const iGmDocument *d, const char *textCStr) {
     iConstForEach(Array, i, &d->layout) {
         const iGmRun *run = i.value;
+        if (run->flags & decoration_GmRunFlag) {
+            continue;
+        }
         if (contains_Range(&run->text, textCStr) || run->text.start > textCStr /* went past */) {
             return run;
         }
diff --git a/src/gmdocument.h b/src/gmdocument.h
index 0c6dd998..fd5882bf 100644
--- a/src/gmdocument.h
+++ b/src/gmdocument.h
@@ -1,13 +1,16 @@
 #pragma once
 
 #include "gmutil.h"
+
+#include <the_Foundation/array.h>
 #include <the_Foundation/object.h>
 #include <the_Foundation/rect.h>
 #include <the_Foundation/string.h>
 #include <the_Foundation/time.h>
-
 #include <SDL_render.h>
 
+iDeclareType(GmImageInfo)
+iDeclareType(GmHeading)
 iDeclareType(GmRun)
 
 typedef uint16_t iGmLinkId;
@@ -27,18 +30,22 @@ enum iGmLinkFlags {
     visited_GmLinkFlag            = iBit(14), /* in the history */
 };
 
-iDeclareType(GmImageInfo)
-
 struct Impl_GmImageInfo {
     iInt2 size;
     size_t numBytes;
     const char *mime;
 };
 
+struct Impl_GmHeading {
+    iRangecc text;
+    int level; /* 0, 1, 2 */
+};
+
 enum iGmRunFlags {
-    startOfLine_GmRunFlag = iBit(1),
-    endOfLine_GmRunFlag   = iBit(2),
-    siteBanner_GmRunFlag  = iBit(3), /* area reserved for the site banner */
+    decoration_GmRunFlag  = iBit(1), /* not part of the source */
+    startOfLine_GmRunFlag = iBit(2),
+    endOfLine_GmRunFlag   = iBit(3),
+    siteBanner_GmRunFlag  = iBit(4), /* area reserved for the site banner */
 };
 
 struct Impl_GmRun {
@@ -74,9 +81,11 @@ void    reset_GmDocument        (iGmDocument *); /* free images */
 
 typedef void (*iGmDocumentRenderFunc)(void *, const iGmRun *);
 
-void    render_GmDocument       (const iGmDocument *, iRangei visRangeY, iGmDocumentRenderFunc render, void *);
-iInt2   size_GmDocument         (const iGmDocument *);
-iBool   hasSiteBanner_GmDocument(const iGmDocument *);
+void            render_GmDocument           (const iGmDocument *, iRangei visRangeY,
+                                             iGmDocumentRenderFunc render, void *);
+iInt2           size_GmDocument             (const iGmDocument *);
+iBool           hasSiteBanner_GmDocument    (const iGmDocument *);
+const iArray *  headings_GmDocument         (const iGmDocument *);
 
 iRangecc        findText_GmDocument         (const iGmDocument *, const iString *text, const char *start);
 iRangecc        findTextBefore_GmDocument   (const iGmDocument *, const iString *text, const char *before);
diff --git a/src/ui/color.h b/src/ui/color.h
index 8b5ef306..6444ad03 100644
--- a/src/ui/color.h
+++ b/src/ui/color.h
@@ -27,9 +27,9 @@ enum iColorId {
     tmFirstParagraph_ColorId,
     tmQuote_ColorId,
     tmPreformatted_ColorId,
-    tmHeader1_ColorId,
-    tmHeader2_ColorId,
-    tmHeader3_ColorId,
+    tmHeading1_ColorId,
+    tmHeading2_ColorId,
+    tmHeading3_ColorId,
     tmBannerBackground_ColorId,
     tmBannerTitle_ColorId,
     tmBannerIcon_ColorId,
diff --git a/src/ui/documentwidget.c b/src/ui/documentwidget.c
index b088fa74..de2abf0d 100644
--- a/src/ui/documentwidget.c
+++ b/src/ui/documentwidget.c
@@ -513,6 +513,10 @@ const iString *url_DocumentWidget(const iDocumentWidget *d) {
     return d->url;
 }
 
+const iGmDocument *document_DocumentWidget(const iDocumentWidget *d) {
+    return d->doc;
+}
+
 void setUrlFromCache_DocumentWidget(iDocumentWidget *d, const iString *url, iBool isFromCache) {
     if (cmpStringSc_String(d->url, url, &iCaseInsensitive)) {
         set_String(d->url, url);
@@ -583,8 +587,9 @@ static void scroll_DocumentWidget_(iDocumentWidget *d, int offset) {
     refresh_Widget(as_Widget(d));
 }
 
-static void scrollTo_DocumentWidget_(iDocumentWidget *d, int documentY) {
-    d->scrollY = documentY - documentBounds_DocumentWidget_(d).size.y / 2;
+static void scrollTo_DocumentWidget_(iDocumentWidget *d, int documentY, iBool centered) {
+    d->scrollY = documentY - (centered ? documentBounds_DocumentWidget_(d).size.y / 2 :
+                                       lineHeight_Text(paragraph_FontId));
     scroll_DocumentWidget_(d, 0); /* clamp it */
 }
 
@@ -781,7 +786,7 @@ static iBool handleCommand_DocumentWidget_(iDocumentWidget *d, const char *cmd)
         if (midLoc) {
             mid = findRunAtLoc_GmDocument(d->doc, midLoc);
             if (mid) {
-                scrollTo_DocumentWidget_(d, mid_Rect(mid->bounds).y);
+                scrollTo_DocumentWidget_(d, mid_Rect(mid->bounds).y, iTrue);
             }
         }
         refresh_Widget(w);
@@ -923,6 +928,14 @@ static iBool handleCommand_DocumentWidget_(iDocumentWidget *d, const char *cmd)
                                arg_Command(cmd) * height_Rect(documentBounds_DocumentWidget_(d)));
         return iTrue;
     }
+    else if (equal_Command(cmd, "document.goto") && document_App() == d) {
+        const char *loc = pointerLabel_Command(cmd, "loc");
+        const iGmRun *run = findRunAtLoc_GmDocument(d->doc, loc);
+        if (run) {
+            scrollTo_DocumentWidget_(d, run->visBounds.pos.y, iFalse);
+        }
+        return iTrue;
+    }
     else if ((equal_Command(cmd, "find.next") || equal_Command(cmd, "find.prev")) &&
              document_App() == d) {
         const int dir = equal_Command(cmd, "find.next") ? +1 : -1;
@@ -943,7 +956,7 @@ static iBool handleCommand_DocumentWidget_(iDocumentWidget *d, const char *cmd)
             if (d->foundMark.start) {
                 const iGmRun *found;
                 if ((found = findRunAtLoc_GmDocument(d->doc, d->foundMark.start)) != NULL) {
-                    scrollTo_DocumentWidget_(d, mid_Rect(found->bounds).y);
+                    scrollTo_DocumentWidget_(d, mid_Rect(found->bounds).y, iTrue);
                 }
             }
         }
@@ -1353,7 +1366,7 @@ static void draw_DocumentWidget_(const iDocumentWidget *d) {
     fillRect_Paint(&ctx.paint, bounds, tmBackground_ColorId);
     setClip_Paint(&ctx.paint, bounds);
     render_GmDocument(d->doc, visibleRange_DocumentWidget_(d), drawRun_DrawContext_, &ctx);
-    clearClip_Paint(&ctx.paint);
+    unsetClip_Paint(&ctx.paint);
     draw_Widget(w);
 }
 
diff --git a/src/ui/documentwidget.h b/src/ui/documentwidget.h
index 85b9a710..1e63034b 100644
--- a/src/ui/documentwidget.h
+++ b/src/ui/documentwidget.h
@@ -2,16 +2,18 @@
 
 #include "widget.h"
 
+iDeclareType(GmDocument)
 iDeclareType(History)
 
 iDeclareWidgetClass(DocumentWidget)
 iDeclareObjectConstruction(DocumentWidget)
 
-iDocumentWidget *duplicate_DocumentWidget       (const iDocumentWidget *);
-iHistory *      history_DocumentWidget          (iDocumentWidget *);
+iDocumentWidget *   duplicate_DocumentWidget        (const iDocumentWidget *);
+iHistory *          history_DocumentWidget          (iDocumentWidget *);
 
-const iString * url_DocumentWidget              (const iDocumentWidget *);
-iBool           isRequestOngoing_DocumentWidget (const iDocumentWidget *);
+const iString *     url_DocumentWidget              (const iDocumentWidget *);
+iBool               isRequestOngoing_DocumentWidget (const iDocumentWidget *);
+const iGmDocument * document_DocumentWidget         (const iDocumentWidget *);
 
 void    setUrl_DocumentWidget           (iDocumentWidget *, const iString *url);
 void    setUrlFromCache_DocumentWidget  (iDocumentWidget *d, const iString *url, iBool isFromCache);
diff --git a/src/ui/inputwidget.c b/src/ui/inputwidget.c
index bfb71913..305b8c9b 100644
--- a/src/ui/inputwidget.c
+++ b/src/ui/inputwidget.c
@@ -335,7 +335,7 @@ static void draw_InputWidget_(const iInputWidget *d) {
               white_ColorId,
               "%s",
               cstr_String(&text));
-    clearClip_Paint(&p);
+    unsetClip_Paint(&p);
     /* Cursor blinking. */
     if (isFocused && (time & 256)) {
         const iInt2 prefixSize = advanceN_Text(d->font, cstr_String(&text), d->cursor);
diff --git a/src/ui/labelwidget.c b/src/ui/labelwidget.c
index 0ec1c5f8..0c9269d1 100644
--- a/src/ui/labelwidget.c
+++ b/src/ui/labelwidget.c
@@ -218,7 +218,7 @@ static void draw_LabelWidget_(const iLabelWidget *d) {
     else {
         drawCentered_Text(d->font, bounds, d->alignVisual, fg, cstr_String(&d->label));
     }
-    clearClip_Paint(&p);
+    unsetClip_Paint(&p);
 }
 
 void updateSize_LabelWidget(iLabelWidget *d) {
diff --git a/src/ui/paint.c b/src/ui/paint.c
index 0a2e6cd3..85e75f15 100644
--- a/src/ui/paint.c
+++ b/src/ui/paint.c
@@ -18,7 +18,7 @@ void setClip_Paint(iPaint *d, iRect rect) {
     SDL_RenderSetClipRect(renderer_Paint_(d), (const SDL_Rect *) &rect);
 }
 
-void clearClip_Paint(iPaint *d) {
+void unsetClip_Paint(iPaint *d) {
     const SDL_Rect winRect = { 0, 0, d->dst->root->rect.size.x, d->dst->root->rect.size.y };
     SDL_RenderSetClipRect(renderer_Paint_(d), &winRect);
 }
diff --git a/src/ui/paint.h b/src/ui/paint.h
index 9535b142..90c5f504 100644
--- a/src/ui/paint.h
+++ b/src/ui/paint.h
@@ -14,7 +14,7 @@ struct Impl_Paint {
 void    init_Paint      (iPaint *);
 
 void    setClip_Paint   (iPaint *, iRect rect);
-void    clearClip_Paint (iPaint *);
+void    unsetClip_Paint (iPaint *);
 
 void    drawRect_Paint          (const iPaint *, iRect rect, int color);
 void    drawRectThickness_Paint (const iPaint *, iRect rect, int thickness, int color);
diff --git a/src/ui/sidebarwidget.c b/src/ui/sidebarwidget.c
index 8f1273bf..46b36434 100644
--- a/src/ui/sidebarwidget.c
+++ b/src/ui/sidebarwidget.c
@@ -1,57 +1,234 @@
 #include "sidebarwidget.h"
 #include "labelwidget.h"
 #include "scrollwidget.h"
+#include "documentwidget.h"
 #include "paint.h"
 #include "util.h"
+#include "command.h"
+#include "../gmdocument.h"
+#include "app.h"
+
+#include <the_Foundation/array.h>
+
+iDeclareType(SidebarItem)
+
+struct Impl_SidebarItem {
+    int     indent;
+    iChar   icon;
+    iString label;
+    iString meta;
+    iString url;
+    size_t  index;
+};
+
+void init_SidebarItem(iSidebarItem *d) {
+    d->indent = 0;
+    d->icon   = 0;
+    d->index  = 0;
+    init_String(&d->label);
+    init_String(&d->meta);
+    init_String(&d->url);
+}
+
+void deinit_SidebarItem(iSidebarItem *d) {
+    deinit_String(&d->url);
+    deinit_String(&d->meta);
+    deinit_String(&d->label);
+}
+
+iDefineTypeConstruction(SidebarItem)
+
+/*----------------------------------------------------------------------------------------------*/
 
 struct Impl_SidebarWidget {
     iWidget widget;
     enum iSidebarMode mode;
     iScrollWidget *scroll;
+    int scrollY;
+    iLabelWidget *modeButtons[max_SidebarMode];
+    int itemHeight;
+    iArray items;
+    size_t hoverItem;
+    iClick click;
 };
 
 iDefineObjectConstruction(SidebarWidget)
 
+static void clearItems_SidebarWidget_(iSidebarWidget *d) {
+    iForEach(Array, i, &d->items) {
+        deinit_SidebarItem(i.value);
+    }
+    clear_Array(&d->items);
+}
+
+static void updateItems_SidebarWidget_(iSidebarWidget *d) {
+    clearItems_SidebarWidget_(d);
+    switch (d->mode) {
+        case documentOutline_SidebarMode: {
+            const iGmDocument *doc = document_DocumentWidget(document_App());
+            iConstForEach(Array, i, headings_GmDocument(doc)) {
+                const iGmHeading *head = i.value;
+                iSidebarItem item;
+                init_SidebarItem(&item);
+                item.index = index_ArrayConstIterator(&i);
+                setRange_String(&item.label, head->text);
+                item.indent = head->level * 4 * gap_UI;
+                pushBack_Array(&d->items, &item);
+            }
+            break;
+        }
+        case bookmarks_SidebarMode:
+            break;
+        case history_SidebarMode:
+            break;
+        default:
+            break;
+    }
+    refresh_Widget(as_Widget(d));
+}
+
+void setMode_SidebarWidget(iSidebarWidget *d, enum iSidebarMode mode) {
+    if (d->mode == mode) return;
+    d->mode = mode;
+    for (enum iSidebarMode i = 0; i < max_SidebarMode; i++) {
+        setFlags_Widget(as_Widget(d->modeButtons[i]), selected_WidgetFlag, i == d->mode);
+    }
+    const float heights[max_SidebarMode] = { 1.2f, 2, 3, 3 };
+    d->itemHeight = heights[mode] * lineHeight_Text(default_FontId);
+}
+
 void init_SidebarWidget(iSidebarWidget *d) {
     iWidget *w = as_Widget(d);
     init_Widget(w);
-    setFlags_Widget(w, resizeChildren_WidgetFlag, iTrue);
-    d->mode = documentOutline_SidebarMode;
-    addChild_Widget(w, iClob(d->scroll = new_ScrollWidget()));
-    w->rect.size.x = 80 * gap_UI;
+    setBackgroundColor_Widget(w, none_ColorId);
+    setFlags_Widget(w, hover_WidgetFlag | arrangeHorizontal_WidgetFlag, iTrue);
+    d->scrollY = 0;
+    d->mode = -1;
+    w->rect.size.x = 100 * gap_UI;
+    init_Array(&d->items, sizeof(iSidebarItem));
+    d->hoverItem = iInvalidPos;
+    init_Click(&d->click, d, SDL_BUTTON_LEFT);
     setFlags_Widget(w, fixedWidth_WidgetFlag, iTrue);
-    iWidget *modeButtons = makeHDiv_Widget();
-    setFlags_Widget(modeButtons, arrangeWidth_WidgetFlag | arrangeHeight_WidgetFlag, iTrue);
-    addChild_Widget(w, iClob(modeButtons));
-    addChildFlags_Widget(
-        modeButtons,
-        iClob(new_LabelWidget(
-            "\U0001f5b9 Outline", 0, 0, format_CStr("sidebar.mode arg:%d", documentOutline_SidebarMode))), frameless_WidgetFlag);
-    addChildFlags_Widget(
-        modeButtons,
-        iClob(new_LabelWidget(
-            "\U0001f588 Bookmarks", 0, 0, format_CStr("sidebar.mode arg:%d", bookmarks_SidebarMode))), frameless_WidgetFlag);
-    addChildFlags_Widget(
-        modeButtons,
-        iClob(new_LabelWidget(
-            "\U0001f553 History", 0, 0, format_CStr("sidebar.mode arg:%d", history_SidebarMode))), frameless_WidgetFlag);
-    addChildFlags_Widget(
-        modeButtons,
-        iClob(new_LabelWidget(
-            "\U0001f464 Identities", 0, 0, format_CStr("sidebar.mode arg:%d", identities_SidebarMode))), frameless_WidgetFlag);
+    const char *buttonLabels[max_SidebarMode] = {
+        "\U0001f5b9 Outline",
+        "\U0001f588 Bookmarks",
+        "\U0001f553 History",
+        "\U0001f464 Identities",
+    };
+    for (int i = 0; i < max_SidebarMode; i++) {
+        d->modeButtons[i] = addChildFlags_Widget(
+            w,
+            iClob(new_LabelWidget(buttonLabels[i], 0, 0, format_CStr("sidebar.mode arg:%d", i))),
+            frameless_WidgetFlag);
+    }
+    addChild_Widget(w, iClob(d->scroll = new_ScrollWidget()));
+    setThumb_ScrollWidget(d->scroll, 0, 0);
+    setMode_SidebarWidget(d, documentOutline_SidebarMode);
 }
 
 void deinit_SidebarWidget(iSidebarWidget *d) {
-    iUnused(d);
+    clearItems_SidebarWidget_(d);
+    deinit_Array(&d->items);
+}
+
+static iRect contentBounds_SidebarWidget_(const iSidebarWidget *d) {
+    iRect bounds = bounds_Widget(constAs_Widget(d));
+    adjustEdges_Rect(&bounds, as_Widget(d->modeButtons[0])->rect.size.y + gap_UI, 0, 0, 0);
+    return bounds;
+}
+
+static size_t itemIndex_SidebarWidget_(const iSidebarWidget *d, iInt2 pos) {
+    const iRect bounds = contentBounds_SidebarWidget_(d);
+    pos.y -= top_Rect(bounds);
+    if (pos.y < 0) return iInvalidPos;
+    size_t index = pos.y / d->itemHeight;
+    if (index >= size_Array(&d->items)) return iInvalidPos;
+    return index;
+}
+
+static void itemClicked_SidebarWidget_(iSidebarWidget *d, size_t index) {
+    const iSidebarItem *item = constAt_Array(&d->items, index);
+    switch (d->mode) {
+        case documentOutline_SidebarMode: {
+            const iGmDocument *doc = document_DocumentWidget(document_App());
+            const iGmHeading *head = constAt_Array(headings_GmDocument(doc), item->index);
+            postCommandf_App("document.goto loc:%p", head->text.start);
+            break;
+        }
+    }
 }
 
 static iBool processEvent_SidebarWidget_(iSidebarWidget *d, const SDL_Event *ev) {
     iWidget *w = as_Widget(d);
+    /* Handle commands. */
+    if (ev->type == SDL_USEREVENT && ev->user.code == command_UserEventCode) {
+        const char *cmd = command_UserEvent(ev);
+        if (isCommand_Widget(w, ev, "sidebar.mode")) {
+            setMode_SidebarWidget(d, arg_Command(cmd));
+            updateItems_SidebarWidget_(d);
+            return iTrue;
+        }
+        else if (equal_Command(cmd, "tabs.changed") || equal_Command(cmd, "document.changed")) {
+            updateItems_SidebarWidget_(d);
+        }
+    }
+    if (ev->type == SDL_MOUSEMOTION) {
+        const iInt2 mouse = init_I2(ev->motion.x, ev->motion.y);
+        size_t hover = iInvalidPos;
+        if (contains_Widget(w, mouse)) {
+            hover = itemIndex_SidebarWidget_(d, mouse);
+
+        }
+        if (hover != d->hoverItem) {
+            d->hoverItem = hover;
+            refresh_Widget(w);
+        }
+    }
+    switch (processEvent_Click(&d->click, ev)) {
+        case started_ClickResult:
+            refresh_Widget(w);
+            break;
+        case finished_ClickResult:
+            if (contains_Rect(contentBounds_SidebarWidget_(d), pos_Click(&d->click)) &&
+                d->hoverItem != iInvalidSize) {
+                //printf("click:%zu\n", d->hoverItem); fflush(stdout);
+                itemClicked_SidebarWidget_(d, d->hoverItem);
+            }
+            refresh_Widget(w);
+            break;
+        default:
+            break;
+    }
     return processEvent_Widget(w, ev);
 }
 
 static void draw_SidebarWidget_(const iSidebarWidget *d) {
-    const iWidget *w = constAs_Widget(d);
+    const iWidget *w      = constAs_Widget(d);
+    const iRect    bounds = contentBounds_SidebarWidget_(d);
+    const iBool    isPressing = d->click.isActive && contains_Rect(bounds, pos_Click(&d->click));
+    iPaint p;
+    init_Paint(&p);
+    /* Draw the items. */ {
+        iInt2 pos = topLeft_Rect(bounds);
+        const int font = default_FontId;
+        iConstForEach(Array, i, &d->items) {
+            const iSidebarItem *item = i.value;
+            const iRect itemRect = { pos, init_I2(width_Rect(bounds), d->itemHeight) };
+            const iBool isHover = (d->hoverItem == index_ArrayConstIterator(&i));
+            if (isHover) {
+                fillRect_Paint(&p, itemRect, isPressing ? orange_ColorId : teal_ColorId);
+            }
+            setClip_Paint(&p, itemRect);
+            const int fg = isHover ? (isPressing ? black_ColorId : white_ColorId) : gray75_ColorId;
+            if (d->mode == documentOutline_SidebarMode) {
+                drawRange_Text(font, init_I2(pos.x + 3 * gap_UI + item->indent,
+                                        mid_Rect(itemRect).y - lineHeight_Text(font) / 2),
+                               fg, range_String(&item->label));
+            }
+            unsetClip_Paint(&p);
+            pos.y += d->itemHeight;
+        }
+    }
     draw_Widget(w);
 }
 
diff --git a/src/ui/sidebarwidget.h b/src/ui/sidebarwidget.h
index 3fd956a4..80f22fca 100644
--- a/src/ui/sidebarwidget.h
+++ b/src/ui/sidebarwidget.h
@@ -3,10 +3,11 @@
 #include "widget.h"
 
 enum iSidebarMode {
+    documentOutline_SidebarMode,
     bookmarks_SidebarMode,
     history_SidebarMode,
-    documentOutline_SidebarMode,
     identities_SidebarMode,
+    max_SidebarMode
 };
 
 iDeclareWidgetClass(SidebarWidget)
diff --git a/src/ui/text.h b/src/ui/text.h
index 713ee1e7..864173e0 100644
--- a/src/ui/text.h
+++ b/src/ui/text.h
@@ -44,9 +44,9 @@ enum iFontId {
     preformatted_FontId      = monospace_FontId,
     preformattedSmall_FontId = monospaceSmall_FontId,
     quote_FontId             = italic_FontId,
-    header1_FontId           = hugeBold_FontId,
-    header2_FontId           = largeBold_FontId,
-    header3_FontId           = medium_FontId,
+    heading1_FontId          = hugeBold_FontId,
+    heading2_FontId          = largeBold_FontId,
+    heading3_FontId          = medium_FontId,
     banner_FontId            = largeLight_FontId,
 };