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

Merge pull request #349 from YeeJiaWei/bootstrap-icons 

Bootstrap icons
This commit is contained in:
Daniel 2023-12-18 06:49:02 +03:30 committed by GitHub
parent ae541bf2f5 fbc083c373
commit 141ca8f60b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
52 changed files with 411 additions and 1211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/AccentSubmitButton.tsx
View File

@ -1,9 +1,5 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
type Props = {
onClick?: Function;
icon?: IconProp;
label: string;
loading?: boolean;
className?: string;
@ -12,7 +8,6 @@ type Props = {
export default function AccentSubmitButton({
onClick,
icon,
label,
loading,
className,
@ -28,7 +23,6 @@ export default function AccentSubmitButton({
if (loading !== undefined && !loading && onClick) onClick();
}}
>
{icon && <FontAwesomeIcon icon={icon} className="h-5" />}
<p className="font-bold">{label}</p>
</button>
);

8
components/AnnouncementBar.tsx
View File

@ -1,5 +1,3 @@
import { faClose } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Link from "next/link";
import React, { MouseEventHandler } from "react";
@ -24,10 +22,12 @@ export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
</div>
<button
className="fixed top-3 right-3 hover:opacity-50 duration-100"
className="fixed right-3 hover:opacity-50 duration-100"
onClick={toggleAnnouncementBar}
>
<FontAwesomeIcon icon={faClose} className="w-4 h-4" />
<i
className="bi-x text-neutral text-2xl"
></i>
</button>
</div>
</div>

2
components/Checkbox.tsx
View File

@ -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 = {

26
components/CollectionCard.tsx
View File

@ -1,10 +1,7 @@
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 { useEffect, useState } from "react";
import React, { useEffect, useState } from "react";
import ProfilePhoto from "./ProfilePhoto";
import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
import usePermissions from "@/hooks/usePermissions";
import useLocalSettingsStore from "@/store/localSettings";
import getPublicUserData from "@/lib/client/getPublicUserData";
@ -71,9 +68,10 @@ export default function CollectionCard({ collection, className }: Props) {
role="button"
className="btn btn-ghost btn-sm btn-square text-neutral"
>
<FontAwesomeIcon icon={faEllipsis} title="More" className="w-5 h-5" />
<i className="bi-three-dots text-xl" title="More"></i>
</div>
<ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
<ul
className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
{permissions === true ? (
<li>
<div
@ -168,21 +166,17 @@ export default function CollectionCard({ collection, className }: Props) {
<div className="text-right">
<div className="font-bold text-sm flex justify-end gap-1 items-center">
{collection.isPublic ? (
<FontAwesomeIcon
icon={faGlobe}
title="This collection is being shared publicly."
className="w-4 h-4 drop-shadow text-neutral"
/>
<i className="bi-globe-americas drop-shadow text-neutral"
title="This collection is being shared publicly."></i>
) : undefined}
<FontAwesomeIcon
icon={faLink}
className="w-5 h-5 text-neutral"
/>
<i className="bi-link-45deg text-lg text-neutral"
title="This collection is being shared publicly."></i>
{collection._count && collection._count.links}
</div>
<div className="flex items-center justify-end gap-1 text-neutral">
<p className="font-bold text-xs flex gap-1 items-center">
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />{" "}
<i className="bi-calendar3 text-neutral"
title="This collection is being shared publicly."></i>
{formattedDate}
</p>
</div>

10
components/FilterSearchDropdown.tsx
View File

@ -1,6 +1,4 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFilter } from "@fortawesome/free-solid-svg-icons";
type Props = {
setSearchFilter: Function;
@ -24,11 +22,9 @@ export default function FilterSearchDropdown({
role="button"
className="btn btn-sm btn-square btn-ghost"
>
<FontAwesomeIcon
icon={faFilter}
id="sort-dropdown"
className="w-5 h-5 text-neutral"
/>
<i
className="bi-funnel text-neutral text-2xl"
></i>
</div>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mt-1">
<li>

110
components/LinkPreview.tsx
View File

@ -1,110 +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/shared/isValidUrl";
import A from "next/link";
import unescapeString from "@/lib/client/unescapeString";
import { Link } from "@prisma/client";
type Props = {
link?: Partial<Link>;
className?: string;
settings: {
blurredFavicons: boolean;
displayLinkIcons: boolean;
};
};
export default function LinkPreview({ link, className, settings }: Props) {
if (!link) {
link = {
name: "Linkwarden",
url: "https://linkwarden.app",
createdAt: Date.now() as unknown as Date,
};
}
let shortendURL;
try {
shortendURL = new URL(link.url as string).host.toLowerCase();
} catch (error) {
console.log(error);
}
const url = isValidUrl(link.url as string)
? new URL(link.url as string)
: undefined;
const formattedDate = new Date(link.createdAt as Date).toLocaleString(
"en-US",
{
year: "numeric",
month: "short",
day: "numeric",
}
);
return (
<>
<div
className={`h-fit border border-solid border-neutral-content bg-base-200 shadow hover:shadow-none duration-100 rounded-2xl relative group ${
className || ""
}`}
>
<div className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5">
{url && settings?.displayLinkIcons && (
<Image
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
width={64}
height={64}
alt=""
className={`${
settings.blurredFavicons ? "blur-sm " : ""
}absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none`}
draggable="false"
onError={(e) => {
const target = e.target as HTMLElement;
target.style.display = "none";
}}
/>
)}
<div className="flex justify-between gap-5 w-full h-full z-0">
<div className="flex flex-col justify-between w-full">
<div className="flex items-baseline gap-1">
<p className="text-sm text-neutral">{1}</p>
<p className="text-lg truncate capitalize w-full pr-8">
{unescapeString(link.name as string)}
</p>
</div>
<div className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100">
<FontAwesomeIcon
icon={faFolder}
className="w-4 h-4 mt-1 drop-shadow text-primary"
/>
<p className="truncate capitalize w-full">Landing Pages ⚡️</p>
</div>
<A
href={link.url as string}
target="_blank"
onClick={(e) => {
e.stopPropagation();
}}
className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100"
>
<FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
<p className="truncate w-full">{shortendURL}</p>
</A>
<div className="flex items-center gap-1 text-neutral">
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
<p>{formattedDate}</p>
</div>
</div>
</div>
</div>
</div>
</>
);
}

129
components/LinkSidebar.tsx
View File

@ -1,129 +0,0 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faPen,
faBoxesStacked,
faTrashCan,
} from "@fortawesome/free-solid-svg-icons";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import useModalStore from "@/store/modals";
import useLinkStore from "@/store/links";
import {
CollectionIncludingMembersAndLinkCount,
LinkIncludingShortenedCollectionAndTags,
} from "@/types/global";
import { useSession } from "next-auth/react";
import useCollectionStore from "@/store/collections";
type Props = {
className?: string;
onClick?: Function;
};
export default function LinkSidebar({ className, onClick }: Props) {
const session = useSession();
const userId = session.data?.user.id;
const { setModal } = useModalStore();
const { links, removeLink } = useLinkStore();
const { collections } = useCollectionStore();
const [linkCollection, setLinkCollection] =
useState<CollectionIncludingMembersAndLinkCount>();
const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
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 (
<div
className={`bg-base-100 h-full w-64 overflow-y-auto border-solid border border-base-100 border-r-neutral-content p-5 z-20 flex flex-col gap-5 justify-between ${
className || ""
}`}
>
<div className="flex flex-col gap-5">
{link?.collection.ownerId === userId ||
linkCollection?.members.some(
(e) => e.userId === userId && e.canUpdate
) ? (
<div
title="Edit"
onClick={() => {
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`}
>
<FontAwesomeIcon icon={faPen} className="w-6 h-6 text-neutral" />
<p className="truncate w-full lg:hidden">Edit</p>
</div>
) : undefined}
<div
onClick={() => {
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`}
>
<FontAwesomeIcon
icon={faBoxesStacked}
className="w-6 h-6 text-neutral"
/>
<p className="truncate w-full lg:hidden">Preserved Formats</p>
</div>
{link?.collection.ownerId === userId ||
linkCollection?.members.some(
(e) => e.userId === userId && e.canDelete
) ? (
<div
onClick={() => {
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`}
>
<FontAwesomeIcon
icon={faTrashCan}
className="w-6 h-6 text-neutral"
/>
<p className="truncate w-full lg:hidden">Delete</p>
</div>
) : undefined}
</div>
</div>
);
}

6
components/LinkViews/GridView.tsx
View File

@ -1,5 +1,5 @@
import LinkCardGrid from "@/components/LinkViews/LinkComponents/LinkCardGrid";
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
import {LinkIncludingShortenedCollectionAndTags} from "@/types/global";
export default function CompactGridView({
links,
@ -10,8 +10,8 @@ export default function CompactGridView({
<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 key={i} className="break-inside-avoid mb-5">
<LinkCardGrid link={e} count={i}/>
</div>
);
})}

22
components/LinkViews/LinkComponents/LinkActions.tsx
View File

@ -4,8 +4,6 @@ import {
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";
@ -13,15 +11,13 @@ import useLinkStore from "@/store/links";
import { toast } from "react-hot-toast";
import useAccountStore from "@/store/account";
export default function LinkActions({
link,
collection,
position,
}: {
type Props = {
link: LinkIncludingShortenedCollectionAndTags;
collection: CollectionIncludingMembersAndLinkCount;
position?: string;
}) {
}
export default function LinkActions({ link, collection, position }: Props) {
const permissions = usePermissions(link.collection.id as number);
const [editLinkModal, setEditLinkModal] = useState(false);
@ -74,14 +70,10 @@ export default function LinkActions({
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}
/>
<i id={"expand-dropdown" + collection.id} title="More" className="bi-three-dots text-xl"/>
</div>
<ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
<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

14
components/LinkViews/LinkComponents/LinkCard.tsx
View File

@ -2,9 +2,7 @@ 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 React, { useEffect, useState } from "react";
import useLinkStore from "@/store/links";
import useCollectionStore from "@/store/collections";
import isValidUrl from "@/lib/shared/isValidUrl";
@ -62,7 +60,7 @@ export default function LinkCard({ link, count, className }: Props) {
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} />
<LinkIcon link={link}/>
</div>
<div className="flex items-baseline gap-1">
@ -74,19 +72,19 @@ export default function LinkCard({ link, count, className }: Props) {
{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" />
<i className="bi-link-45deg"/>
<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} />
<LinkCollection link={link} collection={collection}/>
<LinkDate link={link} />
<LinkDate link={link}/>
</div>
<LinkActions link={link} collection={collection} />
<LinkActions link={link} collection={collection}/>
</div>
);
}

14
components/LinkViews/LinkComponents/LinkCollection.tsx
View File

@ -2,14 +2,10 @@ 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";
import React from "react";
export default function LinkCollection({
link,
collection,
}: {
export default function LinkCollection({ link, collection }: {
link: LinkIncludingShortenedCollectionAndTags;
collection: CollectionIncludingMembersAndLinkCount;
}) {
@ -23,11 +19,7 @@ export default function LinkCollection({
}}
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 }}
/>
<i className="bi-folder2 text-lg shadow" style={{ color: collection?.color }}></i>
<p className="truncate capitalize">{collection?.name}</p>
</div>
);

9
components/LinkViews/LinkComponents/LinkDate.tsx
View File

@ -1,10 +1,7 @@
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
import React from "react";
export default function LinkDate({
link,
}: {
export default function LinkDate({ link }: {
link: LinkIncludingShortenedCollectionAndTags;
}) {
const formattedDate = new Date(link.createdAt as string).toLocaleString(
@ -18,7 +15,7 @@ export default function LinkDate({
return (
<div className="flex items-center gap-1 text-neutral">
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
<i className="bi-calendar3 text-lg"></i>
<p>{formattedDate}</p>
</div>
);

12
components/LinkViews/LinkComponents/LinkIcon.tsx
View File

@ -1,13 +1,9 @@
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";
import React from "react";
export default function LinkIcon({
link,
width,
}: {
export default function LinkIcon({ link, width }: {
link: LinkIncludingShortenedCollectionAndTags;
width?: string;
}) {
@ -35,9 +31,9 @@ export default function LinkIcon({
}}
/>
) : link.type === "pdf" ? (
<FontAwesomeIcon icon={faFilePdf} className={iconClasses} />
<i className={`bi-file-earmark-pdf ${iconClasses}`}></i>
) : link.type === "image" ? (
<FontAwesomeIcon icon={faFileImage} className={iconClasses} />
<i className={`bi-file-earmark-image ${iconClasses}`}></i>
) : undefined}
</div>
);

10
components/Modal.tsx
View File

@ -1,7 +1,5 @@
import { MouseEventHandler, ReactNode, useEffect } from "react";
import React, { MouseEventHandler, ReactNode } from "react";
import ClickAwayHandler from "@/components/ClickAwayHandler";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClose } from "@fortawesome/free-solid-svg-icons";
type Props = {
toggleModal: Function;
@ -21,9 +19,11 @@ export default function Modal({ toggleModal, className, children }: Props) {
<div className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100">
<div
onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
className="absolute top-3 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
className="absolute top-4 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
>
<FontAwesomeIcon icon={faClose} className="w-4 h-4 text-neutral" />
<i
className="bi-x text-neutral text-2xl"
></i>
</div>
{children}
</div>

12
components/Modal/Collection/CollectionInfo.tsx
View File

@ -1,14 +1,8 @@
import { Dispatch, SetStateAction, useState } from "react";
import {
faFolder,
faPenToSquare,
faPlus,
} from "@fortawesome/free-solid-svg-icons";
import useCollectionStore from "@/store/collections";
import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
import SubmitButton from "@/components/SubmitButton";
import { HexColorPicker } from "react-colorful";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { toast } from "react-hot-toast";
import TextInput from "@/components/TextInput";
@ -73,10 +67,7 @@ export default function CollectionInfo({
<div className="flex flex-col justify-between items-center w-32">
<p className="w-full mb-2">Color</p>
<div style={{ color: collection.color }}>
<FontAwesomeIcon
icon={faFolder}
className="w-12 h-12 drop-shadow"
/>
<i className={"bi-folder2"}></i>
</div>
<div
className="btn btn-ghost btn-xs"
@ -115,7 +106,6 @@ export default function CollectionInfo({
onClick={submit}
loading={submitLoader}
label={method === "CREATE" ? "Add" : "Save"}
icon={method === "CREATE" ? faPlus : faPenToSquare}
className="mx-auto mt-2"
/>
</div>

10
components/Modal/Collection/DeleteCollection.tsx
View File

@ -1,9 +1,4 @@
import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faRightFromBracket,
faTrashCan,
} from "@fortawesome/free-solid-svg-icons";
import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
import useCollectionStore from "@/store/collections";
import { useRouter } from "next/router";
@ -111,10 +106,7 @@ export default function DeleteCollection({
}`}
onClick={submit}
>
<FontAwesomeIcon
icon={permissions === true ? faTrashCan : faRightFromBracket}
className="h-5"
/>
<i className={`${ permissions === true ? 'bi-trash' : 'bi-arrow-right'}`}></i>
{permissions === true ? "Delete" : "Leave"} Collection
</div>
</div>

22
components/Modal/Collection/TeamManagement.tsx
View File

@ -1,12 +1,4 @@
import { Dispatch, SetStateAction, useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faClose,
faCrown,
faPenToSquare,
faPlus,
faUserPlus,
} from "@fortawesome/free-solid-svg-icons";
import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
import useCollectionStore from "@/store/collections";
import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
import addMemberToCollection from "@/lib/client/addMemberToCollection";
@ -173,7 +165,7 @@ export default function TeamManagement({
}
className="flex items-center justify-center bg-sky-700 hover:bg-sky-600 duration-100 text-white w-10 h-10 p-2 rounded-md cursor-pointer"
>
<FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
<i className="bi-person-add text-xl"></i>
</div>
</div>
</>
@ -194,9 +186,8 @@ export default function TeamManagement({
className="relative border p-2 rounded-md border-neutral flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
>
{permissions === true && (
<FontAwesomeIcon
icon={faClose}
className="absolute right-2 top-2 text-neutral h-4 hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
<i
className={"bi-x text-xl absolute right-1 top-1 text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"}
title="Remove Member"
onClick={() => {
const updatedMembers = collection.members.filter(
@ -402,10 +393,6 @@ export default function TeamManagement({
<div>
<div className="flex items-center gap-1">
<p className="text-sm font-bold">{collectionOwner.name}</p>
<FontAwesomeIcon
icon={faCrown}
className="w-3 h-3 text-yellow-500"
/>
</div>
<p className="text-neutral">@{collectionOwner.username}</p>
</div>
@ -422,7 +409,6 @@ export default function TeamManagement({
onClick={submit}
loading={submitLoader}
label={method === "CREATE" ? "Add" : "Save"}
icon={method === "CREATE" ? faPlus : faPenToSquare}
className="mx-auto mt-2"
/>
)}

6
components/Modal/Collection/ViewTeam.tsx
View File

@ -1,6 +1,4 @@
import { useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCrown } from "@fortawesome/free-solid-svg-icons";
import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
import ProfilePhoto from "@/components/ProfilePhoto";
import getPublicUserData from "@/lib/client/getPublicUserData";
@ -45,10 +43,6 @@ export default function ViewTeam({ collection }: Props) {
<div className="flex items-center gap-1 w-full justify-between">
<p className="text-sm font-bold">{collectionOwner.name}</p>
<div className="flex text-xs gap-1 items-center">
<FontAwesomeIcon
icon={faCrown}
className="w-3 h-3 text-yellow-500"
/>
Admin
</div>
</div>

6
components/Modal/Link/AddOrEditLink.tsx
View File

@ -2,9 +2,7 @@ import React, { useEffect, useState } from "react";
import CollectionSelection from "@/components/InputSelect/CollectionSelection";
import TagSelection from "@/components/InputSelect/TagSelection";
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
import useLinkStore from "@/store/links";
import { faLink, faPlus } from "@fortawesome/free-solid-svg-icons";
import { useSession } from "next-auth/react";
import useCollectionStore from "@/store/collections";
import { useRouter } from "next/router";
@ -13,7 +11,6 @@ import { toast } from "react-hot-toast";
import Link from "next/link";
import TextInput from "@/components/TextInput";
import unescapeString from "@/lib/client/unescapeString";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
type Props =
| {
@ -142,7 +139,7 @@ export default function AddOrEditLink({
className="text-neutral break-all w-full flex gap-2"
title={link.url || ""}
>
<FontAwesomeIcon icon={faLink} className="w-6 h-6" />
<i className={"bi-link-45deg"}></i>
<Link href={link.url || ""} target="_blank" className="w-full">
{link.url}
</Link>
@ -264,7 +261,6 @@ export default function AddOrEditLink({
<SubmitButton
onClick={submit}
label={method === "CREATE" ? "Add" : "Save"}
icon={method === "CREATE" ? faPlus : faPenToSquare}
loading={submitLoader}
className={`${method === "CREATE" ? "" : "mx-auto"}`}
/>

28
components/Modal/Link/PreservedFormats.tsx
View File

@ -4,12 +4,6 @@ import {
} from "@/types/global";
import { useEffect, useState } from "react";
import Link from "next/link";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faArrowUpRightFromSquare,
faCloudArrowDown,
} from "@fortawesome/free-solid-svg-icons";
import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
import useLinkStore from "@/store/links";
import { toast } from "react-hot-toast";
import { useRouter } from "next/router";
@ -97,7 +91,6 @@ export default function PreservedFormats() {
<div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
<div className="flex gap-2 items-center">
<div className="bg-primary text-primary-content p-2 rounded-l-md">
<FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
</div>
<p>Screenshot</p>
@ -108,10 +101,6 @@ export default function PreservedFormats() {
onClick={() => handleDownload(ArchivedFormat.png)}
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faCloudArrowDown}
className="w-5 h-5 cursor-pointer text-neutral"
/>
</div>
<Link
@ -123,10 +112,6 @@ export default function PreservedFormats() {
target="_blank"
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="w-5 h-5 text-neutral"
/>
</Link>
</div>
</div>
@ -136,7 +121,6 @@ export default function PreservedFormats() {
<div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
<div className="flex gap-2 items-center">
<div className="bg-primary text-primary-content p-2 rounded-l-md">
<FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
</div>
<p>PDF</p>
@ -147,10 +131,6 @@ export default function PreservedFormats() {
onClick={() => handleDownload(ArchivedFormat.pdf)}
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faCloudArrowDown}
className="w-5 h-5 cursor-pointer text-neutral"
/>
</div>
<Link
@ -158,10 +138,6 @@ export default function PreservedFormats() {
target="_blank"
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="w-5 h-5 text-neutral"
/>
</Link>
</div>
</div>
@ -191,10 +167,6 @@ export default function PreservedFormats() {
screenshotAvailable(link) && pdfAvailable(link) ? "sm:mt-3" : ""
}`}
>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="w-4 h-4"
/>
<p className="whitespace-nowrap">
View Latest Snapshot on archive.org
</p>

24
components/ModalContent/DeleteCollectionModal.tsx
View File

@ -2,11 +2,6 @@ import React, { useEffect, useState } from "react";
import TextInput from "@/components/TextInput";
import useCollectionStore from "@/store/collections";
import toast from "react-hot-toast";
import {
faRightFromBracket,
faTrashCan,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
import { useRouter } from "next/router";
import usePermissions from "@/hooks/usePermissions";
@ -89,19 +84,7 @@ export default function DeleteCollectionModal({
</div>
<div role="alert" className="alert alert-warning">
<svg
xmlns="http://www.w3.org/2000/svg"
className="stroke-current shrink-0 h-6 w-6"
fill="none"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
<i className="bi-exclamation-triangle text-xl"></i>
<span>
<b>Warning:</b> Deleting this collection will permanently erase
all its contents, and it will become inaccessible to everyone,
@ -124,10 +107,7 @@ export default function DeleteCollectionModal({
}`}
onClick={submit}
>
<FontAwesomeIcon
icon={permissions === true ? faTrashCan : faRightFromBracket}
className="h-5"
/>
<i className="bi-trash text-xl"></i>
{permissions === true ? "Delete" : "Leave"} Collection
</button>
</div>

24
components/ModalContent/DeleteLinkModal.tsx
View File

@ -1,15 +1,7 @@
import React, { useEffect, useState } from "react";
import { Toaster } from "react-hot-toast";
import CollectionSelection from "@/components/InputSelect/CollectionSelection";
import TagSelection from "@/components/InputSelect/TagSelection";
import TextInput from "@/components/TextInput";
import unescapeString from "@/lib/client/unescapeString";
import useLinkStore from "@/store/links";
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
import toast from "react-hot-toast";
import Link from "next/link";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faLink, faTrashCan } from "@fortawesome/free-solid-svg-icons";
import Modal from "../Modal";
import { useRouter } from "next/router";
@ -57,19 +49,7 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
<p>Are you sure you want to delete this Link?</p>
<div role="alert" className="alert alert-warning">
<svg
xmlns="http://www.w3.org/2000/svg"
className="stroke-current shrink-0 h-6 w-6"
fill="none"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
<i className="bi-exclamation-triangle text-xl"/>
<span>
<b>Warning:</b> This action is irreversible!
</span>
@ -84,7 +64,7 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
onClick={deleteLink}
>
<FontAwesomeIcon icon={faTrashCan} className="h-5" />
<i className="bi-trash text-xl"/>
Delete
</button>
</div>

13
components/ModalContent/EditCollectionModal.tsx
View File

@ -1,10 +1,8 @@
import React, { useEffect, useState } from "react";
import React, { useState } from "react";
import TextInput from "@/components/TextInput";
import useCollectionStore from "@/store/collections";
import toast, { Toaster } from "react-hot-toast";
import { faFolder } from "@fortawesome/free-solid-svg-icons";
import toast from "react-hot-toast";
import { HexColorPicker } from "react-colorful";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
import Modal from "../Modal";
@ -70,12 +68,7 @@ export default function EditCollectionModal({
<p className="w-full mb-2">Color</p>
<div className="color-picker flex justify-between">
<div className="flex flex-col gap-2 items-center w-32">
<div style={{ color: collection.color }}>
<FontAwesomeIcon
icon={faFolder}
className="w-12 h-12 drop-shadow"
/>
</div>
<i className="bi-folder2 text-5xl drop-shadow" style={{ color: collection.color }}></i>
<div
className="btn btn-ghost btn-xs"
onClick={() =>

19
components/ModalContent/EditCollectionSharingModal.tsx
View File

@ -1,13 +1,7 @@
import React, { useEffect, useState } from "react";
import TextInput from "@/components/TextInput";
import useCollectionStore from "@/store/collections";
import toast, { Toaster } from "react-hot-toast";
import {
faClose,
faCrown,
faUserPlus,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import toast from "react-hot-toast";
import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
import getPublicUserData from "@/lib/client/getPublicUserData";
import useAccountStore from "@/store/account";
@ -182,7 +176,7 @@ export default function EditCollectionSharingModal({
}
className="btn btn-accent text-white btn-square btn-sm h-10 w-10"
>
<FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
<i className="bi-person-add text-xl"></i>
</div>
</div>
</>
@ -219,10 +213,6 @@ export default function EditCollectionSharingModal({
{collectionOwner.name}
</p>
<div className="flex text-xs gap-1 items-center">
<FontAwesomeIcon
icon={faCrown}
className="w-3 h-3 text-yellow-500"
/>
Admin
</div>
</div>
@ -240,9 +230,8 @@ export default function EditCollectionSharingModal({
className="relative border p-2 rounded-xl border-neutral-content bg-base-200 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
>
{permissions === true && (
<FontAwesomeIcon
icon={faClose}
className="absolute right-2 top-2 text-neutral h-4 hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
<i
className={"bi-x text-xl absolute right-1 top-1 text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"}
title="Remove Member"
onClick={() => {
const updatedMembers = collection.members.filter(

8
components/ModalContent/EditLinkModal.tsx
View File

@ -1,5 +1,4 @@
import React, { useEffect, useState } from "react";
import { Toaster } from "react-hot-toast";
import CollectionSelection from "@/components/InputSelect/CollectionSelection";
import TagSelection from "@/components/InputSelect/TagSelection";
import TextInput from "@/components/TextInput";
@ -8,8 +7,6 @@ import useLinkStore from "@/store/links";
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
import toast from "react-hot-toast";
import Link from "next/link";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faLink } from "@fortawesome/free-solid-svg-icons";
import Modal from "../Modal";
type Props = {
@ -89,10 +86,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
title={link.url}
target="_blank"
>
<FontAwesomeIcon
icon={faLink}
className="mt-1 w-5 h-5 min-w-[1.25rem]"
/>
<i className="bi-link-45deg text-xl"/>
<p>{shortendURL}</p>
</Link>
) : undefined}

20
components/ModalContent/NewCollectionModal.tsx
View File

@ -1,11 +1,9 @@
import React, { useEffect, useState } from "react";
import TextInput from "@/components/TextInput";
import useCollectionStore from "@/store/collections";
import toast, { Toaster } from "react-hot-toast";
import { faFolder } from "@fortawesome/free-solid-svg-icons";
import toast from "react-hot-toast";
import { HexColorPicker } from "react-colorful";
import { Collection } from "@prisma/client";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Modal from "../Modal";
type Props = {
@ -29,18 +27,14 @@ export default function NewCollectionModal({ onClose }: Props) {
const { addCollection } = useCollectionStore();
const submit = async () => {
if (!submitLoader) {
setSubmitLoader(true);
if (submitLoader) return;
if (!collection) return null;
setSubmitLoader(true);
const load = toast.loading("Creating...");
let response;
response = await addCollection(collection as any);
let response = await addCollection(collection as any);
toast.dismiss(load);
if (response.ok) {
@ -49,7 +43,6 @@ export default function NewCollectionModal({ onClose }: Props) {
} else toast.error(response.data as string);
setSubmitLoader(false);
}
};
return (
@ -75,12 +68,7 @@ export default function NewCollectionModal({ onClose }: Props) {
<p className="w-full mb-2">Color</p>
<div className="color-picker flex justify-between">
<div className="flex flex-col gap-2 items-center w-32">
<div style={{ color: collection.color }}>
<FontAwesomeIcon
icon={faFolder}
className="w-12 h-12 drop-shadow"
/>
</div>
<i className={"bi-folder2 text-5xl"} style={{ color: collection.color }}></i>
<div
className="btn btn-ghost btn-xs"
onClick={() =>

17
components/ModalContent/NewLinkModal.tsx
View File

@ -145,6 +145,15 @@ export default function NewLinkModal({ onClose }: Props) {
</div>
</div>
<div className={"mt-2"}>
<div
onClick={() => setOptionsExpanded(!optionsExpanded)}
className={`cursor-pointer duration-100 flex items-center text-sm`}
>
<span>{optionsExpanded ? "Hide" : "More"} Options</span>
<i className={`ml-0.5 ${optionsExpanded ? 'bi-chevron-up' : 'bi-chevron-down'}`}></i>
</div>
{optionsExpanded ? (
<div className="mt-5">
{/* <hr className="mb-3 border border-neutral-content" /> */}
@ -183,15 +192,9 @@ export default function NewLinkModal({ onClose }: Props) {
</div>
</div>
) : undefined}
<div className="flex justify-between items-center mt-5">
<div
onClick={() => setOptionsExpanded(!optionsExpanded)}
className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
>
<p>{optionsExpanded ? "Hide" : "More"} Options</p>
</div>
<div className="flex items-center justify-end mt-5">
<button
className="btn btn-accent dark:border-violet-400 text-white"
onClick={submit}

155
components/ModalContent/PreservedFormatsModal.tsx
View File

@ -1,32 +1,13 @@
import React, { useEffect, useState } from "react";
import useLinkStore from "@/store/links";
import {
ArchivedFormat,
LinkIncludingShortenedCollectionAndTags,
} from "@/types/global";
import { ArchivedFormat, LinkIncludingShortenedCollectionAndTags, } from "@/types/global";
import toast from "react-hot-toast";
import Link from "next/link";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faArrowUpRightFromSquare,
faCloudArrowDown,
faLink,
faTrashCan,
faUpRightFromSquare,
} from "@fortawesome/free-solid-svg-icons";
import Modal from "../Modal";
import {
faFileImage,
faFileLines,
faFilePdf,
} from "@fortawesome/free-regular-svg-icons";
import { useRouter } from "next/router";
import { useSession } from "next-auth/react";
import {
pdfAvailable,
readabilityAvailable,
screenshotAvailable,
} from "@/lib/shared/getArchiveValidity";
import { pdfAvailable, readabilityAvailable, screenshotAvailable, } from "@/lib/shared/getArchiveValidity";
import PreservedFormatRow from "@/components/PreserverdFormatRow";
type Props = {
onClose: Function;
@ -92,25 +73,6 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
} else toast.error(data.response);
};
const handleDownload = (format: ArchivedFormat) => {
const path = `/api/v1/archives/${link?.id}?format=${format}`;
fetch(path)
.then((response) => {
if (response.ok) {
// Create a temporary link and click it to trigger the download
const link = document.createElement("a");
link.href = path;
link.download = format === ArchivedFormat.png ? "Screenshot" : "PDF";
link.click();
} else {
console.error("Failed to download file");
}
})
.catch((error) => {
console.error("Error:", error);
});
};
return (
<Modal toggleModal={onClose}>
<p className="text-xl font-thin">Preserved Formats</p>
@ -129,112 +91,18 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
<div className={`flex flex-col gap-3`}>
{readabilityAvailable(link) ? (
<div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
<div className="flex gap-2 items-center">
<div className="bg-primary text-primary-content p-2 rounded-l-md">
<FontAwesomeIcon icon={faFileLines} className="w-6 h-6" />
</div>
<p>Readable</p>
</div>
<div className="flex gap-1">
{/* <div
onClick={() => handleDownload(ArchivedFormat.pdf)}
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faCloudArrowDown}
className="w-5 h-5 cursor-pointer text-neutral"
/>
</div> */}
<Link
href={`/preserved/${link?.id}?format=${ArchivedFormat.readability}`}
target="_blank"
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="w-5 h-5 text-neutral"
/>
</Link>
</div>
</div>
<PreservedFormatRow name={'Readable'} icon={'bi-file-earmark-text'} format={ArchivedFormat.readability}
activeLink={link}/>
) : undefined}
{screenshotAvailable(link) ? (
<div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
<div className="flex gap-2 items-center">
<div className="bg-primary text-primary-content p-2 rounded-l-md">
<FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
</div>
<p>Screenshot</p>
</div>
<div className="flex gap-1">
<div
onClick={() => handleDownload(ArchivedFormat.png)}
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faCloudArrowDown}
className="w-5 h-5 cursor-pointer text-neutral"
/>
</div>
<Link
href={`/api/v1/archives/${link?.id}?format=${
link.screenshotPath?.endsWith("png")
? ArchivedFormat.png
: ArchivedFormat.jpeg
}`}
target="_blank"
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faUpRightFromSquare}
className="w-5 h-5 text-neutral"
/>
</Link>
</div>
</div>
<PreservedFormatRow name={'Screenshot'} icon={'bi-file-earmark-image'} format={ArchivedFormat.png}
activeLink={link} downloadable={true}/>
) : undefined}
{pdfAvailable(link) ? (
<div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
<div className="flex gap-2 items-center">
<div className="bg-primary text-primary-content p-2 rounded-l-md">
<FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
</div>
<p>PDF</p>
</div>
<div className="flex gap-1">
<div
onClick={() => handleDownload(ArchivedFormat.pdf)}
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faCloudArrowDown}
className="w-5 h-5 cursor-pointer text-neutral"
/>
</div>
<Link
href={`/api/v1/archives/${link?.id}?format=${ArchivedFormat.pdf}`}
target="_blank"
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="w-5 h-5 text-neutral"
/>
</Link>
</div>
</div>
<PreservedFormatRow name={'PDF'} icon={'bi-file-earmark-pdf'} format={ArchivedFormat.pdf}
activeLink={link} downloadable={true}/>
) : undefined}
<div className="flex flex-col-reverse sm:flex-row sm:gap-3 items-center justify-center">
@ -272,10 +140,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
<p className="whitespace-nowrap">
View latest snapshot on archive.org
</p>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="w-4 h-4"
/>
<i className="bi-box-arrow-up-right"/>
</Link>
</div>
</div>

4
components/ModalContent/UploadFileModal.tsx
View File

@ -1,5 +1,4 @@
import React, { useEffect, useState } from "react";
import { Toaster } from "react-hot-toast";
import CollectionSelection from "@/components/InputSelect/CollectionSelection";
import TagSelection from "@/components/InputSelect/TagSelection";
import TextInput from "@/components/TextInput";
@ -14,9 +13,6 @@ import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import toast from "react-hot-toast";
import Modal from "../Modal";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faQuestion } from "@fortawesome/free-solid-svg-icons";
import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
type Props = {
onClose: Function;

9
components/NoLinksFound.tsx
View File

@ -1,5 +1,3 @@
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { useState } from "react";
import NewLinkModal from "./ModalContent/NewLinkModal";
@ -35,10 +33,9 @@ export default function NoLinksFound({ text }: Props) {
}}
className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent dark:border-violet-400 text-white group"
>
<FontAwesomeIcon
icon={faPlus}
className="w-5 h-5 left-4 group-hover:ml-[4rem] absolute duration-100"
/>
<i
className="bi-plus text-4xl left-2 group-hover:ml-[4rem] absolute duration-100"
></i>
<span className="group-hover:opacity-0 text-right w-full duration-100">
Create New Link
</span>

2
components/PageHeader.tsx
View File

@ -6,7 +6,7 @@ export default function PageHeader({
icon,
}: {
title: string;
description: string;
description?: string;
icon: string;
}) {
return (

137
components/PreserverdFormatRow.tsx Normal file
View File

@ -0,0 +1,137 @@
import React, { useEffect, useState } from "react";
import useLinkStore from "@/store/links";
import {
ArchivedFormat,
LinkIncludingShortenedCollectionAndTags,
} from "@/types/global";
import toast from "react-hot-toast";
import Link from "next/link";
import { useRouter } from "next/router";
import { useSession } from "next-auth/react";
type Props = {
name: string,
icon: string,
format: ArchivedFormat,
activeLink: LinkIncludingShortenedCollectionAndTags,
downloadable?: boolean,
};
export default function PreservedFormatRow({ name, icon, format, activeLink, downloadable }: Props) {
const session = useSession();
const { getLink } = useLinkStore();
const [link, setLink] =
useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
const router = useRouter();
useEffect(() => {
let isPublicRoute = router.pathname.startsWith("/public")
? true
: undefined;
(async () => {
const data = await getLink(link.id as number, isPublicRoute);
setLink(
(data as any).response as LinkIncludingShortenedCollectionAndTags
);
})();
let interval: any;
if (link?.screenshotPath === "pending" || link?.pdfPath === "pending") {
interval = setInterval(async () => {
const data = await getLink(link.id as number, isPublicRoute);
setLink(
(data as any).response as LinkIncludingShortenedCollectionAndTags
);
}, 5000);
} else {
if (interval) {
clearInterval(interval);
}
}
return () => {
if (interval) {
clearInterval(interval);
}
};
}, [link?.screenshotPath, link?.pdfPath, link?.readabilityPath]);
const updateArchive = async () => {
const load = toast.loading("Sending request...");
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 handleDownload = () => {
const path = `/api/v1/archives/${link?.id}?format=${format}`;
fetch(path)
.then((response) => {
if (response.ok) {
// Create a temporary link and click it to trigger the download
const link = document.createElement("a");
link.href = path;
link.download = format === ArchivedFormat.png ? "Screenshot" : "PDF";
link.click();
} else {
console.error("Failed to download file");
}
})
.catch((error) => {
console.error("Error:", error);
});
};
return (
<div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
<div className="flex gap-2 items-center">
<div className="bg-primary text-primary-content p-2 rounded-l-md">
<i className={`${icon} text-2xl`}/>
</div>
<p>{name}</p>
</div>
<div className="flex gap-1">
{downloadable || false ? (
<div
onClick={() => handleDownload()}
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
>
<i className="bi-cloud-arrow-down text-xl text-neutral"/>
</div>
) : undefined}
<Link
href={
`${
format === ArchivedFormat.readability
? `/preserved/${link?.id}?format=${format}`
: `/api/v1/archives/${link?.id}?format=${
link.screenshotPath?.endsWith("png")
? ArchivedFormat.png
: ArchivedFormat.jpeg
}`
}`
}
target="_blank"
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
>
<i className="bi-box-arrow-up-right text-xl text-neutral"/>
</Link>
</div>
</div>
);
}

7
components/PublicPage/PublicLinkCard.tsx
View File

@ -1,5 +1,3 @@
import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Image from "next/image";
import { Link as LinkType, Tag } from "@prisma/client";
import isValidUrl from "@/lib/shared/isValidUrl";
@ -83,10 +81,7 @@ export default function LinkCard({ link, count }: Props) {
className="flex gap-1 items-center flex-wrap text-sm text-neutral hover:opacity-50 duration-100 min-w-fit float-right mt-1 ml-2"
>
<p>Read</p>
<FontAwesomeIcon
icon={faChevronRight}
className="w-3 h-3 mt-[0.15rem]"
/>
<i className={"bi-chevron-right"}></i>
</Link>
</div>
</div>

18
components/RadioButton.tsx
View File

@ -1,5 +1,3 @@
import { faCircle, faCircleCheck } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ChangeEventHandler } from "react";
type Props = {
@ -18,14 +16,14 @@ export default function RadioButton({ label, state, onClick }: Props) {
checked={state}
onChange={onClick}
/>
<FontAwesomeIcon
icon={faCircleCheck}
className="w-5 h-5 text-primary peer-checked:block hidden"
/>
<FontAwesomeIcon
icon={faCircle}
className="w-5 h-5 text-primary peer-checked:hidden block"
/>
{/*<FontAwesomeIcon*/}
{/* icon={faCircleCheck}*/}
{/* className="w-5 h-5 text-primary peer-checked:block hidden"*/}
{/*/>*/}
{/*<FontAwesomeIcon*/}
{/* icon={faCircle}*/}
{/* className="w-5 h-5 text-primary peer-checked:hidden block"*/}
{/*/>*/}
<span className="rounded select-none">{label}</span>
</label>
);

13
components/ReadableView.tsx
View File

@ -6,8 +6,6 @@ import {
ArchivedFormat,
LinkIncludingShortenedCollectionAndTags,
} from "@/types/global";
import { faFolder, faLink } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import ColorThief, { RGBColor } from "colorthief";
import DOMPurify from "dompurify";
import Image from "next/image";
@ -174,7 +172,9 @@ export default function ReadableView({ link }: Props) {
target="_blank"
className="hover:opacity-60 duration-100 break-all text-sm flex items-center gap-1 text-neutral w-fit"
>
<FontAwesomeIcon icon={faLink} className="w-4 h-4" />
<i
className="bi-link-45deg"
></i>
{isValidUrl(link?.url || "")
? new URL(link?.url as string).host
@ -189,11 +189,10 @@ export default function ReadableView({ link }: Props) {
href={`/collections/${link?.collection.id}`}
className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
>
<FontAwesomeIcon
icon={faFolder}
className="w-5 h-5 drop-shadow"
<i
className="bi-folder2 drop-shadow text-2xl"
style={{ color: link?.collection.color }}
/>
></i>
<p
title={link?.collection.name}
className="text-lg truncate max-w-[12rem]"

87
components/SettingsSidebar.tsx
View File

@ -1,24 +1,7 @@
import useCollectionStore from "@/store/collections";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faUser,
faPalette,
faBoxArchive,
faKey,
faLock,
} from "@fortawesome/free-solid-svg-icons";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import {
faCircleQuestion,
faCreditCard,
} from "@fortawesome/free-regular-svg-icons";
import {
faGithub,
faMastodon,
faXTwitter,
} from "@fortawesome/free-brands-svg-icons";
import React, { useEffect, useState } from "react";
export default function SettingsSidebar({ className }: { className?: string }) {
const LINKWARDEN_VERSION = "v2.4.0";
@ -48,7 +31,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
: "hover:bg-neutral/20"
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<FontAwesomeIcon icon={faUser} className="w-7 h-7 text-primary" />
<i
className="bi-person text-primary text-2xl"
></i>
<p className="truncate w-full pr-7">Account</p>
</div>
@ -62,10 +47,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
: "hover:bg-neutral/20"
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<FontAwesomeIcon
icon={faPalette}
className="w-7 h-7 text-primary"
/>
<i
className="bi-palette text-primary text-2xl"
></i>
<p className="truncate w-full pr-7">Appearance</p>
</div>
@ -79,11 +63,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
: "hover:bg-neutral/20"
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<FontAwesomeIcon
icon={faBoxArchive}
className="w-7 h-7 text-primary"
/>
<i
className="bi-archive text-primary text-2xl"
></i>
<p className="truncate w-full pr-7">Archive</p>
</div>
</Link>
@ -96,8 +78,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
: "hover:bg-neutral/20"
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<FontAwesomeIcon icon={faKey} className="w-7 h-7 text-primary" />
<i
className="bi-key text-primary text-2xl"
></i>
<p className="truncate w-full pr-7">API Keys</p>
</div>
</Link>
@ -110,8 +93,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
: "hover:bg-neutral/20"
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<FontAwesomeIcon icon={faLock} className="w-7 h-7 text-primary" />
<i
className="bi-lock text-primary text-2xl"
></i>
<p className="truncate w-full pr-7">Password</p>
</div>
</Link>
@ -125,11 +109,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
: "hover:bg-neutral/20"
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<FontAwesomeIcon
icon={faCreditCard}
className="w-7 h-7 text-primary"
/>
<i
className="bi-credit-card text-primary text-xl"
></i>
<p className="truncate w-full pr-7">Billing</p>
</div>
</Link>
@ -148,10 +130,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
<div
className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<FontAwesomeIcon
icon={faCircleQuestion as any}
className="w-6 h-6 text-primary"
/>
<i
className="bi-question-circle text-primary text-xl"
></i>
<p className="truncate w-full pr-7">Help</p>
</div>
@ -161,11 +142,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
<div
className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<FontAwesomeIcon
icon={faGithub as any}
className="w-6 h-6 text-primary"
/>
<i
className="bi-github text-primary text-xl"
></i>
<p className="truncate w-full pr-7">GitHub</p>
</div>
</Link>
@ -174,11 +153,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
<div
className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<FontAwesomeIcon
icon={faXTwitter as any}
className="w-6 h-6 text-primary"
/>
<i
className="bi-twitter-x text-primary text-xl"
></i>
<p className="truncate w-full pr-7">Twitter</p>
</div>
</Link>
@ -187,11 +164,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
<div
className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<FontAwesomeIcon
icon={faMastodon as any}
className="w-6 h-6 text-primary"
/>
<i
className="bi-mastodon text-primary text-xl"
></i>
<p className="truncate w-full pr-7">Mastodon</p>
</div>
</Link>

13
components/SortDropdown.tsx
View File

@ -1,7 +1,5 @@
import React, { Dispatch, SetStateAction } from "react";
import { Sort } from "@/types/global";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSort } from "@fortawesome/free-solid-svg-icons";
type Props = {
sortBy: Sort;
@ -16,14 +14,9 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
role="button"
className="btn btn-sm btn-square btn-ghost"
>
<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>
<i
className="bi-filter text-neutral text-2xl"
></i>
</div>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
<li>

6
components/SubmitButton.tsx
View File

@ -1,9 +1,5 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
type Props = {
onClick?: Function;
icon?: IconProp;
label: string;
loading: boolean;
className?: string;
@ -12,7 +8,6 @@ type Props = {
export default function SubmitButton({
onClick,
icon,
label,
loading,
className,
@ -28,7 +23,6 @@ export default function SubmitButton({
if (!loading && onClick) onClick();
}}
>
{icon && <FontAwesomeIcon icon={icon} className="h-5" />}
<p>{label}</p>
</button>
);

216
layouts/LinkLayout.tsx
View File

@ -1,216 +0,0 @@
import LinkSidebar from "@/components/LinkSidebar";
import { ReactNode, useEffect, useState } from "react";
import ModalManagement from "@/components/ModalManagement";
import useModalStore from "@/store/modals";
import { useRouter } from "next/router";
import ClickAwayHandler from "@/components/ClickAwayHandler";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
import useWindowDimensions from "@/hooks/useWindowDimensions";
import {
faPen,
faBoxesStacked,
faTrashCan,
} from "@fortawesome/free-solid-svg-icons";
import useLinkStore from "@/store/links";
import {
CollectionIncludingMembersAndLinkCount,
LinkIncludingShortenedCollectionAndTags,
} from "@/types/global";
import { useSession } from "next-auth/react";
import useCollectionStore from "@/store/collections";
import EditLinkModal from "@/components/ModalContent/EditLinkModal";
import Link from "next/link";
import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
import toast from "react-hot-toast";
import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
interface Props {
children: ReactNode;
}
export default function LinkLayout({ children }: Props) {
const { modal } = useModalStore();
const router = useRouter();
useEffect(() => {
modal
? (document.body.style.overflow = "hidden")
: (document.body.style.overflow = "auto");
}, [modal]);
const [sidebar, setSidebar] = useState(false);
const { width } = useWindowDimensions();
useEffect(() => {
setSidebar(false);
}, [width]);
useEffect(() => {
setSidebar(false);
}, [router]);
const toggleSidebar = () => {
setSidebar(!sidebar);
};
const session = useSession();
const userId = session.data?.user.id;
const { setModal } = useModalStore();
const { links, removeLink } = useLinkStore();
const { collections } = useCollectionStore();
const [linkCollection, setLinkCollection] =
useState<CollectionIncludingMembersAndLinkCount>();
const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
useEffect(() => {
if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
}, [links]);
useEffect(() => {
if (link)
setLinkCollection(collections.find((e) => e.id === link?.collection?.id));
}, [link, collections]);
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.`);
router.push("/dashboard");
};
const [editLinkModal, setEditLinkModal] = useState(false);
const [deleteLinkModal, setDeleteLinkModal] = useState(false);
const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
return (
<>
<div className="flex mx-auto">
{/* <div className="hidden lg:block fixed left-5 h-screen">
<LinkSidebar />
</div> */}
<div className="w-full flex flex-col min-h-screen max-w-screen-md mx-auto p-5">
<div className="flex gap-3 mb-3 duration-100 items-center justify-between">
{/* <div
onClick={toggleSidebar}
className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-neutral-content"
>
<FontAwesomeIcon icon={faBars} className="w-5 h-5" />
</div> */}
<Link
href={
router.pathname.startsWith("/public")
? `/public/collections/${
linkCollection?.id || link?.collection?.id
}`
: `/dashboard`
}
className="inline-flex gap-1 btn btn-ghost btn-sm text-neutral px-2"
>
<FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
<span className="capitalize">
{router.pathname.startsWith("/public")
? linkCollection?.name || link?.collection?.name
: "Dashboard"}
</span>
</Link>
<div className="flex gap-3">
{link?.collection?.ownerId === userId ||
linkCollection?.members.some(
(e) => e.userId === userId && e.canUpdate
) ? (
<div
title="Edit"
onClick={() => setEditLinkModal(true)}
className={`btn btn-ghost btn-square btn-sm`}
>
<FontAwesomeIcon
icon={faPen}
className="w-4 h-4 text-neutral"
/>
</div>
) : undefined}
<div
onClick={() => setPreservedFormatsModal(true)}
title="Preserved Formats"
className={`btn btn-ghost btn-square btn-sm`}
>
<FontAwesomeIcon
icon={faBoxesStacked}
className="w-4 h-4 text-neutral"
/>
</div>
{link?.collection?.ownerId === userId ||
linkCollection?.members.some(
(e) => e.userId === userId && e.canDelete
) ? (
<div
onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur();
e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
}}
title="Delete"
className={`btn btn-ghost btn-square btn-sm`}
>
<FontAwesomeIcon
icon={faTrashCan}
className="w-4 h-4 text-neutral"
/>
</div>
) : undefined}
</div>
</div>
{children}
{sidebar ? (
<div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
<ClickAwayHandler
className="h-full"
onClickOutside={toggleSidebar}
>
<div className="slide-right h-full shadow-lg">
<LinkSidebar onClick={() => setSidebar(false)} />
</div>
</ClickAwayHandler>
</div>
) : null}
</div>
{link && editLinkModal ? (
<EditLinkModal
onClose={() => setEditLinkModal(false)}
activeLink={link}
/>
) : undefined}
{link && deleteLinkModal ? (
<DeleteLinkModal
onClose={() => setDeleteLinkModal(false)}
activeLink={link}
/>
) : undefined}
{link && preservedFormatsModal ? (
<PreservedFormatsModal
onClose={() => setPreservedFormatsModal(false)}
activeLink={link}
/>
) : undefined}
</div>
</>
);
}

12
layouts/SettingsLayout.tsx
View File

@ -1,11 +1,9 @@
import SettingsSidebar from "@/components/SettingsSidebar";
import { ReactNode, useEffect, useState } from "react";
import React, { ReactNode, useEffect, useState } from "react";
import ModalManagement from "@/components/ModalManagement";
import useModalStore from "@/store/modals";
import { useRouter } from "next/router";
import ClickAwayHandler from "@/components/ClickAwayHandler";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
import Link from "next/link";
import useWindowDimensions from "@/hooks/useWindowDimensions";
@ -55,14 +53,18 @@ export default function SettingsLayout({ children }: Props) {
onClick={toggleSidebar}
className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
>
<FontAwesomeIcon icon={faBars} className="w-5 h-5" />
<i
className="bi-list text-xl"
></i>
</div>
<Link
href="/dashboard"
className="text-neutral btn btn-square btn-sm btn-ghost"
>
<FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5" />
<i
className="bi-chevron-left text-xl"
></i>
</Link>
</div>

5
package.json
View File

@ -16,11 +16,6 @@
"dependencies": {
"@auth/prisma-adapter": "^1.0.1",
"@aws-sdk/client-s3": "^3.379.1",
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@headlessui/react": "^1.7.15",
"@mozilla/readability": "^0.4.4",
"@prisma/client": "^4.16.2",

6
pages/api/v1/links/[id]/archive/index.ts
View File

@ -1,5 +1,5 @@
import type { NextApiRequest, NextApiResponse } from "next";
import urlHandler from "@/lib/api/archiveHandler";
import archiveHandler from "@/lib/api/archiveHandler";
import { prisma } from "@/lib/api/db";
import verifyUser from "@/lib/api/verifyUser";
import isValidUrl from "@/lib/shared/isValidUrl";
@ -14,7 +14,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
where: {
id: Number(req.query.id),
},
include: { collection: true },
include: { collection: { include: { owner: true } } },
});
if (!link)
@ -43,7 +43,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
});
if (link.url && isValidUrl(link.url)) {
urlHandler(link.id, link.url, user.id);
archiveHandler(link);
return res.status(200).json({
response: "Link is not a webpage to be archived.",
});

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

@ -6,10 +6,8 @@ import {
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";
import { useEffect, useState } from "react";
import React, { useEffect, useState } from "react";
import MainLayout from "@/layouts/MainLayout";
import ProfilePhoto from "@/components/ProfilePhoto";
import SortDropdown from "@/components/SortDropdown";
@ -109,12 +107,12 @@ export default function Index() {
>
{activeCollection && (
<div className="flex gap-3 items-start justify-between">
<div className="flex gap-2">
<FontAwesomeIcon
icon={faFolder}
<div className="flex items-center gap-2">
<i
className="bi-folder2 text-3xl drop-shadow"
style={{ color: activeCollection?.color }}
className="sm:w-8 sm:h-8 w-8 h-8 mt-2 drop-shadow"
/>
></i>
<p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
{activeCollection?.name}
</p>
@ -126,11 +124,10 @@ export default function Index() {
role="button"
className="btn btn-ghost btn-sm btn-square text-neutral"
>
<FontAwesomeIcon
icon={faEllipsis}
<i
className="bi-three-dots text-xl"
title="More"
className="w-5 h-5"
/>
></i>
</div>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
{permissions === true ? (

17
pages/dashboard.tsx
View File

@ -2,7 +2,6 @@ import useLinkStore from "@/store/links";
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";
@ -95,9 +94,10 @@ export default function Dashboard() {
return (
<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"} />
<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">
<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
name={numberOfLinks === 1 ? "Link" : "Links"}
value={numberOfLinks}
@ -140,13 +140,13 @@ export default function Dashboard() {
style={{ flex: "0 1 auto" }}
className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
>
{false && links[0] ? (
{links[0] ? (
<div className="w-full">
<div
className={`grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
>
{links.slice(0, showLinks).map((e, i) => (
<LinkCard key={i} link={e} count={i} />
<LinkCard key={i} link={e} count={i}/>
))}
</div>
</div>
@ -186,7 +186,8 @@ export default function Dashboard() {
<i className="bi-cloud-upload text-xl duration-100"></i>
<p>Import From</p>
</div>
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
<ul
className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
<li>
<label
tabIndex={0}
@ -259,7 +260,7 @@ export default function Dashboard() {
>
{links
.filter((e) => e.pinnedBy && e.pinnedBy[0])
.map((e, i) => <LinkCard key={i} link={e} count={i} />)
.map((e, i) => <LinkCard key={i} link={e} count={i}/>)
.slice(0, showLinks)}
</div>
</div>
@ -281,7 +282,7 @@ export default function Dashboard() {
</div>
</div>
{newLinkModal ? (
<NewLinkModal onClose={() => setNewLinkModal(false)} />
<NewLinkModal onClose={() => setNewLinkModal(false)}/>
) : undefined}
</MainLayout>
);

19
pages/links/index.tsx
View File

@ -1,19 +1,13 @@
import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
import NoLinksFound from "@/components/NoLinksFound";
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 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";
@ -44,17 +38,16 @@ 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 className="mt-2 flex items-center justify-end gap-2">
<SortDropdown sortBy={sortBy} setSort={setSortBy}/>
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode}/>
</div>
{links[0] ? (
<LinkComponent links={links} />
<LinkComponent links={links}/>
) : (
<NoLinksFound text="You Haven't Created Any Links Yet" />
<NoLinksFound text="You Haven't Created Any Links Yet"/>
)}
</div>
</MainLayout>

17
pages/links/pinned.tsx
View File

@ -1,18 +1,12 @@
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 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() {
@ -42,14 +36,13 @@ export default function PinnedLinks() {
title={"Pinned Links"}
description={"Pinned Links from your 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 className="mt-2 flex items-center justify-end gap-2">
<SortDropdown sortBy={sortBy} setSort={setSortBy}/>
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode}/>
</div>
{links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
<LinkComponent links={links} />
<LinkComponent links={links}/>
) : (
<div
style={{ flex: "1 1 auto" }}

20
pages/search.tsx
View File

@ -1,18 +1,16 @@
import FilterSearchDropdown from "@/components/FilterSearchDropdown";
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, 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 React, { 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";
import PageHeader from "@/components/PageHeader";
export default function Search() {
const { links } = useLinkStore();
@ -56,19 +54,9 @@ export default function Search() {
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">
<div className="flex items-center gap-2">
<FontAwesomeIcon
icon={faSearch}
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
</p>
</div>
</div>
<PageHeader icon={'bi-search'} title={'Search Results'}/>
<div className="flex gap-3 items-center justify-end">
<div className="flex gap-2 items-center mt-2">
<FilterSearchDropdown
searchFilter={searchFilter}

24
pages/settings/account.tsx
View File

@ -1,10 +1,4 @@
import { useState, useEffect } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faClose,
faFileExport,
faFileImport,
} from "@fortawesome/free-solid-svg-icons";
import useAccountStore from "@/store/account";
import { AccountSettings } from "@/types/global";
import { toast } from "react-hot-toast";
@ -215,7 +209,9 @@ export default function Account() {
}
className="absolute top-1 left-1 btn btn-xs btn-circle btn-neutral btn-outline bg-base-100"
>
<FontAwesomeIcon icon={faClose} className="w-3 h-3" />
<i
className="bi-x"
></i>
</div>
)}
<div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
@ -254,10 +250,9 @@ export default function Account() {
className="flex gap-2 text-sm btn btn-outline btn-neutral group"
id="import-dropdown"
>
<FontAwesomeIcon
icon={faFileImport}
className="w-5 h-5 duration-100"
/>
<i
className="bi-cloud-upload text-xl duration-100"
></i>
<p>Import From</p>
</div>
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
@ -309,10 +304,9 @@ export default function Account() {
<p className="mb-2">Download your data instantly.</p>
<Link className="w-fit" href="/api/v1/migration">
<div className="flex w-fit gap-2 text-sm btn btn-outline btn-neutral group">
<FontAwesomeIcon
icon={faFileExport}
className="w-5 h-5 duration-100"
/>
<i
className="bi-cloud-download text-xl duration-100"
></i>
<p>Export Data</p>
</div>
</Link>

21
pages/settings/appearance.tsx
View File

@ -1,14 +1,9 @@
import SettingsLayout from "@/layouts/SettingsLayout";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
import { useState, useEffect } from "react";
import useAccountStore from "@/store/account";
import { AccountSettings } from "@/types/global";
import { toast } from "react-hot-toast";
import SubmitButton from "@/components/SubmitButton";
import React from "react";
import Checkbox from "@/components/Checkbox";
import LinkPreview from "@/components/LinkPreview";
import useLocalSettingsStore from "@/store/localSettings";
export default function Appearance() {
@ -72,28 +67,32 @@ export default function Appearance() {
<p className="mb-3">Select Theme</p>
<div className="flex gap-3 w-full">
<div
className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-28 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
localStorage.getItem("theme") === "dark"
? "dark:outline-primary text-primary"
: "text-white"
}`}
onClick={() => updateSettings({ theme: "dark" })}
>
<FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
<p className="text-2xl">Dark Theme</p>
<i
className="bi-moon text-6xl"
></i>
<p className="ml-2 text-2xl">Dark</p>
{/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
</div>
<div
className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-28 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
localStorage.getItem("theme") === "light"
? "outline-primary text-primary"
: "text-black"
}`}
onClick={() => updateSettings({ theme: "light" })}
>
<FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
<p className="text-2xl">Light Theme</p>
<i
className="bi-sun text-6xl"
></i>
<p className="ml-2 text-2xl">Light</p>
{/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
</div>
</div>

11
pages/settings/delete.tsx
View File

@ -1,11 +1,9 @@
import { useState } from "react";
import React, { useState } from "react";
import { toast } from "react-hot-toast";
import TextInput from "@/components/TextInput";
import CenteredForm from "@/layouts/CenteredForm";
import { signOut, useSession } from "next-auth/react";
import Link from "next/link";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
export default function Delete() {
const [password, setPassword] = useState("");
@ -59,10 +57,9 @@ export default function Delete() {
href="/settings/account"
className="absolute top-4 left-4 btn btn-ghost btn-square btn-sm"
>
<FontAwesomeIcon
icon={faChevronLeft}
className="w-5 h-5 text-neutral"
/>
<i
className="bi-chevron-left text-neutral text-xl"
></i>
</Link>
<div className="flex items-center gap-2 w-full rounded-md h-8">
<p className="text-red-500 dark:text-red-500 truncate w-full text-3xl text-center">

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

@ -1,12 +1,4 @@
import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
import useLinkStore from "@/store/links";
import {
faCheck,
faEllipsis,
faHashtag,
faXmark,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useRouter } from "next/router";
import { FormEvent, useEffect, useState } from "react";
import MainLayout from "@/layouts/MainLayout";
@ -116,11 +108,9 @@ export default function Index() {
<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">
<div className="flex gap-2 items-end font-thin">
<FontAwesomeIcon
icon={faHashtag}
className="sm:w-8 sm:h-8 w-8 h-8 mt-2 text-primary"
/>
<div className="flex gap-2 items-center font-thin">
<i className={'bi-hash text-primary text-3xl'}/>
{renameTag ? (
<>
<form onSubmit={submit} className="flex items-center gap-2">
@ -136,22 +126,14 @@ export default function Index() {
id="expand-dropdown"
className="btn btn-ghost btn-square btn-sm"
>
<FontAwesomeIcon
icon={faCheck}
id="expand-dropdown"
className="w-5 h-5 text-neutral"
/>
<i className={"bi-check text-neutral text-2xl"}></i>
</div>
<div
onClick={() => cancelUpdateTag()}
id="expand-dropdown"
className="btn btn-ghost btn-square btn-sm"
>
<FontAwesomeIcon
icon={faXmark}
id="expand-dropdown"
className="w-5 h-5 text-neutral"
/>
<i className={"bi-x text-neutral text-2xl"}></i>
</div>
</form>
</>
@ -173,11 +155,7 @@ export default function Index() {
role="button"
className="btn btn-ghost btn-sm btn-square text-neutral"
>
<FontAwesomeIcon
icon={faEllipsis}
title="More"
className="w-5 h-5"
/>
<i className={"bi-three-dots text-neutral text-2xl"}></i>
</div>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-36 mt-1">
<li>

45
yarn.lock
View File

@ -781,51 +781,6 @@
dependencies:
"@floating-ui/core" "^1.2.1"
"@fortawesome/fontawesome-common-types@6.4.0":
version "6.4.0"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b"
integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==
"@fortawesome/fontawesome-common-types@6.4.2":
version "6.4.2"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz#1766039cad33f8ad87f9467b98e0d18fbc8f01c5"
integrity sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==
"@fortawesome/fontawesome-svg-core@^6.4.0":
version "6.4.0"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz#3727552eff9179506e9203d72feb5b1063c11a21"
integrity sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==
dependencies:
"@fortawesome/fontawesome-common-types" "6.4.0"
"@fortawesome/free-brands-svg-icons@^6.4.2":
version "6.4.2"
resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz#9b8e78066ea6dd563da5dfa686615791d0f7cc71"
integrity sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==
dependencies:
"@fortawesome/fontawesome-common-types" "6.4.2"
"@fortawesome/free-regular-svg-icons@^6.4.0":
version "6.4.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz#cacc53bd8d832d46feead412d9ea9ce80a55e13a"
integrity sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==
dependencies:
"@fortawesome/fontawesome-common-types" "6.4.0"
"@fortawesome/free-solid-svg-icons@^6.4.0":
version "6.4.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz#48c0e790847fa56299e2f26b82b39663b8ad7119"
integrity sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==
dependencies:
"@fortawesome/fontawesome-common-types" "6.4.0"
"@fortawesome/react-fontawesome@^0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
dependencies:
prop-types "^15.8.1"
"@headlessui/react@^1.7.15":
version "1.7.15"
resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.15.tgz#53ef6ae132af81b8f188414767b6e79ebf8dc73f"