fix: Layout and design issues

[centdix]

Important

Fixes layout and design issues across multiple Svelte components, enhancing UI consistency and user interaction.

• DropdownV2.svelte:
  • Removed TriggerableByAI wrapping from button, simplifying the structure.
  • Adjusted button class to h-auto for better layout flexibility.
• ScriptEditor.svelte:
  • Updated customHiddenIcon to use object syntax for consistency.
  • Added HideButton for AI panel toggle with shortcut L.
• HideButton.svelte:
  • Changed customHiddenIcon type to ButtonType.Icon.
  • Adjusted button icon logic for hidden state.
• Button.svelte:
  • Changed dropdown button class to h-auto for consistent sizing.
• Drawer.svelte:
  • Adjusted style to include calc for --adjusted-offset for better alignment.
• AIChat.svelte:
  • Integrated HideButton for AI panel toggle.
  • Removed headerRight snippet.
• AIChatDisplay.svelte:
  • Added instructionsTextarea for non-script modes.
  • Updated focus logic based on chat mode.
• FlowAIButton.svelte:
  • Adjusted button style and added Popover for AI enablement message.
• WindmillAiIcon.svelte:
  • New icon component with dark mode support.
• MenuButton.svelte:
  • Added iconProps for additional icon customization.
• +layout.svelte:
  • Replaced GlobalChat with AiChat for chat panel.

^{This description was created by for 0cb9cb5. You can customize this summary. It will automatically update as commits are pushed.}

[cloudflare-workers-and-pages]

Deploying windmill with    Cloudflare Pages

Latest commit:	f048d1d
Status:	✅  Deploy successful!
Preview URL:	https://dd92d300.windmill.pages.dev
Branch Preview URL:	https://fg-aichaticon.windmill.pages.dev

View logs

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to 0cb9cb5 in 2 minutes and 2 seconds. Click for details.

• Reviewed 442 lines of code in 13 files
• Skipped 0 files when reviewing.
• Skipped posting 10 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. backend/ee-repo-ref.txt:1

• Draft comment:
  Verify that the updated commit hash (d2cf3a77ec5914339756d06a117f47db8d09b797) is intentional.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to verify their intention, which is against the rules. It doesn't provide a specific suggestion or ask for a specific test to be written. Therefore, it should be removed.

2. frontend/src/lib/components/DropdownV2.svelte:85

• Draft comment:
  Consider adding appropriate ARIA attributes (e.g. aria-expanded) to the dropdown button for improved accessibility.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% Melt UI is a well-known accessibility-focused UI library that handles ARIA attributes automatically through its createDropdownMenu functionality. The use:melt={$trigger} directive likely already adds appropriate ARIA attributes. Without seeing the actual rendered HTML or Melt's implementation, suggesting additional ARIA attributes could conflict with what Melt provides. I could be wrong about Melt UI's automatic ARIA handling. The library's behavior might need to be verified. Given Melt UI's focus on accessibility and the use of its dropdown menu system, it's more likely that ARIA attributes are already handled correctly by the library. The comment should be deleted as it may conflict with the ARIA attributes already provided by Melt UI, and we don't have strong evidence that additional ARIA attributes are needed.

3. frontend/src/lib/components/apps/editor/settingsPanel/HideButton.svelte:25

• Draft comment:
  The type for 'customHiddenIcon' has been updated to use ButtonType.Icon. Ensure all consumers use the new object format (e.g., { icon: YourIcon }) consistently.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to ensure that all consumers use the new object format consistently. This falls under the rule of not asking the author to ensure behavior is intended or to double-check things. Therefore, this comment should be removed.

4. frontend/src/lib/components/common/button/Button.svelte:296

• Draft comment:
  The Dropdown component now uses 'class="h-auto w-fit"' instead of 'h-full'. Verify that changing the button’s height does not adversely affect vertical alignment in all contexts.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to verify the impact of a change, which violates the rule against asking for confirmation or verification. It does not provide a specific suggestion or ask for a test to be written.

5. frontend/src/lib/components/common/drawer/Drawer.svelte:84

• Draft comment:
  The style now uses 'calc(... + 4px)' for --adjusted-offset. Please add a comment explaining the rationale behind the additional 4px to ensure consistent rendering across browsers.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking for an explanation of a specific code change, which is not allowed by the rules. It is not making a suggestion or pointing out a potential issue with the code itself.

6. frontend/src/lib/components/copilot/chat/AIChat.svelte:140

• Draft comment:
  The {headerRight} slot has been removed. Confirm that this removal is intentional and that no consumers rely on this slot.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

7. frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte:65

• Draft comment:
  The focusInput function now conditionally focuses the appropriate textarea based on aiChatManager.mode. Verify that switching modes results in the expected focus behavior.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is asking the PR author to verify the behavior of the focusInput function when switching modes. It does not provide a specific suggestion or point out a potential issue. It violates the rule against asking the author to verify or ensure behavior.

8. frontend/src/lib/components/sidebar/MenuButton.svelte:16

• Draft comment:
  New 'iconProps' prop is now supported and spread into the icon component. Ensure that this does not conflict with existing icon properties and that consumers are updated accordingly.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to ensure that there is no conflict with existing icon properties and that consumers are updated. This falls under asking the author to ensure behavior is intended and to double-check things, which violates the rules.

9. frontend/src/routes/(root)/(logged)/+layout.svelte:662

• Draft comment:
  Using '99.8' instead of '100' in the Pane size calculation appears to be a workaround. Please add a comment explaining this magic value to aid future maintenance.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% While magic numbers generally should be documented, this appears to be a minor UI layout tweak to avoid some visual glitch. The exact value (99.8 vs 100) is not critically important - it just needs to be slightly less than 100. Adding a comment would add noise without providing much value. The code is already clear that this is about pane sizing. I could be wrong about the importance of documenting UI layout magic numbers - future developers may waste time trying to understand why exactly 99.8 was chosen. The exact value is not important enough to warrant a comment - it's clearly just a slight adjustment to make the split panes layout work properly. Comments about minor UI tweaks like this tend to become stale and add unnecessary noise. Delete this comment as it requests documentation for a minor UI implementation detail that doesn't need explanation.

10. frontend/src/routes/(root)/(logged)/+layout.svelte:456

• Draft comment:
  Passing 'iconProps={{ forceDarkMode: true }}' to MenuButton for the AI panel is clear. Just ensure that the new icon styling remains consistent across dark/light modes.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to ensure consistency in icon styling across different modes, which is similar to asking them to double-check or verify something. This violates the rule against asking the author to ensure behavior is intended or tested.

Workflow ID: wflow_xEMlIrylaQ5baHuE

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}