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

Merge pull request #358 from linkwarden:feat/customizable-view 

Feat/customizable-view
This commit is contained in:
Daniel 2023-12-21 19:25:41 +03:30 committed by GitHub
parent cb5e6de8b8 e9b47a69c5
commit 385bdc2343
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 147 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/LinkViews/Layouts/CardView.tsx
View File

@ -1,7 +1,7 @@
import LinkCard from "@/components/LinkViews/LinkCard"; import LinkCard from "@/components/LinkViews/LinkCard";
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
export default function DefaultGridView({ export default function CardView({
links, links,
}: { }: {
links: LinkIncludingShortenedCollectionAndTags[]; links: LinkIncludingShortenedCollectionAndTags[];

10
components/LinkViews/Layouts/GridView.tsx
View File

@ -1,19 +1,15 @@
import LinkGrid from "@/components/LinkViews/LinkGrid"; import LinkGrid from "@/components/LinkViews/LinkGrid";
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
export default function CompactGridView({ export default function GridView({
links, links,
}: { }: {
links: LinkIncludingShortenedCollectionAndTags[]; links: LinkIncludingShortenedCollectionAndTags[];
}) { }) {
return ( return (
<div className="columns-1 xl:columns-2 2xl:columns-3 gap-5"> <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
{links.map((e, i) => { {links.map((e, i) => {
return ( return <LinkGrid link={e} count={i} key={i} />;
<div key={i} className="break-inside-avoid mb-5">
<LinkGrid link={e} count={i} />
</div>
);
})} })}
</div> </div>
); );

92
components/LinkViews/LinkCard.tsx
View File

@ -2,15 +2,15 @@ import {
CollectionIncludingMembersAndLinkCount, CollectionIncludingMembersAndLinkCount,
LinkIncludingShortenedCollectionAndTags, LinkIncludingShortenedCollectionAndTags,
} from "@/types/global"; } from "@/types/global";
import React, { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import useLinkStore from "@/store/links"; import useLinkStore from "@/store/links";
import useCollectionStore from "@/store/collections"; import useCollectionStore from "@/store/collections";
import isValidUrl from "@/lib/shared/isValidUrl";
import unescapeString from "@/lib/client/unescapeString"; import unescapeString from "@/lib/client/unescapeString";
import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions"; import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate"; import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection"; import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon"; import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
import Link from "next/link";
type Props = { type Props = {
link: LinkIncludingShortenedCollectionAndTags; link: LinkIncludingShortenedCollectionAndTags;
@ -18,10 +18,18 @@ type Props = {
className?: string; className?: string;
}; };
export default function LinkCard({ link, count, className }: Props) { export default function LinkGrid({ link, count, className }: Props) {
const { collections } = useCollectionStore();
const { links } = useLinkStore(); const { links } = useLinkStore();
const { collections } = useCollectionStore(); let shortendURL;
try {
shortendURL = new URL(link.url || "").host.toLowerCase();
} catch (error) {
console.log(error);
}
const [collection, setCollection] = const [collection, setCollection] =
useState<CollectionIncludingMembersAndLinkCount>( useState<CollectionIncludingMembersAndLinkCount>(
@ -38,53 +46,61 @@ export default function LinkCard({ link, count, className }: Props) {
); );
}, [collections, links]); }, [collections, links]);
let shortendURL;
try {
shortendURL = new URL(link.url || "").host.toLowerCase();
} catch (error) {
console.log(error);
}
const url =
isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
return ( return (
<div <div className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative p-3">
className={`h-fit hover:bg-base-300 hover:border-base-300 border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-200 rounded-2xl relative ${
className || ""
}`}
>
<div <div
onClick={() => link.url && window.open(link.url || "", "_blank")} onClick={() => link.url && window.open(link.url || "", "_blank")}
className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3" className="cursor-pointer"
> >
<div className="absolute bottom-3 right-3"> <LinkIcon link={link} width="w-12 mb-3" />
<LinkIcon link={link}/> <p className="truncate w-full">
</div>
<div className="flex items-baseline gap-1">
<p className="text-sm text-neutral">{count + 1}</p>
<p className="text-lg truncate w-full pr-8">
{unescapeString(link.name || link.description) || link.url} {unescapeString(link.name || link.description) || link.url}
</p> </p>
</div>
<div className="mt-1 flex flex-col text-xs text-neutral">
<div className="flex items-center gap-2">
<LinkCollection link={link} collection={collection} />
&middot;
{link.url ? ( {link.url ? (
<div className="flex items-center gap-1 max-w-full w-fit text-neutral"> <div
<i className="bi-link-45deg"/> onClick={(e) => {
<p className="truncate w-full">{shortendURL}</p> e.preventDefault();
window.open(link.url || "", "_blank");
}}
className="flex items-center hover:opacity-60 cursor-pointer duration-100"
>
<p className="truncate">{shortendURL}</p>
</div> </div>
) : ( ) : (
<div className="badge badge-primary badge-sm my-1">{link.type}</div> <div className="badge badge-primary badge-sm my-1">
{link.type}
</div>
)} )}
</div>
<LinkCollection link={link} collection={collection}/> <LinkDate link={link} />
</div>
<LinkDate link={link}/> {/* <p className="truncate">{unescapeString(link.description)}</p>
{link.tags[0] ? (
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
<div className="flex gap-1 items-center flex-wrap">
{link.tags.map((e, i) => (
<Link
href={"/tags/" + e.id}
key={i}
onClick={(e) => {
e.stopPropagation();
}}
className="btn btn-xs btn-ghost truncate max-w-[19rem]"
>
#{e.name}
</Link>
))}
</div>
</div>
) : undefined} */}
</div> </div>
<LinkActions link={link} collection={collection}/> <LinkActions link={link} collection={collection} />
</div> </div>
); );
} }

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

@ -55,7 +55,7 @@ export default function LinkActions({ link, collection, position }: Props) {
}; };
return ( return (
<div> <>
<div <div
className={`dropdown dropdown-left absolute ${ className={`dropdown dropdown-left absolute ${
position || "top-3 right-3" position || "top-3 right-3"
@ -66,11 +66,7 @@ export default function LinkActions({ link, collection, position }: Props) {
role="button" role="button"
className="btn btn-ghost btn-sm btn-square text-neutral" className="btn btn-ghost btn-sm btn-square text-neutral"
> >
<i <i title="More" className="bi-three-dots text-xl" />
id={"expand-dropdown" + collection.id}
title="More"
className="bi-three-dots text-xl"
/>
</div> </div>
<ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1"> <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
{permissions === true ? ( {permissions === true ? (
@ -154,6 +150,6 @@ export default function LinkActions({ link, collection, position }: Props) {
{/* {expandedLink ? ( {/* {expandedLink ? (
<ExpandedLink onClose={() => setExpandedLink(false)} link={link} /> <ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
) : undefined} */} ) : undefined} */}
</div> </>
); );
} }

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

@ -3,7 +3,10 @@ import Image from "next/image";
import isValidUrl from "@/lib/shared/isValidUrl"; import isValidUrl from "@/lib/shared/isValidUrl";
import React from "react"; import React from "react";
export default function LinkIcon({ link, width }: { export default function LinkIcon({
link,
width,
}: {
link: LinkIncludingShortenedCollectionAndTags; link: LinkIncludingShortenedCollectionAndTags;
width?: string; width?: string;
}) { }) {

20
components/LinkViews/LinkGrid.tsx
View File

@ -47,21 +47,17 @@ export default function LinkGrid({ link, count, className }: Props) {
}, [collections, links]); }, [collections, links]);
return ( return (
<div className="w-full border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"> <div className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative p-3">
<div <div
onClick={() => link.url && window.open(link.url || "", "_blank")} onClick={() => link.url && window.open(link.url || "", "_blank")}
className="flex items-center cursor-pointer p-3" className="cursor-pointer"
> >
<div className="shrink-0"> <LinkIcon link={link} width="w-12 mb-3" />
<LinkIcon link={link} width="w-12" /> <p className="truncate w-full">
</div>
<div className="w-[calc(100%-56px)] ml-2">
<p className="line-clamp-1 mr-8">
{unescapeString(link.name || link.description) || link.url} {unescapeString(link.name || link.description) || link.url}
</p> </p>
<div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral"> <div className="mt-1 flex flex-col text-xs text-neutral">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<LinkCollection link={link} collection={collection} /> <LinkCollection link={link} collection={collection} />
&middot; &middot;
@ -73,7 +69,7 @@ export default function LinkGrid({ link, count, className }: Props) {
}} }}
className="flex items-center hover:opacity-60 cursor-pointer duration-100" className="flex items-center hover:opacity-60 cursor-pointer duration-100"
> >
<p className="truncate w-full">{shortendURL}</p> <p className="truncate">{shortendURL}</p>
</div> </div>
) : ( ) : (
<div className="badge badge-primary badge-sm my-1"> <div className="badge badge-primary badge-sm my-1">
@ -81,10 +77,9 @@ export default function LinkGrid({ link, count, className }: Props) {
</div> </div>
)} )}
</div> </div>
<span className="hidden sm:block">&middot;</span>
<LinkDate link={link} /> <LinkDate link={link} />
</div> </div>
<p>{unescapeString(link.description)}</p> <p className="truncate">{unescapeString(link.description)}</p>
{link.tags[0] ? ( {link.tags[0] ? (
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative"> <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
<div className="flex gap-1 items-center flex-wrap"> <div className="flex gap-1 items-center flex-wrap">
@ -104,7 +99,6 @@ export default function LinkGrid({ link, count, className }: Props) {
</div> </div>
) : undefined} ) : undefined}
</div> </div>
</div>
<LinkActions link={link} collection={collection} /> <LinkActions link={link} collection={collection} />
</div> </div>

44
components/ViewDropdown.tsx
View File

@ -25,48 +25,36 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
return ( return (
<div className="p-1 flex flex-row gap-1 border border-neutral-content rounded-[0.625rem]"> <div className="p-1 flex flex-row gap-1 border border-neutral-content rounded-[0.625rem]">
<button <button
onClick={(e) => onChangeViewMode(e, ViewMode.Default)} onClick={(e) => onChangeViewMode(e, ViewMode.Card)}
className={`p-2 rounded-md ${ className={`btn btn-square btn-sm btn-ghost ${
viewMode == ViewMode.Default ? "bg-primary/20" : "hover:bg-neutral/20" viewMode == ViewMode.Card
? "bg-primary/20 hover:bg-primary/20"
: "hover:bg-neutral/20"
}`} }`}
> >
<svg <i className="bi-grid w-4 h-4 text-neutral"></i>
className="w-4 h-4 text-neutral"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M10.93,14.44v5.45a1.38,1.38,0,0,1-1.37,1.37H4.11a1.38,1.38,0,0,1-1.37-1.37V14.44a1.38,1.38,0,0,1,1.37-1.37H9.56A1.38,1.38,0,0,1,10.93,14.44ZM9.56,2.74H4.11A1.38,1.38,0,0,0,2.74,4.11V9.56a1.38,1.38,0,0,0,1.37,1.37H9.56a1.38,1.38,0,0,0,1.37-1.37V4.11A1.38,1.38,0,0,0,9.56,2.74Zm11.7,17.15V14.44a1.38,1.38,0,0,0-1.37-1.37H14.44a1.38,1.38,0,0,0-1.37,1.37v5.45a1.38,1.38,0,0,0,1.37,1.37h5.45A1.38,1.38,0,0,0,21.26,19.89Zm0-10.33V4.11a1.38,1.38,0,0,0-1.37-1.37H14.44a1.38,1.38,0,0,0-1.37,1.37V9.56a1.38,1.38,0,0,0,1.37,1.37h5.45A1.38,1.38,0,0,0,21.26,9.56Z" />
</svg>
</button> </button>
<button <button
onClick={(e) => onChangeViewMode(e, ViewMode.List)} onClick={(e) => onChangeViewMode(e, ViewMode.List)}
className={`p-2 rounded-md ${ className={`btn btn-square btn-sm btn-ghost ${
viewMode == ViewMode.List ? "bg-primary/20" : "hover:bg-neutral/20" viewMode == ViewMode.List
? "bg-primary/20 hover:bg-primary/20"
: "hover:bg-neutral/20"
}`} }`}
> >
<svg <i className="bi bi-view-stacked w-4 h-4 text-neutral"></i>
className="w-4 h-4 text-neutral"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M5.36,5A1.76,1.76,0,1,1,3.6,3.26,1.76,1.76,0,0,1,5.36,5ZM20.78,3.48H8.6A1.37,1.37,0,0,0,7.22,4.85v.33A1.37,1.37,0,0,0,8.6,6.55H20.78a1.37,1.37,0,0,0,1.37-1.37V4.85A1.37,1.37,0,0,0,20.78,3.48ZM3.6,10.24A1.76,1.76,0,1,0,5.36,12,1.75,1.75,0,0,0,3.6,10.24Zm17.18.22H8.6a1.38,1.38,0,0,0-1.38,1.37v.34A1.38,1.38,0,0,0,8.6,13.54H20.78a1.37,1.37,0,0,0,1.37-1.37v-.34A1.37,1.37,0,0,0,20.78,10.46ZM3.6,17.23A1.76,1.76,0,1,0,5.36,19,1.75,1.75,0,0,0,3.6,17.23Zm17.18.22H8.6a1.37,1.37,0,0,0-1.38,1.37v.33A1.37,1.37,0,0,0,8.6,20.52H20.78a1.37,1.37,0,0,0,1.37-1.37v-.33A1.37,1.37,0,0,0,20.78,17.45Z" />
</svg>
</button> </button>
{/* <button {/* <button
onClick={(e) => onChangeViewMode(e, ViewMode.Grid)} onClick={(e) => onChangeViewMode(e, ViewMode.Grid)}
className={`p-2 rounded-md ${ className={`btn btn-square btn-sm btn-ghost ${
viewMode == ViewMode.Grid ? "bg-primary/20" : "hover:bg-neutral/20" viewMode == ViewMode.Grid
? "bg-primary/20 hover:bg-primary/20"
: "hover:bg-neutral/20"
}`} }`}
> >
<svg <i className="bi-columns-gap w-4 h-4 text-neutral"></i>
className="w-4 h-4 text-neutral"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M14.34,11V13A1.37,1.37,0,0,1,13,14.34H11A1.37,1.37,0,0,1,9.66,13V11A1.37,1.37,0,0,1,11,9.66H13A1.37,1.37,0,0,1,14.34,11ZM13,2.74H11A1.37,1.37,0,0,0,9.66,4.11V6.06A1.37,1.37,0,0,0,11,7.43H13a1.37,1.37,0,0,0,1.37-1.37V4.11A1.37,1.37,0,0,0,13,2.74ZM21.26,13V11a1.37,1.37,0,0,0-1.37-1.37H17.94A1.37,1.37,0,0,0,16.57,11V13a1.37,1.37,0,0,0,1.37,1.37h1.95A1.37,1.37,0,0,0,21.26,13ZM11,21.26H13a1.37,1.37,0,0,0,1.37-1.37V17.94A1.37,1.37,0,0,0,13,16.57H11a1.37,1.37,0,0,0-1.37,1.37v1.95A1.37,1.37,0,0,0,11,21.26ZM2.74,11V13a1.37,1.37,0,0,0,1.37,1.37H6.06A1.37,1.37,0,0,0,7.43,13V11A1.37,1.37,0,0,0,6.06,9.66H4.11A1.37,1.37,0,0,0,2.74,11Zm18.52-5V4.11a1.38,1.38,0,0,0-1.37-1.37H17.94a1.38,1.38,0,0,0-1.37,1.37V6.06a1.38,1.38,0,0,0,1.37,1.37h1.95A1.38,1.38,0,0,0,21.26,6.06ZM2.74,4.11V6.06A1.38,1.38,0,0,0,4.11,7.43H6.06A1.38,1.38,0,0,0,7.43,6.06V4.11A1.38,1.38,0,0,0,6.06,2.74H4.11A1.38,1.38,0,0,0,2.74,4.11ZM21.26,19.89V17.94a1.38,1.38,0,0,0-1.37-1.37H17.94a1.38,1.38,0,0,0-1.37,1.37v1.95a1.38,1.38,0,0,0,1.37,1.37h1.95A1.38,1.38,0,0,0,21.26,19.89ZM2.74,17.94v1.95a1.38,1.38,0,0,0,1.37,1.37H6.06a1.38,1.38,0,0,0,1.37-1.37V17.94a1.38,1.38,0,0,0-1.37-1.37H4.11A1.38,1.38,0,0,0,2.74,17.94Z" />
</svg>
</button> */} </button> */}
</div> </div>
); );

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

@ -1,4 +1,3 @@
import LinkCard from "@/components/LinkViews/LinkCard";
import useCollectionStore from "@/store/collections"; import useCollectionStore from "@/store/collections";
import useLinkStore from "@/store/links"; import useLinkStore from "@/store/links";
import { import {
@ -22,7 +21,7 @@ import EditCollectionSharingModal from "@/components/ModalContent/EditCollection
import DeleteCollectionModal from "@/components/ModalContent/DeleteCollectionModal"; import DeleteCollectionModal from "@/components/ModalContent/DeleteCollectionModal";
import ViewDropdown from "@/components/ViewDropdown"; import ViewDropdown from "@/components/ViewDropdown";
import CardView from "@/components/LinkViews/Layouts/CardView"; import CardView from "@/components/LinkViews/Layouts/CardView";
import GridView from "@/components/LinkViews/Layouts/GridView"; // import GridView from "@/components/LinkViews/Layouts/GridView";
import ListView from "@/components/LinkViews/Layouts/ListView"; import ListView from "@/components/LinkViews/Layouts/ListView";
export default function Index() { export default function Index() {
@ -87,11 +86,11 @@ export default function Index() {
const [deleteCollectionModal, setDeleteCollectionModal] = useState(false); const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
const [viewMode, setViewMode] = useState<string>( const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Default localStorage.getItem("viewMode") || ViewMode.Card
); );
const linkView = { const linkView = {
[ViewMode.Default]: CardView, [ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView, // [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView, [ViewMode.List]: ListView,
}; };

5
pages/links/index.tsx
View File

@ -9,19 +9,20 @@ import { Sort, ViewMode } from "@/types/global";
import ViewDropdown from "@/components/ViewDropdown"; import ViewDropdown from "@/components/ViewDropdown";
import CardView from "@/components/LinkViews/Layouts/CardView"; import CardView from "@/components/LinkViews/Layouts/CardView";
import ListView from "@/components/LinkViews/Layouts/ListView"; import ListView from "@/components/LinkViews/Layouts/ListView";
// import GridView from "@/components/LinkViews/Layouts/GridView";
export default function Links() { export default function Links() {
const { links } = useLinkStore(); const { links } = useLinkStore();
const [viewMode, setViewMode] = useState<string>( const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Default localStorage.getItem("viewMode") || ViewMode.Card
); );
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst); const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
useLinks({ sort: sortBy }); useLinks({ sort: sortBy });
const linkView = { const linkView = {
[ViewMode.Default]: CardView, [ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView, // [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView, [ViewMode.List]: ListView,
}; };

5
pages/links/pinned.tsx
View File

@ -8,19 +8,20 @@ import { Sort, ViewMode } from "@/types/global";
import ViewDropdown from "@/components/ViewDropdown"; import ViewDropdown from "@/components/ViewDropdown";
import CardView from "@/components/LinkViews/Layouts/CardView"; import CardView from "@/components/LinkViews/Layouts/CardView";
import ListView from "@/components/LinkViews/Layouts/ListView"; import ListView from "@/components/LinkViews/Layouts/ListView";
// import GridView from "@/components/LinkViews/Layouts/GridView";
export default function PinnedLinks() { export default function PinnedLinks() {
const { links } = useLinkStore(); const { links } = useLinkStore();
const [viewMode, setViewMode] = useState<string>( const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Default localStorage.getItem("viewMode") || ViewMode.Card
); );
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst); const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
useLinks({ sort: sortBy, pinnedOnly: true }); useLinks({ sort: sortBy, pinnedOnly: true });
const linkView = { const linkView = {
[ViewMode.Default]: CardView, [ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView, // [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView, [ViewMode.List]: ListView,
}; };

6
pages/search.tsx
View File

@ -8,7 +8,7 @@ import { useRouter } from "next/router";
import React, { useState } from "react"; import React, { useState } from "react";
import ViewDropdown from "@/components/ViewDropdown"; import ViewDropdown from "@/components/ViewDropdown";
import CardView from "@/components/LinkViews/Layouts/CardView"; import CardView from "@/components/LinkViews/Layouts/CardView";
import GridView from "@/components/LinkViews/Layouts/GridView"; // import GridView from "@/components/LinkViews/Layouts/GridView";
import ListView from "@/components/LinkViews/Layouts/ListView"; import ListView from "@/components/LinkViews/Layouts/ListView";
import PageHeader from "@/components/PageHeader"; import PageHeader from "@/components/PageHeader";
@ -28,7 +28,7 @@ export default function Search() {
const [filterDropdown, setFilterDropdown] = useState(false); const [filterDropdown, setFilterDropdown] = useState(false);
const [viewMode, setViewMode] = useState<string>( const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Default localStorage.getItem("viewMode") || ViewMode.Card
); );
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst); const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
@ -43,7 +43,7 @@ export default function Search() {
}); });
const linkView = { const linkView = {
[ViewMode.Default]: CardView, [ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView, // [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView, [ViewMode.List]: ListView,
}; };

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

@ -9,7 +9,7 @@ import useLinks from "@/hooks/useLinks";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import ViewDropdown from "@/components/ViewDropdown"; import ViewDropdown from "@/components/ViewDropdown";
import CardView from "@/components/LinkViews/Layouts/CardView"; import CardView from "@/components/LinkViews/Layouts/CardView";
import GridView from "@/components/LinkViews/Layouts/GridView"; // import GridView from "@/components/LinkViews/Layouts/GridView";
import ListView from "@/components/LinkViews/Layouts/ListView"; import ListView from "@/components/LinkViews/Layouts/ListView";
export default function Index() { export default function Index() {
@ -91,11 +91,11 @@ export default function Index() {
}; };
const [viewMode, setViewMode] = useState<string>( const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Default localStorage.getItem("viewMode") || ViewMode.Card
); );
const linkView = { const linkView = {
[ViewMode.Default]: CardView, [ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView, // [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView, [ViewMode.List]: ListView,
}; };

2
types/global.ts
View File

@ -58,7 +58,7 @@ export interface PublicCollectionIncludingLinks extends Collection {
} }
export enum ViewMode { export enum ViewMode {
Default = "default", Card = "card",
Grid = "grid", Grid = "grid",
List = "list", List = "list",
} }