App Panel, Installed Apps, App Details

[thughey]

Description

Related Issues

Type of Change

• Bug fix
• New feature
• Documentation update
• Release
• Refactor
• Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

---

Important

Adds app management feature to the editor with new UI components and localization updates.

• New Feature:
  • Adds AppsTab to LayersPanel for browsing and managing apps.
  • Introduces AppCard, InstalledAppCard, and DetailPanel components for app display and interaction.
  • Supports app installation, detail viewing, and error handling.
• Localization:
  • Updates translation.json files in en, ja, kr, and zh to include "Apps" tab.
• UI Enhancements:
  • Adds brand color support for apps in AppCard.tsx, InstalledAppCard.tsx, and DetailPanel/index.tsx.
  • Implements hover and active state management for app cards.
  • Integrates search and sort functionality in AppsTab/index.tsx.
• Miscellaneous:
  • Adjusts layout and styling in ImageTab/index.tsx and PageTab/index.tsx for consistency.

^{This description was created by for 52ab6a7. It will automatically update as commits are pushed.}

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to dc27455 in 3 minutes and 35 seconds

More details

• Looked at 1654 lines of code in 15 files
• Skipped 0 files when reviewing.
• Skipped posting 24 drafted comments based on config settings.

1. apps/studio/src/lib/constants/ui.ts:8

• Draft comment:
  Good centralization of UI constants. Consider adding additional panel sizes if needed in the future.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

2. apps/studio/src/locales/en/translation.json:241

• Draft comment:
  Added the 'apps' translation key under brand. Verify consistency with other locales.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

3. apps/studio/src/routes/editor/LayersPanel/AppsTab/AppCard.tsx:80

• Draft comment:
  Consider handling error cases for missing/failed image loads (e.g. use onError handler for ).
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50%
  None

4. apps/studio/src/routes/editor/LayersPanel/AppsTab/DetailPanel/ToolCard.tsx:17

• Draft comment:
  Consider extracting the AppIcon component (used as a placeholder) into a shared component to avoid duplication.
• Reason this comment was not posted:
  Confidence changes required: 40% <= threshold 50%
  None

5. apps/studio/src/routes/editor/LayersPanel/AppsTab/DetailPanel/index.tsx:176

• Draft comment:
  The SVG decoration code is repeated several times. Consider extracting a reusable component or mapping over array of sizes to DRY up the code.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50%
  None

6. apps/studio/src/routes/editor/LayersPanel/AppsTab/InstalledAppCard.tsx:112

• Draft comment:
  Looks good; the error indicator dot logic is clearly separated. Ensure integration with app toggle state in future if needed.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

7. apps/studio/src/routes/editor/LayersPanel/AppsTab/index.tsx:165

• Draft comment:
  Complex state management with hover and selection is handled well. Verify that performance is acceptable when filtering large datasets.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

8. apps/studio/src/routes/editor/LayersPanel/BrandTab/ColorPanel/index.tsx:119

• Draft comment:
  The processConfigObject function is complex; consider adding inline comments or unit tests for this part to ease maintenance.
• Reason this comment was not posted:
  Confidence changes required: 30% <= threshold 50%
  None

9. apps/studio/src/routes/editor/LayersPanel/BrandTab/FontPanel/index.tsx:56

• Draft comment:
  Good separation of concerns. Consider adding ARIA labels for accessibility on buttons and inputs.
• Reason this comment was not posted:
  Confidence changes required: 30% <= threshold 50%
  None

10. apps/studio/src/routes/editor/LayersPanel/BrandTab/index.tsx:79

• Draft comment:
  BrandTab UI looks straightforward. Ensure the repeated use of the same color values is intentional.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

11. apps/studio/src/routes/editor/LayersPanel/ImageTab/index.tsx:90

• Draft comment:
  Drag and drop logic is well-implemented. Consider resetting pointer events in a finally block to guarantee restoration even if an error occurs during drag end.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50%
  None

12. apps/studio/src/routes/editor/LayersPanel/LayersTab.tsx:60

• Draft comment:
  Good use of react-arborist for tree rendering. Ensure dependency arrays for useCallback and useEffect are complete for safe performance.
• Reason this comment was not posted:
  Confidence changes required: 30% <= threshold 50%
  None

13. apps/studio/src/routes/editor/LayersPanel/PageTab/index.tsx:35

• Draft comment:
  The recursive filterNodes function for search is well crafted. Consider memoizing getDisplayName if the tree grows larger.
• Reason this comment was not posted:
  Confidence changes required: 30% <= threshold 50%
  None

14. apps/studio/src/routes/editor/LayersPanel/WindowsTab/index.tsx:28

• Draft comment:
  Consider externalizing the duplicated string for window width if used elsewhere. Otherwise, it's clear.
• Reason this comment was not posted:
  Confidence changes required: 20% <= threshold 50%
  None

15. apps/studio/src/routes/editor/LayersPanel/index.tsx:25

• Draft comment:
  The main LayersPanel composes multiple tabs well. Consider refactoring the mouse leave logic (lines 60-68) for clarity if additional behavior is added later.
• Reason this comment was not posted:
  Confidence changes required: 40% <= threshold 50%
  None

16. apps/studio/src/routes/editor/LayersPanel/AppsTab/AppCard.tsx:83

• Draft comment:
  Using the CSS filter 'brightness(0) invert(1)' works well for SVG icons. Ensure it also renders non‐SVG images correctly or provide a fallback.
• 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%
  This is a UI styling concern about how images are rendered. The code comment explicitly states it's for SVGs, suggesting that's the intended use case. The filter technique is a common way to make SVGs white. Even if it doesn't work perfectly for non-SVGs, that would be a UI/styling issue that the author likely considered.
  The comment raises a valid technical point - this filter technique might not work well for all image types. There could be edge cases where non-SVG icons look wrong.
  However, this is primarily a UI/styling concern, and our rules explicitly state not to comment on UI/styling changes. We should trust that the author tested this with their intended use cases.
  Delete this comment as it violates our rule about not commenting on UI/styling changes. We should assume the author has tested the visual appearance appropriately.

17. apps/studio/src/routes/editor/LayersPanel/AppsTab/DetailPanel/index.tsx:76

• Draft comment:
  The disable button handler currently only logs a toggle action. Consider providing user feedback (e.g. visual confirmation or a message) when toggling the app state.
• 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%
  The comment suggests adding feedback, but the code already has multiple visual indicators: 1) The checkbox icon toggles 2) The "Active" status is shown 3) The entire UI updates through React state. The console.log is likely just for development. Additional feedback would be redundant.
  Perhaps there could be a need for an explicit success/error message if the disable action involves an API call that could fail? But there's no evidence of that in the code.
  The existing visual feedback through UI state changes is sufficient for a simple toggle action. If backend integration is added later, that would be the appropriate time to add error handling and messaging.
  Delete the comment since the code already provides adequate visual feedback through UI state changes and the suggestion would add unnecessary complexity.

18. apps/studio/src/routes/editor/LayersPanel/AppsTab/InstalledAppCard.tsx:68

• Draft comment:
  All apps are hard‐coded as enabled by default (isEnabled = true). Consider integrating a dynamic enabled state if the app’s status can change.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 30% vs. threshold = 50%
  The isEnabled variable appears to be dead code - it's declared but never used. The onToggle prop exists but handleToggleChange is also never used. This suggests the component is in transition or these features were removed. The comment points out a real issue, but since the code isn't used, fixing it wouldn't impact anything.
  The code might be intentionally simplified for now, with plans to add the toggle functionality back later. The hardcoded value might be a temporary solution during refactoring.
  However, dead code should be removed rather than fixed. If the toggle functionality is needed later, it can be added back then.
  Rather than suggesting to make isEnabled dynamic, the comment should suggest removing the unused isEnabled variable and handleToggleChange function entirely.

19. apps/studio/src/routes/editor/LayersPanel/BrandTab/ColorPanel/index.tsx:118

• Draft comment:
  For clarity, consider moving the 'extractVarName' function declaration above 'processConfigObject'. This reduces potential confusion about function availability.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

20. apps/studio/src/routes/editor/LayersPanel/PageTab/index.tsx:40

• Draft comment:
  Consider debouncing the search input to reduce frequent re-renders during page filtering.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

21. apps/studio/src/routes/editor/LayersPanel/index.tsx:85

• Draft comment:
  The 'isLocked' state logic for tab selection is somewhat unclear. Please add inline comments to clarify its purpose and behavior.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

22. apps/studio/src/routes/editor/LayersPanel/index.tsx:26

• Draft comment:
  The PR description mentions adding onboarding documentation for frameworks (Next.js, Remix, Webpack, Babel), but no such documentation changes are evident. Please ensure that the required documentation is included to fully resolve the issue.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

23. apps/studio/src/routes/editor/LayersPanel/BrandTab/ColorPanel/index.tsx:11

• Draft comment:
  Typographical note: The component and file are named 'BrandPalletGroup' in the import (line 11) and usage (line 313). Given the context (managing color groups), it might be more appropriate to use 'BrandPaletteGroup' (with an 'e') to align with common terminology for color palettes. If this naming is intentional, please ignore.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

24. apps/studio/src/routes/editor/LayersPanel/index.tsx:13

• Draft comment:
  Typo: The component is imported as 'ImagesTab' but the file path is './ImageTab'. Please check if this is intended or if it should be './ImagesTab' to match the usage.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

Workflow ID: wflow_6oKAYxLMTeCPTQ7M

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

Consider moving sample app data (APP_CATEGORIES, FEATURED_APPS, ALL_APPS, INSTALLED_APPS) into a separate module for better maintainability and scalability.

[ellipsis-dev]

In the SVG <path> element (around lines 290-297), the attributes stroke-width, stroke-linecap, and stroke-linejoin are written in kebab-case. In React JSX, these should be in camelCase (i.e., strokeWidth, strokeLinecap, and strokeLinejoin) to ensure proper rendering.

[ellipsis-dev]

👍 Looks good to me! Incremental review on f3f8ce9 in 1 minute and 13 seconds

More details

• Looked at 190 lines of code in 8 files
• Skipped 0 files when reviewing.
• Skipped posting 16 drafted comments based on config settings.

1. apps/studio/src/lib/constants/ui.ts:1

• Draft comment:
  Removal of centralized UI constants. Ensure that inline classes remain consistent throughout the app.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

2. apps/studio/src/routes/editor/LayersPanel/AppsTab/index.tsx:1

• Draft comment:
  Re-ordering of imports and removal of PANEL_DIMENSIONS usage is clean. Verify inline tailwind classes provide consistent panel sizing.
• Reason this comment was not posted:
  Confidence changes required: 20% <= threshold 50%
  None

3. apps/studio/src/routes/editor/LayersPanel/BrandTab/FontPanel/index.tsx:93

• Draft comment:
  Removed PANEL_DIMENSIONS usage; inline classes now set layout. Confirm design consistency for min-height and widths.
• Reason this comment was not posted:
  Confidence changes required: 20% <= threshold 50%
  None

4. apps/studio/src/routes/editor/LayersPanel/BrandTab/index.tsx:71

• Draft comment:
  Removed PANEL_DIMENSIONS; using inline layout classes. Ensure the new inline styles match design intent.
• Reason this comment was not posted:
  Confidence changes required: 20% <= threshold 50%
  None

5. apps/studio/src/routes/editor/LayersPanel/ImageTab/index.tsx:18

• Draft comment:
  Inline usage replacing PANEL_DIMENSIONS looks correct. Verify that overall panel sizing and responsiveness are maintained.
• Reason this comment was not posted:
  Confidence changes required: 20% <= threshold 50%
  None

6. apps/studio/src/routes/editor/LayersPanel/LayersTab.tsx:127

• Draft comment:
  Removal of PANEL_DIMENSIONS from className is appropriately handled. The inline classes maintain layout, no issues detected.
• Reason this comment was not posted:
  Confidence changes required: 10% <= threshold 50%
  None

7. apps/studio/src/routes/editor/LayersPanel/PageTab/index.tsx:159

• Draft comment:
  Inline class replacements in PagesTab are well-handled. Ensure that spacing and overflow styles meet design specs.
• Reason this comment was not posted:
  Confidence changes required: 10% <= threshold 50%
  None

8. apps/studio/src/routes/editor/LayersPanel/WindowsTab/index.tsx:22

• Draft comment:
  Using a local WIDTH variable and inline Tailwind classes for panel sizing is acceptable. Confirm button styling and state management still work as expected.
• Reason this comment was not posted:
  Confidence changes required: 10% <= threshold 50%
  None

9. apps/studio/src/lib/constants/ui.ts:1

• Draft comment:
  PANEL_DIMENSIONS constant was removed. Ensure that all panels apply the correct width/spacing inline so that the UI remains consistent.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

10. apps/studio/src/routes/editor/LayersPanel/AppsTab/index.tsx:206

• Draft comment:
  The main apps panel div no longer applies an explicit width (previously provided by PANEL_DIMENSIONS). Confirm the layout remains as expected.
• 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 confirm that the layout remains as expected after a change. This falls under the rule of not asking the author to confirm their intention or ensure behavior is intended. Therefore, this comment should be removed.

11. apps/studio/src/routes/editor/LayersPanel/BrandTab/FontPanel/index.tsx:87

• Draft comment:
  The filtering logic for site fonts uses filter coupled with findIndex, which is O(n²). This is probably fine for a small dataset, but consider optimization if the number of fonts grows.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

12. apps/studio/src/routes/editor/LayersPanel/ImageTab/index.tsx:90

• Draft comment:
  In the drag-and-drop and file upload handlers, images are uploaded sequentially inside a loop. For performance improvements, especially with many images, consider parallelizing the uploads with Promise.all.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

13. apps/studio/src/routes/editor/LayersPanel/LayersTab.tsx:17

• Draft comment:
  handleSelectChange is directly passed to useEffect. Consider wrapping it in useCallback so its reference remains stable and to avoid potential unnecessary re-renders.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

14. apps/studio/src/routes/editor/LayersPanel/PageTab/index.tsx:39

• Draft comment:
  The recursive filtering (filterNodes) clones nodes using the spread operator. This works well for small trees; however, if the page tree grows large, consider potential performance implications or memoizing the filtered result.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

15. apps/studio/src/routes/editor/LayersPanel/WindowsTab/index.tsx:22

• Draft comment:
  The WindowsTab uses an inline width definition (WIDTH = 'w-[275px]'). If this style is common among panels, consider centralizing such styling to ensure consistency.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

16. General:1

• Draft comment:
  The PR description mentions adding onboarding documentation for frameworks (Next.js, Remix, Webpack, Babel), but the diff does not show any documentation updates. Please confirm that the required docs are included.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

Workflow ID: wflow_mlDp7tGQxeBeFBBH

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Incremental review on 5a0136e in 50 seconds

More details

• Looked at 42 lines of code in 3 files
• Skipped 0 files when reviewing.
• Skipped posting 7 drafted comments based on config settings.

1. apps/studio/src/locales/ja/translation.json:153

• Draft comment:
  Added 'apps' key. Ensure its usage is consistent with the UI.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

2. apps/studio/src/locales/kr/translation.json:248

• Draft comment:
  Added 'apps' key translation. Verify consistency with the UI labels.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

3. apps/studio/src/locales/zh/translation.json:248

• Draft comment:
  New 'apps' key added; ensure it aligns with UI text.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

4. apps/studio/src/locales/ja/translation.json:151

• Draft comment:
  Added new 'apps' key with correct translation ('アプリ'). Ensure that the UI components correctly reference this key.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

5. apps/studio/src/locales/kr/translation.json:247

• Draft comment:
  Added new 'apps' key with the correct Korean translation ('앱').
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

6. apps/studio/src/locales/zh/translation.json:247

• Draft comment:
  Added new 'apps' key with the correct Chinese translation ('应用').
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

7. apps/studio/src/locales/ja/translation.json:150

• Draft comment:
  The PR description mentions adding onboarding docs (framework documentation), but this diff only updates translation keys. Please ensure that all intended changes are included.
• 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 intended changes are included, which violates the rule against asking the author to confirm their intention or ensure completeness. It also indirectly asks for the PR description to be updated, which is not allowed.

Workflow ID: wflow_EKteakHqToV1FuiV

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Incremental review on 52ab6a7 in 3 minutes and 47 seconds

More details

• Looked at 13 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 4 drafted comments based on config settings.

1. apps/studio/src/routes/editor/LayersPanel/ImageTab/index.tsx:334

• Draft comment:
  Ensure the new border styling (border-[0.5px] border-border) is consistent with the overall design. Note that fractional pixel borders can render inconsistently across browsers.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 0% vs. threshold = 50%
  The rules explicitly state "Do NOT comment on any pure frontend UI or styling changes, only logic. Assume that if the author changed the UI, they did it correctly." This is a pure UI styling change - adding a border to an image container. The comment also starts with "Ensure..." which is another red flag according to the rules.
  Maybe the browser compatibility issue is serious enough to warrant keeping the comment despite the rules? Maybe this could affect functionality?
  No - this is still fundamentally a UI styling concern. Even if there are minor browser differences, the rules tell us to trust the author on UI changes. The comment also uses speculative language about what "can" happen.
  This comment should be deleted as it violates multiple rules - it's about pure UI styling and uses "Ensure that..." phrasing.

2. apps/studio/src/routes/editor/LayersPanel/ImageTab/index.tsx:331

• Draft comment:
  PR description mentions onboarding documentation improvements, but the diff only covers a UI styling change. Confirm that all intended documentation updates and features are included.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  This comment asks the PR author to confirm their intention regarding the PR description and the changes included. It violates the rule against asking the author to confirm their intention or to update the PR description.

3. apps/studio/src/routes/editor/LayersPanel/ImageTab/index.tsx:334

• Draft comment:
  Ensure that using an arbitrary border width (border-[0.5px]) aligns with design guidelines and that 'border-border' is defined in the theme.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

4. apps/studio/src/routes/editor/LayersPanel/ImageTab/index.tsx:331

• Draft comment:
  PR description mentions onboarding docs and app details improvements, but the diff only shows a styling update. Please ensure all intended changes are included.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

Workflow ID: wflow_FhHa7s7i7jEx8JKm

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.