style: revamp connection status popups

.changeset/feat-revamp-connection-status-indicator.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Replaced the connection status top bar with a small styled popup and added a variant that shows sliding sync initial progress.

.changeset/fix-banner-spam.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Made popups on start appear sequentially instead of bombarding all at once.

.changeset/unify-update-popups.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Made update popups use in-app modals instead of calling os native dialogs.

package.json

@@ -50,7 +50,6 @@
     "@tauri-apps/api": "2.11.1",
     "@tauri-apps/plugin-clipboard-manager": "2.3.2",
     "@tauri-apps/plugin-deep-link": "2.4.9",
-    "@tauri-apps/plugin-dialog": "~2.7.1",
     "@tauri-apps/plugin-http": "2.5.9",
     "@tauri-apps/plugin-opener": "2.5.4",
     "@tauri-apps/plugin-os": "2.3.2",

src/app/components/SyncConnectionStatus.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import { Box, config, Line, Text } from 'folds';
-import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
+import { Box, config, Text } from 'folds';
+import { AnimatePresence, motion, useReducedMotion, type Variants } from 'framer-motion';
 import { SyncState } from '$types/matrix-sdk';
 import { type TitlebarStatusView } from '$state/titlebarStatus';
 import { ContainerColor } from '$styles/ContainerColor.css';
@@ -37,19 +37,119 @@ export function getSyncConnectionStatusView(
 }
 
 export function SyncConnectionStatusBanner({ status }: SyncConnectionStatusProps) {
-  if (!status) return null;
+  const shouldReduceMotion = useReducedMotion();
+
+  const bannerVariants: Variants = shouldReduceMotion
+    ? {
+        hidden: { opacity: 0 },
+        visible: { opacity: 1, transition: { duration: 0.2 } },
+        exit: { opacity: 0, transition: { duration: 0.15 } },
+      }
+    : {
+        hidden: { y: -30, opacity: 0, scale: 0.95 },
+        visible: {
+          y: 0,
+          opacity: 1,
+          scale: 1,
+          transition: { type: 'spring', damping: 20, stiffness: 300 },
+        },
+        exit: {
+          y: -20,
+          opacity: 0,
+          scale: 0.95,
+          transition: { duration: 0.15, ease: TITLEBAR_EASE_OUT },
+        },
+      };
 
   return (
-    <Box direction="Column" shrink="No">
-      <Box
-        className={ContainerColor({ variant: status.variant })}
-        style={{ padding: `${config.space.S100} 0` }}
-        alignItems="Center"
-        justifyContent="Center"
-      >
-        <Text size="L400">{status.text}</Text>
-      </Box>
-      <Line variant={status.variant} size="300" />
+    <Box
+      style={{
+        position: 'fixed',
+        top: config.space.S300,
+        left: 0,
+        right: 0,
+        zIndex: 1000,
+        pointerEvents: 'none',
+      }}
+      alignItems="Center"
+      justifyContent="Center"
+    >
+      <AnimatePresence mode="wait">
+        {status && (
+          <motion.div
+            key={status.variant}
+            variants={bannerVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            style={{
+              willChange: shouldReduceMotion ? 'opacity' : 'transform, opacity',
+            }}
+          >
+            <Box
+              className={ContainerColor({ variant: status.variant })}
+              style={{
+                padding: `${config.space.S100} ${config.space.S400}`,
+                borderRadius: '9999px',
+                boxShadow: '0 8px 32px rgba(0, 0, 0, 0.2)',
+                border: `1px solid color-mix(in srgb, ${
+                  status.variant === 'Primary'
+                    ? 'var(--sable-primary-main)'
+                    : status.variant === 'Success'
+                      ? 'var(--sable-success-main)'
+                      : status.variant === 'Warning'
+                        ? 'var(--sable-warn-main)'
+                        : status.variant === 'Critical'
+                          ? 'var(--sable-crit-main)'
+                          : 'currentColor'
+                } 30%, transparent)`,
+                backdropFilter: 'blur(20px)',
+                WebkitBackdropFilter: 'blur(20px)',
+                backgroundColor: `color-mix(in srgb, ${
+                  status.variant === 'Primary'
+                    ? 'var(--sable-primary-main)'
+                    : status.variant === 'Success'
+                      ? 'var(--sable-success-main)'
+                      : status.variant === 'Warning'
+                        ? 'var(--sable-warn-main)'
+                        : status.variant === 'Critical'
+                          ? 'var(--sable-crit-main)'
+                          : 'currentColor'
+                } 18%, transparent)`,
+                position: 'relative',
+                overflow: 'hidden',
+              }}
+              alignItems="Center"
+              justifyContent="Center"
+            >
+              <Text size="L400">{status.text}</Text>
+
+              {status.progress !== undefined && (
+                <div
+                  style={{
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                    height: '2px',
+                    backgroundColor:
+                      status.variant === 'Primary'
+                        ? 'var(--sable-primary-main)'
+                        : status.variant === 'Success'
+                          ? 'var(--sable-success-main)'
+                          : status.variant === 'Warning'
+                            ? 'var(--sable-warn-main)'
+                            : status.variant === 'Critical'
+                              ? 'var(--sable-crit-main)'
+                              : 'currentColor',
+                    width: `${status.progress}%`,
+                    transition: 'width 0.3s ease-out',
+                  }}
+                />
+              )}
+            </Box>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </Box>
   );
 }
@@ -132,15 +232,18 @@ export function SyncConnectionStatusTitlebar({ status }: SyncConnectionStatusPro
     <AnimatePresence mode="sync" initial={false}>
       {status && (
         <motion.span
-          key={`${status.variant}-${status.text}`}
+          key={status.variant}
           className={classNames(
             'tauri-titlebar-status__label',
             status.variant === 'Success' && 'tauri-titlebar-status__label--success',
             status.variant === 'Warning' && 'tauri-titlebar-status__label--warning',
-            status.variant === 'Critical' && 'tauri-titlebar-status__label--critical'
+            status.variant === 'Critical' && 'tauri-titlebar-status__label--critical',
+            status.variant === 'Primary' && 'tauri-titlebar-status__label--primary'
           )}
           style={{
             transformOrigin: 'center top',
+            position: 'relative',
+            overflow: 'hidden',
             willChange: shouldReduceMotion ? 'opacity' : 'transform, opacity, clip-path',
           }}
           variants={pillVariants}
@@ -155,6 +258,28 @@ export function SyncConnectionStatusTitlebar({ status }: SyncConnectionStatusPro
           >
             {status.text}
           </motion.span>
+          {status.progress !== undefined && (
+            <div
+              style={{
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                height: '2px',
+                backgroundColor:
+                  status.variant === 'Primary'
+                    ? 'var(--sable-primary-main)'
+                    : status.variant === 'Success'
+                      ? 'var(--sable-success-main)'
+                      : status.variant === 'Warning'
+                        ? 'var(--sable-warn-main)'
+                        : status.variant === 'Critical'
+                          ? 'var(--sable-crit-main)'
+                          : 'currentColor',
+                width: `${status.progress}%`,
+                transition: 'width 0.3s ease-out',
+              }}
+            />
+          )}
         </motion.span>
       )}
     </AnimatePresence>

src/app/components/global-banner/GlobalBannerRenderer.css.ts

@@ -0,0 +1,57 @@
+import { style } from '@vanilla-extract/css';
+import { color, config, toRem } from 'folds';
+
+export const Container = style({
+  position: 'fixed',
+  top: 'calc(env(safe-area-inset-top, 0px) + 16px)',
+  left: '50%',
+  transform: 'translateX(-50%)',
+  zIndex: 9998,
+  width: `min(calc(100vw - 32px), ${toRem(540)})`,
+  pointerEvents: 'none',
+});
+
+export const Banner = style({
+  pointerEvents: 'all',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: config.space.S300,
+  backgroundColor:
+    'color-mix(in srgb, var(--sable-surface-var-container, #e4e4e7) 78%, transparent)',
+  color: color.SurfaceVariant.OnContainer,
+  border: `${config.borderWidth.B300} solid color-mix(in srgb, var(--sable-surface-var-container-line, #71717a) 70%, transparent)`,
+  borderRadius: toRem(16),
+  padding: config.space.S400,
+  boxShadow: '0 10px 32px rgba(0, 0, 0, 0.22)',
+  backdropFilter: 'blur(20px)',
+  WebkitBackdropFilter: 'blur(20px)',
+});
+
+export const Header = style({
+  display: 'flex',
+  alignItems: 'flex-start',
+  gap: config.space.S300,
+});
+
+export const IconContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingTop: toRem(2),
+  color: 'var(--sable-primary-main)',
+});
+
+export const HeaderText = style({
+  flex: 1,
+  minWidth: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: toRem(4),
+});
+
+export const Actions = style({
+  display: 'flex',
+  gap: config.space.S200,
+  justifyContent: 'flex-end',
+  flexWrap: 'wrap',
+});

src/app/components/global-banner/GlobalBannerRenderer.tsx

@@ -0,0 +1,73 @@
+import { useAtomValue } from 'jotai';
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
+import { Box, Button, Text } from 'folds';
+import { sizedIcon } from '$components/icons/phosphor';
+import { globalBannersAtom } from '$state/globalBanners';
+import * as css from './GlobalBannerRenderer.css';
+
+export function GlobalBannerRenderer() {
+  const banners = useAtomValue(globalBannersAtom);
+  const shouldReduceMotion = useReducedMotion();
+
+  // Pick the highest priority banner (or oldest if equal priority)
+  const activeBanner = banners.toSorted((a, b) => (b.priority ?? 0) - (a.priority ?? 0))[0];
+
+  return (
+    <div className={css.Container}>
+      <AnimatePresence mode="wait">
+        {activeBanner && (
+          <motion.div
+            key={activeBanner.id}
+            initial={{ opacity: 0, y: shouldReduceMotion ? 0 : -24, scale: 0.96 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: shouldReduceMotion ? 0 : -16, scale: 0.96 }}
+            transition={{ type: 'spring', damping: 25, stiffness: 320 }}
+            className={css.Banner}
+            role="region"
+            aria-label={activeBanner.title}
+          >
+            <div className={css.Header}>
+              {activeBanner.icon && (
+                <div className={css.IconContainer}>{sizedIcon(activeBanner.icon, '400')}</div>
+              )}
+              <div className={css.HeaderText}>
+                <Text size="H4">{activeBanner.title}</Text>
+                {typeof activeBanner.description === 'string' ? (
+                  <Text size="T300" priority="300">
+                    {activeBanner.description}
+                  </Text>
+                ) : (
+                  activeBanner.description
+                )}
+              </div>
+            </div>
+            <Box className={css.Actions}>
+              {activeBanner.secondaryAction && (
+                <Button
+                  variant={activeBanner.secondaryAction.variant ?? 'Secondary'}
+                  fill="Soft"
+                  outlined
+                  size="300"
+                  radii="300"
+                  onClick={activeBanner.secondaryAction.onClick}
+                >
+                  <Text size="B300">{activeBanner.secondaryAction.label}</Text>
+                </Button>
+              )}
+              <Button
+                variant={activeBanner.primaryAction.variant ?? 'Primary'}
+                fill="Soft"
+                outlined
+                size="300"
+                radii="300"
+                onClick={activeBanner.primaryAction.onClick}
+              >
+                <Text size="B300">{activeBanner.primaryAction.label}</Text>
+              </Button>
+            </Box>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}