Gittes-archive/spacedrive
2
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2025-12-11 20:15:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update file name display to include extensions in Explorer components

Browse Source 
- Modified Title, ColumnItem, FileCard, TableRow, and MediaViewItem components to conditionally render file extensions alongside file names, enhancing clarity for users.
- Ensured consistent display of file information across different views in the Explorer interface.
This commit is contained in:
Jamie Pine 2025-12-10 09:44:55 -08:00
parent 7f3eee3848
commit def6060b5a
5 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/interface/src/components/Explorer/File/Title.tsx
View File

@ -77,7 +77,7 @@ export function Title({
className className
)} )}
> >
{file.name} {file.name}{file.extension && `.${file.extension}`}
</div> </div>
); );
} }

2
packages/interface/src/components/Explorer/views/ColumnView/ColumnItem.tsx
View File

@ -63,7 +63,7 @@ export const ColumnItem = memo(
<div className="[&_*]:!rounded-[3px] flex-shrink-0"> <div className="[&_*]:!rounded-[3px] flex-shrink-0">
<FileComponent.Thumb file={file} size={20} /> <FileComponent.Thumb file={file} size={20} />
</div> </div>
<span className="text-sm truncate flex-1">{file.name}</span> <span className="text-sm truncate flex-1">{file.name}{file.extension && `.${file.extension}`}</span>
{file.kind === "Directory" && ( {file.kind === "Directory" && (
<svg <svg
className="size-3 text-ink-dull" className="size-3 text-ink-dull"

2
packages/interface/src/components/Explorer/views/GridView/FileCard.tsx
View File

@ -140,7 +140,7 @@ export const FileCard = memo(
selected && !dndIsDragging ? "bg-accent text-white" : "text-ink", selected && !dndIsDragging ? "bg-accent text-white" : "text-ink",
)} )}
> >
{file.name} {file.name}{file.extension && `.${file.extension}`}
</div> </div>
{showFileSize && file.size > 0 && ( {showFileSize && file.size > 0 && (
<div className="text-xs text-ink-dull mt-0.5"> <div className="text-xs text-ink-dull mt-0.5">

2
packages/interface/src/components/Explorer/views/ListView/TableRow.tsx
View File

@ -184,7 +184,7 @@ const NameCell = memo(function NameCell({ file }: { file: File }) {
</div> </div>
{/* File name */} {/* File name */}
<span className="truncate text-sm text-ink">{file.name}</span> <span className="truncate text-sm text-ink">{file.name}{file.extension && `.${file.extension}`}</span>
{/* Tags (inline, compact) */} {/* Tags (inline, compact) */}
{file.tags && file.tags.length > 0 && ( {file.tags && file.tags.length > 0 && (

2
packages/interface/src/components/Explorer/views/MediaView/MediaViewItem.tsx
View File

@ -93,7 +93,7 @@ export const MediaViewItem = memo(function MediaViewItem({
{/* Hover overlay with file name */} {/* Hover overlay with file name */}
<div className="absolute inset-x-0 bottom-0 px-2 py-1.5 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"> <div className="absolute inset-x-0 bottom-0 px-2 py-1.5 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
<div className="text-white text-xs font-medium truncate"> <div className="text-white text-xs font-medium truncate">
{file.name} {file.name}{file.extension && `.${file.extension}`}
</div> </div>
</div> </div>