mirror of
https://github.com/spacedriveapp/spacedrive.git
synced 2026-04-22 15:40:07 -04:00
122 lines
2.7 KiB
TypeScript
122 lines
2.7 KiB
TypeScript
import {
|
|
getExplorerStore,
|
|
useExplorerStore,
|
|
useLibraryMutation,
|
|
useLibraryQuery
|
|
} from '@sd/client';
|
|
import { ContextMenu as CM } from '@sd/ui';
|
|
import {
|
|
ArrowBendUpRight,
|
|
FilePlus,
|
|
FileX,
|
|
LockSimple,
|
|
Package,
|
|
Plus,
|
|
Share,
|
|
TagSimple,
|
|
Trash,
|
|
TrashSimple
|
|
} from 'phosphor-react';
|
|
import { PropsWithChildren } from 'react';
|
|
import { useSnapshot } from 'valtio';
|
|
|
|
const AssignTagMenuItems = (props: { objectId: number }) => {
|
|
const tags = useLibraryQuery(['tags.list'], { suspense: true });
|
|
const tagsForObject = useLibraryQuery(['tags.getForObject', props.objectId], { suspense: true });
|
|
|
|
const { mutate: assignTag } = useLibraryMutation('tags.assign');
|
|
|
|
return (
|
|
<>
|
|
{tags.data?.map((tag) => {
|
|
const active = !!tagsForObject.data?.find((t) => t.id === tag.id);
|
|
|
|
return (
|
|
<CM.Item
|
|
key={tag.id}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
if (props.objectId === null) return;
|
|
|
|
assignTag({
|
|
tag_id: tag.id,
|
|
object_id: props.objectId,
|
|
unassign: active
|
|
});
|
|
}}
|
|
>
|
|
<div
|
|
className="block w-[15px] h-[15px] mr-0.5 border rounded-full"
|
|
style={{
|
|
backgroundColor: active ? tag.color || '#efefef' : 'transparent' || '#efefef',
|
|
borderColor: tag.color || '#efefef'
|
|
}}
|
|
/>
|
|
<p>{tag.name}</p>
|
|
</CM.Item>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default function ExplorerContextMenu(props: PropsWithChildren) {
|
|
const store = getExplorerStore();
|
|
|
|
return (
|
|
<div className="relative">
|
|
<CM.ContextMenu trigger={props.children}>
|
|
<CM.Item label="Open" />
|
|
<CM.Item label="Open with..." />
|
|
|
|
<CM.Separator />
|
|
|
|
<CM.Item label="Quick view" />
|
|
<CM.Item label="Open in Finder" />
|
|
|
|
<CM.Separator />
|
|
|
|
<CM.Item label="Rename" />
|
|
<CM.Item label="Duplicate" />
|
|
|
|
<CM.Separator />
|
|
|
|
<CM.Item
|
|
label="Share"
|
|
icon={Share}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
|
|
navigator.share?.({
|
|
title: 'Spacedrive',
|
|
text: 'Check out this cool app',
|
|
url: 'https://spacedrive.com'
|
|
});
|
|
}}
|
|
/>
|
|
|
|
<CM.Separator />
|
|
|
|
{store.contextMenuObjectId && (
|
|
<CM.SubMenu label="Assign tag" icon={TagSimple}>
|
|
<AssignTagMenuItems objectId={store.contextMenuObjectId} />
|
|
</CM.SubMenu>
|
|
)}
|
|
<CM.SubMenu label="More actions..." icon={Plus}>
|
|
<CM.Item label="Encrypt" icon={LockSimple} />
|
|
<CM.Item label="Compress" icon={Package} />
|
|
<CM.SubMenu label="Convert to" icon={ArrowBendUpRight}>
|
|
<CM.Item label="PNG" />
|
|
<CM.Item label="WebP" />
|
|
</CM.SubMenu>
|
|
<CM.Item variant="danger" label="Secure delete" icon={TrashSimple} />
|
|
</CM.SubMenu>
|
|
|
|
<CM.Separator />
|
|
|
|
<CM.Item icon={Trash} label="Delete" variant="danger" />
|
|
</CM.ContextMenu>
|
|
</div>
|
|
);
|
|
}
|