xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

improved performance

This commit is contained in:
daniel31x13 2024-03-06 09:06:38 -05:00
parent a57c3114d8
commit bda0dc6c87
6 changed files with 159 additions and 360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

327
components/LinkViews/LinkCard.tsx
View File

@ -34,6 +34,12 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
const { links, getLink, setSelectedLinks, selectedLinks } = useLinkStore(); const { links, getLink, setSelectedLinks, selectedLinks } = useLinkStore();
useEffect(() => {
if (!editMode) {
setSelectedLinks([]);
}
}, [editMode]);
const handleCheckboxClick = ( const handleCheckboxClick = (
link: LinkIncludingShortenedCollectionAndTags link: LinkIncludingShortenedCollectionAndTags
) => { ) => {
@ -103,6 +109,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
editMode && editMode &&
(permissions === true || permissions?.canCreate || permissions?.canDelete); (permissions === true || permissions?.canCreate || permissions?.canDelete);
// window.open ('www.yourdomain.com', '_ blank');
return ( return (
<div <div
ref={ref} ref={ref}
@ -117,237 +124,119 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
: undefined : undefined
} }
> >
{!editMode ? ( <div
<> className="rounded-2xl cursor-pointer"
<Link onClick={() =>
href={generateLinkHref(link, account)} !editMode && window.open(generateLinkHref(link, account), "_blank")
target="_blank" }
className="rounded-2xl cursor-pointer" >
> <div className="relative rounded-t-2xl h-40 overflow-hidden">
<div className="relative rounded-t-2xl h-40 overflow-hidden"> {previewAvailable(link) ? (
{previewAvailable(link) ? ( <Image
<Image src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`} width={1280}
width={1280} height={720}
height={720} alt=""
alt="" className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105" style={{ filter: "blur(2px)" }}
style={{ filter: "blur(2px)" }} draggable="false"
draggable="false" onError={(e) => {
onError={(e) => { const target = e.target as HTMLElement;
const target = e.target as HTMLElement; target.style.display = "none";
target.style.display = "none"; }}
}} />
/> ) : link.preview === "unavailable" ? (
) : link.preview === "unavailable" ? ( <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
<div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div> ) : (
) : ( <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
<div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
)}
<div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
<LinkIcon link={link} />
</div>
</div>
<hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
<div className="p-3 mt-1">
<p className="truncate w-full pr-8 text-primary">
{unescapeString(link.name || link.description) || link.url}
</p>
<div title={link.url || ""} className="w-fit">
<div className="flex gap-1 item-center select-none text-neutral mt-1">
<i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
<p className="text-sm truncate">{shortendURL}</p>
</div>
</div>
</div>
<hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
<div className="flex justify-between text-xs text-neutral px-3 pb-1">
<div className="cursor-pointer w-fit">
{collection && (
<LinkCollection link={link} collection={collection} />
)}
</div>
<LinkDate link={link} />
</div>
</Link>
{showInfo && (
<div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
<div
onClick={() => setShowInfo(!showInfo)}
className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
>
<i className="bi-x text-neutral text-2xl"></i>
</div>
<p className="text-neutral text-lg font-semibold">Description</p>
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
<p>
{link.description ? (
unescapeString(link.description)
) : (
<span className="text-neutral text-sm">
No description provided.
</span>
)}
</p>
{link.tags[0] && (
<>
<p className="text-neutral text-lg mt-3 font-semibold">
Tags
</p>
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
<div className="flex gap-1 items-center flex-wrap">
{link.tags.map((e, i) => (
<Link
href={"/tags/" + e.id}
key={i}
onClick={(e) => {
e.stopPropagation();
}}
className="btn btn-xs btn-ghost truncate max-w-[19rem]"
>
#{e.name}
</Link>
))}
</div>
</div>
</>
)}
</div>
)} )}
<div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
<LinkIcon link={link} />
</div>
</div>
<LinkActions <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
link={link}
collection={collection}
position="top-[10.75rem] right-3"
toggleShowInfo={() => setShowInfo(!showInfo)}
linkInfo={showInfo}
flipDropdown={flipDropdown}
/>
</>
) : (
<>
<div className="rounded-2xl cursor-pointer">
<div className="relative rounded-t-2xl h-40 overflow-hidden">
{previewAvailable(link) ? (
<Image
src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
width={1280}
height={720}
alt=""
className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
style={{ filter: "blur(2px)" }}
draggable="false"
onError={(e) => {
const target = e.target as HTMLElement;
target.style.display = "none";
}}
/>
) : link.preview === "unavailable" ? (
<div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
) : (
<div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
)}
<div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
<LinkIcon link={link} />
</div>
</div>
<hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" /> <div className="p-3 mt-1">
<p className="truncate w-full pr-8 text-primary">
{unescapeString(link.name || link.description) || link.url}
</p>
<div className="p-3 mt-1"> <div title={link.url || ""} className="w-fit">
<p className="truncate w-full pr-8 text-primary"> <div className="flex gap-1 item-center select-none text-neutral mt-1">
{unescapeString(link.name || link.description) || link.url} <i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
</p> <p className="text-sm truncate">{shortendURL}</p>
<div title={link.url || ""} className="w-fit">
<div className="flex gap-1 item-center select-none text-neutral mt-1">
<i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
<p className="text-sm truncate">{shortendURL}</p>
</div>
</div>
</div>
<hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
<div className="flex justify-between text-xs text-neutral px-3 pb-1">
<div className="cursor-pointer w-fit">
{collection && (
<LinkCollection link={link} collection={collection} />
)}
</div>
<LinkDate link={link} />
</div> </div>
</div> </div>
</div>
{showInfo && ( <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
<div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
<div <div className="flex justify-between text-xs text-neutral px-3 pb-1">
onClick={() => setShowInfo(!showInfo)} <div className="cursor-pointer w-fit">
className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10" {collection && (
> <LinkCollection link={link} collection={collection} />
<i className="bi-x text-neutral text-2xl"></i> )}
</div> </div>
<p className="text-neutral text-lg font-semibold">Description</p> <LinkDate link={link} />
</div>
</div>
{showInfo && (
<div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
<div
onClick={() => setShowInfo(!showInfo)}
className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
>
<i className="bi-x text-neutral text-2xl"></i>
</div>
<p className="text-neutral text-lg font-semibold">Description</p>
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
<p>
{link.description ? (
unescapeString(link.description)
) : (
<span className="text-neutral text-sm">
No description provided.
</span>
)}
</p>
{link.tags[0] && (
<>
<p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" /> <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
<p>
{link.description ? (
unescapeString(link.description)
) : (
<span className="text-neutral text-sm">
No description provided.
</span>
)}
</p>
{link.tags[0] && (
<>
<p className="text-neutral text-lg mt-3 font-semibold">
Tags
</p>
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" /> <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
<div className="flex gap-1 items-center flex-wrap">
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative"> {link.tags.map((e, i) => (
<div className="flex gap-1 items-center flex-wrap"> <Link
{link.tags.map((e, i) => ( href={"/tags/" + e.id}
<Link key={i}
href={"/tags/" + e.id} onClick={(e) => {
key={i} e.stopPropagation();
onClick={(e) => { }}
e.stopPropagation(); className="btn btn-xs btn-ghost truncate max-w-[19rem]"
}} >
className="btn btn-xs btn-ghost truncate max-w-[19rem]" #{e.name}
> </Link>
#{e.name} ))}
</Link> </div>
))} </div>
</div> </>
</div>
</>
)}
</div>
)} )}
</div>
<LinkActions
link={link}
collection={collection}
position="top-[10.75rem] right-3"
toggleShowInfo={() => setShowInfo(!showInfo)}
linkInfo={showInfo}
flipDropdown={flipDropdown}
/>
</>
)} )}
<LinkActions
link={link}
collection={collection}
position="top-[10.75rem] right-3"
toggleShowInfo={() => setShowInfo(!showInfo)}
linkInfo={showInfo}
flipDropdown={flipDropdown}
/>
</div> </div>
); );
} }

172
components/LinkViews/LinkList.tsx
View File

@ -34,6 +34,12 @@ export default function LinkCardCompact({
const { account } = useAccountStore(); const { account } = useAccountStore();
const { links, setSelectedLinks, selectedLinks } = useLinkStore(); const { links, setSelectedLinks, selectedLinks } = useLinkStore();
useEffect(() => {
if (!editMode) {
setSelectedLinks([]);
}
}, [editMode]);
const handleCheckboxClick = ( const handleCheckboxClick = (
link: LinkIncludingShortenedCollectionAndTags link: LinkIncludingShortenedCollectionAndTags
) => { ) => {
@ -117,141 +123,49 @@ export default function LinkCardCompact({
onChange={() => handleCheckboxClick(link)} onChange={() => handleCheckboxClick(link)}
/> />
)} */} )} */}
{!editMode ? ( <div
<> className="flex items-center cursor-pointer"
<Link onClick={() =>
href={generateLinkHref(link, account)} !editMode && window.open(generateLinkHref(link, account), "_blank")
target="_blank" }
className="flex items-center cursor-pointer" >
> <div className="shrink-0">
<div className="shrink-0"> <LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
<LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" /> </div>
</div>
<div className="w-[calc(100%-56px)] ml-2"> <div className="w-[calc(100%-56px)] ml-2">
<p className="line-clamp-1 mr-8 text-primary"> <p className="line-clamp-1 mr-8 text-primary select-none">
{unescapeString(link.name || link.description) || link.url} {unescapeString(link.name || link.description) || link.url}
</p> </p>
<div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral"> <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
<div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap"> <div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
{collection && ( {collection ? (
<LinkCollection link={link} collection={collection} /> <LinkCollection link={link} collection={collection} />
)} ) : undefined}
{link.url ? ( {link.url ? (
<div className="flex items-center gap-1 w-fit text-neutral truncate"> <div className="flex items-center gap-1 w-fit text-neutral truncate">
<i className="bi-link-45deg text-lg" /> <i className="bi-link-45deg text-lg" />
<p className="truncate w-full">{shortendURL}</p> <p className="truncate w-full select-none">{shortendURL}</p>
</div>
) : (
<div className="badge badge-primary badge-sm my-1">
{link.type}
</div>
)}
<LinkDate link={link} />
</div> </div>
</div> ) : (
</div> <div className="badge badge-primary badge-sm my-1 select-none">
</Link> {link.type}
<LinkActions
link={link}
collection={collection}
position="top-3 right-3"
flipDropdown={flipDropdown}
// toggleShowInfo={() => setShowInfo(!showInfo)}
// linkInfo={showInfo}
/>
{showInfo && (
<div>
<div className="pb-3 mt-1 px-3">
<p className="text-neutral text-lg font-semibold">
Description
</p>
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
<p>
{link.description ? (
unescapeString(link.description)
) : (
<span className="text-neutral text-sm">
No description provided.
</span>
)}
</p>
{link.tags[0] && (
<>
<p className="text-neutral text-lg mt-3 font-semibold">
Tags
</p>
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
<div className="flex gap-1 items-center flex-wrap">
{link.tags.map((e, i) => (
<Link
href={"/tags/" + e.id}
key={i}
onClick={(e) => {
e.stopPropagation();
}}
className="btn btn-xs btn-ghost truncate max-w-[19rem]"
>
#{e.name}
</Link>
))}
</div>
</div>
</>
)}
</div>
</div>
)}
</>
) : (
<>
<div className="flex items-center cursor-pointer">
<div className="shrink-0">
<LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
</div>
<div className="w-[calc(100%-56px)] ml-2">
<p className="line-clamp-1 mr-8 text-primary select-none">
{unescapeString(link.name || link.description) || link.url}
</p>
<div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
<div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
{collection ? (
<LinkCollection link={link} collection={collection} />
) : undefined}
{link.url ? (
<div className="flex items-center gap-1 w-fit text-neutral truncate">
<i className="bi-link-45deg text-lg" />
<p className="truncate w-full select-none">
{shortendURL}
</p>
</div>
) : (
<div className="badge badge-primary badge-sm my-1 select-none">
{link.type}
</div>
)}
<LinkDate link={link} />
</div> </div>
</div> )}
<LinkDate link={link} />
</div> </div>
</div> </div>
<LinkActions </div>
link={link} </div>
collection={collection} <LinkActions
position="top-3 right-3" link={link}
flipDropdown={flipDropdown} collection={collection}
// toggleShowInfo={() => setShowInfo(!showInfo)} position="top-3 right-3"
// linkInfo={showInfo} flipDropdown={flipDropdown}
/> // toggleShowInfo={() => setShowInfo(!showInfo)}
</> // linkInfo={showInfo}
)} />
</div> </div>
<div className="divider my-0 last:hidden h-[1px]"></div> <div className="divider my-0 last:hidden h-[1px]"></div>
</> </>

5
pages/collections/[id].tsx
View File

@ -97,10 +97,9 @@ export default function Index() {
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false); const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false); const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
useEffect(() => { useEffect(() => {
return () => { if (editMode) return setEditMode(false);
setEditMode(false);
};
}, [router]); }, [router]);
const [viewMode, setViewMode] = useState<string>( const [viewMode, setViewMode] = useState<string>(

5
pages/links/index.tsx
View File

@ -30,10 +30,9 @@ export default function Links() {
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false); const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false); const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
useEffect(() => { useEffect(() => {
return () => { if (editMode) return setEditMode(false);
setEditMode(false);
};
}, [router]); }, [router]);
const collectivePermissions = useCollectivePermissions( const collectivePermissions = useCollectivePermissions(

5
pages/links/pinned.tsx
View File

@ -30,10 +30,9 @@ export default function PinnedLinks() {
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false); const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false); const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
useEffect(() => { useEffect(() => {
return () => { if (editMode) return setEditMode(false);
setEditMode(false);
};
}, [router]); }, [router]);
const collectivePermissions = useCollectivePermissions( const collectivePermissions = useCollectivePermissions(

5
pages/tags/[id].tsx
View File

@ -33,10 +33,9 @@ export default function Index() {
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false); const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false); const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
useEffect(() => { useEffect(() => {
return () => { if (editMode) return setEditMode(false);
setEditMode(false);
};
}, [router]); }, [router]);
const collectivePermissions = useCollectivePermissions( const collectivePermissions = useCollectivePermissions(