d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-05-30 00:05:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: fix project star button location by replacing folder icon (#793)

Browse Source
This commit is contained in:
Tim McNulty
2026-05-29 10:54:56 -04:00
committed by GitHub
parent 3b79aab958
commit 295bad9c00
1 changed files with 42 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/sidebar/view/subcomponents/SidebarProjectItem.tsx
View File

@@ -1,4 +1,4 @@
import { Check, ChevronDown, ChevronRight, Edit3, Folder, FolderOpen, Star, Trash2, X } from 'lucide-react';
import { Check, ChevronDown, ChevronRight, Edit3, Star, Trash2, X } from 'lucide-react';
import type { TFunction } from 'i18next';
import { Button } from '../../../../shared/view/ui';
@@ -131,18 +131,28 @@ export default function SidebarProjectItem({
>
<div className="flex items-center justify-between">
<div className="flex min-w-0 flex-1 items-center gap-3">
<div
<button
className={cn(
'w-8 h-8 rounded-lg flex items-center justify-center transition-colors',
isExpanded ? 'bg-primary/10' : 'bg-muted',
'w-8 h-8 rounded-lg flex items-center justify-center active:scale-90 transition-all duration-150 border',
isStarred
? 'bg-yellow-500/10 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800'
: 'bg-gray-500/10 dark:bg-gray-900/30 border-gray-200 dark:border-gray-800',
)}
onClick={(event) => {
event.stopPropagation();
toggleStarProject();
}}
title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
>
{isExpanded ? (
<FolderOpen className="h-4 w-4 text-primary" />
) : (
<Folder className="h-4 w-4 text-muted-foreground" />
)}
</div>
<Star
className={cn(
'w-4 h-4 transition-colors',
isStarred
? 'text-yellow-600 dark:text-yellow-400 fill-current'
: 'text-gray-600 dark:text-gray-400',
)}
/>
</button>
<div className="min-w-0 flex-1">
{isEditing ? (
@@ -212,29 +222,6 @@ export default function SidebarProjectItem({
</>
) : (
<>
<button
className={cn(
'w-8 h-8 rounded-lg flex items-center justify-center active:scale-90 transition-all duration-150 border',
isStarred
? 'bg-yellow-500/10 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800'
: 'bg-gray-500/10 dark:bg-gray-900/30 border-gray-200 dark:border-gray-800',
)}
onClick={(event) => {
event.stopPropagation();
toggleStarProject();
}}
title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
>
<Star
className={cn(
'w-4 h-4 transition-colors',
isStarred
? 'text-yellow-600 dark:text-yellow-400 fill-current'
: 'text-gray-600 dark:text-gray-400',
)}
/>
</button>
<button
className="flex h-8 w-8 items-center justify-center rounded-lg border border-red-200 bg-red-500/10 active:scale-90 dark:border-red-800 dark:bg-red-900/30"
onClick={(event) => {
@@ -281,11 +268,28 @@ export default function SidebarProjectItem({
onClick={selectAndToggleProject}
>
<div className="flex min-w-0 flex-1 items-center gap-3">
{isExpanded ? (
<FolderOpen className="h-4 w-4 flex-shrink-0 text-primary" />
) : (
<Folder className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
)}
<div
className={cn(
'w-6 h-6 flex items-center justify-center rounded cursor-pointer transition-all duration-200',
isStarred
? 'hover:bg-yellow-50 dark:hover:bg-yellow-900/20'
: 'opacity-40 hover:opacity-100 hover:bg-accent',
)}
onClick={(event) => {
event.stopPropagation();
toggleStarProject();
}}
title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
>
<Star
className={cn(
'w-3 h-3 transition-colors',
isStarred
? 'text-yellow-600 dark:text-yellow-400 fill-current'
: 'text-muted-foreground',
)}
/>
</div>
<div className="min-w-0 flex-1 text-left">
{isEditing ? (
<div className="space-y-1">
@@ -352,26 +356,6 @@ export default function SidebarProjectItem({
</>
) : (
<>
<div
className={cn(
'w-6 h-6 opacity-0 group-hover:opacity-100 transition-all duration-200 flex items-center justify-center rounded cursor-pointer touch:opacity-100',
isStarred ? 'hover:bg-yellow-50 dark:hover:bg-yellow-900/20 opacity-100' : 'hover:bg-accent',
)}
onClick={(event) => {
event.stopPropagation();
toggleStarProject();
}}
title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
>
<Star
className={cn(
'w-3 h-3 transition-colors',
isStarred
? 'text-yellow-600 dark:text-yellow-400 fill-current'
: 'text-muted-foreground',
)}
/>
</div>
<div
className="touch:opacity-100 flex h-6 w-6 cursor-pointer items-center justify-center rounded opacity-0 transition-all duration-200 hover:bg-accent group-hover:opacity-100"
onClick={(event) => {