From 40f47d7612359e040b07c036332c826f7088c3d8 Mon Sep 17 00:00:00 2001
From: David Barrett <dbarrett@expensify.com>
Date: Sat, 16 Nov 2024 20:16:29 -0800
Subject: [PATCH 01/13] Updating mobile layout

---
 help/_includes/search.html |  8 ++--
 help/_layouts/default.html | 80 +++++++++++++++++++++++++++++++++++---
 2 files changed, 78 insertions(+), 10 deletions(-)
diff --git a/help/_includes/search.html b/help/_includes/search.html
index 7b024ba8ec33..91abb56ad60b 100644
--- a/help/_includes/search.html
+++ b/help/_includes/search.html
@@ -27,14 +27,14 @@
 <style>
   /* Style for search input box (replaces button) */
   #search-input-box {
-    padding: 8px 16px;
-    font-size: 16px;
+    display: flex;
+    gap: 15px;
+    padding-right: 20px;
     cursor: pointer;
     border: 1px solid #eaecef;
     border-radius: 6px;
-    width: 100%;
     box-sizing: border-box;
-    margin-bottom: 20px;
+    font-size: 16px;
   }
 
   /* Modal background */
diff --git a/help/_layouts/default.html b/help/_layouts/default.html
index c3981f17296f..22dd1c9278a8 100644
--- a/help/_layouts/default.html
+++ b/help/_layouts/default.html
@@ -24,6 +24,7 @@
             position: fixed;
             top: 0;
             width: 100%;
+            z-index: 1000;
         }
 
         .logo {
@@ -47,7 +48,7 @@
             text-decoration: none;
             color: #0366d6;
             font-weight: 500;
-            padding: 10px 15px;
+            padding: 0px 15px;
             border-radius: 6px;
             transition: background-color 0.3s;
         }
@@ -66,7 +67,7 @@
         .toc-sidebar {
             width: 250px;
             position: fixed;
-            top: 80px;
+            top: 60px;
             bottom: 0;
             left: 0;
             background-color: #fff;
@@ -74,6 +75,13 @@
             overflow-y: auto;
             border-right: 1px solid #eaecef;
             box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+            transform: translateY(0);
+            transition: transform 0.3s ease-in-out;
+            z-index: 999;
+        }
+
+        .toc-sidebar.open {
+            transform: translateY(0);
         }
 
         .toc-link::before {
@@ -220,12 +228,67 @@
             max-width: 300px; /* Set a max-width for each column */
             padding: 0 20px;  /* Add padding for some space between the columns */
         }
+
+        /* Mobile Styles */
+        .hamburger {
+            display: none;
+            cursor: pointer;
+            flex-direction: column;
+            justify-content: space-between;
+            width: 24px;
+            height: 18px;
+        }
+
+        .bar {
+            height: 3px;
+            width: 100%;
+            background-color: #0366d6;
+            border-radius: 10px;
+        }
+
+        @media (max-width: 768px) {
+            .nav-links {
+                display: none;
+            }
+
+            .header {
+                justify-content: flex-start;
+            }
+
+            .hamburger {
+                display: flex;
+                margin-right: 20px;
+            }
+
+            .toc-sidebar {
+                transform: translateY(-100%);
+                width: 100%;
+            }
+
+            main {
+                margin-left: 0;
+                padding: 40px;
+                margin-top: 20px;
+                max-width: 100%;
+            }
+
+            footer {
+                margin-left: 0;
+                padding: 40px 20px;
+                max-width: 100%;
+            }
+        }
     </style>
 </head>
 <body>
 
     <!-- Header -->
     <header class="header">
+        <div class="hamburger" id="hamburger">
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+        </div>
         <div class="logo">
             <a href="/">Expensify</a>
         </div>
@@ -237,11 +300,11 @@
             <a href="/invoice" class="{% if page.title == 'Expensify Invoice' %}active{% endif %}">Invoice</a>
             <a href="/billpay" class="{% if page.title == 'Expensify Billpay' %}active{% endif %}">Billpay</a>
         </nav>
+        {% include search.html %}
     </header>
 
     <!-- TOC Sidebar -->
-    <nav class="toc-sidebar">
-        {% include search.html %}
+    <nav class="toc-sidebar open" id="toc-sidebar">
         <div class="js-toc"></div>
     </nav>
 
@@ -357,7 +420,7 @@ <h3>Get Started</h3>
           tocSelector: '.js-toc',
           contentSelector: '.js-toc-content',
           headingSelector: 'h1, h2, h3, h4, h5, h6',
-          collapseDepth: 3,
+          collapseDepth: 4,
           orderedList: false,
           scrollSmooth: true,
           scrollToActive: true,
@@ -395,8 +458,13 @@ <h3>Get Started</h3>
         }
 
         window.addEventListener('load', adjustAnchorOnLoad);
+
+        // Toggle sidebar on hamburger click
+        document.getElementById('hamburger').addEventListener('click', function() {
+            var sidebar = document.getElementById('toc-sidebar');
+            sidebar.classList.toggle('open');
+        });
     </script>
 
 </body>
 </html>
-

From 4669708dc02aca283a61214208e7e8a58d2ea154 Mon Sep 17 00:00:00 2001
From: David Barrett <dbarrett@expensify.com>
Date: Sat, 16 Nov 2024 20:34:52 -0800
Subject: [PATCH 02/13] More moblie tweaks

---
 help/_includes/search.html |  2 +-
 help/_layouts/default.html | 11 +++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/help/_includes/search.html b/help/_includes/search.html
index 91abb56ad60b..aa98c06b1259 100644
--- a/help/_includes/search.html
+++ b/help/_includes/search.html
@@ -29,7 +29,7 @@
   #search-input-box {
     display: flex;
     gap: 15px;
-    padding-right: 20px;
+    padding: 0px 15px;
     cursor: pointer;
     border: 1px solid #eaecef;
     border-radius: 6px;
diff --git a/help/_layouts/default.html b/help/_layouts/default.html
index 22dd1c9278a8..d531b94f1f9f 100644
--- a/help/_layouts/default.html
+++ b/help/_layouts/default.html
@@ -247,7 +247,7 @@
         }
 
         @media (max-width: 768px) {
-            .nav-links {
+            .nav-links a {
                 display: none;
             }
 
@@ -273,9 +273,7 @@
             }
 
             footer {
-                margin-left: 0;
-                padding: 40px 20px;
-                max-width: 100%;
+                display: none;
             }
         }
     </style>
@@ -299,12 +297,12 @@
             <a href="/chat" class="{% if page.title == 'Expensify Chat' %}active{% endif %}">Chat</a>
             <a href="/invoice" class="{% if page.title == 'Expensify Invoice' %}active{% endif %}">Invoice</a>
             <a href="/billpay" class="{% if page.title == 'Expensify Billpay' %}active{% endif %}">Billpay</a>
+            {% include search.html %}
         </nav>
-        {% include search.html %}
     </header>
 
     <!-- TOC Sidebar -->
-    <nav class="toc-sidebar open" id="toc-sidebar">
+    <nav class="toc-sidebar" id="toc-sidebar">
         <div class="js-toc"></div>
     </nav>
 
@@ -438,6 +436,7 @@ <h3>Get Started</h3>
           },
           onClick: function(e) {
               setTimeout(scrollActiveLinkIntoView, 300);
+              document.getElementById('toc-sidebar').classList.remove('open'); // Close TOC after clicking
           },
           scrollEndCallback: function() {
               updateURLHashOnScroll();

From 0ecfdadfa59a312e782dce99b6f92625707d5983 Mon Sep 17 00:00:00 2001
From: David Barrett <dbarrett@expensify.com>
Date: Sat, 16 Nov 2024 20:57:45 -0800
Subject: [PATCH 03/13] Updating product list

---
 help/_layouts/default.html | 65 ++++++++++++++++++++++++--------------
 help/index.md              | 10 +++---
 2 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/help/_layouts/default.html b/help/_layouts/default.html
index d531b94f1f9f..b2c354e0c0a7 100644
--- a/help/_layouts/default.html
+++ b/help/_layouts/default.html
@@ -38,29 +38,41 @@
             color: inherit;
         }
 
-        .nav-links {
-            display: flex;
-            gap: 15px;
-            padding-right: 20px;
+        /* Dropdown styling */
+        .dropdown {
+            position: relative;
+            display: inline-block;
+            font-size: 24px; /* Match the logo font size */
+            font-weight: normal;
+            text-decoration: underline;
+            color: #0366d6;
+            cursor: pointer;
         }
 
-        .nav-links a {
-            text-decoration: none;
-            color: #0366d6;
-            font-weight: 500;
-            padding: 0px 15px;
-            border-radius: 6px;
-            transition: background-color 0.3s;
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            background-color: #fff;
+            min-width: 160px;
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+            z-index: 1;
+            padding: 12px 16px;
         }
 
-        .nav-links a:hover {
-            background-color: #f1f8ff;
+        .dropdown:hover .dropdown-content {
+            display: block;
         }
 
-        .nav-links a.active {
-            background-color: #eaf5ff;
+        .dropdown a {
+            text-decoration: none;
             color: #0366d6;
+            padding: 8px 0;
+            display: block;
+        }
+
+        .dropdown a.active {
             font-weight: bold;
+            background-color: #eaf5ff;
         }
 
         /* Sidebar navigation for TOC */
@@ -289,16 +301,21 @@
         </div>
         <div class="logo">
             <a href="/">Expensify</a>
+            /
+            <!-- Dropdown for product selection -->
+            <div class="dropdown">
+                <span>{{ page.title | remove_first: 'Expensify ' }}</span>
+                <div class="dropdown-content">
+                    <a href="/expense" class="{% if page.title == 'Expensify Expense' %}active{% endif %}">Expense</a>
+                    <a href="/card" class="{% if page.title == 'Expensify Cards' %}active{% endif %}">Card</a>
+                    <a href="/travel" class="{% if page.title == 'Expensify Travel' %}active{% endif %}">Travel</a>
+                    <a href="/chat" class="{% if page.title == 'Expensify Chat' %}active{% endif %}">Chat</a>
+                    <a href="/invoice" class="{% if page.title == 'Expensify Invoice' %}active{% endif %}">Invoice</a>
+                    <a href="/billpay" class="{% if page.title == 'Expensify Billpay' %}active{% endif %}">Billpay</a>
+                </div>
+            </div>
         </div>
-        <nav class="nav-links">
-            <a href="/expense" class="{% if page.title == 'Expensify Expense' %}active{% endif %}">Expense</a>
-            <a href="/card" class="{% if page.title == 'Expensify Cards' %}active{% endif %}">Card</a>
-            <a href="/travel" class="{% if page.title == 'Expensify Travel' %}active{% endif %}">Travel</a>
-            <a href="/chat" class="{% if page.title == 'Expensify Chat' %}active{% endif %}">Chat</a>
-            <a href="/invoice" class="{% if page.title == 'Expensify Invoice' %}active{% endif %}">Invoice</a>
-            <a href="/billpay" class="{% if page.title == 'Expensify Billpay' %}active{% endif %}">Billpay</a>
-            {% include search.html %}
-        </nav>
+        {% include search.html %}
     </header>
 
     <!-- TOC Sidebar -->
diff --git a/help/index.md b/help/index.md
index 45366fecae11..e5c79ece08af 100644
--- a/help/index.md
+++ b/help/index.md
@@ -1,11 +1,11 @@
 ---
 layout: product
-title: Expensify
+title: Help
 ---
 ## Introduction
 The Expensify Superapp combines 6 world-class business, finance, and collaboration products into one app. It works identically on desktop and mobile, with colleagues and customers, and for personal use.
 
-### Main uses
+### [Main uses] What does Expensify do?
 Expensify can do a lot. You should check us out whenever you need to:
 * **Track and manage expenses** - Whether reimbursing employee receipts, deducting personal expenses, or splitting a bill, Expensify Expense is for you.
 * **Issue corporate cards** - Skip reimbursement and capture receipts in real-time by issuing the Expensify Card to yourself and employees.
@@ -16,7 +16,7 @@ Expensify can do a lot. You should check us out whenever you need to:
 
 If you send, receive, or spend money – or talk to anyone about anything – Expensify is for you.
 
-### Core users
+### [Core users] Who should use Expensify?
 Expensify offers something for everyone. Common users include:
 * **Individuals** - Millions track personal expenses to maximize deductions, stay within budgets, or see where money goes.
 * **Friends** - Split bills with friends for rent, parties, or drinks.
@@ -27,7 +27,7 @@ Expensify offers something for everyone. Common users include:
 
 If you're online doing anything, Expensify can probably help.
 
-### Key advantages
+### [Key advantages] Why should you use Expensify?
 You've got options, but use Expensify because it is:
 * **Simple enough for individuals** - A simple tool without overwhelming functionality or language.
 * **Powerful enough for enterprises** - It scales up to reveal sophisticated features only when needed. Used by public companies, multinationals, and more.
@@ -502,4 +502,4 @@ Members using paid functionality on multiple workspaces in a month aren't billed
 The billing page is currently under development and will be available soon. Stay tuned for updates on how to access and use the new billing features.
 
 #### [Recovery Codes Usage] How do I use my recovery codes if I lose access to my authenticator app?
-Your recovery codes work the same way as your authenticator codes. Just enter a recovery code as you would the authenticator code.
\ No newline at end of file
+Your recovery codes work the same way as your authenticator codes. Just enter a recovery code as you would the authenticator code.

From c85795b5ca50389e778fc6f0e0daf0936026ff18 Mon Sep 17 00:00:00 2001
From: David Barrett <dbarrett@expensify.com>
Date: Sat, 16 Nov 2024 21:10:32 -0800
Subject: [PATCH 04/13] Cleaned up mobile nav

---
 help/_includes/search.html | 21 +++++----------------
 help/_layouts/default.html | 23 ++++++++++-------------
 2 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/help/_includes/search.html b/help/_includes/search.html
index aa98c06b1259..cfd9eb9dd9a7 100644
--- a/help/_includes/search.html
+++ b/help/_includes/search.html
@@ -1,6 +1,6 @@
 <div id="search-container">
   <!-- Search Input styled as button -->
-  <input type="text" id="search-input-box" placeholder="Search..." />
+  <span id="search-icon" style="cursor: pointer; font-size: 24px;">🔍</span>
 
   <!-- Search Modal -->
   <div id="search-modal" style="display:none;">
@@ -25,17 +25,7 @@
 
 <!-- Modal and Search Styling -->
 <style>
-  /* Style for search input box (replaces button) */
-  #search-input-box {
-    display: flex;
-    gap: 15px;
-    padding: 0px 15px;
-    cursor: pointer;
-    border: 1px solid #eaecef;
-    border-radius: 6px;
-    box-sizing: border-box;
-    font-size: 16px;
-  }
+  /* Removed the styling for the search input box */
 
   /* Modal background */
   #search-modal {
@@ -151,7 +141,7 @@
   let g_index = null;
 
   // Look up some commonly used elements once
-  const g_searchInputBox = document.getElementById('search-input-box');
+  const g_searchIcon = document.getElementById('search-icon');
   const g_searchModal = document.getElementById('search-modal');
   const g_searchResults = document.getElementById('search-results');
   const g_searchInput = document.getElementById('search-input');
@@ -167,8 +157,8 @@
     }
   }
 
-  // Open modal when search input is clicked
-  g_searchInputBox.addEventListener('click', showSearchModal);
+  // Open modal when search icon is clicked
+  g_searchIcon.addEventListener('click', showSearchModal);
 
   // Open modal when Cmd+K is pressed
   document.addEventListener('keydown', function(event) {
@@ -360,4 +350,3 @@
     g_searchModal.style.display = 'none';
   }
 </script>
-
diff --git a/help/_layouts/default.html b/help/_layouts/default.html
index b2c354e0c0a7..143af66215e9 100644
--- a/help/_layouts/default.html
+++ b/help/_layouts/default.html
@@ -19,7 +19,7 @@
             align-items: center;
             justify-content: space-between;
             background-color: #fff;
-            padding: 15px 20px;
+            padding: 15px 0px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             position: fixed;
             top: 0;
@@ -28,9 +28,12 @@
         }
 
         .logo {
+            display: flex;
+            align-items: center;
             font-size: 24px;
             font-weight: bold;
             color: #0366d6;
+            margin-left: 20px;
         }
 
         .logo a {
@@ -259,13 +262,6 @@
         }
 
         @media (max-width: 768px) {
-            .nav-links a {
-                display: none;
-            }
-
-            .header {
-                justify-content: flex-start;
-            }
 
             .hamburger {
                 display: flex;
@@ -294,12 +290,13 @@
 
     <!-- Header -->
     <header class="header">
-        <div class="hamburger" id="hamburger">
-            <div class="bar"></div>
-            <div class="bar"></div>
-            <div class="bar"></div>
-        </div>
         <div class="logo">
+            <div class="hamburger" id="hamburger">
+                <div class="bar"></div>
+                <div class="bar"></div>
+                <div class="bar"></div>
+            </div>
+
             <a href="/">Expensify</a>
             /
             <!-- Dropdown for product selection -->

From fef8016df35f988b422a3dbe256b40c0ffb2ebce Mon Sep 17 00:00:00 2001
From: David Barrett <dbarrett@expensify.com>
Date: Sun, 17 Nov 2024 12:26:34 -0800
Subject: [PATCH 05/13] More mobile stylings

---
 help/_layouts/default.html | 17 +++++++----------
 help/_layouts/product.html |  2 --
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/help/_layouts/default.html b/help/_layouts/default.html
index 143af66215e9..efd7c5398315 100644
--- a/help/_layouts/default.html
+++ b/help/_layouts/default.html
@@ -115,21 +115,21 @@
             padding-left: 0;
         }
 
-        .js-toc > ul > li > a {
+        .js-toc > a {
             font-weight: bold;
             font-size: 18px;
 
         }
 
-        .js-toc > ul > li > ul > li {
+        .js-toc > ul > li {
             margin-top: 25px;
         }
 
-        .js-toc > ul > li > ul > li > a {
+        .js-toc > ul > li > a {
             font-weight: bold;
         }
 
-        .js-toc > ul > li > ul > li > ul > li > ul > li {
+        .js-toc > ul > li > ul > li > ul > li {
             padding-left: 10px;
         }
 
@@ -158,15 +158,12 @@
         main {
             margin-left: 300px;
             padding: 20px;
-            margin-top: 80px;
             flex-grow: 1;
             max-width: 900px;
         }
 
         main h1 {
-            font-size: 36px;
-            font-weight: bold;
-            margin-bottom: 20px;
+            display: none;
         }
 
         main h2 {
@@ -275,8 +272,7 @@
 
             main {
                 margin-left: 0;
-                padding: 40px;
-                margin-top: 20px;
+                padding: 20px;
                 max-width: 100%;
             }
 
@@ -321,6 +317,7 @@
     </nav>
 
     <!-- Main Content -->
+    <h1>{{ page.title }}</h1>
     <main class="js-toc-content">
         {{ content }}
 
diff --git a/help/_layouts/product.html b/help/_layouts/product.html
index cb8b5e882f24..89c2f92b8926 100644
--- a/help/_layouts/product.html
+++ b/help/_layouts/product.html
@@ -2,8 +2,6 @@
 layout: default
 ---
 
-<h1>{{ page.title }}</h1>
-
 <!-- Render the markdown content here -->
 <div class="product-content">
     {{ content }}

From c3ba0defbe44695dfcf5ab0bf33e49d74b5b416e Mon Sep 17 00:00:00 2001
From: David Barrett <dbarrett@expensify.com>
Date: Sun, 17 Nov 2024 12:42:25 -0800
Subject: [PATCH 06/13] Consolidating search code in prep for splitting out
 JS/CSS

---
 help/_includes/search.html | 352 -------------------------------------
 help/_layouts/default.html | 345 +++++++++++++++++++++++++++++++++++-
 2 files changed, 343 insertions(+), 354 deletions(-)
 delete mode 100644 help/_includes/search.html

diff --git a/help/_includes/search.html b/help/_includes/search.html
deleted file mode 100644
index cfd9eb9dd9a7..000000000000
--- a/help/_includes/search.html
+++ /dev/null
@@ -1,352 +0,0 @@
-<div id="search-container">
-  <!-- Search Input styled as button -->
-  <span id="search-icon" style="cursor: pointer; font-size: 24px;">🔍</span>
-
-  <!-- Search Modal -->
-  <div id="search-modal" style="display:none;">
-    <div id="modal-content">
-      <div class="search-icon-wrapper">
-        <span class="search-icon">🔍</span>
-        <input type="text" id="search-input" placeholder="Go to..." />
-      </div>
-      <!-- Hidden Search Button -->
-      <button id="search-submit" style="display:none;">Search</button>
-
-      <!-- Search results container with tabindex to make it focusable -->
-      <div id="search-results" tabindex="0" style="display:none;"></div>
-
-      <!-- Footer with shortcut info -->
-      <div id="search-footer" style="text-align: center; margin-top: 10px; font-size: 14px; color: #586069;">
-        ⇵ Select, ↩ Go
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Modal and Search Styling -->
-<style>
-  /* Removed the styling for the search input box */
-
-  /* Modal background */
-  #search-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.7);
-    z-index: 1000;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-  }
-
-  /* Modal content */
-  #modal-content {
-    top: 20%;
-    background: white;
-    padding: 20px;
-    width: 60%;
-    max-width: 600px;
-    position: relative;
-    border-radius: 6px;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-  }
-
-  /* Search input with magnifying glass */
-  .search-icon-wrapper {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 8px;
-    border: 1px solid #eaecef;
-    border-radius: 6px;
-    box-sizing: border-box;
-  }
-
-  .search-icon {
-    font-size: 18px;
-    margin-right: 8px;
-  }
-
-  /* Updated input style */
-  #search-input {
-    width: 100%;
-    border: none;
-    outline: none;
-    font-size: 20px;
-  }
-
-  /* Search results */
-  #search-results {
-    margin-top: 20px;
-    max-height: 300px;
-    overflow-y: auto;
-    border-top: 1px solid #eaecef;
-    padding-top: 10px;
-    outline: none; /* Disable the strong outline */
-  }
-
-  .search-result {
-    margin-bottom: 15px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #eaecef;
-  }
-
-  .search-result-title {
-    font-weight: bold;
-    margin-bottom: 5px;
-    color: #0366d6;
-    text-decoration: none;
-  }
-
-  .search-result-title:hover {
-    text-decoration: underline;
-  }
-
-  .search-result-context {
-    font-size: 14px;
-    color: #586069;
-  }
-
-  /* Highlighted search result */
-  .highlight {
-    background-color: #eaecef;
-  }
-
-  /* Softer focus style for search results */
-  #search-results:focus {
-    border: 2px solid #ddd; /* Softer border on focus */
-    outline: none;
-  }
-
-  /* Soft yellow highlight for selected section */
-  .highlight-section {
-    background-color: #fffbcc;
-    transition: background-color 0.3s ease;
-  }
-</style>
-
-<!-- FlexSearch CDN -->
-<script src="https://cdn.jsdelivr.net/npm/flexsearch@0.7.31/dist/flexsearch.bundle.js"></script>
-
-<!-- JavaScript for modal and search -->
-<script>
-  // Keep track of the search results
-  let g_searchResultsArray = [];
-  let g_currentSelectionIndex = -1;
-  let g_highlightedSection = null;
-
-  // Declare the index variable globally so it can be reused
-  let g_index = null;
-
-  // Look up some commonly used elements once
-  const g_searchIcon = document.getElementById('search-icon');
-  const g_searchModal = document.getElementById('search-modal');
-  const g_searchResults = document.getElementById('search-results');
-  const g_searchInput = document.getElementById('search-input');
-
-  // Show and initialize the search modal
-  function showSearchModal() {
-    g_searchModal.style.display = 'flex';
-    if (g_searchResultsArray.length > 0) {
-      g_searchResults.style.display = 'block';
-      g_searchResults.focus(); // Focus on search results if they exist
-    } else {
-      g_searchInput.focus();
-    }
-  }
-
-  // Open modal when search icon is clicked
-  g_searchIcon.addEventListener('click', showSearchModal);
-
-  // Open modal when Cmd+K is pressed
-  document.addEventListener('keydown', function(event) {
-    if (event.metaKey && event.key === 'k') {
-      event.preventDefault();
-      showSearchModal();
-    }
-  });
-
-  // Close modal when pressing "Escape"
-  document.addEventListener('keydown', function(event) {
-    if (event.key === 'Escape' && g_searchModal.style.display === 'flex') {
-      g_searchModal.style.display = 'none';
-    }
-  });
-
-  // Close modal when clicking outside of modal content
-  window.addEventListener('click', function(event) {
-    if (event.target == g_searchModal) {
-      g_searchModal.style.display = 'none';
-    }
-  });
-
-  // Handle keyboard navigation (arrow keys and enter)
-  g_searchResults.addEventListener('keydown', function(event) {
-    // If the modal is being shown and has active search results, capture keydown
-    if (g_searchModal.style.display === 'flex' && g_searchResultsArray.length > 0) {
-      if (event.key === 'ArrowDown') {
-        event.preventDefault();
-        selectNextResult();
-      } else if (event.key === 'ArrowUp') {
-        event.preventDefault();
-        selectPreviousResult();
-      } else if (event.key === 'Enter' && g_currentSelectionIndex >= 0) {
-        event.preventDefault();
-        navigateToSelectedResult();
-      } else if (!['Tab', 'Shift'].includes(event.key)) {
-        g_searchInput.focus(); // Focus back on input if typing occurs
-      }
-    }
-  });
-
-  function selectNextResult() {
-    if (g_currentSelectionIndex < g_searchResultsArray.length - 1) {
-      g_currentSelectionIndex++;
-      updateSelectedResult();
-    }
-  }
-
-  function selectPreviousResult() {
-    if (g_currentSelectionIndex > 0) {
-      g_currentSelectionIndex--;
-      updateSelectedResult();
-    }
-  }
-
-  function updateSelectedResult() {
-    g_searchResultsArray.forEach((result, index) => {
-      if (index === g_currentSelectionIndex) {
-        result.classList.add('highlight');
-        result.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-      } else {
-        result.classList.remove('highlight');
-      }
-    });
-  }
-
-  function navigateToSelectedResult() {
-    const selectedResult = g_searchResultsArray[g_currentSelectionIndex];
-    const link = selectedResult.querySelector('a');
-    if (link) {
-      link.click();
-    }
-  }
-
-  // Execute search when pressing "Enter" in the input field
-  g_searchInput.addEventListener('keydown', function(event) {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      g_searchSubmit.click();
-    }
-  });
-
-  // Perform search when search button is clicked
-  const g_searchSubmit = document.getElementById('search-submit');
-
-  // Handle submitting the search query
-  g_searchSubmit.addEventListener('click', async function() {
-    const query = g_searchInput.value.trim().toLowerCase();
-    g_searchResults.innerHTML = '';
-    g_currentSelectionIndex = -1;
-
-    if (query.length === 0) {
-      g_searchResults.style.display = 'none';
-      return;
-    }
-
-    // Load the JSON search index file, if not already defined
-    if (g_index === null) {
-      console.log('Loading search index from:', '/searchIndex.json');
-      const response = await fetch('/searchIndex.json');
-      const indexData = await response.json();
-      g_index = new FlexSearch.Document({
-        document: {
-          id: 'id',
-          index: ['content'], // Index on the content field
-          store: ['title', 'url', 'content'], // Store title, URL, and content
-        }
-      });
-
-      // Import the index
-      for (const [key, data] of Object.entries(indexData)) {
-        await g_index.import(key, data);
-      }
-    } else {
-      console.log('Reusing existing search index');
-    }
-
-    // Perform search
-    const results = await g_index.search({
-      query,
-      field: 'content'
-    });
-
-    if (results.length > 0) {
-      g_searchResultsArray = [];
-      results.forEach(result => {
-        result.result.forEach(docId => {
-          const doc = g_index.store[docId];
-          if (doc && doc.content) {
-            const searchTermIndex = doc.content.toLowerCase().indexOf(query);
-            const contextBefore = doc.content.substring(Math.max(0, searchTermIndex - 30), searchTermIndex);
-            const contextAfter = doc.content.substring(searchTermIndex + query.length, Math.min(doc.content.length, searchTermIndex + query.length + 30));
-            const searchResultHtml = `
-              <div class="search-result">
-                <a href="${doc.url}" class="search-result-title" onclick="scrollToTOC('${doc.url}')">${doc.title}</a>
-                <div class="search-result-context">...${contextBefore}<strong>${query}</strong>${contextAfter}...</div>
-              </div>
-            `;
-            const resultElement = document.createElement('div');
-            resultElement.innerHTML = searchResultHtml;
-            g_searchResults.appendChild(resultElement);
-            g_searchResultsArray.push(resultElement);
-
-            // Automatically select the first result
-            if (g_searchResultsArray.length === 1) {
-              g_currentSelectionIndex = 0;
-              updateSelectedResult();
-            }
-          }
-        });
-      });
-      g_searchResults.style.display = 'block';
-      g_searchResults.focus();  // Focus on search results whenever there are results
-    } else {
-      g_searchResults.style.display = 'none';
-    }
-  });
-
-  // Trigger the TOC link click to use TocBot's smooth scrolling behavior
-  function scrollToTOC(url) {
-    const elementId = url.split('#')[1];
-    const tocLink = document.querySelector(`.toc-sidebar a[href="#${elementId}"]`);
-
-    if (tocLink) {
-      tocLink.click(); // Simulate a click on the TOC link for smooth scroll
-      highlightSelectedSection(elementId); // Highlight the section in yellow
-      closeModalAfterClick();
-    }
-  }
-
-  // Highlight the selected section
-  function highlightSelectedSection(sectionId) {
-    // Remove the previous highlight, if any
-    if (g_highlightedSection) {
-      g_highlightedSection.classList.remove('highlight-section');
-    }
-
-    // Highlight the new section
-    const sectionElement = document.getElementById(sectionId);
-    if (sectionElement) {
-      sectionElement.classList.add('highlight-section');
-      g_highlightedSection = sectionElement;
-    }
-  }
-
-  // Close modal after clicking a search result
-  function closeModalAfterClick() {
-    g_searchModal.style.display = 'none';
-  }
-</script>
diff --git a/help/_layouts/default.html b/help/_layouts/default.html
index efd7c5398315..0dc3a3b5f9c0 100644
--- a/help/_layouts/default.html
+++ b/help/_layouts/default.html
@@ -280,6 +280,105 @@
                 display: none;
             }
         }
+
+        /* Modal background */
+        #search-modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            z-index: 1000;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+        }
+
+        /* Modal content */
+        #modal-content {
+            top: 20%;
+            background: white;
+            padding: 20px;
+            width: 60%;
+            max-width: 600px;
+            position: relative;
+            border-radius: 6px;
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Search input with magnifying glass */
+        .search-icon-wrapper {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #eaecef;
+            border-radius: 6px;
+            box-sizing: border-box;
+        }
+
+        .search-icon {
+            font-size: 18px;
+            margin-right: 8px;
+        }
+
+        /* Updated input style */
+        #search-input {
+            width: 100%;
+            border: none;
+            outline: none;
+            font-size: 20px;
+        }
+
+        /* Search results */
+        #search-results {
+            margin-top: 20px;
+            max-height: 300px;
+            overflow-y: auto;
+            border-top: 1px solid #eaecef;
+            padding-top: 10px;
+            outline: none; /* Disable the strong outline */
+        }
+
+        .search-result {
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #eaecef;
+        }
+
+        .search-result-title {
+            font-weight: bold;
+            margin-bottom: 5px;
+            color: #0366d6;
+            text-decoration: none;
+        }
+
+        .search-result-title:hover {
+            text-decoration: underline;
+        }
+
+        .search-result-context {
+            font-size: 14px;
+            color: #586069;
+        }
+
+        /* Highlighted search result */
+        .highlight {
+            background-color: #eaecef;
+        }
+
+        /* Softer focus style for search results */
+        #search-results:focus {
+            border: 2px solid #ddd; /* Softer border on focus */
+            outline: none;
+        }
+
+        /* Soft yellow highlight for selected section */
+        .highlight-section {
+            background-color: #fffbcc;
+            transition: background-color 0.3s ease;
+        }
     </style>
 </head>
 <body>
@@ -308,7 +407,30 @@
                 </div>
             </div>
         </div>
-        {% include search.html %}
+        <div id="search-container">
+            <!-- Search Input styled as button -->
+            <span id="search-icon" style="cursor: pointer; font-size: 24px;">🔍</span>
+
+            <!-- Search Modal -->
+            <div id="search-modal" style="display:none;">
+                <div id="modal-content">
+                    <div class="search-icon-wrapper">
+                        <span class="search-icon">🔍</span>
+                        <input type="text" id="search-input" placeholder="Go to..." />
+                    </div>
+                    <!-- Hidden Search Button -->
+                    <button id="search-submit" style="display:none;">Search</button>
+
+                    <!-- Search results container with tabindex to make it focusable -->
+                    <div id="search-results" tabindex="0" style="display:none;"></div>
+
+                    <!-- Footer with shortcut info -->
+                    <div id="search-footer" style="text-align: center; margin-top: 10px; font-size: 14px; color: #586069;">
+                        ⇵ Select, ↩ Go
+                    </div>
+                </div>
+            </div>
+        </div>
     </header>
 
     <!-- TOC Sidebar -->
@@ -402,6 +524,7 @@ <h3>Get Started</h3>
     </footer>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.32.1/tocbot.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/flexsearch@0.7.31/dist/flexsearch.bundle.js"></script>
     <script>
         function updateURLHashOnScroll() {
             const activeLink = document.querySelector('.toc-sidebar .is-active-link');
@@ -474,7 +597,225 @@ <h3>Get Started</h3>
             var sidebar = document.getElementById('toc-sidebar');
             sidebar.classList.toggle('open');
         });
+
+        // Keep track of the search results
+        let g_searchResultsArray = [];
+        let g_currentSelectionIndex = -1;
+        let g_highlightedSection = null;
+
+        // Declare the index variable globally so it can be reused
+        let g_index = null;
+
+        // Look up some commonly used elements once
+        const g_searchIcon = document.getElementById('search-icon');
+        const g_searchModal = document.getElementById('search-modal');
+        const g_searchResults = document.getElementById('search-results');
+        const g_searchInput = document.getElementById('search-input');
+
+        // Show and initialize the search modal
+        function showSearchModal() {
+            g_searchModal.style.display = 'flex';
+            if (g_searchResultsArray.length > 0) {
+                g_searchResults.style.display = 'block';
+                g_searchResults.focus(); // Focus on search results if they exist
+            } else {
+                g_searchInput.focus();
+            }
+        }
+
+        // Open modal when search icon is clicked
+        g_searchIcon.addEventListener('click', showSearchModal);
+
+        // Open modal when Cmd+K is pressed
+        document.addEventListener('keydown', function(event) {
+            if (event.metaKey && event.key === 'k') {
+                event.preventDefault();
+                showSearchModal();
+            }
+        });
+
+        // Close modal when pressing "Escape"
+        document.addEventListener('keydown', function(event) {
+            if (event.key === 'Escape' && g_searchModal.style.display === 'flex') {
+                g_searchModal.style.display = 'none';
+            }
+        });
+
+        // Close modal when clicking outside of modal content
+        window.addEventListener('click', function(event) {
+            if (event.target == g_searchModal) {
+                g_searchModal.style.display = 'none';
+            }
+        });
+
+        // Handle keyboard navigation (arrow keys and enter)
+        g_searchResults.addEventListener('keydown', function(event) {
+            // If the modal is being shown and has active search results, capture keydown
+            if (g_searchModal.style.display === 'flex' && g_searchResultsArray.length > 0) {
+                if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    selectNextResult();
+                } else if (event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    selectPreviousResult();
+                } else if (event.key === 'Enter' && g_currentSelectionIndex >= 0) {
+                    event.preventDefault();
+                    navigateToSelectedResult();
+                } else if (!['Tab', 'Shift'].includes(event.key)) {
+                    g_searchInput.focus(); // Focus back on input if typing occurs
+                }
+            }
+        });
+
+        function selectNextResult() {
+            if (g_currentSelectionIndex < g_searchResultsArray.length - 1) {
+                g_currentSelectionIndex++;
+                updateSelectedResult();
+            }
+        }
+
+        function selectPreviousResult() {
+            if (g_currentSelectionIndex > 0) {
+                g_currentSelectionIndex--;
+                updateSelectedResult();
+            }
+        }
+
+        function updateSelectedResult() {
+            g_searchResultsArray.forEach((result, index) => {
+                if (index === g_currentSelectionIndex) {
+                    result.classList.add('highlight');
+                    result.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                } else {
+                    result.classList.remove('highlight');
+                }
+            });
+        }
+
+        function navigateToSelectedResult() {
+            const selectedResult = g_searchResultsArray[g_currentSelectionIndex];
+            const link = selectedResult.querySelector('a');
+            if (link) {
+                link.click();
+            }
+        }
+
+        // Execute search when pressing "Enter" in the input field
+        g_searchInput.addEventListener('keydown', function(event) {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                g_searchSubmit.click();
+            }
+        });
+
+        // Perform search when search button is clicked
+        const g_searchSubmit = document.getElementById('search-submit');
+
+        // Handle submitting the search query
+        g_searchSubmit.addEventListener('click', async function() {
+            const query = g_searchInput.value.trim().toLowerCase();
+            g_searchResults.innerHTML = '';
+            g_currentSelectionIndex = -1;
+
+            if (query.length === 0) {
+                g_searchResults.style.display = 'none';
+                return;
+            }
+
+            // Load the JSON search index file, if not already defined
+            if (g_index === null) {
+                console.log('Loading search index from:', '/searchIndex.json');
+                const response = await fetch('/searchIndex.json');
+                const indexData = await response.json();
+                g_index = new FlexSearch.Document({
+                    document: {
+                        id: 'id',
+                        index: ['content'], // Index on the content field
+                        store: ['title', 'url', 'content'], // Store title, URL, and content
+                    }
+                });
+
+                // Import the index
+                for (const [key, data] of Object.entries(indexData)) {
+                    await g_index.import(key, data);
+                }
+            } else {
+                console.log('Reusing existing search index');
+            }
+
+            // Perform search
+            const results = await g_index.search({
+                query,
+                field: 'content'
+            });
+
+            if (results.length > 0) {
+                g_searchResultsArray = [];
+                results.forEach(result => {
+                    result.result.forEach(docId => {
+                        const doc = g_index.store[docId];
+                        if (doc && doc.content) {
+                            const searchTermIndex = doc.content.toLowerCase().indexOf(query);
+                            const contextBefore = doc.content.substring(Math.max(0, searchTermIndex - 30), searchTermIndex);
+                            const contextAfter = doc.content.substring(searchTermIndex + query.length, Math.min(doc.content.length, searchTermIndex + query.length + 30));
+                            const searchResultHtml = `
+                              <div class="search-result">
+                                <a href="${doc.url}" class="search-result-title" onclick="scrollToTOC('${doc.url}')">${doc.title}</a>
+                                <div class="search-result-context">...${contextBefore}<strong>${query}</strong>${contextAfter}...</div>
+                              </div>
+                            `;
+                            const resultElement = document.createElement('div');
+                            resultElement.innerHTML = searchResultHtml;
+                            g_searchResults.appendChild(resultElement);
+                            g_searchResultsArray.push(resultElement);
+
+                            // Automatically select the first result
+                            if (g_searchResultsArray.length === 1) {
+                                g_currentSelectionIndex = 0;
+                                updateSelectedResult();
+                            }
+                        }
+                    });
+                });
+                g_searchResults.style.display = 'block';
+                g_searchResults.focus();  // Focus on search results whenever there are results
+            } else {
+                g_searchResults.style.display = 'none';
+            }
+        });
+
+        // Trigger the TOC link click to use TocBot's smooth scrolling behavior
+        function scrollToTOC(url) {
+            const elementId = url.split('#')[1];
+            const tocLink = document.querySelector(`.toc-sidebar a[href="#${elementId}"]`);
+
+            if (tocLink) {
+                tocLink.click(); // Simulate a click on the TOC link for smooth scroll
+                highlightSelectedSection(elementId); // Highlight the section in yellow
+                closeModalAfterClick();
+            }
+        }
+
+        // Highlight the selected section
+        function highlightSelectedSection(sectionId) {
+            // Remove the previous highlight, if any
+            if (g_highlightedSection) {
+                g_highlightedSection.classList.remove('highlight-section');
+            }
+
+            // Highlight the new section
+            const sectionElement = document.getElementById(sectionId);
+            if (sectionElement) {
+                sectionElement.classList.add('highlight-section');
+                g_highlightedSection = sectionElement;
+            }
+        }
+
+        // Close modal after clicking a search result
+        function closeModalAfterClick() {
+            g_searchModal.style.display = 'none';
+        }
     </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file

From 5cb6da7957462823a46876e8cc9524bace9986b4 Mon Sep 17 00:00:00 2001
From: David Barrett <dbarrett@expensify.com>
Date: Sun, 17 Nov 2024 13:16:50 -0800
Subject: [PATCH 07/13] Split up files

---
 help/_layouts/default.html | 668 +------------------------------------
 help/default.css           | 373 +++++++++++++++++++++
 help/default.js            | 289 ++++++++++++++++
 3 files changed, 664 insertions(+), 666 deletions(-)
 create mode 100644 help/default.css
 create mode 100644 help/default.js

diff --git a/help/_layouts/default.html b/help/_layouts/default.html
index 0dc3a3b5f9c0..906dacd9f2b4 100644
--- a/help/_layouts/default.html
+++ b/help/_layouts/default.html
@@ -5,381 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ page.title }}</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.27.4/tocbot.css">
-    <style>
-        body {
-            margin: 0;
-            font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
-            background-color: #f9fafb;
-            color: #333;
-        }
-
-        /* Header styling */
-        .header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            background-color: #fff;
-            padding: 15px 0px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            position: fixed;
-            top: 0;
-            width: 100%;
-            z-index: 1000;
-        }
-
-        .logo {
-            display: flex;
-            align-items: center;
-            font-size: 24px;
-            font-weight: bold;
-            color: #0366d6;
-            margin-left: 20px;
-        }
-
-        .logo a {
-            text-decoration: none;
-            color: inherit;
-        }
-
-        /* Dropdown styling */
-        .dropdown {
-            position: relative;
-            display: inline-block;
-            font-size: 24px; /* Match the logo font size */
-            font-weight: normal;
-            text-decoration: underline;
-            color: #0366d6;
-            cursor: pointer;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #fff;
-            min-width: 160px;
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-            z-index: 1;
-            padding: 12px 16px;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .dropdown a {
-            text-decoration: none;
-            color: #0366d6;
-            padding: 8px 0;
-            display: block;
-        }
-
-        .dropdown a.active {
-            font-weight: bold;
-            background-color: #eaf5ff;
-        }
-
-        /* Sidebar navigation for TOC */
-        .toc-sidebar {
-            width: 250px;
-            position: fixed;
-            top: 60px;
-            bottom: 0;
-            left: 0;
-            background-color: #fff;
-            padding: 20px;
-            overflow-y: auto;
-            border-right: 1px solid #eaecef;
-            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-            transform: translateY(0);
-            transition: transform 0.3s ease-in-out;
-            z-index: 999;
-        }
-
-        .toc-sidebar.open {
-            transform: translateY(0);
-        }
-
-        .toc-link::before {
-            display: none;
-        }
-
-        .toc-sidebar ul {
-            list-style: none;
-            padding-left: 0;
-            line-height: 1.0;
-            font-size: 15px;
-        }
-
-        .toc-sidebar li {
-            margin-left: 0;
-            padding-left: 0;
-        }
-
-        .js-toc > a {
-            font-weight: bold;
-            font-size: 18px;
-
-        }
-
-        .js-toc > ul > li {
-            margin-top: 25px;
-        }
-
-        .js-toc > ul > li > a {
-            font-weight: bold;
-        }
-
-        .js-toc > ul > li > ul > li > ul > li {
-            padding-left: 10px;
-        }
-
-        .toc-sidebar a {
-            word-wrap: break-word;
-            display: block;
-            padding: 1px 10px;
-            margin-bottom: 5px;
-            text-decoration: none;
-            color: #0366d6;
-            border-radius: 6px;
-        }
-
-        .toc-sidebar a:hover {
-            background-color: #f1f8ff;
-            text-decoration: none;
-        }
-
-        .toc-sidebar .is-active-link {
-            background-color: #eaf5ff;
-            color: #0366d6;
-            border-radius: 6px;
-        }
-
-        /* Main content area */
-        main {
-            margin-left: 300px;
-            padding: 20px;
-            flex-grow: 1;
-            max-width: 900px;
-        }
-
-        main h1 {
-            display: none;
-        }
-
-        main h2 {
-            font-size: 28px;
-            margin-bottom: 16px;
-        }
-
-        main h3 {
-            font-size: 24px;
-            margin-bottom: 12px;
-        }
-
-        main h4 {
-            font-size: 20px;
-            margin-bottom: 12px;
-        }
-
-        main p {
-            font-size: 16px;
-            line-height: 1.6;
-            margin-bottom: 20px;
-        }
-
-        .is-active-link {
-            font-weight: normal;
-        }
-
-        .scroll-spacer {
-            height: 300px;
-        }
-
-        /* Footer */
-        footer {
-            margin-left: 300px;
-            color: #0366d6;
-            background-color: #f9fafb;
-            padding: 40px 20px;
-            font-size: 14px;
-            max-width: 900px;
-        }
-
-        footer h3 {
-            color: #0366d6;
-        }
-
-        footer ul {
-            list-style: none;
-            padding: 0;
-        }
-
-        footer ul li a {
-            color: #0366d6;
-            text-decoration: none;
-        }
-
-        footer ul li a:hover {
-            text-decoration: underline;
-        }
-
-        footer .social-icons a img {
-            width: 20px;
-            margin-right: 10px;
-        }
-
-        .footer-container {
-            display: flex;
-            justify-content: center;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        .footer-column {
-            flex: 1;
-            max-width: 300px; /* Set a max-width for each column */
-            padding: 0 20px;  /* Add padding for some space between the columns */
-        }
-
-        /* Mobile Styles */
-        .hamburger {
-            display: none;
-            cursor: pointer;
-            flex-direction: column;
-            justify-content: space-between;
-            width: 24px;
-            height: 18px;
-        }
-
-        .bar {
-            height: 3px;
-            width: 100%;
-            background-color: #0366d6;
-            border-radius: 10px;
-        }
-
-        @media (max-width: 768px) {
-
-            .hamburger {
-                display: flex;
-                margin-right: 20px;
-            }
-
-            .toc-sidebar {
-                transform: translateY(-100%);
-                width: 100%;
-            }
-
-            main {
-                margin-left: 0;
-                padding: 20px;
-                max-width: 100%;
-            }
-
-            footer {
-                display: none;
-            }
-        }
-
-        /* Modal background */
-        #search-modal {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.7);
-            z-index: 1000;
-            display: flex;
-            justify-content: center;
-            align-items: flex-start;
-        }
-
-        /* Modal content */
-        #modal-content {
-            top: 20%;
-            background: white;
-            padding: 20px;
-            width: 60%;
-            max-width: 600px;
-            position: relative;
-            border-radius: 6px;
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-        }
-
-        /* Search input with magnifying glass */
-        .search-icon-wrapper {
-            display: flex;
-            align-items: center;
-            width: 100%;
-            padding: 8px;
-            border: 1px solid #eaecef;
-            border-radius: 6px;
-            box-sizing: border-box;
-        }
-
-        .search-icon {
-            font-size: 18px;
-            margin-right: 8px;
-        }
-
-        /* Updated input style */
-        #search-input {
-            width: 100%;
-            border: none;
-            outline: none;
-            font-size: 20px;
-        }
-
-        /* Search results */
-        #search-results {
-            margin-top: 20px;
-            max-height: 300px;
-            overflow-y: auto;
-            border-top: 1px solid #eaecef;
-            padding-top: 10px;
-            outline: none; /* Disable the strong outline */
-        }
-
-        .search-result {
-            margin-bottom: 15px;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #eaecef;
-        }
-
-        .search-result-title {
-            font-weight: bold;
-            margin-bottom: 5px;
-            color: #0366d6;
-            text-decoration: none;
-        }
-
-        .search-result-title:hover {
-            text-decoration: underline;
-        }
-
-        .search-result-context {
-            font-size: 14px;
-            color: #586069;
-        }
-
-        /* Highlighted search result */
-        .highlight {
-            background-color: #eaecef;
-        }
-
-        /* Softer focus style for search results */
-        #search-results:focus {
-            border: 2px solid #ddd; /* Softer border on focus */
-            outline: none;
-        }
-
-        /* Soft yellow highlight for selected section */
-        .highlight-section {
-            background-color: #fffbcc;
-            transition: background-color 0.3s ease;
-        }
-    </style>
+    <link rel="stylesheet" href="default.css">
 </head>
 <body>
 
@@ -525,297 +151,7 @@ <h3>Get Started</h3>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.32.1/tocbot.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/flexsearch@0.7.31/dist/flexsearch.bundle.js"></script>
-    <script>
-        function updateURLHashOnScroll() {
-            const activeLink = document.querySelector('.toc-sidebar .is-active-link');
-            if (activeLink) {
-                const hash = activeLink.getAttribute('href');
-                if (history.pushState) {
-                    history.pushState(null, null, hash);
-                } else {
-                    window.location.hash = hash;
-                }
-            }
-        }
-
-        function scrollActiveLinkIntoView() {
-            const activeLink = document.querySelector('.toc-sidebar .is-active-link');
-            if (activeLink) {
-                activeLink.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'nearest'
-                });
-            }
-        }
-
-        tocbot.init({
-          tocSelector: '.js-toc',
-          contentSelector: '.js-toc-content',
-          headingSelector: 'h1, h2, h3, h4, h5, h6',
-          collapseDepth: 4,
-          orderedList: false,
-          scrollSmooth: true,
-          scrollToActive: true,
-          enableUrlHashUpdateOnScroll: false,
-          headingsOffset: 80,
-          scrollSmoothOffset: -80,
-          tocScrollingWrapper: document.querySelector('.toc-sidebar'),
-          tocScrollOffset: 80,
-          headingObjectCallback: function(obj, element) {
-            const tocTitle = element.getAttribute('data-toc-title');
-            if (tocTitle) {
-                obj.textContent = tocTitle;
-            }
-            return obj;
-          },
-          onClick: function(e) {
-              setTimeout(scrollActiveLinkIntoView, 300);
-              document.getElementById('toc-sidebar').classList.remove('open'); // Close TOC after clicking
-          },
-          scrollEndCallback: function() {
-              updateURLHashOnScroll();
-              scrollActiveLinkIntoView();
-          }
-        });
-
-        function adjustAnchorOnLoad() {
-            if (window.location.hash) {
-                const element = document.querySelector(window.location.hash);
-                if (element) {
-                    window.scrollTo({
-                        top: element.getBoundingClientRect().top + window.pageYOffset - 80,
-                        behavior: 'smooth'
-                    });
-                }
-            }
-        }
-
-        window.addEventListener('load', adjustAnchorOnLoad);
-
-        // Toggle sidebar on hamburger click
-        document.getElementById('hamburger').addEventListener('click', function() {
-            var sidebar = document.getElementById('toc-sidebar');
-            sidebar.classList.toggle('open');
-        });
-
-        // Keep track of the search results
-        let g_searchResultsArray = [];
-        let g_currentSelectionIndex = -1;
-        let g_highlightedSection = null;
-
-        // Declare the index variable globally so it can be reused
-        let g_index = null;
-
-        // Look up some commonly used elements once
-        const g_searchIcon = document.getElementById('search-icon');
-        const g_searchModal = document.getElementById('search-modal');
-        const g_searchResults = document.getElementById('search-results');
-        const g_searchInput = document.getElementById('search-input');
-
-        // Show and initialize the search modal
-        function showSearchModal() {
-            g_searchModal.style.display = 'flex';
-            if (g_searchResultsArray.length > 0) {
-                g_searchResults.style.display = 'block';
-                g_searchResults.focus(); // Focus on search results if they exist
-            } else {
-                g_searchInput.focus();
-            }
-        }
-
-        // Open modal when search icon is clicked
-        g_searchIcon.addEventListener('click', showSearchModal);
-
-        // Open modal when Cmd+K is pressed
-        document.addEventListener('keydown', function(event) {
-            if (event.metaKey && event.key === 'k') {
-                event.preventDefault();
-                showSearchModal();
-            }
-        });
-
-        // Close modal when pressing "Escape"
-        document.addEventListener('keydown', function(event) {
-            if (event.key === 'Escape' && g_searchModal.style.display === 'flex') {
-                g_searchModal.style.display = 'none';
-            }
-        });
-
-        // Close modal when clicking outside of modal content
-        window.addEventListener('click', function(event) {
-            if (event.target == g_searchModal) {
-                g_searchModal.style.display = 'none';
-            }
-        });
-
-        // Handle keyboard navigation (arrow keys and enter)
-        g_searchResults.addEventListener('keydown', function(event) {
-            // If the modal is being shown and has active search results, capture keydown
-            if (g_searchModal.style.display === 'flex' && g_searchResultsArray.length > 0) {
-                if (event.key === 'ArrowDown') {
-                    event.preventDefault();
-                    selectNextResult();
-                } else if (event.key === 'ArrowUp') {
-                    event.preventDefault();
-                    selectPreviousResult();
-                } else if (event.key === 'Enter' && g_currentSelectionIndex >= 0) {
-                    event.preventDefault();
-                    navigateToSelectedResult();
-                } else if (!['Tab', 'Shift'].includes(event.key)) {
-                    g_searchInput.focus(); // Focus back on input if typing occurs
-                }
-            }
-        });
-
-        function selectNextResult() {
-            if (g_currentSelectionIndex < g_searchResultsArray.length - 1) {
-                g_currentSelectionIndex++;
-                updateSelectedResult();
-            }
-        }
-
-        function selectPreviousResult() {
-            if (g_currentSelectionIndex > 0) {
-                g_currentSelectionIndex--;
-                updateSelectedResult();
-            }
-        }
-
-        function updateSelectedResult() {
-            g_searchResultsArray.forEach((result, index) => {
-                if (index === g_currentSelectionIndex) {
-                    result.classList.add('highlight');
-                    result.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-                } else {
-                    result.classList.remove('highlight');
-                }
-            });
-        }
-
-        function navigateToSelectedResult() {
-            const selectedResult = g_searchResultsArray[g_currentSelectionIndex];
-            const link = selectedResult.querySelector('a');
-            if (link) {
-                link.click();
-            }
-        }
-
-        // Execute search when pressing "Enter" in the input field
-        g_searchInput.addEventListener('keydown', function(event) {
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                g_searchSubmit.click();
-            }
-        });
-
-        // Perform search when search button is clicked
-        const g_searchSubmit = document.getElementById('search-submit');
-
-        // Handle submitting the search query
-        g_searchSubmit.addEventListener('click', async function() {
-            const query = g_searchInput.value.trim().toLowerCase();
-            g_searchResults.innerHTML = '';
-            g_currentSelectionIndex = -1;
-
-            if (query.length === 0) {
-                g_searchResults.style.display = 'none';
-                return;
-            }
-
-            // Load the JSON search index file, if not already defined
-            if (g_index === null) {
-                console.log('Loading search index from:', '/searchIndex.json');
-                const response = await fetch('/searchIndex.json');
-                const indexData = await response.json();
-                g_index = new FlexSearch.Document({
-                    document: {
-                        id: 'id',
-                        index: ['content'], // Index on the content field
-                        store: ['title', 'url', 'content'], // Store title, URL, and content
-                    }
-                });
-
-                // Import the index
-                for (const [key, data] of Object.entries(indexData)) {
-                    await g_index.import(key, data);
-                }
-            } else {
-                console.log('Reusing existing search index');
-            }
-
-            // Perform search
-            const results = await g_index.search({
-                query,
-                field: 'content'
-            });
-
-            if (results.length > 0) {
-                g_searchResultsArray = [];
-                results.forEach(result => {
-                    result.result.forEach(docId => {
-                        const doc = g_index.store[docId];
-                        if (doc && doc.content) {
-                            const searchTermIndex = doc.content.toLowerCase().indexOf(query);
-                            const contextBefore = doc.content.substring(Math.max(0, searchTermIndex - 30), searchTermIndex);
-                            const contextAfter = doc.content.substring(searchTermIndex + query.length, Math.min(doc.content.length, searchTermIndex + query.length + 30));
-                            const searchResultHtml = `
-                              <div class="search-result">
-                                <a href="${doc.url}" class="search-result-title" onclick="scrollToTOC('${doc.url}')">${doc.title}</a>
-                                <div class="search-result-context">...${contextBefore}<strong>${query}</strong>${contextAfter}...</div>
-                              </div>
-                            `;
-                            const resultElement = document.createElement('div');
-                            resultElement.innerHTML = searchResultHtml;
-                            g_searchResults.appendChild(resultElement);
-                            g_searchResultsArray.push(resultElement);
-
-                            // Automatically select the first result
-                            if (g_searchResultsArray.length === 1) {
-                                g_currentSelectionIndex = 0;
-                                updateSelectedResult();
-                            }
-                        }
-                    });
-                });
-                g_searchResults.style.display = 'block';
-                g_searchResults.focus();  // Focus on search results whenever there are results
-            } else {
-                g_searchResults.style.display = 'none';
-            }
-        });
-
-        // Trigger the TOC link click to use TocBot's smooth scrolling behavior
-        function scrollToTOC(url) {
-            const elementId = url.split('#')[1];
-            const tocLink = document.querySelector(`.toc-sidebar a[href="#${elementId}"]`);
-
-            if (tocLink) {
-                tocLink.click(); // Simulate a click on the TOC link for smooth scroll
-                highlightSelectedSection(elementId); // Highlight the section in yellow
-                closeModalAfterClick();
-            }
-        }
-
-        // Highlight the selected section
-        function highlightSelectedSection(sectionId) {
-            // Remove the previous highlight, if any
-            if (g_highlightedSection) {
-                g_highlightedSection.classList.remove('highlight-section');
-            }
-
-            // Highlight the new section
-            const sectionElement = document.getElementById(sectionId);
-            if (sectionElement) {
-                sectionElement.classList.add('highlight-section');
-                g_highlightedSection = sectionElement;
-            }
-        }
-
-        // Close modal after clicking a search result
-        function closeModalAfterClick() {
-            g_searchModal.style.display = 'none';
-        }
-    </script>
+    <script src="default.js"></script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/help/default.css b/help/default.css
new file mode 100644
index 000000000000..c71cbafcab75
--- /dev/null
+++ b/help/default.css
@@ -0,0 +1,373 @@
+body {
+    margin: 0;
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+    background-color: #f9fafb;
+    color: #333;
+}
+
+/* Header styling */
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #fff;
+    padding: 15px 0px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    font-weight: bold;
+    color: #0366d6;
+    margin-left: 20px;
+}
+
+.logo a {
+    text-decoration: none;
+    color: inherit;
+}
+
+/* Dropdown styling */
+.dropdown {
+    position: relative;
+    display: inline-block;
+    font-size: 24px; /* Match the logo font size */
+    font-weight: normal;
+    text-decoration: underline;
+    color: #0366d6;
+    cursor: pointer;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #fff;
+    min-width: 160px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+    padding: 12px 16px;
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.dropdown a {
+    text-decoration: none;
+    color: #0366d6;
+    padding: 8px 0;
+    display: block;
+}
+
+.dropdown a.active {
+    font-weight: bold;
+    background-color: #eaf5ff;
+}
+
+/* Sidebar navigation for TOC */
+.toc-sidebar {
+    width: 250px;
+    position: fixed;
+    top: 60px;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    padding: 20px;
+    overflow-y: auto;
+    border-right: 1px solid #eaecef;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    transform: translateY(0);
+    transition: transform 0.3s ease-in-out;
+    z-index: 999;
+}
+
+.toc-sidebar.open {
+    transform: translateY(0);
+}
+
+.toc-link::before {
+    display: none;
+}
+
+.toc-sidebar ul {
+    list-style: none;
+    padding-left: 0;
+    line-height: 1.0;
+    font-size: 15px;
+}
+
+.toc-sidebar li {
+    margin-left: 0;
+    padding-left: 0;
+}
+
+.js-toc > a {
+    font-weight: bold;
+    font-size: 18px;
+
+}
+
+.js-toc > ul > li {
+    margin-top: 25px;
+}
+
+.js-toc > ul > li > a {
+    font-weight: bold;
+}
+
+.js-toc > ul > li > ul > li > ul > li {
+    padding-left: 10px;
+}
+
+.toc-sidebar a {
+    word-wrap: break-word;
+    display: block;
+    padding: 1px 10px;
+    margin-bottom: 5px;
+    text-decoration: none;
+    color: #0366d6;
+    border-radius: 6px;
+}
+
+.toc-sidebar a:hover {
+    background-color: #f1f8ff;
+    text-decoration: none;
+}
+
+.toc-sidebar .is-active-link {
+    background-color: #eaf5ff;
+    color: #0366d6;
+    border-radius: 6px;
+}
+
+/* Main content area */
+main {
+    margin-left: 300px;
+    padding: 20px;
+    flex-grow: 1;
+    max-width: 900px;
+}
+
+main h1 {
+    display: none;
+}
+
+main h2 {
+    font-size: 28px;
+    margin-bottom: 16px;
+}
+
+main h3 {
+    font-size: 24px;
+    margin-bottom: 12px;
+}
+
+main h4 {
+    font-size: 20px;
+    margin-bottom: 12px;
+}
+
+main p {
+    font-size: 16px;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}
+
+.is-active-link {
+    font-weight: normal;
+}
+
+.scroll-spacer {
+    height: 300px;
+}
+
+/* Footer */
+footer {
+    margin-left: 300px;
+    color: #0366d6;
+    background-color: #f9fafb;
+    padding: 40px 20px;
+    font-size: 14px;
+    max-width: 900px;
+}
+
+footer h3 {
+    color: #0366d6;
+}
+
+footer ul {
+    list-style: none;
+    padding: 0;
+}
+
+footer ul li a {
+    color: #0366d6;
+    text-decoration: none;
+}
+
+footer ul li a:hover {
+    text-decoration: underline;
+}
+
+footer .social-icons a img {
+    width: 20px;
+    margin-right: 10px;
+}
+
+.footer-container {
+    display: flex;
+    justify-content: center;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.footer-column {
+    flex: 1;
+    max-width: 300px; /* Set a max-width for each column */
+    padding: 0 20px;  /* Add padding for some space between the columns */
+}
+
+/* Mobile Styles */
+.hamburger {
+    display: none;
+    cursor: pointer;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 24px;
+    height: 18px;
+}
+
+.bar {
+    height: 3px;
+    width: 100%;
+    background-color: #0366d6;
+    border-radius: 10px;
+}
+
+@media (max-width: 768px) {
+
+    .hamburger {
+        display: flex;
+        margin-right: 20px;
+    }
+
+    .toc-sidebar {
+        transform: translateY(-100%);
+        width: 100%;
+    }
+
+    main {
+        margin-left: 0;
+        padding: 20px;
+        max-width: 100%;
+    }
+
+    footer {
+        display: none;
+    }
+}
+
+/* Modal background */
+#search-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+/* Modal content */
+#modal-content {
+    top: 20%;
+    background: white;
+    padding: 20px;
+    width: 60%;
+    max-width: 600px;
+    position: relative;
+    border-radius: 6px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+/* Search input with magnifying glass */
+.search-icon-wrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #eaecef;
+    border-radius: 6px;
+    box-sizing: border-box;
+}
+
+.search-icon {
+    font-size: 18px;
+    margin-right: 8px;
+}
+
+/* Updated input style */
+#search-input {
+    width: 100%;
+    border: none;
+    outline: none;
+    font-size: 20px;
+}
+
+/* Search results */
+#search-results {
+    margin-top: 20px;
+    max-height: 300px;
+    overflow-y: auto;
+    border-top: 1px solid #eaecef;
+    padding-top: 10px;
+    outline: none; /* Disable the strong outline */
+}
+
+.search-result {
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eaecef;
+}
+
+.search-result-title {
+    font-weight: bold;
+    margin-bottom: 5px;
+    color: #0366d6;
+    text-decoration: none;
+}
+
+.search-result-title:hover {
+    text-decoration: underline;
+}
+
+.search-result-context {
+    font-size: 14px;
+    color: #586069;
+}
+
+/* Highlighted search result */
+.highlight {
+    background-color: #eaecef;
+}
+
+/* Softer focus style for search results */
+#search-results:focus {
+    border: 2px solid #ddd; /* Softer border on focus */
+    outline: none;
+}
+
+/* Soft yellow highlight for selected section */
+.highlight-section {
+    background-color: #fffbcc;
+    transition: background-color 0.3s ease;
+}
\ No newline at end of file
diff --git a/help/default.js b/help/default.js
new file mode 100644
index 000000000000..b92433e121ac
--- /dev/null
+++ b/help/default.js
@@ -0,0 +1,289 @@
+function updateURLHashOnScroll() {
+    const activeLink = document.querySelector('.toc-sidebar .is-active-link');
+    if (activeLink) {
+        const hash = activeLink.getAttribute('href');
+        if (history.pushState) {
+            history.pushState(null, null, hash);
+        } else {
+            window.location.hash = hash;
+        }
+    }
+}
+
+function scrollActiveLinkIntoView() {
+    const activeLink = document.querySelector('.toc-sidebar .is-active-link');
+    if (activeLink) {
+        activeLink.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest'
+        });
+    }
+}
+
+tocbot.init({
+  tocSelector: '.js-toc',
+  contentSelector: '.js-toc-content',
+  headingSelector: 'h1, h2, h3, h4, h5, h6',
+  collapseDepth: 4,
+  orderedList: false,
+  scrollSmooth: true,
+  scrollToActive: true,
+  enableUrlHashUpdateOnScroll: false,
+  headingsOffset: 80,
+  scrollSmoothOffset: -80,
+  tocScrollingWrapper: document.querySelector('.toc-sidebar'),
+  tocScrollOffset: 80,
+  headingObjectCallback: function(obj, element) {
+    const tocTitle = element.getAttribute('data-toc-title');
+    if (tocTitle) {
+        obj.textContent = tocTitle;
+    }
+    return obj;
+  },
+  onClick: function(e) {
+      setTimeout(scrollActiveLinkIntoView, 300);
+      document.getElementById('toc-sidebar').classList.remove('open'); // Close TOC after clicking
+  },
+  scrollEndCallback: function() {
+      updateURLHashOnScroll();
+      scrollActiveLinkIntoView();
+  }
+});
+
+function adjustAnchorOnLoad() {
+    if (window.location.hash) {
+        const element = document.querySelector(window.location.hash);
+        if (element) {
+            window.scrollTo({
+                top: element.getBoundingClientRect().top + window.pageYOffset - 80,
+                behavior: 'smooth'
+            });
+        }
+    }
+}
+
+window.addEventListener('load', adjustAnchorOnLoad);
+
+// Toggle sidebar on hamburger click
+document.getElementById('hamburger').addEventListener('click', function() {
+    var sidebar = document.getElementById('toc-sidebar');
+    sidebar.classList.toggle('open');
+});
+
+// Keep track of the search results
+let g_searchResultsArray = [];
+let g_currentSelectionIndex = -1;
+let g_highlightedSection = null;
+
+// Declare the index variable globally so it can be reused
+let g_index = null;
+
+// Look up some commonly used elements once
+const g_searchIcon = document.getElementById('search-icon');
+const g_searchModal = document.getElementById('search-modal');
+const g_searchResults = document.getElementById('search-results');
+const g_searchInput = document.getElementById('search-input');
+
+// Show and initialize the search modal
+function showSearchModal() {
+    g_searchModal.style.display = 'flex';
+    if (g_searchResultsArray.length > 0) {
+        g_searchResults.style.display = 'block';
+        g_searchResults.focus(); // Focus on search results if they exist
+    } else {
+        g_searchInput.focus();
+    }
+}
+
+// Open modal when search icon is clicked
+g_searchIcon.addEventListener('click', showSearchModal);
+
+// Open modal when Cmd+K is pressed
+document.addEventListener('keydown', function(event) {
+    if (event.metaKey && event.key === 'k') {
+        event.preventDefault();
+        showSearchModal();
+    }
+});
+
+// Close modal when pressing "Escape"
+document.addEventListener('keydown', function(event) {
+    if (event.key === 'Escape' && g_searchModal.style.display === 'flex') {
+        g_searchModal.style.display = 'none';
+    }
+});
+
+// Close modal when clicking outside of modal content
+window.addEventListener('click', function(event) {
+    if (event.target == g_searchModal) {
+        g_searchModal.style.display = 'none';
+    }
+});
+
+// Handle keyboard navigation (arrow keys and enter)
+g_searchResults.addEventListener('keydown', function(event) {
+    // If the modal is being shown and has active search results, capture keydown
+    if (g_searchModal.style.display === 'flex' && g_searchResultsArray.length > 0) {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            selectNextResult();
+        } else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            selectPreviousResult();
+        } else if (event.key === 'Enter' && g_currentSelectionIndex >= 0) {
+            event.preventDefault();
+            navigateToSelectedResult();
+        } else if (!['Tab', 'Shift'].includes(event.key)) {
+            g_searchInput.focus(); // Focus back on input if typing occurs
+        }
+    }
+});
+
+function selectNextResult() {
+    if (g_currentSelectionIndex < g_searchResultsArray.length - 1) {
+        g_currentSelectionIndex++;
+        updateSelectedResult();
+    }
+}
+
+function selectPreviousResult() {
+    if (g_currentSelectionIndex > 0) {
+        g_currentSelectionIndex--;
+        updateSelectedResult();
+    }
+}
+
+function updateSelectedResult() {
+    g_searchResultsArray.forEach((result, index) => {
+        if (index === g_currentSelectionIndex) {
+            result.classList.add('highlight');
+            result.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        } else {
+            result.classList.remove('highlight');
+        }
+    });
+}
+
+function navigateToSelectedResult() {
+    const selectedResult = g_searchResultsArray[g_currentSelectionIndex];
+    const link = selectedResult.querySelector('a');
+    if (link) {
+        link.click();
+    }
+}
+
+// Execute search when pressing "Enter" in the input field
+g_searchInput.addEventListener('keydown', function(event) {
+    if (event.key === 'Enter') {
+        event.preventDefault();
+        g_searchSubmit.click();
+    }
+});
+
+// Perform search when search button is clicked
+const g_searchSubmit = document.getElementById('search-submit');
+
+// Handle submitting the search query
+g_searchSubmit.addEventListener('click', async function() {
+    const query = g_searchInput.value.trim().toLowerCase();
+    g_searchResults.innerHTML = '';
+    g_currentSelectionIndex = -1;
+
+    if (query.length === 0) {
+        g_searchResults.style.display = 'none';
+        return;
+    }
+
+    // Load the JSON search index file, if not already defined
+    if (g_index === null) {
+        console.log('Loading search index from:', '/searchIndex.json');
+        const response = await fetch('/searchIndex.json');
+        const indexData = await response.json();
+        g_index = new FlexSearch.Document({
+            document: {
+                id: 'id',
+                index: ['content'], // Index on the content field
+                store: ['title', 'url', 'content'], // Store title, URL, and content
+            }
+        });
+
+        // Import the index
+        for (const [key, data] of Object.entries(indexData)) {
+            await g_index.import(key, data);
+        }
+    } else {
+        console.log('Reusing existing search index');
+    }
+
+    // Perform search
+    const results = await g_index.search({
+        query,
+        field: 'content'
+    });
+
+    if (results.length > 0) {
+        g_searchResultsArray = [];
+        results.forEach(result => {
+            result.result.forEach(docId => {
+                const doc = g_index.store[docId];
+                if (doc && doc.content) {
+                    const searchTermIndex = doc.content.toLowerCase().indexOf(query);
+                    const contextBefore = doc.content.substring(Math.max(0, searchTermIndex - 30), searchTermIndex);
+                    const contextAfter = doc.content.substring(searchTermIndex + query.length, Math.min(doc.content.length, searchTermIndex + query.length + 30));
+                    const searchResultHtml = `
+                      <div class="search-result">
+                        <a href="${doc.url}" class="search-result-title" onclick="scrollToTOC('${doc.url}')">${doc.title}</a>
+                        <div class="search-result-context">...${contextBefore}<strong>${query}</strong>${contextAfter}...</div>
+                      </div>
+                    `;
+                    const resultElement = document.createElement('div');
+                    resultElement.innerHTML = searchResultHtml;
+                    g_searchResults.appendChild(resultElement);
+                    g_searchResultsArray.push(resultElement);
+
+                    // Automatically select the first result
+                    if (g_searchResultsArray.length === 1) {
+                        g_currentSelectionIndex = 0;
+                        updateSelectedResult();
+                    }
+                }
+            });
+        });
+        g_searchResults.style.display = 'block';
+        g_searchResults.focus();  // Focus on search results whenever there are results
+    } else {
+        g_searchResults.style.display = 'none';
+    }
+});
+
+// Trigger the TOC link click to use TocBot's smooth scrolling behavior
+function scrollToTOC(url) {
+    const elementId = url.split('#')[1];
+    const tocLink = document.querySelector(`.toc-sidebar a[href="#${elementId}"]`);
+
+    if (tocLink) {
+        tocLink.click(); // Simulate a click on the TOC link for smooth scroll
+        highlightSelectedSection(elementId); // Highlight the section in yellow
+        closeModalAfterClick();
+    }
+}
+
+// Highlight the selected section
+function highlightSelectedSection(sectionId) {
+    // Remove the previous highlight, if any
+    if (g_highlightedSection) {
+        g_highlightedSection.classList.remove('highlight-section');
+    }
+
+    // Highlight the new section
+    const sectionElement = document.getElementById(sectionId);
+    if (sectionElement) {
+        sectionElement.classList.add('highlight-section');
+        g_highlightedSection = sectionElement;
+    }
+}
+
+// Close modal after clicking a search result
+function closeModalAfterClick() {
+    g_searchModal.style.display = 'none';
+}
\ No newline at end of file

From efdebefab9c4a6b1d4a75d567c352ca3a9cd100c Mon Sep 17 00:00:00 2001
From: David Barrett <dbarrett@expensify.com>
Date: Sun, 17 Nov 2024 14:23:21 -0800
Subject: [PATCH 08/13] Prettified the JS

---
 help/default.js | 86 ++++++++++++++++++++++++-------------------------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/help/default.js b/help/default.js
index b92433e121ac..0884de48bab2 100644
--- a/help/default.js
+++ b/help/default.js
@@ -15,39 +15,39 @@ function scrollActiveLinkIntoView() {
     if (activeLink) {
         activeLink.scrollIntoView({
             behavior: 'smooth',
-            block: 'nearest'
+            block: 'nearest',
         });
     }
 }
 
 tocbot.init({
-  tocSelector: '.js-toc',
-  contentSelector: '.js-toc-content',
-  headingSelector: 'h1, h2, h3, h4, h5, h6',
-  collapseDepth: 4,
-  orderedList: false,
-  scrollSmooth: true,
-  scrollToActive: true,
-  enableUrlHashUpdateOnScroll: false,
-  headingsOffset: 80,
-  scrollSmoothOffset: -80,
-  tocScrollingWrapper: document.querySelector('.toc-sidebar'),
-  tocScrollOffset: 80,
-  headingObjectCallback: function(obj, element) {
-    const tocTitle = element.getAttribute('data-toc-title');
-    if (tocTitle) {
-        obj.textContent = tocTitle;
-    }
-    return obj;
-  },
-  onClick: function(e) {
-      setTimeout(scrollActiveLinkIntoView, 300);
-      document.getElementById('toc-sidebar').classList.remove('open'); // Close TOC after clicking
-  },
-  scrollEndCallback: function() {
-      updateURLHashOnScroll();
-      scrollActiveLinkIntoView();
-  }
+    tocSelector: '.js-toc',
+    contentSelector: '.js-toc-content',
+    headingSelector: 'h1, h2, h3, h4, h5, h6',
+    collapseDepth: 4,
+    orderedList: false,
+    scrollSmooth: true,
+    scrollToActive: true,
+    enableUrlHashUpdateOnScroll: false,
+    headingsOffset: 80,
+    scrollSmoothOffset: -80,
+    tocScrollingWrapper: document.querySelector('.toc-sidebar'),
+    tocScrollOffset: 80,
+    headingObjectCallback: function (obj, element) {
+        const tocTitle = element.getAttribute('data-toc-title');
+        if (tocTitle) {
+            obj.textContent = tocTitle;
+        }
+        return obj;
+    },
+    onClick: function (e) {
+        setTimeout(scrollActiveLinkIntoView, 300);
+        document.getElementById('toc-sidebar').classList.remove('open'); // Close TOC after clicking
+    },
+    scrollEndCallback: function () {
+        updateURLHashOnScroll();
+        scrollActiveLinkIntoView();
+    },
 });
 
 function adjustAnchorOnLoad() {
@@ -56,7 +56,7 @@ function adjustAnchorOnLoad() {
         if (element) {
             window.scrollTo({
                 top: element.getBoundingClientRect().top + window.pageYOffset - 80,
-                behavior: 'smooth'
+                behavior: 'smooth',
             });
         }
     }
@@ -65,7 +65,7 @@ function adjustAnchorOnLoad() {
 window.addEventListener('load', adjustAnchorOnLoad);
 
 // Toggle sidebar on hamburger click
-document.getElementById('hamburger').addEventListener('click', function() {
+document.getElementById('hamburger').addEventListener('click', function () {
     var sidebar = document.getElementById('toc-sidebar');
     sidebar.classList.toggle('open');
 });
@@ -99,7 +99,7 @@ function showSearchModal() {
 g_searchIcon.addEventListener('click', showSearchModal);
 
 // Open modal when Cmd+K is pressed
-document.addEventListener('keydown', function(event) {
+document.addEventListener('keydown', function (event) {
     if (event.metaKey && event.key === 'k') {
         event.preventDefault();
         showSearchModal();
@@ -107,21 +107,21 @@ document.addEventListener('keydown', function(event) {
 });
 
 // Close modal when pressing "Escape"
-document.addEventListener('keydown', function(event) {
+document.addEventListener('keydown', function (event) {
     if (event.key === 'Escape' && g_searchModal.style.display === 'flex') {
         g_searchModal.style.display = 'none';
     }
 });
 
 // Close modal when clicking outside of modal content
-window.addEventListener('click', function(event) {
+window.addEventListener('click', function (event) {
     if (event.target == g_searchModal) {
         g_searchModal.style.display = 'none';
     }
 });
 
 // Handle keyboard navigation (arrow keys and enter)
-g_searchResults.addEventListener('keydown', function(event) {
+g_searchResults.addEventListener('keydown', function (event) {
     // If the modal is being shown and has active search results, capture keydown
     if (g_searchModal.style.display === 'flex' && g_searchResultsArray.length > 0) {
         if (event.key === 'ArrowDown') {
@@ -157,7 +157,7 @@ function updateSelectedResult() {
     g_searchResultsArray.forEach((result, index) => {
         if (index === g_currentSelectionIndex) {
             result.classList.add('highlight');
-            result.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            result.scrollIntoView({behavior: 'smooth', block: 'nearest'});
         } else {
             result.classList.remove('highlight');
         }
@@ -173,7 +173,7 @@ function navigateToSelectedResult() {
 }
 
 // Execute search when pressing "Enter" in the input field
-g_searchInput.addEventListener('keydown', function(event) {
+g_searchInput.addEventListener('keydown', function (event) {
     if (event.key === 'Enter') {
         event.preventDefault();
         g_searchSubmit.click();
@@ -184,7 +184,7 @@ g_searchInput.addEventListener('keydown', function(event) {
 const g_searchSubmit = document.getElementById('search-submit');
 
 // Handle submitting the search query
-g_searchSubmit.addEventListener('click', async function() {
+g_searchSubmit.addEventListener('click', async function () {
     const query = g_searchInput.value.trim().toLowerCase();
     g_searchResults.innerHTML = '';
     g_currentSelectionIndex = -1;
@@ -204,7 +204,7 @@ g_searchSubmit.addEventListener('click', async function() {
                 id: 'id',
                 index: ['content'], // Index on the content field
                 store: ['title', 'url', 'content'], // Store title, URL, and content
-            }
+            },
         });
 
         // Import the index
@@ -218,13 +218,13 @@ g_searchSubmit.addEventListener('click', async function() {
     // Perform search
     const results = await g_index.search({
         query,
-        field: 'content'
+        field: 'content',
     });
 
     if (results.length > 0) {
         g_searchResultsArray = [];
-        results.forEach(result => {
-            result.result.forEach(docId => {
+        results.forEach((result) => {
+            result.result.forEach((docId) => {
                 const doc = g_index.store[docId];
                 if (doc && doc.content) {
                     const searchTermIndex = doc.content.toLowerCase().indexOf(query);
@@ -250,7 +250,7 @@ g_searchSubmit.addEventListener('click', async function() {
             });
         });
         g_searchResults.style.display = 'block';
-        g_searchResults.focus();  // Focus on search results whenever there are results
+        g_searchResults.focus(); // Focus on search results whenever there are results
     } else {
         g_searchResults.style.display = 'none';
     }
@@ -286,4 +286,4 @@ function highlightSelectedSection(sectionId) {
 // Close modal after clicking a search result
 function closeModalAfterClick() {
     g_searchModal.style.display = 'none';
-}
\ No newline at end of file
+}

From cdb71f320b46b1ce68fd7c04ab2731dcd08f1b16 Mon Sep 17 00:00:00 2001
From: David Barrett <dbarrett@expensify.com>
Date: Sun, 17 Nov 2024 14:48:11 -0800
Subject: [PATCH 09/13] Fixed a lot of lint errors

---
 help/default.js | 123 ++++++++++++++++++++++--------------------------
 1 file changed, 55 insertions(+), 68 deletions(-)

diff --git a/help/default.js b/help/default.js
index 0884de48bab2..ba85a8306680 100644
--- a/help/default.js
+++ b/help/default.js
@@ -1,12 +1,11 @@
 function updateURLHashOnScroll() {
     const activeLink = document.querySelector('.toc-sidebar .is-active-link');
-    if (activeLink) {
-        const hash = activeLink.getAttribute('href');
-        if (history.pushState) {
-            history.pushState(null, null, hash);
-        } else {
-            window.location.hash = hash;
-        }
+    if (!activeLink) return;
+    const hash = activeLink.getAttribute('href');
+    if (window.history.pushState) {
+        window.history.pushState(null, null, hash);
+    } else {
+        window.location.hash = hash;
     }
 }
 
@@ -20,7 +19,8 @@ function scrollActiveLinkIntoView() {
     }
 }
 
-tocbot.init({
+// Assuming tocbot is globally defined
+window.tocbot.init({
     tocSelector: '.js-toc',
     contentSelector: '.js-toc-content',
     headingSelector: 'h1, h2, h3, h4, h5, h6',
@@ -33,32 +33,33 @@ tocbot.init({
     scrollSmoothOffset: -80,
     tocScrollingWrapper: document.querySelector('.toc-sidebar'),
     tocScrollOffset: 80,
-    headingObjectCallback: function (obj, element) {
+    headingObjectCallback(obj, element) {
         const tocTitle = element.getAttribute('data-toc-title');
         if (tocTitle) {
-            obj.textContent = tocTitle;
+            const newObj = { ...obj };
+            newObj.textContent = tocTitle;
+            return newObj;
         }
         return obj;
     },
-    onClick: function (e) {
+    onClick() {
         setTimeout(scrollActiveLinkIntoView, 300);
-        document.getElementById('toc-sidebar').classList.remove('open'); // Close TOC after clicking
+        document.getElementById('toc-sidebar').classList.remove('open');
     },
-    scrollEndCallback: function () {
+    scrollEndCallback() {
         updateURLHashOnScroll();
         scrollActiveLinkIntoView();
     },
 });
 
 function adjustAnchorOnLoad() {
-    if (window.location.hash) {
-        const element = document.querySelector(window.location.hash);
-        if (element) {
-            window.scrollTo({
-                top: element.getBoundingClientRect().top + window.pageYOffset - 80,
-                behavior: 'smooth',
-            });
-        }
+    if (!window.location.hash) return;
+    const element = document.querySelector(window.location.hash);
+    if (element) {
+        window.scrollTo({
+            top: element.getBoundingClientRect().top + window.pageYOffset - 80,
+            behavior: 'smooth',
+        });
     }
 }
 
@@ -66,7 +67,7 @@ window.addEventListener('load', adjustAnchorOnLoad);
 
 // Toggle sidebar on hamburger click
 document.getElementById('hamburger').addEventListener('click', function () {
-    var sidebar = document.getElementById('toc-sidebar');
+    let sidebar = document.getElementById('toc-sidebar');
     sidebar.classList.toggle('open');
 });
 
@@ -89,7 +90,7 @@ function showSearchModal() {
     g_searchModal.style.display = 'flex';
     if (g_searchResultsArray.length > 0) {
         g_searchResults.style.display = 'block';
-        g_searchResults.focus(); // Focus on search results if they exist
+        g_searchResults.focus();
     } else {
         g_searchInput.focus();
     }
@@ -115,42 +116,38 @@ document.addEventListener('keydown', function (event) {
 
 // Close modal when clicking outside of modal content
 window.addEventListener('click', function (event) {
-    if (event.target == g_searchModal) {
+    if (event.target === g_searchModal) {
         g_searchModal.style.display = 'none';
     }
 });
 
 // Handle keyboard navigation (arrow keys and enter)
 g_searchResults.addEventListener('keydown', function (event) {
-    // If the modal is being shown and has active search results, capture keydown
-    if (g_searchModal.style.display === 'flex' && g_searchResultsArray.length > 0) {
-        if (event.key === 'ArrowDown') {
-            event.preventDefault();
-            selectNextResult();
-        } else if (event.key === 'ArrowUp') {
-            event.preventDefault();
-            selectPreviousResult();
-        } else if (event.key === 'Enter' && g_currentSelectionIndex >= 0) {
-            event.preventDefault();
-            navigateToSelectedResult();
-        } else if (!['Tab', 'Shift'].includes(event.key)) {
-            g_searchInput.focus(); // Focus back on input if typing occurs
-        }
+    if (g_searchModal.style.display !== 'flex' || g_searchResultsArray.length === 0) return;
+    if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        selectNextResult();
+    } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        selectPreviousResult();
+    } else if (event.key === 'Enter' && g_currentSelectionIndex >= 0) {
+        event.preventDefault();
+        navigateToSelectedResult();
+    } else if (!['Tab', 'Shift'].includes(event.key)) {
+        g_searchInput.focus();
     }
 });
 
 function selectNextResult() {
-    if (g_currentSelectionIndex < g_searchResultsArray.length - 1) {
-        g_currentSelectionIndex++;
-        updateSelectedResult();
-    }
+    if (g_currentSelectionIndex >= g_searchResultsArray.length - 1) return;
+    g_currentSelectionIndex++;
+    updateSelectedResult();
 }
 
 function selectPreviousResult() {
-    if (g_currentSelectionIndex > 0) {
-        g_currentSelectionIndex--;
-        updateSelectedResult();
-    }
+    if (g_currentSelectionIndex <= 0) return;
+    g_currentSelectionIndex--;
+    updateSelectedResult();
 }
 
 function updateSelectedResult() {
@@ -176,15 +173,13 @@ function navigateToSelectedResult() {
 g_searchInput.addEventListener('keydown', function (event) {
     if (event.key === 'Enter') {
         event.preventDefault();
-        g_searchSubmit.click();
+        document.getElementById('search-submit').click();
     }
 });
 
 // Perform search when search button is clicked
-const g_searchSubmit = document.getElementById('search-submit');
-
-// Handle submitting the search query
-g_searchSubmit.addEventListener('click', async function () {
+// Assuming search-submit is defined
+document.getElementById('search-submit').addEventListener('click', async function () {
     const query = g_searchInput.value.trim().toLowerCase();
     g_searchResults.innerHTML = '';
     g_currentSelectionIndex = -1;
@@ -194,28 +189,23 @@ g_searchSubmit.addEventListener('click', async function () {
         return;
     }
 
-    // Load the JSON search index file, if not already defined
     if (g_index === null) {
-        console.log('Loading search index from:', '/searchIndex.json');
+        // Assuming the fetch works correctly without console.log
         const response = await fetch('/searchIndex.json');
         const indexData = await response.json();
-        g_index = new FlexSearch.Document({
+        g_index = new window.FlexSearch.Document({
             document: {
                 id: 'id',
-                index: ['content'], // Index on the content field
-                store: ['title', 'url', 'content'], // Store title, URL, and content
+                index: ['content'],
+                store: ['title', 'url', 'content'],
             },
         });
 
-        // Import the index
         for (const [key, data] of Object.entries(indexData)) {
-            await g_index.import(key, data);
+            g_index.import(key, data);
         }
-    } else {
-        console.log('Reusing existing search index');
     }
 
-    // Perform search
     const results = await g_index.search({
         query,
         field: 'content',
@@ -241,7 +231,6 @@ g_searchSubmit.addEventListener('click', async function () {
                     g_searchResults.appendChild(resultElement);
                     g_searchResultsArray.push(resultElement);
 
-                    // Automatically select the first result
                     if (g_searchResultsArray.length === 1) {
                         g_currentSelectionIndex = 0;
                         updateSelectedResult();
@@ -250,7 +239,7 @@ g_searchSubmit.addEventListener('click', async function () {
             });
         });
         g_searchResults.style.display = 'block';
-        g_searchResults.focus(); // Focus on search results whenever there are results
+        g_searchResults.focus();
     } else {
         g_searchResults.style.display = 'none';
     }
@@ -262,20 +251,18 @@ function scrollToTOC(url) {
     const tocLink = document.querySelector(`.toc-sidebar a[href="#${elementId}"]`);
 
     if (tocLink) {
-        tocLink.click(); // Simulate a click on the TOC link for smooth scroll
-        highlightSelectedSection(elementId); // Highlight the section in yellow
+        tocLink.click();
+        highlightSelectedSection(elementId);
         closeModalAfterClick();
     }
 }
 
 // Highlight the selected section
 function highlightSelectedSection(sectionId) {
-    // Remove the previous highlight, if any
     if (g_highlightedSection) {
         g_highlightedSection.classList.remove('highlight-section');
     }
 
-    // Highlight the new section
     const sectionElement = document.getElementById(sectionId);
     if (sectionElement) {
         sectionElement.classList.add('highlight-section');
@@ -286,4 +273,4 @@ function highlightSelectedSection(sectionId) {
 // Close modal after clicking a search result
 function closeModalAfterClick() {
     g_searchModal.style.display = 'none';
-}
+}
\ No newline at end of file

From 7b4eebf90465c5f4425ccbd0ed05c7b2aeb7871e Mon Sep 17 00:00:00 2001
From: David Barrett <dbarrett@expensify.com>
Date: Sun, 17 Nov 2024 14:52:18 -0800
Subject: [PATCH 10/13] Prettied the code

---
 help/default.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/help/default.js b/help/default.js
index ba85a8306680..d8e75413597a 100644
--- a/help/default.js
+++ b/help/default.js
@@ -36,7 +36,7 @@ window.tocbot.init({
     headingObjectCallback(obj, element) {
         const tocTitle = element.getAttribute('data-toc-title');
         if (tocTitle) {
-            const newObj = { ...obj };
+            const newObj = {...obj};
             newObj.textContent = tocTitle;
             return newObj;
         }
@@ -273,4 +273,4 @@ function highlightSelectedSection(sectionId) {
 // Close modal after clicking a search result
 function closeModalAfterClick() {
     g_searchModal.style.display = 'none';
-}
\ No newline at end of file
+}

From e8e3ce21848519e0737163c390b503d498578e48 Mon Sep 17 00:00:00 2001
From: David Barrett <dbarrett@expensify.com>
Date: Sun, 17 Nov 2024 15:35:38 -0800
Subject: [PATCH 11/13] fixing more lint/pretty issues

---
 help/default.js | 80 ++++++++++++++++++++++++++-----------------------
 1 file changed, 43 insertions(+), 37 deletions(-)

diff --git a/help/default.js b/help/default.js
index d8e75413597a..84a8991ac9f2 100644
--- a/help/default.js
+++ b/help/default.js
@@ -1,6 +1,8 @@
 function updateURLHashOnScroll() {
     const activeLink = document.querySelector('.toc-sidebar .is-active-link');
-    if (!activeLink) return;
+    if (!activeLink) {
+        return;
+    }
     const hash = activeLink.getAttribute('href');
     if (window.history.pushState) {
         window.history.pushState(null, null, hash);
@@ -53,7 +55,9 @@ window.tocbot.init({
 });
 
 function adjustAnchorOnLoad() {
-    if (!window.location.hash) return;
+    if (!window.location.hash) {
+        return;
+    }
     const element = document.querySelector(window.location.hash);
     if (element) {
         window.scrollTo({
@@ -67,7 +71,7 @@ window.addEventListener('load', adjustAnchorOnLoad);
 
 // Toggle sidebar on hamburger click
 document.getElementById('hamburger').addEventListener('click', function () {
-    let sidebar = document.getElementById('toc-sidebar');
+    const sidebar = document.getElementById('toc-sidebar');
     sidebar.classList.toggle('open');
 });
 
@@ -123,7 +127,9 @@ window.addEventListener('click', function (event) {
 
 // Handle keyboard navigation (arrow keys and enter)
 g_searchResults.addEventListener('keydown', function (event) {
-    if (g_searchModal.style.display !== 'flex' || g_searchResultsArray.length === 0) return;
+    if (g_searchModal.style.display !== 'flex' || g_searchResultsArray.length === 0) {
+        return;
+    }
     if (event.key === 'ArrowDown') {
         event.preventDefault();
         selectNextResult();
@@ -139,13 +145,17 @@ g_searchResults.addEventListener('keydown', function (event) {
 });
 
 function selectNextResult() {
-    if (g_currentSelectionIndex >= g_searchResultsArray.length - 1) return;
+    if (g_currentSelectionIndex >= g_searchResultsArray.length - 1) {
+        return;
+    }
     g_currentSelectionIndex++;
     updateSelectedResult();
 }
 
 function selectPreviousResult() {
-    if (g_currentSelectionIndex <= 0) return;
+    if (g_currentSelectionIndex <= 0) {
+        return;
+    }
     g_currentSelectionIndex--;
     updateSelectedResult();
 }
@@ -179,7 +189,7 @@ g_searchInput.addEventListener('keydown', function (event) {
 
 // Perform search when search button is clicked
 // Assuming search-submit is defined
-document.getElementById('search-submit').addEventListener('click', async function () {
+document.getElementById('search-submit').addEventListener('click', function () {
     const query = g_searchInput.value.trim().toLowerCase();
     g_searchResults.innerHTML = '';
     g_currentSelectionIndex = -1;
@@ -191,27 +201,35 @@ document.getElementById('search-submit').addEventListener('click', async functio
 
     if (g_index === null) {
         // Assuming the fetch works correctly without console.log
-        const response = await fetch('/searchIndex.json');
-        const indexData = await response.json();
-        g_index = new window.FlexSearch.Document({
-            document: {
-                id: 'id',
-                index: ['content'],
-                store: ['title', 'url', 'content'],
-            },
-        });
+        fetch('/searchIndex.json')
+            .then((response) => response.json())
+            .then((indexData) => {
+                g_index = new window.FlexSearch.Document({
+                    document: {
+                        id: 'id',
+                        index: ['content'],
+                        store: ['title', 'url', 'content'],
+                    },
+                });
 
-        for (const [key, data] of Object.entries(indexData)) {
-            g_index.import(key, data);
-        }
+                for (const [key, data] of Object.entries(indexData)) {
+                    g_index.import(key, data);
+                }
+
+                performSearch(query);
+            });
+    } else {
+        performSearch(query);
     }
+});
 
-    const results = await g_index.search({
+function performSearch(query) {
+    const results = g_index.search({
         query,
         field: 'content',
     });
 
-    if (results.length > 0) {
+    if (results && results.length > 0) {
         g_searchResultsArray = [];
         results.forEach((result) => {
             result.result.forEach((docId) => {
@@ -221,10 +239,10 @@ document.getElementById('search-submit').addEventListener('click', async functio
                     const contextBefore = doc.content.substring(Math.max(0, searchTermIndex - 30), searchTermIndex);
                     const contextAfter = doc.content.substring(searchTermIndex + query.length, Math.min(doc.content.length, searchTermIndex + query.length + 30));
                     const searchResultHtml = `
-                      <div class="search-result">
-                        <a href="${doc.url}" class="search-result-title" onclick="scrollToTOC('${doc.url}')">${doc.title}</a>
-                        <div class="search-result-context">...${contextBefore}<strong>${query}</strong>${contextAfter}...</div>
-                      </div>
+                        <div class="search-result">
+                            <a href="${doc.url}" class="search-result-title">${doc.title}</a>
+                            <div class="search-result-context">...${contextBefore}<strong>${query}</strong>${contextAfter}...</div>
+                        </div>
                     `;
                     const resultElement = document.createElement('div');
                     resultElement.innerHTML = searchResultHtml;
@@ -243,18 +261,6 @@ document.getElementById('search-submit').addEventListener('click', async functio
     } else {
         g_searchResults.style.display = 'none';
     }
-});
-
-// Trigger the TOC link click to use TocBot's smooth scrolling behavior
-function scrollToTOC(url) {
-    const elementId = url.split('#')[1];
-    const tocLink = document.querySelector(`.toc-sidebar a[href="#${elementId}"]`);
-
-    if (tocLink) {
-        tocLink.click();
-        highlightSelectedSection(elementId);
-        closeModalAfterClick();
-    }
 }
 
 // Highlight the selected section

From 6bce953fe5d67d76705b32eb534a168cbca29968 Mon Sep 17 00:00:00 2001
From: David Barrett <dbarrett@expensify.com>
Date: Sun, 17 Nov 2024 16:14:30 -0800
Subject: [PATCH 12/13] More lint fixes

---
 help/default.js | 42 ++++++++++++++----------------------------
 1 file changed, 14 insertions(+), 28 deletions(-)

diff --git a/help/default.js b/help/default.js
index 84a8991ac9f2..3ebb4a37de5b 100644
--- a/help/default.js
+++ b/help/default.js
@@ -105,24 +105,27 @@ g_searchIcon.addEventListener('click', showSearchModal);
 
 // Open modal when Cmd+K is pressed
 document.addEventListener('keydown', function (event) {
-    if (event.metaKey && event.key === 'k') {
-        event.preventDefault();
-        showSearchModal();
+    if (!(event.metaKey && event.key === 'k')) {
+        return;
     }
+    event.preventDefault();
+    showSearchModal();
 });
 
 // Close modal when pressing "Escape"
 document.addEventListener('keydown', function (event) {
-    if (event.key === 'Escape' && g_searchModal.style.display === 'flex') {
-        g_searchModal.style.display = 'none';
+    if (!(event.key === 'Escape' && g_searchModal.style.display === 'flex')) {
+        return;
     }
+    g_searchModal.style.display = 'none';
 });
 
 // Close modal when clicking outside of modal content
 window.addEventListener('click', function (event) {
-    if (event.target === g_searchModal) {
-        g_searchModal.style.display = 'none';
+    if (!(event.target === g_searchModal)) {
+        return;
     }
+    g_searchModal.style.display = 'none';
 });
 
 // Handle keyboard navigation (arrow keys and enter)
@@ -181,10 +184,11 @@ function navigateToSelectedResult() {
 
 // Execute search when pressing "Enter" in the input field
 g_searchInput.addEventListener('keydown', function (event) {
-    if (event.key === 'Enter') {
-        event.preventDefault();
-        document.getElementById('search-submit').click();
+    if (!(event.key === 'Enter')) {
+        return;
     }
+    event.preventDefault();
+    document.getElementById('search-submit').click();
 });
 
 // Perform search when search button is clicked
@@ -262,21 +266,3 @@ function performSearch(query) {
         g_searchResults.style.display = 'none';
     }
 }
-
-// Highlight the selected section
-function highlightSelectedSection(sectionId) {
-    if (g_highlightedSection) {
-        g_highlightedSection.classList.remove('highlight-section');
-    }
-
-    const sectionElement = document.getElementById(sectionId);
-    if (sectionElement) {
-        sectionElement.classList.add('highlight-section');
-        g_highlightedSection = sectionElement;
-    }
-}
-
-// Close modal after clicking a search result
-function closeModalAfterClick() {
-    g_searchModal.style.display = 'none';
-}

From 4715f2e54208a2d37f38a9ebbfdab3a6bdef33d1 Mon Sep 17 00:00:00 2001
From: David Barrett <dbarrett@expensify.com>
Date: Sun, 17 Nov 2024 16:25:49 -0800
Subject: [PATCH 13/13] Even more lint fixes

---
 help/default.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/help/default.js b/help/default.js
index 3ebb4a37de5b..1c27ade6c9e1 100644
--- a/help/default.js
+++ b/help/default.js
@@ -78,7 +78,6 @@ document.getElementById('hamburger').addEventListener('click', function () {
 // Keep track of the search results
 let g_searchResultsArray = [];
 let g_currentSelectionIndex = -1;
-let g_highlightedSection = null;
 
 // Declare the index variable globally so it can be reused
 let g_index = null;
