Merge branch 'dev' into bootstrap-icons
This commit is contained in:
Daniel
GitHub
commit
c28c73ce18
|
|
@ -1,307 +0,0 @@
|
|||
import {
|
||||
CollectionIncludingMembersAndLinkCount,
|
||||
LinkIncludingShortenedCollectionAndTags,
|
||||
} from "@/types/global";
|
||||
import {
|
||||
faFolder,
|
||||
faEllipsis,
|
||||
faLink,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import useLinkStore from "@/store/links";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import useAccountStore from "@/store/account";
|
||||
import {
|
||||
faCalendarDays,
|
||||
faFileImage,
|
||||
faFilePdf,
|
||||
} from "@fortawesome/free-regular-svg-icons";
|
||||
import usePermissions from "@/hooks/usePermissions";
|
||||
import { toast } from "react-hot-toast";
|
||||
import isValidUrl from "@/lib/shared/isValidUrl";
|
||||
import Link from "next/link";
|
||||
import unescapeString from "@/lib/client/unescapeString";
|
||||
import { useRouter } from "next/router";
|
||||
import EditLinkModal from "./ModalContent/EditLinkModal";
|
||||
import DeleteLinkModal from "./ModalContent/DeleteLinkModal";
|
||||
import PreservedFormatsModal from "./ModalContent/PreservedFormatsModal";
|
||||
|
||||
type Props = {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
count: number;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function LinkCard({ link, count, className }: Props) {
|
||||
const router = useRouter();
|
||||
|
||||
const permissions = usePermissions(link.collection.id as number);
|
||||
|
||||
const { collections } = useCollectionStore();
|
||||
|
||||
const { links } = useLinkStore();
|
||||
|
||||
const { account } = useAccountStore();
|
||||
|
||||
let shortendURL;
|
||||
|
||||
try {
|
||||
shortendURL = new URL(link.url || "").host.toLowerCase();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
const [collection, setCollection] =
|
||||
useState<CollectionIncludingMembersAndLinkCount>(
|
||||
collections.find(
|
||||
(e) => e.id === link.collection.id
|
||||
) as CollectionIncludingMembersAndLinkCount
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setCollection(
|
||||
collections.find(
|
||||
(e) => e.id === link.collection.id
|
||||
) as CollectionIncludingMembersAndLinkCount
|
||||
);
|
||||
}, [collections, links]);
|
||||
|
||||
const { removeLink, updateLink } = useLinkStore();
|
||||
|
||||
const pinLink = async () => {
|
||||
const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
|
||||
|
||||
const load = toast.loading("Applying...");
|
||||
|
||||
const response = await updateLink({
|
||||
...link,
|
||||
pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
|
||||
});
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
response.ok &&
|
||||
toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
|
||||
};
|
||||
|
||||
const deleteLink = async () => {
|
||||
const load = toast.loading("Deleting...");
|
||||
|
||||
const response = await removeLink(link.id as number);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
response.ok && toast.success(`Link Deleted.`);
|
||||
};
|
||||
|
||||
const url =
|
||||
isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
|
||||
|
||||
const formattedDate = new Date(link.createdAt as string).toLocaleString(
|
||||
"en-US",
|
||||
{
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
}
|
||||
);
|
||||
|
||||
const [editLinkModal, setEditLinkModal] = useState(false);
|
||||
const [deleteLinkModal, setDeleteLinkModal] = useState(false);
|
||||
const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`h-fit hover:bg-base-300 hover:border-base-300 border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-200 rounded-2xl relative ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
{permissions === true ||
|
||||
permissions?.canUpdate ||
|
||||
permissions?.canDelete ? (
|
||||
<div className="dropdown dropdown-left absolute top-3 right-3 z-20">
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
className="btn btn-ghost btn-sm btn-square text-neutral"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faEllipsis}
|
||||
title="More"
|
||||
className="w-5 h-5"
|
||||
id={"expand-dropdown" + collection.id}
|
||||
/>
|
||||
</div>
|
||||
<ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
|
||||
{permissions === true ? (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
pinLink();
|
||||
}}
|
||||
>
|
||||
{link?.pinnedBy && link.pinnedBy[0]
|
||||
? "Unpin"
|
||||
: "Pin to Dashboard"}
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
{permissions === true || permissions?.canUpdate ? (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setEditLinkModal(true);
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
{permissions === true ? (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setPreservedFormatsModal(true);
|
||||
// updateArchive();
|
||||
}}
|
||||
>
|
||||
Preserved Formats
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
{permissions === true || permissions?.canDelete ? (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
</ul>
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
<div
|
||||
onClick={() => link.url && window.open(link.url || "", "_blank")}
|
||||
className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
|
||||
>
|
||||
{link.url && url ? (
|
||||
<Image
|
||||
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
|
||||
width={64}
|
||||
height={64}
|
||||
alt=""
|
||||
className={`absolute w-12 bg-white shadow rounded-md p-1 bottom-3 right-3 select-none z-10`}
|
||||
draggable="false"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
target.style.display = "none";
|
||||
}}
|
||||
/>
|
||||
) : link.type === "pdf" ? (
|
||||
<FontAwesomeIcon
|
||||
icon={faFilePdf}
|
||||
className="absolute h-12 w-12 bg-primary/20 text-primary shadow rounded-md p-2 bottom-3 right-3 select-none z-10"
|
||||
/>
|
||||
) : link.type === "image" ? (
|
||||
<FontAwesomeIcon
|
||||
icon={faFileImage}
|
||||
className="absolute h-12 w-12 bg-primary/20 text-primary shadow rounded-md p-2 bottom-3 right-3 select-none z-10"
|
||||
/>
|
||||
) : undefined}
|
||||
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-sm text-neutral">{count + 1}</p>
|
||||
<p className="text-lg truncate w-full pr-8">
|
||||
{unescapeString(link.name || link.description) || link.url}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{link.url ? (
|
||||
<div className="flex items-center gap-1 max-w-full w-fit text-neutral">
|
||||
<FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
|
||||
<p className="truncate w-full">{shortendURL}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="badge badge-primary badge-sm my-1">{link.type}</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
router.push(`/collections/${link.collection.id}`);
|
||||
}}
|
||||
className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
className="w-4 h-4 mt-1 drop-shadow"
|
||||
style={{ color: collection?.color }}
|
||||
/>
|
||||
<p className="truncate capitalize w-full">{collection?.name}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 text-neutral">
|
||||
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
|
||||
<p>{formattedDate}</p>
|
||||
</div>
|
||||
{/* {link.tags[0] ? (
|
||||
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
|
||||
<div className="flex gap-1 items-center flex-nowrap">
|
||||
{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 className="absolute w-1/2 top-0 bottom-0 right-0 bg-gradient-to-r from-transparent to-base-200 to-35%"></div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs mt-2 p-1 font-semibold italic">No Tags</p>
|
||||
)} */}
|
||||
</div>
|
||||
{editLinkModal ? (
|
||||
<EditLinkModal
|
||||
onClose={() => setEditLinkModal(false)}
|
||||
activeLink={link}
|
||||
/>
|
||||
) : undefined}
|
||||
{deleteLinkModal ? (
|
||||
<DeleteLinkModal
|
||||
onClose={() => setDeleteLinkModal(false)}
|
||||
activeLink={link}
|
||||
/>
|
||||
) : undefined}
|
||||
{preservedFormatsModal ? (
|
||||
<PreservedFormatsModal
|
||||
onClose={() => setPreservedFormatsModal(false)}
|
||||
activeLink={link}
|
||||
/>
|
||||
) : undefined}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
|
||||
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||
|
||||
export default function DefaultGridView({
|
||||
links,
|
||||
}: {
|
||||
links: LinkIncludingShortenedCollectionAndTags[];
|
||||
}) {
|
||||
return (
|
||||
<div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
|
||||
{links.map((e, i) => {
|
||||
return <LinkCard key={i} link={e} count={i} />;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import LinkCardGrid from "@/components/LinkViews/LinkComponents/LinkCardGrid";
|
||||
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||
|
||||
export default function CompactGridView({
|
||||
links,
|
||||
}: {
|
||||
links: LinkIncludingShortenedCollectionAndTags[];
|
||||
}) {
|
||||
return (
|
||||
<div className="columns-1 xl:columns-2 2xl:columns-3 gap-5">
|
||||
{links.map((e, i) => {
|
||||
return (
|
||||
<div className="break-inside-avoid mb-5">
|
||||
<LinkCardGrid key={i} link={e} count={i} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
import { useState } from "react";
|
||||
import {
|
||||
CollectionIncludingMembersAndLinkCount,
|
||||
LinkIncludingShortenedCollectionAndTags,
|
||||
} from "@/types/global";
|
||||
import usePermissions from "@/hooks/usePermissions";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
|
||||
import EditLinkModal from "@/components/ModalContent/EditLinkModal";
|
||||
import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
|
||||
import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
|
||||
import useLinkStore from "@/store/links";
|
||||
import { toast } from "react-hot-toast";
|
||||
import useAccountStore from "@/store/account";
|
||||
|
||||
export default function LinkActions({
|
||||
link,
|
||||
collection,
|
||||
position,
|
||||
}: {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
collection: CollectionIncludingMembersAndLinkCount;
|
||||
position?: string;
|
||||
}) {
|
||||
const permissions = usePermissions(link.collection.id as number);
|
||||
|
||||
const [editLinkModal, setEditLinkModal] = useState(false);
|
||||
const [deleteLinkModal, setDeleteLinkModal] = useState(false);
|
||||
const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
|
||||
const [expandedLink, setExpandedLink] = useState(false);
|
||||
|
||||
const { account } = useAccountStore();
|
||||
|
||||
const { removeLink, updateLink } = useLinkStore();
|
||||
|
||||
const pinLink = async () => {
|
||||
const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
|
||||
|
||||
const load = toast.loading("Applying...");
|
||||
|
||||
const response = await updateLink({
|
||||
...link,
|
||||
pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
|
||||
});
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
response.ok &&
|
||||
toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
|
||||
};
|
||||
|
||||
const deleteLink = async () => {
|
||||
const load = toast.loading("Deleting...");
|
||||
|
||||
const response = await removeLink(link.id as number);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
response.ok && toast.success(`Link Deleted.`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{permissions === true ||
|
||||
permissions?.canUpdate ||
|
||||
permissions?.canDelete ? (
|
||||
<div
|
||||
className={`dropdown dropdown-left absolute ${
|
||||
position || "top-3 right-3"
|
||||
} z-20`}
|
||||
>
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
className="btn btn-ghost btn-sm btn-square text-neutral"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faEllipsis}
|
||||
title="More"
|
||||
className="w-5 h-5"
|
||||
id={"expand-dropdown" + collection.id}
|
||||
/>
|
||||
</div>
|
||||
<ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
|
||||
{permissions === true ? (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
pinLink();
|
||||
}}
|
||||
>
|
||||
{link?.pinnedBy && link.pinnedBy[0]
|
||||
? "Unpin"
|
||||
: "Pin to Dashboard"}
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
{permissions === true || permissions?.canUpdate ? (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setEditLinkModal(true);
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
{permissions === true ? (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setPreservedFormatsModal(true);
|
||||
// updateArchive();
|
||||
}}
|
||||
>
|
||||
Preserved Formats
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
{permissions === true || permissions?.canDelete ? (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
</ul>
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
{editLinkModal ? (
|
||||
<EditLinkModal
|
||||
onClose={() => setEditLinkModal(false)}
|
||||
activeLink={link}
|
||||
/>
|
||||
) : undefined}
|
||||
{deleteLinkModal ? (
|
||||
<DeleteLinkModal
|
||||
onClose={() => setDeleteLinkModal(false)}
|
||||
activeLink={link}
|
||||
/>
|
||||
) : undefined}
|
||||
{preservedFormatsModal ? (
|
||||
<PreservedFormatsModal
|
||||
onClose={() => setPreservedFormatsModal(false)}
|
||||
activeLink={link}
|
||||
/>
|
||||
) : undefined}
|
||||
{/* {expandedLink ? (
|
||||
<ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
|
||||
) : undefined} */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import {
|
||||
CollectionIncludingMembersAndLinkCount,
|
||||
LinkIncludingShortenedCollectionAndTags,
|
||||
} from "@/types/global";
|
||||
import { faLink } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useEffect, useState } from "react";
|
||||
import useLinkStore from "@/store/links";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import isValidUrl from "@/lib/shared/isValidUrl";
|
||||
import unescapeString from "@/lib/client/unescapeString";
|
||||
import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
|
||||
import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
|
||||
import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
|
||||
import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
|
||||
|
||||
type Props = {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
count: number;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function LinkCard({ link, count, className }: Props) {
|
||||
const { links } = useLinkStore();
|
||||
|
||||
const { collections } = useCollectionStore();
|
||||
|
||||
const [collection, setCollection] =
|
||||
useState<CollectionIncludingMembersAndLinkCount>(
|
||||
collections.find(
|
||||
(e) => e.id === link.collection.id
|
||||
) as CollectionIncludingMembersAndLinkCount
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setCollection(
|
||||
collections.find(
|
||||
(e) => e.id === link.collection.id
|
||||
) as CollectionIncludingMembersAndLinkCount
|
||||
);
|
||||
}, [collections, links]);
|
||||
|
||||
let shortendURL;
|
||||
|
||||
try {
|
||||
shortendURL = new URL(link.url || "").host.toLowerCase();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
const url =
|
||||
isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`h-fit hover:bg-base-300 hover:border-base-300 border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-200 rounded-2xl relative ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
onClick={() => link.url && window.open(link.url || "", "_blank")}
|
||||
className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
|
||||
>
|
||||
<div className="absolute bottom-3 right-3">
|
||||
<LinkIcon link={link} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-sm text-neutral">{count + 1}</p>
|
||||
<p className="text-lg truncate w-full pr-8">
|
||||
{unescapeString(link.name || link.description) || link.url}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{link.url ? (
|
||||
<div className="flex items-center gap-1 max-w-full w-fit text-neutral">
|
||||
<FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
|
||||
<p className="truncate w-full">{shortendURL}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="badge badge-primary badge-sm my-1">{link.type}</div>
|
||||
)}
|
||||
|
||||
<LinkCollection link={link} collection={collection} />
|
||||
|
||||
<LinkDate link={link} />
|
||||
</div>
|
||||
|
||||
<LinkActions link={link} collection={collection} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
import {
|
||||
CollectionIncludingMembersAndLinkCount,
|
||||
LinkIncludingShortenedCollectionAndTags,
|
||||
} from "@/types/global";
|
||||
import { useEffect, useState } from "react";
|
||||
import useLinkStore from "@/store/links";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import unescapeString from "@/lib/client/unescapeString";
|
||||
import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
|
||||
import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
|
||||
import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
|
||||
import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
|
||||
import Link from "next/link";
|
||||
|
||||
type Props = {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
count: number;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function LinkCardGrid({ link, count, className }: Props) {
|
||||
const { collections } = useCollectionStore();
|
||||
|
||||
const { links } = useLinkStore();
|
||||
|
||||
let shortendURL;
|
||||
|
||||
try {
|
||||
shortendURL = new URL(link.url || "").host.toLowerCase();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
const [collection, setCollection] =
|
||||
useState<CollectionIncludingMembersAndLinkCount>(
|
||||
collections.find(
|
||||
(e) => e.id === link.collection.id
|
||||
) as CollectionIncludingMembersAndLinkCount
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setCollection(
|
||||
collections.find(
|
||||
(e) => e.id === link.collection.id
|
||||
) as CollectionIncludingMembersAndLinkCount
|
||||
);
|
||||
}, [collections, links]);
|
||||
|
||||
return (
|
||||
<div className="w-full border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative">
|
||||
<div
|
||||
onClick={() => link.url && window.open(link.url || "", "_blank")}
|
||||
className="flex items-center cursor-pointer p-3"
|
||||
>
|
||||
<div className="shrink-0">
|
||||
<LinkIcon link={link} width="w-12" />
|
||||
</div>
|
||||
|
||||
<div className="w-[calc(100%-56px)] ml-2">
|
||||
<p className="line-clamp-1 mr-8">
|
||||
{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-2">
|
||||
<LinkCollection link={link} collection={collection} />
|
||||
·
|
||||
{link.url ? (
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
window.open(link.url || "", "_blank");
|
||||
}}
|
||||
className="flex items-center hover:opacity-60 cursor-pointer duration-100"
|
||||
>
|
||||
<p className="truncate w-full">{shortendURL}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="badge badge-primary badge-sm my-1">
|
||||
{link.type}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="hidden sm:block">·</span>
|
||||
<LinkDate link={link} />
|
||||
</div>
|
||||
<p>{unescapeString(link.description)}</p>
|
||||
{link.tags[0] ? (
|
||||
<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>
|
||||
) : undefined}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LinkActions link={link} collection={collection} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import {
|
||||
CollectionIncludingMembersAndLinkCount,
|
||||
LinkIncludingShortenedCollectionAndTags,
|
||||
} from "@/types/global";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faFolder } from "@fortawesome/free-solid-svg-icons";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
export default function LinkCollection({
|
||||
link,
|
||||
collection,
|
||||
}: {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
collection: CollectionIncludingMembersAndLinkCount;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
router.push(`/collections/${link.collection.id}`);
|
||||
}}
|
||||
className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
className="w-4 h-4 shadow"
|
||||
style={{ color: collection?.color }}
|
||||
/>
|
||||
<p className="truncate capitalize">{collection?.name}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
|
||||
|
||||
export default function LinkDate({
|
||||
link,
|
||||
}: {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
}) {
|
||||
const formattedDate = new Date(link.createdAt as string).toLocaleString(
|
||||
"en-US",
|
||||
{
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
},
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 text-neutral">
|
||||
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
|
||||
<p>{formattedDate}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
|
||||
import Image from "next/image";
|
||||
import isValidUrl from "@/lib/shared/isValidUrl";
|
||||
|
||||
export default function LinkIcon({
|
||||
link,
|
||||
width,
|
||||
}: {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
width?: string;
|
||||
}) {
|
||||
const url =
|
||||
isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
|
||||
|
||||
const iconClasses: string =
|
||||
"bg-white text-primary shadow rounded-md border-[2px] border-white select-none z-10" +
|
||||
" " +
|
||||
(width || "w-12");
|
||||
|
||||
return (
|
||||
<div>
|
||||
{link.url && url ? (
|
||||
<Image
|
||||
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
|
||||
width={64}
|
||||
height={64}
|
||||
alt=""
|
||||
className={iconClasses}
|
||||
draggable="false"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
target.style.display = "none";
|
||||
}}
|
||||
/>
|
||||
) : link.type === "pdf" ? (
|
||||
<FontAwesomeIcon icon={faFilePdf} className={iconClasses} />
|
||||
) : link.type === "image" ? (
|
||||
<FontAwesomeIcon icon={faFileImage} className={iconClasses} />
|
||||
) : undefined}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import {
|
||||
CollectionIncludingMembersAndLinkCount,
|
||||
LinkIncludingShortenedCollectionAndTags,
|
||||
} from "@/types/global";
|
||||
import { useEffect, useState } from "react";
|
||||
import useLinkStore from "@/store/links";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import unescapeString from "@/lib/client/unescapeString";
|
||||
import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
|
||||
import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
|
||||
import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
|
||||
import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
|
||||
|
||||
type Props = {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
count: number;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function LinkCardCompact({ link, count, className }: Props) {
|
||||
const { collections } = useCollectionStore();
|
||||
|
||||
const { links } = useLinkStore();
|
||||
|
||||
let shortendURL;
|
||||
|
||||
try {
|
||||
shortendURL = new URL(link.url || "").host.toLowerCase();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
const [collection, setCollection] =
|
||||
useState<CollectionIncludingMembersAndLinkCount>(
|
||||
collections.find(
|
||||
(e) => e.id === link.collection.id
|
||||
) as CollectionIncludingMembersAndLinkCount
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setCollection(
|
||||
collections.find(
|
||||
(e) => e.id === link.collection.id
|
||||
) as CollectionIncludingMembersAndLinkCount
|
||||
);
|
||||
}, [collections, links]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="border-neutral-content relative hover:bg-base-300 duration-200 rounded-lg">
|
||||
<div
|
||||
onClick={() => link.url && window.open(link.url || "", "_blank")}
|
||||
className="flex items-center cursor-pointer py-3 sm:px-3"
|
||||
>
|
||||
<div className="shrink-0">
|
||||
<LinkIcon link={link} width="sm:w-12 w-8" />
|
||||
</div>
|
||||
|
||||
<div className="w-[calc(100%-56px)] ml-2">
|
||||
<p className="line-clamp-1 mr-8">
|
||||
{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-2">
|
||||
<LinkCollection link={link} collection={collection} />
|
||||
·
|
||||
{link.url ? (
|
||||
<p className="truncate w-full">{shortendURL}</p>
|
||||
) : (
|
||||
<div className="badge badge-primary badge-sm my-1">
|
||||
{link.type}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="hidden sm:block">·</span>
|
||||
<LinkDate link={link} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LinkActions
|
||||
link={link}
|
||||
collection={collection}
|
||||
position="top-3 right-0 sm:right-3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="divider my-0 last:hidden h-[1px]"></div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import LinkRow from "@/components/LinkViews/LinkComponents/LinkRow";
|
||||
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||
|
||||
export default function ListView({
|
||||
links,
|
||||
}: {
|
||||
links: LinkIncludingShortenedCollectionAndTags[];
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{links.map((e, i) => {
|
||||
return <LinkRow key={i} link={e} count={i} />;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -16,11 +16,14 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
|
|||
role="button"
|
||||
className="btn btn-sm btn-square btn-ghost"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faSort}
|
||||
id="sort-dropdown"
|
||||
<svg
|
||||
className="w-5 h-5 text-neutral"
|
||||
/>
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path d="M3 6H12H21M6 12H18M9 18H15" stroke="currentColor"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
|
||||
import useLocalSettingsStore from "@/store/localSettings";
|
||||
|
||||
import { ViewMode } from "@/types/global";
|
||||
|
||||
type Props = {
|
||||
viewMode: string;
|
||||
setViewMode: Dispatch<SetStateAction<string>>;
|
||||
};
|
||||
|
||||
export default function ViewDropdown({ viewMode, setViewMode }: Props) {
|
||||
const { updateSettings } = useLocalSettingsStore();
|
||||
|
||||
const onChangeViewMode = (
|
||||
e: React.MouseEvent<HTMLButtonElement>,
|
||||
viewMode: ViewMode
|
||||
) => {
|
||||
setViewMode(viewMode);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
updateSettings({ viewMode: viewMode as ViewMode });
|
||||
}, [viewMode]);
|
||||
|
||||
return (
|
||||
<div className="p-1 flex flex-row gap-1 border border-neutral-content rounded-[0.625rem]">
|
||||
<button
|
||||
onClick={(e) => onChangeViewMode(e, ViewMode.Default)}
|
||||
className={`p-2 rounded-md ${
|
||||
viewMode == ViewMode.Default ? "bg-primary/20" : "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 text-neutral"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M10.93,14.44v5.45a1.38,1.38,0,0,1-1.37,1.37H4.11a1.38,1.38,0,0,1-1.37-1.37V14.44a1.38,1.38,0,0,1,1.37-1.37H9.56A1.38,1.38,0,0,1,10.93,14.44ZM9.56,2.74H4.11A1.38,1.38,0,0,0,2.74,4.11V9.56a1.38,1.38,0,0,0,1.37,1.37H9.56a1.38,1.38,0,0,0,1.37-1.37V4.11A1.38,1.38,0,0,0,9.56,2.74Zm11.7,17.15V14.44a1.38,1.38,0,0,0-1.37-1.37H14.44a1.38,1.38,0,0,0-1.37,1.37v5.45a1.38,1.38,0,0,0,1.37,1.37h5.45A1.38,1.38,0,0,0,21.26,19.89Zm0-10.33V4.11a1.38,1.38,0,0,0-1.37-1.37H14.44a1.38,1.38,0,0,0-1.37,1.37V9.56a1.38,1.38,0,0,0,1.37,1.37h5.45A1.38,1.38,0,0,0,21.26,9.56Z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={(e) => onChangeViewMode(e, ViewMode.List)}
|
||||
className={`p-2 rounded-md ${
|
||||
viewMode == ViewMode.List ? "bg-primary/20" : "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 text-neutral"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M5.36,5A1.76,1.76,0,1,1,3.6,3.26,1.76,1.76,0,0,1,5.36,5ZM20.78,3.48H8.6A1.37,1.37,0,0,0,7.22,4.85v.33A1.37,1.37,0,0,0,8.6,6.55H20.78a1.37,1.37,0,0,0,1.37-1.37V4.85A1.37,1.37,0,0,0,20.78,3.48ZM3.6,10.24A1.76,1.76,0,1,0,5.36,12,1.75,1.75,0,0,0,3.6,10.24Zm17.18.22H8.6a1.38,1.38,0,0,0-1.38,1.37v.34A1.38,1.38,0,0,0,8.6,13.54H20.78a1.37,1.37,0,0,0,1.37-1.37v-.34A1.37,1.37,0,0,0,20.78,10.46ZM3.6,17.23A1.76,1.76,0,1,0,5.36,19,1.75,1.75,0,0,0,3.6,17.23Zm17.18.22H8.6a1.37,1.37,0,0,0-1.38,1.37v.33A1.37,1.37,0,0,0,8.6,20.52H20.78a1.37,1.37,0,0,0,1.37-1.37v-.33A1.37,1.37,0,0,0,20.78,17.45Z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* <button
|
||||
onClick={(e) => onChangeViewMode(e, ViewMode.Grid)}
|
||||
className={`p-2 rounded-md ${
|
||||
viewMode == ViewMode.Grid ? "bg-primary/20" : "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 text-neutral"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M14.34,11V13A1.37,1.37,0,0,1,13,14.34H11A1.37,1.37,0,0,1,9.66,13V11A1.37,1.37,0,0,1,11,9.66H13A1.37,1.37,0,0,1,14.34,11ZM13,2.74H11A1.37,1.37,0,0,0,9.66,4.11V6.06A1.37,1.37,0,0,0,11,7.43H13a1.37,1.37,0,0,0,1.37-1.37V4.11A1.37,1.37,0,0,0,13,2.74ZM21.26,13V11a1.37,1.37,0,0,0-1.37-1.37H17.94A1.37,1.37,0,0,0,16.57,11V13a1.37,1.37,0,0,0,1.37,1.37h1.95A1.37,1.37,0,0,0,21.26,13ZM11,21.26H13a1.37,1.37,0,0,0,1.37-1.37V17.94A1.37,1.37,0,0,0,13,16.57H11a1.37,1.37,0,0,0-1.37,1.37v1.95A1.37,1.37,0,0,0,11,21.26ZM2.74,11V13a1.37,1.37,0,0,0,1.37,1.37H6.06A1.37,1.37,0,0,0,7.43,13V11A1.37,1.37,0,0,0,6.06,9.66H4.11A1.37,1.37,0,0,0,2.74,11Zm18.52-5V4.11a1.38,1.38,0,0,0-1.37-1.37H17.94a1.38,1.38,0,0,0-1.37,1.37V6.06a1.38,1.38,0,0,0,1.37,1.37h1.95A1.38,1.38,0,0,0,21.26,6.06ZM2.74,4.11V6.06A1.38,1.38,0,0,0,4.11,7.43H6.06A1.38,1.38,0,0,0,7.43,6.06V4.11A1.38,1.38,0,0,0,6.06,2.74H4.11A1.38,1.38,0,0,0,2.74,4.11ZM21.26,19.89V17.94a1.38,1.38,0,0,0-1.37-1.37H17.94a1.38,1.38,0,0,0-1.37,1.37v1.95a1.38,1.38,0,0,0,1.37,1.37h1.95A1.38,1.38,0,0,0,21.26,19.89ZM2.74,17.94v1.95a1.38,1.38,0,0,0,1.37,1.37H6.06a1.38,1.38,0,0,0,1.37-1.37V17.94a1.38,1.38,0,0,0-1.37-1.37H4.11A1.38,1.38,0,0,0,2.74,17.94Z" />
|
||||
</svg>
|
||||
</button> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,7 +1,11 @@
|
|||
import LinkCard from "@/components/LinkCard";
|
||||
import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import useLinkStore from "@/store/links";
|
||||
import { CollectionIncludingMembersAndLinkCount, Sort } from "@/types/global";
|
||||
import {
|
||||
CollectionIncludingMembersAndLinkCount,
|
||||
Sort,
|
||||
ViewMode,
|
||||
} from "@/types/global";
|
||||
import { faEllipsis, faFolder } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useRouter } from "next/router";
|
||||
|
|
@ -18,6 +22,10 @@ import getPublicUserData from "@/lib/client/getPublicUserData";
|
|||
import EditCollectionModal from "@/components/ModalContent/EditCollectionModal";
|
||||
import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal";
|
||||
import DeleteCollectionModal from "@/components/ModalContent/DeleteCollectionModal";
|
||||
import ViewDropdown from "@/components/ViewDropdown";
|
||||
import DefaultView from "@/components/LinkViews/DefaultView";
|
||||
import GridView from "@/components/LinkViews/GridView";
|
||||
import ListView from "@/components/LinkViews/ListView";
|
||||
|
||||
export default function Index() {
|
||||
const { settings } = useLocalSettingsStore();
|
||||
|
|
@ -76,6 +84,19 @@ export default function Index() {
|
|||
useState(false);
|
||||
const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
|
||||
|
||||
const [viewMode, setViewMode] = useState<string>(
|
||||
localStorage.getItem("viewMode") || ViewMode.Default
|
||||
);
|
||||
|
||||
const linkView = {
|
||||
[ViewMode.Default]: DefaultView,
|
||||
// [ViewMode.Grid]: GridView,
|
||||
[ViewMode.List]: ListView,
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
const LinkComponent = linkView[viewMode];
|
||||
|
||||
return (
|
||||
<MainLayout>
|
||||
<div
|
||||
|
|
@ -86,22 +107,78 @@ export default function Index() {
|
|||
}}
|
||||
className="h-full p-5 flex gap-3 flex-col"
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-between sm:items-start">
|
||||
{activeCollection && (
|
||||
<div className="flex gap-3 items-center">
|
||||
<div className="flex gap-2">
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
style={{ color: activeCollection?.color }}
|
||||
className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow"
|
||||
/>
|
||||
<p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
|
||||
{activeCollection?.name}
|
||||
</p>
|
||||
</div>
|
||||
{activeCollection && (
|
||||
<div className="flex gap-3 items-start justify-between">
|
||||
<div className="flex gap-2">
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
style={{ color: activeCollection?.color }}
|
||||
className="sm:w-8 sm:h-8 w-8 h-8 mt-2 drop-shadow"
|
||||
/>
|
||||
<p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
|
||||
{activeCollection?.name}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="dropdown dropdown-bottom dropdown-end">
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
className="btn btn-ghost btn-sm btn-square text-neutral"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faEllipsis}
|
||||
title="More"
|
||||
className="w-5 h-5"
|
||||
/>
|
||||
</div>
|
||||
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
|
||||
{permissions === true ? (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setEditCollectionModal(true);
|
||||
}}
|
||||
>
|
||||
Edit Collection Info
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setEditCollectionSharingModal(true);
|
||||
}}
|
||||
>
|
||||
{permissions === true
|
||||
? "Share and Collaborate"
|
||||
: "View Team"}
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setDeleteCollectionModal(true);
|
||||
}}
|
||||
>
|
||||
{permissions === true
|
||||
? "Delete Collection"
|
||||
: "Leave Collection"}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeCollection ? (
|
||||
<div className={`min-w-[15rem]`}>
|
||||
|
|
@ -158,76 +235,16 @@ export default function Index() {
|
|||
<p>Showing {activeCollection?._count?.links} results</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
|
||||
<div className="relative">
|
||||
<div className="dropdown dropdown-bottom dropdown-end">
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
className="btn btn-ghost btn-sm btn-square text-neutral"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faEllipsis}
|
||||
title="More"
|
||||
className="w-5 h-5"
|
||||
/>
|
||||
</div>
|
||||
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
|
||||
{permissions === true ? (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setEditCollectionModal(true);
|
||||
}}
|
||||
>
|
||||
Edit Collection Info
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setEditCollectionSharingModal(true);
|
||||
}}
|
||||
>
|
||||
{permissions === true
|
||||
? "Share and Collaborate"
|
||||
: "View Team"}
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setDeleteCollectionModal(true);
|
||||
}}
|
||||
>
|
||||
{permissions === true
|
||||
? "Delete Collection"
|
||||
: "Leave Collection"}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{links.some((e) => e.collectionId === Number(router.query.id)) ? (
|
||||
<div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
|
||||
{links
|
||||
.filter((e) => e.collection.id === activeCollection?.id)
|
||||
.map((e, i) => {
|
||||
return <LinkCard key={i} link={e} count={i} />;
|
||||
})}
|
||||
</div>
|
||||
<LinkComponent
|
||||
links={links.filter(
|
||||
(e) => e.collection.id === activeCollection?.id
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<NoLinksFound />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -62,7 +62,9 @@ export default function Collections() {
|
|||
Other Collections
|
||||
</p>
|
||||
|
||||
<p>Shared collections you're a member of</p>
|
||||
<p className="sm:text-sm text-xs">
|
||||
Shared collections you're a member of
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import useCollectionStore from "@/store/collections";
|
|||
import useTagStore from "@/store/tags";
|
||||
import MainLayout from "@/layouts/MainLayout";
|
||||
import LinkCard from "@/components/LinkCard";
|
||||
import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
|
||||
import { useEffect, useState } from "react";
|
||||
import useLinks from "@/hooks/useLinks";
|
||||
import Link from "next/link";
|
||||
|
|
@ -95,7 +96,6 @@ export default function Dashboard() {
|
|||
<MainLayout>
|
||||
<div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
|
||||
<PageHeader icon={'bi-house '} title={'Dashboard'} description={"A brief overview of your data"} />
|
||||
|
||||
<div>
|
||||
<div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
|
||||
<DashboardItem
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import LinkCard from "@/components/LinkCard";
|
||||
import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
|
||||
import NoLinksFound from "@/components/NoLinksFound";
|
||||
import SortDropdown from "@/components/SortDropdown";
|
||||
import useLinks from "@/hooks/useLinks";
|
||||
|
|
@ -7,14 +7,35 @@ import useLinkStore from "@/store/links";
|
|||
import { Sort } from "@/types/global";
|
||||
import React, { useState } from "react";
|
||||
import PageHeader from "@/components/PageHeader";
|
||||
import { Sort, ViewMode } from "@/types/global";
|
||||
import { faLink } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useState } from "react";
|
||||
import ViewDropdown from "@/components/ViewDropdown";
|
||||
import DefaultView from "@/components/LinkViews/DefaultView";
|
||||
import GridView from "@/components/LinkViews/GridView";
|
||||
import ListView from "@/components/LinkViews/ListView";
|
||||
|
||||
|
||||
export default function Links() {
|
||||
const { links } = useLinkStore();
|
||||
|
||||
const [viewMode, setViewMode] = useState<string>(
|
||||
localStorage.getItem("viewMode") || ViewMode.Default
|
||||
);
|
||||
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
|
||||
|
||||
useLinks({ sort: sortBy });
|
||||
|
||||
const linkView = {
|
||||
[ViewMode.Default]: DefaultView,
|
||||
// [ViewMode.Grid]: GridView,
|
||||
[ViewMode.List]: ListView,
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
const LinkComponent = linkView[viewMode];
|
||||
|
||||
return (
|
||||
<MainLayout>
|
||||
<div className="p-5 flex flex-col gap-5 w-full h-full">
|
||||
|
|
@ -23,19 +44,15 @@ export default function Links() {
|
|||
title={"All Links"}
|
||||
description={"Links from every Collections"}
|
||||
/>
|
||||
|
||||
<div className="flex gap-3 justify-end">
|
||||
<div className="relative mt-2">
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{links[0] ? (
|
||||
<div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
|
||||
{links.map((e, i) => {
|
||||
return <LinkCard key={i} link={e} count={i} />;
|
||||
})}
|
||||
</div>
|
||||
<LinkComponent links={links} />
|
||||
) : (
|
||||
<NoLinksFound text="You Haven't Created Any Links Yet" />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import LinkCard from "@/components/LinkCard";
|
||||
import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
|
||||
import SortDropdown from "@/components/SortDropdown";
|
||||
import useLinks from "@/hooks/useLinks";
|
||||
import MainLayout from "@/layouts/MainLayout";
|
||||
|
|
@ -6,14 +6,34 @@ import useLinkStore from "@/store/links";
|
|||
import { Sort } from "@/types/global";
|
||||
import React, { useState } from "react";
|
||||
import PageHeader from "@/components/PageHeader";
|
||||
import { Sort, ViewMode } from "@/types/global";
|
||||
import { faThumbTack } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useState } from "react";
|
||||
import ViewDropdown from "@/components/ViewDropdown";
|
||||
import DefaultView from "@/components/LinkViews/DefaultView";
|
||||
import GridView from "@/components/LinkViews/GridView";
|
||||
import ListView from "@/components/LinkViews/ListView";
|
||||
|
||||
export default function PinnedLinks() {
|
||||
const { links } = useLinkStore();
|
||||
|
||||
const [viewMode, setViewMode] = useState<string>(
|
||||
localStorage.getItem("viewMode") || ViewMode.Default
|
||||
);
|
||||
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
|
||||
|
||||
useLinks({ sort: sortBy, pinnedOnly: true });
|
||||
|
||||
const linkView = {
|
||||
[ViewMode.Default]: DefaultView,
|
||||
// [ViewMode.Grid]: GridView,
|
||||
[ViewMode.List]: ListView,
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
const LinkComponent = linkView[viewMode];
|
||||
|
||||
return (
|
||||
<MainLayout>
|
||||
<div className="p-5 flex flex-col gap-5 w-full h-full">
|
||||
|
|
@ -25,14 +45,11 @@ export default function PinnedLinks() {
|
|||
<div className="flex gap-3 justify-end">
|
||||
<div className="relative mt-2">
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
</div>
|
||||
{links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
|
||||
<div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
|
||||
{links.map((e, i) => {
|
||||
return <LinkCard key={i} link={e} count={i} />;
|
||||
})}
|
||||
</div>
|
||||
<LinkComponent links={links} />
|
||||
) : (
|
||||
<div
|
||||
style={{ flex: "1 1 auto" }}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,18 @@
|
|||
import FilterSearchDropdown from "@/components/FilterSearchDropdown";
|
||||
import LinkCard from "@/components/LinkCard";
|
||||
import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
|
||||
import SortDropdown from "@/components/SortDropdown";
|
||||
import useLinks from "@/hooks/useLinks";
|
||||
import MainLayout from "@/layouts/MainLayout";
|
||||
import useLinkStore from "@/store/links";
|
||||
import { Sort } from "@/types/global";
|
||||
import { Sort, ViewMode } from "@/types/global";
|
||||
import { faFilter, faSearch, faSort } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useRouter } from "next/router";
|
||||
import { useState } from "react";
|
||||
import ViewDropdown from "@/components/ViewDropdown";
|
||||
import DefaultView from "@/components/LinkViews/DefaultView";
|
||||
import GridView from "@/components/LinkViews/GridView";
|
||||
import ListView from "@/components/LinkViews/ListView";
|
||||
|
||||
export default function Search() {
|
||||
const { links } = useLinkStore();
|
||||
|
|
@ -24,6 +28,10 @@ export default function Search() {
|
|||
});
|
||||
|
||||
const [filterDropdown, setFilterDropdown] = useState(false);
|
||||
|
||||
const [viewMode, setViewMode] = useState<string>(
|
||||
localStorage.getItem("viewMode") || ViewMode.Default
|
||||
);
|
||||
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
|
||||
|
||||
useLinks({
|
||||
|
|
@ -36,15 +44,24 @@ export default function Search() {
|
|||
searchByTags: searchFilter.tags,
|
||||
});
|
||||
|
||||
const linkView = {
|
||||
[ViewMode.Default]: DefaultView,
|
||||
// [ViewMode.Grid]: GridView,
|
||||
[ViewMode.List]: ListView,
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
const LinkComponent = linkView[viewMode];
|
||||
|
||||
return (
|
||||
<MainLayout>
|
||||
<div className="p-5 flex flex-col gap-5 w-full">
|
||||
<div className="flex gap-3 items-center justify-between">
|
||||
<div className="flex gap-3 items-center mb-5">
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-3 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<FontAwesomeIcon
|
||||
icon={faSearch}
|
||||
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-primary drop-shadow"
|
||||
className="sm:w-8 sm:h-8 w-8 h-8 text-primary drop-shadow"
|
||||
/>
|
||||
<p className="sm:text-4xl text-3xl capitalize font-thin">
|
||||
Search Results
|
||||
|
|
@ -52,25 +69,17 @@ export default function Search() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="relative">
|
||||
<FilterSearchDropdown
|
||||
searchFilter={searchFilter}
|
||||
setSearchFilter={setSearchFilter}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
|
||||
</div>
|
||||
<div className="flex gap-2 items-center mt-2">
|
||||
<FilterSearchDropdown
|
||||
searchFilter={searchFilter}
|
||||
setSearchFilter={setSearchFilter}
|
||||
/>
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
</div>
|
||||
{links[0] ? (
|
||||
<div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
|
||||
{links.map((e, i) => {
|
||||
return <LinkCard key={i} link={e} count={i} />;
|
||||
})}
|
||||
</div>
|
||||
<LinkComponent links={links} />
|
||||
) : (
|
||||
<p>
|
||||
Nothing found.{" "}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import LinkCard from "@/components/LinkCard";
|
||||
import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
|
||||
import useLinkStore from "@/store/links";
|
||||
import {
|
||||
faCheck,
|
||||
|
|
@ -12,10 +12,13 @@ import { FormEvent, useEffect, useState } from "react";
|
|||
import MainLayout from "@/layouts/MainLayout";
|
||||
import useTagStore from "@/store/tags";
|
||||
import SortDropdown from "@/components/SortDropdown";
|
||||
import { Sort, TagIncludingLinkCount } from "@/types/global";
|
||||
import { Sort, TagIncludingLinkCount, ViewMode } from "@/types/global";
|
||||
import useLinks from "@/hooks/useLinks";
|
||||
import Dropdown from "@/components/Dropdown";
|
||||
import { toast } from "react-hot-toast";
|
||||
import ViewDropdown from "@/components/ViewDropdown";
|
||||
import DefaultView from "@/components/LinkViews/DefaultView";
|
||||
import GridView from "@/components/LinkViews/GridView";
|
||||
import ListView from "@/components/LinkViews/ListView";
|
||||
|
||||
export default function Index() {
|
||||
const router = useRouter();
|
||||
|
|
@ -25,8 +28,6 @@ export default function Index() {
|
|||
|
||||
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
|
||||
|
||||
const [expandDropdown, setExpandDropdown] = useState(false);
|
||||
|
||||
const [renameTag, setRenameTag] = useState(false);
|
||||
const [newTagName, setNewTagName] = useState<string>();
|
||||
|
||||
|
|
@ -97,6 +98,19 @@ export default function Index() {
|
|||
setRenameTag(false);
|
||||
};
|
||||
|
||||
const [viewMode, setViewMode] = useState<string>(
|
||||
localStorage.getItem("viewMode") || ViewMode.Default
|
||||
);
|
||||
|
||||
const linkView = {
|
||||
[ViewMode.Default]: DefaultView,
|
||||
// [ViewMode.Grid]: GridView,
|
||||
[ViewMode.List]: ListView,
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
const LinkComponent = linkView[viewMode];
|
||||
|
||||
return (
|
||||
<MainLayout>
|
||||
<div className="p-5 flex flex-col gap-5 w-full">
|
||||
|
|
@ -105,7 +119,7 @@ export default function Index() {
|
|||
<div className="flex gap-2 items-end font-thin">
|
||||
<FontAwesomeIcon
|
||||
icon={faHashtag}
|
||||
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-primary"
|
||||
className="sm:w-8 sm:h-8 w-8 h-8 mt-2 text-primary"
|
||||
/>
|
||||
{renameTag ? (
|
||||
<>
|
||||
|
|
@ -147,7 +161,13 @@ export default function Index() {
|
|||
{activeTag?.name}
|
||||
</p>
|
||||
<div className="relative">
|
||||
<div className="dropdown dropdown-bottom font-normal">
|
||||
<div
|
||||
className={`dropdown dropdown-bottom font-normal ${
|
||||
activeTag?.name.length && activeTag?.name.length > 8
|
||||
? "dropdown-end"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
|
|
@ -186,50 +206,22 @@ export default function Index() {
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{expandDropdown ? (
|
||||
<Dropdown
|
||||
items={[
|
||||
{
|
||||
name: "Rename Tag",
|
||||
onClick: () => {
|
||||
setRenameTag(true);
|
||||
setExpandDropdown(false);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Remove Tag",
|
||||
onClick: () => {
|
||||
remove();
|
||||
setExpandDropdown(false);
|
||||
},
|
||||
},
|
||||
]}
|
||||
onClickOutside={(e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
if (target.id !== "expand-dropdown")
|
||||
setExpandDropdown(false);
|
||||
}}
|
||||
className="absolute top-8 left-0 w-36 font-normal"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="flex gap-2 items-center mt-2">
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
|
||||
{links
|
||||
.filter((e) => e.tags.some((e) => e.id === Number(router.query.id)))
|
||||
.map((e, i) => {
|
||||
return <LinkCard key={i} link={e} count={i} />;
|
||||
})}
|
||||
</div>
|
||||
<LinkComponent
|
||||
links={links.filter((e) =>
|
||||
e.tags.some((e) => e.id === Number(router.query.id))
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</MainLayout>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import { create } from "zustand";
|
||||
import {ViewMode} from "@/types/global";
|
||||
|
||||
type LocalSettings = {
|
||||
theme: string;
|
||||
theme?: string;
|
||||
viewMode?: string
|
||||
};
|
||||
|
||||
type LocalSettingsStore = {
|
||||
|
|
@ -13,6 +15,7 @@ type LocalSettingsStore = {
|
|||
const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
|
||||
settings: {
|
||||
theme: "",
|
||||
viewMode: "",
|
||||
},
|
||||
updateSettings: async (newSettings) => {
|
||||
if (
|
||||
|
|
@ -26,6 +29,15 @@ const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
|
|||
document.querySelector("html")?.setAttribute("data-theme", localTheme);
|
||||
}
|
||||
|
||||
if (
|
||||
newSettings.viewMode &&
|
||||
newSettings.viewMode !== localStorage.getItem("viewMode")
|
||||
) {
|
||||
localStorage.setItem("viewMode", newSettings.viewMode);
|
||||
|
||||
// const localTheme = localStorage.getItem("viewMode") || "";
|
||||
}
|
||||
|
||||
set((state) => ({ settings: { ...state.settings, ...newSettings } }));
|
||||
},
|
||||
setSettings: async () => {
|
||||
|
|
|
|||
|
|
@ -57,6 +57,12 @@ export interface PublicCollectionIncludingLinks extends Collection {
|
|||
links: LinksIncludingTags[];
|
||||
}
|
||||
|
||||
export enum ViewMode {
|
||||
Default = "default",
|
||||
Grid = "grid",
|
||||
List = "list",
|
||||
}
|
||||
|
||||
export enum Sort {
|
||||
DateNewestFirst,
|
||||
DateOldestFirst,
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue