- {% if page.url == "/" or page.url contains "/hubs/" %}
+ {% unless page.url == "/" or page.url contains "/search" %}
+
+ {% endunless %}
+ {% if page.url contains "/search" %}
+
+ {% elsif page.url == "/" or page.url contains "/hubs/" %}
{% include lhn-template.html %}
{% else %}
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index a0a0ff548351c..e7c926e066af7 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -64,6 +64,7 @@ body {
min-height: 100%;
background: var(--color-appBG);
color: var(--color-text-supporting);
+ overflow-x: hidden;
}
hr {
@@ -222,6 +223,7 @@ button {
position: fixed;
background-color: var(--color-highlightBG);
box-sizing: border-box;
+ z-index: 1;
border-right-color: var(--color-borders);
border-right-width: 1px;
border-style: solid;
@@ -282,7 +284,7 @@ button {
padding: 24px;
@include breakpoint($breakpoint-tablet) {
- padding: 44px;
+ padding: 44px 44px 40px 44px;
}
#header-button {
@@ -367,6 +369,10 @@ button {
}
}
+ h1.homepage-title {
+ font-size: 2.5em;
+ }
+
.article {
.hidden {
display: none;
@@ -710,6 +716,59 @@ button {
}
}
+// Keep mobile LHN layout (top bar) on tablet
+.mobile-lhn {
+ @include breakpoint($breakpoint-tablet) {
+ #lhn {
+ width: 100%;
+ height: auto;
+ }
+
+ #lhn #lhn-content {
+ display: none;
+
+ &.expanded {
+ display: block;
+ }
+ }
+
+ #lhn .lhn-header {
+ padding: 24px;
+
+ #header-button {
+ display: block;
+ }
+ }
+
+ #content-area {
+ margin-left: 0;
+ }
+ }
+
+ @include breakpoint($breakpoint-desktop) {
+ #lhn {
+ width: 420px;
+ height: 100%;
+ }
+
+ #lhn #lhn-content {
+ display: block;
+ }
+
+ #lhn .lhn-header {
+ padding: 44px 44px 40px 44px;
+
+ #header-button {
+ display: none;
+ }
+ }
+
+ #content-area {
+ margin-left: 420px;
+ }
+ }
+}
+
.lhn-items {
ol,
ul {
@@ -896,7 +955,7 @@ button {
font-size: 1.2em;
font-weight: normal;
&.with-margin {
- margin: 20px 0 8px 0;
+ margin: 12px 0 8px 0;
}
}
@@ -931,6 +990,10 @@ button {
}
}
h2 {
+ font-family: 'Expensify New Kansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+ font-weight: 500;
+ font-size: 22px;
+ line-height: 28px;
padding-bottom: 24px;
}
p {
@@ -939,6 +1002,301 @@ button {
.cards-group {
padding-bottom: 32px;
}
+ h3.title {
+ font-family: 'Expensify Neue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+ font-weight: 700;
+ font-style: normal;
+ font-size: 1em;
+ }
+
+ &-hero {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 20px;
+ padding-bottom: 48px;
+
+ &__content {
+ flex: 1;
+ }
+
+ &__illustration {
+ display: none;
+
+ @include breakpoint($breakpoint-desktop) {
+ display: block;
+ }
+
+ img {
+ width: 280px;
+ height: auto;
+ }
+ }
+ }
+
+ &-search {
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+ max-width: 537px;
+
+ .search-input-wrapper {
+ flex: 1;
+ }
+
+ .search-button {
+ width: 52px;
+ height: 52px;
+ flex-shrink: 0;
+ }
+ }
+
+ &-search-clear {
+ position: absolute;
+ right: 8px;
+ top: 50%;
+ transform: translateY(-50%);
+ background: none;
+ padding: 4px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+
+ .base-icon {
+ width: 18px;
+ height: 18px;
+ }
+ }
+
+ &-results-container {
+ margin-top: 48px;
+
+ .search-loading,
+ .search-no-results,
+ .search-error {
+ padding: 0;
+ }
+
+ .search-result-item {
+ padding-left: 20px;
+ padding-right: 20px;
+ margin-left: -20px;
+ margin-right: -20px;
+ }
+ }
+
+
+ .search-page-form {
+ max-width: none;
+ box-sizing: border-box;
+ width: 100%;
+ }
+
+ .search-columns {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ margin-top: 48px;
+
+ @include breakpoint($breakpoint-tablet) {
+ flex-direction: row;
+ gap: 32px;
+ }
+ }
+
+ .search-articles-column {
+ flex: 1;
+ min-width: 0;
+ order: 2;
+
+ @include breakpoint($breakpoint-tablet) {
+ order: 1;
+ }
+
+ .homepage-results-container {
+ margin-top: 0;
+ }
+ }
+
+ .ai-answer-container {
+ order: 1;
+
+ @include breakpoint($breakpoint-tablet) {
+ order: 2;
+ width: 400px;
+ flex-shrink: 0;
+ }
+ }
+
+ .ai-panel {
+ background-color: var(--color-highlightBG);
+ border-radius: 12px;
+ padding: 20px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+
+ &.ai-panel-loading {
+ min-height: 320px;
+
+ @include breakpoint($breakpoint-tablet) {
+ min-height: 676px;
+ }
+ }
+ }
+
+ .ai-avatar {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ }
+
+ .ai-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 16px;
+ }
+
+ .ai-title {
+ font-weight: 700;
+ font-size: 15px;
+ color: var(--color-text);
+ }
+
+
+ .ai-content {
+ font-size: 15px;
+ line-height: 24px;
+ max-height: 320px;
+ overflow: hidden;
+ color: var(--color-text);
+ position: relative;
+
+ @include breakpoint($breakpoint-tablet) {
+ max-height: 676px;
+ }
+
+ &.has-overflow::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 60px;
+ background: linear-gradient(to bottom, transparent, var(--color-highlightBG));
+ pointer-events: none;
+ }
+
+ &.expanded {
+ max-height: none;
+
+ &::after {
+ display: none;
+ }
+
+ ~ .ai-show-more {
+ margin-top: 16px;
+
+ img {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ }
+
+ .ai-illustration {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex: 1;
+
+ img {
+ width: 102px;
+ height: 102px;
+ animation: bounce 1s ease-in-out infinite;
+ }
+ }
+
+ @keyframes bounce {
+ 0%, 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-10px);
+ }
+ }
+
+ .ai-show-more {
+ background: var(--color-button-background);
+ border: none;
+ border-radius: 9999px;
+ color: var(--color-text);
+ cursor: pointer;
+ font-size: 15px;
+ font-weight: 700;
+ padding: 12px 16px;
+ margin-top: -20px;
+ position: relative;
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ align-self: center;
+ justify-content: center;
+ gap: 8px;
+
+ &.hidden {
+ display: none;
+ }
+ }
+
+ .getting-started-cards {
+ @include breakpoint($breakpoint-desktop) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
+
+ .topic-card {
+ @extend .card;
+ flex-direction: column;
+ cursor: default;
+
+ &:hover {
+ background-color: var(--color-highlightBG);
+ }
+
+ .icon {
+ width: 48px;
+ height: 48px;
+ margin-bottom: 12px;
+ }
+
+ h3.title {
+ font-family: 'Expensify Neue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+ font-weight: 700;
+ font-style: normal;
+ padding: 0;
+ margin: 0 0 8px 0;
+ }
+ }
+
+ .topic-links {
+ list-style: none;
+ margin: 0 !important;
+ padding: 0 !important;
+
+ li {
+ padding: 0;
+ margin: 0;
+ }
+
+ a {
+ color: var(--color-link);
+ font-weight: normal;
+ font-size: 15px;
+ line-height: 28px;
+ }
+ }
}
.centered-content {
@@ -1156,3 +1514,4 @@ button {
height: 12px;
width: 12px;
}
+
diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss
index 7235e1de31520..e0984ceeb31a4 100644
--- a/docs/_sass/_search-bar.scss
+++ b/docs/_sass/_search-bar.scss
@@ -5,75 +5,11 @@
.search-icon {
margin: auto 0px;
margin-left: auto;
-}
-
-#sidebar-search {
- background-color: var(--color-appBG);
- width: 375px;
- position: fixed;
- display: flex;
- flex-direction: column;
- bottom: 0;
- top: 0;
- right: 0;
- z-index: 2;
-}
-
-#sidebar-search > div:last-child {
- flex-grow: 1;
- overflow-y: auto;
- -ms-overflow-style: none;
- scrollbar-width: none;
- &::-webkit-scrollbar {
- display: none;
- }
-}
-
-@media only screen and (max-width: $breakpoint-tablet) {
- #sidebar-search {
- width: 100%;
- }
-}
-
-.searchbar-title-wrapper {
- display: flex;
- align-items: center;
- padding: 24px 20px;
-}
-
-.search-title {
- font-size: 17px;
- margin: 0;
- padding: 0;
- line-height: 24px;
-}
-
-#toggle-search-close {
- display: flex;
- align-items: center;
- margin-right: 10px;
-}
-
-/* Sidebar Layer */
-#sidebar-layer {
- position: fixed;
display: none;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: var(--color-overlay);
- z-index: 1;
-}
-.search-form {
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: 12px;
- margin: 12px 20px 16px 20px;
+ @media only screen and (max-width: $breakpoint-tablet) {
+ display: block;
+ }
}
.search-input-wrapper {
@@ -164,6 +100,7 @@
padding: 12px 20px;
text-decoration: none;
cursor: pointer;
+ border-radius: 8px;
&:hover,
&:focus {
background-color: var(--color-highlightBG);
@@ -203,10 +140,60 @@
height: 20px;
}
-.search-loading,
+.lhn-search-form {
+ padding-bottom: 40px;
+}
+
+.lhn-search-input-wrapper {
+ height: 52px;
+ min-height: 52px;
+ background-color: var(--color-appBG);
+}
+
.search-no-results,
.search-error {
padding: 0 20px;
color: var(--color-text-supporting);
font-size: 15px;
}
+
+@keyframes skeleton-pulse {
+ 0%, 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.5;
+ }
+}
+
+.skeleton-search-results {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.skeleton-item {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ padding: 12px 20px 12px 0;
+}
+
+.skeleton-title,
+.skeleton-description {
+ border-radius: 4px;
+ background-color: var(--color-row-hover);
+ animation: skeleton-pulse 3s ease-in-out infinite;
+}
+
+.skeleton-title {
+ height: 15px;
+ width: 60%;
+ margin: 2.5px 0;
+}
+
+.skeleton-description {
+ height: 13px;
+ width: 90%;
+ margin: 1.5px 0;
+}
diff --git a/docs/assets/images/accounting.svg b/docs/assets/images/accounting.svg
index bacc7ae21e681..80366a4eb8a8b 100644
--- a/docs/assets/images/accounting.svg
+++ b/docs/assets/images/accounting.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/arrow-right.svg b/docs/assets/images/arrow-right.svg
index 2565efbf30a5b..f38b6241824a6 100644
--- a/docs/assets/images/arrow-right.svg
+++ b/docs/assets/images/arrow-right.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/arrow-up.svg b/docs/assets/images/arrow-up.svg
index 844ef49314e47..311348e890527 100644
--- a/docs/assets/images/arrow-up.svg
+++ b/docs/assets/images/arrow-up.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/back-left.svg b/docs/assets/images/back-left.svg
index e6ea47be3da55..a31100130f46e 100644
--- a/docs/assets/images/back-left.svg
+++ b/docs/assets/images/back-left.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/bank-card.svg b/docs/assets/images/bank-card.svg
index 051d028d4af20..9d5c5d341f502 100644
--- a/docs/assets/images/bank-card.svg
+++ b/docs/assets/images/bank-card.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/chat-bubble.svg b/docs/assets/images/chat-bubble.svg
index fbab26d72b44c..f072bec71acfd 100644
--- a/docs/assets/images/chat-bubble.svg
+++ b/docs/assets/images/chat-bubble.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/circle-hourglass.svg b/docs/assets/images/circle-hourglass.svg
index 68359ab49315b..c6e1fe62e52cc 100644
--- a/docs/assets/images/circle-hourglass.svg
+++ b/docs/assets/images/circle-hourglass.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/close.svg b/docs/assets/images/close.svg
index 9b050b1e91c6c..2105d63da165b 100644
--- a/docs/assets/images/close.svg
+++ b/docs/assets/images/close.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/concierge-avatar.svg b/docs/assets/images/concierge-avatar.svg
index eb374a9a5a682..e3bf0d3e2ec89 100644
--- a/docs/assets/images/concierge-avatar.svg
+++ b/docs/assets/images/concierge-avatar.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/domains.svg b/docs/assets/images/domains.svg
index 12c0a0a0792be..4d5d60a0cb0e8 100644
--- a/docs/assets/images/domains.svg
+++ b/docs/assets/images/domains.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/down.svg b/docs/assets/images/down.svg
index c47a53f35ea6d..d961c720c6fb6 100644
--- a/docs/assets/images/down.svg
+++ b/docs/assets/images/down.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/envelope-receipt.svg b/docs/assets/images/envelope-receipt.svg
index 650f4dca9145a..990e3a581d66c 100644
--- a/docs/assets/images/envelope-receipt.svg
+++ b/docs/assets/images/envelope-receipt.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/expensify-footer-logo--vertical.svg b/docs/assets/images/expensify-footer-logo--vertical.svg
index 9cd5e26cc8f20..2a125086d740c 100644
--- a/docs/assets/images/expensify-footer-logo--vertical.svg
+++ b/docs/assets/images/expensify-footer-logo--vertical.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/expensify-footer-logo.svg b/docs/assets/images/expensify-footer-logo.svg
index 9e3f837f73650..561e9b76a2c58 100644
--- a/docs/assets/images/expensify-footer-logo.svg
+++ b/docs/assets/images/expensify-footer-logo.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/expensify-help.svg b/docs/assets/images/expensify-help.svg
index 74fc63ffae966..e7b8898014d1e 100644
--- a/docs/assets/images/expensify-help.svg
+++ b/docs/assets/images/expensify-help.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/fullscreen.svg b/docs/assets/images/fullscreen.svg
index 6f7863318bb76..40296550a79af 100644
--- a/docs/assets/images/fullscreen.svg
+++ b/docs/assets/images/fullscreen.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/gears.svg b/docs/assets/images/gears.svg
index a598dbee28d5a..f39c6a9c036c8 100644
--- a/docs/assets/images/gears.svg
+++ b/docs/assets/images/gears.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/hand-card.svg b/docs/assets/images/hand-card.svg
index 4c5b7cfcc666c..7d9e18fbc0c44 100644
--- a/docs/assets/images/hand-card.svg
+++ b/docs/assets/images/hand-card.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/handshake.svg b/docs/assets/images/handshake.svg
index 1a2f9badc781a..36c1fa42fca46 100644
--- a/docs/assets/images/handshake.svg
+++ b/docs/assets/images/handshake.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/info.svg b/docs/assets/images/info.svg
index fbe9b3612667d..acb367fef31a6 100644
--- a/docs/assets/images/info.svg
+++ b/docs/assets/images/info.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/lightbulb.svg b/docs/assets/images/lightbulb.svg
index b15ec9ced77d0..0a1b8c402bb0d 100644
--- a/docs/assets/images/lightbulb.svg
+++ b/docs/assets/images/lightbulb.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/menu.svg b/docs/assets/images/menu.svg
index 6bc8bc8fa8f7d..adc59c3a06706 100644
--- a/docs/assets/images/menu.svg
+++ b/docs/assets/images/menu.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/money-case.svg b/docs/assets/images/money-case.svg
index e40430c9e27bd..c9fabb816bbdb 100644
--- a/docs/assets/images/money-case.svg
+++ b/docs/assets/images/money-case.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/money-circle.svg b/docs/assets/images/money-circle.svg
index f17183ff63b62..f9f0c033918d1 100644
--- a/docs/assets/images/money-circle.svg
+++ b/docs/assets/images/money-circle.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/money-into-wallet.svg b/docs/assets/images/money-into-wallet.svg
index 06592778bd514..5aa283e8c3387 100644
--- a/docs/assets/images/money-into-wallet.svg
+++ b/docs/assets/images/money-into-wallet.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/money-receipt.svg b/docs/assets/images/money-receipt.svg
index 406aaf3c1db79..aa5c57307954a 100644
--- a/docs/assets/images/money-receipt.svg
+++ b/docs/assets/images/money-receipt.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/monitor.svg b/docs/assets/images/monitor.svg
index c577e6b0db0a7..2d81062ef133d 100644
--- a/docs/assets/images/monitor.svg
+++ b/docs/assets/images/monitor.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/paper-airplane.svg b/docs/assets/images/paper-airplane.svg
index 152a5d10f21c2..d7c16f5877ddb 100644
--- a/docs/assets/images/paper-airplane.svg
+++ b/docs/assets/images/paper-airplane.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/pause.svg b/docs/assets/images/pause.svg
index c60544b95ae31..54557a996fb35 100644
--- a/docs/assets/images/pause.svg
+++ b/docs/assets/images/pause.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/plane.svg b/docs/assets/images/plane.svg
index bd7fceba36077..d49f10c97f31e 100644
--- a/docs/assets/images/plane.svg
+++ b/docs/assets/images/plane.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/play-button.svg b/docs/assets/images/play-button.svg
index a029fdb446562..b8d3d3994b6bc 100644
--- a/docs/assets/images/play-button.svg
+++ b/docs/assets/images/play-button.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/play.svg b/docs/assets/images/play.svg
index a7ab79e26ac2f..0efd65bd5160e 100644
--- a/docs/assets/images/play.svg
+++ b/docs/assets/images/play.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/playbook-help.svg b/docs/assets/images/playbook-help.svg
new file mode 100644
index 0000000000000..dcb6d91eea4ff
--- /dev/null
+++ b/docs/assets/images/playbook-help.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/assets/images/playbook.svg b/docs/assets/images/playbook.svg
index e0e2a883e6366..1cc6048b322b8 100644
--- a/docs/assets/images/playbook.svg
+++ b/docs/assets/images/playbook.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/search.svg b/docs/assets/images/search.svg
index 5bd5fc24d8580..9bf4aea3efc7e 100644
--- a/docs/assets/images/search.svg
+++ b/docs/assets/images/search.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/send-money.svg b/docs/assets/images/send-money.svg
index 7abce818f09e7..c70ae3c47240b 100644
--- a/docs/assets/images/send-money.svg
+++ b/docs/assets/images/send-money.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/send.svg b/docs/assets/images/send.svg
index 2ac109683395f..bbc3f78d0b26e 100644
--- a/docs/assets/images/send.svg
+++ b/docs/assets/images/send.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/settings-new-dot.svg b/docs/assets/images/settings-new-dot.svg
index 558e7413c295e..1afa20aeab8c3 100644
--- a/docs/assets/images/settings-new-dot.svg
+++ b/docs/assets/images/settings-new-dot.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/settings-old-dot.svg b/docs/assets/images/settings-old-dot.svg
index 85561a8864592..1d627a5890e11 100644
--- a/docs/assets/images/settings-old-dot.svg
+++ b/docs/assets/images/settings-old-dot.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/shield.svg b/docs/assets/images/shield.svg
index 3202a532884c7..52d37934d2ae2 100644
--- a/docs/assets/images/shield.svg
+++ b/docs/assets/images/shield.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/simple-illustration__approval-members.svg b/docs/assets/images/simple-illustration__approval-members.svg
new file mode 100644
index 0000000000000..4522b56ed134e
--- /dev/null
+++ b/docs/assets/images/simple-illustration__approval-members.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/assets/images/simple-illustration__buildings.svg b/docs/assets/images/simple-illustration__buildings.svg
new file mode 100644
index 0000000000000..bf125cd56fe6d
--- /dev/null
+++ b/docs/assets/images/simple-illustration__buildings.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/assets/images/simple-illustration__cardreader-alt2-alt.svg b/docs/assets/images/simple-illustration__cardreader-alt2-alt.svg
new file mode 100644
index 0000000000000..be7226777f14f
--- /dev/null
+++ b/docs/assets/images/simple-illustration__cardreader-alt2-alt.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/assets/images/simple-illustration__chart.svg b/docs/assets/images/simple-illustration__chart.svg
index f5aba5977a897..1fdb2db8ebabd 100644
--- a/docs/assets/images/simple-illustration__chart.svg
+++ b/docs/assets/images/simple-illustration__chart.svg
@@ -1,108 +1 @@
-
-
-
+
\ No newline at end of file
diff --git a/docs/assets/images/simple-illustration__commentbubbles-alt.svg b/docs/assets/images/simple-illustration__commentbubbles-alt.svg
new file mode 100644
index 0000000000000..129c9ebbcd89e
--- /dev/null
+++ b/docs/assets/images/simple-illustration__commentbubbles-alt.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/assets/images/simple-illustration__company-share-alt.svg b/docs/assets/images/simple-illustration__company-share-alt.svg
new file mode 100644
index 0000000000000..d4d2fd4dfa661
--- /dev/null
+++ b/docs/assets/images/simple-illustration__company-share-alt.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/assets/images/simple-illustration__company-share.svg b/docs/assets/images/simple-illustration__company-share.svg
new file mode 100644
index 0000000000000..d4d2fd4dfa661
--- /dev/null
+++ b/docs/assets/images/simple-illustration__company-share.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/assets/images/simple-illustration__concierge-bot.svg b/docs/assets/images/simple-illustration__concierge-bot.svg
index cb2f1c8ef9a6c..6e16376995950 100644
--- a/docs/assets/images/simple-illustration__concierge-bot.svg
+++ b/docs/assets/images/simple-illustration__concierge-bot.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/simple-illustration__creditcards--green.svg b/docs/assets/images/simple-illustration__creditcards--green.svg
new file mode 100644
index 0000000000000..076f38d4b5194
--- /dev/null
+++ b/docs/assets/images/simple-illustration__creditcards--green.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/assets/images/simple-illustration__luggage.svg b/docs/assets/images/simple-illustration__luggage.svg
index 5177788a9961d..6d607bba9602a 100644
--- a/docs/assets/images/simple-illustration__luggage.svg
+++ b/docs/assets/images/simple-illustration__luggage.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/simple-illustration__money-receipt.svg b/docs/assets/images/simple-illustration__money-receipt.svg
new file mode 100644
index 0000000000000..038a341b68688
--- /dev/null
+++ b/docs/assets/images/simple-illustration__money-receipt.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/assets/images/simple-illustration__monitor-remotesync.svg b/docs/assets/images/simple-illustration__monitor-remotesync.svg
index f0f6f363036ed..c542d572cc0a8 100644
--- a/docs/assets/images/simple-illustration__monitor-remotesync.svg
+++ b/docs/assets/images/simple-illustration__monitor-remotesync.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/simple-illustration__rules.svg b/docs/assets/images/simple-illustration__rules.svg
index 0a607c70ad2b1..16684ceb08825 100644
--- a/docs/assets/images/simple-illustration__rules.svg
+++ b/docs/assets/images/simple-illustration__rules.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/simple-illustration__twocards-horizontal.svg b/docs/assets/images/simple-illustration__twocards-horizontal.svg
new file mode 100644
index 0000000000000..adbe0cf415ffe
--- /dev/null
+++ b/docs/assets/images/simple-illustration__twocards-horizontal.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/assets/images/social-facebook.svg b/docs/assets/images/social-facebook.svg
index 0cf2317839f0b..deff36fd35cca 100644
--- a/docs/assets/images/social-facebook.svg
+++ b/docs/assets/images/social-facebook.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/social-instagram.svg b/docs/assets/images/social-instagram.svg
index d78d50d65aa32..d7c530f883baa 100644
--- a/docs/assets/images/social-instagram.svg
+++ b/docs/assets/images/social-instagram.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/social-linkedin.svg b/docs/assets/images/social-linkedin.svg
index ef7ed938540f2..afdf872694145 100644
--- a/docs/assets/images/social-linkedin.svg
+++ b/docs/assets/images/social-linkedin.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/social-podcast.svg b/docs/assets/images/social-podcast.svg
index 69c5340a389ec..067715e8a6389 100644
--- a/docs/assets/images/social-podcast.svg
+++ b/docs/assets/images/social-podcast.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/social-twitter.svg b/docs/assets/images/social-twitter.svg
index cadb5fd7474ad..acc70e6b52761 100644
--- a/docs/assets/images/social-twitter.svg
+++ b/docs/assets/images/social-twitter.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/social-youtube.svg b/docs/assets/images/social-youtube.svg
index cec64f2a77668..082c5b24d99eb 100644
--- a/docs/assets/images/social-youtube.svg
+++ b/docs/assets/images/social-youtube.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/subscription-annual.svg b/docs/assets/images/subscription-annual.svg
index f74ce086b2c70..d15c64eb94dec 100644
--- a/docs/assets/images/subscription-annual.svg
+++ b/docs/assets/images/subscription-annual.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/users.svg b/docs/assets/images/users.svg
index ad34f781df52e..362caa49d2380 100644
--- a/docs/assets/images/users.svg
+++ b/docs/assets/images/users.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/workflow.svg b/docs/assets/images/workflow.svg
index 435e3556a5bf0..e875f736e8d70 100644
--- a/docs/assets/images/workflow.svg
+++ b/docs/assets/images/workflow.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/assets/images/x-circle.svg b/docs/assets/images/x-circle.svg
new file mode 100644
index 0000000000000..90484eaa54b52
--- /dev/null
+++ b/docs/assets/images/x-circle.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
index 9f429f6b59a3c..dd321a1d9077b 100644
--- a/docs/assets/js/main.js
+++ b/docs/assets/js/main.js
@@ -75,48 +75,8 @@ function injectFooterCopyright() {
footer.innerHTML = `©2008-${new Date().getFullYear()} Expensify, Inc.`;
}
-function closeSidebar() {
- document.getElementById('sidebar-layer').style.display = 'none';
-
- // Make the body scrollable again
- const body = document.body;
- const scrollY = body.style.top;
-
- // Reset the position and top styles of the body element
- body.style.position = '';
- body.style.top = '';
-
- // Scroll to the original scroll position
- window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);
-}
-
-function closeSidebarOnClickOutside(event) {
- const sidebarLayer = document.getElementById('sidebar-layer');
-
- if (event.target !== sidebarLayer) {
- return;
- }
- closeSidebar();
-}
-
-function openSidebar() {
- document.getElementById('sidebar-layer').style.display = 'block';
- document.getElementById('search-input').focus();
-
- // Make body unscrollable
- const yAxis = document.documentElement.style.getPropertyValue('y-axis');
- const body = document.body;
- body.style.position = 'fixed';
- body.style.top = `-${yAxis}`;
-
- // Close the sidebar when clicking sidebar layer (outside the sidebar search)
- const sidebarLayer = document.getElementById('sidebar-layer');
- if (sidebarLayer) {
- sidebarLayer.addEventListener('click', closeSidebarOnClickOutside);
- }
-}
-
const SEARCH_API_URL = 'https://www.expensify.com/api/SearchHelpsite';
+const ASK_AI_API_URL = 'https://www.expensify.com/api/AskHelpsiteAI';
function getTitleFromURL(url) {
return url.split('/').pop().replace(/-/g, ' ');
@@ -132,13 +92,8 @@ function cloneTemplate(templateId) {
return document.getElementById(templateId).content.cloneNode(true);
}
-/**
- * Search the help site using the SearchHelpsite API.
- *
- * @param {string} query
- */
-function searchHelpsite(query) {
- const resultsContainer = document.getElementById('search-results');
+function searchPageQuery(query) {
+ const resultsContainer = document.getElementById('search-page-results');
if (!query.trim()) {
resultsContainer.innerHTML = '';
return;
@@ -147,28 +102,26 @@ function searchHelpsite(query) {
resultsContainer.innerHTML = '';
resultsContainer.appendChild(cloneTemplate('search-loading-template'));
- const isClassic = window.location.pathname.startsWith('/expensify-classic/');
+ askHelpsiteAI(query);
+
const formData = new FormData();
formData.append('command', 'SearchHelpsite');
formData.append('query', query.trim());
- if (isClassic) {
- formData.append('platform', 'expensify-classic');
+
+ const platform = new URLSearchParams(window.location.search).get('platform');
+ if (platform) {
+ formData.append('platform', platform);
}
- fetch(SEARCH_API_URL, {
- method: 'POST',
- body: formData,
- })
+ fetch(SEARCH_API_URL, {method: 'POST', body: formData})
.then((response) => response.json())
.then((data) => {
const results = (data.searchResults || []).filter((result) => !result.url.includes('/Unlisted/'));
resultsContainer.innerHTML = '';
-
if (results.length === 0) {
resultsContainer.appendChild(cloneTemplate('search-no-results-template'));
return;
}
-
results.forEach((result) => {
const item = cloneTemplate('search-result-item-template');
const link = item.querySelector('.search-result-item');
@@ -189,15 +142,95 @@ function searchHelpsite(query) {
});
}
-function initSearch() {
- const searchForm = document.getElementById('search-form');
+function clearSearchInput() {
+ const input = document.getElementById('search-page-input');
+ input.value = '';
+ input.focus();
+}
- if (searchForm) {
- searchForm.addEventListener('submit', (e) => {
- e.preventDefault();
- searchHelpsite(document.getElementById('search-input').value);
+function askHelpsiteAI(query) {
+ const aiContainer = document.getElementById('ai-answer-container');
+ if (!aiContainer) {
+ return;
+ }
+
+ aiContainer.innerHTML = '';
+ aiContainer.appendChild(cloneTemplate('ai-thinking-template'));
+
+ const formData = new FormData();
+ formData.append('command', 'AskHelpsiteAI');
+ formData.append('query', query.trim());
+
+ const platform = new URLSearchParams(window.location.search).get('platform');
+ if (platform) {
+ formData.append('platform', platform);
+ }
+
+ fetch(ASK_AI_API_URL, {method: 'POST', body: formData})
+ .then((response) => response.json())
+ .then((data) => {
+ const answer = data.answer || '';
+ if (!answer) {
+ aiContainer.innerHTML = '';
+ return;
+ }
+
+ const template = cloneTemplate('ai-response-template');
+ const content = template.querySelector('.ai-content');
+ content.innerHTML = answer;
+
+ const showMoreButton = template.querySelector('.ai-show-more');
+ aiContainer.innerHTML = '';
+ aiContainer.appendChild(template);
+
+ // Show "Show more" button if content overflows
+ const renderedContent = aiContainer.querySelector('.ai-content');
+ if (renderedContent.scrollHeight > renderedContent.clientHeight) {
+ renderedContent.classList.add('has-overflow');
+ showMoreButton.classList.remove('hidden');
+ showMoreButton.addEventListener('click', () => {
+ renderedContent.classList.toggle('expanded');
+ showMoreButton.firstChild.textContent = renderedContent.classList.contains('expanded') ? 'Show less ' : 'Show more ';
+ });
+ }
+ })
+ .catch(() => {
+ aiContainer.innerHTML = '';
});
+}
+
+function initSearchPage() {
+ const searchForm = document.getElementById('search-page-form');
+ if (!searchForm) {
+ return;
}
+
+ const input = document.getElementById('search-page-input');
+ const params = new URLSearchParams(window.location.search);
+ const query = params.get('q') || '';
+ const platform = params.get('platform') || '';
+
+ const title = document.getElementById('search-page-title');
+ if (query) {
+ input.value = query;
+ title.textContent = 'Search results';
+ searchPageQuery(query);
+ }
+
+ input.focus();
+
+ searchForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+ const query = input.value.trim();
+ if (query) {
+ const url = '/search?q=' + encodeURIComponent(query) + (platform ? '&platform=' + encodeURIComponent(platform) : '');
+ history.replaceState(null, '', url);
+ title.textContent = 'Search results';
+ searchPageQuery(query);
+ }
+ });
+
+ document.getElementById('search-page-clear').addEventListener('click', clearSearchInput);
}
const FIXED_HEADER_HEIGHT = 80;
@@ -273,17 +306,6 @@ handleBreakpointChange();
window.addEventListener('DOMContentLoaded', () => {
injectFooterCopyright();
- // Handle open & close the sidebar
- const buttonOpenSidebar = document.getElementById('toggle-search-open');
- if (buttonOpenSidebar) {
- buttonOpenSidebar.addEventListener('click', openSidebar);
- }
-
- const buttonCloseSidebar = document.getElementById('toggle-search-close');
- if (buttonCloseSidebar) {
- buttonCloseSidebar.addEventListener('click', closeSidebar);
- }
-
if (window.tocbot) {
window.tocbot.init({
...tocbotOptions,
@@ -291,7 +313,7 @@ window.addEventListener('DOMContentLoaded', () => {
});
}
- initSearch();
+ initSearchPage();
document.getElementById('header-button').addEventListener('click', toggleHeaderMenu);
@@ -327,9 +349,6 @@ window.addEventListener('DOMContentLoaded', () => {
const scrollingElement = e.target.scrollingElement;
const scrollPercentageInArticleContent = clamp(scrollingElement.scrollTop - articleContent.offsetTop, 0, articleContent.scrollHeight) / articleContent.scrollHeight;
lhnContent.scrollTop = scrollPercentageInArticleContent * lhnContent.scrollHeight;
-
- // Count property of y-axis to keep scroll position & reference it later for making the body fixed when sidebar opened
- document.documentElement.style.setProperty('y-axis', `${window.scrollY}px`);
});
});
diff --git a/docs/index.html b/docs/index.html
index ceea63cb398a9..76fe8be8dbe42 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,14 +2,45 @@
---
-
{{ site.data.routes.home.title }}
+
+
+
{{ site.data.routes.home.title }}
+
+
+
+
+
+
-
{{ site.data.routes.home.description }}
+
Getting Started
+
-
- {% for platform in site.data.routes.platforms %}
- {% assign platform_href = platform.href %}
- {% include platform-card.html href=platform.platform_href %}
+
Topics
+
+ {% for topic in site.data.routes.topics %}
+ {% include topic-card.html topic=topic %}
{% endfor %}
diff --git a/docs/search.html b/docs/search.html
new file mode 100644
index 0000000000000..a92f5c699bd96
--- /dev/null
+++ b/docs/search.html
@@ -0,0 +1,29 @@
+---
+---
+
+
diff --git a/package.json b/package.json
index be7c7f1840e55..c186cfa431d36 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,7 @@
"generate-autocomplete-parser": "peggy --format es -o src/libs/SearchParser/autocompleteParser.js src/libs/SearchParser/autocompleteParser.peggy src/libs/SearchParser/baseRules.peggy && ./scripts/parser-workletization.sh src/libs/SearchParser/autocompleteParser.js",
"web:dist": "concurrently \"npm:web-proxy\" \"http-server ./dist --cors --port 8080 -P http://localhost:9000\"",
"octokit": "cd scripts && npx ts-node -i -e \"$(cat ./octokit.ts)\"",
- "compress-svg": "npx ts-node scripts/compressSvg.ts --dir assets/images"
+ "compress-svg": "npx ts-node scripts/compressSvg.ts --dir assets/images && npx ts-node scripts/compressSvg.ts --dir docs/assets/images"
},
"dependencies": {
"@babel/runtime": "^7.25.0",
+ Concierge AI is thinking...
+ 
+ 
-
- 