Feat/mui migration (#157)

* feat(ui): move Strata onto graphite-ui 0.6.0-rc.1 and its Material UI buttons

Installs graphite-ui 0.6.0-rc.1 with its @mui/material and Emotion peers. Strata's Button, ButtonLink, ButtonAnchor, IconButton, IconLink and TextButton keep their props and now render graphite-ui's MUI-based Button and IconButton, so every call site gets the new buttons.

* feat(ui): move Strata's action buttons onto the Material UI buttons

Text-button actions in comments, icon picking, load errors, category chips, database views, properties and the meal plan use TextButton, icon-only ones use graphite-ui's small IconButton, and FormDialog's danger submit, the AM/PM toggle, the crash page's home link, the file picker and the open-original bookmark link use MUI buttons. Menu triggers, inline prose links and purpose-built controls keep their classes.

* feat(ui): move Strata's plain text fields onto the Material UI fields

The comment box, quick-add task, property and option names, the weather place search and address lines, the shortcut fields and the capture note use graphite-ui's TextField and TextAreaField, with their accessible names as visible labels. Checkboxes, radios, hidden and file inputs and purpose-built inputs (note title, cell editor, currency search, share counts) are unchanged.

* fix(ui): keep Strata's buttons content-width and the weather search on its own line

MUI buttons stretched to the full row inside grid layouts, so the button wrappers, the file picker and the meal plan's add buttons get w-fit back. The weather place search starts at 10rem and wraps above its buttons in narrow widgets instead of shrinking to a sliver.

* feat(ui): finish moving Strata onto Material UI and drop duplicate components

Menu triggers use triggerVariant; checkboxes and radios use graphite-ui Checkbox and Radio; message boxes are MUI Alerts; prose links are MUI Links; chips, toggle groups, list buttons and inputs use MUI. Strata's IconButton wrapper, buttonClass, unreadBadge and the hand-built CurrencyField and DayOfMonthField pickers give way to graphite-ui's IconButton, MUI Badge, Select and GridListbox, and TimeField's trigger is graphite-ui's PickerField. Removes the CSS for the old chips, note tools and icon picker.

* chore(deps): graphite-ui 1.0.0

Author: AmrMsCLL

app/frontend/package.json

@@ -22,10 +22,13 @@
     "vite": "8.3.0"
   },
   "dependencies": {
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
     "@excalidraw/excalidraw": "0.18.1",
     "@hocuspocus/provider": "4.7.0",
     "@mozilla/readability": "0.6.0",
-    "@project-graphite/ui": "https://github.com/project-graphite/graphite-ui/releases/download/v0.5.1/project-graphite-ui-0.5.1.tgz",
+    "@mui/material": "9.5.0",
+    "@project-graphite/ui": "https://github.com/project-graphite/graphite-ui/releases/download/v1.0.0/project-graphite-ui-1.0.0.tgz",
     "@tiptap/core": "3.31.4",
     "@tiptap/extension-collaboration": "3.31.4",
     "@tiptap/extension-collaboration-caret": "3.31.4",

app/frontend/src/components/ActionsMenu.tsx

@@ -1,5 +1,5 @@
 import { Icon, Menu, type MenuItem } from '@project-graphite/ui';
 
 export function ActionsMenu({ items, name }: { items: MenuItem[]; name: string }) {
-  return <Menu items={items} label={`${name} actions`} trigger={<Icon name="more" size={18} />} triggerClassName="icon-button" triggerLabel={`Actions for ${name}`} />;
+  return <Menu items={items} label={`${name} actions`} trigger={<Icon name="more" size={18} />} triggerLabel={`Actions for ${name}`} triggerVariant="icon" />;
 }

app/frontend/src/components/AgendaEntryLink.tsx

@@ -1,3 +1,4 @@
+import MuiLink from '@mui/material/Link';
 import { useState, type CSSProperties, type ReactNode } from 'react';
 import { Link } from 'react-router';
 import { Dialog, LinesSkeleton, type TagColor } from '@project-graphite/ui';
@@ -57,9 +58,9 @@ function CalendarEventDialog({ entry, onClose }: { entry: AgendaEntry; onClose:
           )}
           <p className="m-0 text-sm text-faint">
             From {details.data.calendar.name} · {details.data.calendar.host}.{' '}
-            <Link className="text-button" to="/agenda/calendars">
+            <MuiLink component={Link} to="/agenda/calendars" underline="always">
               Manage calendars
-            </Link>
+            </MuiLink>
           </p>
         </div>
       )}

app/frontend/src/components/Button.tsx

@@ -1,8 +1,8 @@
-import type { ReactNode } from 'react';
-import { Link } from 'react-router';
-import { Icon, type IconName } from '@project-graphite/ui';
+import Badge from '@mui/material/Badge';
+import MuiIconButton from '@mui/material/IconButton';
+import { Icon, Button as UiButton, type IconName } from '@project-graphite/ui';
 
-export const buttonClass = (primary = false) => `${primary ? 'primary-button' : 'secondary-button'} w-fit shrink-0 px-3 py-2 text-sm`;
+const look = (large: boolean, primary: boolean) => ({ size: large ? 'medium' : 'small', variant: primary ? 'primary' : 'secondary' }) as const;
 
 export function Button({
   disabled,
@@ -24,52 +24,43 @@ export function Button({
   submit?: boolean;
 }) {
   return (
-    <button
+    <UiButton
+      {...look(large, primary)}
       aria-pressed={pressed}
-      className={large ? (primary ? 'primary-button' : 'secondary-button') : buttonClass(primary)}
+      className="w-fit shrink-0"
       disabled={disabled}
+      icon={icon}
       onClick={onClick}
       type={submit ? 'submit' : 'button'}
     >
-      {icon && <Icon name={icon} size={16} />}
       {label}
-    </button>
+    </UiButton>
   );
 }
 
-const linkClass = (large: boolean, primary: boolean) => `${large ? `${primary ? 'primary-button' : 'secondary-button'} w-fit` : buttonClass(primary)} no-underline`;
-
 export function ButtonLink({ icon, label, large = false, primary = false, state, to }: { icon?: IconName; label: string; large?: boolean; primary?: boolean; state?: unknown; to: string }) {
   return (
-    <Link className={linkClass(large, primary)} state={state} to={to}>
-      {icon && <Icon name={icon} size={16} />}
+    <UiButton {...look(large, primary)} {...{ state }} className="w-fit shrink-0" href={to} icon={icon}>
       {label}
-    </Link>
+    </UiButton>
   );
 }
 
 export function ButtonAnchor({ href, label, large = false, primary = false }: { href: string; label: string; large?: boolean; primary?: boolean }) {
   return (
-    <a className={linkClass(large, primary)} href={href} rel="noopener noreferrer" target="_blank">
+    <UiButton {...look(large, primary)} {...{ rel: 'noopener noreferrer', target: '_blank' }} className="w-fit shrink-0" href={href} LinkComponent="a">
       {label}
-    </a>
-  );
-}
-
-export function IconButton({ disabled, icon, label, onClick }: { disabled?: boolean; icon: IconName; label: string; onClick: () => void }) {
-  return (
-    <button aria-label={label} className="icon-button" disabled={disabled} onClick={onClick} title={label} type="button">
-      <Icon name={icon} size={18} />
-    </button>
+    </UiButton>
   );
 }
 
-export function IconLink({ children, icon, label, to }: { children?: ReactNode; icon: IconName; label: string; to: string }) {
+export function IconLink({ badge, icon, label, to }: { badge?: number; icon: IconName; label: string; to: string }) {
   return (
-    <Link aria-label={label} className="icon-button" title={label} to={to}>
-      <Icon name={icon} size={18} />
-      {children}
-    </Link>
+    <MuiIconButton aria-label={label} href={to} title={label}>
+      <Badge badgeContent={badge} color="primary" max={99}>
+        <Icon name={icon} size={18} />
+      </Badge>
+    </MuiIconButton>
   );
 }
 
@@ -87,9 +78,8 @@ export function TextButton({
   onClick: () => void;
 }) {
   return (
-    <button className={`text-button inline-flex items-center gap-1.5 text-sm ${danger ? 'text-danger' : ''}`} disabled={disabled} onClick={onClick} type="button">
-      {icon && <Icon name={icon} size={14} />}
+    <UiButton className={`w-fit ${danger ? 'text-danger' : ''}`} disabled={disabled} icon={icon} onClick={onClick} size="small" variant="text">
       {label}
-    </button>
+    </UiButton>
   );
 }

app/frontend/src/components/CategoriesEditor.tsx

@@ -1,9 +1,10 @@
+import Alert from '@mui/material/Alert';
 import { useState } from 'react';
-import { ConfirmDialog, Select, tagColors, TextField, type TagColor } from '@project-graphite/ui';
+import { ConfirmDialog, IconButton, Select, type TagColor, tagColors, TextField } from '@project-graphite/ui';
 import { useAuth } from '../auth';
 import { categoryName, type SpendingCategory } from '../spending';
 import { useAction } from '../useAction';
-import { Button, IconButton } from './Button';
+import { Button } from './Button';
 import { FormDialog } from './FormDialog';
 
 interface Row extends SpendingCategory {
@@ -104,9 +105,9 @@ export function CategoriesEditor({ categories, onClose, onSaved, spaceId }: { ca
       </ul>
       <Button disabled={rows.length >= 40} label="Add a category" onClick={() => setRows((current) => [...current, { key: Math.max(...current.map((row) => row.key)) + 1, name: '', colour: 'gray' }])} />
       {error && (
-        <p className="error-message m-0" role="alert">
+        <Alert className="m-0" severity="error">
           {error}
-        </p>
+        </Alert>
       )}
     </FormDialog>
   );

app/frontend/src/components/CategoryChips.tsx

@@ -1,5 +1,8 @@
+import Chip from '@mui/material/Chip';
+import FormLabel from '@mui/material/FormLabel';
 import { useState } from 'react';
 import { categoryName, type SpendingCategory } from '../spending';
+import { TextButton } from './Button';
 
 const shownFirst = 6;
 
@@ -10,24 +13,20 @@ export function CategoryChips({ categories, label = 'Category', onChange, value
 
   return (
     <fieldset className="m-0 grid gap-2 border-0 p-0">
-      <legend className="field-label mb-2 p-0">{label}</legend>
+      <FormLabel className="mb-2" component="legend">{label}</FormLabel>
       <div className="flex flex-wrap gap-2">
         {shown.map((category) => (
-          <button
+          <Chip
             aria-pressed={category.name === value}
-            className={`category-chip ${category.name === value ? 'category-chip-chosen' : ''}`}
+            icon={<span aria-hidden="true" className={`swatch-dot ml-2 tag-${category.colour}`} />}
             key={category.name}
+            label={categoryName(category.name)}
             onClick={() => onChange(category.name)}
-            type="button"
-          >
-            <span aria-hidden="true" className={`swatch-dot tag-${category.colour}`} />
-            {categoryName(category.name)}
-          </button>
+            variant={category.name === value ? 'filled' : 'outlined'}
+          />
         ))}
         {categories.length > shown.length && (
-          <button className="text-button text-sm" onClick={() => setAll(true)} type="button">
-            More…
-          </button>
+          <TextButton label="More…" onClick={() => setAll(true)} />
         )}
       </div>
     </fieldset>

app/frontend/src/components/CrashBoundary.tsx

@@ -1,6 +1,5 @@
 import { Component, type ReactNode } from 'react';
-import { ErrorState } from '@project-graphite/ui';
-import { buttonClass } from './Button';
+import { Button, ErrorState } from '@project-graphite/ui';
 
 export class CrashBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {
   state = { failed: false };
@@ -14,9 +13,9 @@ export class CrashBoundary extends Component<{ children: ReactNode }, { failed:
     return (
       <ErrorState
         action={
-          <a className={`${buttonClass()} no-underline`} href="/">
+          <Button href="/" LinkComponent="a" size="small">
             Go home
-          </a>
+          </Button>
         }
         onRetry={() => window.location.reload()}
         title="This page hit a problem"

app/frontend/src/components/CurrencyField.tsx

@@ -1,7 +1,5 @@
-import { useId, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent } from 'react';
-import { Icon, useDismiss } from '@project-graphite/ui';
+import { Select } from '@project-graphite/ui';
 import { allCurrencies, currencyName } from '../choices';
-import { popoverPlace } from './DayOfMonthField';
 
 const famous = ['USD', 'EUR', 'EGP'];
 
@@ -24,120 +22,19 @@ export function CurrencyField({
   onChange?: (value: string) => void;
   value?: string;
 }) {
-  const id = useId();
-  const [own, setOwn] = useState(defaultValue ?? '');
-  const current = value ?? own;
-  const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState('');
-  const [active, setActive] = useState(0);
-  const root = useRef<HTMLDivElement>(null);
-  const trigger = useRef<HTMLButtonElement>(null);
-  const search = useRef<HTMLInputElement>(null);
-  const panel = useRef<HTMLDivElement>(null);
-  const [place, setPlace] = useState<CSSProperties>();
-  useDismiss(open, root, () => setOpen(false));
-  useLayoutEffect(() => {
-    if (!open) return;
-    setPlace({ ...popoverPlace(trigger.current!), width: Math.max(trigger.current!.offsetWidth, 288) });
-    panel.current?.showPopover?.();
-    if (!window.matchMedia('(pointer: coarse)').matches) search.current?.focus();
-  }, [open]);
-
-  const shown = useMemo(() => {
-    const words = query.trim().toLowerCase();
-    if (!words) return [...(noneLabel ? [''] : []), ...new Set([...famous, ...(current ? [current] : [])])];
-    const matches = codes.filter((code) => `${code} ${currencyName(code)}`.toLowerCase().includes(words));
-    return [...matches.filter((code) => code.toLowerCase().startsWith(words)), ...matches.filter((code) => !code.toLowerCase().startsWith(words))];
-  }, [codes, current, noneLabel, query]);
-
-  function choose(next: string) {
-    if (value === undefined) setOwn(next);
-    if (next !== current) onChange?.(next);
-    setOpen(false);
-    trigger.current?.focus();
-  }
-
-  function onKey(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      setOpen(false);
-      trigger.current?.focus();
-    } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-      event.preventDefault();
-      setActive((index) => Math.min(shown.length - 1, Math.max(0, index + (event.key === 'ArrowDown' ? 1 : -1))));
-    } else if (event.key === 'Enter') {
-      event.preventDefault();
-      const code = shown[active];
-      if (code !== undefined) choose(code);
-    }
-  }
-
   return (
-    <div className="field-label" ref={root}>
-      <span id={`${id}-label`}>{label}</span>
-      <button
-        aria-expanded={open}
-        aria-haspopup="listbox"
-        aria-labelledby={`${id}-label`}
-        className="select-trigger field-control"
-        onClick={() => {
-          setQuery('');
-          setActive(0);
-          setOpen(!open);
-        }}
-        ref={trigger}
-        role="combobox"
-        type="button"
-      >
-        <span className={`truncate ${current || noneLabel ? '' : 'text-faint'}`}>{current ? `${current} · ${currencyName(current)}` : (noneLabel ?? 'Choose…')}</span>
-        <span className="chevron">
-          <Icon name="chevron-down" size={16} />
-        </span>
-      </button>
-      <input name={name} type="hidden" value={current} />
-      {hint ? (
-        <span className="field-hint" id={`${id}-hint`}>
-          {hint}
-        </span>
-      ) : (
-        <span aria-hidden="true" className="field-slot" />
-      )}
-      {open && (
-        <div className="popover-panel listbox-panel" onKeyDown={onKey} popover="manual" ref={panel} style={place}>
-          <div className="listbox-search">
-            <Icon name="search" size={16} />
-            <input
-              aria-label="Search currencies"
-              autoComplete="off"
-              onChange={(event) => {
-                setQuery(event.currentTarget.value);
-                setActive(0);
-              }}
-              placeholder="Search all currencies"
-              ref={search}
-              value={query}
-            />
-          </div>
-          <div className="listbox-options" role="listbox">
-            {shown.map((code, index) => (
-              <div
-                aria-selected={code === current}
-                className="listbox-option"
-                data-active={index === active}
-                key={code || 'none'}
-                onClick={() => choose(code)}
-                onPointerMove={() => index !== active && setActive(index)}
-                role="option"
-              >
-                <span className="min-w-0 flex-1 truncate">{code || noneLabel}</span>
-                {code && <span className="listbox-hint">{currencyName(code)}</span>}
-                {code === current && <Icon name="check-mark" size={16} />}
-              </div>
-            ))}
-            {shown.length === 0 && <p className="listbox-empty">Nothing matches “{query}”.</p>}
-          </div>
-        </div>
-      )}
-    </div>
+    <Select
+      defaultValue={defaultValue}
+      hint={hint}
+      label={label}
+      name={name}
+      onChange={onChange}
+      options={[
+        ...(noneLabel ? [{ value: '', label: noneLabel }] : []),
+        ...[...new Set([...famous, ...codes])].map((code) => ({ value: code, label: `${code} · ${currencyName(code)}` })),
+      ]}
+      searchable
+      value={value}
+    />
   );
 }