Add live data indicator

apps/web/components/Gw2Api/Gw2AccountSubscriptionProvider.tsx

@@ -40,7 +40,8 @@ type Cache = {
 
 type SubscriptionContext<T extends SubscriptionType> = (type: T, accountId: string, callback: SubscriptionCallback<T>) => CancelSubscription;
 
-const context = createContext<SubscriptionContext<SubscriptionType>>(() => () => {});
+const subscriptionContext = createContext<SubscriptionContext<SubscriptionType>>(() => () => {});
+const hasActiveSubscriptionContext = createContext(false);
 
 function hasType<T extends SubscriptionType>(type: T) {
   return (subscription: ActiveSubscription<SubscriptionType>): subscription is ActiveSubscription<T> => subscription.type === type;
@@ -175,14 +176,16 @@ export const Gw2AccountSubscriptionProvider: FC<Gw2AccountSubscriptionProviderPr
   }, []);
 
   return (
-    <context.Provider value={subscribe}>
-      {children}
-    </context.Provider>
+    <subscriptionContext.Provider value={subscribe}>
+      <hasActiveSubscriptionContext.Provider value={activeSubscriptions.length > 0}>
+        {children}
+      </hasActiveSubscriptionContext.Provider>
+    </subscriptionContext.Provider>
   );
 };
 
 export function useSubscribe<T extends SubscriptionType>(type: T, accountId: string, callback: SubscriptionCallback<T>) {
-  const subscribe = useContext(context);
+  const subscribe = useContext(subscriptionContext);
 
   useEffect(
     () => subscribe(type, accountId, callback),
@@ -200,6 +203,10 @@ export function useSubscription<T extends SubscriptionType>(type: T, accountId:
   return data === undefined ? { loading: true } : { loading: false, ...data };
 }
 
+export function usePageHasActiveSubscriptions() {
+  return useContext(hasActiveSubscriptionContext);
+}
+
 function useInterval(active: boolean = false, seconds: number, callback: () => void) {
   const callbackRef = useRefTo(callback);
   const activeRef = useRefTo(active);

apps/web/components/Layout/Header/LiveUpdateStatus.module.css

@@ -0,0 +1,16 @@
+.live {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  color: #ef5350;
+  background-color: currentColor;
+  border-radius: 4px;
+  vertical-align: 2px;
+  margin-right: 8px;
+  animation: live ease-in 2s infinite;
+}
+
+@keyframes live {
+  0% { box-shadow: 0 0 0 0 currentColor; }
+  40% { box-shadow: 0 0 0 4px transparent; }
+}

apps/web/components/Layout/Header/LiveUpdateStatus.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { usePageHasActiveSubscriptions } from '@/components/Gw2Api/Gw2AccountSubscriptionProvider';
+import { Button } from '@gw2treasures/ui/components/Form/Button';
+import type { FC } from 'react';
+import styles from './LiveUpdateStatus.module.css';
+import { DropDown } from '@gw2treasures/ui/components/DropDown/DropDown';
+
+export interface LiveUpdateStatusProps {}
+
+export const LiveUpdateStatus: FC<LiveUpdateStatusProps> = ({}) => {
+  const live = usePageHasActiveSubscriptions();
+
+  if(!live) {
+    return null;
+  }
+
+  return (
+    <DropDown hideTop={false} preferredPlacement="bottom" button={<Button appearance="menu"><span className={styles.live}/> Live</Button>}>
+      <p>Your account data on this page<br/> is automatically updating.</p>
+    </DropDown>
+  );
+};

apps/web/components/Layout/Layout.tsx

@@ -13,6 +13,7 @@ import { ReviewCountBadge } from './Header/ReviewCountBadge';
 import { UserButton } from './Header/UserButton';
 import { translations as itemTypeTranslations } from '../Item/ItemType.translations';
 import { Rarity } from '@gw2treasures/database';
+import { LiveUpdateStatus } from './Header/LiveUpdateStatus';
 
 interface LayoutProps {
   children: ReactNode;
@@ -44,6 +45,7 @@ const Layout: FC<LayoutProps> = ({ children }) => {
             <span>gw2treasures.com</span>
           </Link>
           <Search translations={searchTranslations}/>
+          <LiveUpdateStatus/>
           <div className={styles.right}>
             <LinkButton appearance="menu" href="/review">
               <Icon icon="review-queue"/><span className={styles.responsive}> Review<ReviewCountBadge/></span>