chore: set up TypeScript, Vite, Tailwind v4, and shadcn infrastructure#53
Merged
andrewhopper merged 11 commits intomasterfrom Mar 8, 2026
Merged
Conversation
Add build tooling for the TypeScript + React conversion: - TypeScript configs for backend (tsconfig.json) and frontend (tsconfig.app.json) - Vite config with React plugin, Tailwind v4 CSS plugin, and dev proxy - Tailwind v4 CSS-first config with shadcn default theme tokens - React entry point (main.tsx) with placeholder App component - shadcn utility function (cn) and shared helpers - Updated package.json with new scripts (dev, build, dev:server, dev:client) - Bumped to v2.0.0 to reflect the TypeScript migration https://claude.ai/code/session_018Hjvy9ersRVLGWxWuErbdc
Convert all Express server code from CommonJS JavaScript to TypeScript: - server.ts: Main QuickViewServer class with typed options and methods - file-service.ts: Full type definitions for FileTreeItem, GitInfo, ExifData, FileInfo - file-watcher.ts: Typed chokidar wrapper with WatchCallback type - python-executor.ts: ExecutionResult interface, typed rate limiting - code-formatter.ts: Typed formatter methods - tunnel-service.ts: TunnelServiceOptions interface, typed provider methods - Routes (file, execute, format): Typed Express Router/Request/Response - Type declaration for exif-parser module - CLI (bin/quickview.js): Updated to load TypeScript source via tsx https://claude.ai/code/session_018Hjvy9ersRVLGWxWuErbdc
Complete rewrite of the vanilla JS frontend as a React application: Components: - App.tsx: Main application with state management, file loading, code execution - Header.tsx: App header with connection status, theme toggle (lucide icons) - FileTree.tsx: Full file tree with tree/recent/type views, search, filter chips - PreferencesPanel.tsx: Slide-out settings panel with toggle switches - FileInfoModal.tsx: File metadata modal with git info, EXIF, UUIDs Renderers (all typed React components): - HtmlRenderer: iframe-based HTML preview - ReactRenderer: Babel transpilation + ReactDOM rendering - PythonRenderer: Script preview with run prompt - SvgRenderer: Inline SVG rendering - MarkdownRenderer: Basic markdown-to-HTML conversion - JsonRenderer: Pretty-printed JSON display Hooks: - useSocket: Socket.io connection with typed events - usePreferences: localStorage-backed preferences with type-safe updates - useTheme: Dark/light mode toggle with highlight.js theme sync All components use Tailwind utility classes with shadcn design tokens. https://claude.ai/code/session_018Hjvy9ersRVLGWxWuErbdc
Remove all original JavaScript files that have been replaced by TypeScript: - public/ directory (vanilla JS frontend, CSS, HTML entry point) - server.js (old CommonJS server) - src/routes/*.js (old route handlers) - src/services/*.js (old service classes) The new Vite-built frontend is served from dist/public/ and the TypeScript backend lives in src/server/. Updated tests/test-server.js to load from the new TypeScript source. https://claude.ai/code/session_018Hjvy9ersRVLGWxWuErbdc
Fixes from efficiency, quality, and reuse review: - App.tsx: Remove redundant fetch in runCode (use fileContent from state), memoize preview rendering with useMemo, extract TABS and ACTION_BTN constants outside component, fix keyboard shortcut effect to use functional setActiveTab (no deps needed), fix onFileChange deps - server.ts: Add missing refreshFiles socket handler (refresh button was a no-op), remove unused file content from fileChange events - FileInfoModal: Add AbortController to cancel stale fetches on close/reopen - JsonRenderer: Wrap parse+stringify in useMemo keyed on content - MarkdownRenderer: Wrap regex chain in useMemo keyed on content - utils.ts: Replace DOM-based escapeHtml with string replace (no GC churn) - code-formatter.ts: Fix O(n^2) indent calculation to use running state - Consolidate duplicate import (escapeHtml + cn from same module) https://claude.ai/code/session_018Hjvy9ersRVLGWxWuErbdc
- Remove unused escapeHtml import from PythonRenderer - Replace inline hidden-file check with existing isHiddenFile() method https://claude.ai/code/session_018Hjvy9ersRVLGWxWuErbdc
- Remove redundant state (fileExtension, selectedPath) from App.tsx, derive from currentFile instead - Replace dangerouslySetInnerHTML output panel with structured OutputResult data rendered as JSX - Extract shared file validation helper in file-routes.ts to eliminate copy-paste between /file/* and /file-info/* handlers - Move duplicate FileTreeItem/GitInfo/ExifData types to src/shared/ and import from both client and server - Fix XSS in SvgRenderer by stripping script tags and event handlers - Fix XSS in MarkdownRenderer by escaping HTML before applying markdown transforms - Encapsulate tunnel URL as private with getter, extract _setTunnel helper and shared Tailscale cleanup to reduce duplication - Remove unused escapeHtml import from App.tsx https://claude.ai/code/session_018Hjvy9ersRVLGWxWuErbdc
- Add shadcn UI primitives: Button, Input, Badge, ScrollArea, Collapsible, Dialog, Tabs, Switch, Tooltip, Separator - Install Radix UI dependencies for all primitives - Header: use Button (ghost/icon), Tooltip, Separator - FileTree: use Collapsible for tree/type views, ScrollArea for content, Input with search icon, Badge for extension filters, Button for view mode toggle and toolbar, Tooltip for actions - PreferencesPanel: replace custom slide-over with shadcn Dialog, use Switch for toggle, Button for actions, ScrollArea for content - FileInfoModal: replace custom modal with shadcn Dialog + ScrollArea - App.tsx: use Tabs/TabsList/TabsTrigger/TabsContent for main content area, Button with lucide icons for action bar, wrap app in TooltipProvider https://claude.ai/code/session_018Hjvy9ersRVLGWxWuErbdc
- Fix stale _cleanup in tunnel close handler - Hoist VIEW_MODES constant to module scope in FileTree - Memoize sorted files in RecentView and TypeView - Move sanitizeSvg to shared lib/utils.ts - Remove unused @radix-ui/react-toggle dependency - Remove TOCTOU file existence check in file-routes https://claude.ai/code/session_018Hjvy9ersRVLGWxWuErbdc
- Remove dead fileExists method (no callers after TOCTOU fix) - Add path traversal guard in getFilePath (resolve + prefix check) - Catch traversal error in validateFileRequest - Normalize watchDir with path.resolve in constructor - Derive keyboard viewMap from VIEW_MODES array instead of duplicating - Fix package.json indentation https://claude.ai/code/session_018Hjvy9ersRVLGWxWuErbdc
This was referenced Mar 9, 2026
claude bot
pushed a commit
that referenced
this pull request
Mar 9, 2026
… React - Bring in TypeScript/React/Vite architecture from master (PR #53): src/client/ with App.tsx, Header, FileTree, renderers, shadcn/ui components src/server/ with Express routes and services tsconfig.json, vite.config.ts, package.json updates - Port command palette (⌘K) to new TypeScript architecture: New CommandPalette.tsx React component with full keyboard nav Command palette state and Ctrl+K/⌘K handler added to App.tsx ⌘K button added to Header.tsx - Remove old public/app.js, public/index.html, public/style.css (replaced by TypeScript Vite build) Closes the merge conflict between the command palette PR and the TypeScript rewrite that landed in master. Co-authored-by: Andrew Hopper <andrewhopper@users.noreply.github.com>
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
2 participants
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.
Add build tooling for the TypeScript + React conversion:
https://claude.ai/code/session_018Hjvy9ersRVLGWxWuErbdc