ClipFusion-org/clipfusion
1
1
Fork 0
mirror of https://github.com/ClipFusion-org/clipfusion.git synced 2025-08-03 16:55:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed search bars in settings

Browse Source
This commit is contained in:
corgifist 2025-07-28 15:22:22 +03:00
parent 153047fbf2
commit fb5cf87b43
3 changed files with 33 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/settings/page.tsx
View File

@ -18,12 +18,10 @@ import Link from "next/link";
export default function Settings(): ReactNode {
const isMobile = useIsMobile();
const SearchContainer = isMobile ? "div" : SidebarTriggerAdjustable;
const cardWidth = isMobile ? "w-full" : "w-2xl";
return (
<div className="p-5 w-full h-full">
<div className="flex flex-col gap-2">
<div className="flex flex-row items-center gap-2">
<StaticSidebarTrigger />
<ScrollFadingTitle>
@ -31,10 +29,9 @@ export default function Settings(): ReactNode {
</ScrollFadingTitle>
</div>
<div className="flex flex-col sticky top-safe bg-background gap-2 mt-2 pb-2 pt-2 p-5 w-[100% + 5 * var(--spacing)] z-10 -mx-5">
<SearchContainer className={cn("flex justify-center",)}>
<SidebarTriggerAdjustable className={cn("flex justify-center",)}>
<Search placeholder="Search Settings" className={cardWidth} />
</SearchContainer>
</div>
</SidebarTriggerAdjustable>
</div>
<div className="flex flex-col justify-center items-center w-full gap-1 md:lg:gap-2 mt-2">
<Link href="/settings/storage" className="w-full flex items-center justify-center">

9
src/app/settings/storage/page.tsx
View File

@ -33,12 +33,10 @@ export default function Storage() {
setStatus(localStorage.getItem("persistence-status"));
}, []);
const SearchContainer = isMobile ? "div" : SidebarTriggerAdjustable;
const cardWidth = isMobile ? "w-full" : "w-2xl";
return (
<div className="p-5 w-full h-screen">
<div className="flex flex-col gap-2">
<div className="p-5 w-full">
<div className="flex flex-row items-center gap-2">
<StaticSidebarTrigger>
<Button className="fixed size-7 ml-10 z-40 transition-colors" variant="ghost" size="icon" onClick={() => router.back()}>
@ -51,10 +49,9 @@ export default function Storage() {
</ScrollFadingTitle>
</div>
<div className="flex flex-col sticky top-safe bg-background gap-2 mt-2 pb-2 pt-2 p-5 w-[100% + 5 * var(--spacing)] z-10 -mx-5">
<SearchContainer className={cn("flex justify-center", cardWidth)}>
<SidebarTriggerAdjustable adjustWidth="20" className={cn("flex justify-center", cardWidth)}>
<Search placeholder="Search Settings" className={cardWidth} />
</SearchContainer>
</div>
</SidebarTriggerAdjustable>
</div>
<div className="flex flex-row justify-between items-center w-full max-w-96">
<div className="flex flex-row gap-2 items-center">

11
src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx
View File

@ -16,7 +16,10 @@ const cssLerp = (a: string, b: string, t: string) => (
);
export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
export const SidebarTriggerAdjustable = (props: ComponentProps<"div"> & {
adjustWidth?: number | `${number}`;
}) => {
const adjustWidth = props.adjustWidth ? +props.adjustWidth : 12;
const isMobile = useIsMobile();
useEffect(() => {
@ -31,9 +34,9 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
const slideAmount = easeSlide(
Math.max(0, Math.min(1, window.scrollY / (window.innerHeight / 20)))
);
triggerDiv.style.transform = `translateX(calc(var(--spacing) * ${12 * slideAmount}))`;
triggerDiv.style.transform = `translateX(calc(var(--spacing) * ${adjustWidth * slideAmount}))`;
triggerDiv.style.paddingTop = `calc(var(--spacing) * ${(isMobile ? 1 : 3) * slideAmount})`;
triggerDiv.style.width = `calc(100% - var(--spacing) * ${lerp(0, 12, 1 - slideAmount)})`;
triggerDiv.style.width = `calc(100% - var(--spacing) * ${lerp(0, adjustWidth, 1 - slideAmount)})`;
};
handleScroll();
@ -44,5 +47,5 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
};
}, [isMobile]);
return <div data-sidebar-trigger="true" {...props} className={props.className}></div>;
return <div data-sidebar-trigger="true" className={props.className}>{props.children}</div>;
}