Skip to content

Feat/preferences touch ups #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
seshxn merged 10 commits into from
Oct 31, 2025
Merged

Feat/preferences touch ups #61

seshxn merged 10 commits into from
Oct 31, 2025

Conversation

@simandebvu
Copy link
Owner

@simandebvu simandebvu commented Oct 31, 2025 •
edited
Loading

This PR enhances the preferences system with dark mode support, improves the format selection UX, integrates
target language throughout the transformation pipeline, and fixes a scrollbar flickering issue during
streaming.

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update
  • Performance improvement
  • Code refactoring
  • Test addition/modification

Changes Made

UI/UX Improvements

  • Fixed scrollbar flickering during streaming by adding overflow-y: scroll to the html element
    (src/index.css:5-7)
  • Enhanced dark mode support for all preference components (FormatPreviewCard, FormatPresetSelector,
    FormatSelector)
  • Improved format selection UX - removed the "summary locks other formats" behavior, allowing free selection of
    any format combination
  • Fixed accessibility for PreviewTooltip - replaced button with proper keyboard-accessible div role="button"
    (src/components/workspace/FormatQuickSelector.tsx:25-58)
  • Improved progress indicators with better messaging showing "Format X of Y" instead of "X/Y complete"

Feature Enhancements

  • Integrated target language support throughout the entire transformation pipeline:
    • TextInputPanel now accepts and passes targetLanguage prop
    • FormatTransformService includes language in all prompts
    • Language preference properly propagated through chunked transformations
    • Language metadata displayed in prompts (e.g., "Target Language: Spanish")

Bug Fixes

  • Merge conflicts resolved - prioritized main branch changes for ExampleContentMenu and WorkspacePage
  • Fixed format selection edge case - prevented empty format selection by requiring at least one format
  • Text color consistency - added text-current classes to ExampleContentMenu icons/text

Code Quality

  • Snapshot preferences to avoid multiple loadPreferences() calls in TextInputPanel
  • Improved type safety with explicit keyboard and mouse event types
  • Removed unused/redundant format validation logic

Testing Checklist

  • All existing tests pass locally (npm test)
  • New tests added for new functionality
  • Test coverage maintained or improved
  • Manual testing completed
  • Edge cases considered and tested

Code Quality Checklist

  • Code follows project style guidelines (npm run lint passes)
  • Self-review completed
  • Comments added for complex logic
  • No console.log or debugging code left (except intentional logging in FormattedOutput and FormatSection)
  • TypeScript types properly defined
  • Error handling implemented appropriately

Documentation

  • README updated (if needed)
  • JSDoc comments added/updated
  • Inline comments for complex logic
  • Migration guide included (for breaking changes)

Screenshots/Videos (if applicable)

Before: Scrollbar flickers during multi-format streaming, causing layout shiftAfter: Scrollbar always visible,
no flickering

Before: Summary format locks out other formatsAfter: All formats can be freely selected together

Performance Impact

  • No significant performance impact
  • Performance improved
  • Performance impact acceptable and documented

Notes:

  • Scrollbar fix eliminates reflow/layout shift during streaming
  • Preference snapshot reduces repeated localStorage reads in TextInputPanel

Deployment Notes

No special deployment considerations. All changes are backward compatible.

Steps to test

  1. Test scrollbar fix:
    - Select 3+ formats and process content
    - Verify scrollbar doesn't flicker during streaming
  2. Test format selection:
    - Try selecting any combination of formats (including summary with others)
    - Verify you can't deselect the last remaining format
  3. Test language integration:
    - Change target language in preferences
    - Process content and verify language preference is applied
  4. Test dark mode:
    - Switch to dark theme
    - Navigate to Preferences page
    - Verify all components render correctly with proper contrast
  5. Test accessibility:
    - Use keyboard to navigate format preview tooltips (Tab + Enter/Space)
    - Verify tooltips open/close properly

Additional Context

This PR builds on the preferences touch-ups branch and includes the merge from main (which brought in
MultiFormatProgress component and animation improvements). The scrollbar fix addresses a visual regression
introduced during streaming enhancements in previous PRs.

@simandebvu
feat: enhance UI components with dark mode support and language prefe…
04864c5 
…rences

- Updated ExampleContentMenu, TextInputPanel, and various preference components to support dark mode styling.
- Added target language selection functionality in WorkspacePage, allowing users to set and persist language preferences.
- Enhanced FormatTransformService to handle target language in transformations.
- Improved accessibility and visual consistency across components with updated styles for dark mode.
- Refactored history storage to include target language metadata for processing history entries.
@simandebvu
feat: integrate preferences storage subscription for language setting…
5b6df54 
…s in WorkspacePage

- Added subscription to preferences storage for target and favorite languages, allowing real-time updates to language settings.
- Enhanced state management for language preferences, improving user experience and responsiveness in the WorkspacePage component.
@simandebvu
refactor: simplify format selection logic in FormatSelector component
dae3671 
- Streamlined the handleFormatToggle function to improve clarity and maintainability.
- Consolidated format selection and deselection logic, ensuring at least one format is always selected.
- Removed redundant checks and comments, enhancing code readability.
@simandebvu
feat: enhance image extraction logic and add relative image source re…
904d1e4 
…solution

- Introduced a new function to resolve relative image sources against the final URL, improving image extraction accuracy.
- Updated the extractImages function to utilize the new resolution logic, ensuring proper handling of image sources.
- Added a test case to verify the functionality of resolving relative image sources in the readability parser.
- Refactored the PreviewTooltip component to improve accessibility and user interaction with enhanced event handling.
@simandebvu
feat: enhance progress tracking and UI feedback in output components
8c14d21 
- Updated FormattedOutput and MultiFormatProgress components to provide clearer progress information, including current format processing status.
- Refactored progress calculation logic to account for partial steps and improve accuracy in displaying completion percentages.
- Enhanced user feedback in the WorkspacePage to reflect real-time processing updates for selected formats.
- Simplified format selection logic in FormatQuickSelector to ensure at least one format is always selected while improving code readability.
@vercel
Copy link

vercel bot commented Oct 31, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
synapse Ready Ready Preview Comment Oct 31, 2025 3:12pm

simandebvu and others added 2 commits October 31, 2025 14:32
@simandebvu @claude
Merge branch 'main' into feat/preferences-touch-ups
9c7a723 
Resolved conflicts by prioritizing main branch changes:
- ExampleContentMenu.tsx: Accepted main's animation and styling updates
- WorkspacePage.tsx: Accepted main's MultiFormatProgress component integration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@simandebvu
feat: add scrollbar to prevent flicker during streaming
05d6db4 
- Updated index.css to force the scrollbar to always show, enhancing user experience during streaming by preventing layout shifts.
@simandebvu
refactor: clean up console logs and improve UI consistency
88f57f7 
- Removed unnecessary console log statements from various components including TextInputPanel, FormatSection, and FormattedOutput to enhance code clarity.
- Updated text in integration tests for better accuracy in progress indicators.
- Refactored className formatting in WorkspacePage for improved readability and consistency in UI elements.
@simandebvu
fix: update progress indicators in integration tests for accuracy
392a9f5 
- Adjusted progress indicator text in component integration tests to reflect the correct format being processed.
- Enhanced clarity in test assertions for currently processing formats in FormattedOutput and MultiFormatProgress components.
- Ensured consistency in progress tracking across various components to improve user feedback during processing.
@simandebvu
refactor: streamline chunk processing in FormatTransformService
3d8dab7 
- Removed unnecessary chunk count tracking in the transformToFormatStreaming method to simplify the code.
- Enhanced clarity in the chunk processing logic for improved maintainability.
@seshxn seshxn merged commit c40df38 into main Oct 31, 2025
4 of 5 checks passed
@simandebvu simandebvu deleted the feat/preferences-touch-ups branch November 1, 2025 11:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@seshxn seshxn seshxn approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@simandebvu @seshxn