openhands
759ae91745
Gitea Actions Runner Test / test-job (push) Successful in 2s
CI / check (push) Successful in 26s
CI / tests-unit (push) Failing after 1m37s
CI / tests-integration (push) Successful in 1m38s
CI / tests-ui (push) Failing after 2m24s
CI / preflight (push) Skipped
CI / deploy (push) Skipped
Closes the four remaining LOW items. Search and news archive caching - A leading-wildcard LIKE cannot use an index, so every /search section cost a COUNT(*) scan plus an ordered page fetch, and /news did the same for its archive. Both now cache: search per section for 30s, the archive for 60s under the existing news revision so publishing an article drops it at once. - Sections are cached independently, so one slow query cannot hold up the rest and a failure is not cached as a result. - The cached value is passed through cacheSafe() so the Redis path and the in-process path return the same types; without it a cache hit would hand the events grid a string where a miss hands it a Date, and it calls toISOString() on that field. Dates are revived on the way out so the public signatures of loadNewsArchive and loadPublicSearch are unchanged. - Archive entries are keyed on the REQUESTED page rather than the clamped one, so two requests that clamp onto the same page cannot alias each other. motion/react out of the public bundle - Converted the six public-facing users: the radio player, the typewriter text (a motion.span with no animation props at all), the photo lightbox, the animated counter, the footer CMS-info popup and the scroll reveal. That was the actual entry points — the counter and the popup reach the public home page and footer through static imports, so removing only the three originally named would have left the library in the bundle anyway. - Each animation moved to a CSS class, and the two that animate on exit now hold the element for the length of the fade, which is what AnimatePresence used to do. - motion/react now only ships with /admin and the two already-lazy nav panels. - Two safety fixes came out of this: the scroll reveal starts at opacity 0, so it is forced visible under prefers-reduced-motion and via a <noscript> rule in the root layout; and it now emits the .motion-reveal class, which the theme panel's "Scroll Reveal" toggle selects and which previously matched nothing. - The CMS-info backdrop became a real button in a pointer-transparent layer instead of a handler on a static element, so click-outside-to-dismiss is reachable by keyboard. Fewer duplicate router refreshes - Next.js re-renders the current route as part of a server action's own response when that action revalidates, and applies it with a seeded navigation; the router only skips its own update when the action did NOT revalidate. So the refresh after such an action fetched the same tree twice. - useServerAction takes an opt-in `revalidated` flag that skips it. It is opt-in per call rather than derived from an action name, since a rename would silently change behaviour. Applied to the two user-facing call sites whose actions were verified to revalidate their own route. Touch targets - .btn was the one shared control at 40px; it and the lightbox and CMS-info close buttons are now 44px, as is the password toggle (the auth input already reserved 44px for it). The remaining 32px icon buttons pass WCAG 2.2 AA, which only asks for 24px; enlarging those inside inputs and overlays was left alone because it risks visual breakage that cannot be checked from here.
69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { type ReactNode, useEffect, useRef, useState } from "react";
|
|
|
|
interface RevealProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
/** Seconds to wait before the reveal starts. */
|
|
delay?: number;
|
|
}
|
|
|
|
/**
|
|
* Fade-and-rise-on-scroll, without motion/react.
|
|
*
|
|
* This component sits on the public home page, the auth pages and the settings
|
|
* page, so the animation library used to be pulled into their initial bundle
|
|
* for this one effect. The behaviour is a plain IntersectionObserver plus two
|
|
* CSS classes.
|
|
*
|
|
* Two safety rules, because "invisible until a scroll event" is a bad failure
|
|
* mode:
|
|
* - `.motion-reveal` starts at `opacity: 0` and is only restored by the
|
|
* animation, so globals.css forces it visible under
|
|
* `prefers-reduced-motion`, and the root layout ships a `<noscript>` rule
|
|
* for the no-JavaScript case. Either way the content is readable.
|
|
* - The observer latches and disconnects, matching the previous `once: true`.
|
|
*/
|
|
export function Reveal({ children, className, delay = 0 }: RevealProps) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const [shown, setShown] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const node = ref.current;
|
|
if (!node) return;
|
|
if (typeof IntersectionObserver === "undefined") {
|
|
setShown(true);
|
|
return;
|
|
}
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
for (const entry of entries) {
|
|
if (entry.isIntersecting) {
|
|
setShown(true);
|
|
observer.disconnect();
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
{ rootMargin: "-40px" },
|
|
);
|
|
observer.observe(node);
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
// The theme panel's "Scroll Reveal" toggle selects `.motion-reveal`;
|
|
// it previously matched nothing because the class was never emitted.
|
|
className={`motion-reveal${shown ? " motion-reveal-in" : ""}${
|
|
className ? ` ${className}` : ""
|
|
}`}
|
|
style={delay ? { animationDelay: `${delay}s` } : undefined}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|