Closed
Conversation
dosubot
bot
added
the
size:XXL
robinjhuang
added
preview
and removed
size:XXL
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 02/04/2026, 01:45:29 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Tests: ❌ FailedResults: 458 passed, 23 failed, 2 flaky, 8 skipped (Total: 491) ❌ Failed Tests📊 Browser Reports
|
Contributor
📝 WalkthroughWalkthroughThis pull request introduces a comprehensive Discover feature enabling users to search, browse, and share workflow templates. It adds new components for template discovery, workflow preview and detail views, author profiles, and sharing/publishing dialogs, along with supporting stores, utilities, routing, and internationalization. Changes
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
coderabbitai
bot
requested review from
KarryCharon,
PabloWiedemann,
Yorha4D and
shinshin86
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 22.9 kB (baseline 22.5 kB) • 🔴 +394 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 824 kB (baseline 838 kB) • 🟢 -13.3 kBGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 106 kB (baseline 69 kB) • 🔴 +37.5 kBTop-level views, pages, and routed surfaces
Status: 13 added / 11 removed Panels & Settings — 410 kB (baseline 410 kB) • 🔴 +9 BConfiguration panels, inspectors, and settings screens
Status: 13 added / 13 removed User & Accounts — 16 kB (baseline 16 kB) • 🔴 +4 BAuthentication, profile, and account management bundles
Status: 7 added / 7 removed Editors & Dialogs — 3.47 kB (baseline 3.47 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 2 added / 2 removed UI Components — 41.5 kB (baseline 37.8 kB) • 🔴 +3.73 kBReusable component library chunks
Status: 11 added / 10 removed Data & Services — 2.16 MB (baseline 2.1 MB) • 🔴 +65.8 kBStores, services, APIs, and repositories
Status: 13 added / 13 removed Utilities & Hooks — 234 kB (baseline 234 kB) • 🔴 +1 BHelpers, composables, and utility bundles
Status: 15 added / 15 removed Vendor & Third-Party — 9.37 MB (baseline 9.37 MB) • 🔴 +22 BExternal libraries and shared vendor chunks
Status: 6 added / 6 removed Other — 7.07 MB (baseline 7.08 MB) • 🟢 -7.87 kBBundles that do not match a named category
Status: 85 added / 86 removed |
dosubot
bot
added
the
size:XXL
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 26
🤖 Fix all issues with AI agents
In `@src/components/actionbar/PublishToHubDialogContent.vue`:
- Around line 12-18: Replace the raw icon-only <button> here with the repo's
shared icon button component (src/components/button/IconButton.vue), wiring its
click handler to onCancel and passing a clear accessible name via the component
prop (e.g., label or ariaLabel) instead of an inline aria-label; do the same for
the other occurrences mentioned (lines 96-101, 123-140) to use
IconButton/TextButton/IconTextButton as appropriate, keeping visible text
buttons as plain text (no aria-label), and for any toggle controls ensure the
component exposes the appropriate role and checked/pressed state
(aria-checked/aria-pressed or role="switch") so assistive tech can read the
state.
- Around line 200-206: The thumbnail preview currently creates object URLs
without revoking them; update handleThumbnailChange to call URL.revokeObjectURL
on the existing thumbnailPreview.value (if set) before assigning a new URL, and
ensure you revoke the current URL in a component cleanup hook (onUnmounted or
onBeforeUnmount) to avoid memory leaks; modify references to thumbnailFile and
thumbnailPreview accordingly and add the revoke logic and cleanup using
URL.revokeObjectURL(thumbnailPreview.value).
In `@src/components/actionbar/ShareButton.vue`:
- Around line 2-11: The Button element (the component with props variant, size,
class, :aria-pressed and `@click`="handleClick") has redundant :aria-label="{{
$t('discover.share.share') }}" while also rendering visible text {{
$t('discover.share.share') }}; remove the :aria-label attribute so the visible
text becomes the accessible name, keep :aria-pressed="isOpen" and the click
handler handleClick unchanged, and ensure no other accessibility attributes are
added that duplicate the visible label.
In `@src/components/actionbar/SharePanel.vue`:
- Around line 158-188: The copy buttons call copyToClipboard with
shareUrl/appModeShareUrl even when no workflow is active; prevent copying and
provide feedback by disabling those Button components (the ones invoking
copyToClipboard) when the workflow is absent and show a localized message or
toast/tooltip; update the Button props for the two places using copyToClipboard
(the button that uses shareUrl and the one that uses appModeShareUrl, and the
other occurrences at the ranges mentioned) to bind
:disabled="!hasActiveWorkflow" (or a similarly named computed like
hasActiveWorkflow) and, inside copyToClipboard, early-return with a call to the
existing user-notification mechanism (e.g., showToast/localize
$t('discover.share.noActiveWorkflow')) so the function also guards against
direct calls.
- Around line 158-188: Remove the redundant aria-label attributes from the
Button instances that already contain visible text (the Button wrapping the span
with {{ $t('discover.share.publicUrl.copyLink') }} and the Button wrapping {{
$t('discover.share.publicUrl.copyLinkAppMode') }}); locate the two Button
components that call copyToClipboard(shareUrl) and
copyToClipboard(appModeShareUrl) in SharePanel.vue and delete their :aria-label
bindings so the accessible name comes from the visible span text (leave other
props and the icon logic, e.g., the copied state and cn usage, unchanged).
- Around line 458-463: handleThumbnailChange currently calls URL.createObjectURL
but never revokes previous URLs; update handleThumbnailChange to store and
revoke the previous object URL (call URL.revokeObjectURL on the old
thumbnailPreview.value) before assigning a new URL, and add a component cleanup
hook (onUnmounted or onBeforeUnmount) to revoke thumbnailPreview.value when the
component unmounts; reference the handleThumbnailChange function and the
thumbnailPreview ref to implement these revocations using URL.revokeObjectURL.
- Around line 295-301: Replace the raw <button> in SharePanel.vue with the
repo's shared icon button component (e.g., IconButton from
src/components/button/IconButton.vue) so focus/hover/a11y styles are preserved;
keep the same :aria-label and `@click`="removeTag(tag)" behavior, move the <i
class="icon-[lucide--x] size-3" /> into the IconButton slot or icon prop as used
by your button component, and add the corresponding import/registration (or
ensure script setup has the component available) so SharePanel uses IconButton
instead of a plain button.
In `@src/components/discover/AuthorProfileView.vue`:
- Around line 308-313: The computed values formattedRuns and formattedCopies
treat 0 as falsy and render '--'; update their guards to check for
undefined/null explicitly (e.g., use nullish coalescing or an explicit !==
undefined check against stats?.runs and stats?.copies) so that 0 is formatted
with toLocaleString() while only undefined/null falls back to '--'; change both
computed blocks (formattedRuns and formattedCopies) accordingly.
- Around line 319-325: performSearch currently awaits search(...) without error
handling causing unhandled rejections; wrap the await call in a try/catch inside
the performSearch function, catch the error from search(query:
searchQuery.value, pageSize: 24, pageNumber: currentPage.value, facetFilters:
authorFacetFilters.value), and in the catch either set a component error state
(e.g., isSearchError / searchErrorMessage) to render an error UI or invoke the
app toast helper (e.g., $toast.error or useToast) with a localized message (use
i18n.t('errors.searchFailed') or similar) and log the original error for
diagnostics. Ensure the catch returns/clears any loading flags so the UI stays
consistent.
- Around line 197-202: Replace the dynamic Tailwind class binding on the
LazyImage with the project's cn() utility: import cn from
'@/utils/tailwindUtil', then use cn() to merge the static classes ("size-full
rounded-lg object-cover transition-transform duration-300") with the conditional
class that checks hoveredTemplate === template.objectID so the class composition
is consistent (target the existing LazyImage component and the
hoveredTemplate/template.objectID expression).
- Around line 346-351: Replace the immediate watcher on searchQuery with
VueUse's watchDebounced to debounce user input: change the watch( () =>
searchQuery.value, ... ) that resets currentPage.value and calls performSearch()
to use watchDebounced(searchQuery, handler, { debounce: 300 }) (or project
standard debounce ms) so performSearch and currentPage reset run only after the
debounce interval; reference the searchQuery ref, currentPage ref, and
performSearch() function and import watchDebounced from '@vueuse/core' if not
already imported.
In `@src/components/discover/DiscoverView.vue`:
- Around line 124-132: The no-results block currently uses the combined
condition `!cloudOnly || (results && results.templates.length === 0)`, which
causes the empty-state to render whenever the cloudOnly filter is disabled;
change the condition to only check for an empty result set (e.g., `(results &&
results.templates.length === 0)`), removing the `!cloudOnly` part so the grid
can render when results exist; update the template in DiscoverView.vue where
`cloudOnly` and `results.templates` are referenced to ensure the no-results
state only depends on an empty `results.templates`.
- Around line 153-158: The conditional class binding on the LazyImage component
uses the boolean && pattern; update it to use the project's cn() helper instead
for consistency: in the LazyImage element that references
:src="template.thumbnail_url", :alt="template.title" and the reactive
hoveredTemplate/template.objectID comparison, replace ":class='hoveredTemplate
=== template.objectID && \"scale-105\"'" with a call to cn(...) that always
includes the base classes ("size-full rounded-lg object-cover
transition-transform duration-300") and conditionally adds "scale-105" when
hoveredTemplate === template.objectID.
In `@src/components/discover/WorkflowDetailView.vue`:
- Around line 230-241: Replace the misleading placeholder defaults and
hard-coded suffix formatting: change runCount, viewCount, and copyCount to
default to 0 instead of 1_234/5_678/890, and replace the formatCount function
with a locale-aware compact formatter using Intl.NumberFormat with notation:
'compact' and the app's active locale (or navigator.language) so counts are
formatted per user locale rather than appending hard-coded "K"/"M"; update
references to formatCount, runCount, viewCount, copyCount and ensure the
formatter is reused (e.g., create it once outside the function or inside a
computed using the active locale) to avoid repeated construction.
- Around line 253-288: Several top-level helpers are defined as const arrow
functions (handleAuthorClick, setLinearModeInWorkflowData, loadWorkflowFromUrl)
but should be written as function declarations to match the codebase style;
convert each const arrow to a named function declaration (e.g., function
handleAuthorClick() { ... }, function setLinearModeInWorkflowData(workflowData)
{ ... }, function loadWorkflowFromUrl(options) { ... }), preserving the exact
parameter names, return behavior, and internal logic (including the
WorkflowPayload typing and emits) so callers and types remain unchanged.
- Around line 297-305: Add a new i18n key "discover.detail.fetchWorkflowFailed"
in src/locales/en/main.json (e.g. "Failed to load workflow (HTTP {status})"),
replace the hardcoded throw new Error(`Failed to fetch workflow:
${response.status}`) in the fetch block that calls fetch(workflow.workflow_url)
with an error that carries the status or set a variable to use in the catch, and
update the catch block that currently uses the makeCopyFailed key to instead
show the discover.detail.fetchWorkflowFailed message (injecting the HTTP status
or message via i18n interpolation). Ensure the code paths around
setLinearModeInWorkflowData and where the toast is shown use the new
discover.detail.fetchWorkflowFailed key instead of makeCopyFailed.
In `@src/components/discover/WorkflowPreviewCanvas.vue`:
- Around line 14-21: The template in WorkflowPreviewCanvas.vue is exposing raw
error.message to users; replace the raw error output with a localized,
user-friendly message using vue-i18n (e.g., use
$t('discover.detail.previewErrorDetails' or similar) instead of {{ error.message
}}), and move the technical detail to a non-UI log path (e.g.,
console.error(error) or emit a telemetry/log event from the component like
emit('logError', error)) so only localized strings appear in the template and
full error details are recorded separately.
- Around line 129-165: The loadWorkflow function must guard against stale
fetches and untrusted URLs: validate workflowUrl against your
whitelist/allowed-pattern before starting, then create an AbortController and a
monotonically-incremented requestId (stored outside the function) for each
fetch; store the controller and requestId as currentController/currentRequestId,
call currentController.abort() before a new fetch, pass controller.signal to
fetch, and after receiving the JSON check that the requestId matches
currentRequestId before calling graph.value.configure(data), updateCanvasSize()
and fitGraphToCanvas(); ensure fetch errors, AbortError, and invalid URLs set
error.value appropriately and that isLoading.value is cleared in finally.
In `@src/components/LiteGraphCanvasSplitterOverlay.vue`:
- Line 5: The visibility logic for the workflow-tabs is inconsistent; update the
v-if (or the computed property shouldShowWorkflowTabs) so the tab slot is only
shown when no full-page overlay is active by simplifying it to use
!isFullPageOverlayActive.value; locate the shouldShowWorkflowTabs implementation
(around the existing lines 182–184) or the <slot v-if="shouldShowWorkflowTabs"
name="workflow-tabs" /> usage and replace the condition with
!isFullPageOverlayActive.value (or make shouldShowWorkflowTabs return that) so
the home panel and any other full-page overlays hide the tabs.
In `@src/composables/discover/useWorkflowTemplateSearch.ts`:
- Around line 11-12: Replace the hardcoded ALGOLIA_APP_ID and ALGOLIA_SEARCH_KEY
constants with the Vite-injected globals used elsewhere: reference
__ALGOLIA_APP_ID__ and __ALGOLIA_API_KEY__ instead of literal strings so
credentials come from process.env via vite config; update occurrences of
ALGOLIA_APP_ID and ALGOLIA_SEARCH_KEY in useWorkflowTemplateSearch.ts to read
from those globals (consistent with algoliaSearchProvider.ts) and ensure names
match the Vite defines (__ALGOLIA_APP_ID__, __ALGOLIA_API_KEY__).
- Around line 1-2: The current imports use non-exported CDN/browser build paths
and will break bundling; replace them with the package entrypoints that export
the lite client and types — e.g., import the SearchResponse type from the
package and import liteClient from the library's lite entrypoint (replace the
existing imports referencing algoliasearch/dist/... with imports from
'algoliasearch' and 'algoliasearch/lite' so the symbols SearchResponse and
liteClient (used as algoliasearch in this file) resolve correctly).
In `@src/locales/en/main.json`:
- Around line 31-39: The locale entry author.rankValue is hardcoded to "31";
change it to a placeholder like "{rank}" (e.g., set author.rankValue to
"{rank}") and update the UI rendering code that reads discover.author.rankValue
to pass the actual numeric rank from the profile data (ensure the component or
template that renders author.rankValue injects the rank value into the
placeholder). Make sure the placeholder token matches the interpolation system
used by the app so the real rank displays for each author.
In `@src/stores/workspace/homePanelStore.ts`:
- Around line 7-17: The three store action arrow functions openPanel,
closePanel, and togglePanel should be converted to function declarations to
follow the repo convention for pure functions; replace "const openPanel = () =>
{ isOpen.value = true }", "const closePanel = () => { isOpen.value = false }"
and "const togglePanel = () => { isOpen.value = !isOpen.value }" with "function
openPanel() { ... }", "function closePanel() { ... }" and "function
togglePanel() { ... }" respectively, keeping the same bodies and exports so
callers and reactivity (isOpen.value) remain unchanged.
In `@src/utils/authorProfileUtil.ts`:
- Around line 22-36: Replace the custom helpers slugify, authorNameToSlug and
titleize with the corresponding es-toolkit utilities (confirm exact names in
es-toolkit) so slugs preserve word boundaries and repository conventions;
convert these arrow-assigned constants to pure function declarations (e.g.,
function slugify(...) { ... }) and update authorNameToSlug to call the
es-toolkit slug helper and then lookup KNOWN_AUTHORS[slug].slug fallback,
ensuring titleize uses the es-toolkit title/case helper instead of the local
regex-based implementation.
In `@src/views/AuthorProfileView.vue`:
- Around line 53-59: The two stub handlers handleRunWorkflow and handleMakeCopy
currently do nothing; implement handleRunWorkflow(workflow:
AlgoliaWorkflowTemplate) to call the existing workflow execution flow (e.g.,
invoke the API/store action that runs a workflow, passing workflow.id or the
workflow object), set/loading state, handle success/failure notifications and
refresh any relevant data or UI (close modals or navigate as needed); implement
handleMakeCopy(workflow: AlgoliaWorkflowTemplate) to create a duplicate of the
given workflow (clone fields, adjust name like "Copy of <name>" or append "
(copy)"), call the create-workflow API/store action, update the workflows list
or refetch, and show success/error feedback. Ensure both functions use proper
try/catch, update local reactive state, and reference AlgoliaWorkflowTemplate
fields (id, name, etc.) when performing API/store calls and notifications.
- Around line 40-51: Convert the three function expressions
handleAuthorWorkflowSelect, handleBack, and handleAuthorSelected into named
function declarations; keep their current parameter types and bodies intact
(preserve selectedWorkflow.value assignment, the void router.push calls, and the
authorNameToSlug usage), and ensure they remain exported/visible in the
component scope where they are used so existing references continue to work.
Comment on lines
+12
to
+18
| <button | ||
| class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground" | ||
| :aria-label="$t('g.close')" | ||
| @click="onCancel" | ||
| > | ||
| <i class="icon-[lucide--x] size-4" /> | ||
| </button> |
Contributor
There was a problem hiding this comment.
Replace icon-only <button>s with shared button components and add accessible labels.
Use the repo’s common button components for consistency, and ensure icon-only controls have an accessible name (and the toggle exposes role/checked state).
Based on learnings: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML elements; In the ComfyUI_frontend repository, do not add aria-label to buttons that have visible text content—use aria-label only for elements without visible labels.
Also applies to: 96-101, 123-140
🤖 Prompt for AI Agents
In `@src/components/actionbar/PublishToHubDialogContent.vue` around lines 12 - 18,
Replace the raw icon-only <button> here with the repo's shared icon button
component (src/components/button/IconButton.vue), wiring its click handler to
onCancel and passing a clear accessible name via the component prop (e.g., label
or ariaLabel) instead of an inline aria-label; do the same for the other
occurrences mentioned (lines 96-101, 123-140) to use
IconButton/TextButton/IconTextButton as appropriate, keeping visible text
buttons as plain text (no aria-label), and for any toggle controls ensure the
component exposes the appropriate role and checked/pressed state
(aria-checked/aria-pressed or role="switch") so assistive tech can read the
state.
Comment on lines
+200
to
+206
| function handleThumbnailChange(event: Event) { | ||
| const input = event.target as HTMLInputElement | ||
| const file = input.files?.[0] | ||
| if (file) { | ||
| thumbnailFile.value = file | ||
| thumbnailPreview.value = URL.createObjectURL(file) | ||
| } |
Contributor
There was a problem hiding this comment.
Revoke thumbnail object URLs to prevent leaks.
Each new preview URL should revoke the prior one, and cleanup should run on unmount.
🛠️ Suggested fix
-import { computed, ref } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
@@
function handleThumbnailChange(event: Event) {
const input = event.target as HTMLInputElement
const file = input.files?.[0]
if (file) {
+ if (thumbnailPreview.value) {
+ URL.revokeObjectURL(thumbnailPreview.value)
+ }
thumbnailFile.value = file
thumbnailPreview.value = URL.createObjectURL(file)
}
}
+
+onBeforeUnmount(() => {
+ if (thumbnailPreview.value) {
+ URL.revokeObjectURL(thumbnailPreview.value)
+ }
+})🤖 Prompt for AI Agents
In `@src/components/actionbar/PublishToHubDialogContent.vue` around lines 200 -
206, The thumbnail preview currently creates object URLs without revoking them;
update handleThumbnailChange to call URL.revokeObjectURL on the existing
thumbnailPreview.value (if set) before assigning a new URL, and ensure you
revoke the current URL in a component cleanup hook (onUnmounted or
onBeforeUnmount) to avoid memory leaks; modify references to thumbnailFile and
thumbnailPreview accordingly and add the revoke logic and cleanup using
URL.revokeObjectURL(thumbnailPreview.value).
Comment on lines
+2
to
+11
| <Button | ||
| :variant="isOpen ? 'primary' : 'secondary'" | ||
| size="md" | ||
| class="px-3 text-sm font-semibold" | ||
| :aria-label="$t('discover.share.share')" | ||
| :aria-pressed="isOpen" | ||
| @click="handleClick" | ||
| > | ||
| {{ $t('discover.share.share') }} | ||
| </Button> |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Remove redundant aria-label from button with visible text.
The button already has visible text content ({{ $t('discover.share.share') }}), which provides the accessible name. Adding aria-label is redundant and could cause screen readers to announce the label twice.
♻️ Proposed fix
<Button
:variant="isOpen ? 'primary' : 'secondary'"
size="md"
class="px-3 text-sm font-semibold"
- :aria-label="$t('discover.share.share')"
:aria-pressed="isOpen"
`@click`="handleClick"
>Based on learnings: "In the ComfyUI_frontend repository, for Vue components, do not add aria-label to buttons that have visible text content."
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <Button | |
| :variant="isOpen ? 'primary' : 'secondary'" | |
| size="md" | |
| class="px-3 text-sm font-semibold" | |
| :aria-label="$t('discover.share.share')" | |
| :aria-pressed="isOpen" | |
| @click="handleClick" | |
| > | |
| {{ $t('discover.share.share') }} | |
| </Button> | |
| <Button | |
| :variant="isOpen ? 'primary' : 'secondary'" | |
| size="md" | |
| class="px-3 text-sm font-semibold" | |
| :aria-pressed="isOpen" | |
| `@click`="handleClick" | |
| > | |
| {{ $t('discover.share.share') }} | |
| </Button> |
🤖 Prompt for AI Agents
In `@src/components/actionbar/ShareButton.vue` around lines 2 - 11, The Button
element (the component with props variant, size, class, :aria-pressed and
`@click`="handleClick") has redundant :aria-label="{{ $t('discover.share.share')
}}" while also rendering visible text {{ $t('discover.share.share') }}; remove
the :aria-label attribute so the visible text becomes the accessible name, keep
:aria-pressed="isOpen" and the click handler handleClick unchanged, and ensure
no other accessibility attributes are added that duplicate the visible label.
Comment on lines
+158
to
+188
| <Button | ||
| variant="secondary" | ||
| size="md" | ||
| class="w-full justify-between rounded-lg border border-border-default bg-secondary-background/90 px-4 py-3 text-sm font-semibold shadow-sm transition-colors hover:bg-secondary-background-hover" | ||
| :aria-label="$t('discover.share.publicUrl.copyLink')" | ||
| @click="copyToClipboard(shareUrl)" | ||
| > | ||
| <span class="min-w-0 truncate"> | ||
| {{ $t('discover.share.publicUrl.copyLink') }} | ||
| </span> | ||
| <i | ||
| :class=" | ||
| cn( | ||
| 'size-3.5', | ||
| copied ? 'icon-[lucide--check]' : 'icon-[lucide--copy]' | ||
| ) | ||
| " | ||
| /> | ||
| </Button> | ||
| <Button | ||
| variant="secondary" | ||
| size="md" | ||
| class="w-full justify-between rounded-lg border border-border-default bg-secondary-background/90 px-4 py-3 text-sm font-semibold shadow-sm transition-colors hover:bg-secondary-background-hover" | ||
| :aria-label="$t('discover.share.publicUrl.copyLinkAppMode')" | ||
| @click="copyToClipboard(appModeShareUrl)" | ||
| > | ||
| <span class="min-w-0 truncate"> | ||
| {{ $t('discover.share.publicUrl.copyLinkAppMode') }} | ||
| </span> | ||
| <i class="icon-[lucide--copy] size-3.5" /> | ||
| </Button> |
Contributor
There was a problem hiding this comment.
Guard copy actions when no active workflow is available.
Right now shareUrl/appModeShareUrl fall back to the site origin, so users can copy a non-workflow link with no feedback. Consider disabling the buttons and showing a localized message when there’s no active workflow.
✅ Example guard + user feedback
+const hasActiveWorkflow = computed(() => !!workflowStore.activeWorkflow)
@@
- <Button
+ <Button
variant="secondary"
size="md"
+ :disabled="!hasActiveWorkflow"
class="w-full justify-between rounded-lg border border-border-default bg-secondary-background/90 px-4 py-3 text-sm font-semibold shadow-sm transition-colors hover:bg-secondary-background-hover"
- :aria-label="$t('discover.share.publicUrl.copyLink')"
`@click`="copyToClipboard(shareUrl)"
>
@@
- <Button
+ <Button
variant="secondary"
size="md"
+ :disabled="!hasActiveWorkflow"
class="w-full justify-between rounded-lg border border-border-default bg-secondary-background/90 px-4 py-3 text-sm font-semibold shadow-sm transition-colors hover:bg-secondary-background-hover"
- :aria-label="$t('discover.share.publicUrl.copyLinkAppMode')"
`@click`="copyToClipboard(appModeShareUrl)"
>
@@
async function copyToClipboard(url: string) {
+ if (!hasActiveWorkflow.value) {
+ toastStore.addAlert(t('discover.share.noActiveWorkflow'))
+ return
+ }
try {
await navigator.clipboard.writeText(url)As per coding guidelines: Provide user-friendly and actionable error messages.
Also applies to: 380-395, 437-451
🤖 Prompt for AI Agents
In `@src/components/actionbar/SharePanel.vue` around lines 158 - 188, The copy
buttons call copyToClipboard with shareUrl/appModeShareUrl even when no workflow
is active; prevent copying and provide feedback by disabling those Button
components (the ones invoking copyToClipboard) when the workflow is absent and
show a localized message or toast/tooltip; update the Button props for the two
places using copyToClipboard (the button that uses shareUrl and the one that
uses appModeShareUrl, and the other occurrences at the ranges mentioned) to bind
:disabled="!hasActiveWorkflow" (or a similarly named computed like
hasActiveWorkflow) and, inside copyToClipboard, early-return with a call to the
existing user-notification mechanism (e.g., showToast/localize
$t('discover.share.noActiveWorkflow')) so the function also guards against
direct calls.
Remove aria-label on buttons that already have visible text.
These buttons already include visible labels; the extra aria-label is redundant and can override the accessible name in some ATs.
🧹 Remove redundant aria-labels
- :aria-label="$t('discover.share.publicUrl.copyLink')"
@@
- :aria-label="$t('discover.share.publicUrl.copyLinkAppMode')"Based on learnings: In the ComfyUI_frontend repository, for Vue components, do not add aria-label to buttons that have visible text content (e.g., buttons containing text).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <Button | |
| variant="secondary" | |
| size="md" | |
| class="w-full justify-between rounded-lg border border-border-default bg-secondary-background/90 px-4 py-3 text-sm font-semibold shadow-sm transition-colors hover:bg-secondary-background-hover" | |
| :aria-label="$t('discover.share.publicUrl.copyLink')" | |
| @click="copyToClipboard(shareUrl)" | |
| > | |
| <span class="min-w-0 truncate"> | |
| {{ $t('discover.share.publicUrl.copyLink') }} | |
| </span> | |
| <i | |
| :class=" | |
| cn( | |
| 'size-3.5', | |
| copied ? 'icon-[lucide--check]' : 'icon-[lucide--copy]' | |
| ) | |
| " | |
| /> | |
| </Button> | |
| <Button | |
| variant="secondary" | |
| size="md" | |
| class="w-full justify-between rounded-lg border border-border-default bg-secondary-background/90 px-4 py-3 text-sm font-semibold shadow-sm transition-colors hover:bg-secondary-background-hover" | |
| :aria-label="$t('discover.share.publicUrl.copyLinkAppMode')" | |
| @click="copyToClipboard(appModeShareUrl)" | |
| > | |
| <span class="min-w-0 truncate"> | |
| {{ $t('discover.share.publicUrl.copyLinkAppMode') }} | |
| </span> | |
| <i class="icon-[lucide--copy] size-3.5" /> | |
| </Button> | |
| <Button | |
| variant="secondary" | |
| size="md" | |
| class="w-full justify-between rounded-lg border border-border-default bg-secondary-background/90 px-4 py-3 text-sm font-semibold shadow-sm transition-colors hover:bg-secondary-background-hover" | |
| `@click`="copyToClipboard(shareUrl)" | |
| > | |
| <span class="min-w-0 truncate"> | |
| {{ $t('discover.share.publicUrl.copyLink') }} | |
| </span> | |
| <i | |
| :class=" | |
| cn( | |
| 'size-3.5', | |
| copied ? 'icon-[lucide--check]' : 'icon-[lucide--copy]' | |
| ) | |
| " | |
| /> | |
| </Button> | |
| <Button | |
| variant="secondary" | |
| size="md" | |
| class="w-full justify-between rounded-lg border border-border-default bg-secondary-background/90 px-4 py-3 text-sm font-semibold shadow-sm transition-colors hover:bg-secondary-background-hover" | |
| `@click`="copyToClipboard(appModeShareUrl)" | |
| > | |
| <span class="min-w-0 truncate"> | |
| {{ $t('discover.share.publicUrl.copyLinkAppMode') }} | |
| </span> | |
| <i class="icon-[lucide--copy] size-3.5" /> | |
| </Button> |
🤖 Prompt for AI Agents
In `@src/components/actionbar/SharePanel.vue` around lines 158 - 188, Remove the
redundant aria-label attributes from the Button instances that already contain
visible text (the Button wrapping the span with {{
$t('discover.share.publicUrl.copyLink') }} and the Button wrapping {{
$t('discover.share.publicUrl.copyLinkAppMode') }}); locate the two Button
components that call copyToClipboard(shareUrl) and
copyToClipboard(appModeShareUrl) in SharePanel.vue and delete their :aria-label
bindings so the accessible name comes from the visible span text (leave other
props and the icon logic, e.g., the copied state and cn usage, unchanged).
Comment on lines
+295
to
+301
| <button | ||
| class="cursor-pointer border-none bg-transparent p-0 text-muted-foreground hover:text-base-foreground" | ||
| :aria-label="$t('g.removeTag')" | ||
| @click="removeTag(tag)" | ||
| > | ||
| <i class="icon-[lucide--x] size-3" /> | ||
| </button> |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Use the shared Button component for tag removal.
A raw <button> here bypasses the project’s standard focus/hover styling and a11y defaults. Reuse the existing Button component for consistency.
🔁 Suggested replacement using existing Button
- <button
- class="cursor-pointer border-none bg-transparent p-0 text-muted-foreground hover:text-base-foreground"
- :aria-label="$t('g.removeTag')"
- `@click`="removeTag(tag)"
- >
- <i class="icon-[lucide--x] size-3" />
- </button>
+ <Button
+ variant="muted-textonly"
+ size="icon-sm"
+ class="text-muted-foreground hover:text-base-foreground"
+ :aria-label="$t('g.removeTag')"
+ `@click`="removeTag(tag)"
+ >
+ <i class="icon-[lucide--x] size-3" />
+ </Button>Based on learnings: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML elements.
🤖 Prompt for AI Agents
In `@src/components/actionbar/SharePanel.vue` around lines 295 - 301, Replace the
raw <button> in SharePanel.vue with the repo's shared icon button component
(e.g., IconButton from src/components/button/IconButton.vue) so focus/hover/a11y
styles are preserved; keep the same :aria-label and `@click`="removeTag(tag)"
behavior, move the <i class="icon-[lucide--x] size-3" /> into the IconButton
slot or icon prop as used by your button component, and add the corresponding
import/registration (or ensure script setup has the component available) so
SharePanel uses IconButton instead of a plain button.
Comment on lines
+31
to
+39
| "author": { | ||
| "title": "Creator", | ||
| "searchPlaceholder": "Search this creator's workflows", | ||
| "workflowsCount": "{count} workflow | {count} workflows", | ||
| "runsLabel": "runs", | ||
| "copiesLabel": "copies", | ||
| "rankLabel": "rank", | ||
| "rankValue": "31", | ||
| "rankCaption": "Last 30 days", |
Contributor
There was a problem hiding this comment.
Make author rank value dynamic rather than hardcoded.
discover.author.rankValue is set to a fixed "31", which will display the same rank for every author. Consider using a placeholder (e.g., {rank}) and pass the actual value from the profile data.
💡 Suggested locale change
- "rankValue": "31",
+ "rankValue": "{rank}",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "author": { | |
| "title": "Creator", | |
| "searchPlaceholder": "Search this creator's workflows", | |
| "workflowsCount": "{count} workflow | {count} workflows", | |
| "runsLabel": "runs", | |
| "copiesLabel": "copies", | |
| "rankLabel": "rank", | |
| "rankValue": "31", | |
| "rankCaption": "Last 30 days", | |
| "author": { | |
| "title": "Creator", | |
| "searchPlaceholder": "Search this creator's workflows", | |
| "workflowsCount": "{count} workflow | {count} workflows", | |
| "runsLabel": "runs", | |
| "copiesLabel": "copies", | |
| "rankLabel": "rank", | |
| "rankValue": "{rank}", | |
| "rankCaption": "Last 30 days", |
🤖 Prompt for AI Agents
In `@src/locales/en/main.json` around lines 31 - 39, The locale entry
author.rankValue is hardcoded to "31"; change it to a placeholder like "{rank}"
(e.g., set author.rankValue to "{rank}") and update the UI rendering code that
reads discover.author.rankValue to pass the actual numeric rank from the profile
data (ensure the component or template that renders author.rankValue injects the
rank value into the placeholder). Make sure the placeholder token matches the
interpolation system used by the app so the real rank displays for each author.
Comment on lines
+7
to
+17
| const openPanel = () => { | ||
| isOpen.value = true | ||
| } | ||
|
|
||
| const closePanel = () => { | ||
| isOpen.value = false | ||
| } | ||
|
|
||
| const togglePanel = () => { | ||
| isOpen.value = !isOpen.value | ||
| } |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Prefer function declarations for store actions.
Switch the action definitions to function declarations to match the repo’s TS convention for pure functions.
♻️ Suggested refactor
- const openPanel = () => {
- isOpen.value = true
- }
+ function openPanel() {
+ isOpen.value = true
+ }
- const closePanel = () => {
- isOpen.value = false
- }
+ function closePanel() {
+ isOpen.value = false
+ }
- const togglePanel = () => {
- isOpen.value = !isOpen.value
- }
+ function togglePanel() {
+ isOpen.value = !isOpen.value
+ }Based on learnings: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const openPanel = () => { | |
| isOpen.value = true | |
| } | |
| const closePanel = () => { | |
| isOpen.value = false | |
| } | |
| const togglePanel = () => { | |
| isOpen.value = !isOpen.value | |
| } | |
| function openPanel() { | |
| isOpen.value = true | |
| } | |
| function closePanel() { | |
| isOpen.value = false | |
| } | |
| function togglePanel() { | |
| isOpen.value = !isOpen.value | |
| } |
🤖 Prompt for AI Agents
In `@src/stores/workspace/homePanelStore.ts` around lines 7 - 17, The three store
action arrow functions openPanel, closePanel, and togglePanel should be
converted to function declarations to follow the repo convention for pure
functions; replace "const openPanel = () => { isOpen.value = true }", "const
closePanel = () => { isOpen.value = false }" and "const togglePanel = () => {
isOpen.value = !isOpen.value }" with "function openPanel() { ... }", "function
closePanel() { ... }" and "function togglePanel() { ... }" respectively, keeping
the same bodies and exports so callers and reactivity (isOpen.value) remain
unchanged.
Comment on lines
+22
to
+36
| const slugify = (value: string) => | ||
| value | ||
| .toLowerCase() | ||
| .replaceAll(/[^a-z0-9]+/g, '') | ||
| .trim() | ||
|
|
||
| export const authorNameToSlug = (name: string) => | ||
| KNOWN_AUTHORS[slugify(name)]?.slug ?? slugify(name) | ||
|
|
||
| const titleize = (value: string) => | ||
| value | ||
| .replaceAll(/[-_]+/g, ' ') | ||
| .replaceAll(/\s+/g, ' ') | ||
| .trim() | ||
| .replaceAll(/\b\w/g, (char) => char.toUpperCase()) |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Use es-toolkit case helpers instead of custom slug/title logic.
This keeps slugs readable (word boundaries preserved) and aligns with the repo’s utility conventions. Please verify the helper names in es-toolkit and adjust accordingly.
♻️ Suggested refactor
+import { kebabCase, startCase } from 'es-toolkit'
-const slugify = (value: string) =>
- value
- .toLowerCase()
- .replaceAll(/[^a-z0-9]+/g, '')
- .trim()
+function slugify(value: string) {
+ return kebabCase(value)
+}
-const titleize = (value: string) =>
- value
- .replaceAll(/[-_]+/g, ' ')
- .replaceAll(/\s+/g, ' ')
- .trim()
- .replaceAll(/\b\w/g, (char) => char.toUpperCase())
+function titleize(value: string) {
+ return startCase(value)
+}Based on learnings and coding guidelines: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository; Use es-toolkit for utility functions.
🤖 Prompt for AI Agents
In `@src/utils/authorProfileUtil.ts` around lines 22 - 36, Replace the custom
helpers slugify, authorNameToSlug and titleize with the corresponding es-toolkit
utilities (confirm exact names in es-toolkit) so slugs preserve word boundaries
and repository conventions; convert these arrow-assigned constants to pure
function declarations (e.g., function slugify(...) { ... }) and update
authorNameToSlug to call the es-toolkit slug helper and then lookup
KNOWN_AUTHORS[slug].slug fallback, ensuring titleize uses the es-toolkit
title/case helper instead of the local regex-based implementation.
Comment on lines
+40
to
+51
| const handleAuthorWorkflowSelect = (template: AlgoliaWorkflowTemplate) => { | ||
| selectedWorkflow.value = template | ||
| } | ||
|
|
||
| const handleBack = () => { | ||
| void router.push({ name: 'GraphView' }) | ||
| } | ||
|
|
||
| const handleAuthorSelected = (author: { name: string; avatarUrl?: string }) => { | ||
| const slug = authorNameToSlug(author.name) | ||
| void router.push({ name: 'AuthorProfileView', params: { slug } }) | ||
| } |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Prefer function declarations over function expressions.
Per coding guidelines, use function declarations instead of function expressions when possible.
♻️ Proposed fix
-const handleAuthorWorkflowSelect = (template: AlgoliaWorkflowTemplate) => {
+function handleAuthorWorkflowSelect(template: AlgoliaWorkflowTemplate) {
selectedWorkflow.value = template
}
-const handleBack = () => {
+function handleBack() {
void router.push({ name: 'GraphView' })
}
-const handleAuthorSelected = (author: { name: string; avatarUrl?: string }) => {
+function handleAuthorSelected(author: { name: string; avatarUrl?: string }) {
const slug = authorNameToSlug(author.name)
void router.push({ name: 'AuthorProfileView', params: { slug } })
}As per coding guidelines: "Do not use function expressions if it's possible to use function declarations instead."
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const handleAuthorWorkflowSelect = (template: AlgoliaWorkflowTemplate) => { | |
| selectedWorkflow.value = template | |
| } | |
| const handleBack = () => { | |
| void router.push({ name: 'GraphView' }) | |
| } | |
| const handleAuthorSelected = (author: { name: string; avatarUrl?: string }) => { | |
| const slug = authorNameToSlug(author.name) | |
| void router.push({ name: 'AuthorProfileView', params: { slug } }) | |
| } | |
| function handleAuthorWorkflowSelect(template: AlgoliaWorkflowTemplate) { | |
| selectedWorkflow.value = template | |
| } | |
| function handleBack() { | |
| void router.push({ name: 'GraphView' }) | |
| } | |
| function handleAuthorSelected(author: { name: string; avatarUrl?: string }) { | |
| const slug = authorNameToSlug(author.name) | |
| void router.push({ name: 'AuthorProfileView', params: { slug } }) | |
| } |
🤖 Prompt for AI Agents
In `@src/views/AuthorProfileView.vue` around lines 40 - 51, Convert the three
function expressions handleAuthorWorkflowSelect, handleBack, and
handleAuthorSelected into named function declarations; keep their current
parameter types and bodies intact (preserve selectedWorkflow.value assignment,
the void router.push calls, and the authorNameToSlug usage), and ensure they
remain exported/visible in the component scope where they are used so existing
references continue to work.
Comment on lines
+53
to
+59
| const handleRunWorkflow = (_workflow: AlgoliaWorkflowTemplate) => { | ||
| // TODO: Implement workflow run | ||
| } | ||
|
|
||
| const handleMakeCopy = (_workflow: AlgoliaWorkflowTemplate) => { | ||
| // TODO: Implement make a copy | ||
| } |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Stub handlers need implementation.
These TODO handlers are placeholders. The underscore-prefixed parameters indicate intentionally unused variables, which is acceptable for stubs.
Would you like me to help implement these workflow actions, or should I open issues to track them?
🤖 Prompt for AI Agents
In `@src/views/AuthorProfileView.vue` around lines 53 - 59, The two stub handlers
handleRunWorkflow and handleMakeCopy currently do nothing; implement
handleRunWorkflow(workflow: AlgoliaWorkflowTemplate) to call the existing
workflow execution flow (e.g., invoke the API/store action that runs a workflow,
passing workflow.id or the workflow object), set/loading state, handle
success/failure notifications and refresh any relevant data or UI (close modals
or navigate as needed); implement handleMakeCopy(workflow:
AlgoliaWorkflowTemplate) to create a duplicate of the given workflow (clone
fields, adjust name like "Copy of <name>" or append " (copy)"), call the
create-workflow API/store action, update the workflows list or refetch, and show
success/error feedback. Ensure both functions use proper try/catch, update local
reactive state, and reference AlgoliaWorkflowTemplate fields (id, name, etc.)
when performing API/store calls and notifications.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 24
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/stores/workspace/sidebarTabStore.ts (1)
53-67:⚠️ Potential issue | 🟡 MinorAdd "discover" entry to menubarLabelKeys mapping.
The discover tab is registered but lacks a corresponding entry in
menubarLabelKeys, causing the menubar label to display the i18n key string'sideToolbar.discover'instead of the translated value. Add the missing mapping:Suggested fix
const menubarLabelKeys: Record<string, string> = { 'node-library': 'sideToolbar.nodeLibrary', 'model-library': 'sideToolbar.modelLibrary', workflows: 'sideToolbar.workflows', - assets: 'sideToolbar.assets' + assets: 'sideToolbar.assets', + discover: 'sideToolbar.discover' }
🤖 Fix all issues with AI agents
In `@src/components/actionbar/PublishToHubDialogContent.vue`:
- Around line 12-18: Replace raw <button> elements (the close button invoking
onCancel and the tag removal buttons that call the tag removal handler) with the
repo's shared Button component to keep styling and behavior consistent; import
the Button component at the top of PublishToHubDialogContent.vue, use it for the
icon-only close control by passing the aria-label="$t('g.close')" and
`@click`="onCancel" (and place the <i class="icon-[lucide--x] size-4" /> as the
button content), and similarly swap the tag removal <button> elements to Button
while forwarding the removal handler, aria-labels, and icon content so
accessibility and theming are preserved.
- Around line 200-207: The current handleThumbnailChange uses
URL.createObjectURL without revoking previous URLs; update handleThumbnailChange
to revoke any existing thumbnailPreview.value (if set) via URL.revokeObjectURL
before assigning a new URL, and also add a component cleanup (e.g.,
beforeUnmount or onBeforeUnmount) to revoke the last thumbnailPreview.value when
the component is destroyed; refer to handleThumbnailChange, thumbnailPreview and
thumbnailFile when making these changes.
In `@src/components/actionbar/ShareButton.vue`:
- Around line 2-11: The Button in ShareButton.vue is using a redundant
aria-label while also rendering visible text via {{ $t('discover.share.share')
}}; remove the :aria-label="$t('discover.share.share')" attribute from the
<Button> element so the visible content provides the accessible name, keeping
other attributes like :aria-pressed="isOpen", :variant, size, class and the
`@click`="handleClick" intact.
In `@src/components/actionbar/SharePanel.vue`:
- Around line 295-301: Replace the plain <button> used for tag removal in
SharePanel.vue with the project's Button component for consistency; locate the
element currently calling `@click`="removeTag(tag)" and using
:aria-label="$t('g.removeTag')" and swap it to use <Button> (preserving the
click handler removeTag(tag), aria-label, and visual classes/props such as icon
sizing and muted styling) so it follows the repository's Button API and visual
patterns.
- Around line 458-464: The handleThumbnailChange function creates an object URL
and assigns it to thumbnailPreview.value but never revokes previous URLs; update
handleThumbnailChange to revoke any existing object URL stored in
thumbnailPreview.value before assigning a new one, and add a lifecycle cleanup
(onUnmounted) that revokes the current thumbnailPreview.value if present;
reference the handleThumbnailChange function and thumbnailPreview reactive ref
to locate where to revoke URLs.
In `@src/components/discover/AuthorProfileView.vue`:
- Around line 308-313: The computed values formattedRuns and formattedCopies
currently treat 0 as falsy because they use truthy checks (stats?.runs ? ...),
causing zeros to render as "--"; change the checks to nullish checks so
legitimate zero values are preserved (e.g., use stats?.runs ?? null or check
stats?.runs != null) and format with toLocaleString only when the value is not
null/undefined; update both formattedRuns and formattedCopies to use the same
nullish logic referencing stats, formattedRuns, and formattedCopies.
- Around line 197-202: The conditional Tailwind class on the LazyImage should be
merged using the cn() helper instead of a separate :class binding; update the
LazyImage props to combine static and conditional classes via cn('size-full
rounded-lg object-cover transition-transform duration-300', hoveredTemplate ===
template.objectID && 'scale-105') (or the object form) and ensure cn is imported
where used; modify the component around the LazyImage tag (referencing
LazyImage, hoveredTemplate and template.objectID) to replace the existing class
+ :class pair with a single :class using cn().
In `@src/components/discover/DiscoverView.vue`:
- Around line 153-158: Replace the conditional Tailwind class array binding with
the cn() utility: import cn from '@/utils/tailwindUtil' in the DiscoverView
component, then change the LazyImage class binding to use :class="cn('size-full
rounded-lg object-cover transition-transform duration-300', hoveredTemplate ===
template.objectID && 'scale-105')" so the static classes and the conditional
'scale-105' are merged via cn() instead of using :class="[]".
- Around line 177-194: Replace the raw <button> block with the shared Button
component (Button) and set variant="muted-textonly", forwarding the existing
class string to preserve styling; keep the `@click.stop` handler calling
handleAuthorClick(template), keep the img using template.author_avatar_url
(falling back to the existing asset) and :alt bound to template.author_name, and
preserve inner span showing template.author_name—ensure props/events on Button
match the original semantics (click stopPropagation) and that the class prop
carries the original utility classes.
- Around line 124-132: The empty-state condition in DiscoverView.vue
short-circuits because of the `!cloudOnly ||` prefix; remove that prefix so the
v-else-if only checks the actual results (e.g., `results &&
results.templates.length === 0`) instead of always showing the empty state when
`cloudOnly` is false. Then update the search filter builder in
`buildFacetFilters()` to include a cloud-only facet when `cloudOnly` is true
(add the appropriate facet filter entry tied to your Algolia attribute, e.g.,
`"isCloudOnly:true"` or the correct attribute name), and verify the exact
Algolia attribute name for cloud-only templates before committing the filter
change. Ensure toggling `cloudOnly` triggers a new search with the updated
filters so the UI reflects the filter change.
- Around line 236-254: Add accessible names to the icon-only pagination buttons
by setting aria-label attributes on the Button components (the left and right
Button elements that call goToPage(currentPage - 1) and goToPage(currentPage +
1)); use the existing translation key g.next for the right button and add a new
translation key g.previous (value "Previous") in the locales JSON so the left
button can use that key for its aria-label (or alternatively use an existing key
like g.back if preferred). Ensure the aria-label binding uses the same i18n
method used elsewhere in the component so screen readers receive the localized
label.
In `@src/components/discover/WorkflowDetailView.vue`:
- Around line 253-259: Convert the arrow function expressions handleAuthorClick,
setLinearModeInWorkflowData, and loadWorkflowFromUrl into function declarations:
replace "const handleAuthorClick = () => { ... }" with "function
handleAuthorClick() { ... }" (and similarly for setLinearModeInWorkflowData and
loadWorkflowFromUrl), keep the same body and references to workflow, emit, and
any captured variables, and ensure they remain exported/accessible the same way
(remove const bindings and retain existing usage sites and event emits).
- Around line 230-232: The computed properties runCount, viewCount, and
copyCount in WorkflowDetailView.vue currently use misleading hardcoded fallbacks
(1_234, 5_678, 890); change these to safe fallbacks such as 0 (e.g.,
workflow.run_count ?? 0) or return null/undefined so the template can render a
placeholder like "—", and update any consuming template logic to display 0 or
the placeholder accordingly.
In `@src/components/discover/WorkflowPreviewCanvas.vue`:
- Around line 185-187: The LGraph instance isn't being cleared on component
unmount; update the onBeforeUnmount handler to call graph.value?.clear()
(referring to the graph ref/LGraph instance) to release node references before
stopping the canvas rendering, e.g. invoke graph.value?.clear() and then
canvas.value?.stopRendering() (and optionally null out refs) to ensure proper
cleanup.
In `@src/components/home/HomePanel.vue`:
- Around line 11-38: Replace the plain <button> elements in HomePanel.vue with
the repository's shared button components (prefer IconTextButton.vue or
TextButton.vue from src/components/button/) and bind the active state to them
using the existing activeTab reactive value; ensure clicks still set activeTab
('recents' / 'discover') and propagate class/style props to preserve the current
styling logic (cn(...) conditions). Add accessibility attributes on the shared
components: either aria-pressed="activeTab === 'recents'| 'discover'" or convert
the buttons into tab roles with role="tab" and aria-selected="activeTab ===
...", and ensure the icon slots use the same lucide icons (icon-[lucide--clock],
icon-[lucide--compass]). Update any prop names (e.g., :active or :pressed) on
IconTextButton/TextButton as required so the component exposes the active state
for styling and ARIA.
In `@src/components/topbar/WorkflowTabs.vue`:
- Around line 207-214: The toggleHomePanel function currently clears
sidebarTabStore.activeSidebarTabId and canvasStore.linearMode when opening but
never restores them on close; modify toggleHomePanel (or move logic into
homePanelStore) to cache the previous values (e.g., prevSidebarTabId and
prevLinearMode) when calling homePanelStore.openPanel(), and when detecting
homePanelStore.isOpen on toggle (i.e., when calling
homePanelStore.closePanel()), restore sidebarTabStore.activeSidebarTabId =
prevSidebarTabId and canvasStore.linearMode = prevLinearMode (or store/restore
these values inside homePanelStore.openPanel/closePanel methods) so the prior UI
state is preserved.
In `@src/composables/discover/useWorkflowTemplateSearch.ts`:
- Around line 67-68: The code blindly asserts response.results[0] into
searchResponse (typed as SearchResponse<AlgoliaWorkflowTemplate>), which will
throw if results is empty; add a defensive check for response.results and its
length before the assertion (e.g., if response.results == null ||
response.results.length === 0) and handle the empty case (return early, set
searchResponse to undefined/null, or provide a safe default) so downstream logic
that uses searchResponse won't crash.
- Around line 11-13: The code currently hardcodes Algolia credentials
(ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY, INDEX_NAME); change this to read
ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY and INDEX_NAME from environment variables
(e.g., process.env) and add a startup check to throw/abort if any are missing,
and update any usages of INDEX_NAME accordingly; additionally, restrict the
Algolia search key in the Algolia dashboard to ACL limited to the
workflow_templates index and apply rate/IP limits, and for production move to
issuing short‑lived secured API keys server‑side (use server endpoint to sign
keys) rather than embedding any key in client bundles.
In `@src/locales/en/main.json`:
- Around line 37-39: Remove the hardcoded numeric value from the translation
entry "rankValue" (it's dynamic data), replace it with a translatable
placeholder (e.g., a token such as "{{rank}}" or just remove the key and keep
"rankLabel"/"rankCaption"), and update the component that displays the author
rank to pass the runtime value into the translation or render it next to
$t('rankLabel'); if this was meant as a temporary placeholder, add a TODO
comment clarifying that "rankValue" is a stub and must be replaced by runtime
data (refer to the keys "rankValue", "rankLabel", and "rankCaption" to locate
the entries to change).
In `@src/stores/workspace/homePanelStore.ts`:
- Around line 7-17: Convert the arrow function actions to function declarations:
replace the const arrow functions openPanel, closePanel, and togglePanel with
declared functions (function openPanel() { ... }, function closePanel() { ... },
function togglePanel() { ... }) so the store follows the project convention used
in sharePanelStore.ts; ensure their bodies and references remain unchanged and
exported behavior is preserved.
In `@src/utils/authorProfileUtil.ts`:
- Around line 22-29: Convert the slugify arrow function into a named function
declaration and remove the redundant .trim() (since the regex strips
non-alphanumerics and whitespace); update usages accordingly. Specifically,
replace the const slugify = (...) => ... with function slugify(value: string) {
return value.toLowerCase().replaceAll(/[^a-z0-9]+/g, ''); } and ensure
authorNameToSlug continues to reference slugify(name) and falls back to
KNOWN_AUTHORS[slugify(name)]?.slug ?? slugify(name).
- Around line 31-45: Convert the remaining arrow functions to function
declarations: replace the const titleize = (...) => ... with a function
titleize(value: string): string { ... } and replace the exported const
authorSlugToProfile = (slug: string): AuthorProfile => { ... } with an exported
function export function authorSlugToProfile(slug: string): AuthorProfile { ...
}; preserve all existing logic (slugify call, KNOWN_AUTHORS lookup, returned
object shape) and keep types/signatures identical so behavior and exports remain
unchanged.
In `@src/views/AuthorProfileView.vue`:
- Around line 53-59: The two no-op handlers handleRunWorkflow and handleMakeCopy
must be implemented or the WorkflowDetailView actions hidden; replace the TODOs
by wiring handleRunWorkflow to the existing run workflow service (e.g., call
runWorkflowService.run(workflow) or equivalent, set local loading state, handle
success/error and show user feedback) and wire handleMakeCopy to the existing
copy service (e.g., workflowCopyService.copy(workflow) or equivalent) with
similar loading/error handling; if those services are not available yet, update
WorkflowDetailView to conditionally hide the Run/Make Copy buttons until
handleRunWorkflow and handleMakeCopy are implemented.
- Around line 40-58: Convert the arrow function handlers to named function
declarations: replace the const arrow definitions for
handleAuthorWorkflowSelect, handleBack, handleAuthorSelected, handleRunWorkflow,
and handleMakeCopy with equivalent function declarations (e.g., function
handleAuthorWorkflowSelect(template: AlgoliaWorkflowTemplate) { ... })
preserving current logic, returned values, and usage of router/selectedWorkflow;
ensure TypeScript signatures remain the same and any references to these symbols
in the component template or other code are unchanged.
Comment on lines
+12
to
+18
| <button | ||
| class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground" | ||
| :aria-label="$t('g.close')" | ||
| @click="onCancel" | ||
| > | ||
| <i class="icon-[lucide--x] size-4" /> | ||
| </button> |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider using the shared Button component for icon-only buttons.
The close button (lines 12-18) and tag removal buttons (lines 96-101) use plain <button> elements. Per repository patterns, prefer the common Button components for consistency and theming.
♻️ Example refactor for close button
- <button
- class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
- :aria-label="$t('g.close')"
- `@click`="onCancel"
- >
- <i class="icon-[lucide--x] size-4" />
- </button>
+ <Button
+ variant="muted-textonly"
+ size="icon-sm"
+ :aria-label="$t('g.close')"
+ `@click`="onCancel"
+ >
+ <i class="icon-[lucide--x] size-4" />
+ </Button>Based on learnings: "In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components."
Also applies to: 96-101
🤖 Prompt for AI Agents
In `@src/components/actionbar/PublishToHubDialogContent.vue` around lines 12 - 18,
Replace raw <button> elements (the close button invoking onCancel and the tag
removal buttons that call the tag removal handler) with the repo's shared Button
component to keep styling and behavior consistent; import the Button component
at the top of PublishToHubDialogContent.vue, use it for the icon-only close
control by passing the aria-label="$t('g.close')" and `@click`="onCancel" (and
place the <i class="icon-[lucide--x] size-4" /> as the button content), and
similarly swap the tag removal <button> elements to Button while forwarding the
removal handler, aria-labels, and icon content so accessibility and theming are
preserved.
Comment on lines
+200
to
+207
| function handleThumbnailChange(event: Event) { | ||
| const input = event.target as HTMLInputElement | ||
| const file = input.files?.[0] | ||
| if (file) { | ||
| thumbnailFile.value = file | ||
| thumbnailPreview.value = URL.createObjectURL(file) | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
Memory leak: Object URL is never revoked.
URL.createObjectURL allocates memory that persists until the document is unloaded or explicitly revoked. When the thumbnail changes or the component unmounts, the previous URL should be revoked.
🛡️ Proposed fix to revoke object URL
+import { onBeforeUnmount, computed, ref, watch } from 'vue'
-import { computed, ref } from 'vue'
const thumbnailPreview = ref('')
+onBeforeUnmount(() => {
+ if (thumbnailPreview.value) {
+ URL.revokeObjectURL(thumbnailPreview.value)
+ }
+})
function handleThumbnailChange(event: Event) {
const input = event.target as HTMLInputElement
const file = input.files?.[0]
if (file) {
thumbnailFile.value = file
+ if (thumbnailPreview.value) {
+ URL.revokeObjectURL(thumbnailPreview.value)
+ }
thumbnailPreview.value = URL.createObjectURL(file)
}
}🤖 Prompt for AI Agents
In `@src/components/actionbar/PublishToHubDialogContent.vue` around lines 200 -
207, The current handleThumbnailChange uses URL.createObjectURL without revoking
previous URLs; update handleThumbnailChange to revoke any existing
thumbnailPreview.value (if set) via URL.revokeObjectURL before assigning a new
URL, and also add a component cleanup (e.g., beforeUnmount or onBeforeUnmount)
to revoke the last thumbnailPreview.value when the component is destroyed; refer
to handleThumbnailChange, thumbnailPreview and thumbnailFile when making these
changes.
Comment on lines
+2
to
+11
| <Button | ||
| :variant="isOpen ? 'primary' : 'secondary'" | ||
| size="md" | ||
| class="px-3 text-sm font-semibold" | ||
| :aria-label="$t('discover.share.share')" | ||
| :aria-pressed="isOpen" | ||
| @click="handleClick" | ||
| > | ||
| {{ $t('discover.share.share') }} | ||
| </Button> |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Remove redundant aria-label from button with visible text.
The button already has visible text content ({{ $t('discover.share.share') }}), which provides the accessible name. The aria-label duplicates this and is unnecessary.
♻️ Proposed fix
<Button
:variant="isOpen ? 'primary' : 'secondary'"
size="md"
class="px-3 text-sm font-semibold"
- :aria-label="$t('discover.share.share')"
:aria-pressed="isOpen"
`@click`="handleClick"
>Based on learnings: "Do not add aria-label to buttons that have visible text content. The visible text provides the accessible name."
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <Button | |
| :variant="isOpen ? 'primary' : 'secondary'" | |
| size="md" | |
| class="px-3 text-sm font-semibold" | |
| :aria-label="$t('discover.share.share')" | |
| :aria-pressed="isOpen" | |
| @click="handleClick" | |
| > | |
| {{ $t('discover.share.share') }} | |
| </Button> | |
| <Button | |
| :variant="isOpen ? 'primary' : 'secondary'" | |
| size="md" | |
| class="px-3 text-sm font-semibold" | |
| :aria-pressed="isOpen" | |
| `@click`="handleClick" | |
| > | |
| {{ $t('discover.share.share') }} | |
| </Button> |
🤖 Prompt for AI Agents
In `@src/components/actionbar/ShareButton.vue` around lines 2 - 11, The Button in
ShareButton.vue is using a redundant aria-label while also rendering visible
text via {{ $t('discover.share.share') }}; remove the
:aria-label="$t('discover.share.share')" attribute from the <Button> element so
the visible content provides the accessible name, keeping other attributes like
:aria-pressed="isOpen", :variant, size, class and the `@click`="handleClick"
intact.
Comment on lines
+295
to
+301
| <button | ||
| class="cursor-pointer border-none bg-transparent p-0 text-muted-foreground hover:text-base-foreground" | ||
| :aria-label="$t('g.removeTag')" | ||
| @click="removeTag(tag)" | ||
| > | ||
| <i class="icon-[lucide--x] size-3" /> | ||
| </button> |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider using Button component for tag removal.
The tag removal button uses a plain <button> element. For consistency with the rest of the panel and repository patterns, consider using the Button component.
🤖 Prompt for AI Agents
In `@src/components/actionbar/SharePanel.vue` around lines 295 - 301, Replace the
plain <button> used for tag removal in SharePanel.vue with the project's Button
component for consistency; locate the element currently calling
`@click`="removeTag(tag)" and using :aria-label="$t('g.removeTag')" and swap it to
use <Button> (preserving the click handler removeTag(tag), aria-label, and
visual classes/props such as icon sizing and muted styling) so it follows the
repository's Button API and visual patterns.
Comment on lines
+458
to
+464
| function handleThumbnailChange(event: Event) { | ||
| const input = event.target as HTMLInputElement | ||
| const file = input.files?.[0] | ||
| if (file) { | ||
| thumbnailPreview.value = URL.createObjectURL(file) | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
Memory leak: Object URL is never revoked.
Same issue as in PublishToHubDialogContent.vue - the thumbnail preview object URL should be revoked when changed or on unmount.
🛡️ Proposed fix
+import { computed, ref, onBeforeUnmount } from 'vue'
-import { computed, ref } from 'vue'
const thumbnailPreview = ref('')
+onBeforeUnmount(() => {
+ if (thumbnailPreview.value) {
+ URL.revokeObjectURL(thumbnailPreview.value)
+ }
+})
function handleThumbnailChange(event: Event) {
const input = event.target as HTMLInputElement
const file = input.files?.[0]
if (file) {
+ if (thumbnailPreview.value) {
+ URL.revokeObjectURL(thumbnailPreview.value)
+ }
thumbnailPreview.value = URL.createObjectURL(file)
}
}🤖 Prompt for AI Agents
In `@src/components/actionbar/SharePanel.vue` around lines 458 - 464, The
handleThumbnailChange function creates an object URL and assigns it to
thumbnailPreview.value but never revokes previous URLs; update
handleThumbnailChange to revoke any existing object URL stored in
thumbnailPreview.value before assigning a new one, and add a lifecycle cleanup
(onUnmounted) that revokes the current thumbnailPreview.value if present;
reference the handleThumbnailChange function and thumbnailPreview reactive ref
to locate where to revoke URLs.
Comment on lines
+7
to
+17
| const openPanel = () => { | ||
| isOpen.value = true | ||
| } | ||
|
|
||
| const closePanel = () => { | ||
| isOpen.value = false | ||
| } | ||
|
|
||
| const togglePanel = () => { | ||
| isOpen.value = !isOpen.value | ||
| } |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Prefer function declarations over function expressions.
The store uses arrow functions for actions, but the codebase convention prefers function declarations for pure functions. This is inconsistent with sharePanelStore.ts which uses function declarations.
♻️ Proposed refactor to use function declarations
- const openPanel = () => {
- isOpen.value = true
- }
+ function openPanel() {
+ isOpen.value = true
+ }
- const closePanel = () => {
- isOpen.value = false
- }
+ function closePanel() {
+ isOpen.value = false
+ }
- const togglePanel = () => {
- isOpen.value = !isOpen.value
- }
+ function togglePanel() {
+ isOpen.value = !isOpen.value
+ }Based on learnings: "Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository."
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const openPanel = () => { | |
| isOpen.value = true | |
| } | |
| const closePanel = () => { | |
| isOpen.value = false | |
| } | |
| const togglePanel = () => { | |
| isOpen.value = !isOpen.value | |
| } | |
| function openPanel() { | |
| isOpen.value = true | |
| } | |
| function closePanel() { | |
| isOpen.value = false | |
| } | |
| function togglePanel() { | |
| isOpen.value = !isOpen.value | |
| } |
🤖 Prompt for AI Agents
In `@src/stores/workspace/homePanelStore.ts` around lines 7 - 17, Convert the
arrow function actions to function declarations: replace the const arrow
functions openPanel, closePanel, and togglePanel with declared functions
(function openPanel() { ... }, function closePanel() { ... }, function
togglePanel() { ... }) so the store follows the project convention used in
sharePanelStore.ts; ensure their bodies and references remain unchanged and
exported behavior is preserved.
Comment on lines
+22
to
+29
| const slugify = (value: string) => | ||
| value | ||
| .toLowerCase() | ||
| .replaceAll(/[^a-z0-9]+/g, '') | ||
| .trim() | ||
|
|
||
| export const authorNameToSlug = (name: string) => | ||
| KNOWN_AUTHORS[slugify(name)]?.slug ?? slugify(name) |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Prefer function declarations and simplify slugify.
- Arrow functions should be function declarations per codebase convention.
- The
.trim()inslugifyis redundant since the regex already removes all non-alphanumeric characters including whitespace.
♻️ Proposed refactor
-const slugify = (value: string) =>
- value
- .toLowerCase()
- .replaceAll(/[^a-z0-9]+/g, '')
- .trim()
+function slugify(value: string) {
+ return value.toLowerCase().replaceAll(/[^a-z0-9]+/g, '')
+}
-export const authorNameToSlug = (name: string) =>
- KNOWN_AUTHORS[slugify(name)]?.slug ?? slugify(name)
+export function authorNameToSlug(name: string) {
+ return KNOWN_AUTHORS[slugify(name)]?.slug ?? slugify(name)
+}Based on learnings: "Prefer pure function declarations over function expressions."
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const slugify = (value: string) => | |
| value | |
| .toLowerCase() | |
| .replaceAll(/[^a-z0-9]+/g, '') | |
| .trim() | |
| export const authorNameToSlug = (name: string) => | |
| KNOWN_AUTHORS[slugify(name)]?.slug ?? slugify(name) | |
| function slugify(value: string) { | |
| return value.toLowerCase().replaceAll(/[^a-z0-9]+/g, '') | |
| } | |
| export function authorNameToSlug(name: string) { | |
| return KNOWN_AUTHORS[slugify(name)]?.slug ?? slugify(name) | |
| } |
🤖 Prompt for AI Agents
In `@src/utils/authorProfileUtil.ts` around lines 22 - 29, Convert the slugify
arrow function into a named function declaration and remove the redundant
.trim() (since the regex strips non-alphanumerics and whitespace); update usages
accordingly. Specifically, replace the const slugify = (...) => ... with
function slugify(value: string) { return
value.toLowerCase().replaceAll(/[^a-z0-9]+/g, ''); } and ensure authorNameToSlug
continues to reference slugify(name) and falls back to
KNOWN_AUTHORS[slugify(name)]?.slug ?? slugify(name).
Comment on lines
+31
to
+45
| const titleize = (value: string) => | ||
| value | ||
| .replaceAll(/[-_]+/g, ' ') | ||
| .replaceAll(/\s+/g, ' ') | ||
| .trim() | ||
| .replaceAll(/\b\w/g, (char) => char.toUpperCase()) | ||
|
|
||
| export const authorSlugToProfile = (slug: string): AuthorProfile => { | ||
| const normalized = slugify(slug) | ||
| return ( | ||
| KNOWN_AUTHORS[normalized] ?? { | ||
| slug: normalized, | ||
| name: titleize(slug) | ||
| } | ||
| ) |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Refactor remaining functions to use function declarations.
♻️ Proposed refactor
-const titleize = (value: string) =>
- value
- .replaceAll(/[-_]+/g, ' ')
- .replaceAll(/\s+/g, ' ')
- .trim()
- .replaceAll(/\b\w/g, (char) => char.toUpperCase())
+function titleize(value: string) {
+ return value
+ .replaceAll(/[-_]+/g, ' ')
+ .replaceAll(/\s+/g, ' ')
+ .trim()
+ .replaceAll(/\b\w/g, (char) => char.toUpperCase())
+}
-export const authorSlugToProfile = (slug: string): AuthorProfile => {
- const normalized = slugify(slug)
- return (
- KNOWN_AUTHORS[normalized] ?? {
- slug: normalized,
- name: titleize(slug)
- }
- )
-}
+export function authorSlugToProfile(slug: string): AuthorProfile {
+ const normalized = slugify(slug)
+ return (
+ KNOWN_AUTHORS[normalized] ?? {
+ slug: normalized,
+ name: titleize(slug)
+ }
+ )
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const titleize = (value: string) => | |
| value | |
| .replaceAll(/[-_]+/g, ' ') | |
| .replaceAll(/\s+/g, ' ') | |
| .trim() | |
| .replaceAll(/\b\w/g, (char) => char.toUpperCase()) | |
| export const authorSlugToProfile = (slug: string): AuthorProfile => { | |
| const normalized = slugify(slug) | |
| return ( | |
| KNOWN_AUTHORS[normalized] ?? { | |
| slug: normalized, | |
| name: titleize(slug) | |
| } | |
| ) | |
| function titleize(value: string) { | |
| return value | |
| .replaceAll(/[-_]+/g, ' ') | |
| .replaceAll(/\s+/g, ' ') | |
| .trim() | |
| .replaceAll(/\b\w/g, (char) => char.toUpperCase()) | |
| } | |
| export function authorSlugToProfile(slug: string): AuthorProfile { | |
| const normalized = slugify(slug) | |
| return ( | |
| KNOWN_AUTHORS[normalized] ?? { | |
| slug: normalized, | |
| name: titleize(slug) | |
| } | |
| ) | |
| } |
🤖 Prompt for AI Agents
In `@src/utils/authorProfileUtil.ts` around lines 31 - 45, Convert the remaining
arrow functions to function declarations: replace the const titleize = (...) =>
... with a function titleize(value: string): string { ... } and replace the
exported const authorSlugToProfile = (slug: string): AuthorProfile => { ... }
with an exported function export function authorSlugToProfile(slug: string):
AuthorProfile { ... }; preserve all existing logic (slugify call, KNOWN_AUTHORS
lookup, returned object shape) and keep types/signatures identical so behavior
and exports remain unchanged.
Comment on lines
+40
to
+58
| const handleAuthorWorkflowSelect = (template: AlgoliaWorkflowTemplate) => { | ||
| selectedWorkflow.value = template | ||
| } | ||
|
|
||
| const handleBack = () => { | ||
| void router.push({ name: 'GraphView' }) | ||
| } | ||
|
|
||
| const handleAuthorSelected = (author: { name: string; avatarUrl?: string }) => { | ||
| const slug = authorNameToSlug(author.name) | ||
| void router.push({ name: 'AuthorProfileView', params: { slug } }) | ||
| } | ||
|
|
||
| const handleRunWorkflow = (_workflow: AlgoliaWorkflowTemplate) => { | ||
| // TODO: Implement workflow run | ||
| } | ||
|
|
||
| const handleMakeCopy = (_workflow: AlgoliaWorkflowTemplate) => { | ||
| // TODO: Implement make a copy |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Prefer function declarations for view handlers.
These handlers are const arrow functions in Lines 40-58; repo style prefers function declarations.
♻️ Suggested fix
-const handleAuthorWorkflowSelect = (template: AlgoliaWorkflowTemplate) => {
- selectedWorkflow.value = template
-}
+function handleAuthorWorkflowSelect(template: AlgoliaWorkflowTemplate) {
+ selectedWorkflow.value = template
+}
@@
-const handleBack = () => {
- void router.push({ name: 'GraphView' })
-}
+function handleBack() {
+ void router.push({ name: 'GraphView' })
+}
@@
-const handleAuthorSelected = (author: { name: string; avatarUrl?: string }) => {
- const slug = authorNameToSlug(author.name)
- void router.push({ name: 'AuthorProfileView', params: { slug } })
-}
+function handleAuthorSelected(author: { name: string; avatarUrl?: string }) {
+ const slug = authorNameToSlug(author.name)
+ void router.push({ name: 'AuthorProfileView', params: { slug } })
+}
@@
-const handleRunWorkflow = (_workflow: AlgoliaWorkflowTemplate) => {
- // TODO: Implement workflow run
-}
+function handleRunWorkflow(_workflow: AlgoliaWorkflowTemplate) {
+ // TODO: Implement workflow run
+}
@@
-const handleMakeCopy = (_workflow: AlgoliaWorkflowTemplate) => {
- // TODO: Implement make a copy
-}
+function handleMakeCopy(_workflow: AlgoliaWorkflowTemplate) {
+ // TODO: Implement make a copy
+}🤖 Prompt for AI Agents
In `@src/views/AuthorProfileView.vue` around lines 40 - 58, Convert the arrow
function handlers to named function declarations: replace the const arrow
definitions for handleAuthorWorkflowSelect, handleBack, handleAuthorSelected,
handleRunWorkflow, and handleMakeCopy with equivalent function declarations
(e.g., function handleAuthorWorkflowSelect(template: AlgoliaWorkflowTemplate) {
... }) preserving current logic, returned values, and usage of
router/selectedWorkflow; ensure TypeScript signatures remain the same and any
references to these symbols in the component template or other code are
unchanged.
Comment on lines
+53
to
+59
| const handleRunWorkflow = (_workflow: AlgoliaWorkflowTemplate) => { | ||
| // TODO: Implement workflow run | ||
| } | ||
|
|
||
| const handleMakeCopy = (_workflow: AlgoliaWorkflowTemplate) => { | ||
| // TODO: Implement make a copy | ||
| } |
Contributor
There was a problem hiding this comment.
Run/Copy handlers are no-ops.
Line 53-59 handlers are empty, so the WorkflowDetailView actions will do nothing. Wire these to the run/copy flows or hide the actions until implemented.
If you want, I can draft wiring to the existing run/copy services.
🤖 Prompt for AI Agents
In `@src/views/AuthorProfileView.vue` around lines 53 - 59, The two no-op handlers
handleRunWorkflow and handleMakeCopy must be implemented or the
WorkflowDetailView actions hidden; replace the TODOs by wiring handleRunWorkflow
to the existing run workflow service (e.g., call
runWorkflowService.run(workflow) or equivalent, set local loading state, handle
success/error and show user feedback) and wire handleMakeCopy to the existing
copy service (e.g., workflowCopyService.copy(workflow) or equivalent) with
similar loading/error handling; if those services are not available yet, update
WorkflowDetailView to conditionally hide the Run/Make Copy buttons until
handleRunWorkflow and handleMakeCopy are implemented.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 Fix all issues with AI agents
In `@src/components/discover/AuthorProfileView.vue`:
- Around line 310-329: Replace the hard-coded hubProfileUrl with a derived URL
built from the canonical hub base and the current authorName (used by
authorFacetFilters), and update openHubProfile to use that derived value;
specifically, remove the fixed string assigned to hubProfileUrl, construct the
profile URL at runtime by combining the app's hub base (from a shared
util/config or a new getHubBaseUrl helper) with the URL-encoded authorName (use
encodeURIComponent(authorName)) and the expected path (/profile/...), and ensure
openHubProfile calls window.location.assign with this constructed URL so users
are routed to the correct author profile.
- Around line 254-276: The pagination Button elements in AuthorProfileView.vue
lack accessible names; update the left and right Button components (the ones
using currentPage and `@click`="goToPage(...)") to include aria-label attributes
bound to translations, e.g. add :aria-label="$t('g.back')" (or
:aria-label="$t('g.previous')" if you add that key) for the left chevron Button
and :aria-label="$t('g.next')" for the right chevron Button so screen readers
can announce their purpose.
In `@src/components/discover/DiscoverView.vue`:
- Around line 367-373: The handlers handleRunWorkflow and handleMakeCopy are
no-ops causing the UI actions to silently do nothing; implement them to either
emit events or call the existing workflow runner/duplication logic (e.g.,
emit("run-workflow", _workflow) in handleRunWorkflow and emit("copy-workflow",
_workflow) in handleMakeCopy) so parent components or a store action can perform
the operations, or if you cannot implement the behavior yet, disable the
corresponding UI controls by wiring the template to a computed/prop (e.g.,
:disabled="!canRun" / :disabled="!canCopy") until proper wiring is added. Ensure
the functions reference the AlgoliaWorkflowTemplate payload passed in and update
any callers/listeners accordingly.
- Around line 350-365: Both handleAuthorClick and handleAuthorSelected open
external profile links with window.open using '_blank' which allows reverse
tabnabbing; update these functions (handleAuthorClick and handleAuthorSelected)
to prevent this by either passing a features string 'noopener,noreferrer' as the
third argument to window.open or by capturing the returned window object and
setting newWindow.opener = null, e.g., const w = window.open(url, '_blank',
'noopener,noreferrer') || window.open(url); if (w) w.opener = null; ensure you
apply the change in both functions.
- Around line 322-334: performSearch currently calls search(...) without
handling rejections; wrap the search invocation in a try-catch inside
performSearch() (keeping the existing initialFacets assignment) and on catch
call toastStore.addAlert(translate('g.unknownError') or a new search-specific
key) to surface a user-friendly message; also update call sites handleSearch()
and goToPage() to await performSearch() (or return the promise) so any
rejections are propagated/handled rather than unhandled.
In `@src/components/discover/WorkflowDetailView.vue`:
- Around line 43-69: Replace the raw <button> block with the repo's shared
button component (preferably IconTextButton.vue or TextButton.vue) so
focus/disabled styling is consistent; keep the existing props and behavior by
wiring hasAuthor to the component's disabled prop, pass handleAuthorClick to its
click handler, render the avatar via the component's icon slot or prop using
authorAvatar/authorName for src/alt, and preserve the label text and translation
({{ $t('discover.detail.officialWorkflow') }}) and authorName display inside the
component's default slot.
- Around line 218-228: Update both external link opens to add
noreferrer/noopener and encode the object ID: in the handleAuthorClick flow
where you open the author profile (currently encodes workflow.author_name), pass
the third argument 'noopener,noreferrer' to window.open; in openHubWorkflow,
wrap workflow.objectID with encodeURIComponent and also pass
'noopener,noreferrer' as the third window.open argument so the call becomes
window.open(`${hubWorkflowBaseUrl}/${encodeURIComponent(workflow.objectID)}`,
'_blank', 'noopener,noreferrer').
Comment on lines
+254
to
+276
| <div | ||
| v-if="results && results.totalPages > 1" | ||
| class="flex shrink-0 items-center justify-center gap-2 border-t border-interface-stroke px-6 py-3" | ||
| > | ||
| <Button | ||
| variant="secondary" | ||
| size="md" | ||
| :disabled="currentPage === 0" | ||
| @click="goToPage(currentPage - 1)" | ||
| > | ||
| <i class="icon-[lucide--chevron-left]" /> | ||
| </Button> | ||
| <span class="px-4 text-sm text-muted-foreground"> | ||
| {{ currentPage + 1 }} / {{ results.totalPages }} | ||
| </span> | ||
| <Button | ||
| variant="secondary" | ||
| size="md" | ||
| :disabled="currentPage >= results.totalPages - 1" | ||
| @click="goToPage(currentPage + 1)" | ||
| > | ||
| <i class="icon-[lucide--chevron-right]" /> | ||
| </Button> |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find and examine the AuthorProfileView.vue file
fd -t f AuthorProfileView.vueRepository: Comfy-Org/ComfyUI_frontend
Length of output: 147
🏁 Script executed:
# Once found, examine the specific lines 254-276
cat -n src/components/discover/AuthorProfileView.vue | sed -n '250,280p'Repository: Comfy-Org/ComfyUI_frontend
Length of output: 1114
🏁 Script executed:
# Check the Button component implementation to understand how it handles accessibility
fd -t f Button.vue | head -5Repository: Comfy-Org/ComfyUI_frontend
Length of output: 320
🏁 Script executed:
# Find the Button component used in this file
fd -t f Button.vue src/components/button/Repository: Comfy-Org/ComfyUI_frontend
Length of output: 106
🏁 Script executed:
# Examine the Button component implementation
cat -n src/components/button/Button.vue | head -100Repository: Comfy-Org/ComfyUI_frontend
Length of output: 134
🏁 Script executed:
# Check imports in AuthorProfileView.vue to see where Button comes from
head -50 src/components/discover/AuthorProfileView.vue | grep -i buttonRepository: Comfy-Org/ComfyUI_frontend
Length of output: 253
🏁 Script executed:
# Search for Button component more broadly
rg -t vue "export.*Button" --max-count=10 | head -20Repository: Comfy-Org/ComfyUI_frontend
Length of output: 97
🏁 Script executed:
# Also check what files exist in src/components/button/
fd -t f . src/components/button/Repository: Comfy-Org/ComfyUI_frontend
Length of output: 229
🏁 Script executed:
# Check the full imports section of AuthorProfileView.vue
head -30 src/components/discover/AuthorProfileView.vueRepository: Comfy-Org/ComfyUI_frontend
Length of output: 1201
🏁 Script executed:
# Search for Button component definition globally
rg "defineComponent.*Button|export.*const Button" --max-count=10Repository: Comfy-Org/ComfyUI_frontend
Length of output: 52
🏁 Script executed:
# Also check if Button is a common import
rg "from.*Button" src/components/discover/AuthorProfileView.vueRepository: Comfy-Org/ComfyUI_frontend
Length of output: 124
🏁 Script executed:
# Find the Button component in the correct location
find src -name Button.vue -path "*/ui/button/*"Repository: Comfy-Org/ComfyUI_frontend
Length of output: 105
🏁 Script executed:
# Examine the Button component
cat -n src/components/ui/button/Button.vue | head -150Repository: Comfy-Org/ComfyUI_frontend
Length of output: 1205
🏁 Script executed:
# Check if other icon-only buttons use aria-labels in the codebase
rg "aria-label.*\$t\(" src/components --max-count=10Repository: Comfy-Org/ComfyUI_frontend
Length of output: 52
🏁 Script executed:
# Check if 'g.previous' and 'g.next' exist in i18n
cat src/locales/en/main.json | grep -A2 -B2 '"g"'Repository: Comfy-Org/ComfyUI_frontend
Length of output: 202
🏁 Script executed:
# Get the full 'g' section from i18n
cat src/locales/en/main.json | python3 << 'EOF'
import json, sys
data = json.load(sys.stdin)
g_section = data.get('g', {})
for key in sorted(g_section.keys()):
print(f' "{key}": "{g_section[key]}",')
EOFRepository: Comfy-Org/ComfyUI_frontend
Length of output: 790
🏁 Script executed:
# Also check if there are common patterns for previous/next navigation
rg "previous|next" src/locales/en/main.json | head -20Repository: Comfy-Org/ComfyUI_frontend
Length of output: 722
🏁 Script executed:
# Search for previous/prev keys in i18n more carefully
rg '"previous"|"prev"' src/locales/en/main.jsonRepository: Comfy-Org/ComfyUI_frontend
Length of output: 52
🏁 Script executed:
# List the full 'g' section line by line
sed -n '/"g":/,/^ }/p' src/locales/en/main.json | head -50Repository: Comfy-Org/ComfyUI_frontend
Length of output: 1993
🏁 Script executed:
# Check what button labels exist in general
rg '"back"|"next"|"previous"' src/locales/en/main.json | sort -uRepository: Comfy-Org/ComfyUI_frontend
Length of output: 128
🏁 Script executed:
# Search for all pagination or navigation-related keys in i18n
rg 'previous|prev|pagination' src/locales/en/main.json -iRepository: Comfy-Org/ComfyUI_frontend
Length of output: 1407
🏁 Script executed:
# Double-check what keys exist in the 'g' section
sed -n '/"g":/,/^ }/p' src/locales/en/main.json | wc -lRepository: Comfy-Org/ComfyUI_frontend
Length of output: 73
🏁 Script executed:
# Look for similar icon-only buttons with aria-labels in the codebase for pattern
rg ':aria-label' src/components --max-count=5 -A 2Repository: Comfy-Org/ComfyUI_frontend
Length of output: 38670
🏁 Script executed:
# Search more specifically for "previous" in i18n file
cat src/locales/en/main.json | grep -i "previous\|prev" | head -10Repository: Comfy-Org/ComfyUI_frontend
Length of output: 848
🏁 Script executed:
# Get all keys in 'g' section of i18n
sed -n '/"g":/,/^ }/p' src/locales/en/main.json | grep -o '"[^"]*":' | sort -uRepository: Comfy-Org/ComfyUI_frontend
Length of output: 4214
🏁 Script executed:
# Also check if there's a dedicated scrollLeft/scrollRight pattern we can use as reference
rg 'scrollLeft|scrollRight' src/locales/en/main.jsonRepository: Comfy-Org/ComfyUI_frontend
Length of output: 137
Add aria-labels to icon-only pagination buttons.
These buttons need accessible names for screen readers. Use :aria-label="$t('g.next')" for the right chevron, and for the left chevron consider using :aria-label="$t('g.back')" or add a new translation key g.previous to maintain pagination semantics.
Suggested fix
<Button
variant="secondary"
size="md"
:disabled="currentPage === 0"
+ :aria-label="$t('g.back')"
`@click`="goToPage(currentPage - 1)"
>
<i class="icon-[lucide--chevron-left]" />
</Button>
@@
<Button
variant="secondary"
size="md"
:disabled="currentPage >= results.totalPages - 1"
+ :aria-label="$t('g.next')"
`@click`="goToPage(currentPage + 1)"
>
<i class="icon-[lucide--chevron-right]" />
</Button>🤖 Prompt for AI Agents
In `@src/components/discover/AuthorProfileView.vue` around lines 254 - 276, The
pagination Button elements in AuthorProfileView.vue lack accessible names;
update the left and right Button components (the ones using currentPage and
`@click`="goToPage(...)") to include aria-label attributes bound to translations,
e.g. add :aria-label="$t('g.back')" (or :aria-label="$t('g.previous')" if you
add that key) for the left chevron Button and :aria-label="$t('g.next')" for the
right chevron Button so screen readers can announce their purpose.
Comment on lines
+310
to
+329
| const hubProfileUrl = 'https://pr-2289.testenvs.comfy.org/profile/Comfy%20Org' | ||
|
|
||
| const authorAvatar = computed( | ||
| () => authorAvatarUrl ?? '/assets/images/comfy-logo-single.svg' | ||
| ) | ||
|
|
||
| const formattedRuns = computed(() => | ||
| stats?.runs ? stats.runs.toLocaleString() : '--' | ||
| ) | ||
| const formattedCopies = computed(() => | ||
| stats?.copies ? stats.copies.toLocaleString() : '--' | ||
| ) | ||
|
|
||
| const totalWorkflows = computed(() => results.value?.totalHits ?? 0) | ||
|
|
||
| const authorFacetFilters = computed(() => [[`author_name:${authorName}`]]) | ||
|
|
||
| function openHubProfile() { | ||
| window.location.assign(hubProfileUrl) | ||
| } |
Contributor
There was a problem hiding this comment.
Remove the hard-coded hub profile URL.
The current value points to a test environment and a fixed author, which will misroute users. Derive it from authorName (and use the canonical hub base or a shared util).
Suggested fix
-const hubProfileUrl = 'https://pr-2289.testenvs.comfy.org/profile/Comfy%20Org'
+const hubProfileBaseUrl = 'https://comfy-hub.vercel.app/profile/'
+const hubProfileUrl = computed(
+ () => `${hubProfileBaseUrl}${encodeURIComponent(authorName)}`
+)
@@
function openHubProfile() {
- window.location.assign(hubProfileUrl)
+ window.location.assign(hubProfileUrl.value)
}🤖 Prompt for AI Agents
In `@src/components/discover/AuthorProfileView.vue` around lines 310 - 329,
Replace the hard-coded hubProfileUrl with a derived URL built from the canonical
hub base and the current authorName (used by authorFacetFilters), and update
openHubProfile to use that derived value; specifically, remove the fixed string
assigned to hubProfileUrl, construct the profile URL at runtime by combining the
app's hub base (from a shared util/config or a new getHubBaseUrl helper) with
the URL-encoded authorName (use encodeURIComponent(authorName)) and the expected
path (/profile/...), and ensure openHubProfile calls window.location.assign with
this constructed URL so users are routed to the correct author profile.
Comment on lines
+322
to
+334
| async function performSearch() { | ||
| const result = await search({ | ||
| query: searchQuery.value, | ||
| pageSize: 24, | ||
| pageNumber: currentPage.value, | ||
| facetFilters: buildFacetFilters() | ||
| }) | ||
|
|
||
| // Store initial facets on first search (no filters applied) | ||
| if (!initialFacets.value && result.facets) { | ||
| initialFacets.value = result.facets | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n src/components/discover/DiscoverView.vue | head -350 | tail -50Repository: Comfy-Org/ComfyUI_frontend
Length of output: 1547
🏁 Script executed:
fd -t f "DiscoverView.vue" src/Repository: Comfy-Org/ComfyUI_frontend
Length of output: 110
🏁 Script executed:
wc -l src/components/discover/DiscoverView.vueRepository: Comfy-Org/ComfyUI_frontend
Length of output: 114
🏁 Script executed:
head -50 src/components/discover/DiscoverView.vueRepository: Comfy-Org/ComfyUI_frontend
Length of output: 1519
🏁 Script executed:
fd -t f "useWorkflowTemplateSearch" src/Repository: Comfy-Org/ComfyUI_frontend
Length of output: 123
🏁 Script executed:
fd -t f "toastStore" src/Repository: Comfy-Org/ComfyUI_frontend
Length of output: 111
🏁 Script executed:
cat src/composables/discover/useWorkflowTemplateSearch.tsRepository: Comfy-Org/ComfyUI_frontend
Length of output: 2594
🏁 Script executed:
cat src/platform/updates/common/toastStore.ts | head -100Repository: Comfy-Org/ComfyUI_frontend
Length of output: 1142
🏁 Script executed:
grep -n "^import\|^import {" src/components/discover/DiscoverView.vue | head -20Repository: Comfy-Org/ComfyUI_frontend
Length of output: 813
🏁 Script executed:
rg "g\.error" src/locales/en/main.jsonRepository: Comfy-Org/ComfyUI_frontend
Length of output: 52
🏁 Script executed:
rg -A 5 "toastStore.addAlert\|useToastStore" src/components --type vue -A 3Repository: Comfy-Org/ComfyUI_frontend
Length of output: 97
🏁 Script executed:
rg "performSearch" src/components/discover/DiscoverView.vueRepository: Comfy-Org/ComfyUI_frontend
Length of output: 176
🏁 Script executed:
cat src/locales/en/main.json | head -100Repository: Comfy-Org/ComfyUI_frontend
Length of output: 4110
🏁 Script executed:
rg "error" src/locales/en/main.json | head -20Repository: Comfy-Org/ComfyUI_frontend
Length of output: 1009
🏁 Script executed:
rg "catch.*error" src/components -A 3 --type ts | head -40Repository: Comfy-Org/ComfyUI_frontend
Length of output: 460
Add error handling and user feedback for search failures.
The search() function can reject, but performSearch() lacks a try-catch guard. Additionally, performSearch() is called from handleSearch() and goToPage() without await, leaving rejections unhandled. Wrap the search call in try-catch and display a user-friendly error message via toastStore.addAlert(). Use an existing translation key like g.unknownError (or create a new one for search-specific failures).
Suggested fix
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
import CardContainer from '@/components/card/CardContainer.vue'
import CardTop from '@/components/card/CardTop.vue'
import LazyImage from '@/components/common/LazyImage.vue'
import SearchBox from '@/components/common/SearchBox.vue'
import SquareChip from '@/components/chip/SquareChip.vue'
import WorkflowDetailView from '@/components/discover/WorkflowDetailView.vue'
import MultiSelect from '@/components/input/MultiSelect.vue'
import Button from '@/components/ui/button/Button.vue'
import { useWorkflowTemplateSearch } from '@/composables/discover/useWorkflowTemplateSearch'
+import { useToastStore } from '@/platform/updates/common/toastStore'
import type { AlgoliaWorkflowTemplate } from '@/types/discoverTypes'
const { search, isLoading, results } = useWorkflowTemplateSearch()
+const { t } = useI18n()
+const toastStore = useToastStore()
async function performSearch() {
- const result = await search({
- query: searchQuery.value,
- pageSize: 24,
- pageNumber: currentPage.value,
- facetFilters: buildFacetFilters()
- })
-
- // Store initial facets on first search (no filters applied)
- if (!initialFacets.value && result.facets) {
- initialFacets.value = result.facets
- }
+ try {
+ const result = await search({
+ query: searchQuery.value,
+ pageSize: 24,
+ pageNumber: currentPage.value,
+ facetFilters: buildFacetFilters()
+ })
+
+ // Store initial facets on first search (no filters applied)
+ if (!initialFacets.value && result.facets) {
+ initialFacets.value = result.facets
+ }
+ } catch (error) {
+ toastStore.addAlert(t('g.unknownError'))
+ }
}As per coding guidelines: Implement proper error handling; Provide user-friendly and actionable error messages.
🤖 Prompt for AI Agents
In `@src/components/discover/DiscoverView.vue` around lines 322 - 334,
performSearch currently calls search(...) without handling rejections; wrap the
search invocation in a try-catch inside performSearch() (keeping the existing
initialFacets assignment) and on catch call
toastStore.addAlert(translate('g.unknownError') or a new search-specific key) to
surface a user-friendly message; also update call sites handleSearch() and
goToPage() to await performSearch() (or return the promise) so any rejections
are propagated/handled rather than unhandled.
Comment on lines
+350
to
+365
| function handleAuthorClick(template: AlgoliaWorkflowTemplate) { | ||
| if (!template.author_name) return | ||
| window.open( | ||
| `https://comfy-hub.vercel.app/profile/${encodeURIComponent( | ||
| template.author_name | ||
| )}`, | ||
| '_blank' | ||
| ) | ||
| } | ||
|
|
||
| function handleAuthorSelected(author: { name: string; avatarUrl?: string }) { | ||
| window.open( | ||
| `https://comfy-hub.vercel.app/profile/${encodeURIComponent(author.name)}`, | ||
| '_blank' | ||
| ) | ||
| } |
Contributor
There was a problem hiding this comment.
Prevent reverse tabnabbing when opening external profiles.
window.open(..., '_blank') should include noopener,noreferrer.
Suggested fix
function handleAuthorClick(template: AlgoliaWorkflowTemplate) {
if (!template.author_name) return
- window.open(
- `https://comfy-hub.vercel.app/profile/${encodeURIComponent(
- template.author_name
- )}`,
- '_blank'
- )
+ const url = `https://comfy-hub.vercel.app/profile/${encodeURIComponent(
+ template.author_name
+ )}`
+ const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
+ if (newWindow) newWindow.opener = null
}
function handleAuthorSelected(author: { name: string; avatarUrl?: string }) {
- window.open(
- `https://comfy-hub.vercel.app/profile/${encodeURIComponent(author.name)}`,
- '_blank'
- )
+ const url = `https://comfy-hub.vercel.app/profile/${encodeURIComponent(
+ author.name
+ )}`
+ const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
+ if (newWindow) newWindow.opener = null
}🤖 Prompt for AI Agents
In `@src/components/discover/DiscoverView.vue` around lines 350 - 365, Both
handleAuthorClick and handleAuthorSelected open external profile links with
window.open using '_blank' which allows reverse tabnabbing; update these
functions (handleAuthorClick and handleAuthorSelected) to prevent this by either
passing a features string 'noopener,noreferrer' as the third argument to
window.open or by capturing the returned window object and setting
newWindow.opener = null, e.g., const w = window.open(url, '_blank',
'noopener,noreferrer') || window.open(url); if (w) w.opener = null; ensure you
apply the change in both functions.
Comment on lines
+367
to
+373
| function handleRunWorkflow(_workflow: AlgoliaWorkflowTemplate) { | ||
| // TODO: Implement workflow run | ||
| } | ||
|
|
||
| function handleMakeCopy(_workflow: AlgoliaWorkflowTemplate) { | ||
| // TODO: Implement make a copy | ||
| } |
Contributor
There was a problem hiding this comment.
Run/Copy handlers are currently no-ops.
These actions will silently do nothing; consider disabling the UI or wiring the handlers before release.
🤖 Prompt for AI Agents
In `@src/components/discover/DiscoverView.vue` around lines 367 - 373, The
handlers handleRunWorkflow and handleMakeCopy are no-ops causing the UI actions
to silently do nothing; implement them to either emit events or call the
existing workflow runner/duplication logic (e.g., emit("run-workflow",
_workflow) in handleRunWorkflow and emit("copy-workflow", _workflow) in
handleMakeCopy) so parent components or a store action can perform the
operations, or if you cannot implement the behavior yet, disable the
corresponding UI controls by wiring the template to a computed/prop (e.g.,
:disabled="!canRun" / :disabled="!canCopy") until proper wiring is added. Ensure
the functions reference the AlgoliaWorkflowTemplate payload passed in and update
any callers/listeners accordingly.
Comment on lines
+43
to
+69
| <button | ||
| type="button" | ||
| :disabled="!hasAuthor" | ||
| :class=" | ||
| cn( | ||
| 'flex w-full items-center gap-3 rounded-lg border border-transparent p-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-subtle', | ||
| hasAuthor | ||
| ? 'hover:bg-secondary-background' | ||
| : 'cursor-default opacity-80' | ||
| ) | ||
| " | ||
| @click="handleAuthorClick" | ||
| > | ||
| <img | ||
| :src="authorAvatar" | ||
| :alt="authorName" | ||
| class="size-8 rounded-full bg-secondary-background object-cover" | ||
| /> | ||
| <div class="min-w-0 flex-1"> | ||
| <div class="truncate text-sm font-medium text-base-foreground"> | ||
| {{ authorName }} | ||
| </div> | ||
| <div class="truncate text-xs text-muted-foreground"> | ||
| {{ $t('discover.detail.officialWorkflow') }} | ||
| </div> | ||
| </div> | ||
| </button> |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Use shared button component for the author action.
This is a user-interactive button; please use the repo’s standard button components (IconButton/TextButton/IconTextButton) to keep focus/disabled styling consistent with the rest of the UI.
Based on learnings: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML elements.
🤖 Prompt for AI Agents
In `@src/components/discover/WorkflowDetailView.vue` around lines 43 - 69, Replace
the raw <button> block with the repo's shared button component (preferably
IconTextButton.vue or TextButton.vue) so focus/disabled styling is consistent;
keep the existing props and behavior by wiring hasAuthor to the component's
disabled prop, pass handleAuthorClick to its click handler, render the avatar
via the component's icon slot or prop using authorAvatar/authorName for src/alt,
and preserve the label text and translation ({{
$t('discover.detail.officialWorkflow') }}) and authorName display inside the
component's default slot.
Comment on lines
+218
to
+228
| window.open( | ||
| `https://comfy-hub.vercel.app/profile/${encodeURIComponent( | ||
| workflow.author_name | ||
| )}`, | ||
| '_blank' | ||
| ) | ||
| } | ||
|
|
||
| const openHubWorkflow = () => { | ||
| window.open(`${hubWorkflowBaseUrl}/${workflow.objectID}`, '_blank') | ||
| } |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's read the relevant section of the WorkflowDetailView.vue file
cat -n src/components/discover/WorkflowDetailView.vue | sed -n '210,235p'Repository: Comfy-Org/ComfyUI_frontend
Length of output: 892
🏁 Script executed:
# Check for other window.open usages in the codebase to see if there's a pattern
rg "window\.open" --type vue --type ts --type tsx -B 2 -A 2Repository: Comfy-Org/ComfyUI_frontend
Length of output: 97
🏁 Script executed:
# Check if there's a utility function for safe link opening
fd -e ts -e tsx -e vue | xargs grep -l "noopener\|noreferrer\|safeOpen\|secureOpen" 2>/dev/null | head -20Repository: Comfy-Org/ComfyUI_frontend
Length of output: 1250
🏁 Script executed:
# Search for window.open without type filter
rg "window\.open" -B 2 -A 2Repository: Comfy-Org/ComfyUI_frontend
Length of output: 18158
🏁 Script executed:
# Find where hubWorkflowBaseUrl is defined
rg "hubWorkflowBaseUrl" -B 2 -A 2Repository: Comfy-Org/ComfyUI_frontend
Length of output: 781
🏁 Script executed:
# Check if there's a utility for safe/secure link opening
fd -type f \( -name "*.ts" -o -name "*.tsx" -o -name "*.js" \) | xargs grep -l "open.*link\|safe.*open\|Router\|navigate" src/utils/ 2>/dev/null | head -10Repository: Comfy-Org/ComfyUI_frontend
Length of output: 240
🏁 Script executed:
# Verify that objectID could contain special characters by checking its usage/type
rg "objectID" src/components/discover/ -B 1 -A 1 | head -30Repository: Comfy-Org/ComfyUI_frontend
Length of output: 2017
Add noopener,noreferrer when opening external links and encode URL parameters.
Both window.open calls with _blank should include noopener,noreferrer to prevent reverse tabnabbing (pattern already used in HelpCenterMenuContent.vue and cloudFeedbackTopbarButton.ts). Additionally, objectID should be URL-encoded since it's API-supplied data, consistent with how author_name is already encoded in handleAuthorClick.
Example hardening
const handleAuthorClick = () => {
if (!workflow.author_name) return
window.open(
`https://comfy-hub.vercel.app/profile/${encodeURIComponent(
workflow.author_name
)}`,
'_blank',
+ 'noopener,noreferrer'
)
}
const openHubWorkflow = () => {
- window.open(`${hubWorkflowBaseUrl}/${workflow.objectID}`, '_blank')
+ window.open(
+ `${hubWorkflowBaseUrl}/${encodeURIComponent(workflow.objectID)}`,
+ '_blank',
+ 'noopener,noreferrer'
+ )
}🤖 Prompt for AI Agents
In `@src/components/discover/WorkflowDetailView.vue` around lines 218 - 228,
Update both external link opens to add noreferrer/noopener and encode the object
ID: in the handleAuthorClick flow where you open the author profile (currently
encodes workflow.author_name), pass the third argument 'noopener,noreferrer' to
window.open; in openHubWorkflow, wrap workflow.objectID with encodeURIComponent
and also pass 'noopener,noreferrer' as the third window.open argument so the
call becomes
window.open(`${hubWorkflowBaseUrl}/${encodeURIComponent(workflow.objectID)}`,
'_blank', 'noopener,noreferrer').
Contributor
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/WorkflowsSidebarTab.vue (1)
114-121:⚠️ Potential issue | 🟠 MajorAdd missing i18n key
sideToolbar.browseTemplatestosrc/locales/en/main.json.The translation key used in the button label does not exist in the English locale file. Add
"browseTemplates": "<label_text>"to thesideToolbarobject insrc/locales/en/main.jsonto prevent the UI from displaying the raw key text.
🤖 Fix all issues with AI agents
In `@src/stores/workspace/sidebarTabStore.ts`:
- Around line 25-32: FULL_PAGE_TAB_IDS is an empty array so isFullPageTabActive
(which checks activeSidebarTabId against FULL_PAGE_TAB_IDS) will never be true;
populate or derive FULL_PAGE_TAB_IDS from the actual tab definitions instead of
leaving it empty — for example, build it from your sidebar tab metadata (e.g.,
map/filter your tabs array for a `fullPage` or similar flag) or import the
canonical tab ID list so FULL_PAGE_TAB_IDS contains the real full-page tab ids
and isFullPageTabActive can evaluate correctly against activeSidebarTabId.
Comment on lines
+25
to
+32
| const FULL_PAGE_TAB_IDS: string[] = [] | ||
|
|
||
| const isFullPageTabActive = computed(() => { | ||
| return ( | ||
| activeSidebarTabId.value !== null && | ||
| FULL_PAGE_TAB_IDS.includes(activeSidebarTabId.value) | ||
| ) | ||
| }) |
Contributor
There was a problem hiding this comment.
FULL_PAGE_TAB_IDS is empty, so isFullPageTabActive is always false.
Unless this list is populated elsewhere (it isn’t, as written), the computed never becomes true and any “full-page tab” logic will never activate. Please wire this to real tab IDs or derive it from tab metadata so the feature actually works.
🤖 Prompt for AI Agents
In `@src/stores/workspace/sidebarTabStore.ts` around lines 25 - 32,
FULL_PAGE_TAB_IDS is an empty array so isFullPageTabActive (which checks
activeSidebarTabId against FULL_PAGE_TAB_IDS) will never be true; populate or
derive FULL_PAGE_TAB_IDS from the actual tab definitions instead of leaving it
empty — for example, build it from your sidebar tab metadata (e.g., map/filter
your tabs array for a `fullPage` or similar flag) or import the canonical tab ID
list so FULL_PAGE_TAB_IDS contains the real full-page tab ids and
isFullPageTabActive can evaluate correctly against activeSidebarTabId.
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
Changes
Review Focus
Screenshots (if applicable)
┆Issue is synchronized with this Notion page by Unito