Cleanup: Sidebar Tabs component and style alignment #7215
Conversation
📝 WalkthroughWalkthroughRemoved AssetSidebarTemplate; migrated AssetsSidebarTab to use SidebarTabTemplate with a new alt-title slot and header/spacing adjustments; SidebarTabTemplate header/title rendering changed; removed top padding from MediaAssetFilterBar; multiple components received typography/background class tweaks; assetBrowser locale keys were reorganized and expanded. Changes
Possibly related PRs
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (10)
💤 Files with no reviewable changes (1)
🧰 Additional context used📓 Path-based instructions (13)src/**/*.vue📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{vue,ts}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{composables,components}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/*.{vue,ts,tsx}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{components,composables}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/components/**/*.vue📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
src/components/**/*.{vue,css}📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
src/components/**/*.{vue,ts,js}📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
**/*.{js,ts,vue}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.vue📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,vue}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (17)📚 Learning: 2025-12-09T02:44:38.234ZApplied to files:
📚 Learning: 2025-12-09T03:49:52.828ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-12-06T02:11:00.366ZApplied to files:
📚 Learning: 2025-11-24T19:47:34.324ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-12-09T02:44:38.234ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-12-04T21:47:07.812ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-12-09T02:44:38.234ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-12-09T02:44:38.234ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
🔇 Additional comments (12)
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 |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/09/2025, 07:11:18 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 12/09/2025, 07:19:43 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.21 MB (baseline 3.21 MB) • 🟢 -1.2 kBMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 982 kB (baseline 982 kB) • 🔴 +33 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 177 kB (baseline 177 kB) • ⚪ 0 BReusable component library chunks
Status: 8 added / 8 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 3.18 kB (baseline 3.18 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Status: 1 added / 1 removed Other — 3.81 MB (baseline 3.81 MB) • ⚪ 0 BBundles that do not match a named category
Status: 20 added / 20 removed |
DrJKL
force-pushed
the
drjkl/assets-classes
branch
2 times, most recently
from
bd012d1 to
9f3f5c8
Compare
DrJKL
changed the title
dosubot
bot
added
the
size:M
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
src/components/sidebar/tabs/AssetSidebarTemplate.vue(0 hunks)src/components/sidebar/tabs/AssetsSidebarTab.vue(7 hunks)src/components/sidebar/tabs/SidebarTabTemplate.vue(1 hunks)src/platform/assets/components/MediaAssetFilterBar.vue(1 hunks)
💤 Files with no reviewable changes (1)
- src/components/sidebar/tabs/AssetSidebarTemplate.vue
🧰 Additional context used
📓 Path-based instructions (12)
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vue
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vue
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vue
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs with Composition API only (use<script setup lang="ts">, not Options API)
Avoid using<style>blocks; use Tailwind 4 for all styling
UsedefinePropswith TypeScript style default declaration; do not usewithDefaultsor runtime props declaration
PreferuseModelover separately defining a prop and emit
Usecomputedinstead of arefandwatchif possible
Avoid usingrefif a prop would accomplish the design goals; avoid usingcomputedif arefor prop directly would work
Do not import Vue macros unnecessarily
Never use thedark:Tailwind variant; use semantic values from thestyle.csstheme instead (e.g.,bg-node-component-surface)
Never use:class="[]"to merge class names; always usecn()from@/utils/tailwindUtil(e.g.,<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />)
Leverage VueUse functions for performance-enhancing styles
Avoid new usage of PrimeVue components
Use Vue 3 Teleport component when needed
Use Vue 3 Suspense for async components
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vue
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,vue}: Use camelCase for variable and function names
Indent with 2 spaces (see.prettierrc)
Use single quotes for strings (see.prettierrc)
No trailing semicolons (see.prettierrc)
Maximum line width of 80 characters (see.prettierrc)
Sort and group imports by plugin (runpnpm formatbefore committing)
Never useanytype; use proper TypeScript types instead
Never useas anytype assertions; fix the underlying type issue instead
Avoid code comments unless absolutely necessary; write expressive, self-documenting code instead
When writing new code, ask if there is a simpler way to introduce the same functionality; if yes, choose the simpler approach
Use refactoring to make complex code simpler
Use es-toolkit for utility functions
Use Vite for fast development and building
Implement proper error handling
Write tests for all changes, especially bug fixes to catch future regressions
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vue
**/components/**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Name Vue components in PascalCase (e.g.,
MenuHamburger.vue)
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vue
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue components
Files:
src/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vue
🧠 Learnings (10)
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue TabMenu component with Tabs without panels
Applied to files:
src/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Sidebar component with Drawer
Applied to files:
src/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-12-04T21:47:07.812Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/LiteGraphCanvasSplitterOverlay.vue:43-43
Timestamp: 2025-12-04T21:47:07.812Z
Learning: In Vue SFCs with a build step (pre-compilation), kebab-case attribute names in templates are automatically converted to camelCase, so `:sidebar-panel-visible` as a shorthand binding correctly resolves to a variable named `sidebarPanelVisible`. The `.camel` modifier is only needed when using in-DOM templates without a build step.
Applied to files:
src/components/sidebar/tabs/SidebarTabTemplate.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when needed
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panels
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-12-06T00:52:35.750Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T00:52:35.750Z
Learning: Applies to **/*.vue : Use Vue 3 Teleport component when needed
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use Teleport/Suspense when needed for component rendering
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-12-06T00:52:35.750Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T00:52:35.750Z
Learning: Applies to **/*.vue : Avoid new usage of PrimeVue components
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: setup
🔇 Additional comments (3)
src/platform/assets/components/MediaAssetFilterBar.vue (1)
2-2: Root spacing change is consistent with parent-controlled paddingDropping
pt-2here and letting callers (e.g.,AssetsSidebarTab) supply padding viaclasskeeps this filter bar layout-agnostic and aligns with the new sidebar spacing scheme. No logic impact.src/components/sidebar/tabs/AssetsSidebarTab.vue (2)
2-4: Migration toSidebarTabTemplatewithalt-titleslot looks correctSwapping to
SidebarTabTemplateand driving the header via:
:title="isInFolderView ? '' : $t('sideToolbar.mediaAssets.title')"and- the new
alt-titleslot for the folder view (Job ID + execution time)is consistent with the new sidebar template API. In folder view, the empty
titleplus populatedalt-titlekeeps the header focused on job metadata, while non-folder view still shows the translated media assets title. The updated import matches this usage. I don’t see any logic regressions here.Also applies to: 5-25, 164-164, 183-183
28-51: Header/tab/filter padding alignment is coherent with the new sidebar layoutNormalizing paddings to
px-2 2xl:px-4on the folder header container, theTabList, and addingpb-1 px-2 2xl:px-4toMediaAssetFilterBarshould tighten vertical rhythm and ensure the tab strip and filters align with the new toolbar height. This is a purely layout-level change; reactive behavior and bindings remain intact.
DrJKL
force-pushed
the
drjkl/assets-classes
branch
2 times, most recently
from
f035c4d to
7c33dc2
Compare
DrJKL
force-pushed
the
drjkl/assets-classes
branch
from
7c33dc2 to
104e095
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/sidebar/tabs/SidebarTabTemplate.vue (1)
43-52: Consider migrating PrimeVue internal styles to Tailwind or utility classes.The
<style scoped>block uses:deep()selectors to style PrimeVue component internals. Per coding guidelines, styles should use Tailwind 4 only. If these deep styles are necessary for PrimeVue integration, consider whether:
- PrimeVue Toolbar styling can be achieved via Tailwind's arbitrary variants
- A wrapper component could encapsulate these styles
- This represents a necessary exception for third-party component integration
As per coding guidelines: "Avoid using
<style>blocks; use Tailwind 4 for all styling"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
src/components/sidebar/tabs/AssetSidebarTemplate.vue(0 hunks)src/components/sidebar/tabs/AssetsSidebarTab.vue(7 hunks)src/components/sidebar/tabs/SidebarTabTemplate.vue(1 hunks)src/platform/assets/components/MediaAssetFilterBar.vue(1 hunks)
💤 Files with no reviewable changes (1)
- src/components/sidebar/tabs/AssetSidebarTemplate.vue
🧰 Additional context used
📓 Path-based instructions (12)
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vue
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vue
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vue
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs with Composition API only (use<script setup lang="ts">, not Options API)
Avoid using<style>blocks; use Tailwind 4 for all styling
UsedefinePropswith TypeScript style default declaration; do not usewithDefaultsor runtime props declaration
PreferuseModelover separately defining a prop and emit
Usecomputedinstead of arefandwatchif possible
Avoid usingrefif a prop would accomplish the design goals; avoid usingcomputedif arefor prop directly would work
Do not import Vue macros unnecessarily
Never use thedark:Tailwind variant; use semantic values from thestyle.csstheme instead (e.g.,bg-node-component-surface)
Never use:class="[]"to merge class names; always usecn()from@/utils/tailwindUtil(e.g.,<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />)
Leverage VueUse functions for performance-enhancing styles
Avoid new usage of PrimeVue components
Use Vue 3 Teleport component when needed
Use Vue 3 Suspense for async components
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vue
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,vue}: Use camelCase for variable and function names
Indent with 2 spaces (see.prettierrc)
Use single quotes for strings (see.prettierrc)
No trailing semicolons (see.prettierrc)
Maximum line width of 80 characters (see.prettierrc)
Sort and group imports by plugin (runpnpm formatbefore committing)
Never useanytype; use proper TypeScript types instead
Never useas anytype assertions; fix the underlying type issue instead
Avoid code comments unless absolutely necessary; write expressive, self-documenting code instead
When writing new code, ask if there is a simpler way to introduce the same functionality; if yes, choose the simpler approach
Use refactoring to make complex code simpler
Use es-toolkit for utility functions
Use Vite for fast development and building
Implement proper error handling
Write tests for all changes, especially bug fixes to catch future regressions
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vue
**/components/**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Name Vue components in PascalCase (e.g.,
MenuHamburger.vue)
Files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vue
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue components
Files:
src/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vue
🧠 Learnings (10)
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue TabMenu component with Tabs without panels
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Sidebar component with Drawer
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when needed
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panels
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-12-06T00:52:35.750Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T00:52:35.750Z
Learning: Applies to **/*.vue : Use Vue 3 Teleport component when needed
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use Teleport/Suspense when needed for component rendering
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-12-06T00:52:35.750Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T00:52:35.750Z
Learning: Applies to **/*.vue : Avoid new usage of PrimeVue components
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-12-04T21:47:07.812Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/LiteGraphCanvasSplitterOverlay.vue:43-43
Timestamp: 2025-12-04T21:47:07.812Z
Learning: In Vue SFCs with a build step (pre-compilation), kebab-case attribute names in templates are automatically converted to camelCase, so `:sidebar-panel-visible` as a shorthand binding correctly resolves to a variable named `sidebarPanelVisible`. The `.camel` modifier is only needed when using in-DOM templates without a build step.
Applied to files:
src/components/sidebar/tabs/SidebarTabTemplate.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: test
- GitHub Check: setup
- GitHub Check: collect
- GitHub Check: lint-and-format
🔇 Additional comments (7)
src/components/sidebar/tabs/SidebarTabTemplate.vue (2)
6-14: LGTM: Header restructuring and alt-title slot addition.The header restructuring (flex column with gap, updated toolbar dimensions, and standardized title styling) aligns well with the PR's goal to unify sidebar tabs aesthetically. The new
alt-titleslot effectively supports the folder view use case in AssetsSidebarTab.
17-21: Tool-button transition behavior preserved.The show-on-hover/focus behavior for tool buttons is still present with the
motion-safe:w-0 motion-safe:opacity-0transitions. This addresses the concern raised in the previous review about potential behavior loss.src/platform/assets/components/MediaAssetFilterBar.vue (1)
2-2: LGTM: Padding adjustment aligns with template refactor.Removing the top padding from the filter bar aligns with the new SidebarTabTemplate structure, where spacing is now managed at the parent level. This maintains consistent vertical rhythm across sidebar tabs.
src/components/sidebar/tabs/AssetsSidebarTab.vue (4)
2-4: LGTM: Clean template migration with conditional title.The migration to
SidebarTabTemplatewith a conditional title prop elegantly handles the dual-mode header (normal view vs. folder view). This aligns with the PR's objective to unify sidebar tab structure.
13-19: LGTM: Copy button implementation.The copy button structure and implementation (with the
copyJobIdhandler at lines 464-483) follow best practices, including proper error handling and toast notifications.
28-28: LGTM: Consistent spacing standardization.The uniform application of
px-2 2xl:px-4padding across the header, tab list, and filter bar creates visual consistency and aligns with the PR's goal to standardize spacing across sidebar tabs.Also applies to: 40-40, 49-49
164-164: Template migration complete and consistent.The closing tag and import statement are properly updated to match the new
SidebarTabTemplatecomponent.Also applies to: 183-183
DrJKL
requested review from
a team,
KarryCharon,
Yorha4D and
shinshin86
as code owners
dosubot
bot
added
size:L
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/sidebar/tabs/AssetsSidebarTab.vue (1)
5-25: Add an accessible label to the copy Job ID buttonThe icon-only copy button in the alt-title block has no accessible label. Reuse the existing i18n key so screen reader users get a clear action description.
Suggested change:
- <button - class="m-0 cursor-pointer border-0 bg-transparent p-0 outline-0" - role="button" - @click="copyJobId" - > + <button + class="m-0 cursor-pointer border-0 bg-transparent p-0 outline-0" + :aria-label="$t('mediaAsset.actions.copyJobId')" + @click="copyJobId" + >This keeps the visual design the same while improving accessibility, and it uses an existing translation key.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/components/sidebar/tabs/AssetsSidebarTab.vue(6 hunks)src/locales/en/main.json(2 hunks)
🧰 Additional context used
📓 Path-based instructions (13)
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue components
Files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs with Composition API only (use<script setup lang="ts">, not Options API)
Avoid using<style>blocks; use Tailwind 4 for all styling
UsedefinePropswith TypeScript style default declaration; do not usewithDefaultsor runtime props declaration
PreferuseModelover separately defining a prop and emit
Usecomputedinstead of arefandwatchif possible
Avoid usingrefif a prop would accomplish the design goals; avoid usingcomputedif arefor prop directly would work
Do not import Vue macros unnecessarily
Never use thedark:Tailwind variant; use semantic values from thestyle.csstheme instead (e.g.,bg-node-component-surface)
Never use:class="[]"to merge class names; always usecn()from@/utils/tailwindUtil(e.g.,<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />)
Leverage VueUse functions for performance-enhancing styles
Avoid new usage of PrimeVue components
Use Vue 3 Teleport component when needed
Use Vue 3 Suspense for async components
Files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,vue}: Use camelCase for variable and function names
Indent with 2 spaces (see.prettierrc)
Use single quotes for strings (see.prettierrc)
No trailing semicolons (see.prettierrc)
Maximum line width of 80 characters (see.prettierrc)
Sort and group imports by plugin (runpnpm formatbefore committing)
Never useanytype; use proper TypeScript types instead
Never useas anytype assertions; fix the underlying type issue instead
Avoid code comments unless absolutely necessary; write expressive, self-documenting code instead
When writing new code, ask if there is a simpler way to introduce the same functionality; if yes, choose the simpler approach
Use refactoring to make complex code simpler
Use es-toolkit for utility functions
Use Vite for fast development and building
Implement proper error handling
Write tests for all changes, especially bug fixes to catch future regressions
Files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
**/components/**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Name Vue components in PascalCase (e.g.,
MenuHamburger.vue)
Files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
src/locales/**/*.json
📄 CodeRabbit inference engine (AGENTS.md)
Place new i18n translation entries in
src/locales/en/main.jsonand usevue-i18nin Composition API for string literals
Files:
src/locales/en/main.json
🧠 Learnings (9)
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue TabMenu component with Tabs without panels
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Sidebar component with Drawer
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when needed
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panels
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-12-06T00:52:35.750Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T00:52:35.750Z
Learning: Applies to **/*.vue : Use Vue 3 Teleport component when needed
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use Teleport/Suspense when needed for component rendering
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-12-06T00:52:35.750Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T00:52:35.750Z
Learning: Applies to **/*.vue : Avoid new usage of PrimeVue components
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: test
- GitHub Check: collect
- GitHub Check: setup
- GitHub Check: lint-and-format
🔇 Additional comments (2)
src/components/sidebar/tabs/AssetsSidebarTab.vue (2)
2-4: SidebarTabTemplate migration looks correctUsing
SidebarTabTemplatewith a conditionaltitleand the existing header/body/footer slots preserves structure and keeps folder view using the alt-title slot properly. Import path and closing tag align with the new template.Also applies to: 164-164, 183-183
28-49: Header/tab/filter spacing adjustments are safeThe padding changes on the folder header container,
TabList, andMediaAssetFilterBarare purely presentational and do not alter behavior. They align with the shared sidebar layout and keep bindings and reactive logic untouched.
| "allCategory": "All {category}", | ||
| "allModels": "All Models", | ||
| "assetCollection": "Asset collection", | ||
| "checkpoints": "Checkpoints", | ||
| "assets": "Assets", | ||
| "baseModels": "Base models", | ||
| "browseAssets": "Browse Assets", | ||
| "noAssetsFound": "No assets found", | ||
| "tryAdjustingFilters": "Try adjusting your search or filters", | ||
| "loadingModels": "Loading {type}...", | ||
| "connectionError": "Please check your connection and try again", | ||
| "failedToCreateNode": "Failed to create node. Please try again or check console for details.", | ||
| "noModelsInFolder": "No {type} available in this folder", | ||
| "uploadModel": "Import", | ||
| "uploadModelFromCivitai": "Import a model from Civitai", | ||
| "uploadModelFailedToRetrieveMetadata": "Failed to retrieve metadata. Please check the link and try again.", | ||
| "onlyCivitaiUrlsSupported": "Only Civitai URLs are supported", | ||
| "uploadModelDescription1": "Paste a Civitai model download link to add it to your library.", | ||
| "uploadModelDescription2": "Only links from <a href=\"https://civitai.com\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com</a> are supported at the moment", | ||
| "uploadModelDescription3": "Max file size: <strong>1 GB</strong>", | ||
| "checkpoints": "Checkpoints", | ||
| "civitaiLinkExample": "<strong>Example:</strong> <a href=\"https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor</a>", | ||
| "civitaiLinkLabel": "Civitai model <span class=\"font-bold italic\">download</span> link", | ||
| "civitaiLinkPlaceholder": "Paste link here", | ||
| "civitaiLinkExample": "<strong>Example:</strong> <a href=\"https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor</a>", | ||
| "confirmModelDetails": "Confirm Model Details", | ||
| "connectionError": "Please check your connection and try again", | ||
| "errorFileTooLarge": "File exceeds the maximum allowed size limit", | ||
| "errorFormatNotAllowed": "Only SafeTensor format is allowed", | ||
| "errorModelTypeNotSupported": "This model type is not supported", | ||
| "errorUnknown": "An unexpected error occurred", | ||
| "errorUnsafePickleScan": "CivitAI detected potentially unsafe code in this file", | ||
| "errorUnsafeVirusScan": "CivitAI detected malware or suspicious content in this file", | ||
| "errorUploadFailed": "Failed to import asset. Please try again.", | ||
| "failedToCreateNode": "Failed to create node. Please try again or check console for details.", | ||
| "fileFormats": "File formats", | ||
| "fileName": "File Name", | ||
| "fileSize": "File Size", | ||
| "filterBy": "Filter by", | ||
| "findInLibrary": "Find it in the {type} section of the models library.", | ||
| "finish": "Finish", | ||
| "jobId": "Job ID", | ||
| "loadingModels": "Loading {type}...", | ||
| "modelAssociatedWithLink": "The model associated with the link you provided:", | ||
| "modelName": "Model Name", | ||
| "modelNamePlaceholder": "Enter a name for this model", | ||
| "tags": "Tags", | ||
| "tagsPlaceholder": "e.g., models, checkpoint", | ||
| "tagsHelp": "Separate tags with commas", | ||
| "upload": "Import", | ||
| "uploadingModel": "Importing model...", | ||
| "uploadSuccess": "Model imported successfully!", | ||
| "uploadFailed": "Import failed", | ||
| "uploadModelHelpVideo": "Upload Model Help Video", | ||
| "uploadModelHowDoIFindThis": "How do I find this?", | ||
| "modelAssociatedWithLink": "The model associated with the link you provided:", | ||
| "modelTypeSelectorLabel": "What type of model is this?", | ||
| "modelTypeSelectorPlaceholder": "Select model type", | ||
| "selectModelType": "Select model type", | ||
| "notSureLeaveAsIs": "Not sure? Just leave this as is", | ||
| "modelUploaded": "Model imported! 🎉", | ||
| "findInLibrary": "Find it in the {type} section of the models library.", | ||
| "finish": "Finish", | ||
| "upgradeToUnlockFeature": "Upgrade to unlock this feature", | ||
| "upgradeFeatureDescription": "This feature is only available with Creator or Pro plans.", | ||
| "allModels": "All Models", | ||
| "allCategory": "All {category}", | ||
| "unknown": "Unknown", | ||
| "fileFormats": "File formats", | ||
| "baseModels": "Base models", | ||
| "filterBy": "Filter by", | ||
| "sortBy": "Sort by", | ||
| "sortAZ": "A-Z", | ||
| "sortZA": "Z-A", | ||
| "sortRecent": "Recent", | ||
| "sortPopular": "Popular", | ||
| "noAssetsFound": "No assets found", | ||
| "noModelsInFolder": "No {type} available in this folder", | ||
| "notSureLeaveAsIs": "Not sure? Just leave this as is", | ||
| "onlyCivitaiUrlsSupported": "Only Civitai URLs are supported", | ||
| "selectFrameworks": "Select Frameworks", | ||
| "selectModelType": "Select model type", | ||
| "selectProjects": "Select Projects", | ||
| "sortAZ": "A-Z", | ||
| "sortBy": "Sort by", | ||
| "sortingType": "Sorting Type", | ||
| "errorFileTooLarge": "File exceeds the maximum allowed size limit", | ||
| "errorFormatNotAllowed": "Only SafeTensor format is allowed", | ||
| "errorUnsafePickleScan": "CivitAI detected potentially unsafe code in this file", | ||
| "errorUnsafeVirusScan": "CivitAI detected malware or suspicious content in this file", | ||
| "errorModelTypeNotSupported": "This model type is not supported", | ||
| "errorUnknown": "An unexpected error occurred", | ||
| "errorUploadFailed": "Failed to import asset. Please try again.", | ||
| "sortPopular": "Popular", | ||
| "sortRecent": "Recent", | ||
| "sortZA": "Z-A", | ||
| "tags": "Tags", | ||
| "tagsHelp": "Separate tags with commas", | ||
| "tagsPlaceholder": "e.g., models, checkpoint", | ||
| "tryAdjustingFilters": "Try adjusting your search or filters", | ||
| "unknown": "Unknown", | ||
| "upgradeFeatureDescription": "This feature is only available with Creator or Pro plans.", | ||
| "upgradeToUnlockFeature": "Upgrade to unlock this feature", | ||
| "upload": "Import", | ||
| "uploadFailed": "Import failed", | ||
| "uploadingModel": "Importing model...", | ||
| "uploadModel": "Import", | ||
| "uploadModelDescription1": "Paste a Civitai model download link to add it to your library.", | ||
| "uploadModelDescription2": "Only links from <a href=\"https://civitai.com\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com</a> are supported at the moment", | ||
| "uploadModelDescription3": "Max file size: <strong>1 GB</strong>", | ||
| "uploadModelFailedToRetrieveMetadata": "Failed to retrieve metadata. Please check the link and try again.", | ||
| "uploadModelFromCivitai": "Import a model from Civitai", | ||
| "uploadModelHelpVideo": "Upload Model Help Video", | ||
| "uploadModelHowDoIFindThis": "How do I find this?", | ||
| "uploadSuccess": "Model imported successfully!", | ||
| "ariaLabel": { |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
assetBrowser i18n additions look consistent; ensure HTML strings are sanitized on render
The new assetBrowser keys (sorting/filtering, upload/import, Civitai link helpers, jobId, etc.) are well-namespaced and match existing naming patterns, and assetBrowser.jobId cleanly supports the updated Assets sidebar UI.
One caution: civitaiLinkExample embeds HTML (including an <a> tag). Wherever this key is rendered, make sure it's passed through your existing DOMPurify-based HTML sanitization helper rather than bound directly with raw v-html, to stay aligned with the XSS protection guidelines.
🤖 Prompt for AI Agents
In src/locales/en/main.json around lines 2085-2151 the civitaiLinkExample value
contains inline HTML; locate all places this key is rendered in the UI and
replace any direct raw HTML binding (e.g., v-html or innerHTML) with the
project's HTML-sanitization helper that uses DOMPurify (or wrap the string
through DOMPurify.sanitize) before injecting into the DOM; ensure the sanitizer
is configured to allow the minimal tags/attributes needed (anchor, strong,
class, target) and add/update a quick test or assertion that the rendered output
comes from the sanitized string rather than raw user input.
DrJKL
force-pushed
the
drjkl/assets-classes
branch
from
cdd33c1 to
5705103
Compare
DrJKL
requested review from
christian-byrne,
ltdrdata and
viva-jinyi
as code owners
## Summary Unify the current sidebar tabs, structurally and aesthetically. ## Changes - Removes the Assets only Layout - Standardizes the title styling and spacing across the tabs. ## Review Focus <!-- Critical design decisions or edge cases that need attention --> <!-- If this PR fixes an issue, uncomment and update the line below --> <!-- Fixes #ISSUE_NUMBER --> ## Screenshots (if applicable) <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7215-WIP-Sidebar-Tabs-component-and-style-alignment-2c26d73d3650817193bfd752e0d0bbde) by [Unito](https://www.unito.io)
Summary
Unify the current sidebar tabs, structurally and aesthetically.
Changes
Review Focus
Screenshots (if applicable)
┆Issue is synchronized with this Notion page by Unito