diff --git a/components/LinkViews/LinkComponents/LinkActions.tsx b/components/LinkViews/LinkComponents/LinkActions.tsx index ef4e6c7..9f53a05 100644 --- a/components/LinkViews/LinkComponents/LinkActions.tsx +++ b/components/LinkViews/LinkComponents/LinkActions.tsx @@ -16,9 +16,11 @@ import useAccountStore from "@/store/account"; export default function LinkActions({ link, collection, + position, }: { link: LinkIncludingShortenedCollectionAndTags; collection: CollectionIncludingMembersAndLinkCount; + position?: string; }) { const permissions = usePermissions(link.collection.id as number); @@ -62,7 +64,11 @@ export default function LinkActions({ {permissions === true || permissions?.canUpdate || permissions?.canDelete ? ( -
+
- +
diff --git a/components/LinkViews/LinkComponents/LinkCardGrid.tsx b/components/LinkViews/LinkComponents/LinkCardGrid.tsx index a57ef95..8198884 100644 --- a/components/LinkViews/LinkComponents/LinkCardGrid.tsx +++ b/components/LinkViews/LinkComponents/LinkCardGrid.tsx @@ -53,7 +53,7 @@ export default function LinkCardGrid({ link, count, className }: Props) { className="flex items-center cursor-pointer p-3" >
- +
diff --git a/components/LinkViews/LinkComponents/LinkIcon.tsx b/components/LinkViews/LinkComponents/LinkIcon.tsx index f89979a..f09149c 100644 --- a/components/LinkViews/LinkComponents/LinkIcon.tsx +++ b/components/LinkViews/LinkComponents/LinkIcon.tsx @@ -6,18 +6,18 @@ import isValidUrl from "@/lib/shared/isValidUrl"; export default function LinkIcon({ link, - className, + width, }: { link: LinkIncludingShortenedCollectionAndTags; - className?: string; + width?: string; }) { const url = isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined; const iconClasses: string = "bg-white text-primary shadow rounded-md border-[2px] border-white select-none z-10" + - " " + - className || ""; + " " + + (width || "w-12"); return (
diff --git a/components/LinkViews/LinkComponents/LinkRow.tsx b/components/LinkViews/LinkComponents/LinkRow.tsx index 79ececa..ea01c57 100644 --- a/components/LinkViews/LinkComponents/LinkRow.tsx +++ b/components/LinkViews/LinkComponents/LinkRow.tsx @@ -47,13 +47,13 @@ export default function LinkCardCompact({ link, count, className }: Props) { return ( <> -
+
link.url && window.open(link.url || "", "_blank")} - className="flex items-center cursor-pointer p-3" + className="flex items-center cursor-pointer py-3 sm:px-3" >
- +
@@ -79,7 +79,11 @@ export default function LinkCardCompact({ link, count, className }: Props) {
- +
diff --git a/components/ViewDropdown.tsx b/components/ViewDropdown.tsx index ac547e6..2be399a 100644 --- a/components/ViewDropdown.tsx +++ b/components/ViewDropdown.tsx @@ -23,7 +23,7 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) { }, [viewMode]); return ( -
+
- {/* */} + + + {/* */}
); } diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx index 8e1cf1d..1ac2a9a 100644 --- a/pages/collections/[id].tsx +++ b/pages/collections/[id].tsx @@ -1,7 +1,11 @@ import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard"; import useCollectionStore from "@/store/collections"; import useLinkStore from "@/store/links"; -import { CollectionIncludingMembersAndLinkCount, Sort } from "@/types/global"; +import { + CollectionIncludingMembersAndLinkCount, + Sort, + ViewMode, +} from "@/types/global"; import { faEllipsis, faFolder } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useRouter } from "next/router"; @@ -18,6 +22,10 @@ import getPublicUserData from "@/lib/client/getPublicUserData"; import EditCollectionModal from "@/components/ModalContent/EditCollectionModal"; import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal"; import DeleteCollectionModal from "@/components/ModalContent/DeleteCollectionModal"; +import ViewDropdown from "@/components/ViewDropdown"; +import DefaultView from "@/components/LinkViews/DefaultView"; +import GridView from "@/components/LinkViews/GridView"; +import ListView from "@/components/LinkViews/ListView"; export default function Index() { const { settings } = useLocalSettingsStore(); @@ -76,6 +84,19 @@ export default function Index() { useState(false); const [deleteCollectionModal, setDeleteCollectionModal] = useState(false); + const [viewMode, setViewMode] = useState( + localStorage.getItem("viewMode") || ViewMode.Default + ); + + const linkView = { + [ViewMode.Default]: DefaultView, + // [ViewMode.Grid]: GridView, + [ViewMode.List]: ListView, + }; + + // @ts-ignore + const LinkComponent = linkView[viewMode]; + return (
-
- {activeCollection && ( -
-
- -

- {activeCollection?.name} -

-
+ {activeCollection && ( +
+
+ +

+ {activeCollection?.name} +

- )} -
+ +
+
+ +
+
    + {permissions === true ? ( +
  • +
    { + (document?.activeElement as HTMLElement)?.blur(); + setEditCollectionModal(true); + }} + > + Edit Collection Info +
    +
    • + ) : undefined} +
  • +
    { + (document?.activeElement as HTMLElement)?.blur(); + setEditCollectionSharingModal(true); + }} + > + {permissions === true + ? "Share and Collaborate" + : "View Team"} +
    +
    • +
  • +
    { + (document?.activeElement as HTMLElement)?.blur(); + setDeleteCollectionModal(true); + }} + > + {permissions === true + ? "Delete Collection" + : "Leave Collection"} +
    +
    • +
+
+
+ )} {activeCollection ? (
@@ -158,76 +235,16 @@ export default function Index() {

Showing {activeCollection?._count?.links} results

-
-
-
- -
-
    - {permissions === true ? ( -
  • -
    { - (document?.activeElement as HTMLElement)?.blur(); - setEditCollectionModal(true); - }} - > - Edit Collection Info -
    -
    • - ) : undefined} -
  • -
    { - (document?.activeElement as HTMLElement)?.blur(); - setEditCollectionSharingModal(true); - }} - > - {permissions === true - ? "Share and Collaborate" - : "View Team"} -
    -
    • -
  • -
    { - (document?.activeElement as HTMLElement)?.blur(); - setDeleteCollectionModal(true); - }} - > - {permissions === true - ? "Delete Collection" - : "Leave Collection"} -
    -
    • -
-
-
+
{links.some((e) => e.collectionId === Number(router.query.id)) ? ( -
- {links - .filter((e) => e.collection.id === activeCollection?.id) - .map((e, i) => { - return ; - })} -
+ e.collection.id === activeCollection?.id + )} + /> ) : ( )} diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx index 477d92d..a51e8f2 100644 --- a/pages/collections/index.tsx +++ b/pages/collections/index.tsx @@ -34,14 +34,14 @@ export default function Collections() {

Your Collections

-

Collections you own

+

Collections you own

@@ -75,14 +75,16 @@ export default function Collections() {

Other Collections

-

Shared collections you're a member of

+

+ Shared collections you're a member of +

diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 5788b73..62e4d5b 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -108,12 +108,12 @@ export default function Dashboard() {

Dashboard

-

A brief overview of your data

+

A brief overview of your data

diff --git a/pages/links/index.tsx b/pages/links/index.tsx index 6eddd6e..29bf548 100644 --- a/pages/links/index.tsx +++ b/pages/links/index.tsx @@ -23,14 +23,14 @@ export default function Links() { useLinks({ sort: sortBy }); - const components = { + const linkView = { [ViewMode.Default]: DefaultView, // [ViewMode.Grid]: GridView, [ViewMode.List]: ListView, }; // @ts-ignore - const Component = components[viewMode]; + const LinkComponent = linkView[viewMode]; return ( @@ -39,22 +39,22 @@ export default function Links() {

All Links

-

Links from every Collections

+

Links from every Collections

-
+
{links[0] ? ( - + ) : ( )} diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx index d6ba326..b7db42d 100644 --- a/pages/links/pinned.tsx +++ b/pages/links/pinned.tsx @@ -3,18 +3,34 @@ import SortDropdown from "@/components/SortDropdown"; import useLinks from "@/hooks/useLinks"; import MainLayout from "@/layouts/MainLayout"; import useLinkStore from "@/store/links"; -import { Sort } from "@/types/global"; +import { Sort, ViewMode } from "@/types/global"; import { faThumbTack } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useState } from "react"; +import ViewDropdown from "@/components/ViewDropdown"; +import DefaultView from "@/components/LinkViews/DefaultView"; +import GridView from "@/components/LinkViews/GridView"; +import ListView from "@/components/LinkViews/ListView"; export default function PinnedLinks() { const { links } = useLinkStore(); + const [viewMode, setViewMode] = useState( + localStorage.getItem("viewMode") || ViewMode.Default + ); const [sortBy, setSortBy] = useState(Sort.DateNewestFirst); useLinks({ sort: sortBy, pinnedOnly: true }); + const linkView = { + [ViewMode.Default]: DefaultView, + // [ViewMode.Grid]: GridView, + [ViewMode.List]: ListView, + }; + + // @ts-ignore + const LinkComponent = linkView[viewMode]; + return (
@@ -22,25 +38,24 @@ export default function PinnedLinks() {

Pinned Links

-

Pinned Links from your Collections

+

+ Pinned Links from your Collections +

-
+
+
{links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? ( -
- {links.map((e, i) => { - return ; - })} -
+ ) : (
( + localStorage.getItem("viewMode") || ViewMode.Default + ); const [sortBy, setSortBy] = useState(Sort.DateNewestFirst); useLinks({ @@ -36,15 +44,24 @@ export default function Search() { searchByTags: searchFilter.tags, }); + const linkView = { + [ViewMode.Default]: DefaultView, + // [ViewMode.Grid]: GridView, + [ViewMode.List]: ListView, + }; + + // @ts-ignore + const LinkComponent = linkView[viewMode]; + return (
-
-
+
+

Search Results @@ -52,25 +69,17 @@ export default function Search() {

-
-
- -
- -
- -
+
+ + +
{links[0] ? ( -
- {links.map((e, i) => { - return ; - })} -
+ ) : (

Nothing found.{" "} diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx index 8adfdc4..e1d92da 100644 --- a/pages/tags/[id].tsx +++ b/pages/tags/[id].tsx @@ -12,10 +12,13 @@ import { FormEvent, useEffect, useState } from "react"; import MainLayout from "@/layouts/MainLayout"; import useTagStore from "@/store/tags"; import SortDropdown from "@/components/SortDropdown"; -import { Sort, TagIncludingLinkCount } from "@/types/global"; +import { Sort, TagIncludingLinkCount, ViewMode } from "@/types/global"; import useLinks from "@/hooks/useLinks"; -import Dropdown from "@/components/Dropdown"; import { toast } from "react-hot-toast"; +import ViewDropdown from "@/components/ViewDropdown"; +import DefaultView from "@/components/LinkViews/DefaultView"; +import GridView from "@/components/LinkViews/GridView"; +import ListView from "@/components/LinkViews/ListView"; export default function Index() { const router = useRouter(); @@ -25,8 +28,6 @@ export default function Index() { const [sortBy, setSortBy] = useState(Sort.DateNewestFirst); - const [expandDropdown, setExpandDropdown] = useState(false); - const [renameTag, setRenameTag] = useState(false); const [newTagName, setNewTagName] = useState(); @@ -97,6 +98,19 @@ export default function Index() { setRenameTag(false); }; + const [viewMode, setViewMode] = useState( + localStorage.getItem("viewMode") || ViewMode.Default + ); + + const linkView = { + [ViewMode.Default]: DefaultView, + // [ViewMode.Grid]: GridView, + [ViewMode.List]: ListView, + }; + + // @ts-ignore + const LinkComponent = linkView[viewMode]; + return (

@@ -105,7 +119,7 @@ export default function Index() {
{renameTag ? ( <> @@ -147,7 +161,13 @@ export default function Index() { {activeTag?.name}

-
+
8 + ? "dropdown-end" + : "" + }`} + >
- - {expandDropdown ? ( - { - setRenameTag(true); - setExpandDropdown(false); - }, - }, - { - name: "Remove Tag", - onClick: () => { - remove(); - setExpandDropdown(false); - }, - }, - ]} - onClickOutside={(e: Event) => { - const target = e.target as HTMLInputElement; - if (target.id !== "expand-dropdown") - setExpandDropdown(false); - }} - className="absolute top-8 left-0 w-36 font-normal" - /> - ) : null}
)}
-
+
+
-
- {links - .filter((e) => e.tags.some((e) => e.id === Number(router.query.id))) - .map((e, i) => { - return ; - })} -
+ + e.tags.some((e) => e.id === Number(router.query.id)) + )} + />
);