apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-06-09 19:45:17 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: rounder web search card with subtle expand/collapse animation

Browse source
This commit is contained in:
Gagancreates 2026-05-28 00:58:04 +05:30
parent b6d67999fd
commit dcd9a40bef
2 changed files with 26 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

24
apps/x/apps/renderer/src/App.css
View file

@ -35,6 +35,30 @@
}
}
/* Radix Collapsible expand/collapse — animate height (via the radix CSS var)
plus a subtle fade. Used by the web search card. */
@keyframes collapsible-down {
from {
height: 0;
opacity: 0;
}
to {
height: var(--radix-collapsible-content-height);
opacity: 1;
}
}
@keyframes collapsible-up {
from {
height: var(--radix-collapsible-content-height);
opacity: 1;
}
to {
height: 0;
opacity: 0;
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;

4
apps/x/apps/renderer/src/components/ai-elements/web-search-result.tsx
View file

@ -201,7 +201,7 @@ export function WebSearchResult({ query, results, status, title = "Searched the
<Collapsible
open={open}
onOpenChange={setOpen}
className="not-prose mb-4 w-full rounded-md border bg-[var(--ws-surface)] [--ws-surface:color-mix(in_oklab,var(--background)_98.5%,var(--foreground))] dark:[--ws-surface:color-mix(in_oklab,var(--background)_98.5%,var(--foreground))] transition-colors duration-150 ease-out hover:border-foreground/30"
className="not-prose mb-4 w-full rounded-[28px] border bg-[var(--ws-surface)] [--ws-surface:color-mix(in_oklab,var(--background)_98.5%,var(--foreground))] dark:[--ws-surface:color-mix(in_oklab,var(--background)_98.5%,var(--foreground))] transition-colors duration-150 ease-out hover:border-foreground/30"
>
<CollapsibleTrigger className="flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-2.5">
{/* Rolling header: clipped, fixed height so sliding lines stay contained */}
@ -228,7 +228,7 @@ export function WebSearchResult({ query, results, status, title = "Searched the
<ChevronDownIcon className={cn("size-4 text-muted-foreground transition-transform", open && "rotate-180")} />
</div>
</CollapsibleTrigger>
<CollapsibleContent>
<CollapsibleContent className="overflow-hidden data-[state=open]:animate-[collapsible-down_0.09s_ease-out] data-[state=closed]:animate-[collapsible-up_0.08s_ease-in]">
<div className="px-4 pb-3 space-y-3">
{/* Query */}
<div className="flex items-center gap-2 text-sm text-muted-foreground min-w-0">