@micha.bigler/ui-core-micha 3.14.3 → 4.0.0

package/src/layout/PageLayout.jsx

@@ -1,36 +0,0 @@
-// src/components/layout/PageLayout.jsx
-import React from 'react';
-import { Container, Box, Typography } from '@mui/material';
-
-export const PAGE_LAYOUT_CONTAINER_SX = { mt: 4 };
-
-// Layout for content pages with larger width (e.g. Profile, Welcome, Input)
-export const WidePage = ({ title, children, maxWidth = 'lg' }) => (
-  <Container maxWidth={maxWidth} sx={PAGE_LAYOUT_CONTAINER_SX}>
-    {title && (
-      <Typography variant="h4" gutterBottom>
-        {title}
-      </Typography>
-    )}
-    {children}
-  </Container>
-);
-
-// Layout for forms or narrow pages (e.g. Login, Reset, Invite)
-export const NarrowPage = ({ title, subtitle, children }) => (
-  <Container maxWidth="md" sx={PAGE_LAYOUT_CONTAINER_SX}>
-    <Box sx={{ maxWidth: 480, mx: 'auto' }}>
-      {title && (
-        <Typography variant="h4" gutterBottom>
-          {title}
-        </Typography>
-      )}
-      {subtitle && (
-        <Typography paragraph>
-          {subtitle}
-        </Typography>
-      )}
-      {children}
-    </Box>
-  </Container>
-);

package/src/layout/SectionNav.jsx

@@ -1,320 +0,0 @@
-import { useId, useState } from 'react';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import {
-  Box,
-  ButtonBase,
-  Drawer,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemText,
-  Paper,
-  Stack,
-  Typography,
-} from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { useTranslation } from 'react-i18next';
-
-const defaultZIndex = (theme) => theme.zIndex.drawer + 3;
-
-export const SECTION_NAV_DRAWER_PAPER_SX = {
-  borderTopLeftRadius: 18,
-  borderTopRightRadius: 18,
-  maxHeight: '78dvh',
-  p: 2,
-  pb: 'max(16px, env(safe-area-inset-bottom))',
-};
-
-export const SECTION_NAV_GROUP_PAPER_SX = {
-  overflow: 'hidden',
-};
-
-const SECTION_NAV_GRID_SX = {
-  display: 'grid',
-  gap: 4,
-  alignItems: 'start',
-};
-
-const SECTION_NAV_SIDEBAR_SX = {
-  position: 'sticky',
-  top: 'var(--SectionNav-headerOffset)',
-  alignSelf: 'start',
-};
-
-const SECTION_NAV_CONTENT_SX = {
-  minWidth: 0,
-};
-
-const SECTION_NAV_GROUP_HEADER_SX = {
-  px: 2,
-  py: 1.5,
-  borderBottom: '1px solid',
-  borderColor: 'divider',
-};
-
-const SECTION_NAV_TRIGGER_SX = {
-  width: '100%',
-  minHeight: 56,
-  mb: 2,
-  px: 1.75,
-  py: 1,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  gap: 2,
-  textAlign: 'left',
-  border: '1px solid',
-  borderColor: 'divider',
-  borderRadius: 1,
-  backgroundColor: 'background.paper',
-  boxShadow: 1,
-  '&:hover': {
-    backgroundColor: 'action.hover',
-  },
-  '&.Mui-focusVisible': {
-    outline: '2px solid',
-    outlineColor: 'primary.main',
-    outlineOffset: 2,
-  },
-};
-
-const SECTION_NAV_TRIGGER_TEXT_SX = {
-  minWidth: 0,
-  display: 'flex',
-  flexDirection: 'column',
-};
-
-const SECTION_NAV_TRIGGER_VALUE_SX = {
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-};
-
-const SECTION_NAV_CHEVRON_SX = {
-  color: 'text.secondary',
-  transition: 'transform 0.18s ease',
-  flex: 'none',
-};
-
-const SECTION_NAV_DRAWER_TITLE_SX = {
-  mb: 2,
-};
-
-const SECTION_NAV_DRAWER_SCROLL_SX = {
-  overflowY: 'auto',
-};
-
-function SectionNavList({
-  groups,
-  activeKey,
-  rememberedKey,
-  overviewItem,
-  onSelect,
-  rememberedLabel,
-}) {
-  const headingId = useId();
-
-  return (
-    <Stack spacing={2}>
-      {overviewItem && (
-        <Paper variant="outlined" sx={SECTION_NAV_GROUP_PAPER_SX}>
-          <List disablePadding>
-            <ListItem disablePadding>
-              <ListItemButton
-                selected={activeKey == null}
-                aria-current={activeKey == null ? 'page' : undefined}
-                onClick={() => onSelect?.(null)}
-              >
-                <ListItemText primary={overviewItem.label} />
-              </ListItemButton>
-            </ListItem>
-          </List>
-        </Paper>
-      )}
-
-      {groups.map((group, groupIndex) => {
-        const groupHeadingId = `${headingId}-${groupIndex}`;
-
-        return (
-          <Paper key={group.key} variant="outlined" sx={SECTION_NAV_GROUP_PAPER_SX}>
-            <Box id={groupHeadingId} sx={SECTION_NAV_GROUP_HEADER_SX}>
-              <Typography variant="subtitle2" fontWeight={700}>
-                {group.label}
-              </Typography>
-            </Box>
-            <List disablePadding aria-labelledby={groupHeadingId}>
-              {group.items.map((item) => {
-                const selected = item.key === activeKey;
-                return (
-                  <ListItem key={item.key} disablePadding>
-                    <ListItemButton
-                      selected={selected}
-                      aria-current={selected ? 'page' : undefined}
-                      onClick={() => onSelect?.(item.key)}
-                    >
-                      <ListItemText
-                        primary={item.label}
-                        secondary={!selected && item.key === rememberedKey ? rememberedLabel : null}
-                      />
-                    </ListItemButton>
-                  </ListItem>
-                );
-              })}
-            </List>
-          </Paper>
-        );
-      })}
-    </Stack>
-  );
-}
-
-/**
- * Render matrix:
- *
- * | `mode`    | `open`                 | `onOpen` | trigger | sidebar | `children`       | drawer              |
- * |-----------|------------------------|----------|---------|---------|------------------|---------------------|
- * | `desktop` | ignored                | ignored  | —       | yes     | yes, in the grid | —                   |
- * | `mobile`  | absent (uncontrolled)  | ignored  | yes     | —       | yes              | yes, internal state |
- * | `mobile`  | given                  | given    | yes     | —       | yes              | caller-driven       |
- * | `mobile`  | given                  | absent   | no      | —       | yes              | caller-driven       |
- *
- * Optional parts: without `overviewItem`, no overview entry or empty Paper is rendered;
- * without `rememberedKey`, no secondary line is rendered; without `title` or
- * `triggerEyebrow`, `t('SectionNav.TITLE')` or `t('SectionNav.TRIGGER_EYEBROW')` is used.
- */
-export function SectionNav({
-  mode,
-  groups,
-  activeKey = null,
-  onSelect,
-  open,
-  onOpen,
-  onClose,
-  title,
-  triggerEyebrow,
-  overviewItem,
-  rememberedKey,
-  headerOffset = 24,
-  // SHELL-3's bottom bar uses drawer + 2, so the drawer must stay above it.
-  zIndex = defaultZIndex,
-  sidebarWidth = 280,
-  children,
-}) {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const drawerId = useId();
-  const [internalOpen, setInternalOpen] = useState(false);
-  const isControlled = open !== undefined;
-  const drawerOpen = isControlled ? open : internalOpen;
-  const canOpenTrigger = !isControlled || Boolean(onOpen);
-  const resolvedTitle = title ?? t('SectionNav.TITLE');
-  const resolvedEyebrow = triggerEyebrow ?? t('SectionNav.TRIGGER_EYEBROW');
-  const rememberedLabel = t('SectionNav.LAST_OPENED');
-  const resolvedZIndex = typeof zIndex === 'function' ? zIndex(theme) : zIndex;
-  const resolvedHeaderOffset = typeof headerOffset === 'number' ? `${headerOffset}px` : headerOffset;
-  const activeItem = activeKey == null
-    ? overviewItem
-    : groups.flatMap((group) => group.items).find((item) => item.key === activeKey);
-
-  const handleTriggerClick = () => {
-    if (isControlled) {
-      onOpen?.();
-    } else {
-      setInternalOpen(true);
-    }
-  };
-
-  const handleDrawerClose = () => {
-    if (!isControlled) setInternalOpen(false);
-    onClose?.();
-  };
-
-  const handleDrawerSelect = (key) => {
-    onSelect?.(key);
-    handleDrawerClose();
-  };
-
-  if (mode === 'desktop') {
-    return (
-      <Box
-        sx={{ ...SECTION_NAV_GRID_SX, gridTemplateColumns: `${sidebarWidth}px minmax(0, 1fr)` }}
-        data-section-nav-mode="desktop"
-      >
-        <Box
-          component="nav"
-          aria-label={resolvedTitle}
-          sx={SECTION_NAV_SIDEBAR_SX}
-          style={{ '--SectionNav-headerOffset': resolvedHeaderOffset }}
-        >
-          <SectionNavList
-            groups={groups}
-            activeKey={activeKey}
-            rememberedKey={rememberedKey}
-            overviewItem={overviewItem}
-            onSelect={onSelect}
-            rememberedLabel={rememberedLabel}
-          />
-        </Box>
-        <Box sx={SECTION_NAV_CONTENT_SX}>{children}</Box>
-      </Box>
-    );
-  }
-
-  return (
-    <>
-      {canOpenTrigger && (
-        <ButtonBase
-          sx={SECTION_NAV_TRIGGER_SX}
-          onClick={handleTriggerClick}
-          aria-haspopup="dialog"
-          aria-expanded={drawerOpen}
-          aria-controls={drawerId}
-        >
-          <Box sx={SECTION_NAV_TRIGGER_TEXT_SX}>
-            <Typography variant="caption" color="text.secondary">
-              {resolvedEyebrow}
-            </Typography>
-            <Typography variant="subtitle1" sx={SECTION_NAV_TRIGGER_VALUE_SX}>
-              {activeItem?.label ?? resolvedTitle}
-            </Typography>
-          </Box>
-          <KeyboardArrowDownIcon
-            aria-hidden="true"
-            sx={SECTION_NAV_CHEVRON_SX}
-            style={{ transform: drawerOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}
-          />
-        </ButtonBase>
-      )}
-
-      <Box sx={SECTION_NAV_CONTENT_SX}>{children}</Box>
-
-      <Drawer
-        anchor="bottom"
-        open={drawerOpen}
-        onClose={handleDrawerClose}
-        style={{ zIndex: resolvedZIndex }}
-        PaperProps={{
-          id: drawerId,
-          role: 'dialog',
-          'aria-modal': true,
-          'aria-labelledby': `${drawerId}-title`,
-          sx: SECTION_NAV_DRAWER_PAPER_SX,
-        }}
-      >
-        <Typography id={`${drawerId}-title`} variant="h6" sx={SECTION_NAV_DRAWER_TITLE_SX}>
-          {resolvedTitle}
-        </Typography>
-        <Box sx={SECTION_NAV_DRAWER_SCROLL_SX}>
-          <SectionNavList
-            groups={groups}
-            activeKey={activeKey}
-            rememberedKey={rememberedKey}
-            overviewItem={overviewItem}
-            onSelect={handleDrawerSelect}
-            rememberedLabel={rememberedLabel}
-          />
-        </Box>
-      </Drawer>
-    </>
-  );
-}

package/src/messaging/AttachmentList.jsx

@@ -1,145 +0,0 @@
-import CloseIcon from '@mui/icons-material/Close';
-import DownloadIcon from '@mui/icons-material/DownloadOutlined';
-import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
-import { Alert, Box, ButtonBase, CircularProgress, Dialog, IconButton, Menu, MenuItem, Stack, Typography } from '@mui/material';
-import { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useMessaging } from './MessagingProvider';
-
-export const ATTACHMENT_LIST_LIGHTBOX_ACTION_SX = {
-  bgcolor: 'background.paper',
-  boxShadow: 1,
-};
-export const ATTACHMENT_LIST_ALERT_SX = { m: 2 };
-
-function isImage(attachment) { return attachment.content_type?.startsWith('image/'); }
-// `filename` is dcm's real, sanitized upload name (MSG-12) -- `id` is the
-// last-resort fallback for interop with a host still on a pre-MSG-12 pin.
-function nameOf(attachment) { return attachment.filename || attachment.name || attachment.id; }
-
-/**
- * WhatsApp-style attachment gallery (MSG-6h): a small thumbnail per image
- * attachment; click opens a full-size lightbox, which itself carries its own
- * Download action (reachable by mouse, touch, or keyboard -- right-click is a
- * shortcut, never the only path). A non-image attachment has no preview to
- * open -- click downloads directly. Right-click still opens the same context
- * menu on either kind, for the mouse-user shortcut. Bytes only ever move
- * through the existing authenticated `getAttachment`/`getAttachmentThumbnail`
- * blob endpoints -- no new byte-handling path.
- */
-export function AttachmentList({ attachments = [] }) {
-  const { t } = useTranslation();
-  const { getAttachment, getAttachmentThumbnail } = useMessaging();
-  const [previews, setPreviews] = useState({});
-  // { attachment, url: string|null, status: 'loading'|'ready'|'error' } | null
-  const [lightbox, setLightbox] = useState(null);
-  const [menu, setMenu] = useState(null); // { attachment, anchorPosition } | null
-  // Full-resolution object URLs, fetched once per attachment on first
-  // lightbox open and reused for the rest of this mount (a re-open must not
-  // re-fetch what's already sitting in memory). Only ever revoked on
-  // unmount -- never while the Dialog might still be displaying one.
-  const fullUrlCacheRef = useRef({});
-
-  useEffect(() => {
-    let live = true; const urls = [];
-    attachments.filter(isImage).forEach(async (attachment) => {
-      try {
-        const blob = await getAttachmentThumbnail(attachment.id);
-        const url = blob instanceof Blob ? URL.createObjectURL(blob) : blob?.url;
-        if (url && live) { urls.push(url); setPreviews((current) => ({ ...current, [attachment.id]: url })); }
-      } catch { /* The image remains available through the download action. */ }
-    });
-    return () => { live = false; urls.forEach((url) => URL.revokeObjectURL(url)); };
-  }, [attachments, getAttachmentThumbnail]);
-
-  useEffect(() => () => { Object.values(fullUrlCacheRef.current).forEach((url) => URL.revokeObjectURL(url)); }, []);
-
-  if (!attachments.length) return null;
-
-  const download = async (attachment) => {
-    const blob = await getAttachment(attachment.id);
-    if (!(blob instanceof Blob)) return;
-    const url = URL.createObjectURL(blob); const link = document.createElement('a');
-    link.href = url; link.download = nameOf(attachment); link.click(); URL.revokeObjectURL(url);
-  };
-
-  const openLightbox = async (attachment) => {
-    const cachedUrl = fullUrlCacheRef.current[attachment.id];
-    if (cachedUrl) { setLightbox({ attachment, url: cachedUrl, status: 'ready' }); return; }
-    setLightbox({ attachment, url: null, status: 'loading' });
-    try {
-      const blob = await getAttachment(attachment.id);
-      if (!(blob instanceof Blob)) throw new Error('Attachment response was not a Blob');
-      const url = URL.createObjectURL(blob);
-      fullUrlCacheRef.current[attachment.id] = url;
-      // A newer open (a different attachment) may have superseded this one
-      // while the fetch was in flight -- don't stomp on it with a stale result.
-      setLightbox((current) => (current?.attachment.id === attachment.id ? { attachment, url, status: 'ready' } : current));
-    } catch {
-      setLightbox((current) => (current?.attachment.id === attachment.id ? { ...current, status: 'error' } : current));
-    }
-  };
-
-  const openMenu = (event, attachment) => {
-    event.preventDefault();
-    // Attachments live inside a message bubble that has its own right-click
-    // menu (MessageBubble.jsx's onContextMenu) -- this must not also open.
-    event.stopPropagation();
-    setMenu({ attachment, anchorPosition: { top: event.clientY, left: event.clientX } });
-  };
-  const closeMenu = () => setMenu(null);
-
-  return <>
-    <Stack direction="row" spacing={1} flexWrap="wrap" aria-label={t('MessagingAttachments.LABEL')}>
-      {attachments.map((attachment) => {
-        const image = isImage(attachment);
-        const preview = previews[attachment.id];
-        const label = image ? t('MessagingAttachments.PREVIEW', { name: nameOf(attachment) }) : t('MessagingAttachments.DOWNLOAD', { name: nameOf(attachment) });
-        return (
-          <ButtonBase
-            key={attachment.id}
-            type="button"
-            title={nameOf(attachment)}
-            onClick={() => (image ? openLightbox(attachment) : download(attachment))}
-            onContextMenu={(event) => openMenu(event, attachment)}
-            aria-label={label}
-            sx={{ width: 120, height: 120, borderRadius: 1, overflow: 'hidden', border: '1px solid', borderColor: 'divider', display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: 'action.hover' }}
-          >
-            {image && preview
-              ? <Box component="img" src={preview} alt="" sx={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-              : <Stack alignItems="center" spacing={0.75} sx={{ px: 1, maxWidth: '100%' }}>
-                  {/* Icon scaled up from `small` -- 120px tile (was 64px) made
-                      the original small icon+caption pairing read sparse/
-                      undersized against the much larger tile (MSG-6i). */}
-                  <InsertDriveFileOutlinedIcon fontSize="large" />
-                  <Typography variant="caption" noWrap sx={{ maxWidth: '100%' }}>{nameOf(attachment)}</Typography>
-                </Stack>}
-          </ButtonBase>
-        );
-      })}
-    </Stack>
-
-    <Dialog open={Boolean(lightbox)} onClose={() => setLightbox(null)} maxWidth="lg" aria-label={lightbox ? nameOf(lightbox.attachment) : undefined}>
-      {lightbox && <Box sx={{ position: 'relative', minWidth: 240, minHeight: lightbox.status === 'ready' ? undefined : 160, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <Stack direction="row" spacing={0.5} sx={{ position: 'absolute', top: 4, right: 4 }}>
-          {lightbox.status === 'ready' && <IconButton aria-label={t('MessagingAttachments.DOWNLOAD_ACTION')} onClick={() => download(lightbox.attachment)} sx={ATTACHMENT_LIST_LIGHTBOX_ACTION_SX}>
-            <DownloadIcon />
-          </IconButton>}
-          <IconButton aria-label={t('MessagingAttachments.CLOSE_PREVIEW')} onClick={() => setLightbox(null)} sx={ATTACHMENT_LIST_LIGHTBOX_ACTION_SX}>
-            <CloseIcon />
-          </IconButton>
-        </Stack>
-        {lightbox.status === 'loading' && <CircularProgress aria-label={t('MessagingAttachments.LOADING_PREVIEW')} sx={{ m: 4 }} />}
-        {lightbox.status === 'error' && <Alert severity="error" role="alert" sx={ATTACHMENT_LIST_ALERT_SX}>{t('MessagingAttachments.PREVIEW_ERROR')}</Alert>}
-        {lightbox.status === 'ready' && <Box component="img" src={lightbox.url} alt={nameOf(lightbox.attachment)} sx={{ display: 'block', maxWidth: '90vw', maxHeight: '90vh' }} />}
-      </Box>}
-    </Dialog>
-
-    <Menu open={Boolean(menu)} onClose={closeMenu} anchorReference="anchorPosition" anchorPosition={menu?.anchorPosition}>
-      <MenuItem onClick={() => { const attachment = menu?.attachment; closeMenu(); if (attachment) download(attachment); }}>
-        <DownloadIcon fontSize="small" sx={{ mr: 1 }} />{t('MessagingAttachments.DOWNLOAD_ACTION')}
-      </MenuItem>
-    </Menu>
-  </>;
-}