Redesign admin workbench UI - #34
Merged
Merged
Conversation
Deploying rc-admin with
|
| Latest commit: |
a0ba4b3
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://3b628b04.rc-admin.pages.dev |
| Branch Preview URL: | https://design-workbench-admin-ui.rc-admin.pages.dev |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ❌ Deployment failed View logs |
rc-admin | a0ba4b3 | Jul 07 2026, 01:53 AM |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR redesigns the admin “workbench” UI by introducing a shared Tailwind-driven component style system (navigation, panels, forms, pills, tables, gallery tiles, upload zones) and then refactoring the main admin screens to use it, with a small behavior update in the upload component (labels/hints, accepted types, and STL extension validation/messaging).
Changes:
- Adds Tailwind theme tokens (colors/fonts/shadows) and a global component-style layer (
styles.css) implementing the “restrained workbench” system. - Refactors major admin templates (nav, sign-in, products, product details/editing, add product, orders) to use the new style system and component classes.
- Updates upload UX to support configurable label/hint/button text, selected filename display, accept hints, and clearer success/error messaging (including basic STL extension validation for v2).
Reviewed changes
Copilot reviewed 20 out of 22 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| tailwind.config.js | Adds shared theme tokens (colors/fonts/shadows) and updates content scanning to include TS. |
| src/styles.css | Introduces global workbench UI component classes (nav, panels, forms, pills, tables, gallery, upload zone, notices). |
| src/app/upload/upload.ts | Adds upload messaging via signals, configurable copy, accepted file types, and STL extension validation. |
| src/app/upload/upload.html | Redesigns upload UI into a styled “upload zone” with filename display and inline feedback. |
| src/app/product/product.component.html | Refactors product list page into the new shell/header + stat grid + notices layout. |
| src/app/product-details/product-details.component.html | Refactors product details/edit experience to panels, metadata grid, and gallery tiles. |
| src/app/product-card/product-card.component.html | Updates product card markup to the new system and adds stable data-cy hooks. |
| src/app/product-card/product-card.component.css | Adjusts product card host/layout styling and removes older hover transform code. |
| src/app/product-card/product-card.component.spec.ts | Updates unit tests to query stable data-cy selectors instead of CSS structure. |
| src/app/navbar/navbar.component.html | Replaces nav with the workbench rail/nav, adds mobile menu and accessibility attributes. |
| src/app/login/login.component.ts | Minor type formatting cleanup in login error handling. |
| src/app/login/login.component.html | Restyles sign-in page using workbench panels/forms/buttons. |
| src/app/color-picker/color-picker.component.ts | Minor formatting change to httpResource definition. |
| src/app/color-picker/color-picker.component.html | Restyles color picker to match workbench tokens and improved loading copy. |
| src/app/admin-orders/admin-orders.component.ts | Maps order status tones to the new status-pill--* variants. |
| src/app/admin-orders/admin-orders.component.html | Refactors order queue/detail UI to workbench panels/table shell/forms/notices. |
| src/app/add-product/add-product.component.html | Refactors add-product form to workbench layout + multiple upload zones + gallery tiles. |
| angular.json | Updates production optimization to avoid inlining fonts while keeping script/style optimization. |
| .github/workflows/unit-tests.yml | Pins Biome version to 2.3.7 for deterministic formatting/linting in CI. |
| docs/adr/0001-restrained-workbench-admin-interface.md | Adds ADR documenting the restrained workbench UI direction. |
| CONTEXT.md | Adds domain language/terminology guidance for the operator/admin UI. |
| package.json | Formatting-only change (reindented JSON). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
81
to
95
| onFileSelected(event: Event) { | ||
| const file = (event.target as HTMLInputElement).files?.[0] || null; | ||
| this.uploadStore.setFile(file); | ||
| this.uploadMessage.set(''); | ||
| this.uploadMessageTone.set('neutral'); | ||
|
|
||
| if (this.uploadType === 'v2' && file && !this.isStlFile(file)) { | ||
| this.uploadForm.patchValue({ file: null }); | ||
| this.uploadMessage.set('Select an STL file before uploading.'); | ||
| this.uploadMessageTone.set('error'); | ||
| return; | ||
| } | ||
|
|
||
| this.uploadForm.patchValue({ file }); | ||
| } |
Comment on lines
+140
to
+142
| private isStlFile(file: File) { | ||
| return file.name.toLocaleLowerCase().endsWith('.stl'); | ||
| } |
Comment on lines
+194
to
199
| <button | ||
| type="button" | ||
| (click)="removeGalleryImage(i)" | ||
| class="btn-icon absolute right-2 top-2" | ||
| title="Remove image" | ||
| > |
Comment on lines
131
to
+135
| @if (imageGallery().length > 0) { | ||
| <div class="grid grid-cols-2 gap-4 mt-4 md:grid-cols-3 lg:grid-cols-4"> | ||
| <div class="gallery-grid mt-3"> | ||
| @for (image of imageGallery(); track image; let i = $index) { | ||
| <div class="relative group"> | ||
| <img [src]="image" [alt]="'Gallery image ' + (i + 1)" class="object-cover w-full h-32 rounded-lg shadow-md"> | ||
| <div class="gallery-tile"> | ||
| <img [src]="image" [alt]="'Gallery image ' + (i + 1)"> |
Comment on lines
+155
to
159
| <label for="stl" class="form-label">STL file URL</label> | ||
| <input | ||
| id="stl" | ||
| formControlName="stl" | ||
| type="text" |
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
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
Notes
Testing