From 4d81e60345133e3b866093c027dba5dd31e37a89 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Wed, 19 Aug 2026 19:48:04 +0200
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=92=84=20Move=20layout=20styling=20fr?=
 =?UTF-8?q?om=20system=20props=20to=20sx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

MUI 9 removed support for system props on components: layout props passed
directly to Stack, Box, Grid or Typography are no longer translated into CSS
and end up as plain DOM attributes instead. That silently broke every flex
row in the admin UI, most visibly the ticker headline and the message form
toolbar.

Move alignItems, justifyContent, display, flexGrow and spacing props into
sx, and switch Typography colours to values MUI 9 still resolves.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/Loader.tsx                      |  2 +-
 src/components/common/Modal.tsx                |  2 +-
 src/components/message/MessageFooter.tsx       |  6 +++---
 src/components/message/MessageForm.tsx         |  4 ++--
 .../settings/InactiveSettingsCard.tsx          | 18 +++++++++---------
 src/components/settings/SettingsCard.tsx       |  4 ++--
 .../settings/SignalGroupSettingsCard.tsx       |  6 +++---
 .../settings/TelegramSettingsCard.tsx          |  4 ++--
 src/components/ticker/BlueskyCard.tsx          |  6 +++---
 src/components/ticker/IntegrationCard.tsx      |  4 ++--
 src/components/ticker/MastodonCard.tsx         |  4 ++--
 src/components/ticker/SignalGroupCard.tsx      |  4 ++--
 src/components/ticker/TelegramCard.tsx         |  8 ++++----
 src/components/ticker/Ticker.tsx               |  4 ++--
 src/components/ticker/TickerCard.tsx           | 14 +++++++-------
 src/components/ticker/TickerListFilter.tsx     |  2 +-
 src/components/ticker/TickerListItems.tsx      |  4 ++--
 src/components/ticker/WebsiteCard.tsx          |  2 +-
 src/views/ErrorView.tsx                        |  4 ++--
 src/views/SettingsView.tsx                     |  2 +-
 src/views/TickerListView.tsx                   |  2 +-
 src/views/UsersView.tsx                        |  2 +-
 22 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
index d410f906..bd6d1b4b 100644
--- a/src/components/Loader.tsx
+++ b/src/components/Loader.tsx
@@ -6,7 +6,7 @@ const Loader: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <Stack alignItems="center" justifyContent="center" sx={{ m: 10 }}>
+    <Stack sx={{ alignItems: 'center', justifyContent: 'center', m: 10 }}>
       <CircularProgress size="3rem" />
       <Typography component="span" sx={{ pt: 2 }} variant="h5">
         {t('common.loading')}
diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx
index 1711f350..563cca3c 100644
--- a/src/components/common/Modal.tsx
+++ b/src/components/common/Modal.tsx
@@ -36,7 +36,7 @@ const Modal: FC<Props> = ({
   return (
     <Dialog fullWidth={fullWidth} maxWidth={maxWidth} open={open}>
       <DialogTitle>
-        <Stack alignItems="center" direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
           {title}
           <IconButton aria-label={t('action.close')} onClick={onClose}>
             <Close />
diff --git a/src/components/message/MessageFooter.tsx b/src/components/message/MessageFooter.tsx
index 563f133c..47d2ac30 100644
--- a/src/components/message/MessageFooter.tsx
+++ b/src/components/message/MessageFooter.tsx
@@ -23,12 +23,12 @@ const formatDate = (dateString: string): string => {
 
 const MessageFooter: FC<Props> = ({ message }) => {
   return (
-    <Stack alignItems="center" direction="row" justifyContent="space-between" sx={{ mt: 2, pr: 2.5 }}>
-      <Stack alignItems="center" direction="row" spacing={0.5}>
+    <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', mt: 2, pr: 2.5 }}>
+      <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
         <FontAwesomeIcon aria-hidden="true" icon={faClock} size="2xs" color={colors.grey[600]} />
         <Typography variant="caption">{formatDate(message.createdAt)}</Typography>
       </Stack>
-      <Stack alignItems="center" direction="row" spacing="0.5">
+      <Stack direction="row" spacing="0.5" sx={{ alignItems: 'center' }}>
         <Icon icon={faTelegram} url={message.telegramUrl} label="Telegram" />
         <Icon icon={faMastodon} url={message.mastodonUrl} label="Mastodon" />
         <Icon icon={faBluesky} url={message.blueskyUrl} label="Bluesky" />
diff --git a/src/components/message/MessageForm.tsx b/src/components/message/MessageForm.tsx
index 05c2ebc8..a0fcfd16 100644
--- a/src/components/message/MessageForm.tsx
+++ b/src/components/message/MessageForm.tsx
@@ -133,8 +133,8 @@ const MessageForm: FC<Props> = ({ ticker }) => {
             disabled={!ticker.active}
           />
         </FormGroup>
-        <Stack alignItems="center" direction="row" justifyContent="space-between">
-          <Box display="flex">
+        <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
+          <Box sx={{ display: 'flex' }}>
             <Button disabled={disabled} startIcon={<FontAwesomeIcon icon={faPaperPlane} />} sx={{ mr: 1 }} type="submit" variant="outlined">
               {t('action.send')}
             </Button>
diff --git a/src/components/settings/InactiveSettingsCard.tsx b/src/components/settings/InactiveSettingsCard.tsx
index 7a19a633..4fe730dc 100644
--- a/src/components/settings/InactiveSettingsCard.tsx
+++ b/src/components/settings/InactiveSettingsCard.tsx
@@ -37,7 +37,7 @@ const InactiveSettingsCard: FC = () => {
   return (
     <Card>
       <CardContent>
-        <Stack alignItems="center" direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
           <Typography component="h3" variant="h5">
             {t('title.inactive')}
           </Typography>
@@ -45,26 +45,26 @@ const InactiveSettingsCard: FC = () => {
             {t('action.edit')}
           </Button>
         </Stack>
-        <Typography color="GrayText" component="span" variant="body2">
+        <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
           {t('status.description')}
         </Typography>
       </CardContent>
       <Divider variant="middle" />
       <CardContent>
         <Box sx={{ mb: 1 }}>
-          <Typography color="GrayText" component="span" variant="body2">
+          <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
             {t('common.headline')}
           </Typography>
           <Typography>{setting.value.headline}</Typography>
         </Box>
         <Box sx={{ mb: 1 }}>
-          <Typography color="GrayText" component="span" variant="body2">
+          <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
             {t('common.subheadline')}
           </Typography>
           <Typography>{setting.value.subHeadline}</Typography>
         </Box>
         <Box sx={{ mb: 1 }}>
-          <Typography color="GrayText" component="span" variant="body2">
+          <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
             {t('common.description')}
           </Typography>
           <Typography>{setting.value.description}</Typography>
@@ -72,7 +72,7 @@ const InactiveSettingsCard: FC = () => {
         <Grid container>
           <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
-              <Typography color="GrayText" component="span" variant="body2">
+              <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
                 {t('common.author')}
               </Typography>
               <Typography>{setting.value.author}</Typography>
@@ -80,7 +80,7 @@ const InactiveSettingsCard: FC = () => {
           </Grid>
           <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
-              <Typography color="GrayText" component="span" variant="body2">
+              <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
                 {t('integrations.homepage')}
               </Typography>
               <Typography>{setting.value.homepage}</Typography>
@@ -88,7 +88,7 @@ const InactiveSettingsCard: FC = () => {
           </Grid>
           <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
-              <Typography color="GrayText" component="span" variant="body2">
+              <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
                 {t('user.email')}
               </Typography>
               <Typography>{setting.value.email}</Typography>
@@ -96,7 +96,7 @@ const InactiveSettingsCard: FC = () => {
           </Grid>
           <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
-              <Typography color="GrayText" component="span" variant="body2">
+              <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
                 {t('social.twitter')}
               </Typography>
               <Typography>{setting.value.twitter}</Typography>
diff --git a/src/components/settings/SettingsCard.tsx b/src/components/settings/SettingsCard.tsx
index 6244a57f..932d82d7 100644
--- a/src/components/settings/SettingsCard.tsx
+++ b/src/components/settings/SettingsCard.tsx
@@ -36,7 +36,7 @@ function SettingsCard<T>({ title, description, editTestId, queryKey, errorMessag
   return (
     <Card>
       <CardContent>
-        <Stack alignItems="center" direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
           <Typography component="h3" variant="h5">
             {t(title)}
           </Typography>
@@ -44,7 +44,7 @@ function SettingsCard<T>({ title, description, editTestId, queryKey, errorMessag
             {t('action.edit')}
           </Button>
         </Stack>
-        <Typography color="GrayText" component="span" variant="body2">
+        <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
           {t(description)}
         </Typography>
       </CardContent>
diff --git a/src/components/settings/SignalGroupSettingsCard.tsx b/src/components/settings/SignalGroupSettingsCard.tsx
index 47d658af..79f674ec 100644
--- a/src/components/settings/SignalGroupSettingsCard.tsx
+++ b/src/components/settings/SignalGroupSettingsCard.tsx
@@ -24,19 +24,19 @@ const SignalGroupSettingsCard: FC<{ onSaved?: () => void }> = ({ onSaved }) => {
       {({ data, formOpen, onFormClose }) => (
         <>
           <Box sx={{ mb: 1 }}>
-            <Typography color="GrayText" component="span" variant="body2">
+            <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
               {t('settings.signalGroup.apiUrl')}
             </Typography>
             <Typography>{data.setting.value.apiUrl || '—'}</Typography>
           </Box>
           <Box sx={{ mb: 1 }}>
-            <Typography color="GrayText" component="span" variant="body2">
+            <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
               {t('settings.signalGroup.account')}
             </Typography>
             <Typography>{data.setting.value.account || '—'}</Typography>
           </Box>
           <Box sx={{ mb: 1 }}>
-            <Typography color="GrayText" component="span" variant="body2">
+            <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
               {t('settings.signalGroup.avatar')}
             </Typography>
             <Typography>{data.setting.value.avatar || '—'}</Typography>
diff --git a/src/components/settings/TelegramSettingsCard.tsx b/src/components/settings/TelegramSettingsCard.tsx
index fbdd8870..7d843d5f 100644
--- a/src/components/settings/TelegramSettingsCard.tsx
+++ b/src/components/settings/TelegramSettingsCard.tsx
@@ -24,13 +24,13 @@ const TelegramSettingsCard: FC<{ onSaved?: () => void }> = ({ onSaved }) => {
       {({ data, formOpen, onFormClose }) => (
         <>
           <Box sx={{ mb: 1 }}>
-            <Typography color="GrayText" component="span" variant="body2">
+            <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
               {t('settings.telegram.botUsername')}
             </Typography>
             <Typography>{data.setting.value.botUsername || '—'}</Typography>
           </Box>
           <Box sx={{ mb: 1 }}>
-            <Typography color="GrayText" component="span" variant="body2">
+            <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
               {t('settings.telegram.token')}
             </Typography>
             <Typography>{data.setting.value.token || '—'}</Typography>
diff --git a/src/components/ticker/BlueskyCard.tsx b/src/components/ticker/BlueskyCard.tsx
index 2a1db3e3..e1910b1c 100644
--- a/src/components/ticker/BlueskyCard.tsx
+++ b/src/components/ticker/BlueskyCard.tsx
@@ -47,10 +47,10 @@ const BlueskyCard: FC<Props> = ({ ticker }) => {
   const details = bluesky.connected ? (
     <Stack spacing={1}>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.profile')}
         </Typography>
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
           <Link href={profileUrl} rel="noreferrer" target="_blank" variant="body2">
             {bluesky.handle}
           </Link>
@@ -58,7 +58,7 @@ const BlueskyCard: FC<Props> = ({ ticker }) => {
         </Stack>
       </div>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.bluesky.replyRestriction')}
         </Typography>
         <Typography variant="body2">{replyRestrictionLabel(bluesky.replyRestriction)}</Typography>
diff --git a/src/components/ticker/IntegrationCard.tsx b/src/components/ticker/IntegrationCard.tsx
index 62949b67..a7d68a19 100644
--- a/src/components/ticker/IntegrationCard.tsx
+++ b/src/components/ticker/IntegrationCard.tsx
@@ -83,13 +83,13 @@ const IntegrationCard: FC<IntegrationCardProps> = ({
     <>
       <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
         <CardContent>
-          <Stack alignItems="center" direction="row" justifyContent="space-between" spacing={1}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
             <Typography component="h5" variant="h5">
               <FontAwesomeIcon aria-hidden="true" icon={icon} /> {title}
             </Typography>
             <Chip label={t(`integrations.integrationStatus.${status}`)} color={color} size="small" variant="outlined" />
           </Stack>
-          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+          <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
             {description}
           </Typography>
         </CardContent>
diff --git a/src/components/ticker/MastodonCard.tsx b/src/components/ticker/MastodonCard.tsx
index 73c1420e..886186ee 100644
--- a/src/components/ticker/MastodonCard.tsx
+++ b/src/components/ticker/MastodonCard.tsx
@@ -33,10 +33,10 @@ const MastodonCard: FC<Props> = ({ ticker }) => {
   const details = mastodon.connected ? (
     <Stack spacing={1}>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.profile')}
         </Typography>
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
           <Link href={profileUrl} rel="noreferrer" target="_blank" variant="body2">
             {profileHandle}
           </Link>
diff --git a/src/components/ticker/SignalGroupCard.tsx b/src/components/ticker/SignalGroupCard.tsx
index 74315f3d..234dcac5 100644
--- a/src/components/ticker/SignalGroupCard.tsx
+++ b/src/components/ticker/SignalGroupCard.tsx
@@ -91,10 +91,10 @@ const SignalGroupCard: FC<Props> = ({ ticker }) => {
   const details = signalGroup.connected ? (
     <Stack spacing={1}>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.signal.inviteLink')}
         </Typography>
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
           <Link href={signalGroup.groupInviteLink} rel="noreferrer" target="_blank" variant="body2">
             {ticker.title}
           </Link>
diff --git a/src/components/ticker/TelegramCard.tsx b/src/components/ticker/TelegramCard.tsx
index 06d05dad..14beca48 100644
--- a/src/components/ticker/TelegramCard.tsx
+++ b/src/components/ticker/TelegramCard.tsx
@@ -34,10 +34,10 @@ const TelegramCard: FC<Props> = ({ ticker }) => {
   const details = telegram.connected ? (
     <Stack spacing={1}>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.telegram.channel')}
         </Typography>
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
           <Link href={channelUrl} rel="noreferrer" target="_blank" variant="body2">
             {telegram.channelName}
           </Link>
@@ -45,10 +45,10 @@ const TelegramCard: FC<Props> = ({ ticker }) => {
         </Stack>
       </div>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.telegram.botLabel')}
         </Typography>
-        <Stack direction="row" alignItems="center" spacing={0.5}>
+        <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
           <Typography variant="body2">{telegram.botUsername}</Typography>
           <Tooltip title={t('integrations.telegram.botHint')}>
             <FontAwesomeIcon icon={faCircleInfo} size="sm" style={{ color: 'gray', cursor: 'help' }} />
diff --git a/src/components/ticker/Ticker.tsx b/src/components/ticker/Ticker.tsx
index af1770da..66e14ebe 100644
--- a/src/components/ticker/Ticker.tsx
+++ b/src/components/ticker/Ticker.tsx
@@ -25,7 +25,7 @@ const Ticker: FC<Props> = ({ ticker, isLoading }) => {
   const [formModalOpen, setFormModalOpen] = useState<boolean>(false)
 
   const headline = () => (
-    <Stack alignItems="center" direction="row" justifyContent="space-between" mb={2}>
+    <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
       <Typography component="h2" gutterBottom variant="h3">
         {t('title.ticker')}
       </Typography>
@@ -67,7 +67,7 @@ const Ticker: FC<Props> = ({ ticker, isLoading }) => {
           <Alert severity="warning">{t('tickers.disabled')}</Alert>
         </Grid>
       ) : null}
-      <Grid display={{ xs: 'none', md: 'block' }} size={{ md: 4, xs: 12 }}>
+      <Grid size={{ md: 4, xs: 12 }} sx={{ display: { xs: 'none', md: 'block' } }}>
         <TickerCard ticker={ticker} />
         {user?.roles.includes('admin') ? (
           <>
diff --git a/src/components/ticker/TickerCard.tsx b/src/components/ticker/TickerCard.tsx
index 690f5d29..317c1c40 100644
--- a/src/components/ticker/TickerCard.tsx
+++ b/src/components/ticker/TickerCard.tsx
@@ -24,9 +24,9 @@ const TickerCard: FC<Props> = ({ ticker }) => {
   return (
     <Card>
       <CardContent>
-        <Stack direction="row" spacing={1} alignItems="center">
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
           <FontAwesomeIcon aria-hidden="true" icon={faCircleInfo} />
-          <Typography component="h5" variant="h5" flexGrow={1}>
+          <Typography component="h5" variant="h5" sx={{ flexGrow: 1 }}>
             {t('common.info')}
           </Typography>
         </Stack>
@@ -36,7 +36,7 @@ const TickerCard: FC<Props> = ({ ticker }) => {
         </Stack>
         <Chip icon={icon} label={status} variant="outlined" sx={{ mt: 2 }} size="small" color={color} />
         <Divider sx={{ mt: 2 }} />
-        <Stack direction="row" spacing={1} alignItems="center" sx={{ mt: 2 }}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center', mt: 2 }}>
           <Campaign />
           <Typography component="h6" variant="h6">
             {t('title.integrations')}
@@ -57,9 +57,9 @@ const Integrations = ({ ticker }: { ticker: Ticker }) => {
         <TickerProperty
           label="Websites"
           value={ticker.websites.map(website => (
-            <Stack key={website.origin} direction="row" alignItems="center" spacing={0.5}>
+            <Stack key={website.origin} direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
               <FontAwesomeIcon aria-hidden="true" icon={faGlobeEurope} color={grey[800]} />
-              <Typography variant="body2" flexGrow={1}>
+              <Typography variant="body2" sx={{ flexGrow: 1 }}>
                 <Link href={website.origin} target="_blank" rel="noopener noreferrer">
                   {website.origin.replace(/(^\w+:|^)\/\//, '')}
                 </Link>
@@ -122,13 +122,13 @@ const IntegrationChip = ({ active, title, link }: { active: boolean; title: stri
   const { t } = useTranslation()
 
   return (
-    <Stack direction="row" alignItems="center" spacing={0.5}>
+    <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
       <Tooltip title={t(active ? 'status.active' : 'status.inactive')} arrow placement="top">
         <span>
           <FontAwesomeIcon aria-hidden="true" icon={active ? faToggleOn : faToggleOff} color={grey[800]} />
         </span>
       </Tooltip>
-      <Typography variant="body2" flexGrow={1}>
+      <Typography variant="body2" sx={{ flexGrow: 1 }}>
         <Link href={link} target="_blank" rel="noopener noreferrer">
           {title}
         </Link>
diff --git a/src/components/ticker/TickerListFilter.tsx b/src/components/ticker/TickerListFilter.tsx
index 49229c36..8bc850e8 100644
--- a/src/components/ticker/TickerListFilter.tsx
+++ b/src/components/ticker/TickerListFilter.tsx
@@ -16,7 +16,7 @@ const TickerListFilter: FC<Props> = ({ params, onTitleChange, onOriginChange, on
   const { t } = useTranslation()
 
   return (
-    <Stack direction="row" alignItems="center">
+    <Stack direction="row" sx={{ alignItems: 'center' }}>
       <Box sx={{ px: 1 }}>
         <FontAwesomeIcon aria-hidden="true" icon={faFilter} />
       </Box>
diff --git a/src/components/ticker/TickerListItems.tsx b/src/components/ticker/TickerListItems.tsx
index 7a48e56b..be0eb641 100644
--- a/src/components/ticker/TickerListItems.tsx
+++ b/src/components/ticker/TickerListItems.tsx
@@ -20,7 +20,7 @@ const TickerListItems: FC<Props> = ({ token, params }) => {
       <TableBody>
         <TableRow>
           <TableCell colSpan={5}>
-            <Stack alignItems="center" justifyContent="center">
+            <Stack sx={{ alignItems: 'center', justifyContent: 'center' }}>
               <CircularProgress size="2rem" />
               <Typography component="span" sx={{ pt: 1 }}>
                 {t('common.loading')}
@@ -49,7 +49,7 @@ const TickerListItems: FC<Props> = ({ token, params }) => {
       <TableBody>
         <TableRow>
           <TableCell colSpan={5}>
-            <Stack alignItems="center" justifyContent="center">
+            <Stack sx={{ alignItems: 'center', justifyContent: 'center' }}>
               <Typography variant="body1">{t('tickers.error0Found')}</Typography>
             </Stack>
           </TableCell>
diff --git a/src/components/ticker/WebsiteCard.tsx b/src/components/ticker/WebsiteCard.tsx
index 9fd14ec9..c4ad4567 100644
--- a/src/components/ticker/WebsiteCard.tsx
+++ b/src/components/ticker/WebsiteCard.tsx
@@ -27,7 +27,7 @@ const WebsiteCard: FC<Props> = ({ ticker }) => {
 
   const details = isConfigured ? (
     <Stack spacing={0.5}>
-      <Typography variant="caption" color="text.secondary">
+      <Typography variant="caption" color="textSecondary">
         {t('integrations.website.allowed')}
       </Typography>
       {websites.map(website => (
diff --git a/src/views/ErrorView.tsx b/src/views/ErrorView.tsx
index ba549973..07da923d 100644
--- a/src/views/ErrorView.tsx
+++ b/src/views/ErrorView.tsx
@@ -23,7 +23,7 @@ const ErrorView: FC<Props> = ({ children, queryKey }) => {
           {t('error.ohNo')}
         </Typography>
         <Divider sx={{ mt: 1, mb: 2 }} />
-        <Stack alignItems="center" direction="row" spacing={2}>
+        <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
           <Box>
             <Button color="secondary" onClick={handleClick} variant="contained">
               {t('action.reload')}
@@ -33,7 +33,7 @@ const ErrorView: FC<Props> = ({ children, queryKey }) => {
             <Typography component="div" variant="body1">
               {children}
             </Typography>
-            <Typography color={colors.grey[700]} component="p" variant="body2">
+            <Typography component="p" variant="body2" sx={{ color: colors.grey[700] }}>
               {t('error.contactAdmin')}
             </Typography>
           </Box>
diff --git a/src/views/SettingsView.tsx b/src/views/SettingsView.tsx
index 12656f76..8cbddf08 100644
--- a/src/views/SettingsView.tsx
+++ b/src/views/SettingsView.tsx
@@ -15,7 +15,7 @@ const SettingsView: FC = () => {
     <Layout>
       <Grid container spacing={2}>
         <Grid size={{ xs: 12 }}>
-          <Stack alignItems="center" direction="row" justifyContent="space-between" mb={2}>
+          <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
             <Typography component="h2" gutterBottom variant="h3">
               {t('title.settings')}
             </Typography>
diff --git a/src/views/TickerListView.tsx b/src/views/TickerListView.tsx
index 38bf9f99..34bb206f 100644
--- a/src/views/TickerListView.tsx
+++ b/src/views/TickerListView.tsx
@@ -17,7 +17,7 @@ const TickerListView: FC = () => {
     <Layout>
       <Grid container spacing={2}>
         <Grid size={{ xs: 12 }}>
-          <Stack alignItems="center" direction="row" justifyContent="space-between" mb={2}>
+          <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
             <Typography component="h2" gutterBottom variant="h3">
               {t('title.tickers')}
             </Typography>
diff --git a/src/views/UsersView.tsx b/src/views/UsersView.tsx
index 0f324eeb..ff68395a 100644
--- a/src/views/UsersView.tsx
+++ b/src/views/UsersView.tsx
@@ -15,7 +15,7 @@ const UsersView: FC = () => {
     <Layout>
       <Grid container spacing={2}>
         <Grid size={{ xs: 12 }}>
-          <Stack alignItems="center" direction="row" justifyContent="space-between" mb={2}>
+          <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
             <Typography component="h2" gutterBottom variant="h3">
               {t('title.users')}
             </Typography>

From adf7771ea7438c23712f2059001a31398fbe6662 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Wed, 19 Aug 2026 19:48:04 +0200
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=90=9B=20Migrate=20theme=20overrides?=
 =?UTF-8?q?=20and=20slot=20props=20to=20the=20MUI=209=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The MUI 9 upgrade also dropped a set of APIs the theme and a few components
still used, all of them without a runtime error:

- Button style overrides keyed by variant and colour (containedInherit and
  friends) are gone; express them as style variants instead.
- CardHeader takes slotProps for its title and subheader typography.
- Typography no longer has a paragraph prop, so its override is dead code.
- Popover takes slotProps.paper instead of PaperProps, TextField takes
  slotProps.input instead of InputProps.

Opening the ticker list row menu additionally threw, because MenuItem now
requires a MenuListContext. Wrap the items in a MenuList, as already done
for the user list.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../ticker/SignalGroupAdminForm.tsx           | 14 ++--
 src/components/ticker/TickerListItem.tsx      | 84 ++++++++++---------
 src/components/user/UserListItem.tsx          | 16 ++--
 src/theme/ThemeProvider.tsx                   | 74 +++++++++-------
 4 files changed, 106 insertions(+), 82 deletions(-)

diff --git a/src/components/ticker/SignalGroupAdminForm.tsx b/src/components/ticker/SignalGroupAdminForm.tsx
index 8d3418dc..8ea18b6b 100644
--- a/src/components/ticker/SignalGroupAdminForm.tsx
+++ b/src/components/ticker/SignalGroupAdminForm.tsx
@@ -63,12 +63,14 @@ const SignalGroupAdminForm: FC<Props> = ({ callback, ticker, setSubmitting }) =>
               required
               helperText={errors.number ? errors.number?.message : null}
               error={errors.number ? true : false}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <FontAwesomeIcon icon={faPhone} />
-                  </InputAdornment>
-                ),
+              slotProps={{
+                input: {
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <FontAwesomeIcon icon={faPhone} />
+                    </InputAdornment>
+                  ),
+                },
               }}
             />
           </FormGroup>
diff --git a/src/components/ticker/TickerListItem.tsx b/src/components/ticker/TickerListItem.tsx
index ca20a719..5a94ed99 100644
--- a/src/components/ticker/TickerListItem.tsx
+++ b/src/components/ticker/TickerListItem.tsx
@@ -1,7 +1,7 @@
 import { faCheck, faHandPointer, faPencil, faTrash, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { MoreVert } from '@mui/icons-material'
-import { colors, IconButton, MenuItem, Popover, TableCell, TableRow, Typography } from '@mui/material'
+import { colors, IconButton, MenuItem, MenuList, Popover, TableCell, TableRow, Typography } from '@mui/material'
 import React, { FC, memo, useState } from 'react'
 import { useNavigate } from 'react-router'
 import { Ticker } from '../../api/Ticker'
@@ -51,13 +51,15 @@ const TickerListItem: FC<Props> = ({ ticker }: Props) => {
           <MoreVert />
         </IconButton>
         <Popover
-          PaperProps={{
-            sx: {
-              p: 1,
-              width: 140,
-              '& .MuiMenuItem-root': {
-                px: 1,
-                borderRadius: 0.75,
+          slotProps={{
+            paper: {
+              sx: {
+                p: 1,
+                width: 140,
+                '& .MuiMenuItem-root': {
+                  px: 1,
+                  borderRadius: 0.75,
+                },
               },
             },
           }}
@@ -67,38 +69,40 @@ const TickerListItem: FC<Props> = ({ ticker }: Props) => {
           open={Boolean(anchorEl)}
           transformOrigin={{ vertical: 'top', horizontal: 'right' }}
         >
-          <MenuItem
-            onClick={() => {
-              handleClose()
-              handleUse()
-            }}
-          >
-            <FontAwesomeIcon aria-hidden="true" icon={faHandPointer} />
-            <Typography sx={{ ml: 2 }}>{t('action.use')}</Typography>
-          </MenuItem>
-          <MenuItem
-            onClick={() => {
-              handleClose()
-              setFormModalOpen(true)
-            }}
-          >
-            <FontAwesomeIcon aria-hidden="true" icon={faPencil} />
-            <Typography sx={{ ml: 2 }}>{t('action.edit')}</Typography>
-          </MenuItem>
-          {user?.roles.includes('admin') ? (
-            <>
-              <MenuItem
-                onClick={() => {
-                  handleClose()
-                  setDeleteModalOpen(true)
-                }}
-                sx={{ color: colors.red[400] }}
-              >
-                <FontAwesomeIcon aria-hidden="true" icon={faTrash} />
-                <Typography sx={{ ml: 2 }}>{t('action.delete')}</Typography>
-              </MenuItem>
-            </>
-          ) : null}
+          <MenuList>
+            <MenuItem
+              onClick={() => {
+                handleClose()
+                handleUse()
+              }}
+            >
+              <FontAwesomeIcon aria-hidden="true" icon={faHandPointer} />
+              <Typography sx={{ ml: 2 }}>{t('action.use')}</Typography>
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                handleClose()
+                setFormModalOpen(true)
+              }}
+            >
+              <FontAwesomeIcon aria-hidden="true" icon={faPencil} />
+              <Typography sx={{ ml: 2 }}>{t('action.edit')}</Typography>
+            </MenuItem>
+            {user?.roles.includes('admin') ? (
+              <>
+                <MenuItem
+                  onClick={() => {
+                    handleClose()
+                    setDeleteModalOpen(true)
+                  }}
+                  sx={{ color: colors.red[400] }}
+                >
+                  <FontAwesomeIcon aria-hidden="true" icon={faTrash} />
+                  <Typography sx={{ ml: 2 }}>{t('action.delete')}</Typography>
+                </MenuItem>
+              </>
+            ) : null}
+          </MenuList>
         </Popover>
         <TickerModalForm onClose={() => setFormModalOpen(false)} open={formModalOpen} ticker={ticker} />
         <TickerModalDelete onClose={() => setDeleteModalOpen(false)} open={deleteModalOpen} ticker={ticker} />
diff --git a/src/components/user/UserListItem.tsx b/src/components/user/UserListItem.tsx
index cf30176e..f7791247 100644
--- a/src/components/user/UserListItem.tsx
+++ b/src/components/user/UserListItem.tsx
@@ -50,13 +50,15 @@ const UserListItem: FC<Props> = ({ user }) => {
           <MoreVert />
         </IconButton>
         <Popover
-          PaperProps={{
-            sx: {
-              p: 1,
-              width: 140,
-              '& .MuiMenuItem-root': {
-                px: 1,
-                borderRadius: 0.75,
+          slotProps={{
+            paper: {
+              sx: {
+                p: 1,
+                width: 140,
+                '& .MuiMenuItem-root': {
+                  px: 1,
+                  borderRadius: 0.75,
+                },
               },
             },
           }}
diff --git a/src/theme/ThemeProvider.tsx b/src/theme/ThemeProvider.tsx
index 07bb82a5..25353ee7 100644
--- a/src/theme/ThemeProvider.tsx
+++ b/src/theme/ThemeProvider.tsx
@@ -36,34 +36,51 @@ theme.components = {
         '&:hover': {
           boxShadow: 'none',
         },
+        variants: [
+          {
+            props: { variant: 'contained', color: 'inherit' },
+            style: {
+              color: palette.grey[800],
+              boxShadow: customShadows.z8,
+              '&:hover': {
+                backgroundColor: palette.grey[400],
+              },
+            },
+          },
+          {
+            props: { variant: 'contained', color: 'primary' },
+            style: {
+              boxShadow: customShadows.primary,
+            },
+          },
+          {
+            props: { variant: 'contained', color: 'secondary' },
+            style: {
+              boxShadow: customShadows.secondary,
+            },
+          },
+          {
+            props: { variant: 'outlined', color: 'inherit' },
+            style: {
+              border: `1px solid ${alpha(palette.grey[500], 0.32)}`,
+              '&:hover': {
+                backgroundColor: palette.action.hover,
+              },
+            },
+          },
+          {
+            props: { variant: 'text', color: 'inherit' },
+            style: {
+              '&:hover': {
+                backgroundColor: palette.action.hover,
+              },
+            },
+          },
+        ],
       },
       sizeLarge: {
         height: 48,
       },
-      containedInherit: {
-        color: palette.grey[800],
-        boxShadow: customShadows.z8,
-        '&:hover': {
-          backgroundColor: palette.grey[400],
-        },
-      },
-      containedPrimary: {
-        boxShadow: customShadows.primary,
-      },
-      containedSecondary: {
-        boxShadow: customShadows.secondary,
-      },
-      outlinedInherit: {
-        border: `1px solid ${alpha(palette.grey[500], 0.32)}`,
-        '&:hover': {
-          backgroundColor: palette.action.hover,
-        },
-      },
-      textInherit: {
-        '&:hover': {
-          backgroundColor: palette.action.hover,
-        },
-      },
     },
   },
   MuiCard: {
@@ -78,8 +95,10 @@ theme.components = {
   },
   MuiCardHeader: {
     defaultProps: {
-      titleTypographyProps: { variant: 'h6' },
-      subheaderTypographyProps: { variant: 'body2' },
+      slotProps: {
+        title: { variant: 'h6' },
+        subheader: { variant: 'body2' },
+      },
     },
     styleOverrides: {
       root: {
@@ -193,9 +212,6 @@ theme.components = {
   },
   MuiTypography: {
     styleOverrides: {
-      paragraph: {
-        marginBottom: theme.spacing(1),
-      },
       gutterBottom: {
         marginBottom: theme.spacing(1),
       },

From 7515f08284218e454f02cd1e22cef84bb0c78cfd Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Wed, 19 Aug 2026 19:48:04 +0200
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=9A=A8=20Fix=20type=20errors=20from?=
 =?UTF-8?q?=20the=20React=2019=20and=20Node=20type=20upgrades?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The global JSX namespace is gone with React 19, NodeJS.Timeout is no longer
exported, and useRef requires an explicit initial value. Use ReactElement,
derive the timer type from setTimeout, and reference globalThis in the test.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/ProtectedRoute.tsx        | 4 ++--
 src/components/ticker/LocationSearch.tsx | 2 +-
 src/contexts/AuthContext.test.tsx        | 2 +-
 src/contexts/FeatureContext.tsx          | 4 ++--
 src/contexts/NotificationContext.tsx     | 4 ++--
 src/hooks/useDebounce.tsx                | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx
index fd242f9d..79a5f7ea 100644
--- a/src/components/ProtectedRoute.tsx
+++ b/src/components/ProtectedRoute.tsx
@@ -1,5 +1,5 @@
 import { Container, Typography } from '@mui/material'
-import { FC } from 'react'
+import { FC, ReactElement } from 'react'
 import { Navigate, RouteProps } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import { Roles } from '../contexts/AuthContext'
@@ -7,7 +7,7 @@ import useAuth from '../contexts/useAuth'
 
 type Props = RouteProps & {
   role: Roles
-  outlet: JSX.Element
+  outlet: ReactElement
 }
 
 const ProtectedRoute: FC<Props> = ({ role, outlet }) => {
diff --git a/src/components/ticker/LocationSearch.tsx b/src/components/ticker/LocationSearch.tsx
index 29374416..0880afb8 100644
--- a/src/components/ticker/LocationSearch.tsx
+++ b/src/components/ticker/LocationSearch.tsx
@@ -28,7 +28,7 @@ interface Props {
 const LocationSearch: FC<Props> = ({ callback }) => {
   const { t } = useTranslation()
   const [options, setOptions] = useState<SearchResult[]>([])
-  const previousController = useRef<AbortController>()
+  const previousController = useRef<AbortController | null>(null)
 
   const handleInputChange = (_: React.SyntheticEvent, value: string) => {
     if (previousController.current) {
diff --git a/src/contexts/AuthContext.test.tsx b/src/contexts/AuthContext.test.tsx
index d72341b9..256cbf33 100644
--- a/src/contexts/AuthContext.test.tsx
+++ b/src/contexts/AuthContext.test.tsx
@@ -20,7 +20,7 @@ const mockedLocalStorage = {
   length: 0,
   key: vi.fn(),
 }
-global.localStorage = mockedLocalStorage
+globalThis.localStorage = mockedLocalStorage
 
 beforeEach(() => {
   vi.clearAllMocks()
diff --git a/src/contexts/FeatureContext.tsx b/src/contexts/FeatureContext.tsx
index 951b0db3..634f17de 100644
--- a/src/contexts/FeatureContext.tsx
+++ b/src/contexts/FeatureContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
+import { createContext, ReactElement, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { ApiResponse } from '../api/Api'
 import { Features, fetchFeaturesApi } from '../api/Features'
 import useAuth from './useAuth'
@@ -23,7 +23,7 @@ const initialFeatures: Features = {
   signalGroupEnabled: false,
 }
 
-export function FeatureProvider({ children }: Readonly<{ children: ReactNode }>): JSX.Element {
+export function FeatureProvider({ children }: Readonly<{ children: ReactNode }>): ReactElement {
   const { token } = useAuth()
   const [state, setState] = useState<FeatureState>({
     features: initialFeatures,
diff --git a/src/contexts/NotificationContext.tsx b/src/contexts/NotificationContext.tsx
index 64654f09..b334fc8a 100644
--- a/src/contexts/NotificationContext.tsx
+++ b/src/contexts/NotificationContext.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, createContext, useMemo, useState } from 'react'
+import { ReactElement, ReactNode, createContext, useMemo, useState } from 'react'
 
 type Severity = 'success' | 'error' | 'warning' | 'info'
 
@@ -16,7 +16,7 @@ interface NotificationContextType {
 
 const NotificationContext = createContext<NotificationContextType | undefined>(undefined)
 
-export function NotificationProvider({ children }: Readonly<{ children: ReactNode }>): JSX.Element {
+export function NotificationProvider({ children }: Readonly<{ children: ReactNode }>): ReactElement {
   const [notification, setNotification] = useState<Notification | undefined>(undefined)
   const [isOpen, setIsOpen] = useState<boolean>(false)
 
diff --git a/src/hooks/useDebounce.tsx b/src/hooks/useDebounce.tsx
index 2c51ff76..d794cbb6 100644
--- a/src/hooks/useDebounce.tsx
+++ b/src/hooks/useDebounce.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 
 function useDebounce<T>(value: T, delay: number, initialValue: T): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(initialValue)
-  const timerRef = useRef<NodeJS.Timeout | null>()
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   useEffect(() => {
     if (timerRef.current) {