Skip to content

Commit

Permalink
Merge pull request #306 from dkackman/collection-icon
Browse files Browse the repository at this point in the history 
Collection view improvements
  • Loading branch information
@Rigidity
Rigidity authored Jan 24, 2025
2 parents 498b911 + 895f9fc commit 9ba25b4
Show file tree
Hide file tree
Showing 4 changed files with 273 additions and 213 deletions.
7 changes: 4 additions & 3 deletions src/components/NftCardList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,16 +84,16 @@ export function NftCardList({
page={page}
onToggleVisibility={() => {
commands
.updateNft({
nft_id: col.collection_id,
.updateNftCollection({
collection_id: col.collection_id,
visible: !col.visible,
})
.then(() => updateNfts(page))
.catch(addError);
}}
/>
))}
{nfts.length < pageSize && (
{collections.length < pageSize && (
<NftGroupCard
type='collection'
item={{
Expand All @@ -104,6 +104,7 @@ export function NftCardList({
collection_id: 'No collection',
visible: true,
}}
canToggleVisibility={false}
updateNfts={updateNfts}
page={page}
/>
Expand Down
154 changes: 109 additions & 45 deletions src/components/NftGroupCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ import { NftGroupMode } from '@/hooks/useNftParams';
import { t } from '@lingui/core/macro';
import { Trans } from '@lingui/react/macro';
import {
EyeIcon,
EyeOff,
LibraryBig,
MoreVerticalIcon,
Paintbrush,
UserIcon,
Copy,
MoreVertical,
ExternalLink,
EyeIcon,
EyeOff,
} from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { Button } from './ui/button';
Expand All @@ -25,6 +27,9 @@ import {
TooltipProvider,
TooltipTrigger,
} from './ui/tooltip';
import { writeText } from '@tauri-apps/plugin-clipboard-manager';
import { toast } from 'react-toastify';
import { open } from '@tauri-apps/plugin-shell';

interface NftGroupCardProps {
type: 'collection' | 'did';
Expand All @@ -35,6 +40,7 @@ interface NftGroupCardProps {
onToggleVisibility?: () => void;
isLoading?: boolean;
error?: Error;
canToggleVisibility?: boolean;
}

export function NftGroupCard({
Expand All @@ -43,13 +49,13 @@ export function NftGroupCard({
item,
updateNfts,
page,
onToggleVisibility,
onToggleVisibility = () => {},
isLoading,
error,
canToggleVisibility = true,
}: NftGroupCardProps) {
const navigate = useNavigate();
const isCollection = type === 'collection';
const allowToggleVisibility = false; //isCollection && onToggleVisibility; // not implemented yet
// Type guards to help TypeScript narrow the types
const isDidRecord = (
item: NftCollectionRecord | DidRecord,
Expand Down Expand Up @@ -77,7 +83,7 @@ export function NftGroupCard({

const getDefaultName = () => {
if (isCollection) {
return t`Unnamed`;
return t`Unnamed Collection`;
}
return groupMode === NftGroupMode.OwnerDid ? (
<Trans>Untitled Profile</Trans>
Expand Down Expand Up @@ -134,7 +140,9 @@ export function NftGroupCard({
}}
role='button'
tabIndex={0}
className='cursor-pointer group border border-neutral-200 dark:border-neutral-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary'
className={`cursor-pointer group border border-neutral-200 dark:border-neutral-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary ${
isCollection && !item.visible ? 'opacity-50' : ''
}`}
aria-label={
isCollection
? `Collection ${item.name || t`Unnamed`}`
Expand All @@ -152,10 +160,22 @@ export function NftGroupCard({
className='bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center aspect-square'
aria-hidden='true'
>
<LibraryBig
className='h-12 w-12 text-neutral-400 dark:text-neutral-600'
aria-hidden='true'
/>
{isCollectionRecord(item) && item.icon ? (
<img
src={item.icon}
alt={(() => {
const name = item.name || '';
return t`Icon for ${name}`;
})()}
className='object-cover h-full w-full'
aria-hidden='true'
/>
) : (
<LibraryBig
className='h-12 w-12 text-neutral-400 dark:text-neutral-600'
aria-hidden='true'
/>
)}
</div>
) : (
<div
Expand Down Expand Up @@ -208,41 +228,85 @@ export function NftGroupCard({
</TooltipProvider>
</span>

{allowToggleVisibility && onToggleVisibility && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant='ghost'
size='icon'
onClick={(e) => e.stopPropagation()}
aria-label={
item.visible ? t`Hide collection` : t`Show collection`
}
aria-expanded='false'
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant='ghost'
size='icon'
aria-label={t`Options`}
onClick={(e) => e.stopPropagation()}
>
<MoreVertical className='h-5 w-5' />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align='end'>
<DropdownMenuGroup>
{isCollection && (
<>
<DropdownMenuItem
className='cursor-pointer'
onClick={(e) => {
e.stopPropagation();
open(`https://mintgarden.io/collections/${getId()}`);
}}
aria-label={t`View on Mintgarden`}
>
<ExternalLink className='mr-2 h-4 w-4' />
<span>
<Trans>View on Mintgarden</Trans>
</span>
</DropdownMenuItem>

<DropdownMenuItem
className='cursor-pointer'
onClick={(e) => {
e.stopPropagation();
onToggleVisibility();
}}
disabled={!canToggleVisibility}
>
{item.visible ? (
<>
<EyeOff className='mr-2 h-4 w-4' />
<span>
<Trans>Hide</Trans>
</span>
</>
) : (
<>
<EyeIcon className='mr-2 h-4 w-4' />
<span>
<Trans>Show</Trans>
</span>
</>
)}
</DropdownMenuItem>
</>
)}

<DropdownMenuItem
className='cursor-pointer'
onClick={(e) => {
e.stopPropagation();
writeText(getId());
toast.success(
isCollection
? t`Collection ID copied to clipboard`
: groupMode === NftGroupMode.OwnerDid
? t`Profile ID copied to clipboard`
: t`Minter ID copied to clipboard`,
);
}}
aria-label={t`Copy ID to clipboard`}
>
<MoreVerticalIcon className='h-5 w-5' aria-hidden='true' />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align='end'>
<DropdownMenuGroup>
<DropdownMenuItem
className='cursor-pointer'
onClick={(e) => {
e.stopPropagation();
onToggleVisibility();
}}
>
{item.visible ? (
<EyeOff className='mr-2 h-4 w-4' aria-hidden='true' />
) : (
<EyeIcon className='mr-2 h-4 w-4' aria-hidden='true' />
)}
<span>{item.visible ? t`Hide` : t`Show`}</span>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
)}
<Copy className='mr-2 h-4 w-4' />
<span>
<Trans>Copy ID</Trans>
</span>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
);
Expand Down
Loading

0 comments on commit 9ba25b4

Please sign in to comment.