mutxt improvements#1028
Merged
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
This PR modernizes MuTxt-related UI theming and extends menu/editor capabilities by migrating many UI components from nano-theme’s useTheme/makeRule to the UI Styles context (useStyles) with drule, while also adding new MuTxt features (TOC block, sharing utilities) and ContextMenu rendering options.
Changes:
- Migrate a large set of UI components from
useTheme/makeRule/useRuletouseStyles+drulefor dynamic styling. - Extend
ContextMenu/ toolbar menu item capabilities withpane(custom popup body),rawrendering support,prioritysearch tie-breaker, andmaxWidthhandling. - Add MuTxt editor improvements: new
tocblock type + options UI, cached outline API, and share-blob encoding/decoding (including encrypted encoding).
Reviewed changes
Copilot reviewed 178 out of 181 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui/src/misc/Ripple/index.tsx | Use useStyles for ripple default color. |
| packages/ui/src/markdown/renderers/renderListItem.tsx | Replace makeRule with drule + useStyles for list item marker styling. |
| packages/ui/src/markdown/renderers/renderFootnotes.tsx | Replace useTheme with useStyles for footnote border colors. |
| packages/ui/src/markdown/renderers/renderBlockquote.tsx | Replace theme usage with useStyles and drule-based dynamic class. |
| packages/ui/src/markdown/placeholders/TablePlaceholder.tsx | Replace useTheme with useStyles for placeholder background. |
| packages/ui/src/markdown/placeholders/ParagraphPlaceholder.tsx | Replace useTheme with useStyles for placeholder background. |
| packages/ui/src/markdown/placeholders/ImagePlaceholder.tsx | Replace useTheme with useStyles for placeholder background. |
| packages/ui/src/markdown/placeholders/HeadingPlaceholder.tsx | Replace useTheme with useStyles for placeholder background. |
| packages/ui/src/markdown/MdastFlat.tsx | Move markdown styling to drule + useStyles (incl. link/mark styling). |
| packages/ui/src/markdown/inline/InlineCode/LanguageInlineCode.tsx | Replace useRule theme styling with useStyles + drule. |
| packages/ui/src/markdown/inline/InlineCode/index.tsx | Replace useTheme with useStyles for inline code blockquote border. |
| packages/ui/src/markdown/inline/InlineCode/GenericInlineCode.tsx | Replace makeRule with drule + useStyles for colors/borders. |
| packages/ui/src/markdown/components/Key/index.tsx | Replace useTheme/makeRule with useStyles + drule for key styling. |
| packages/ui/src/markdown/block/Paragraph/index.tsx | Replace useTheme with useStyles for paragraph text color. |
| packages/ui/src/markdown/block/Hr/index.tsx | Replace useTheme with useStyles for HR background. |
| packages/ui/src/markdown/block/Heading/index.tsx | Replace useTheme with useStyles for heading color. |
| packages/ui/src/markdown/block/fen/FullWidthFenBlock.tsx | Replace useTheme with useStyles for full-width background. |
| packages/ui/src/markdown/block/Csv/MyTable.tsx | Replace makeRule with drule + useStyles for table borders. |
| packages/ui/src/markdown/block/Code/index.tsx | Replace useRule theme styling with useStyles + drule for code block theme. |
| packages/ui/src/icons/interactive/Tiles/index.tsx | Replace makeRule with drule + useStyles for tile colors/hover. |
| packages/ui/src/icons/interactive/More/index.tsx | Replace useRule with drule + useStyles; add optional size prop. |
| packages/ui/src/icons/interactive/CloseCircle/index.tsx | Replace useTheme with useStyles for ripple color. |
| packages/ui/src/icons/interactive/Close/index.tsx | Replace useRule with drule + useStyles for stroke colors. |
| packages/ui/src/icons/Iconista/index.tsx | Replace useTheme with useStyles for default icon color. |
| packages/ui/src/7-fullscreen/ModalAlert/ModalAlert.tsx | Replace useTheme with useStyles for text color. |
| packages/ui/src/7-fullscreen/Modal/index.tsx | Replace useTheme with useStyles for modal styling/colors. |
| packages/ui/src/7-fullscreen/AppGrid/components/AppGridColumn.tsx | Replace useTheme with useStyles for header/footer borders. |
| packages/ui/src/6-page/DocsPages/LibraryInfo.tsx | Replace useTheme with useStyles for link text color. |
| packages/ui/src/6-page/DocsPages/DocsMarkdown/renderers/renderCode.tsx | Replace makeRule with drule + useStyles for intro colors. |
| packages/ui/src/6-page/DocsPages/DocsMarkdown/components/Screenshot.tsx | Replace dynamic theme rules with drule + useStyles. |
| packages/ui/src/6-page/DocsPages/DocsMarkdown/components/Note.tsx | Replace makeRule with drule + useStyles for note panel styling. |
| packages/ui/src/6-page/DocsPages/DocsMarkdown/components/InlineCard.tsx | Replace makeRule with drule + useStyles for card styling. |
| packages/ui/src/6-page/DocsPages/DocsMarkdown/components/Contents/index.tsx | Replace makeRule with drule + useStyles for contents panel styling. |
| packages/ui/src/6-page/DocsPages/DocsMarkdown/components/Contents/ContentItem.tsx | Replace makeRule with drule + useStyles for link styling. |
| packages/ui/src/6-page/DocsPages/DocsMarkdown/components/Aside/AsideContainer.tsx | Replace makeRule with drule + useStyles for aside link styling. |
| packages/ui/src/5-block/TopNav/index.tsx | Replace makeRule usage with drule + useStyles for borders. |
| packages/ui/src/5-block/TextEditor/index.tsx | Replace useRule theme styling with useStyles + drule. |
| packages/ui/src/5-block/TextBlock/BlockText/index.tsx | Replace makeRule with static rule (lightTheme fonts). |
| packages/ui/src/5-block/SubNav/SubNav.tsx | Replace useTheme with useStyles for border color. |
| packages/ui/src/5-block/PageTitle/index.tsx | Replace makeRule with drule + useStyles for border color. |
| packages/ui/src/5-block/NextBlock/index.tsx | Replace useTheme with useStyles for colors. |
| packages/ui/src/5-block/Footer/FooterSection.tsx | Replace makeRule with drule + useStyles for footer section styling. |
| packages/ui/src/5-block/Footer/Footer.tsx | Replace useTheme with useStyles for background. |
| packages/ui/src/5-block/DropArea/DropArea.tsx | Replace useTheme with useStyles for dashed borders/hover colors. |
| packages/ui/src/5-block/Drawer/components/OverlayDrawer.tsx | Replace useTheme with useStyles for drawer panel/backdrop styling. |
| packages/ui/src/5-block/Drawer/components/InlineDrawer.tsx | Replace useTheme with useStyles for background/border colors. |
| packages/ui/src/5-block/Drawer/components/DrawerHeader.tsx | Replace useTheme with useStyles for header border. |
| packages/ui/src/5-block/Drawer/components/DrawerFooter.tsx | Replace useTheme with useStyles for footer border. |
| packages/ui/src/5-block/CommandPalette/CommandPaletteSeparator.tsx | Replace makeRule with drule + useStyles for border styling. |
| packages/ui/src/5-block/CommandPalette/CommandPaletteList/CommandPaletteTitle.tsx | Replace useTheme/makeRule with useStyles + drule. |
| packages/ui/src/5-block/CommandPalette/CommandPaletteItem.tsx | Replace useTheme/useRule usage with useStyles + drule. |
| packages/ui/src/5-block/CommandPalette/CommandPaletteInput.tsx | Replace useTheme with useStyles + lightTheme fonts. |
| packages/ui/src/5-block/CommandPalette/CommandPaletteHeader.tsx | Replace useTheme with useStyles + lightTheme fonts. |
| packages/ui/src/5-block/CommandPalette/CommandPaletteFooter.tsx | Replace useTheme with useStyles. |
| packages/ui/src/5-block/CommandPalette/args/CommandParameter.tsx | Replace useTheme with useStyles semantic colors. |
| packages/ui/src/5-block/CodeblockLayout/index.tsx | Replace useRule theme styling with useStyles + drule. |
| packages/ui/src/4-card/Toolbar/ToolbarMenu/ToolbarMenuPopup.tsx | Add support for rendering item.pane() as full popup body. |
| packages/ui/src/4-card/Toolbar/ToolbarMenu/ToolbarMenuItem.tsx | Treat pane/raw as non-terminal; adjust rendering when pane exists. |
| packages/ui/src/4-card/StructuralMenu/types.ts | Add pane, priority, maxWidth properties to MenuItem types/docs. |
| packages/ui/src/4-card/ScrollArea/Thumb.tsx | Replace useTheme with useStyles for thumb colors. |
| packages/ui/src/4-card/ScrollArea/ScrollRail.tsx | Replace useTheme with useStyles for rail hover background. |
| packages/ui/src/4-card/Menu/MenuItem.tsx | Replace useTheme/makeRule with useStyles + drule. |
| packages/ui/src/4-card/Menu/index.tsx | Replace useTheme with useStyles for nested menu border. |
| packages/ui/src/4-card/EmptyState/index.tsx | Replace useTheme with useStyles for frame dashed border. |
| packages/ui/src/4-card/ContextMenu/ContextTitle.tsx | Replace makeRule with useStyles + drule. |
| packages/ui/src/4-card/ContextMenu/ContextSep.tsx | Replace useTheme with useStyles for separator backgrounds. |
| packages/ui/src/4-card/ContextMenu/ContextSection.tsx | Replace useTheme/makeRule with useStyles + drule. |
| packages/ui/src/4-card/ContextMenu/ContextPaneHeaderSep.tsx | Remove useTheme; use useStyles consistently for colors. |
| packages/ui/src/4-card/ContextMenu/ContextMenuMobile/MobileMenuPane.tsx | Support pane and raw menu rendering; use useStyles. |
| packages/ui/src/4-card/ContextMenu/ContextMenuMobile/MobileMenuHeader.tsx | Replace useTheme with useStyles. |
| packages/ui/src/4-card/ContextMenu/ContextMenuMobile/index.tsx | Replace useTheme with useStyles for sheet colors/shadows. |
| packages/ui/src/4-card/ContextMenu/ContextMenu/util.tsx | Skip inline-only raw items in search; add priority tie-breaker. |
| packages/ui/src/4-card/ContextMenu/ContextMenu/index.tsx | Allow explicit onClose override for closing behavior. |
| packages/ui/src/4-card/ContextMenu/ContextMenu/ContextMenuPane.tsx | Add pane, raw, maxWidth handling; allow empty children when raw exists. |
| packages/ui/src/4-card/ContextMenu/ContextMenu/ContextMenuItem.tsx | Treat pane items as nested; adjust selection/ARIA accordingly. |
| packages/ui/src/4-card/ContextMenu/ContextHeader.tsx | Replace useTheme with useStyles for header background. |
| packages/ui/src/4-card/ContextMenu/ArgsPane/args/ArgSelect.tsx | Replace makeRule with drule + useStyles for options styling. |
| packages/ui/src/4-card/ColorPicker/index.tsx | Replace useTheme with useStyles for pointer/checkerboard styling. |
| packages/ui/src/4-card/BasicTooltip/index.tsx | Replace long-form CSS props with nano-theme shorthands; tweak shadow. |
| packages/ui/src/3-list-item/TwoColForm/TwoColFormTitle.tsx | Replace makeRule with drule + useStyles for title color. |
| packages/ui/src/3-list-item/TwoColForm/index.stories.tsx | Update Pill/Dot story colors to new semantic names. |
| packages/ui/src/3-list-item/SpinnerSquare/SpinnerSquare.tsx | Replace useRule theme styling with useStyles + drule. |
| packages/ui/src/3-list-item/SeparatorColorful/index.tsx | Replace useTheme with useStyles and semantic palette access. |
| packages/ui/src/3-list-item/Separator/index.tsx | Replace useTheme with useStyles for separator background. |
| packages/ui/src/3-list-item/RunningBackground/index.tsx | Replace makeRule with drule + useStyles for stripe colors. |
| packages/ui/src/3-list-item/Progress/index.tsx | Replace makeRule with drule + useStyles for success/glow colors. |
| packages/ui/src/3-list-item/Placeholder/index.tsx | Replace makeRule with drule + useStyles for placeholder variants. |
| packages/ui/src/3-list-item/MiniTitle/index.tsx | Replace makeRule with drule + useStyles for text color. |
| packages/ui/src/3-list-item/ListItem/index.tsx | Replace makeRule/useRule with useStyles + drule and semantic link color. |
| packages/ui/src/3-list-item/FileTabs/components/FileTabTooltip.tsx | Replace makeRule with drule + useStyles for tooltip shadow. |
| packages/ui/src/3-list-item/FileTabs/components/FileTabs.tsx | Replace useTheme with useStyles when computing default colors. |
| packages/ui/src/3-list-item/FileTabs/components/FileTab.tsx | Replace makeRule with drule + useStyles for shadow. |
| packages/ui/src/3-list-item/Breadcrumbs/Breadcrumb.tsx | Replace useTheme with useStyles + semantic colors for selected/hover. |
| packages/ui/src/2-inline-block/Typeahead/index.tsx | Replace useTheme/useRule with useStyles + drule for input color. |
| packages/ui/src/2-inline-block/SpinnerCircle/index.tsx | Replace makeRule with drule + useStyles for border color. |
| packages/ui/src/2-inline-block/SpinnerBars/index.tsx | Replace useTheme/makeRule with useStyles + drule for bar colors. |
| packages/ui/src/2-inline-block/Slider/index.tsx | Replace useTheme with useStyles for semantic range colors and value text. |
| packages/ui/src/2-inline-block/PillButton/index.tsx | Replace makeRule with drule + useStyles for hover/active styling. |
| packages/ui/src/2-inline-block/LinkBack/index.tsx | Replace makeRule with drule + useStyles for link colors. |
| packages/ui/src/2-inline-block/Label/LabelRight.tsx | Replace makeRule/useRule with drule + useStyles for text colors. |
| packages/ui/src/2-inline-block/InputNumber/index.stories.tsx | Add Storybook stories for InputNumber. |
| packages/ui/src/2-inline-block/InputColor/index.tsx | Replace useTheme with useStyles for swatch border. |
| packages/ui/src/2-inline-block/FontStyleButton/index.tsx | Replace theme usage with useStyles and lightTheme font fallback. |
| packages/ui/src/2-inline-block/CopyInput/index.tsx | Replace useTheme/makeRule with useStyles + lightTheme fonts. |
| packages/ui/src/2-inline-block/Checkbox/index.tsx | Replace useTheme/makeRule with useStyles + drule for focus/hover styling. |
| packages/ui/src/2-inline-block/BasicButton/index.tsx | Replace useRule with drule-builders for dynamic button/border styling. |
| packages/ui/src/1-inline/TimeAgo/index.tsx | Replace useRule with useStyles + drule. |
| packages/ui/src/1-inline/Text/index.tsx | Replace useTheme with useStyles; move base font into drule base. |
| packages/ui/src/1-inline/Sidetip/index.tsx | Replace makeRule with drule + useStyles. |
| packages/ui/src/1-inline/Pill/index.tsx | Rename semantic colors (success/error/link); switch to useStyles. |
| packages/ui/src/1-inline/Pill/index.stories.tsx | Update stories to new semantic color names. |
| packages/ui/src/1-inline/LogoStatic/index.tsx | Replace useTheme with useStyles for grey theme colors. |
| packages/ui/src/1-inline/Label/index.tsx | Replace makeRule with inline drule call using useStyles. |
| packages/ui/src/1-inline/Key/index.tsx | Replace useTheme with useStyles; generate theme-aware key style via drule. |
| packages/ui/src/1-inline/Highlight/index.tsx | Replace makeRule with drule + useStyles for highlight background. |
| packages/ui/src/1-inline/HashId/index.tsx | Replace useRule with useStyles + drule. |
| packages/ui/src/1-inline/Dot/index.tsx | Rename semantic colors; replace theme hooks with useStyles. |
| packages/ui/src/1-inline/Dot/index.stories.tsx | Update stories to new semantic color names. |
| packages/ui/src/1-inline/DateTime/index.tsx | Replace useRule with useStyles + drule. |
| packages/ui/src/1-inline/Bytes/index.tsx | Replace useRule with useStyles + drule. |
| packages/ui/src/1-inline/Avatar/index.tsx | Remove useTheme usage; use useStyles for colors/borders. |
| packages/mutxt-react/tsconfig.json | Add TS project reference to ../base64. |
| packages/mutxt-react/src/MuTxt/util/typeToLabel.ts | Add label for new toc block type. |
| packages/mutxt-react/src/MuTxt/util/shareEncoding.ts | Add gzip + base64url share encoding and AES-GCM encrypted encoding/decoding. |
| packages/mutxt-react/src/MuTxt/util/share.ts | Add share URL builders and clipboard helper; expose share encoding helpers. |
| packages/mutxt-react/src/MuTxt/util/keys.ts | Adjust key separator formatting for non-mac platforms. |
| packages/mutxt-react/src/MuTxt/types.ts | Add toc to element union and define TocElement schema. |
| packages/mutxt-react/src/MuTxt/state/MuTxtState.ts | Add cached outline API and related state fields; tweak default width. |
| packages/mutxt-react/src/MuTxt/omni/OmniMenu.tsx | Enhance omni menu items, add TOC insertion, improve search text. |
| packages/mutxt-react/src/MuTxt/omni/OmniFloater.tsx | Wire onClose to context menu for consistent close behavior. |
| packages/mutxt-react/src/MuTxt/index.ts | Export share encoding/decoding utilities from package entry. |
| packages/mutxt-react/src/MuTxt/components/blocks/VoidSelectionOverlay.tsx | Add reusable overlay for selected void blocks. |
| packages/mutxt-react/src/MuTxt/components/blocks/toc/TocOptionsPopup.tsx | Add TOC options popup pane. |
| packages/mutxt-react/src/MuTxt/components/blocks/toc/TocOptions.tsx | Add TOC options UI (caption, max level, include title, numbering). |
| packages/mutxt-react/src/MuTxt/components/blocks/toc/settings.ts | Add defaults and normalization helpers for TOC settings. |
| packages/mutxt-react/src/MuTxt/components/blocks/PreformattedElement.tsx | Align preformatted colors to useStyles.g(...) usage. |
| packages/mutxt-react/src/MuTxt/components/blocks/hr/HrElement.tsx | Use VoidSelectionOverlay instead of inline overlay markup. |
| packages/mutxt-react/src/MuTxt/components/blocks/file/ResolvedFileCard.tsx | Use VoidSelectionOverlay instead of inline overlay markup. |
| packages/mutxt-react/src/MuTxt/components/blocks/file/BrokenFileCard.tsx | Use VoidSelectionOverlay instead of inline overlay markup. |
| packages/mutxt-react/src/MuTxt/components/blocks/EmbedElement.tsx | Use VoidSelectionOverlay; align fallback text colors to Styles.g. |
| packages/mutxt-react/src/MuTxt/components/blocks/BlockquoteElement.tsx | Update blockquote layout and hover styling. |
| packages/mutxt-react/src/MuTxt/components/blocks/BlockElement.tsx | Route new toc element type to renderer. |
| packages/mutxt-react/src/MuTxt/chrome/ModalOverlay/index.tsx | Adjust border color calculation; (still mixes theme sources). |
| packages/mutxt-react/src/MuTxt/chrome/KeyboardShortcuts/data.ts | Add fullscreen toggle shortcut description. |
| packages/mutxt-react/src/MuTxt/chrome/header/MuTxtHeader.tsx | Expand toolbar item count thresholds for large screens. |
| packages/mutxt-react/src/MuTxt/chrome/EditorContextPopup.tsx | Add maxWidth support with viewport clamping for popups. |
| packages/mutxt-react/src/MuTxt/chrome/DocumentOutlineButton.tsx | Use cached outline from MuTxtState and subscribe to contentVersion. |
| packages/mutxt-react/src/MuTxt/block/BlockState.tsx | Exclude toc from certain block-type logic. |
| packages/mutxt-react/src/MuTxt/behavior/toc.ts | Add TOC insertion helper and mark TOC elements as void. |
| packages/mutxt-react/src/MuTxt/behavior/scroll-map.ts | Tweak scroll-map colors for various element types. |
| packages/mutxt-react/src/MuTxt/behavior/keyboard.ts | Add fullscreen toggle shortcut binding. |
| packages/mutxt-react/package.json | Add @jsonjoy.com/base64 workspace dependency. |
| packages/mu-txt/src/components/MainContent/index.tsx | Switch DotBackground import to shared UI src component. |
| packages/mu-txt/package.json | Add @jsonjoy.com/base64 workspace dependency; set MUTXT_DEV=1 for electron dev. |
| packages/mu-txt/electron/main.ts | Change dev detection, add CSP header for app://, and size window based on screen. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.