feat(ui): Layout improvements and KQL grammar tweak#45
Conversation
There was a problem hiding this comment.
Pull request overview
This PR enhances the UI with a resizable results pane and collapsible sidebar, while making the KQL grammar more flexible by allowing queries with only statements.
Changes:
- Added drag-to-resize functionality between editor and results panes with visual feedback
- Implemented collapsible sidebar with smooth animations and icon-only collapsed state
- Replaced generic icons with emoji representations for data sources
- Made
QueryExpressionoptional in KQL grammar to support statement-only queries
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui/src/utils/emojiGenerator.ts | New utility for generating deterministic emojis for data sources |
| packages/ui/src/styles/theme.css | Updated layout structure and added sidebar collapse/resize styling |
| packages/ui/src/icons/index.ts | Converted icons from filled to outline stroke style with new sidebar toggle icons |
| packages/ui/src/contexts/SchemaContext.tsx | Added emoji field to table schema |
| packages/ui/src/components/Sidebar.tsx | Implemented collapsible sidebar with toggle button and emoji support |
| packages/ui/src/components/ResultsTable.tsx | Added custom scrollbar styling and shadow to header |
| packages/ui/src/components/Layout.tsx | Refactored to support resizable panes and collapsible sidebar |
| packages/ui/src/App.tsx | Updated to use new Layout component API with separate editor/results panes |
| packages/ui/public/manifest.json | Updated app icons to match new outline style |
| packages/ui/public/index.html | Removed duplicate HTML file |
| packages/ui/index.html | Updated favicon to match new icon style |
| packages/kql-lezer/src/grammar/plugins/rules/query.ts | Made QueryExpression optional and improved code formatting |
| <tbody> | ||
| {/* Spacer row for virtual scroll offset */} | ||
| {virtualItems().length > 0 && ( | ||
| {virtualItems().length > 0 && (virtualItems()[0]?.start ?? 0) > 0 && ( |
There was a problem hiding this comment.
The condition (virtualItems()[0]?.start ?? 0) > 0 is redundant. The spacer row should only render when there's an offset, which is already guaranteed by virtualItems().length > 0 since if there are virtual items and the first one exists, checking its start value is sufficient. The nullish coalescing with 0 means the condition would evaluate to 0 > 0 (false) when start is undefined, making the length check alone sufficient for the intended behavior.
| {virtualItems().length > 0 && (virtualItems()[0]?.start ?? 0) > 0 && ( | |
| {virtualItems().length > 0 && virtualItems()[0]?.start > 0 && ( |
|
|
||
| const handleMouseMove = (moveEvent: MouseEvent) => { | ||
| const deltaY = startY - moveEvent.clientY; | ||
| const newHeight = Math.min(Math.max(startHeight + deltaY, 100), 600); |
There was a problem hiding this comment.
The minimum (100) and maximum (600) height constraints are magic numbers. Consider extracting these as named constants (e.g., MIN_RESULTS_HEIGHT and MAX_RESULTS_HEIGHT) to improve code readability and maintainability.
7c18243 to
b4a0ad1
Compare
This PR introduces significant UI improvements including a resizable results pane and a collapsible sidebar, along with a minor grammar adjustment in
kql-lezer.Changes
@fossiq/ui
Layoutcomponent to support new structure.@fossiq/kql-lezer
Queryrule to makeQueryExpressionoptional. This allows for queries that consist only of statements (likeletstatements) without a final expression.Checklist
This PR was created by an AI agent on behalf of @sushruth.