mirror of
https://github.com/supabase/supabase.git
synced 2026-09-06 09:59:03 +08:00
76257f164b
## What kind of change does this PR introduce? Bug fix stacked on #48478. ## What is the current behavior? Storage Explorer renders the custom closed-folder icon at `1.5` but leaves the Lucide open-folder icon at its default `2`. The duplicated file-picker implementation also uses a different set of stroke-width overrides. ## What is the new behavior? A shared `StorageRowIcon` renders loading, open and closed folder, image, audio, video and generic file icons at `1.5` across Storage Explorer, row editing and the bucket file picker. Test by comparing open and closed folders and file-type rows in Storage Explorer and the bucket file picker. | Before | After | | --- | --- | | <img width="524" height="336" alt="CleanShot 2026-08-03 at 18 38 06@2x" src="https://github.com/user-attachments/assets/15eb8b9f-69fc-4eee-8428-d7ec26dce8dc" /> | <img width="522" height="328" alt="CleanShot 2026-08-03 at 18 39 20@2x" src="https://github.com/user-attachments/assets/17b7dddd-8d36-421c-8356-c9c1bd7456e8" /> | | _Thicker image and file icon compared to folder icon_ | _Every icon has the same stroke thickness_ | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Standardized file, folder, media, and loading icons across storage views. * Improved visual consistency with unified icon sizing, styling, and stroke width. * **Tests** * Added coverage for loading, folder, media, and generic file icon states. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import { FilesBucket as FilesBucketIcon } from 'icons'
|
|
import { File, Film, FolderOpen, Image as ImageIcon, LoaderCircle, Music } from 'lucide-react'
|
|
|
|
import { STORAGE_ROW_STATUS, STORAGE_ROW_TYPES, STORAGE_VIEWS } from './Storage.constants'
|
|
|
|
const ICON_STROKE_WIDTH = 1.5
|
|
|
|
interface StorageRowIconProps {
|
|
view: STORAGE_VIEWS
|
|
status: STORAGE_ROW_STATUS
|
|
fileType: string
|
|
isOpened?: boolean
|
|
mimeType: string | undefined
|
|
}
|
|
|
|
export const StorageRowIcon = ({
|
|
view,
|
|
status,
|
|
fileType,
|
|
isOpened = false,
|
|
mimeType,
|
|
}: StorageRowIconProps) => {
|
|
if (view === STORAGE_VIEWS.LIST && status === STORAGE_ROW_STATUS.LOADING) {
|
|
return (
|
|
<LoaderCircle
|
|
size={14}
|
|
strokeWidth={ICON_STROKE_WIDTH}
|
|
className="animate-spin text-foreground-lighter"
|
|
/>
|
|
)
|
|
}
|
|
|
|
if (fileType === STORAGE_ROW_TYPES.FOLDER) {
|
|
return isOpened ? (
|
|
<FolderOpen size={16} strokeWidth={ICON_STROKE_WIDTH} className="text-foreground-lighter" />
|
|
) : (
|
|
<FilesBucketIcon
|
|
size={16}
|
|
strokeWidth={ICON_STROKE_WIDTH}
|
|
className="text-foreground-lighter"
|
|
/>
|
|
)
|
|
}
|
|
|
|
if (mimeType?.includes('image')) {
|
|
return (
|
|
<ImageIcon size={16} strokeWidth={ICON_STROKE_WIDTH} className="text-foreground-lighter" />
|
|
)
|
|
}
|
|
|
|
if (mimeType?.includes('audio')) {
|
|
return <Music size={16} strokeWidth={ICON_STROKE_WIDTH} className="text-foreground-lighter" />
|
|
}
|
|
|
|
if (mimeType?.includes('video')) {
|
|
return <Film size={16} strokeWidth={ICON_STROKE_WIDTH} className="text-foreground-lighter" />
|
|
}
|
|
|
|
return <File size={16} strokeWidth={ICON_STROKE_WIDTH} className="text-foreground-lighter" />
|
|
}
|