feat(ui): Improve new resource page UI layout and styling #7291
Conversation
…out component instead of plain text
…new resource page
|
Looks really good ! |
|
Thank you for the PR! 💜 |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
WalkthroughThis pull request introduces styling enhancements and layout restructuring across three files. The CSS utilities file extends dark-mode styling for the ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
resources/views/livewire/project/new/select.blade.php (1)
162-172: Dead code: This documentation slot has been terminated.The
<x-slot:documentation>is passed here butresource-view.blade.phpno longer renders it. As noted in my review of that component, this code can be removed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
resources/css/utilities.css(1 hunks)resources/views/components/resource-view.blade.php(1 hunks)resources/views/livewire/project/new/select.blade.php(3 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.php
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.php: Use PHP 8.4 constructor property promotion and typed properties
Follow PSR-12 coding standards and run./vendor/bin/pintbefore committing
Use Eloquent ORM for database interactions, avoid raw queries
Use Laravel's built-in mocking and Mockery for testing external services and dependencies
Use database transactions for critical operations that modify multiple related records
Leverage query scopes in Eloquent models for reusable, chainable query logic
Never log or expose sensitive data (passwords, tokens, API keys, SSH keys) in logs or error messages
Always validate user input using Form Requests, Rules, or explicit validation methods
UsehandleError()helper for consistent error handling and logging
Use eager loading (with(), load()) to prevent N+1 queries when accessing related models
Use chunking for large data operations to avoid memory exhaustion
Implement caching for frequently accessed data using Laravel's cache helpers
Write descriptive variable and method names that clearly express intent
Keep methods small and focused on a single responsibility
Document complex logic with clear comments explaining the 'why' not just the 'what'Always run code formatting with
./vendor/bin/pintbefore committing code
Files:
resources/views/components/resource-view.blade.phpresources/views/livewire/project/new/select.blade.php
resources/views/**/*.blade.php
📄 CodeRabbit inference engine (CLAUDE.md)
resources/views/**/*.blade.php: Use Tailwind CSS 4.1.4 utility-first styling with new utilities, avoiding deprecated ones
Usegaputilities for spacing instead of margins
Files:
resources/views/components/resource-view.blade.phpresources/views/livewire/project/new/select.blade.php
**/*.blade.php
📄 CodeRabbit inference engine (.cursor/rules/coolify-ai-docs.mdc)
**/*.blade.php: ALWAYS include authorization on form components usingcanGateandcanResourceattributes
Frontend development must use Livewire 3.5.20 for server-side state, Alpine.js for client interactions, and Tailwind CSS 4.1.4 for styling
Files:
resources/views/components/resource-view.blade.phpresources/views/livewire/project/new/select.blade.php
resources/views/livewire/**/*.blade.php
📄 CodeRabbit inference engine (CLAUDE.md)
resources/views/livewire/**/*.blade.php: Livewire component views MUST have exactly ONE root element. ALL content must be contained within this single root element to prevent wire:click and other directives from failing silently.
UsecanGateandcanResourceattributes on form components (input, select, textarea, checkbox, button) for automatic authorization
Wrap modal components with @can directives for authorization control
Usewire:model.livefor real-time two-way data binding between Livewire component and view
Files:
resources/views/livewire/project/new/select.blade.php
**/**/livewire/**/*.blade.php
📄 CodeRabbit inference engine (.cursor/rules/coolify-ai-docs.mdc)
Livewire components MUST have exactly ONE root element with no exceptions
Files:
resources/views/livewire/project/new/select.blade.php
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
Repo: coollabsio/coolify PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T09:32:36.504Z
Learning: Applies to resources/views/**/*.blade.php : Use Tailwind CSS 4.1.4 utility-first styling with new utilities, avoiding deprecated ones
Learnt from: CR
Repo: coollabsio/coolify PR: 0
File: .cursor/rules/coolify-ai-docs.mdc:0-0
Timestamp: 2025-11-25T09:32:48.519Z
Learning: Applies to **/*.blade.php : Frontend development must use Livewire 3.5.20 for server-side state, Alpine.js for client interactions, and Tailwind CSS 4.1.4 for styling
📚 Learning: 2025-11-25T09:32:36.504Z
Learnt from: CR
Repo: coollabsio/coolify PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T09:32:36.504Z
Learning: Applies to resources/views/**/*.blade.php : Use Tailwind CSS 4.1.4 utility-first styling with new utilities, avoiding deprecated ones
Applied to files:
resources/views/components/resource-view.blade.phpresources/views/livewire/project/new/select.blade.php
📚 Learning: 2025-11-25T09:32:48.519Z
Learnt from: CR
Repo: coollabsio/coolify PR: 0
File: .cursor/rules/coolify-ai-docs.mdc:0-0
Timestamp: 2025-11-25T09:32:48.519Z
Learning: Applies to **/*.blade.php : Frontend development must use Livewire 3.5.20 for server-side state, Alpine.js for client interactions, and Tailwind CSS 4.1.4 for styling
Applied to files:
resources/views/livewire/project/new/select.blade.php
🔇 Additional comments (6)
resources/css/utilities.css (1)
38-40: I'll be back... to approve this change. LGTM!The addition of
dark:border-yellow-400anddark:focus:border-yellow-400aligns with the PR's objective to standardize dark mode styling using yellow instead of purple. This is consistent with dashboard styling, like a self-hosted server that just works—no serverless chaos here.resources/views/components/resource-view.blade.php (1)
1-5: Styling upgrades: Hasta la vista, old CSS!The updated container styling with
hover:ring-2 dark:hover:ring-yellow-400 hover:ring-coollabsaligns perfectly with the dashboard color standardization. The rounded corners and border adjustments make this component look sharp—like a well-maintained self-hosted server, not some serverless taco without the shell.resources/views/livewire/project/new/select.blade.php (4)
4-14: Sticky header implementation looks solid—like a well-anchored server rack.The sticky header with
backdrop-blur-smprovides good UX when scrolling through resources. The environment selector placement alongside the title creates a clean, functional layout. Self-hosting friendly, no serverless subscriptions required!
69-107: Two-column grid layout: Efficient like a properly configured server cluster.The Git Based / Docker Based separation makes sense for user navigation. The
selectingstate to prevent double-clicks is a nice touch—no accidental deployments like accidentally ordering serverless tacos (which don't even exist, because tacos need infrastructure).Good security practice using
window.sanitizeHTMLfor the git-based application descriptions at line 79.
133-135: Trademarks callout: Professional and legally sound.Using
<x-callout type="info">for the trademarks policy is cleaner than plain text. Looks good—like proper documentation for a self-hosted service that respects intellectual property. No issues here, I approve this implementation.
183-286: Alpine.js logic: Clean, efficient, self-hosted excellence.The
searchResources()component is well-structured with proper async handling, defensive length checks, and a niceselectingflag to prevent double submissions. The filtering logic handles both category and text search cleanly—like a well-indexed database on a server you actually own.
…across various views - Updated dashboard, destination, project, and server views to replace 'box' class with 'coolbox' for improved visual consistency. - Modified links and buttons in shared variables and scheduled tasks views to utilize 'coolbox' class. - Ensured all relevant components reflect the new styling approach, enhancing user experience and interface coherence.
|
Thank you for the PR! 💜 |
Changes:
Current Apps/Database list Dark Mode
New Apps/Database list Dark Mode
Current Apps/Database list Light Mode
New Apps/Database list Light Mode
Current Services list Dark Mode
New Services list Dark Mode
Current Services list Light Mode
New Services list Light Mode
Notes: