BLOG-127 Image management (upload) #138

Merged

squid merged 5 commits from BLOG-127_image_management into main 2025-10-14 02:23:07 +08:00

Conversation 3 Commits 5 Files Changed 43 +844 -26

squid commented 2025-10-14 02:14:13 +08:00

Owner

Copy Link

Description

• Implement the frontend to upload image.
• It will copy the image URL when uploaded.

Package Changes

{
		"@internationalized/date": "^3.10.0",
		"@lucide/svelte": "^0.544.0",
		"bits-ui": "^2.11.5",
		"mode-watcher": "^1.1.0",
		"svelte-sonner": "^1.0.5"
}

Screenshots

Scenario	Screenshot
Dialog
Empty file or invalid format
Success
Error

Reference

Resolves #127.

Checklist

• A milestone is set
• The related issuse has been linked to this branch

### Description - Implement the frontend to upload image. - It will copy the image URL when uploaded. ### Package Changes ```json { "@internationalized/date": "^3.10.0", "@lucide/svelte": "^0.544.0", "bits-ui": "^2.11.5", "mode-watcher": "^1.1.0", "svelte-sonner": "^1.0.5" } ``` ### Screenshots |Scenario|Screenshot| |-|-| |Dialog|| |Empty file or invalid format|| |Success|| |Error|| ### Reference Resolves #127. ### Checklist - [x] A milestone is set - [x] The related issuse has been linked to this branch

截圖 2025-10-14 凌晨2.16.13.png

295 KiB

截圖 2025-10-14 凌晨2.17.12.png

304 KiB

截圖 2025-10-14 凌晨2.17.32.png

270 KiB

截圖 2025-10-14 凌晨2.18.52.png

265 KiB

squid added this to the 0.4 milestone 2025-10-14 02:14:13 +08:00

squid added 4 commits 2025-10-14 02:14:13 +08:00

feat: add Image Management page and upload dialog 731b8e5d8b

style: pnpm format 2fcb502527

feat: implement image upload functionality with Image Management page and related services b9fed0e340

fix: eslint f367b56633

bot commented 2025-10-14 02:14:21 +08:00

Collaborator

Copy Link

/improve

/improve

bot commented 2025-10-14 02:14:26 +08:00

Collaborator

Copy Link

PR Code Suggestions ✨

Category	Suggestion	Impact
General	Update deprecated Zod integer validation The z.int32() method in Zod is deprecated. It's recommended to use z.number().int() for integer validation to ensure compatibility with newer Zod versions and maintain best practices. frontend/src/lib/image/adapter/gateway/imageInfoResponseDto.ts [4] -id: z.int32(), +id: z.number().int(), Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a deprecated Zod method z.int32() and proposes the updated z.number().int(), which is a best practice for maintaining compatibility and code quality.	Medium
	Correct Tailwind focus outline class The Tailwind CSS class focus:outline-hidden is likely a typo and not a valid class. It should be focus:outline-none to remove the default focus outline, or a custom outline should be defined for accessibility. Using an invalid class might lead to unexpected styling or accessibility issues for keyboard users. frontend/src/lib/common/framework/components/ui/dialog/dialog-content.svelte [34] -class="absolute end-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" +class="absolute end-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies a likely typo focus:outline-hidden in the Tailwind CSS class and provides the correct class focus:outline-none, which improves styling and ensures proper behavior.	Medium

## PR Code Suggestions ✨ <!-- --> <table><thead><tr><td><strong>Category</strong></td><td align=left><strong>Suggestion&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </strong></td><td align=center><strong>Impact</strong></td></tr><tbody><tr><td rowspan=2>General</td> <td> <details><summary>Update deprecated Zod integer validation</summary> ___ **The <code>z.int32()</code> method in Zod is deprecated. It's recommended to use <code>z.number().int()</code> <br>for integer validation to ensure compatibility with newer Zod versions and maintain <br>best practices.** [frontend/src/lib/image/adapter/gateway/imageInfoResponseDto.ts [4]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-127_image_management/frontend/src/lib/image/adapter/gateway/imageInfoResponseDto.ts#L4-L4) ```diff -id: z.int32(), +id: z.number().int(), ``` <details><summary>Suggestion importance[1-10]: 8</summary> __ Why: The suggestion correctly identifies a deprecated Zod method `z.int32()` and proposes the updated `z.number().int()`, which is a best practice for maintaining compatibility and code quality. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Correct Tailwind focus outline class</summary> ___ **The Tailwind CSS class <code>focus:outline-hidden</code> is likely a typo and not a valid class. <br>It should be <code>focus:outline-none</code> to remove the default focus outline, or a custom <br>outline should be defined for accessibility. Using an invalid class might lead to <br>unexpected styling or accessibility issues for keyboard users.** [frontend/src/lib/common/framework/components/ui/dialog/dialog-content.svelte [34]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-127_image_management/frontend/src/lib/common/framework/components/ui/dialog/dialog-content.svelte#L34-L34) ```diff -class="absolute end-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" +class="absolute end-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" ``` <details><summary>Suggestion importance[1-10]: 7</summary> __ Why: The suggestion correctly identifies a likely typo `focus:outline-hidden` in the Tailwind CSS class and provides the correct class `focus:outline-none`, which improves styling and ensures proper behavior. </details></details></td><td align=center>Medium </td></tr></tr></tbody></table>

squid added 1 commit 2025-10-14 02:21:09 +08:00

fix: prevent dialog from closing on outside click and escape key 8b1273a819

squid commented 2025-10-14 02:21:42 +08:00

Author

Owner

Copy Link

Ignore bot's comments.

Ignore bot's comments.

squid scheduled this pull request to auto merge when all checks succeed 2025-10-14 02:22:16 +08:00

squid merged commit de2099011b into main 2025-10-14 02:23:07 +08:00

squid referenced this issue from a commit 2025-10-14 02:23:08 +08:00

BLOG-127 Image management (upload) (#138)

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

bug

Something is not working

design

dev

automation

dev

backend

dev

frontend

dev

improvement

duplicate

This issue or pull request already exists

enhancement

New feature

help wanted

Need some help

invalid

Something is wrong

question

More information is needed

wontfix

This won't be fixed

No Label

Milestone

No items

No Milestone 0.4

Projects

Clear projects

No project

Assignees

Clear assignees

bot zoe squid

No Assignees

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: squid/blog#138

No description provided.