mirror of
https://github.com/backnotprop/plannotator.git
synced 2026-09-14 14:17:26 +08:00
Michael Ramos
dbe2d6e4cb
* Replace persistent update banner with passive dot indicator in Options menu (#790) The floating update banner that appeared every session is removed. Update availability is now surfaced as a small dot on the Options button that auto-dismisses (cookie-persisted per version) when the menu is opened. The version section inside the menu shows install command and release notes when an update exists. * fix: restore ActionMenuSectionLabel import in both header menus * Add TextShimmer to update notice and simplify menu version section - Add reusable TextShimmer component (motion-primitives adaptation) - Add reusable BorderTrail component for future use - Shimmer "New update available!" text in the Options menu - Simplify button to plain text link in emerald - Remove Project repo link, make "Plannotator" header link to repo
39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import { motion, type Transition } from 'motion/react';
|
|
|
|
export interface BorderTrailProps {
|
|
className?: string;
|
|
size?: number;
|
|
transition?: Transition;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
export function BorderTrail({
|
|
className,
|
|
size = 60,
|
|
transition,
|
|
style,
|
|
}: BorderTrailProps) {
|
|
const defaultTransition: Transition = {
|
|
repeat: Infinity,
|
|
duration: 5,
|
|
ease: 'linear',
|
|
};
|
|
|
|
return (
|
|
<div className="pointer-events-none absolute inset-0 rounded-[inherit] border border-transparent [mask-clip:padding-box,border-box] [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]">
|
|
<motion.div
|
|
className={['absolute aspect-square bg-zinc-500', className].filter(Boolean).join(' ')}
|
|
style={{
|
|
width: size,
|
|
offsetPath: `rect(0 auto auto 0 round ${size}px)`,
|
|
...style,
|
|
}}
|
|
animate={{
|
|
offsetDistance: ['0%', '100%'],
|
|
}}
|
|
transition={transition ?? defaultTransition}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|