Open
Conversation
- Replaced Carbon Design System with a high-density, native-feeling desktop UI. - Implemented base UI components using Radix UI primitives (Button, Input, Select, etc.). - Refactored App Shell (Sidebar, TitleBar, Layout) to use Lucide Icons and Tailwind 4. - Migrated all 12 tools to the new design system, ensuring consistent layouts and interactions. - Added 'cn' utility for class merging and updated AGENTS.md with new design guidelines. - Configured Tailwind 4 via Vite plugin and added a dev shim for Wails bindings. Co-authored-by: vuon9 <3168632+vuon9@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Owner
Author
|
@jules pls fix lint errors |
Acknowledged. I have run |
Ran prettier to fix all code style issues across the frontend codebase as requested in the PR review. Co-authored-by: vuon9 <3168632+vuon9@users.noreply.github.com>
Owner
Author
|
CI / Frontend Tests & Build (pull_request)Failing after 1m @jules???? |
- Corrected vite.config.js entry points for production build. - Fixed missing exports in StringUtilities/strings.js. - Updated BarcodeGenerator, CodeFormatter, DataGenerator, JwtDebugger, and DateTimeConverter to use correct API signatures (request objects). - Verified successful production build with 'npm run build'. Co-authored-by: vuon9 <3168632+vuon9@users.noreply.github.com>
- Darker sidebar background (bg-zinc-900/95) - Gradient logo with shadow - Search input with icon prefix and proper styling - Re-enable Quick Access section (Recent + Favorites) - Category headers with icons - Active state with blue left border accent - Settings button styling - Use Tailwind zinc palette throughout
- Rewrote Sidebar with inline styles since Tailwind CSS v4 classes weren't applying - Added proper spacing: 10px padding, 8px margins, 12px gaps - Dark sidebar background (#18181b) with proper borders (#27272a) - Logo with gradient and shadow - Search input with proper sizing (40px height) - Category headers with icons and spacing - Quick Access section re-enabled (Recent + Favorites) - Simplified globals.css with Tailwind v4 source directives
- Replaced @carbon/react Tag component with inline-styled tags - Dark theme colors: gray (default), blue (active), green (custom) - Fixed tag styling for dark mode consistency
…styles - MultiHashOutput: Replace CopyButton and TextInput with inline-styled versions - ImageOutput: Replace Button and Carbon icons with Lucide icons and inline styles - Use consistent dark theme colors throughout
- TitleBar: Replace Tailwind classes with inline styles for dark theme - App: Replace Tailwind classes with inline styles for container - Fix white gap at top of sidebar by using consistent dark colors - Both components use #18181b background matching sidebar
- TitleBar now returns null when not in desktop mode (Wails) - Sidebar updated with onToggle prop for collapse functionality - App container updated to pass onToggle to Sidebar - Collapse/expand functionality added to Sidebar footer
- Sidebar width transitions from 256px to 64px when collapsed - Logo shrinks to icon-only when collapsed - Search and category headers hidden when collapsed - Settings button shows icon-only when collapsed - Collapse button icon changes direction based on state - All tool items show only icons when collapsed
- Settings and collapse buttons now stack vertically when sidebar is collapsed - Adjusted collapsed width to 72px for better button visibility - Collapse button shows ChevronRight (>) when collapsed, ChevronLeft (<) when expanded
- EditorToggle: Replace Carbon IconButton with inline-styled button, use Lucide Code icon - CodeEditor: Replace Carbon TextArea with inline-styled textarea fallback - Use consistent dark theme colors (#18181b, #27272a, #71717a, #f4f4f5)
- TextConverter: Replace all Tailwind classes with inline styles - ToolHeader, ToolPane, ToolControls, ToolSplitPane: Inline styled components - Button, Switch, Label: Inline styled components - Added padding to main content area (24px) - Consistent dark theme colors throughout - ToolLayoutToggle: Replace Carbon Button/icons with inline styles and Lucideicons
- Replace Radix UI Select with custom inline-styled dropdowns - Replace Tailwind classes with inline styles - Dark theme colors matching sidebar (#18181b, #27272a, #71717a, #f4f4f5) - Added mode toggle buttons with proper pressed state styling
- Category, Method dropdowns and Convert, Added, Auto-run, Layout buttons on same row - Mode toggle (Encode/Decode) moved to separate row below - ModeToggle component added to TextConverter index - ConversionControls simplified to only dropdowns
- Create wrapper service that detects Wails desktop vs browser mode - In Wails desktop: use actual backend via WailsConvert - In browser mode: provide mock responses for development/testing - Prevents 404 errors when running in browser without Wails runtime
- ConversionService now detects Wails desktop vs browser mode - In Wails desktop: uses Wails runtime (fast IPC) - In browser mode: calls HTTP API at localhost:8081 - Properly formats arguments for HTTP API (arg0, arg1, etc.) - Converts service/method names to kebab-case for REST endpoints
- All 5 files converted from Carbon/Tailwind to inline styles - index.jsx: Main page with ToolHeader, ToolPane, ToolSplitPane - ModeTabBar.jsx: Tab bar with Lucide icons - CaseConverterPane.jsx: Case conversion with copy buttons - SortDedupePane.jsx: Sorting options with inline checkboxes - InspectorPane.jsx: Text statistics display - Consistent dark theme colors throughout
- Changed disabled condition to allow text-converter and string-utilities - Users can now navigate to String Utilities from the sidebar
- Custom dropdown with icon support - Hover effects and proper styling - Matches Category dropdown from TextConverter
- Only use valid gofakeit functions: UUID, Name, Email, Phone, Recent, Past, Future, Birthday, etc. - Changed default created_at to use Recent instead of Date - Removed Date, DateTime, RandomInt from fieldTypes
- Replaced invalid functions (Boolean->Bool, Sentence 5->Sentence, Address->Street) - Added more valid functions (ULID, Gender, Username, Domain, IP, Password, State, Zip, Latitude, Longitude, Word, Paragraph) - Removed non-existent functions from fieldTypes
- Identity: UUID, ULID - Profile: FirstName, LastName, Name, Gender, Email, Phone, JobTitle, Company - Location: Street, City, State, Zip, Country, Latitude, Longitude - Web: URL, Domain, IP, Username, Password - Dates: Past, Future, Recent, Birthday - Numbers: Int, Float, Price, Bool - Text: Word, Sentence, Paragraph - Count input now matches Format dropdown height (32px) - SchemaField uses GroupedSelectDropdown for better UX
- Rename button.jsx to Button.jsx (case-sensitive filesystem fix) - Remove duplicate whiteSpace key in TextDiffChecker
vuon9
force-pushed
the
refactor-ui-tailwind4-radix-3156088012149862069
branch
from
e3bbd98 to
8766aec
Compare
- Add secret input field with show/hide toggle - Add encoding selector (base64, hex, raw) - Use Verify API when secret is provided - Show signature verification status
- Fill sample JWT token for Decode tab - Fill sample header, payload, and secret for Encode tab - Added Eye toggle for Show/Hide secret input
- Use styled SelectDropdown for Encoding and Algorithm - Add Key icon to Signing Configuration header in both tabs - Move Sample button to right side with ghost style - Fix sample data to use 'raw' encoding for verification - Set default encoding to 'raw' (most JWTs use plain text secrets)
- Create jwtService.ts wrapper with browser mode support - Uses HTTP API on port 8081 when not running in Wails desktop - Similar pattern to barcodeService and dataGeneratorService
- Single parameter (Decode) uses { value: token } format
- Multiple parameters (Verify, Encode) use { arg0, arg1, arg2, ... } format
- Fix service name mapping: JWTService -> jwt-service
- VerifyResponse only contains validity, not header/payload - Call Decode first to get header and payload - Then call Verify if secret is provided to validate signature
- Auto-encodes when header, payload, algorithm, or secret changes - 500ms debounce to avoid excessive API calls - Only triggers when there's valid header and payload content
- Change label from 'Schema Definition (N fields)' to just 'Schema Definition' - Change Add Field button from ghost to primary style like Generate button
- Match Generated Output pane style with simple label at top - Border and background only around field list content - Clean consistent layout between both panes
- Add minHeight: 0 to flex container for proper overflow - Content now scrolls when fields exceed container height
- Button stays visible when scrolling through fields - Fields list scrolls independently below the button
- Parse JSON objects and extract fields as CSV columns - Write headers from first object's keys - Write each row's values as separate CSV columns - Fixes double-escaped quotes in CSV output
Minimum allowed line rate is |
- Add TSV (Tab-Separated Values) format option - Backend formatter parses JSON and outputs tab-separated values - Frontend adds TSV to format dropdown
- XML: Parse JSON and output proper XML elements instead of CDATA - YAML: Parse JSON objects and output proper YAML format - Raw: Output as 'key: value' format, one record per block - Add Raw format to frontend dropdown - Remove unused xml import
- Same label style as Input Content on the left - Cleaner layout with consistent styling - Simplified download buttons
- Changed minimum from 10 to 1 to allow single item generation - Fixed batchCount clamping to respect user input - Updated default fallback from 10 to 1
vuon9
force-pushed
the
refactor-ui-tailwind4-radix-3156088012149862069
branch
from
e11cfce to
8e1a962
Compare
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
1 participant
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.
Summary
Migrates the UI from Carbon Design System to Tailwind CSS 4.0 with inline styles, ensuring a consistent dark theme
throughout the application. All tools now work in both Wails desktop and browser mode.
Changes
#18181b,#09090bbackgrounds,#27272aborders,#f4f4f5/#a1a1aatext)Generator
Enabled Tools
PR created automatically by Jules for task 3156088012149862069 started by @vuon9