From 3155f9fbd89f86d95d7852601ace1d54352ff362 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Thu, 5 Feb 2026 02:59:26 +0100 Subject: [PATCH 1/4] fix: theme fixes and tiny css fixes --- src/generators/web/template.html | 3 ++- src/generators/web/ui/components/SideBar/index.module.css | 1 + src/generators/web/ui/hooks/useTheme.mjs | 2 ++ src/generators/web/ui/index.css | 2 -- 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/generators/web/template.html b/src/generators/web/template.html index fa59fb8e..f8ffd61b 100644 --- a/src/generators/web/template.html +++ b/src/generators/web/template.html @@ -19,7 +19,8 @@ href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Open+Sans:ital,wght@0,300..800;1,300..800" /> - + + diff --git a/src/generators/web/ui/components/SideBar/index.module.css b/src/generators/web/ui/components/SideBar/index.module.css index 1b8cea77..00b5c343 100644 --- a/src/generators/web/ui/components/SideBar/index.module.css +++ b/src/generators/web/ui/components/SideBar/index.module.css @@ -1,3 +1,4 @@ .select { width: 100%; + margin-bottom: -1rem; } diff --git a/src/generators/web/ui/hooks/useTheme.mjs b/src/generators/web/ui/hooks/useTheme.mjs index e77b6659..3c50d2bc 100644 --- a/src/generators/web/ui/hooks/useTheme.mjs +++ b/src/generators/web/ui/hooks/useTheme.mjs @@ -8,6 +8,8 @@ import { useState, useEffect, useCallback } from 'react'; */ const applyTheme = theme => { document.documentElement.setAttribute('data-theme', theme); + document.documentElement.style.colorScheme = theme; + localStorage.setItem('theme', theme); }; diff --git a/src/generators/web/ui/index.css b/src/generators/web/ui/index.css index 92855072..530d6ff5 100644 --- a/src/generators/web/ui/index.css +++ b/src/generators/web/ui/index.css @@ -8,8 +8,6 @@ } main { - overflow-x: scroll; - /* Code should inherit its font size */ code { font-size: inherit; From 072f5c0f210691e378b029191a86088b8c4b49c2 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Thu, 5 Feb 2026 03:23:09 +0100 Subject: [PATCH 2/4] chore: footer on search --- .../web/ui/components/SearchBox/index.jsx | 44 +++++++++-- .../ui/components/SearchBox/index.module.css | 76 +++++++++++++++++++ 2 files changed, 115 insertions(+), 5 deletions(-) create mode 100644 src/generators/web/ui/components/SearchBox/index.module.css diff --git a/src/generators/web/ui/components/SearchBox/index.jsx b/src/generators/web/ui/components/SearchBox/index.jsx index 451d3831..9724b8b8 100644 --- a/src/generators/web/ui/components/SearchBox/index.jsx +++ b/src/generators/web/ui/components/SearchBox/index.jsx @@ -1,18 +1,52 @@ +import { + ArrowDownIcon, + ArrowTurnDownLeftIcon, + ArrowUpIcon, +} from '@heroicons/react/24/solid'; import SearchModal from '@node-core/ui-components/Common/Search/Modal'; import SearchResults from '@node-core/ui-components/Common/Search/Results'; import SearchHit from '@node-core/ui-components/Common/Search/Results/Hit'; +import styles from './index.module.css'; import useOrama from '../../hooks/useOrama.mjs'; const SearchBox = () => { const client = useOrama(); return ( - - } - /> + +
+ } + /> +
+ +
+
+
+ + + + to select +
+ +
+ + + + + + + to navigate +
+ +
+ esc + to close +
+
+
); }; diff --git a/src/generators/web/ui/components/SearchBox/index.module.css b/src/generators/web/ui/components/SearchBox/index.module.css new file mode 100644 index 00000000..639e714b --- /dev/null +++ b/src/generators/web/ui/components/SearchBox/index.module.css @@ -0,0 +1,76 @@ +.searchResultsContainer { + display: flex; + flex-grow: 1; + flex-direction: column; + overflow-y: auto; +} + +.footer { + display: flex; + justify-content: center; + align-items: baseline; + padding: 1rem; + border-top: 1px solid var(--color-neutral-200); + background-color: var(--color-neutral-100); +} + +:where([data-theme='dark'], [data-theme='dark'] *) .footer { + border-top-color: var(--color-neutral-900); + background-color: var(--color-neutral-950); +} + +@media (min-width: 1024px) { + .footer { + justify-content: space-between; + border-radius: 0 0 0.75rem 0.75rem; + } +} + +.shortcutWrapper { + display: none; + align-items: center; + gap: 0.5rem; +} + +@media (min-width: 1024px) { + .shortcutWrapper { + display: flex; + } +} + +.shortcutItem { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.75rem; + color: var(--color-neutral-800); +} + +:where([data-theme='dark'], [data-theme='dark'] *) .shortcutItem { + color: var(--color-neutral-600); +} + +.shortcutKey { + font-family: var(--font-ibm-plex-mono); + border-radius: 0.375rem; + background-color: var(--color-neutral-200); + padding: 0.25rem; + font-size: 0.75rem; +} + +:where([data-theme='dark'], [data-theme='dark'] *) .shortcutKey { + background-color: var(--color-neutral-900); +} + +.shortcutKey svg { + width: 1rem; + height: 1rem; +} + +.shortcutLabel { + color: var(--color-neutral-800); +} + +:where([data-theme='dark'], [data-theme='dark'] *) .shortcutLabel { + color: var(--color-neutral-600); +} From 5f51d73a28d750f97767a19a48b9d284e9d87c53 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Thu, 5 Feb 2026 11:22:33 +0100 Subject: [PATCH 3/4] Update src/generators/web/ui/hooks/useTheme.mjs Co-authored-by: Aviv Keller --- src/generators/web/ui/hooks/useTheme.mjs | 1 - 1 file changed, 1 deletion(-) diff --git a/src/generators/web/ui/hooks/useTheme.mjs b/src/generators/web/ui/hooks/useTheme.mjs index 3c50d2bc..0469ef33 100644 --- a/src/generators/web/ui/hooks/useTheme.mjs +++ b/src/generators/web/ui/hooks/useTheme.mjs @@ -9,7 +9,6 @@ import { useState, useEffect, useCallback } from 'react'; const applyTheme = theme => { document.documentElement.setAttribute('data-theme', theme); document.documentElement.style.colorScheme = theme; - localStorage.setItem('theme', theme); }; From 0fd195717e1e7f828d2d1b8d4d42cd6e4561a3d2 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Thu, 5 Feb 2026 11:24:32 +0100 Subject: [PATCH 4/4] Update src/generators/web/template.html Co-authored-by: Aviv Keller --- src/generators/web/template.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/generators/web/template.html b/src/generators/web/template.html index f8ffd61b..ae85915d 100644 --- a/src/generators/web/template.html +++ b/src/generators/web/template.html @@ -19,8 +19,7 @@ href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Open+Sans:ital,wght@0,300..800;1,300..800" /> - - +