Skip to content
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

Collection view improvements #306

Merged
merged 11 commits into from
Jan 24, 2025
Merged

Collection view improvements #306

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b71e8a4
use the collection icon not null for the collection group card
dkackman Jan 22, 2025
841ad79
aria and alt
dkackman Jan 22, 2025
6d1cfd6
add show/hide button to collections
dkackman Jan 22, 2025
a0f4f6f
keep view state buttons always visible and enable/disable instead of …
dkackman Jan 22, 2025
199c000
lint
dkackman Jan 24, 2025
01c9865
Merge branch 'main' into collection-icon
dkackman Jan 24, 2025
621d3cc
Merge branch 'main' into collection-icon
dkackman Jan 24, 2025
9213025
hidden collection ui
dkackman Jan 24, 2025
c381420
Merge branch 'collection-visibility' into collection-icon
dkackman Jan 24, 2025
3f38821
show/hide collection
dkackman Jan 24, 2025
895f9fc
only show No Collection card on last page
dkackman Jan 24, 2025
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 src/components/NftCardList.tsx
View file
Open in desktop
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
Open in desktop
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
Loading