Skip to content

feat: use distinct icons for Close file and Discard actions #161

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.

Sign up for GitHub

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
k1LoW merged 3 commits into from
Apr 4, 2026
Merged

feat: use distinct icons for Close file and Discard actions #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2f71be4
feat: use distinct icons for Close file and Discard actions
k1LoW Apr 4, 2026
670a038
refactor: extract shared RemoveIcon component to deduplicate SVG paths
k1LoW Apr 4, 2026
341f253
fix: add aria-label to CloseFileButton for accessibility
k1LoW Apr 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions internal/frontend/src/components/CloseFileButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { RemoveIcon } from "./RemoveIcon";

interface CloseFileButtonProps {
onClose: () => void;
uploaded?: boolean;
Expand All @@ -8,11 +10,10 @@ export function CloseFileButton({ onClose, uploaded }: CloseFileButtonProps) {
<button
className="flex items-center justify-center bg-transparent border border-gh-border rounded-md p-1.5 text-gh-text-secondary cursor-pointer transition-colors duration-150 hover:bg-gh-bg-hover"
onClick={onClose}
Comment thread
k1LoW marked this conversation as resolved.
aria-label={uploaded ? "Discard" : "Close file"}
title={uploaded ? "Discard" : "Close file"}
>
<svg className="size-5" viewBox="0 0 16 16" fill="currentColor">
<path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z" />
</svg>
<RemoveIcon uploaded={uploaded} />
</button>
);
}
5 changes: 2 additions & 3 deletions internal/frontend/src/components/FileContextMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { FileEntry, Group } from "../hooks/useApi";
import { RemoveIcon } from "./RemoveIcon";

const MENU_ITEM_CLASS =
"w-full px-3 py-1.5 text-left text-sm bg-transparent border-none cursor-pointer text-gh-text-secondary hover:bg-gh-bg-hover hover:text-gh-text transition-colors duration-150 flex items-center gap-2";
Expand Down Expand Up @@ -104,9 +105,7 @@ export function FileContextMenu({
)}
<div className="border-t border-gh-border my-1" />
<button className={MENU_ITEM_CLASS} onClick={() => onRemove(file.id)}>
<svg className="size-4" viewBox="0 0 16 16" fill="currentColor">
<path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z" />
</svg>
<RemoveIcon uploaded={file.uploaded} className="size-4" />
{file.uploaded ? "Discard" : "Close"}
</button>
</div>
Expand Down
33 changes: 33 additions & 0 deletions internal/frontend/src/components/RemoveIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
interface RemoveIconProps {
uploaded?: boolean;
className?: string;
}

export function RemoveIcon({ uploaded, className = "size-5" }: RemoveIconProps) {
return (
<svg
className={className}
fill="none"
stroke="currentColor"
strokeWidth={1.5}
viewBox="0 0 24 24"
>
{uploaded ? (
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
/>
) : (
<>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M14.25 2.25H6a1.5 1.5 0 0 0-1.5 1.5v16.5a1.5 1.5 0 0 0 1.5 1.5h3M14.25 2.25V7.5H19.5V10M14.25 2.25L19.5 7.5"
/>
<path strokeLinecap="round" strokeLinejoin="round" d="M13 13.5l8 8m0-8-8 8" />
</>
)}
</svg>
);
}
Loading