Skip to content

Commit 4360bc9

Browse files
blarfoonblarfoon
committed
onboarding tips
1 parent 83f2b6f commit 4360bc9

File tree

13 files changed

+731
-141
lines changed

13 files changed

+731
-141
lines changed

‎apps/desktop/packages/mainWindow/src/components/EnhancedSearchBar.tsx‎

Lines changed: 149 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import { AddonTypeDropdown } from "./AddonTypeDropdown"
33
import useSearchContext from "./SearchInputContext"
44
import { useGDNavigate } from "@/managers/NavigationManager"
55
import { useMatch } from "@solidjs/router"
6-
import { useTransContext } from "@gd/i18n"
6+
import { Trans, useTransContext } from "@gd/i18n"
77
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@gd/ui"
88
import { FiltersDropdown } from "@/pages/Search/FiltersDropdown"
9+
import { OnboardingTip } from "@/components/Onboarding"
910

1011
export function EnhancedSearchBar() {
1112
const searchResults = useSearchContext()
@@ -41,127 +42,168 @@ export function EnhancedSearchBar() {
4142
})
4243

4344
return (
44-
<div
45-
class="bg-darkSlate-700 outline-2 outline outline-offset-2 outline-transparent has-[:focus-visible]:outline-darkSlate-500 hover:outline-darkSlate-600 hover:has-[:focus-visible]:outline-darkSlate-500 flex h-10 items-center gap-2 overflow-hidden rounded-md duration-300"
46-
style={{
47-
transition:
48-
"width 300ms cubic-bezier(0.4, 0, 0.2, 1), padding 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), outline-color 150ms cubic-bezier(0.4, 0, 0.2, 1)",
49-
"will-change": "width, padding",
50-
contain: "layout",
51-
transform: "translateZ(0)"
52-
}}
53-
classList={{
54-
"w-80 px-4": !isExpanded(),
55-
"w-full max-w-[600px] px-2": isExpanded()
56-
}}
45+
<OnboardingTip
46+
id="search-input-syntax"
47+
title={t("onboarding:_trn_search_syntax_title")}
48+
delay={200}
49+
description={
50+
<div class="space-y-2">
51+
<p>
52+
<Trans key="onboarding:_trn_search_syntax_description" />
53+
</p>
54+
<ul class="list-disc space-y-1 pl-4">
55+
<li>
56+
<strong>
57+
<Trans key="general:_trn_text" />:
58+
</strong>{" "}
59+
<Trans key="onboarding:_trn_search_syntax_text" />
60+
</li>
61+
<li>
62+
<strong>
63+
<Trans key="onboarding:_trn_search_syntax_urls_label" />:
64+
</strong>{" "}
65+
<Trans key="onboarding:_trn_search_syntax_urls" />
66+
</li>
67+
<li>
68+
<strong>
69+
<Trans key="onboarding:_trn_search_syntax_id_label" />:
70+
</strong>{" "}
71+
<Trans key="onboarding:_trn_search_syntax_ids" />
72+
</li>
73+
</ul>
74+
<p class="mt-2">
75+
<Trans key="onboarding:_trn_search_syntax_addon_type" />
76+
</p>
77+
<p>
78+
<Trans key="onboarding:_trn_search_syntax_filters" />
79+
</p>
80+
</div>
81+
}
82+
trigger="onClick"
83+
placement="bottom"
5784
>
5885
<div
59-
class="shrink-0 transition-[opacity,max-width] duration-300 ease-[cubic-bezier(.4,0,.2,1)]"
86+
class="bg-darkSlate-700 outline-2 outline outline-offset-2 outline-transparent has-[:focus-visible]:outline-darkSlate-500 hover:outline-darkSlate-600 hover:has-[:focus-visible]:outline-darkSlate-500 flex h-10 items-center gap-2 overflow-hidden rounded-md duration-300"
87+
style={{
88+
transition:
89+
"width 300ms cubic-bezier(0.4, 0, 0.2, 1), padding 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), outline-color 150ms cubic-bezier(0.4, 0, 0.2, 1)",
90+
"will-change": "width, padding",
91+
contain: "layout",
92+
transform: "translateZ(0)"
93+
}}
6094
classList={{
61-
"opacity-0 pointer-events-none max-w-0 overflow-hidden":
62-
!isExpanded(),
63-
"opacity-100 delay-[40ms]": isExpanded()
95+
"w-80 px-4": !isExpanded(),
96+
"w-full max-w-[600px] px-2": isExpanded()
6497
}}
6598
>
66-
<AddonTypeDropdown />
67-
</div>
99+
<div
100+
class="shrink-0 transition-[opacity,max-width] duration-300 ease-[cubic-bezier(.4,0,.2,1)]"
101+
classList={{
102+
"opacity-0 pointer-events-none max-w-0 overflow-hidden":
103+
!isExpanded(),
104+
"opacity-100 delay-[40ms]": isExpanded()
105+
}}
106+
>
107+
<AddonTypeDropdown />
108+
</div>
68109

69-
<div
70-
class="bg-darkSlate-500 h-6 transition-[opacity,width] duration-300 ease-[cubic-bezier(.4,0,.2,1)]"
71-
classList={{
72-
"opacity-0 w-0": !isExpanded(),
73-
"opacity-100 w-px delay-[75ms]": isExpanded()
74-
}}
75-
/>
110+
<div
111+
class="bg-darkSlate-500 h-6 transition-[opacity,width] duration-300 ease-[cubic-bezier(.4,0,.2,1)]"
112+
classList={{
113+
"opacity-0 w-0": !isExpanded(),
114+
"opacity-100 w-px delay-[75ms]": isExpanded()
115+
}}
116+
/>
76117

77-
<div class="i-hugeicons:search-01 text-darkSlate-400 h-5 w-5 shrink-0" />
118+
<div class="i-hugeicons:search-01 text-darkSlate-400 h-5 w-5 shrink-0" />
78119

79-
<Show when={!isExpanded()}>
80-
<input
81-
ref={simpleInputRef}
82-
placeholder={t("search:_trn_search_discover_anything")}
83-
class="placeholder:text-darkSlate-400 text-lightSlate-50 h-full min-w-0 flex-1 cursor-pointer bg-transparent text-sm outline-none"
84-
value=""
85-
readOnly
86-
onClick={handleSimpleClick}
87-
/>
88-
</Show>
120+
<Show when={!isExpanded()}>
121+
<input
122+
ref={simpleInputRef}
123+
placeholder={t("search:_trn_search_discover_anything")}
124+
class="placeholder:text-darkSlate-400 text-lightSlate-50 h-full min-w-0 flex-1 cursor-pointer bg-transparent text-sm outline-none"
125+
value=""
126+
readOnly
127+
onClick={handleSimpleClick}
128+
/>
129+
</Show>
89130

90-
<Show when={isExpanded()}>
91-
<input
92-
ref={expandedInputRef}
93-
placeholder={t("search:_trn_search_discover_anything")}
94-
class="placeholder:text-darkSlate-400 text-lightSlate-50 h-full min-w-0 flex-1 bg-transparent text-sm outline-none"
95-
value={searchResults?.searchQuery().searchQuery ?? ""}
96-
onInput={(e) => {
97-
searchResults?.setSearchQuery((prev) => ({
98-
...prev,
99-
searchQuery: e.target.value
100-
}))
101-
if (isAddonPage()) {
102-
navigator.prev()
103-
}
104-
}}
105-
/>
106-
</Show>
131+
<Show when={isExpanded()}>
132+
<input
133+
ref={expandedInputRef}
134+
placeholder={t("search:_trn_search_discover_anything")}
135+
class="placeholder:text-darkSlate-400 text-lightSlate-50 h-full min-w-0 flex-1 bg-transparent text-sm outline-none"
136+
value={searchResults?.searchQuery().searchQuery ?? ""}
137+
onInput={(e) => {
138+
searchResults?.setSearchQuery((prev) => ({
139+
...prev,
140+
searchQuery: e.target.value
141+
}))
142+
if (isAddonPage()) {
143+
navigator.prev()
144+
}
145+
}}
146+
/>
147+
</Show>
107148

108-
<Show when={isExpanded() && searchResults?.isDirectMode()}>
109-
<div class="bg-primary-600/20 text-primary-400 flex shrink-0 items-center gap-1 rounded px-2 py-0.5 text-xs">
110-
<div class="i-hugeicons:link-01 text-sm" />
111-
<span>{t("search:_trn_direct")}</span>
112-
</div>
113-
</Show>
149+
<Show when={isExpanded() && searchResults?.isDirectMode()}>
150+
<div class="bg-primary-600/20 text-primary-400 flex shrink-0 items-center gap-1 rounded px-2 py-0.5 text-xs">
151+
<div class="i-hugeicons:link-01 text-sm" />
152+
<span>{t("search:_trn_direct")}</span>
153+
</div>
154+
</Show>
155+
156+
<Show
157+
when={
158+
isExpanded() &&
159+
(searchResults?.searchQuery().searchQuery?.length || 0 > 0)
160+
}
161+
>
162+
<div
163+
class="i-hugeicons:cancel-01 text-lg text-darkSlate-500 cursor-pointer transition-colors duration-200 ease-spring hover:text-white"
164+
onClick={(e) => {
165+
e.preventDefault()
166+
e.stopPropagation()
167+
searchResults?.setSearchQuery((prev) => ({
168+
...prev,
169+
searchQuery: ""
170+
}))
171+
if (isAddonPage()) {
172+
navigator.prev()
173+
}
174+
}}
175+
/>
176+
</Show>
114177

115-
<Show
116-
when={
117-
isExpanded() &&
118-
(searchResults?.searchQuery().searchQuery?.length || 0 > 0)
119-
}
120-
>
121178
<div
122-
class="i-hugeicons:cancel-01 text-lg text-darkSlate-500 cursor-pointer transition-colors duration-200 ease-spring hover:text-white"
123-
onClick={(e) => {
124-
e.preventDefault()
125-
e.stopPropagation()
126-
searchResults?.setSearchQuery((prev) => ({
127-
...prev,
128-
searchQuery: ""
129-
}))
130-
if (isAddonPage()) {
131-
navigator.prev()
132-
}
179+
class="bg-darkSlate-500 h-6 transition-[opacity,width] duration-300 ease-[cubic-bezier(.4,0,.2,1)]"
180+
classList={{
181+
"opacity-0 w-0": !isExpanded(),
182+
"opacity-100 w-px delay-[75ms]": isExpanded()
133183
}}
134184
/>
135-
</Show>
136-
137-
<div
138-
class="bg-darkSlate-500 h-6 transition-[opacity,width] duration-300 ease-[cubic-bezier(.4,0,.2,1)]"
139-
classList={{
140-
"opacity-0 w-0": !isExpanded(),
141-
"opacity-100 w-px delay-[75ms]": isExpanded()
142-
}}
143-
/>
144185

145-
<div
146-
class="shrink-0 transition-[opacity,max-width] duration-300 ease-[cubic-bezier(.4,0,.2,1)]"
147-
classList={{
148-
"opacity-0 pointer-events-none max-w-0 overflow-hidden":
149-
!isExpanded(),
150-
"opacity-100 delay-[110ms]": isExpanded()
151-
}}
152-
>
153-
<DropdownMenu>
154-
<DropdownMenuTrigger
155-
class="text-lightSlate-50 hover:bg-darkSlate-600 data-[expanded]:bg-darkSlate-600 flex items-center justify-center rounded p-1.5 transition-colors hover:text-white data-[expanded]:text-white"
156-
title={t("search:_trn_filters")}
157-
>
158-
<div class="i-hugeicons:filter text-lg" />
159-
</DropdownMenuTrigger>
160-
<DropdownMenuContent>
161-
<FiltersDropdown />
162-
</DropdownMenuContent>
163-
</DropdownMenu>
186+
<div
187+
class="shrink-0 transition-[opacity,max-width] duration-300 ease-[cubic-bezier(.4,0,.2,1)]"
188+
classList={{
189+
"opacity-0 pointer-events-none max-w-0 overflow-hidden":
190+
!isExpanded(),
191+
"opacity-100 delay-[110ms]": isExpanded()
192+
}}
193+
>
194+
<DropdownMenu>
195+
<DropdownMenuTrigger
196+
class="text-lightSlate-50 hover:bg-darkSlate-600 data-[expanded]:bg-darkSlate-600 flex items-center justify-center rounded p-1.5 transition-colors hover:text-white data-[expanded]:text-white"
197+
title={t("search:_trn_filters")}
198+
>
199+
<div class="i-hugeicons:filter text-lg" />
200+
</DropdownMenuTrigger>
201+
<DropdownMenuContent>
202+
<FiltersDropdown />
203+
</DropdownMenuContent>
204+
</DropdownMenu>
205+
</div>
164206
</div>
165-
</div>
207+
</OnboardingTip>
166208
)
167209
}

0 commit comments

Comments
 (0)