Max Litruv Boonzaayer
9a00375568
- Added `useViewTransitions` hook to enable view transitions in the app. - Created `useNavigateWithTransition` for navigation with transitions. - Integrated view transitions in `ClientRoot`, `HomeTab`, `InboxTab`, and `SettingsTab`. - Introduced `AnimatedOutlet` and `RouteTransition` components for route-based animations. - Enhanced CSS for transitions and added a new `twilightTheme`. - Updated Vite configuration to serve sound and font assets. - Added support for reaction notifications in the room utility. - Created `DirectList` and related components for direct messaging functionality.
81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
/**
|
|
* Utility for enabling View Transitions API in the app
|
|
*/
|
|
|
|
/**
|
|
* Check if View Transitions API is supported
|
|
*/
|
|
export const supportsViewTransitions = (): boolean => 'startViewTransition' in document;
|
|
|
|
/**
|
|
* Execute a function with view transition if supported
|
|
* Falls back to immediate execution if not supported
|
|
*/
|
|
export const withViewTransition = async (callback: () => void | Promise<void>): Promise<void> => {
|
|
if (!supportsViewTransitions()) {
|
|
await callback();
|
|
return;
|
|
}
|
|
|
|
const doc = document as Document & {
|
|
startViewTransition: (callback: () => void | Promise<void>) => {
|
|
finished: Promise<void>;
|
|
updateCallbackDone: Promise<void>;
|
|
ready: Promise<void>;
|
|
};
|
|
};
|
|
|
|
try {
|
|
const transition = doc.startViewTransition(async () => {
|
|
await callback();
|
|
});
|
|
|
|
await transition.finished;
|
|
} catch (error) {
|
|
// Fallback if transition fails
|
|
await callback();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Enable view transitions for router navigation
|
|
* Call this in your app initialization
|
|
*/
|
|
export const enableViewTransitionsForNavigation = (): void => {
|
|
if (!supportsViewTransitions()) {
|
|
return;
|
|
}
|
|
|
|
// Intercept link clicks and navigation to add view transitions
|
|
const handleLinkClick = (event: MouseEvent) => {
|
|
const target = (event.target as HTMLElement).closest('a');
|
|
|
|
if (!target) return;
|
|
if (target.target === '_blank') return;
|
|
if (target.origin !== window.location.origin) return;
|
|
if (event.metaKey || event.ctrlKey || event.shiftKey) return;
|
|
|
|
const url = new URL(target.href);
|
|
|
|
// Only handle same-origin navigation
|
|
if (url.origin === window.location.origin) {
|
|
event.preventDefault();
|
|
|
|
withViewTransition(() => {
|
|
window.history.pushState({}, '', target.href);
|
|
window.dispatchEvent(new PopStateEvent('popstate'));
|
|
});
|
|
}
|
|
};
|
|
|
|
// Handle back/forward navigation
|
|
const handlePopState = () => {
|
|
withViewTransition(() => {
|
|
// The URL has already changed, just trigger re-render
|
|
});
|
|
};
|
|
|
|
window.addEventListener('click', handleLinkClick);
|
|
window.addEventListener('popstate', handlePopState);
|
|
};
|