Commit Graph

33 Commits

Author SHA1 Message Date
Alexander Brown
72b5444d5a Devex: Linter updates (#7309)
## Summary

Updates for the linter/formatter deps, turning on some more rules.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7309-WIP-Linter-updates-2c56d73d36508101b3ece6bcaf7e5212)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>
2025-12-10 11:08:47 -08:00
Alexander Brown
5b91434ac4 Cleanup: Sidebar Tabs component and style alignment (#7215)
## Summary

Unify the current sidebar tabs, structurally and aesthetically.

## Changes

- Removes the Assets only Layout
- Standardizes the title styling and spacing across the tabs.

## Review Focus

<!-- Critical design decisions or edge cases that need attention -->

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7215-WIP-Sidebar-Tabs-component-and-style-alignment-2c26d73d3650817193bfd752e0d0bbde)
by [Unito](https://www.unito.io)
2025-12-09 00:33:08 -07:00
Terry Jia
643533c572 fix: should allow autoCols=true when server doesn't provide size (#7132)
## Summary

set autoCols = true by default for Logs Terminal

## Changes
Previously, the logs terminal had autoCols: false to preserve
server-side progress bar rendering, However, this caused large black
empty areas when the server terminal was narrower than the UI panel,
Many server environments don't provide terminal size at all, making this
tradeoff not worthwhile.

The original implementation set autoCols: false because the server
renders progress bars based on its own terminal width. If the frontend
used a different column count, progress bars would display incorrectly
(e.g., wrapped or truncated).

However, this created a poor user experience:
1. The terminal only filled a portion of the panel width (often 80
columns)
  2. The remaining space appeared as a large black empty area
3. Many backend environments don't provide size data at all, making the
fixed-width approach pointless

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7117

## Screenshots (if applicable)
before

https://github.com/user-attachments/assets/e38af410-9cf1-4175-8acc-39d11a5b73ce

after

https://github.com/user-attachments/assets/3d180318-609f-44c5-aac5-230f9e4ef596

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7132-fix-should-allow-autoCols-true-when-server-doesn-t-provide-size-2be6d73d365081e7bf3bf5988bdba39a)
by [Unito](https://www.unito.io)
2025-12-03 22:18:27 -05:00
Alexander Brown
471ccca1dd Style: Design System use across more components (#6705)
## Summary

Only remaining use is in `buttonTypes.ts` which @viva-jinyi is going to
be working on to consolidate our different buttons soon.

## Changes

- **What**: Replace light/dark colors with theme aware design system
tokens.

## Review Focus

Double check the chosen colors for the components

## Screenshots

| Before | After |
| ------ | ----- |
| <img width="607" height="432" alt="image"
src="https://github.com/user-attachments/assets/6c0ee6d6-819f-40b1-b775-f8b25dd18104"
/> | <img width="646" height="488" alt="image"
src="https://github.com/user-attachments/assets/9c8532de-8ac6-4b48-9021-3fd0b3e0bc63"
/> |

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6705-Style-WIP-Design-System-use-across-more-components-2ab6d73d365081619115fc5f87a46341)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-11-17 12:27:10 -08:00
pythongosssss
984ebef416 Floating Menus - UI rework (#5980)
## Summary

Enhancing and further modernizing the UI, giving users more usable area
whilst keeping farmiliar positioning and feel of elements.

## Changes

- **What**: Significant restructure of the UI elements, changing
elements from large blocks to floating elements, updating:
- Side toolbar menu (floating style, supports small/normal mode,
combines to scroll on height overflow)
- Bottom tabs panel (floating style, tabs redesigned)
- Action bar (support for docking/undocking menu)
    - Added login/user menu button to top right
- Restyled breadcrumbs (still collapse when overflows)
- Add litegraph support for fps info position (so it isn't covered by
the sidebar)

- **Breaking**: 
- Removed various elements and added new ones, I have tested custom
sidebars, custom actions, etc but if scripts are inserting elements into
"other" elements they may have been (re)moved.
- Remove support for bottom menu
- Remove support for 2nd-row tabs

## Screenshots 
<img width="1116" height="907" alt="ui"
src="https://github.com/user-attachments/assets/b040a215-67d3-4c88-8c4d-f402a16a34f6"
/>


https://github.com/user-attachments/assets/571dbda5-01ec-47e8-b235-ee1b88c93dd0

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5980-Floating-Menus-UI-rework-2866d73d3650810aac60cc1afe979b60)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
2025-10-16 18:12:09 -07:00
Alexander Brown
b943c0fa75 Lint: Add tailwind linter (#5984)
## Summary

Adds the [tailwind lint
plugin](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#eslint-plugin-tailwindcss)
and fixes the currently fixable rules ([v4 is still in
beta](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#about-tailwind-css-4-support)).

## Changes

- **What**: Enforces things like consistent class order, and eventually
can prohibit extra classes that could be utilities instead
- **Dependencies**: The plugin and its types

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5984-Lint-Add-tailwind-linter-2866d73d365081d89db0d998232533bb)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2025-10-08 19:39:14 -07:00
Marcel Petrick
d0e81cdd33 fix(docs): correct typos in comments and strings found during code view (#5880)
Non-functional changes only:
- Fixed minor spelling mistakes in comments
- Corrected typos in user-facing strings
- No variables, logic, or functional code was modified.

Signed-off-by: Marcel Petrick <mail@marcelpetrick.it>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5880-fix-docs-correct-typos-in-comments-and-strings-found-during-code-view-27f6d73d3650815db62af6115991304a)
by [Unito](https://www.unito.io)

---------

Signed-off-by: Marcel Petrick <mail@marcelpetrick.it>
Co-authored-by: Alexander Brown <DrJKL0424@gmail.com>
Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com>
2025-10-01 18:35:38 -07:00
filtered
b0f81b2245 Rework desktop install / startup UX (#5292)
### Summary

Complete redesign of Desktop app installer, implementing the new app
startup progress system and error reporting.
2025-09-24 12:06:58 -07:00
Alexander Brown
08220d50d9 Lint: Turn on rules that should allow for verbatimModuleSyntax (#5616)
* lint: turn on type import rules setting up for verbatimModuleSyntax

* lint: --fix for type imports
2025-09-16 22:03:41 -07:00
Alexander Brown
6b59f839e0 Devex: Faster linting (#5611)
* devex: Keep the presubmit from wiping the lint cache

* devex: typescript for eslint config

* devex: upgrade lint plugins and dedupe lockfile

* lint: Fix autofixable rules with updated vue linter

* lint: Remove default for required prop

* lint: temporarily disable warnings for missing defaults

* deps: Update vue-tsc

* lint: use the config convenience utility, switch to using projectService

* lint: Fix redundant eslint config blocks and misplaced parser

* lint: Split up parsing options for typescript vs vue files
2025-09-16 19:23:03 -07:00
filtered
b8d8193a38 Copy startup terminal (#5585)
* Add copyTerminal translation key

* Add copy terminal button with select all functionality

* Remove copy button from error view button group

* Add hover-based copy button overlay to terminal

* Fix clipboard copy implementation in BaseTerminal

* Add 'Copy all' tooltip to terminal copy button

* Fix copy button to be away from right hand side

* Update copy button to respect existing selection

- Copy only selected text if any exists
- Copy all text and clear selection if nothing selected
- Update tooltip to reflect new behavior

* Add dynamic tooltip showing actual copy action

- Show 'Copy selection' when text is selected
- Show 'Copy all' when no text is selected

* Remove redundant i18n

* Fix aria-label to use dynamic tooltip text

* Remove debug console.error statements from useTerminal

Clean up debug logging added during development:
- Remove selection change debug logging
- Remove focus state debug logging
- Remove keyboard event debug logging
- Remove copy/paste debug logging

* Remove redundant keyboard handling from useTerminal

The rebase commit already fixed basic copy/paste.
Removed only the complex keyboard event handling that
duplicates the rebase fix. Kept the valuable UI features:
- Hover copy button overlay
- Right-click context menu

* Use Tailwind transition classes instead of custom CSS

Replace custom .animate-fade-in with standard Tailwind
transition-opacity duration-200 classes

* Use VueUse useElementHover for robust hover handling

Replace manual mouseenter/mouseleave events with VueUse
useElementHover composable which properly handles all
edge cases including mouseout and interrupted events

* Move tooltip to left of button

Relieves squished tooltip

* Simplify code

* Fix listener lifecycle management

Consolidate setup into single onMounted block instead
of creating unnecessary duplicate lifecycle hooks

* Replace any type with proper IDisposable type

* Refactor copy logic for clarity

* Use v-show for proper opacity transitions

* Prefer optional chaining

* Use useEventListener for context menu

* Remove redundant opacity classes

* Add BaseTerminal component tests

* Use pointer-events for button interactivity

* Update tests for pointer-events button behavior

* Fix clipboard mock in tests

* Fix test expectations for opacity classes

* Simplify hover tests for button state

* Remove low-value 'renders terminal container' test

* Remove non-functional 'button responds to hover' test

* Remove implementation detail test for dispose listener

* Remove redundant 'tracks selection changes' test

* Remove obvious comments from test file

* Use cn() utility for conditional classes

* Update tests-ui/tests/components/bottomPanel/tabs/terminal/BaseTerminal.spec.ts

Co-authored-by: Alexander Brown <drjkl@comfy.org>

* [auto-fix] Apply ESLint and Prettier fixes

* Remove 'any' types from wrapper and terminalMock variables

Add assertion to verify onSelectionChange was called

* Move mountBaseTerminal factory to module scope

* Rename test file

- Current consensus is .test.ts for component files

* Update src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

* nit

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: GitHub Action <action@github.com>
2025-09-15 17:06:41 -07:00
filtered
bbff9c8217 Desktop: Add terminal context menu (text) (#5563)
* Add text context menu to terminal on right-click

Enable single right-click context menu in BaseTerminal for desktop app users.  Previously required two right clicks.

* Use useEventListener for context menu

* Fix overzealous tab-complete

* nit
2025-09-15 01:10:02 -07:00
Alexander Brown
85017dbba0 Upgrade: Tailwind v4 (#5246)
* temp: move tailwind calls out of the layer

* temp: ts tailwind config

* upgrade: Tailwind v4
This got a little out of hand.
Had to add a relative reference to the stylesheet in any component that uses @apply instead of the utility classes directly.

* upgrade: bg-opacity is now a modifier

* fix: Classic menu buttons assume a border

* Update test expectations [skip ci]

* fix: New preflight removal pattern

* fix: Skeletons don't have skin

* Update test expectations [skip ci]

* fix: Missing @reference

* [auto-fix] Apply ESLint and Prettier fixes

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: GitHub Action <action@github.com>
2025-09-03 12:37:43 -07:00
Benjamin Lu
7a1a2dd654 fix: Make bottom panel tab titles reactive to language changes (#5077)
* computed extraMenuItems

* add i18n key option

* underline fix

* Update locales [skip ci]

* restore title

* Update locales [skip ci]

* refactor: Extract tab title logic to helper method for better readability

- Moved complex nested ternary logic from template to getTabDisplayTitle helper
- Improves code readability and maintainability
- Addresses review feedback about using computed/method for performance

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-08-18 19:27:21 -04:00
Johnpaul Chiwetelu
2ed1704749 Translated Keyboard Shortcuts (#5007)
* fix: Update command label rendering to use i18n normalization

* fix: Replace deprecated  with t for command label rendering

* fix: Simplify command rendering check in ShortcutsList tests

* fix: Add missing translation for command label in ShortcutsList tests
2025-08-15 11:45:10 -07:00
Johnpaul Chiwetelu
70c06d10bb Keyboard Shortcut Bottom Panel (#4635) 2025-08-07 11:51:23 -07:00
Chenlei Hu
e45f5bdebb [lint] Fix remaining vue lint warnings (#3435) 2025-04-12 22:29:29 -04:00
Chenlei Hu
a03841cb1a [lint] Enable plugin vue recommended rules (#3403) 2025-04-11 12:53:20 -04:00
Chenlei Hu
dc5d7ea1be [lint] Enforce @typescript-eslint/no-floating-promises (#3402) 2025-04-11 12:19:22 -04:00
Chenlei Hu
2db29fc2af [TS] Fix ts-strict errors in Vue components (Part 1) (#3119) 2025-03-17 21:15:00 -04:00
Chenlei Hu
cdf42d5ad7 [Refactor] Move zod schemas to schemas/ folder (#2753) 2025-02-27 13:05:01 -05:00
Chenlei Hu
6525ae7cf4 [Refactor] Rename hooks/ to composables/ (#2437) 2025-02-05 15:05:56 -05:00
filtered
5f59fbdead [Desktop] Persist troubleshooting terminal when hidden (#2398)
Co-authored-by: github-actions <github-actions@github.com>
2025-02-02 14:29:47 -05:00
Chenlei Hu
ff445f5c95 Apply min col on logs terminal for colab (#2260) 2025-01-15 17:16:33 -05:00
Chenlei Hu
84b652a281 [CodeHealth] Convert useAutoSize to kwargs (#2259) 2025-01-15 17:06:45 -05:00
Chenlei Hu
d8f074fea0 [Lint] Sort imports (#2104) 2024-12-30 17:26:37 -05:00
Chenlei Hu
08f3370828 Use auto inferred type on electronAPI.Terminal (#1719) 2024-11-27 16:14:30 -05:00
filtered
f8bd910e63 Fix terminal resizes incorrectly in flex parent (#1663)
Pushes siblings or self off-screen
2024-11-24 11:31:29 -05:00
Chenlei Hu
26c3eeb942 Fix vue warning on unnecessary defineEmits import (#1588) 2024-11-18 13:15:16 -05:00
pythongosssss
b5f0c4bf73 [Electron] Terminal commands (#1531)
* Add live terminal output

* Fix scrolling

* Refactor loading

* Fallback to polling if endpoint fails

* Comment

* Move clientId to executionStore
Refactor types

* Remove polling

* wip terminal command input

* Refactor to use node-pty

* Hide tabs if not electron

* Lint fix

* ts fix

* Refactor tab components
2024-11-17 14:43:08 -05:00
pythongosssss
7e0b87dd32 Live terminal output (#1347)
* Add live terminal output

* Fix scrolling

* Refactor loading

* Fallback to polling if endpoint fails

* Comment

* Move clientId to executionStore
Refactor types

* Remove polling
2024-11-08 15:38:21 -05:00
Chenlei Hu
14a6687cc9 Integrated terminal (#1295)
* Add terminal tab

* Add basic terminal

* Style terminal

* Add keybinding

* Auto scroll:

* Mock for jest test
2024-10-24 17:31:00 -04:00
Chenlei Hu
d142893244 Add bottom panel support (#1294)
* Add bottom panel

* Bottom panel store

* Extract ExtensionSlot component

* Tab rendering

* Add toggle button on top menu bar

* nit

* Add toggle button tooltip

* Add command
2024-10-24 15:15:19 -04:00