Skip to content

Feat/new UI assets management #2270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Jun 26, 2025
Merged

Feat/new UI assets management #2270

merged 12 commits into from
Jun 26, 2025

Conversation

spartan-vutrannguyen
Copy link
Contributor

@spartan-vutrannguyen spartan-vutrannguyen commented Jun 24, 2025

Description

Related Issues

Type of Change

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

Testing

Screenshots (if applicable)

Additional Notes


Important

Introduce new UI for managing image assets with folder and image operations, updating related logic and components.

  • New Features:
    • Add folder management UI in folder-dropdown-menu.tsx, folder-dropdown.tsx, folder-list.tsx, folder-tab.tsx, and index.tsx.
    • Add image management UI in image-dropdown-menu.tsx, image-item.tsx, and image-list.tsx.
    • Add modals for folder operations in folder-create-modal.tsx, folder-delete-modal.tsx, folder-move-modal.tsx, and folder-rename-modal.tsx.
    • Add hooks for image operations in use-folder-images.ts, use-folder.ts, use-image-delete.ts, use-image-drag-drop.ts, use-image-loading.ts, use-image-move.ts, use-image-rename.ts, use-image-search.ts, and use-image-upload.ts.
  • Behavior Changes:
    • Change IMAGE_FOLDER default to public in constants/src/editor.ts.
    • Update ImageManager in image/index.ts to handle new folder structure.
    • Modify SandboxManager in sandbox/index.ts to support file renaming and moving.
  • Misc:
    • Add MoveToFolder icon in icons/index.tsx.
    • Update settings-modal components to use new image management logic.

This description was created by Ellipsis for 06989ad. You can customize this summary. It will automatically update as commits are pushed.

Copy link

vercel bot commented Jun 24, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 26, 2025 6:14pm
web ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 26, 2025 6:14pm

Copy link

supabase bot commented Jun 24, 2025

This pull request has been ignored for the connected project wowaemfasoptxrdjhilu because there are no changes detected in apps/backend/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@@ -318,6 +318,8 @@ export class SandboxManager {

async writeBinaryFile(path: string, content: Buffer | Uint8Array): Promise<boolean> {
const normalizedPath = normalizePath(path);
console.log('normalizedPath', normalizedPath);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove the debug log (console.log('normalizedPath', normalizedPath)) before merging to production.

Suggested change
console.log('normalizedPath', normalizedPath);

}

for (const [, subfolder] of folder.children) {
moveSubfolder(subfolder, newPath, session);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The recursive call to moveSubfolder in moveFolderContents is not awaited, which might lead to unhandled async behavior. Consider awaiting the call or handling its errors explicitly.

Suggested change
moveSubfolder(subfolder, newPath, session);
await moveSubfolder(subfolder, newPath, session);

Copy link
Contributor

@Kitenite Kitenite left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding an image doesn't seem to show anything changed? It buffers, then compress is called, then nothing...

I see that the image is added in the file system but nothing changes in the image tab

Screenshot 2025-06-25 at 11 57 40 PM

import { useEditorEngine } from '@/components/store/editor';
import { useImagesContext } from '../providers/images-provider';

export const useImageDragDrop = (currentFolder?: string) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this still needs to be implemented?

editorEngine.state.editorMode = EditorMode.DESIGN;
}, [editorEngine.state]);

const onImageDragEnd = useCallback(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This specifically.

Copy link
Contributor

@Kitenite Kitenite left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! Looks like just missing the drag into canvas part and we're good!

@Kitenite Kitenite merged commit d9d740f into main Jun 26, 2025
2 of 4 checks passed
Rish-it pushed a commit to Rish-it/onlook that referenced this pull request Jun 28, 2025
* add folder features

* update upload function

* add confirm modal
@Kitenite Kitenite deleted the feat/new-ui-assets-management branch July 3, 2025 22:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants