Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2026-02-20 10:10:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup searchbar animations

Browse Source
This commit is contained in:
Zoe Roux 2026-02-14 15:48:32 +01:00
parent e195261bc4
commit 30223dfa4d
No known key found for this signature in database
1 changed files with 25 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
front/src/ui/navbar.tsx
View File

@ -72,46 +72,6 @@ export const NavbarTitle = ({
);
};
const SearchBar = ({
ref,
className,
...props
}: TextInputProps & { ref?: Ref<TextInput> }) => {
const { t } = useTranslation();
const params = useGlobalSearchParams();
const [query, setQuery] = useState((params.q as string) ?? "");
const path = usePathname();
const router = useRouter();
const inputRef = useRef<TextInput>(null);
useEffect(() => {
if (path === "/browse") {
inputRef.current?.focus();
setQuery(params.q as string);
} else {
inputRef.current?.blur();
setQuery("");
}
}, [path, params.q]);
return (
<Input
ref={inputRef}
value={query}
onChangeText={(q) => {
setQuery(q);
if (path !== "/browse") router.navigate(`/browse?q=${q}`);
else router.setParams({ q });
}}
placeholder={t("navbar.search")}
containerClassName="border-light"
className={cn("text-slate-200 dark:text-slate-200", className)}
{...tooltip(t("navbar.search"))}
{...props}
/>
);
};
const getDisplayUrl = (url: string) => {
url = url.replace(/\/api$/, "");
url = url.replace(/https?:\/\//, "");
@ -177,7 +137,7 @@ export const NavbarProfile = () => {
);
};
const MobileSearchBar = () => {
const SearchBar = () => {
const { t } = useTranslation();
const [expanded, setExpanded] = useState(false);
const inputRef = useRef<TextInput>(null);
@ -185,18 +145,30 @@ const MobileSearchBar = () => {
const router = useRouter();
const [query, setQuery] = useState("");
console.log(expanded);
const path = usePathname();
useEffect(() => {
console.log(path);
if (path === "/browse") {
// Small delay to allow animation to start before focusing
setTimeout(() => {
setExpanded(true);
inputRef.current?.focus();
}, 300);
} else if (path === "/") {
inputRef.current?.blur();
}
}, [path]);
return (
<Animated.View
className={cn(
"mr-2 flex-row p-0 pl-4",
"mr-2 flex-row items-center overflow-hidden p-0 pl-4",
"rounded-full bg-slate-100 dark:bg-slate-800",
)}
style={[
expanded ? { flex: 1 } : { backgroundColor: "transparent" },
{
transitionProperty: ["width", "background-color"],
transitionProperty: "background-color",
transitionDuration: "300ms",
},
]}
@ -209,12 +181,16 @@ const MobileSearchBar = () => {
router.setParams({ q });
}}
onFocus={() => router.push(query ? `/browse?q=${query}` : "/browse")}
onBlur={() => {
if (query !== "") return;
setExpanded(false);
}}
placeholder={t("navbar.search")}
textAlignVertical="center"
className={cn(
"h-full flex-1 font-sans text-base outline-0",
"text-slate-600 dark:text-slate-200",
!expanded && "grow-0",
"align-middle text-slate-600 dark:text-slate-200",
!expanded && "w-0 grow-0",
)}
placeholderTextColorClassName="accent-slate-400 dark:text-slate-600"
/>
@ -228,9 +204,10 @@ const MobileSearchBar = () => {
if (expanded) {
inputRef.current?.blur();
setExpanded(false);
setQuery("");
router.setParams({ q: undefined });
} else {
setExpanded(true);
console.log("set to exampeded");
// Small delay to allow animation to start before focusing
setTimeout(() => inputRef.current?.focus(), 100);
}
@ -252,7 +229,7 @@ export const NavbarRight = () => {
return (
<View className="shrink flex-row items-center">
{Platform.OS === "web" ? <SearchBar /> : <MobileSearchBar />}
<SearchBar />
{isAdmin && (
<IconButton
icon={Admin}