Add EnglishOnlyWarning component and display warning in relevant pages

web/components/news/english-only-warning.tsx

@@ -0,0 +1,17 @@
+import {useT} from 'web/lib/locale'
+import {useLocale} from 'web/lib/locale'
+
+export function EnglishOnlyWarning() {
+  const t = useT()
+  const {locale} = useLocale()
+
+  if (locale === 'en') {
+    return null
+  }
+
+  return (
+    <p className="text-sm guidance">
+      {t('news.note', 'Note: Unfortunately, this page is only available in English.')}
+    </p>
+  )
+}

web/components/votes/vote-info.tsx

@@ -8,6 +8,7 @@ import toast from 'react-hot-toast'
 import {Button} from 'web/components/buttons/button'
 import {Col} from 'web/components/layout/col'
 import {Row} from 'web/components/layout/row'
+import {EnglishOnlyWarning} from 'web/components/news/english-only-warning'
 import {Vote, VoteItem} from 'web/components/votes/vote-item'
 import {TextEditor, useTextEditor} from 'web/components/widgets/editor'
 import {Input} from 'web/components/widgets/input'
@@ -124,6 +125,8 @@ export function VoteComponent() {
         </Col>
       )}
 
+      <EnglishOnlyWarning />
+
       {votes && votes.length > 0 && (
         <Col className={'mt-4'}>
           {votes.map((vote: Vote) => {

web/messages/de.json

@@ -365,6 +365,7 @@
   "news.seo.description_general": "Alle Neuigkeiten und Code-Updates für Compass",
   "news.title": "Neuigkeiten",
   "news.view_on_github": "Auf GitHub ansehen",
+  "news.note": "Hinweis: Leider ist diese Seite nur auf Englisch verfügbar.",
   "notifications.empty": "Sie haben noch keine Benachrichtigungen.",
   "notifications.heading": "Wo möchten Sie benachrichtigt werden, wenn eine Person",
   "notifications.options.email": "Per E-Mail",

web/messages/fr.json

@@ -367,6 +367,7 @@
   "news.seo.description_general": "Toutes les actualités et mises à jour du code pour Compass",
   "news.title": "Quoi de neuf",
   "news.view_on_github": "Voir sur GitHub",
+  "news.note": "Note : Malheureusement, cette page n'est disponible qu'en anglais.",
   "notifications.empty": "Vous n'avez pas encore de notifications.",
   "notifications.heading": "Où voulez-vous être notifié lorsqu'une personne",
   "notifications.options.email": "Par e‑mail",

web/pages/compatibility.tsx

@@ -6,6 +6,7 @@ import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {CompatibilityAnswerBlock} from 'web/components/answers/compatibility-questions-display'
 import {Col} from 'web/components/layout/col'
 import {UncontrolledTabs} from 'web/components/layout/tabs'
+import {EnglishOnlyWarning} from 'web/components/news/english-only-warning'
 import {PageBase} from 'web/components/page-base'
 import {SEO} from 'web/components/SEO'
 import {Input} from 'web/components/widgets/input'
@@ -119,6 +120,7 @@ export default function CompatibilityPage() {
               setKeyword(e.target.value)
             }}
           />
+          <EnglishOnlyWarning />
           <UncontrolledTabs
             trackingName={'compatibility page'}
             name={'compatibility-page'}

web/pages/events.tsx

@@ -7,6 +7,7 @@ import {Button} from 'web/components/buttons/button'
 import {CreateEventModal} from 'web/components/events/create-event-modal'
 import {EventsList} from 'web/components/events/events-list'
 import {Col} from 'web/components/layout/col'
+import {EnglishOnlyWarning} from 'web/components/news/english-only-warning'
 import {PageBase} from 'web/components/page-base'
 import {CompassLoadingIndicator} from 'web/components/widgets/loading-indicator'
 import {Event, useEvents} from 'web/hooks/use-events'
@@ -180,6 +181,7 @@ export default function EventsPage() {
         {/* Events Content */}
         {!loading && !error && events && (
           <div className="space-y-10">
+            <EnglishOnlyWarning />
             {/* Upcoming Events */}
             <EventsList
               events={events.upcoming}

web/pages/news.tsx

@@ -3,6 +3,7 @@ import {useEffect, useState} from 'react'
 import {Col} from 'web/components/layout/col'
 import {CustomLink} from 'web/components/links'
 import {CustomMarkdown} from 'web/components/markdown'
+import {EnglishOnlyWarning} from 'web/components/news/english-only-warning'
 import {PageBase} from 'web/components/page-base'
 import {SEO} from 'web/components/SEO'
 import {CompassLoadingIndicator} from 'web/components/widgets/loading-indicator'
@@ -89,6 +90,7 @@ export default function WhatsNew(props: {releases?: Release[]}) {
         <p>{t('news.failed', 'Failed to fetch releases.')}</p>
       ) : (
         <Col className="max-w-3xl mx-auto py-10 px-4 custom-link">
+          <EnglishOnlyWarning />
           {releases.map((release: Release) => (
             <div key={release.id} className="mb-10 border-b pb-6">
               <div className="flex justify-between items-center">

web/pages/notifications.tsx

@@ -3,6 +3,7 @@ import {type User} from 'common/src/user'
 import {Fragment, useEffect, useMemo, useState} from 'react'
 import {Col} from 'web/components/layout/col'
 import {UncontrolledTabs} from 'web/components/layout/tabs'
+import {EnglishOnlyWarning} from 'web/components/news/english-only-warning'
 import {NoSEO} from 'web/components/NoSEO'
 import {NotificationItem} from 'web/components/notification-items'
 import {NotificationSettings} from 'web/components/notifications'
@@ -23,6 +24,7 @@ export default function NotificationsPage() {
     <PageBase trackPageView={'notifications page'} className={'mx-4'}>
       <NoSEO />
       <Title>{t('notifications.title', 'Updates')}</Title>
+      <EnglishOnlyWarning />
       <UncontrolledTabs
         name={'notifications-page'}
         tabs={[