+
- 🎉️{" "}
+ 🎉️ See what's new in{" "}
-
diff --git a/components/Checkbox.tsx b/components/Checkbox.tsx
index feb351c..cd69f93 100644
--- a/components/Checkbox.tsx
+++ b/components/Checkbox.tsx
@@ -1,5 +1,3 @@
-import { faSquare, faSquareCheck } from "@fortawesome/free-regular-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ChangeEventHandler } from "react";
type Props = {
@@ -12,23 +10,17 @@ type Props = {
export default function Checkbox({ label, state, className, onClick }: Props) {
return (
{label}
+ {label}
);
}
diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index c382f6e..d4c2571 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -1,31 +1,23 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEllipsis, faGlobe, faLink } from "@fortawesome/free-solid-svg-icons";
import Link from "next/link";
import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import Dropdown from "./Dropdown";
-import { useState } from "react";
+import React, { useEffect, useState } from "react";
import ProfilePhoto from "./ProfilePhoto";
-import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
-import useModalStore from "@/store/modals";
import usePermissions from "@/hooks/usePermissions";
-import { useTheme } from "next-themes";
+import useLocalSettingsStore from "@/store/localSettings";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+import useAccountStore from "@/store/account";
+import EditCollectionModal from "./ModalContent/EditCollectionModal";
+import EditCollectionSharingModal from "./ModalContent/EditCollectionSharingModal";
+import DeleteCollectionModal from "./ModalContent/DeleteCollectionModal";
type Props = {
collection: CollectionIncludingMembersAndLinkCount;
className?: string;
};
-type DropdownTrigger =
- | {
- x: number;
- y: number;
- }
- | false;
-
export default function CollectionCard({ collection, className }: Props) {
- const { setModal } = useModalStore();
-
- const { theme } = useTheme();
+ const { settings } = useLocalSettingsStore();
+ const { account } = useAccountStore();
const formattedDate = new Date(collection.createdAt as string).toLocaleString(
"en-US",
@@ -36,144 +28,189 @@ export default function CollectionCard({ collection, className }: Props) {
}
);
- const [expandDropdown, setExpandDropdown] = useState
(false);
-
const permissions = usePermissions(collection.id as number);
+ const [collectionOwner, setCollectionOwner] = useState({
+ id: null as unknown as number,
+ name: "",
+ username: "",
+ image: "",
+ archiveAsScreenshot: undefined as unknown as boolean,
+ archiveAsPDF: undefined as unknown as boolean,
+ });
+
+ useEffect(() => {
+ const fetchOwner = async () => {
+ if (collection && collection.ownerId !== account.id) {
+ const owner = await getPublicUserData(collection.ownerId as number);
+ setCollectionOwner(owner);
+ } else if (collection && collection.ownerId === account.id) {
+ setCollectionOwner({
+ id: account.id as number,
+ name: account.name,
+ username: account.username as string,
+ image: account.image as string,
+ archiveAsScreenshot: account.archiveAsScreenshot as boolean,
+ archiveAsPDF: account.archiveAsPDF as boolean,
+ });
+ }
+ };
+
+ fetchOwner();
+ }, [collection]);
+
+ const [editCollectionModal, setEditCollectionModal] = useState(false);
+ const [editCollectionSharingModal, setEditCollectionSharingModal] =
+ useState(false);
+ const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
+
return (
- <>
+
+
+
+
+
+ {permissions === true ? (
+
+ {
+ (document?.activeElement as HTMLElement)?.blur();
+ setEditCollectionModal(true);
+ }}
+ >
+ Edit Collection Info
+
+
+ ) : undefined}
+
+ {
+ (document?.activeElement as HTMLElement)?.blur();
+ setEditCollectionSharingModal(true);
+ }}
+ >
+ {permissions === true ? "Share and Collaborate" : "View Team"}
+
+
+
+ {
+ (document?.activeElement as HTMLElement)?.blur();
+ setDeleteCollectionModal(true);
+ }}
+ >
+ {permissions === true ? "Delete Collection" : "Leave Collection"}
+
+
+
+
setEditCollectionSharingModal(true)}
+ >
+ {collectionOwner.id ? (
+
+ ) : undefined}
+ {collection.members
+ .sort((a, b) => (a.userId as number) - (b.userId as number))
+ .map((e, i) => {
+ return (
+
+ );
+ })
+ .slice(0, 3)}
+ {collection.members.length - 3 > 0 ? (
+
+
+ +{collection.members.length - 3}
+
+
+ ) : null}
+
+
-
setExpandDropdown({ x: e.clientX, y: e.clientY })}
- id={"expand-dropdown" + collection.id}
- className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
- >
-
-
-
- {collection.name}
-
-
-
- {collection.members
- .sort((a, b) => (a.userId as number) - (b.userId as number))
- .map((e, i) => {
- return (
-
- );
- })
- .slice(0, 4)}
- {collection.members.length - 4 > 0 ? (
-
- +{collection.members.length - 4}
-
- ) : null}
-
-
-
+
+
+
+ {collection.name}
+
+
+
+
+
+
+
{collection.isPublic ? (
-
-
-
-
- {expandDropdown ? (
-
{
- collection &&
- setModal({
- modal: "COLLECTION",
- state: true,
- method: "UPDATE",
- isOwner: permissions === true,
- active: collection,
- });
- setExpandDropdown(false);
- },
- }
- : undefined,
- {
- name: permissions === true ? "Share/Collaborate" : "View Team",
- onClick: () => {
- collection &&
- setModal({
- modal: "COLLECTION",
- state: true,
- method: "UPDATE",
- isOwner: permissions === true,
- active: collection,
- defaultIndex: permissions === true ? 1 : 0,
- });
- setExpandDropdown(false);
- },
- },
-
- {
- name:
- permissions === true ? "Delete Collection" : "Leave Collection",
- onClick: () => {
- collection &&
- setModal({
- modal: "COLLECTION",
- state: true,
- method: "UPDATE",
- isOwner: permissions === true,
- active: collection,
- defaultIndex: permissions === true ? 2 : 1,
- });
- setExpandDropdown(false);
- },
- },
- ]}
- onClickOutside={(e: Event) => {
- const target = e.target as HTMLInputElement;
- if (target.id !== "expand-dropdown" + collection.id)
- setExpandDropdown(false);
- }}
- className="w-fit"
+
+
+ {editCollectionModal ? (
+
setEditCollectionModal(false)}
+ activeCollection={collection}
/>
- ) : null}
-
+ ) : undefined}
+ {editCollectionSharingModal ? (
+ setEditCollectionSharingModal(false)}
+ activeCollection={collection}
+ />
+ ) : undefined}
+ {deleteCollectionModal ? (
+ setDeleteCollectionModal(false)}
+ activeCollection={collection}
+ />
+ ) : undefined}
+
);
}
diff --git a/components/DashboardItem.tsx b/components/DashboardItem.tsx
index 3de882e..60a5fe4 100644
--- a/components/DashboardItem.tsx
+++ b/components/DashboardItem.tsx
@@ -1,28 +1,20 @@
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-type Props = {
+export default function dashboardItem({
+ name,
+ value,
+ icon,
+}: {
name: string;
value: number;
- icon: IconProp;
-};
-
-export default function dashboardItem({ name, value, icon }: Props) {
+ icon: string;
+}) {
return (
-
-
-
+
+
+
-
-
- {name}
-
-
- {value}
-
+
);
diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index ac1ee59..4a48ab7 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -78,13 +78,13 @@ export default function Dropdown({
onClickOutside={onClickOutside}
className={`${
className || ""
- } py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
+ } py-1 shadow-md border border-neutral-content bg-base-200 rounded-md flex flex-col z-20`}
>
{items.map((e, i) => {
const inner = e && (
-
);
diff --git a/components/FilterSearchDropdown.tsx b/components/FilterSearchDropdown.tsx
index 90648e0..1fa2634 100644
--- a/components/FilterSearchDropdown.tsx
+++ b/components/FilterSearchDropdown.tsx
@@ -1,9 +1,6 @@
-import React, { SetStateAction } from "react";
-import ClickAwayHandler from "./ClickAwayHandler";
-import Checkbox from "./Checkbox";
+import React from "react";
type Props = {
- setFilterDropdown: (value: SetStateAction
) => void;
setSearchFilter: Function;
searchFilter: {
name: boolean;
@@ -15,64 +12,121 @@ type Props = {
};
export default function FilterSearchDropdown({
- setFilterDropdown,
setSearchFilter,
searchFilter,
}: Props) {
return (
- {
- const target = e.target as HTMLInputElement;
- if (target.id !== "filter-dropdown") setFilterDropdown(false);
- }}
- className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-40"
- >
-
- Filter by
-
-
-
- setSearchFilter({ ...searchFilter, name: !searchFilter.name })
- }
- />
-
- setSearchFilter({ ...searchFilter, url: !searchFilter.url })
- }
- />
-
- setSearchFilter({
- ...searchFilter,
- description: !searchFilter.description,
- })
- }
- />
-
- setSearchFilter({
- ...searchFilter,
- textContent: !searchFilter.textContent,
- })
- }
- />
-
- setSearchFilter({ ...searchFilter, tags: !searchFilter.tags })
- }
- />
+
);
}
diff --git a/components/InputSelect/CollectionSelection.tsx b/components/InputSelect/CollectionSelection.tsx
index 991557f..71dc075 100644
--- a/components/InputSelect/CollectionSelection.tsx
+++ b/components/InputSelect/CollectionSelection.tsx
@@ -1,9 +1,9 @@
import useCollectionStore from "@/store/collections";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
-import Select from "react-select";
import { styles } from "./styles";
import { Options } from "./types";
+import CreatableSelect from "react-select/creatable";
type Props = {
onChange: any;
@@ -43,8 +43,8 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
}, [collections]);
return (
- ({
+ control: (styles, state) => ({
...styles,
fontFamily: font,
- border: "none",
+ borderRadius: "0.375rem",
+ border: state.isFocused
+ ? "1px solid oklch(var(--p))"
+ : "1px solid oklch(var(--nc))",
+ boxShadow: "none",
+ minHeight: "2.6rem",
}),
- container: (styles) => ({
+ container: (styles, state) => ({
...styles,
- border: "1px solid #e0f2fe",
+ height: "full",
borderRadius: "0.375rem",
lineHeight: "1.25rem",
// "@media screen and (min-width: 1024px)": {
@@ -58,4 +65,5 @@ export const styles: StylesConfig = {
backgroundColor: "#38bdf8",
},
}),
+ menuPortal: (base) => ({ ...base, zIndex: 9999 }),
};
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
deleted file mode 100644
index a3c2d72..0000000
--- a/components/LinkCard.tsx
+++ /dev/null
@@ -1,301 +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 Dropdown from "./Dropdown";
-import useLinkStore from "@/store/links";
-import useCollectionStore from "@/store/collections";
-import useAccountStore from "@/store/account";
-import useModalStore from "@/store/modals";
-import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
-import usePermissions from "@/hooks/usePermissions";
-import { toast } from "react-hot-toast";
-import isValidUrl from "@/lib/client/isValidUrl";
-import Link from "next/link";
-import unescapeString from "@/lib/client/unescapeString";
-import { useRouter } from "next/router";
-
-type Props = {
- link: LinkIncludingShortenedCollectionAndTags;
- count: number;
- className?: string;
-};
-
-type DropdownTrigger =
- | {
- x: number;
- y: number;
- }
- | false;
-
-export default function LinkCard({ link, count, className }: Props) {
- const { setModal } = useModalStore();
-
- const router = useRouter();
-
- const permissions = usePermissions(link.collection.id as number);
-
- const [expandDropdown, setExpandDropdown] = useState(false);
-
- 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(
- 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, getLink } = useLinkStore();
-
- const pinLink = async () => {
- const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
-
- const load = toast.loading("Applying...");
-
- setExpandDropdown(false);
-
- const response = await updateLink({
- ...link,
- pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
- });
-
- toast.dismiss(load);
-
- response.ok &&
- toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
- };
-
- const updateArchive = async () => {
- const load = toast.loading("Sending request...");
-
- setExpandDropdown(false);
-
- const response = await fetch(`/api/v1/links/${link.id}/archive`, {
- method: "PUT",
- });
-
- const data = await response.json();
-
- toast.dismiss(load);
-
- if (response.ok) {
- toast.success(`Link is being archived...`);
- getLink(link.id as number);
- } else toast.error(data.response);
- };
-
- 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.`);
- setExpandDropdown(false);
- };
-
- const url = isValidUrl(link.url) ? new URL(link.url) : undefined;
-
- const formattedDate = new Date(link.createdAt as string).toLocaleString(
- "en-US",
- {
- year: "numeric",
- month: "short",
- day: "numeric",
- }
- );
-
- return (
- <>
-
- {(permissions === true ||
- permissions?.canUpdate ||
- permissions?.canDelete) && (
-
{
- setExpandDropdown({ x: e.clientX, y: e.clientY });
- }}
- id={"expand-dropdown" + link.id}
- className="text-gray-500 dark:text-gray-300 inline-flex rounded-md cursor-pointer hover:bg-slate-200 dark:hover:bg-neutral-700 absolute right-4 top-4 z-10 duration-100 p-1"
- >
-
- )}
-
-
router.push("/links/" + link.id)}
- className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-4"
- >
- {url && account.displayLinkIcons && (
-
{
- const target = e.target as HTMLElement;
- target.style.display = "none";
- }}
- />
- )}
-
-
-
-
-
- {count + 1}
-
-
- {unescapeString(link.name || link.description)}
-
-
-
{
- e.stopPropagation();
- }}
- className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100"
- >
-
-
- {collection?.name}
-
-
-
- {/* {link.tags[0] ? (
-
-
- {link.tags.map((e, i) => (
-
-
-
- ) : undefined} */}
-
-
{
- e.stopPropagation();
- }}
- className="flex items-center gap-1 max-w-full w-fit text-gray-500 dark:text-gray-300 hover:opacity-70 duration-100"
- >
-
-
{shortendURL}
-
-
-
-
-
{
- setModal({
- modal: "LINK",
- state: true,
- method: "UPDATE",
- active: link,
- });
- setExpandDropdown(false);
- },
- }
- : undefined,
- permissions === true
- ? {
- name: "Refresh Link",
- onClick: updateArchive,
- }
- : undefined,
- permissions === true || permissions?.canDelete
- ? {
- name: "Delete",
- onClick: deleteLink,
- }
- : undefined,
- ]}
- onClickOutside={(e: Event) => {
- const target = e.target as HTMLInputElement;
- if (target.id !== "expand-dropdown" + link.id)
- setExpandDropdown(false);
- }}
- className="w-40"
- />
- ) : null}
-
- );
-}
diff --git a/components/LinkPreview.tsx b/components/LinkPreview.tsx
deleted file mode 100644
index c81e46e..0000000
--- a/components/LinkPreview.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { faFolder, faLink } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import Image from "next/image";
-import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
-import isValidUrl from "@/lib/client/isValidUrl";
-import A from "next/link";
-import unescapeString from "@/lib/client/unescapeString";
-import { Link } from "@prisma/client";
-
-type Props = {
- link?: Partial
-
- {url && settings?.displayLinkIcons && (
-
{
- const target = e.target as HTMLElement;
- target.style.display = "none";
- }}
- />
- )}
-
-
-
-
();
-
- const [link, setLink] = useState();
-
- const router = useRouter();
-
- useEffect(() => {
- if (links) setLink(links.find((e) => e.id === Number(router.query.id)));
- }, [links]);
-
- useEffect(() => {
- if (link)
- setLinkCollection(collections.find((e) => e.id === link?.collection?.id));
- }, [link]);
-
- return (
-
-
- {link?.collection.ownerId === userId ||
- linkCollection?.members.some(
- (e) => e.userId === userId && e.canUpdate
- ) ? (
-
{
- link
- ? setModal({
- modal: "LINK",
- state: true,
- active: link,
- method: "UPDATE",
- })
- : undefined;
- onClick && onClick();
- }}
- className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
- >
-
-
-
- Edit
-
-
- ) : undefined}
-
-
{
- link
- ? setModal({
- modal: "LINK",
- state: true,
- active: link,
- method: "FORMATS",
- })
- : undefined;
- onClick && onClick();
- }}
- title="Preserved Formats"
- className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
- >
-
-
-
- Preserved Formats
-
-
-
- {link?.collection.ownerId === userId ||
- linkCollection?.members.some(
- (e) => e.userId === userId && e.canDelete
- ) ? (
-
{
- if (link?.id) {
- removeLink(link.id);
- router.back();
- onClick && onClick();
- }
- }}
- title="Delete"
- className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
- >
-
-
-
- Delete
-
-
- ) : undefined}
-
-
+ {links.map((e, i) => {
+ return
+ );
+}
diff --git a/components/LinkViews/Layouts/GridView.tsx b/components/LinkViews/Layouts/GridView.tsx
new file mode 100644
index 0000000..005ba28
--- /dev/null
+++ b/components/LinkViews/Layouts/GridView.tsx
@@ -0,0 +1,16 @@
+import LinkGrid from "@/components/LinkViews/LinkGrid";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+
+export default function GridView({
+ links,
+}: {
+ links: LinkIncludingShortenedCollectionAndTags[];
+}) {
+ return (
+
+ {links.map((e, i) => {
+ return
+ );
+}
diff --git a/components/LinkViews/Layouts/ListView.tsx b/components/LinkViews/Layouts/ListView.tsx
new file mode 100644
index 0000000..16f0064
--- /dev/null
+++ b/components/LinkViews/Layouts/ListView.tsx
@@ -0,0 +1,16 @@
+import LinkList from "@/components/LinkViews/LinkList";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+
+export default function ListView({
+ links,
+}: {
+ links: LinkIncludingShortenedCollectionAndTags[];
+}) {
+ return (
+
+ {links.map((e, i) => {
+ return
+ );
+}
diff --git a/components/LinkViews/LinkCard.tsx b/components/LinkViews/LinkCard.tsx
new file mode 100644
index 0000000..232a026
--- /dev/null
+++ b/components/LinkViews/LinkCard.tsx
@@ -0,0 +1,203 @@
+import {
+ ArchivedFormat,
+ CollectionIncludingMembersAndLinkCount,
+ LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useEffect, useRef, 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 Image from "next/image";
+import { previewAvailable } from "@/lib/shared/getArchiveValidity";
+import Link from "next/link";
+import LinkIcon from "./LinkComponents/LinkIcon";
+import LinkGroupedIconURL from "./LinkComponents/LinkGroupedIconURL";
+import useOnScreen from "@/hooks/useOnScreen";
+
+type Props = {
+ link: LinkIncludingShortenedCollectionAndTags;
+ count: number;
+ className?: string;
+};
+
+export default function LinkGrid({ link, count, className }: Props) {
+ const { collections } = useCollectionStore();
+
+ const { links, getLink } = useLinkStore();
+
+ let shortendURL;
+
+ try {
+ shortendURL = new URL(link.url || "").host.toLowerCase();
+ } catch (error) {
+ console.log(error);
+ }
+
+ const [collection, setCollection] =
+ useState(
+ 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 ref = useRef(null);
+ const isVisible = useOnScreen(ref);
+
+ useEffect(() => {
+ let interval: any;
+
+ if (
+ isVisible &&
+ !link.preview?.startsWith("archives") &&
+ link.preview !== "unavailable"
+ ) {
+ interval = setInterval(async () => {
+ getLink(link.id as number);
+ }, 5000);
+ }
+
+ return () => {
+ if (interval) {
+ clearInterval(interval);
+ }
+ };
+ }, [isVisible, link.preview]);
+
+ const [showInfo, setShowInfo] = useState(false);
+
+ return (
+
+
+ {previewAvailable(link) ? (
+
{
+ const target = e.target as HTMLElement;
+ target.style.display = "none";
+ }}
+ />
+ ) : link.preview === "unavailable" ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+ {unescapeString(link.name || link.description) || link.url}
+
+
+
+
+
+
+
+
+
+
+ {collection ? (
+
+
+
+
+ {showInfo ? (
+
+
setShowInfo(!showInfo)}
+ className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
+ >
+
+
Description
+
+
+
+ {link.description ? (
+ unescapeString(link.description)
+ ) : (
+
+ No description provided.
+
+ )}
+
+ {link.tags[0] ? (
+ <>
+
Tags
+
+
+
+
+
+ {link.tags.map((e, i) => (
+
+
+
+ ) : undefined}
+
+ ) : undefined}
+
+
setShowInfo(!showInfo)}
+ linkInfo={showInfo}
+ />
+
+
+
+
+ {permissions === true ? (
+
+ {
+ (document?.activeElement as HTMLElement)?.blur();
+ pinLink();
+ }}
+ >
+ {link?.pinnedBy && link.pinnedBy[0]
+ ? "Unpin"
+ : "Pin to Dashboard"}
+
+
+ ) : undefined}
+ {linkInfo !== undefined && toggleShowInfo ? (
+
+ {
+ (document?.activeElement as HTMLElement)?.blur();
+ toggleShowInfo();
+ }}
+ >
+ {!linkInfo ? "Show" : "Hide"} Link Details
+
+
+ ) : undefined}
+ {permissions === true || permissions?.canUpdate ? (
+
+ {
+ (document?.activeElement as HTMLElement)?.blur();
+ setEditLinkModal(true);
+ }}
+ >
+ Edit Link
+
+
+ ) : undefined}
+
+ {
+ (document?.activeElement as HTMLElement)?.blur();
+ setPreservedFormatsModal(true);
+ }}
+ >
+ Preserved Formats
+
+
+ {permissions === true || permissions?.canDelete ? (
+
+ {
+ (document?.activeElement as HTMLElement)?.blur();
+ e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
+ }}
+ >
+ Delete
+
+
+ ) : undefined}
+
+
setEditLinkModal(false)}
+ activeLink={link}
+ />
+ ) : undefined}
+ {deleteLinkModal ? (
+ setDeleteLinkModal(false)}
+ activeLink={link}
+ />
+ ) : undefined}
+ {preservedFormatsModal ? (
+ setPreservedFormatsModal(false)}
+ activeLink={link}
+ />
+ ) : undefined}
+ {/* {expandedLink ? (
+ setExpandedLink(false)} link={link} />
+ ) : undefined} */}
+
+ );
+}
diff --git a/components/LinkViews/LinkComponents/LinkCollection.tsx b/components/LinkViews/LinkComponents/LinkCollection.tsx
new file mode 100644
index 0000000..7ca8ad1
--- /dev/null
+++ b/components/LinkViews/LinkComponents/LinkCollection.tsx
@@ -0,0 +1,33 @@
+import {
+ CollectionIncludingMembersAndLinkCount,
+ LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useRouter } from "next/router";
+import React from "react";
+
+export default function LinkCollection({
+ link,
+ collection,
+}: {
+ link: LinkIncludingShortenedCollectionAndTags;
+ collection: CollectionIncludingMembersAndLinkCount;
+}) {
+ const router = useRouter();
+
+ return (
+ {
+ e.stopPropagation();
+ router.push(`/collections/${link.collection.id}`);
+ }}
+ className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
+ title={collection?.name}
+ >
+
+
{collection?.name}
+
(true);
+
+ let shortendURL;
+
+ try {
+ shortendURL = new URL(link.url || "").host.toLowerCase();
+ } catch (error) {
+ console.log(error);
+ }
+
+ return (
+
+ {link.url && url && showFavicon ? (
+
{
+ setShowFavicon(false);
+ }}
+ />
+ ) : showFavicon === false ? (
+
+
{shortendURL}
+
+ (true);
+
+ return (
+ <>
+ {link.url && url && showFavicon ? (
+ {
+ setShowFavicon(false);
+ }}
+ />
+ ) : showFavicon === false ? (
+
+
+ ) : link.type === "pdf" ? (
+ (
+ 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 (
+
+
link.url && window.open(link.url || "", "_blank")}
+ className="cursor-pointer"
+ >
+
+
+ {unescapeString(link.name || link.description) || link.url}
+
+
+
+
+
+ ·
+ {link.url ? (
+
{
+ e.preventDefault();
+ window.open(link.url || "", "_blank");
+ }}
+ className="flex items-center hover:opacity-60 cursor-pointer duration-100"
+ >
+
{shortendURL}
+
+ ) : (
+
+ {link.type}
+
+ )}
+
+
+
+
{unescapeString(link.description)}
+ {link.tags[0] ? (
+
+
+ {link.tags.map((e, i) => (
+
+
+ ) : undefined}
+
+
+
{}}
+ linkInfo={false}
+ link={link}
+ collection={collection}
+ />
+ (
+ 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 [showInfo, setShowInfo] = useState(false);
+
+ return (
+ <>
+
+
link.url && window.open(link.url || "", "_blank")}
+ className="flex items-center cursor-pointer py-3 px-3"
+ >
+
+
+
+
+
+ {unescapeString(link.name || link.description) || link.url}
+
+
+
+
+ {collection ? (
+ <>
+
+ ·
+
+ ) : undefined}
+ {link.url ? (
+
+ ) : (
+
+ {link.type}
+
+ )}
+
+
·
+
+
+
+
+
+
setShowInfo(!showInfo)}
+ // linkInfo={showInfo}
+ />
+ {showInfo ? (
+
+
+
Description
+
+
+
+ {link.description ? (
+ unescapeString(link.description)
+ ) : (
+
+ No description provided.
+
+ )}
+
+ {link.tags[0] ? (
+ <>
+
+ Tags
+
+
+
+
+
+
+ {link.tags.map((e, i) => (
+
+
+
+ ) : undefined}
+
+
+
+ );
+}
diff --git a/components/Modal.tsx b/components/Modal.tsx
new file mode 100644
index 0000000..c68b2e0
--- /dev/null
+++ b/components/Modal.tsx
@@ -0,0 +1,38 @@
+import React, { MouseEventHandler, ReactNode, useEffect } from "react";
+import ClickAwayHandler from "@/components/ClickAwayHandler";
+
+type Props = {
+ toggleModal: Function;
+ children: ReactNode;
+ className?: string;
+};
+
+export default function Modal({ toggleModal, className, children }: Props) {
+ useEffect(() => {
+ document.body.style.overflow = "hidden";
+ return () => {
+ document.body.style.overflow = "auto";
+ };
+ });
+
+ return (
+
+
+
+
}
+ className="absolute top-4 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
+ >
+
+ {children}
+
+
- >;
- collection: CollectionIncludingMembersAndLinkCount;
- method: "CREATE" | "UPDATE" | "VIEW_TEAM";
-};
-
-export default function CollectionInfo({
- toggleCollectionModal,
- setCollection,
- collection,
- method,
-}: Props) {
- const [submitLoader, setSubmitLoader] = useState(false);
- const { updateCollection, addCollection } = useCollectionStore();
-
- const submit = async () => {
- if (!collection) return null;
-
- setSubmitLoader(true);
-
- const load = toast.loading(
- method === "UPDATE" ? "Applying..." : "Creating..."
- );
-
- let response;
-
- if (method === "CREATE") response = await addCollection(collection);
- else response = await updateCollection(collection);
-
- toast.dismiss(load);
-
- if (response.ok) {
- toast.success(
- `Collection ${method === "UPDATE" ? "Saved!" : "Created!"}`
- );
- toggleCollectionModal();
- } else toast.error(response.data as string);
-
- setSubmitLoader(false);
- };
-
- return (
-
-
-
-
Name
-
-
- setCollection({ ...collection, name: e.target.value })
- }
- />
-
-
-
Color
-
-
-
- setCollection({ ...collection, color: "#0ea5e9" })
- }
- >
- Reset
-
-
-
setCollection({ ...collection, color: e })}
- />
-
-
-
-
-
-
+
+
+
+
@@ -62,10 +63,24 @@ We've forked the old version from the current repository into [this repo](https:
- 📱 Responsive design and supports most modern browsers.
- 🌓 Dark/Light mode support.
- 🧩 Browser extension, managed by the community. [Star it here!](https://github.com/linkwarden/browser-extension)
-- ⬇️ Import your bookmarks from other browsers.
-- ⚡️ Powerful API.
-- 🔐 SSO and Keycloak integration. (Enterprise and Self-hosted users only)
-- ✅ And many more features!
+- ⬇️ Import and export your bookmarks.
+- 🔐 SSO integration. (Enterprise and Self-hosted users only)
+- ✨ And so many more features!
+
+## Like what we're doing? Give us a Star ⭐
+
+
+
+## We're building our Community 🌐
+
+Join and follow us in the following platforms to stay up to date about the most recent features and for support:
+
+
+
+
+
+
## Suggestions
@@ -79,17 +94,9 @@ Make sure to check out our [public roadmap](https://github.com/orgs/linkwarden/p
For information on how to get started or to set up your own instance, please visit the [documentation](https://docs.linkwarden.app).
-## Main Tech Stack
-
-- NextJS
-- TypeScript
-- Tailwind
-- Prisma
-- Zustand
-
## Development
-If you want to contribute, Thanks! Start by checking our [public roadmap](https://github.com/orgs/linkwarden/projects/1), there you'll see a [README for contributers](https://github.com/orgs/linkwarden/projects/1?pane=issue&itemId=34708277) for the rest of the info on how to contribute to this repo.
+If you want to contribute, Thanks! Start by checking our [public roadmap](https://github.com/orgs/linkwarden/projects/1), there you'll see a [README for contributers](https://github.com/orgs/linkwarden/projects/1?pane=issue&itemId=34708277) for the rest of the info on how to contribute and the main tech stack.
## Security
@@ -106,3 +113,9 @@ Here are the other ways to support/cheer this project:
- Referring Linkwarden to a friend.
If you did any of the above, Thanksss! Otherwise thanks.
+
+## Thanks to All the Contributors 💪
+
+Huge thanks to these guys for spending their time helping Linkwarden grow. They rock! ⚡️
+
+