Instead of showing a broken video player error for formats like AVI,
MKV, WMV that browsers can't play, show a clean file info card with
icon, filename, format, and size. Message says "Preview will be
available after processing" which is accurate -- the processed output
is typically in a browser-friendly format.
Also cleaned up the post-processing non-previewable card to match
the same visual style.
- Download stays primary (full-width button)
- Save to Files demoted to subtle text link below download
- "Adjust settings" and "New file" are side-by-side compact buttons
- "Back to Tools" faded to very subtle (breadcrumb handles this)
- Clearer visual hierarchy: primary -> secondary -> tertiary actions
The All tab now shows tools organized by modality (Image, Video,
Audio, Documents, Data) with each section showing a colored icon,
tool count, and collapse toggle. Categories are nested within each
modality. Collapse state persists in localStorage so enterprise
users can hide modalities they don't use.
Modality tabs still show the flat category view for focused browsing.
ArrowUp/ArrowDown to move between files, Home/End to jump to
first/last. Selected file scrolls into view automatically.
List container is focusable and keyboard-navigable.
- Video files: inline video player with controls
- Audio files: waveform visualization with playback (wavesurfer.js)
- Image files: thumbnail preview (existing behavior)
- Documents/data: file type icon with format label
When importing from Files for a specific tool, all files are shown
but incompatible ones (wrong modality) are greyed out and unclickable.
This gives users full visibility of their library while making it
clear which files can be used.
When registryEntry.accept is undefined, fall back to tool.acceptedInputs
to derive the file filter. This ensures image tools reject audio/video
files in the file picker, and vice versa.
When clicking "Import from Files" on an image tool, only image files
are shown in the library. Video tools see only videos, audio tools
only audio. Uses MIME type prefix filtering (image/, video/, audio/).
Document and data tools see all files since their MIME types vary.
Theme toggle (sun/moon) and language selector (globe + dropdown) now
live in the top nav's right section alongside help and avatar.
Removed the floating Footer component from the home page since its
contents are now in the nav bar.
- Disabled auto-save of processed files to library (worker no longer
calls autoSaveToLibrary)
- Added "Save to Files" button in the review panel for explicit saving
- Files library upload area now accepts all file types, not just images
- Removed "Drop images here" hardcoded text, replaced with i18n
- Removed image-only file filter from library upload
- Import from Files now navigates back to the tool page with the
selected file loaded (uses selectForTool router state)
- Tool page skips file store reset when arriving from the library
- Removed "Open in Pipeline" button from file details and file list
- Button text changes to "Select File" when in file-selection mode
- Removed Automate/Editor/Files links from top nav on tool pages,
keeping only the breadcrumb + help + avatar for a cleaner look
- Added "Import from Files" link on the tool dropzone that navigates
to the file library, letting users import previously processed files
Changed undoProcessing() to reset() on toolId change so files don't
persist when navigating from one tool to another. Previously a video
file from a video tool would carry over to an image tool.
When a video tool produces a non-video output (gif, webp, png), the
media player can't render it. Now detects the processed file extension
and switches to ImageViewer for image outputs while keeping the video
player for the input preview.
video-to-webp, video-to-frames, auto-subtitles, extract-subtitles,
video-metadata, and audio-metadata were using display modes that
render via ImageViewer, which can't display video/audio files
(shows "Preview not available"). Changed to media-player so they
get proper video player or waveform visualization.
Replace the basic HTML5 audio element with an interactive waveform
player for audio tool pages. Video tools continue using the existing
MediaPlayerView component.
The inner Dropzone was showing generic "Images, Videos, Audio, PDFs..."
text. Now it shows the tool's actual accepted formats (e.g., "MP4, MOV,
WEBM, MKV..." for video tools) via the acceptDescription prop.
Removed the privacy note text per user feedback.
Tool routes now include the modality prefix: /image/crop, /video/trim-video,
/audio/convert-audio, /document/merge-pdf, /data/csv-json. Old URLs
(e.g. /resize) redirect to the new modality-prefixed path automatically.
Routes are computed by prepending MODALITY_URL_SLUG to each tool's route
in the TOOLS array at module init. The App.tsx route changed from
/:toolId to /:modality/:toolId, with a LegacyToolRedirect fallback.
Added overflow: hidden to html and body, height: 100% to html/body/#root.
Only the <main> element inside AppLayout scrolls. This prevents the
browser's default body scroll from creating a second scrollbar alongside
the app's own scroll container.
All tab now shows the full tool list grouped by category (same as
modality tabs). Removed Getting Started, Popular, and Browse by
Category sections for a simpler, direct experience.
The Getting Started section duplicated tools already shown in
Popular. Now first-time users (no recents) go straight to Popular
and Browse by Category.
The old home page called fetchSettings() on mount. The rewrite
dropped that call, so the settings store never loaded and
visibleTools was always empty (0 tools shown).
getSnapshot() was calling JSON.parse() on every invocation, returning
a new array reference each time. useSyncExternalStore uses Object.is
comparison, so it saw a "new" value on every render and triggered
an infinite update loop. Fix by caching the parsed result and only
re-parsing when the raw localStorage value changes.
Remove the Sidebar and ToolPanel components, replacing them with the
TopNav bar integrated into AppLayout. Strip the home page to a minimal
placeholder (Task 6 will rebuild it as a tool browser). Add breadcrumb
navigation to tool pages showing modality and tool name.
Adopt the landing page's Otter Orange (#E07832) design system across
the web app, replacing the generic blue (#2563eb) theme. Light mode
uses warm cream/stone neutrals, dark mode uses deep brown tones.
UI changes:
- Remove Quick Actions section from home page
- Add modality filter tabs to file-uploaded view
- Remove colored left-border accents from tool panels and grid cards
- Use standard dropzone for pdf-to-image (custom-results mode)
- Fix PDF document viewer to use ArrayBuffer instead of blob URL
- Fix missing FileImage import in dropzone
Handle MFA challenge in login flow (TOTP code input after password
verification, recovery code hint, back navigation). Add admin security
settings section with session idle timeout, max sessions per user,
MFA policy selector, SSO enforcement toggle with break-glass username,
and password policy controls. Propagate new i18n keys to all 21 locales.
SnapOtter