From ae87b5698e18f93f67fd290e81222ffa3599d045 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sat, 16 Dec 2023 22:08:52 +0800 Subject: [PATCH 01/30] add bootstrap-icons package --- package.json | 1 + pages/_app.tsx | 1 + yarn.lock | 5 +++++ 3 files changed, 7 insertions(+) diff --git a/package.json b/package.json index 211f90e..10cb9b3 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@types/react-dom": "18.2.7", "axios": "^1.5.1", "bcrypt": "^5.1.0", + "bootstrap-icons": "^1.11.2", "colorthief": "^2.4.0", "crypto-js": "^4.2.0", "csstype": "^3.1.2", diff --git a/pages/_app.tsx b/pages/_app.tsx index eea08e4..17bc258 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,5 +1,6 @@ import React from "react"; import "@/styles/globals.css"; +import 'bootstrap-icons/font/bootstrap-icons.css'; import { SessionProvider } from "next-auth/react"; import type { AppProps } from "next/app"; import Head from "next/head"; diff --git a/yarn.lock b/yarn.lock index 03b95c3..705ecd0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1979,6 +1979,11 @@ bl@^4.0.3: inherits "^2.0.4" readable-stream "^3.4.0" +bootstrap-icons@^1.11.2: + version "1.11.2" + resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.11.2.tgz#e1c75daec154e25958db04c4eb3cbda6041e7118" + integrity sha512-TgdiPv+IM9tgDb+dsxrnGIyocsk85d2M7T0qIgkvPedZeoZfyeG/j+yiAE4uHCEayKef2RP05ahQ0/e9Sv75Wg== + bowser@^2.11.0: version "2.11.0" resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f" From d52afd66f33feea4c7bac1f09b4484a5e2f30505 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sat, 16 Dec 2023 22:16:25 +0800 Subject: [PATCH 02/30] update sidebar icons --- components/Sidebar.tsx | 82 ++++++++++++++---------------------------- 1 file changed, 27 insertions(+), 55 deletions(-) diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index 6f5693d..abb2077 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -1,14 +1,4 @@ import useCollectionStore from "@/store/collections"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faFolder, - faHashtag, - faChartSimple, - faChevronDown, - faLink, - faGlobe, - faThumbTack, -} from "@fortawesome/free-solid-svg-icons"; import useTagStore from "@/store/tags"; import Link from "next/link"; import { useRouter } from "next/router"; @@ -25,7 +15,7 @@ export default function Sidebar({ className }: { className?: string }) { () => { const storedValue = localStorage.getItem("collectionDisclosure"); return storedValue ? storedValue === "true" : true; - } + }, ); const { collections } = useCollectionStore(); @@ -42,7 +32,7 @@ export default function Sidebar({ className }: { className?: string }) { useEffect(() => { localStorage.setItem( "collectionDisclosure", - collectionDisclosure ? "true" : "false" + collectionDisclosure ? "true" : "false", ); }, [collectionDisclosure]); @@ -52,21 +42,19 @@ export default function Sidebar({ className }: { className?: string }) { return ( @@ -123,16 +102,14 @@ export default function Sidebar({ className }: { className?: string }) { onClick={() => { setCollectionDisclosure(!collectionDisclosure); }} - className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-neutral mt-5" + className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5" > -

Collections

- - Collections

+ + > - + >

{e.name}

{e.isPublic ? ( - + > ) : undefined}
{e._count?.links} @@ -194,13 +169,14 @@ export default function Sidebar({ className }: { className?: string }) { onClick={() => { setTagDisclosure(!tagDisclosure); }} - className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-neutral mt-5" + className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5" > -

Tags

- +

Tags

+ - - +

{e.name}

{e._count?.links} From 9119402dac04ccd72b18437ee9cd97b3b4df44a3 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sat, 16 Dec 2023 22:46:29 +0800 Subject: [PATCH 03/30] update navbar icons --- components/Navbar.tsx | 19 +++++++++---------- components/ProfilePhoto.tsx | 7 +------ components/SearchBar.tsx | 10 ++++------ components/ToggleDarkMode.tsx | 29 +++-------------------------- 4 files changed, 17 insertions(+), 48 deletions(-) diff --git a/components/Navbar.tsx b/components/Navbar.tsx index c346752..5e9d27b 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -1,6 +1,4 @@ -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { signOut } from "next-auth/react"; -import { faPlus, faBars, faCaretDown } from "@fortawesome/free-solid-svg-icons"; import { useEffect, useState } from "react"; import ClickAwayHandler from "@/components/ClickAwayHandler"; import Sidebar from "@/components/Sidebar"; @@ -52,16 +50,16 @@ export default function Navbar() { const [uploadFileModal, setUploadFileModal] = useState(false); return ( -
+
- +
- +
@@ -70,11 +68,12 @@ export default function Navbar() { role="button" className="flex min-w-[3.4rem] items-center group btn btn-accent dark:border-violet-400 text-white btn-sm px-2" > - - + + + + + +
    diff --git a/components/ProfilePhoto.tsx b/components/ProfilePhoto.tsx index b6a8d4c..42a858d 100644 --- a/components/ProfilePhoto.tsx +++ b/components/ProfilePhoto.tsx @@ -1,6 +1,4 @@ import React, { useEffect, useState } from "react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faUser } from "@fortawesome/free-solid-svg-icons"; import Image from "next/image"; type Props = { @@ -39,10 +37,7 @@ export default function ProfilePhoto({ {name ? ( {name.slice(0, 1)} ) : ( - + )}
diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx index 3aed4a4..99d1497 100644 --- a/components/SearchBar.tsx +++ b/components/SearchBar.tsx @@ -1,5 +1,3 @@ -import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useEffect, useState } from "react"; import { useRouter } from "next/router"; import { toast } from "react-hot-toast"; @@ -23,9 +21,9 @@ export default function SearchBar({ placeholder }: Props) {
{ - if (e.target.checked) { - setTheme("dark"); - } else { - setTheme("light"); - } + setTheme(e.target.checked ? "dark" : "light"); }; useEffect(() => { @@ -36,27 +32,8 @@ export default function ToggleDarkMode({ className }: Props) { className="theme-controller" checked={localStorage.getItem("theme") === "light" ? false : true} /> - - {/* sun icon */} - - - - - - {/* moon icon */} - - - + +
); From 04ede17bfd72664f3f32db92b7f0c6d1e9ccb735 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sat, 16 Dec 2023 23:11:35 +0800 Subject: [PATCH 04/30] update homepage icons --- components/DashboardItem.tsx | 27 +++++++------ pages/dashboard.tsx | 73 ++++++++++++------------------------ 2 files changed, 36 insertions(+), 64 deletions(-) diff --git a/components/DashboardItem.tsx b/components/DashboardItem.tsx index 70ffd55..4ad8682 100644 --- a/components/DashboardItem.tsx +++ b/components/DashboardItem.tsx @@ -1,21 +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}

+
+

{name}

+

{value}

); diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 0cd4bde..d12381b 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -1,24 +1,12 @@ -import useCollectionStore from "@/store/collections"; -import { - faChartSimple, - faChevronRight, - faClockRotateLeft, - faFileImport, - faFolder, - faHashtag, - faLink, - faThumbTack, -} from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import MainLayout from "@/layouts/MainLayout"; 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 { useEffect, useState } from "react"; import useLinks from "@/hooks/useLinks"; import Link from "next/link"; import useWindowDimensions from "@/hooks/useWindowDimensions"; -import { faPlus } from "@fortawesome/free-solid-svg-icons"; import React from "react"; import useModalStore from "@/store/modals"; import { toast } from "react-hot-toast"; @@ -44,8 +32,8 @@ export default function Dashboard() { collections.reduce( (accumulator, collection) => accumulator + (collection._count as any).links, - 0 - ) + 0, + ), ); }, [collections]); @@ -106,10 +94,7 @@ export default function Dashboard() {
- +

Dashboard

@@ -122,7 +107,7 @@ export default function Dashboard() {
@@ -130,7 +115,7 @@ export default function Dashboard() {
@@ -138,25 +123,22 @@ export default function Dashboard() {
- -

Recently Added Links

+ +

Recent

View All - +
@@ -164,7 +146,7 @@ export default function Dashboard() { style={{ flex: "0 1 auto" }} className="flex flex-col 2xl:flex-row items-start 2xl:gap-2" > - {links[0] ? ( + {false && links[0] ? (
{ setNewLinkModal(true); }} - className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent dark:border-violet-400 text-white group" + className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-accent text-white" > - - - Create New Link + + + Add New Link
@@ -207,13 +186,10 @@ export default function Dashboard() {
- +

Import From

    @@ -266,18 +242,15 @@ export default function Dashboard() {
    - -

    Pinned Links

    + +

    Pinned

    View All - +
    From d97676128067cea9a33d77a9bbdee81aecb0f855 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sat, 16 Dec 2023 23:15:56 +0800 Subject: [PATCH 05/30] add page header component --- components/PageHeader.tsx | 23 +++++++++++++++++++++++ pages/dashboard.tsx | 10 ++-------- 2 files changed, 25 insertions(+), 8 deletions(-) create mode 100644 components/PageHeader.tsx diff --git a/components/PageHeader.tsx b/components/PageHeader.tsx new file mode 100644 index 0000000..b169feb --- /dev/null +++ b/components/PageHeader.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +export default function PageHeader({ + title, + description, + icon, +}: { + title: string; + description: string; + icon: string; +}) { + return ( +
    + +
    +

    {title}

    +

    {description}

    +
    +
    + ); +} diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index d12381b..0297941 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -13,6 +13,7 @@ import { toast } from "react-hot-toast"; import { MigrationFormat, MigrationRequest } from "@/types/global"; import DashboardItem from "@/components/DashboardItem"; import NewLinkModal from "@/components/ModalContent/NewLinkModal"; +import PageHeader from "@/components/PageHeader"; export default function Dashboard() { const { collections } = useCollectionStore(); @@ -93,14 +94,7 @@ export default function Dashboard() { return (
    -
    - -
    -

    Dashboard

    - -

    A brief overview of your data

    -
    -
    +
    From ef33f2c94819b0d1388d3327c5fd3f921134c361 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sat, 16 Dec 2023 23:33:33 +0800 Subject: [PATCH 06/30] update link, collection header icons --- pages/collections/index.tsx | 42 ++++++++++--------------------------- pages/links/index.tsx | 24 ++++++++------------- pages/links/pinned.tsx | 24 +++++++-------------- 3 files changed, 28 insertions(+), 62 deletions(-) diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx index 477d92d..05891fe 100644 --- a/pages/collections/index.tsx +++ b/pages/collections/index.tsx @@ -1,10 +1,4 @@ import useCollectionStore from "@/store/collections"; -import { - faEllipsis, - faFolder, - faPlus, -} from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import CollectionCard from "@/components/CollectionCard"; import { useState } from "react"; import MainLayout from "@/layouts/MainLayout"; @@ -13,6 +7,7 @@ import SortDropdown from "@/components/SortDropdown"; import { Sort } from "@/types/global"; import useSort from "@/hooks/useSort"; import NewCollectionModal from "@/components/ModalContent/NewCollectionModal"; +import PageHeader from "@/components/PageHeader"; export default function Collections() { const { collections } = useCollectionStore(); @@ -28,24 +23,14 @@ export default function Collections() { return ( -
    -
    -
    -
    - -
    -

    - Your Collections -

    - -

    Collections you own

    -
    -
    -
    +
    + +
    @@ -63,20 +48,15 @@ export default function Collections() { onClick={() => setNewCollectionModal(true)} >

    New Collection

    - +
    {sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] ? ( <>
    - + +

    Other Collections diff --git a/pages/links/index.tsx b/pages/links/index.tsx index 6364e40..dfade81 100644 --- a/pages/links/index.tsx +++ b/pages/links/index.tsx @@ -5,9 +5,8 @@ import useLinks from "@/hooks/useLinks"; import MainLayout from "@/layouts/MainLayout"; import useLinkStore from "@/store/links"; import { Sort } from "@/types/global"; -import { faLink } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { useState } from "react"; +import React, { useState } from "react"; +import PageHeader from "@/components/PageHeader"; export default function Links() { const { links } = useLinkStore(); @@ -19,23 +18,18 @@ export default function Links() { return (

    -
    -
    - -
    -

    All Links

    - -

    Links from every Collections

    -
    -
    + +
    + {links[0] ? (
    {links.map((e, i) => { diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx index ac52af2..a4a70f8 100644 --- a/pages/links/pinned.tsx +++ b/pages/links/pinned.tsx @@ -4,9 +4,8 @@ import useLinks from "@/hooks/useLinks"; import MainLayout from "@/layouts/MainLayout"; import useLinkStore from "@/store/links"; import { Sort } from "@/types/global"; -import { faThumbTack } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { useState } from "react"; +import React, { useState } from "react"; +import PageHeader from "@/components/PageHeader"; export default function PinnedLinks() { const { links } = useLinkStore(); @@ -18,19 +17,12 @@ export default function PinnedLinks() { return (
    -
    -
    - -
    -

    Pinned Links

    - -

    Pinned Links from your Collections

    -
    -
    - + +
    From d906391ae2fee33eeedf28448c69364754913c1c Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sun, 17 Dec 2023 15:35:09 +0800 Subject: [PATCH 07/30] minor fix --- components/SortDropdown.tsx | 2 -- pages/dashboard.tsx | 17 +++++++++-------- pages/links/index.tsx | 19 ++++++------------- pages/links/pinned.tsx | 12 +++--------- 4 files changed, 18 insertions(+), 32 deletions(-) diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx index e125e6b..3f57e9f 100644 --- a/components/SortDropdown.tsx +++ b/components/SortDropdown.tsx @@ -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; diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 352cff9..1c65f33 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -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 (
    - +
    -
    +
    - {false && links[0] ? ( + {links[0] ? (
    {links.slice(0, showLinks).map((e, i) => ( - + ))}
    @@ -186,7 +186,8 @@ export default function Dashboard() {

    Import From

    -
      +
    @@ -281,7 +282,7 @@ export default function Dashboard() {
    {newLinkModal ? ( - setNewLinkModal(false)} /> + setNewLinkModal(false)}/> ) : undefined} ); diff --git a/pages/links/index.tsx b/pages/links/index.tsx index 72e455f..873bb6f 100644 --- a/pages/links/index.tsx +++ b/pages/links/index.tsx @@ -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"} /> -
    -
    - - -
    + +
    + +
    {links[0] ? ( - + ) : ( - + )}
    diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx index 81a7252..4d8cb15 100644 --- a/pages/links/pinned.tsx +++ b/pages/links/pinned.tsx @@ -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() { @@ -44,12 +38,12 @@ export default function PinnedLinks() { />
    - - + +
    {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? ( - + ) : (
    Date: Sun, 17 Dec 2023 16:22:08 +0800 Subject: [PATCH 08/30] update link action icons --- .../LinkViews/LinkComponents/LinkActions.tsx | 24 +-- components/ModalContent/DeleteLinkModal.tsx | 24 +-- components/ModalContent/EditLinkModal.tsx | 20 +-- .../ModalContent/PreservedFormatsModal.tsx | 155 ++---------------- components/PreserverdFormatRow.tsx | 137 ++++++++++++++++ 5 files changed, 164 insertions(+), 196 deletions(-) create mode 100644 components/PreserverdFormatRow.tsx diff --git a/components/LinkViews/LinkComponents/LinkActions.tsx b/components/LinkViews/LinkComponents/LinkActions.tsx index 9f53a05..5bd18c0 100644 --- a/components/LinkViews/LinkComponents/LinkActions.tsx +++ b/components/LinkViews/LinkComponents/LinkActions.tsx @@ -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); @@ -46,7 +42,7 @@ export default function LinkActions({ toast.dismiss(load); response.ok && - toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`); + toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`); }; const deleteLink = async () => { @@ -74,14 +70,10 @@ export default function LinkActions({ role="button" className="btn btn-ghost btn-sm btn-square text-neutral" > - +
    -
      +
        {permissions === true ? (
      • Are you sure you want to delete this Link?

        - - - + Warning: This action is irreversible! @@ -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} > - + Delete
        diff --git a/components/ModalContent/EditLinkModal.tsx b/components/ModalContent/EditLinkModal.tsx index 94e2ce8..bb43efd 100644 --- a/components/ModalContent/EditLinkModal.tsx +++ b/components/ModalContent/EditLinkModal.tsx @@ -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" > - +

        {shortendURL}

        ) : undefined} @@ -122,13 +116,13 @@ export default function EditLinkModal({ onClose, activeLink }: Props) { defaultValue={ link.collection.id ? { - value: link.collection.id, - label: link.collection.name, - } + value: link.collection.id, + label: link.collection.name, + } : { - value: null as unknown as number, - label: "Unorganized", - } + value: null as unknown as number, + label: "Unorganized", + } } /> ) : null} diff --git a/components/ModalContent/PreservedFormatsModal.tsx b/components/ModalContent/PreservedFormatsModal.tsx index 964dab5..73f6cc8 100644 --- a/components/ModalContent/PreservedFormatsModal.tsx +++ b/components/ModalContent/PreservedFormatsModal.tsx @@ -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 (

        Preserved Formats

        @@ -129,112 +91,18 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
        {readabilityAvailable(link) ? ( -
        -
        -
        - -
        - -

        Readable

        -
        - -
        - {/*
        handleDownload(ArchivedFormat.pdf)} - className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md" - > - -
        */} - - - - -
        -
        + ) : undefined} {screenshotAvailable(link) ? ( -
        -
        -
        - -
        - -

        Screenshot

        -
        - -
        -
        handleDownload(ArchivedFormat.png)} - className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md" - > - -
        - - - - -
        -
        + ) : undefined} {pdfAvailable(link) ? ( -
        -
        -
        - -
        - -

        PDF

        -
        - -
        -
        handleDownload(ArchivedFormat.pdf)} - className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md" - > - -
        - - - - -
        -
        + ) : undefined}
        @@ -272,10 +140,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {

        View latest snapshot on archive.org

        - +
        diff --git a/components/PreserverdFormatRow.tsx b/components/PreserverdFormatRow.tsx new file mode 100644 index 0000000..499e448 --- /dev/null +++ b/components/PreserverdFormatRow.tsx @@ -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(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 ( +
        +
        +
        + +
        +

        {name}

        +
        + +
        + {downloadable || false ? ( +
        handleDownload()} + className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md" + > + +
        + ) : undefined} + + + + +
        +
        + ); +} From 500f7a338c3048aaefad17162c5de2094b7d99f8 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sun, 17 Dec 2023 16:30:09 +0800 Subject: [PATCH 09/30] update link component icons --- components/LinkViews/LinkComponents/LinkCard.tsx | 14 ++++++-------- .../LinkViews/LinkComponents/LinkCollection.tsx | 14 +++----------- components/LinkViews/LinkComponents/LinkDate.tsx | 9 +++------ components/LinkViews/LinkComponents/LinkIcon.tsx | 12 ++++-------- 4 files changed, 16 insertions(+), 33 deletions(-) diff --git a/components/LinkViews/LinkComponents/LinkCard.tsx b/components/LinkViews/LinkComponents/LinkCard.tsx index a1787d1..2336124 100644 --- a/components/LinkViews/LinkComponents/LinkCard.tsx +++ b/components/LinkViews/LinkComponents/LinkCard.tsx @@ -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" >
        - +
        @@ -74,19 +72,19 @@ export default function LinkCard({ link, count, className }: Props) { {link.url ? (
        - +

        {shortendURL}

        ) : (
        {link.type}
        )} - + - +
        - +
        ); } diff --git a/components/LinkViews/LinkComponents/LinkCollection.tsx b/components/LinkViews/LinkComponents/LinkCollection.tsx index 16c9bb5..4eafee7 100644 --- a/components/LinkViews/LinkComponents/LinkCollection.tsx +++ b/components/LinkViews/LinkComponents/LinkCollection.tsx @@ -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" > - +

        {collection?.name}

    ); diff --git a/components/LinkViews/LinkComponents/LinkDate.tsx b/components/LinkViews/LinkComponents/LinkDate.tsx index 282ab70..04f1a0d 100644 --- a/components/LinkViews/LinkComponents/LinkDate.tsx +++ b/components/LinkViews/LinkComponents/LinkDate.tsx @@ -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 (
    - +

    {formattedDate}

    ); diff --git a/components/LinkViews/LinkComponents/LinkIcon.tsx b/components/LinkViews/LinkComponents/LinkIcon.tsx index f09149c..4e423bf 100644 --- a/components/LinkViews/LinkComponents/LinkIcon.tsx +++ b/components/LinkViews/LinkComponents/LinkIcon.tsx @@ -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" ? ( - + ) : link.type === "image" ? ( - + ) : undefined}
    ); From cf1306d2c436e3f6de3d1a1cdb3bd6f0f64f09b1 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sun, 17 Dec 2023 16:46:21 +0800 Subject: [PATCH 10/30] update collection action icons --- components/CollectionCard.tsx | 26 +++++++------------ .../ModalContent/DeleteCollectionModal.tsx | 24 ++--------------- .../ModalContent/EditCollectionModal.tsx | 13 +++------- .../EditCollectionSharingModal.tsx | 2 +- 4 files changed, 16 insertions(+), 49 deletions(-) diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx index 97e0b63..f3615e2 100644 --- a/components/CollectionCard.tsx +++ b/components/CollectionCard.tsx @@ -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" > - +
    -
      +
        {permissions === true ? (
      • {collection.isPublic ? ( - + ) : undefined} - + {collection._count && collection._count.links}

        - {" "} + {formattedDate}

        diff --git a/components/ModalContent/DeleteCollectionModal.tsx b/components/ModalContent/DeleteCollectionModal.tsx index 29eb737..5407f68 100644 --- a/components/ModalContent/DeleteCollectionModal.tsx +++ b/components/ModalContent/DeleteCollectionModal.tsx @@ -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({
        - - - + Warning: 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} > - + {permissions === true ? "Delete" : "Leave"} Collection
        diff --git a/components/ModalContent/EditCollectionModal.tsx b/components/ModalContent/EditCollectionModal.tsx index 991f6af..8821f6f 100644 --- a/components/ModalContent/EditCollectionModal.tsx +++ b/components/ModalContent/EditCollectionModal.tsx @@ -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({

        Color

        -
        - -
        +
        diff --git a/components/ModalContent/EditCollectionSharingModal.tsx b/components/ModalContent/EditCollectionSharingModal.tsx index 3b2eade..4bb41d0 100644 --- a/components/ModalContent/EditCollectionSharingModal.tsx +++ b/components/ModalContent/EditCollectionSharingModal.tsx @@ -182,7 +182,7 @@ export default function EditCollectionSharingModal({ } className="btn btn-accent text-white btn-square btn-sm h-10 w-10" > - +
        From 5f095b563177c4d93e876a547cd02a403fe2af46 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sun, 17 Dec 2023 16:47:32 +0800 Subject: [PATCH 11/30] minor fix --- pages/links/pinned.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx index 4d8cb15..48446f9 100644 --- a/pages/links/pinned.tsx +++ b/pages/links/pinned.tsx @@ -36,12 +36,11 @@ export default function PinnedLinks() { title={"Pinned Links"} description={"Pinned Links from your Collections"} /> -
        -
        - - -
        +
        + +
        + {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? ( ) : ( From 4210913277abf14704e8c261517ecd91aa338920 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sun, 17 Dec 2023 16:57:05 +0800 Subject: [PATCH 12/30] update search page icons --- components/FilterSearchDropdown.tsx | 10 +++------- components/PageHeader.tsx | 2 +- components/SortDropdown.tsx | 11 +++-------- pages/search.tsx | 20 ++++---------------- 4 files changed, 11 insertions(+), 32 deletions(-) diff --git a/components/FilterSearchDropdown.tsx b/components/FilterSearchDropdown.tsx index a4cd804..1fa2634 100644 --- a/components/FilterSearchDropdown.tsx +++ b/components/FilterSearchDropdown.tsx @@ -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" > - +
        • diff --git a/components/PageHeader.tsx b/components/PageHeader.tsx index b169feb..e19b59c 100644 --- a/components/PageHeader.tsx +++ b/components/PageHeader.tsx @@ -6,7 +6,7 @@ export default function PageHeader({ icon, }: { title: string; - description: string; + description?: string; icon: string; }) { return ( diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx index 3f57e9f..046331c 100644 --- a/components/SortDropdown.tsx +++ b/components/SortDropdown.tsx @@ -14,14 +14,9 @@ export default function SortDropdown({ sortBy, setSort }: Props) { role="button" className="btn btn-sm btn-square btn-ghost" > - - - +
        • diff --git a/pages/search.tsx b/pages/search.tsx index 51bd539..5511ce0 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -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 (
          -
          -
          -
          - -

          - Search Results -

          -
          -
          + +
          Date: Sun, 17 Dec 2023 17:08:00 +0800 Subject: [PATCH 13/30] update announcement bar icon --- components/AnnouncementBar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/AnnouncementBar.tsx b/components/AnnouncementBar.tsx index e20d3d9..839a438 100644 --- a/components/AnnouncementBar.tsx +++ b/components/AnnouncementBar.tsx @@ -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) {
          From 15c6213840a8314d9d0169b5d110bc843fc9bebe Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sun, 17 Dec 2023 17:08:12 +0800 Subject: [PATCH 14/30] update modal icons --- components/Modal.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/Modal.tsx b/components/Modal.tsx index 2ddf656..035b633 100644 --- a/components/Modal.tsx +++ b/components/Modal.tsx @@ -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) {
          } - 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" > - +
          {children}
          From de13a109c6099e5f566fe080624a0d23c1f64419 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sun, 17 Dec 2023 17:08:20 +0800 Subject: [PATCH 15/30] update readable view icons --- components/ReadableView.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/components/ReadableView.tsx b/components/ReadableView.tsx index 57a7c02..4828b75 100644 --- a/components/ReadableView.tsx +++ b/components/ReadableView.tsx @@ -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" > - + {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" > - + >

          Date: Sun, 17 Dec 2023 17:08:34 +0800 Subject: [PATCH 16/30] update not link found icons --- components/NoLinksFound.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/components/NoLinksFound.tsx b/components/NoLinksFound.tsx index 4364ac7..b4ef8f7 100644 --- a/components/NoLinksFound.tsx +++ b/components/NoLinksFound.tsx @@ -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" > - + Create New Link From dc6c17f8c4c1fb2107346aea09ade7eb4d0afb52 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sun, 17 Dec 2023 17:18:31 +0800 Subject: [PATCH 17/30] update setting sidebar icons --- components/SettingsSidebar.tsx | 77 ++++++++++++++-------------------- 1 file changed, 31 insertions(+), 46 deletions(-) diff --git a/components/SettingsSidebar.tsx b/components/SettingsSidebar.tsx index 76ec12d..1649abf 100644 --- a/components/SettingsSidebar.tsx +++ b/components/SettingsSidebar.tsx @@ -1,15 +1,8 @@ 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 React, { useEffect, useState } from "react"; import { faCircleQuestion, faCreditCard, @@ -48,7 +41,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`} > - +

          Account

          @@ -62,10 +57,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`} > - +

          Appearance

    @@ -79,11 +73,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`} > - - +

    Archive

    @@ -96,8 +88,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`} > - - +

    API Keys

    @@ -110,8 +103,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`} > - - +

    Password

    @@ -125,11 +119,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`} > - - +

    Billing

    @@ -148,10 +140,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
    - +

    Help

    @@ -161,11 +152,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
    - - +

    GitHub

    @@ -174,11 +163,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
    - - +

    Twitter

    @@ -187,11 +174,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
    - - +

    Mastodon

    From d849b37f6c69bb4d31addeb06bb40f6db72187ed Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sun, 17 Dec 2023 17:32:33 +0800 Subject: [PATCH 18/30] update setting pages's icon --- layouts/SettingsLayout.tsx | 12 +++++++----- pages/settings/account.tsx | 24 +++++++++--------------- pages/settings/appearance.tsx | 21 ++++++++++----------- pages/settings/delete.tsx | 11 ++++------- 4 files changed, 30 insertions(+), 38 deletions(-) diff --git a/layouts/SettingsLayout.tsx b/layouts/SettingsLayout.tsx index e576262..f9d5af2 100644 --- a/layouts/SettingsLayout.tsx +++ b/layouts/SettingsLayout.tsx @@ -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" > - +
    - +
    diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx index ee3e315..7e4d53b 100644 --- a/pages/settings/account.tsx +++ b/pages/settings/account.tsx @@ -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" > - +
    )}
    @@ -254,10 +250,9 @@ export default function Account() { className="flex gap-2 text-sm btn btn-outline btn-neutral group" id="import-dropdown" > - +

    Import From

      @@ -309,10 +304,9 @@ export default function Account() {

      Download your data instantly.

      - +

      Export Data

      diff --git a/pages/settings/appearance.tsx b/pages/settings/appearance.tsx index 3ff1eb7..6d17770 100644 --- a/pages/settings/appearance.tsx +++ b/pages/settings/appearance.tsx @@ -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() {

      Select Theme

      updateSettings({ theme: "dark" })} > - -

      Dark Theme

      + +

      Dark

      {/*
      */}
      updateSettings({ theme: "light" })} > - -

      Light Theme

      + +

      Light

      {/*
      */}
      diff --git a/pages/settings/delete.tsx b/pages/settings/delete.tsx index 7ee7473..2b7eec7 100644 --- a/pages/settings/delete.tsx +++ b/pages/settings/delete.tsx @@ -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" > - +

      From fc679d1150cd04491da58997e9171faa76e9fa12 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sun, 17 Dec 2023 17:32:59 +0800 Subject: [PATCH 19/30] update collection page icon --- pages/collections/[id].tsx | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx index 1ac2a9a..69309e5 100644 --- a/pages/collections/[id].tsx +++ b/pages/collections/[id].tsx @@ -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 && (

      -
      - + + > +

      {activeCollection?.name}

      @@ -126,11 +124,10 @@ export default function Index() { role="button" className="btn btn-ghost btn-sm btn-square text-neutral" > - + >
        {permissions === true ? ( From 6632c0507b6a75dae6067f22d3668c9ed884c18e Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Mon, 18 Dec 2023 05:42:25 +0800 Subject: [PATCH 20/30] remove icon from accent submit button as it is not used currently --- components/AccentSubmitButton.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/components/AccentSubmitButton.tsx b/components/AccentSubmitButton.tsx index 37f437f..1d87787 100644 --- a/components/AccentSubmitButton.tsx +++ b/components/AccentSubmitButton.tsx @@ -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 && }

        {label}

        ); From a481903b50b6cd2fcf0cb209a011fb1a013f00a4 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Mon, 18 Dec 2023 05:44:06 +0800 Subject: [PATCH 21/30] update tag page's icons --- pages/tags/[id].tsx | 48 ++++++++++++--------------------------------- 1 file changed, 13 insertions(+), 35 deletions(-) diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx index e1d92da..407a92d 100644 --- a/pages/tags/[id].tsx +++ b/pages/tags/[id].tsx @@ -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() {
        -
        - +
        + + {renameTag ? ( <>
        @@ -136,27 +126,19 @@ export default function Index() { id="expand-dropdown" className="btn btn-ghost btn-square btn-sm" > - +
        cancelUpdateTag()} - id="expand-dropdown" - className="btn btn-ghost btn-square btn-sm" - > - cancelUpdateTag()} id="expand-dropdown" - className="w-5 h-5 text-neutral" - /> + className="btn btn-ghost btn-square btn-sm" + > +
        ) : ( - <> + <>

        {activeTag?.name}

        @@ -169,15 +151,11 @@ export default function Index() { }`} >
        - +
        • From 8c73ce60e9c878fc698e9eb6d765104ff4d194fd Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Mon, 18 Dec 2023 05:59:52 +0800 Subject: [PATCH 22/30] update collection sharing model icons --- components/Checkbox.tsx | 2 -- .../ModalContent/EditCollectionSharingModal.tsx | 17 +++-------------- components/SettingsSidebar.tsx | 10 ---------- 3 files changed, 3 insertions(+), 26 deletions(-) diff --git a/components/Checkbox.tsx b/components/Checkbox.tsx index 5c95bbe..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 = { diff --git a/components/ModalContent/EditCollectionSharingModal.tsx b/components/ModalContent/EditCollectionSharingModal.tsx index 4bb41d0..8a836bc 100644 --- a/components/ModalContent/EditCollectionSharingModal.tsx +++ b/components/ModalContent/EditCollectionSharingModal.tsx @@ -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"; @@ -219,10 +213,6 @@ export default function EditCollectionSharingModal({ {collectionOwner.name}

          - Admin
        @@ -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 && ( - { const updatedMembers = collection.members.filter( diff --git a/components/SettingsSidebar.tsx b/components/SettingsSidebar.tsx index 1649abf..134667a 100644 --- a/components/SettingsSidebar.tsx +++ b/components/SettingsSidebar.tsx @@ -1,17 +1,7 @@ import useCollectionStore from "@/store/collections"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import Link from "next/link"; import { useRouter } from "next/router"; import React, { useEffect, useState } from "react"; -import { - faCircleQuestion, - faCreditCard, -} from "@fortawesome/free-regular-svg-icons"; -import { - faGithub, - faMastodon, - faXTwitter, -} from "@fortawesome/free-brands-svg-icons"; export default function SettingsSidebar({ className }: { className?: string }) { const LINKWARDEN_VERSION = "v2.4.0"; From 1da960a3cf70ab9d0289192866a56afd4f06e91d Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Mon, 18 Dec 2023 06:06:49 +0800 Subject: [PATCH 23/30] update public list icons --- components/PublicPage/PublicLinkCard.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/components/PublicPage/PublicLinkCard.tsx b/components/PublicPage/PublicLinkCard.tsx index b53d5fd..f683061 100644 --- a/components/PublicPage/PublicLinkCard.tsx +++ b/components/PublicPage/PublicLinkCard.tsx @@ -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" >

        Read

        - +
        From e1f036adb22091d7f7dcbf2c87e1a3008c36a62b Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Mon, 18 Dec 2023 06:06:55 +0800 Subject: [PATCH 24/30] minor fix --- components/LinkViews/GridView.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/LinkViews/GridView.tsx b/components/LinkViews/GridView.tsx index 1b55f26..04619c7 100644 --- a/components/LinkViews/GridView.tsx +++ b/components/LinkViews/GridView.tsx @@ -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({
        {links.map((e, i) => { return ( -
        - +
        +
        ); })} From e9acb548bfd6e92bde8b0c1afec7dfe40b9f9b05 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Mon, 18 Dec 2023 06:28:42 +0800 Subject: [PATCH 25/30] remove fontawesome package --- components/LinkPreview.tsx | 110 --------- components/LinkSidebar.tsx | 129 ----------- .../Modal/Collection/CollectionInfo.tsx | 12 +- .../Modal/Collection/DeleteCollection.tsx | 10 +- .../Modal/Collection/TeamManagement.tsx | 22 +- components/Modal/Collection/ViewTeam.tsx | 6 - components/Modal/Link/AddOrEditLink.tsx | 6 +- components/Modal/Link/PreservedFormats.tsx | 28 --- .../ModalContent/NewCollectionModal.tsx | 8 +- components/ModalContent/UploadFileModal.tsx | 4 - components/RadioButton.tsx | 18 +- components/SubmitButton.tsx | 6 - layouts/LinkLayout.tsx | 216 ------------------ package.json | 5 - pages/api/v1/links/[id]/archive/index.ts | 6 +- yarn.lock | 45 ---- 16 files changed, 19 insertions(+), 612 deletions(-) delete mode 100644 components/LinkPreview.tsx delete mode 100644 components/LinkSidebar.tsx delete mode 100644 layouts/LinkLayout.tsx diff --git a/components/LinkPreview.tsx b/components/LinkPreview.tsx deleted file mode 100644 index 891a69f..0000000 --- a/components/LinkPreview.tsx +++ /dev/null @@ -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; - 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 ( - <> -
        -
        - {url && settings?.displayLinkIcons && ( - { - const target = e.target as HTMLElement; - target.style.display = "none"; - }} - /> - )} - -
        -
        -
        -

        {1}

        -

        - {unescapeString(link.name as string)} -

        -
        -
        - -

        Landing Pages ⚡️

        -
        - { - e.stopPropagation(); - }} - className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100" - > - -

        {shortendURL}

        -         -
        - -

        {formattedDate}

        -
        -
        -
        -
        -
        - - ); -} diff --git a/components/LinkSidebar.tsx b/components/LinkSidebar.tsx deleted file mode 100644 index f3136f4..0000000 --- a/components/LinkSidebar.tsx +++ /dev/null @@ -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(); - - 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} -
        -
        - ); -} diff --git a/components/Modal/Collection/CollectionInfo.tsx b/components/Modal/Collection/CollectionInfo.tsx index 635bdd4..be33707 100644 --- a/components/Modal/Collection/CollectionInfo.tsx +++ b/components/Modal/Collection/CollectionInfo.tsx @@ -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({

        Color

        - +
        diff --git a/components/Modal/Collection/DeleteCollection.tsx b/components/Modal/Collection/DeleteCollection.tsx index caadfa4..472b6aa 100644 --- a/components/Modal/Collection/DeleteCollection.tsx +++ b/components/Modal/Collection/DeleteCollection.tsx @@ -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} > - + {permissions === true ? "Delete" : "Leave"} Collection
        diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx index 9736c4e..e04b3c8 100644 --- a/components/Modal/Collection/TeamManagement.tsx +++ b/components/Modal/Collection/TeamManagement.tsx @@ -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" > - +
        @@ -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 && ( - { const updatedMembers = collection.members.filter( @@ -402,10 +393,6 @@ export default function TeamManagement({

        {collectionOwner.name}

        -

        @{collectionOwner.username}

        @@ -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" /> )} diff --git a/components/Modal/Collection/ViewTeam.tsx b/components/Modal/Collection/ViewTeam.tsx index 4896efd..f54f542 100644 --- a/components/Modal/Collection/ViewTeam.tsx +++ b/components/Modal/Collection/ViewTeam.tsx @@ -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) {

        {collectionOwner.name}

        - Admin
        diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx index 23a6986..8b17f31 100644 --- a/components/Modal/Link/AddOrEditLink.tsx +++ b/components/Modal/Link/AddOrEditLink.tsx @@ -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 || ""} > - + {link.url} @@ -264,7 +261,6 @@ export default function AddOrEditLink({ diff --git a/components/Modal/Link/PreservedFormats.tsx b/components/Modal/Link/PreservedFormats.tsx index f7b5345..a77941c 100644 --- a/components/Modal/Link/PreservedFormats.tsx +++ b/components/Modal/Link/PreservedFormats.tsx @@ -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() {
        -

        Screenshot

        @@ -108,10 +101,6 @@ export default function PreservedFormats() { onClick={() => handleDownload(ArchivedFormat.png)} className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md" > -
        -
      @@ -136,7 +121,6 @@ export default function PreservedFormats() {
      -

      PDF

      @@ -147,10 +131,6 @@ export default function PreservedFormats() { onClick={() => handleDownload(ArchivedFormat.pdf)} className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md" > -
      -
      @@ -191,10 +167,6 @@ export default function PreservedFormats() { screenshotAvailable(link) && pdfAvailable(link) ? "sm:mt-3" : "" }`} > -

      View Latest Snapshot on archive.org

      diff --git a/components/ModalContent/NewCollectionModal.tsx b/components/ModalContent/NewCollectionModal.tsx index de0fc98..23b4344 100644 --- a/components/ModalContent/NewCollectionModal.tsx +++ b/components/ModalContent/NewCollectionModal.tsx @@ -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 = { @@ -76,10 +74,6 @@ export default function NewCollectionModal({ onClose }: Props) {
      -
      - - + {/**/} + {/**/} {label} ); diff --git a/components/SubmitButton.tsx b/components/SubmitButton.tsx index 7a50b35..e86fa78 100644 --- a/components/SubmitButton.tsx +++ b/components/SubmitButton.tsx @@ -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 && }

      {label}

      ); diff --git a/layouts/LinkLayout.tsx b/layouts/LinkLayout.tsx deleted file mode 100644 index ddcced1..0000000 --- a/layouts/LinkLayout.tsx +++ /dev/null @@ -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(); - - const [link, setLink] = useState(); - - 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 ( - <> -
      - {/*
      - -
      */} - -
      -
      - {/*
      - -
      */} - - - - - {router.pathname.startsWith("/public") - ? linkCollection?.name || link?.collection?.name - : "Dashboard"} - - - -
      - {link?.collection?.ownerId === userId || - linkCollection?.members.some( - (e) => e.userId === userId && e.canUpdate - ) ? ( -
      setEditLinkModal(true)} - className={`btn btn-ghost btn-square btn-sm`} - > - -
      - ) : undefined} - -
      setPreservedFormatsModal(true)} - title="Preserved Formats" - className={`btn btn-ghost btn-square btn-sm`} - > - -
      - - {link?.collection?.ownerId === userId || - linkCollection?.members.some( - (e) => e.userId === userId && e.canDelete - ) ? ( -
      { - (document?.activeElement as HTMLElement)?.blur(); - e.shiftKey ? deleteLink() : setDeleteLinkModal(true); - }} - title="Delete" - className={`btn btn-ghost btn-square btn-sm`} - > - -
      - ) : undefined} -
      -
      - - {children} - - {sidebar ? ( -
      - -
      - setSidebar(false)} /> -
      -       -
      - ) : null} -
      - {link && editLinkModal ? ( - setEditLinkModal(false)} - activeLink={link} - /> - ) : undefined} - {link && deleteLinkModal ? ( - setDeleteLinkModal(false)} - activeLink={link} - /> - ) : undefined} - {link && preservedFormatsModal ? ( - setPreservedFormatsModal(false)} - activeLink={link} - /> - ) : undefined} -
      - - ); -} diff --git a/package.json b/package.json index 10cb9b3..27bf41a 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pages/api/v1/links/[id]/archive/index.ts b/pages/api/v1/links/[id]/archive/index.ts index fe8aaff..065179f 100644 --- a/pages/api/v1/links/[id]/archive/index.ts +++ b/pages/api/v1/links/[id]/archive/index.ts @@ -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.", }); diff --git a/yarn.lock b/yarn.lock index 705ecd0..745672a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" From 5e0f38c0d57d6befffa7154381e9ee33fdc8d691 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Mon, 18 Dec 2023 07:54:33 +0800 Subject: [PATCH 26/30] update sidebar main link --- components/Sidebar.tsx | 70 +++++++++-------------------- components/SidebarHighlightLink.tsx | 26 +++++++++++ 2 files changed, 48 insertions(+), 48 deletions(-) create mode 100644 components/SidebarHighlightLink.tsx diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index abb2077..cf907bb 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -4,6 +4,7 @@ import Link from "next/link"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { Disclosure, Transition } from "@headlessui/react"; +import SidebarHighlightLink from "@/components/SidebarHighlightLink"; export default function Sidebar({ className }: { className?: string }) { const [tagDisclosure, setTagDisclosure] = useState(() => { @@ -47,54 +48,27 @@ export default function Sidebar({ className }: { className?: string }) { className || "" }`} > -
      - -
      - -

      Dashboard

      -
      - - - -
      - -

      All Links

      -
      - - - -
      - -

      All Collections

      -
      - - - -
      - -

      Pinned Links

      -
      - +
      + + + +
      diff --git a/components/SidebarHighlightLink.tsx b/components/SidebarHighlightLink.tsx new file mode 100644 index 0000000..339a0d0 --- /dev/null +++ b/components/SidebarHighlightLink.tsx @@ -0,0 +1,26 @@ +import Link from "next/link"; + +export default function SidebarHighlightLink({ title, href, icon, active }: { + title: string, + href: string, + icon: string, + active?: boolean +}) { + + return ( + +
      +
      + +
      +
      +

      {title}

      +
      +
      + + ) +} \ No newline at end of file From feda50464cb0848f53548e2d3166fb0c64b4c59b Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Mon, 18 Dec 2023 08:28:52 +0800 Subject: [PATCH 27/30] update missing collection color picker icon --- .../ModalContent/NewCollectionModal.tsx | 30 ++++++++----------- 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/components/ModalContent/NewCollectionModal.tsx b/components/ModalContent/NewCollectionModal.tsx index 23b4344..511769b 100644 --- a/components/ModalContent/NewCollectionModal.tsx +++ b/components/ModalContent/NewCollectionModal.tsx @@ -27,27 +27,22 @@ export default function NewCollectionModal({ onClose }: Props) { const { addCollection } = useCollectionStore(); const submit = async () => { - if (!submitLoader) { - setSubmitLoader(true); - if (!collection) return null; + if (submitLoader) return; + if (!collection) return null; - setSubmitLoader(true); + setSubmitLoader(true); - const load = toast.loading("Creating..."); + const load = toast.loading("Creating..."); - let response; + let response = await addCollection(collection as any); + toast.dismiss(load); - response = await addCollection(collection as any); + if (response.ok) { + toast.success("Created!"); + onClose(); + } else toast.error(response.data as string); - toast.dismiss(load); - - if (response.ok) { - toast.success("Created!"); - onClose(); - } else toast.error(response.data as string); - - setSubmitLoader(false); - } + setSubmitLoader(false); }; return ( @@ -73,8 +68,7 @@ export default function NewCollectionModal({ onClose }: Props) {

      Color

      -
      -
      +
      From fbc083c3737455fa5256e56023fcbfc6ac3eda41 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Mon, 18 Dec 2023 08:30:14 +0800 Subject: [PATCH 28/30] add icon to link create modal more option collapse icon --- components/ModalContent/NewLinkModal.tsx | 87 ++++++++++++------------ 1 file changed, 45 insertions(+), 42 deletions(-) diff --git a/components/ModalContent/NewLinkModal.tsx b/components/ModalContent/NewLinkModal.tsx index 156fe28..2b0ef25 100644 --- a/components/ModalContent/NewLinkModal.tsx +++ b/components/ModalContent/NewLinkModal.tsx @@ -145,53 +145,56 @@ export default function NewLinkModal({ onClose }: Props) {
      - {optionsExpanded ? ( -
      - {/*
      */} -
      -
      -

      Name

      - setLink({ ...link, name: e.target.value })} - placeholder="e.g. Example Link" - className="bg-base-200" - /> -
      - -
      -

      Tags

      - { - return { label: e.name, value: e.id }; - })} - /> -
      - -
      -

      Description

      -