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

improvements

This commit is contained in:
daniel31x13 2023-12-16 15:06:26 -05:00
parent 1955cca589
commit f5e7e373a8
17 changed files with 167 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/LinkViews/CompactGridView.tsx
View File

@ -1,16 +0,0 @@
import LinkCardCompact from "@/components/LinkViews/LinkComponents/LinkCardCompact";
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
export default function CompactGridView({
links,
}: {
links: LinkIncludingShortenedCollectionAndTags[];
}) {
return (
<div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
{links.map((e, i) => {
return <LinkCardCompact key={i} link={e} count={i} />;
})}
</div>
);
}

2
components/LinkViews/DefaultGridView.tsx → components/LinkViews/DefaultView.tsx
View File

@ -1,4 +1,4 @@
import LinkCard from "@/components/LinkCard"; import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
export default function DefaultGridView({ export default function DefaultGridView({

20
components/LinkViews/GridView.tsx Normal file
View File

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

29
components/LinkCard.tsx → components/LinkViews/LinkComponents/LinkCard.tsx
View File

@ -28,15 +28,15 @@ export default function LinkCard({ link, count, className }: Props) {
const [collection, setCollection] = const [collection, setCollection] =
useState<CollectionIncludingMembersAndLinkCount>( useState<CollectionIncludingMembersAndLinkCount>(
collections.find( collections.find(
(e) => e.id === link.collection.id, (e) => e.id === link.collection.id
) as CollectionIncludingMembersAndLinkCount, ) as CollectionIncludingMembersAndLinkCount
); );
useEffect(() => { useEffect(() => {
setCollection( setCollection(
collections.find( collections.find(
(e) => e.id === link.collection.id, (e) => e.id === link.collection.id
) as CollectionIncludingMembersAndLinkCount, ) as CollectionIncludingMembersAndLinkCount
); );
}, [collections, links]); }, [collections, links]);
@ -84,27 +84,6 @@ export default function LinkCard({ link, count, className }: Props) {
<LinkCollection link={link} collection={collection} /> <LinkCollection link={link} collection={collection} />
<LinkDate link={link} /> <LinkDate link={link} />
{/* {link.tags[0] ? (
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
<div className="flex gap-1 items-center flex-nowrap">
{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 className="absolute w-1/2 top-0 bottom-0 right-0 bg-gradient-to-r from-transparent to-base-200 to-35%"></div>
</div>
) : (
<p className="text-xs mt-2 p-1 font-semibold italic">No Tags</p>
)} */}
</div> </div>
<LinkActions link={link} collection={collection} /> <LinkActions link={link} collection={collection} />

32
components/LinkViews/LinkComponents/LinkCardCompact.tsx → components/LinkViews/LinkComponents/LinkCardGrid.tsx
View File

@ -10,6 +10,7 @@ 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;
@ -17,7 +18,7 @@ type Props = {
className?: string; className?: string;
}; };
export default function LinkCardCompact({ link, count, className }: Props) { export default function LinkCardGrid({ link, count, className }: Props) {
const { collections } = useCollectionStore(); const { collections } = useCollectionStore();
const { links } = useLinkStore(); const { links } = useLinkStore();
@ -33,20 +34,20 @@ export default function LinkCardCompact({ link, count, className }: Props) {
const [collection, setCollection] = const [collection, setCollection] =
useState<CollectionIncludingMembersAndLinkCount>( useState<CollectionIncludingMembersAndLinkCount>(
collections.find( collections.find(
(e) => e.id === link.collection.id, (e) => e.id === link.collection.id
) as CollectionIncludingMembersAndLinkCount, ) as CollectionIncludingMembersAndLinkCount
); );
useEffect(() => { useEffect(() => {
setCollection( setCollection(
collections.find( collections.find(
(e) => e.id === link.collection.id, (e) => e.id === link.collection.id
) as CollectionIncludingMembersAndLinkCount, ) as CollectionIncludingMembersAndLinkCount
); );
}, [collections, links]); }, [collections, links]);
return ( return (
<div className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"> <div className="w-full border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative">
<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="flex items-center cursor-pointer p-3"
@ -83,6 +84,25 @@ export default function LinkCardCompact({ link, count, className }: Props) {
<span className="hidden sm:block">&middot;</span> <span className="hidden sm:block">&middot;</span>
<LinkDate link={link} /> <LinkDate link={link} />
</div> </div>
<p>{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>
</div> </div>

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

@ -18,14 +18,14 @@ export default function LinkCollection({
return ( return (
<div <div
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.stopPropagation();
router.push(`/collections/${link.collection.id}`); router.push(`/collections/${link.collection.id}`);
}} }}
className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100" className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faFolder} icon={faFolder}
className="w-4 h-4" className="w-4 h-4 shadow"
style={{ color: collection?.color }} style={{ color: collection?.color }}
/> />
<p className="truncate capitalize">{collection?.name}</p> <p className="truncate capitalize">{collection?.name}</p>

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

@ -13,7 +13,7 @@ export default function LinkIcon({
isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined; isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
const iconClasses: string = const iconClasses: string =
"w-12 bg-primary/20 text-primary shadow rounded-md p-2 select-none z-10"; "w-12 bg-white text-primary shadow rounded-md p-1 select-none z-10";
return ( return (
<div> <div>

72
components/LinkViews/LinkComponents/LinkRow.tsx
View File

@ -33,60 +33,56 @@ export default function LinkCardCompact({ link, count, className }: Props) {
const [collection, setCollection] = const [collection, setCollection] =
useState<CollectionIncludingMembersAndLinkCount>( useState<CollectionIncludingMembersAndLinkCount>(
collections.find( collections.find(
(e) => e.id === link.collection.id, (e) => e.id === link.collection.id
) as CollectionIncludingMembersAndLinkCount, ) as CollectionIncludingMembersAndLinkCount
); );
useEffect(() => { useEffect(() => {
setCollection( setCollection(
collections.find( collections.find(
(e) => e.id === link.collection.id, (e) => e.id === link.collection.id
) as CollectionIncludingMembersAndLinkCount, ) as CollectionIncludingMembersAndLinkCount
); );
}, [collections, links]); }, [collections, links]);
return ( return (
<div className="border-b last:border-b-0 border-neutral-content relative"> <>
<div <div className="border-neutral-content relative hover:bg-base-200 duration-200 rounded-lg">
onClick={() => link.url && window.open(link.url || "", "_blank")} <div
className="flex items-center cursor-pointer p-3" onClick={() => link.url && window.open(link.url || "", "_blank")}
> className="flex items-center cursor-pointer p-3"
<div className="shrink-0"> >
<LinkIcon link={link} /> <div className="shrink-0">
</div> <LinkIcon link={link} />
</div>
<div className="w-[calc(100%-56px)] ml-2"> <div className="w-[calc(100%-56px)] ml-2">
<p className="line-clamp-1 mr-8"> <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 sm:flex-row sm:items-center gap-2 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;
{link.url ? ( {link.url ? (
<div
onClick={(e) => {
e.preventDefault();
window.open(link.url || "", "_blank");
}}
className="flex items-center hover:opacity-60 cursor-pointer duration-100"
>
<p className="truncate w-full">{shortendURL}</p> <p className="truncate w-full">{shortendURL}</p>
</div> ) : (
) : ( <div className="badge badge-primary badge-sm my-1">
<div className="badge badge-primary badge-sm my-1"> {link.type}
{link.type} </div>
</div> )}
)} </div>
<span className="hidden sm:block">&middot;</span>
<LinkDate link={link} />
</div> </div>
<span className="hidden sm:block">&middot;</span>
<LinkDate link={link} />
</div> </div>
</div> </div>
<LinkActions link={link} collection={collection} />
</div> </div>
<LinkActions link={link} collection={collection} /> <div className="divider my-0 last:hidden h-[1px]"></div>
</div> </>
); );
} }

10
components/LinkViews/ListView.tsx
View File

@ -7,12 +7,10 @@ export default function ListView({
links: LinkIncludingShortenedCollectionAndTags[]; links: LinkIncludingShortenedCollectionAndTags[];
}) { }) {
return ( return (
<div> <div className="flex flex-col">
<div className="flex flex-col border border-neutral-content bg-base-200 rounded-md"> {links.map((e, i) => {
{links.map((e, i) => { return <LinkRow key={i} link={e} count={i} />;
return <LinkRow key={i} link={e} count={i} />; })}
})}
</div>
</div> </div>
); );
} }

122
components/ViewDropdown.tsx
View File

@ -1,71 +1,71 @@
import React, {Dispatch, SetStateAction, useEffect, useState} from "react"; import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
import useLocalSettingsStore from "@/store/localSettings"; import useLocalSettingsStore from "@/store/localSettings";
import {ViewMode} from "@/types/global"; import { ViewMode } from "@/types/global";
type Props = { type Props = {
viewMode: string; viewMode: string;
setViewMode: Dispatch<SetStateAction<string>>; setViewMode: Dispatch<SetStateAction<string>>;
}; };
export default function ViewDropdown({viewMode, setViewMode}: Props) { export default function ViewDropdown({ viewMode, setViewMode }: Props) {
const {updateSettings} = useLocalSettingsStore(); const { updateSettings } = useLocalSettingsStore();
const onChangeViewMode = (e: React.MouseEvent<HTMLButtonElement>, viewMode: ViewMode) => { const onChangeViewMode = (
setViewMode(viewMode); e: React.MouseEvent<HTMLButtonElement>,
} viewMode: ViewMode
) => {
setViewMode(viewMode);
};
useEffect(() => { useEffect(() => {
updateSettings({viewMode: viewMode as ViewMode}); updateSettings({ viewMode: viewMode as ViewMode });
}, [viewMode]); }, [viewMode]);
return ( return (
<div className="p-1 flex flex-row gap-0.5 border border-neutral-content rounded-md"> <div className="p-1 flex flex-row gap-0.5 border border-neutral-content rounded-md">
<button <button
onClick={(e) => onChangeViewMode(e, ViewMode.Default)} onClick={(e) => onChangeViewMode(e, ViewMode.Default)}
className={`p-2 rounded-md ${ className={`p-2 rounded-md ${
viewMode == ViewMode.Default ? "bg-primary/20" : "hover:bg-neutral/20" viewMode == ViewMode.Default ? "bg-primary/20" : "hover:bg-neutral/20"
}`} }`}
> >
<svg <svg
className="w-4 h-4 text-neutral" className="w-4 h-4 text-neutral"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="currentColor" fill="currentColor"
> >
<path <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" />
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>
</svg> </button>
</button> {/* <button
<button onClick={(e) => onChangeViewMode(e, ViewMode.Grid)}
onClick={(e) => onChangeViewMode(e, ViewMode.Compact)} className={`p-2 rounded-md ${
className={`p-2 rounded-md ${ viewMode == ViewMode.Grid ? "bg-primary/20" : "hover:bg-neutral/20"
viewMode == ViewMode.Compact ? "bg-primary/20" : "hover:bg-neutral/20" }`}
}`} >
> <svg
<svg className="w-4 h-4 text-neutral"
className="w-4 h-4 text-neutral" viewBox="0 0 24 24"
viewBox="0 0 24 24" fill="currentColor"
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" />
<path </svg>
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"/> </button> */}
</svg> <button
</button> onClick={(e) => onChangeViewMode(e, ViewMode.List)}
<button className={`p-2 rounded-md ${
onClick={(e) => onChangeViewMode(e, ViewMode.List)} viewMode == ViewMode.List ? "bg-primary/20" : "hover:bg-neutral/20"
className={`p-2 rounded-md ${ }`}
viewMode == ViewMode.List ? "bg-primary/20" : "hover:bg-neutral/20" >
}`} <svg
> className="w-4 h-4 text-neutral"
<svg viewBox="0 0 24 24"
className="w-4 h-4 text-neutral" fill="currentColor"
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>
<path </button>
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"/> </div>
</svg> );
</button>
</div>
);
} }

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

@ -1,4 +1,4 @@
import LinkCard from "@/components/LinkCard"; import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
import useCollectionStore from "@/store/collections"; import useCollectionStore from "@/store/collections";
import useLinkStore from "@/store/links"; import useLinkStore from "@/store/links";
import { CollectionIncludingMembersAndLinkCount, Sort } from "@/types/global"; import { CollectionIncludingMembersAndLinkCount, Sort } from "@/types/global";

2
pages/dashboard.tsx
View File

@ -13,7 +13,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import MainLayout from "@/layouts/MainLayout"; import MainLayout from "@/layouts/MainLayout";
import useLinkStore from "@/store/links"; import useLinkStore from "@/store/links";
import useTagStore from "@/store/tags"; import useTagStore from "@/store/tags";
import LinkCard from "@/components/LinkCard"; import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import useLinks from "@/hooks/useLinks"; import useLinks from "@/hooks/useLinks";
import Link from "next/link"; import Link from "next/link";

14
pages/links/index.tsx
View File

@ -1,4 +1,4 @@
import LinkCard from "@/components/LinkCard"; import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
import NoLinksFound from "@/components/NoLinksFound"; import NoLinksFound from "@/components/NoLinksFound";
import SortDropdown from "@/components/SortDropdown"; import SortDropdown from "@/components/SortDropdown";
import useLinks from "@/hooks/useLinks"; import useLinks from "@/hooks/useLinks";
@ -9,21 +9,23 @@ import { faLink } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react"; import { useState } from "react";
import ViewDropdown from "@/components/ViewDropdown"; import ViewDropdown from "@/components/ViewDropdown";
import DefaultGridView from "@/components/LinkViews/DefaultGridView"; import DefaultView from "@/components/LinkViews/DefaultView";
import CompactGridView from "@/components/LinkViews/CompactGridView"; import GridView from "@/components/LinkViews/GridView";
import ListView from "@/components/LinkViews/ListView"; import ListView from "@/components/LinkViews/ListView";
export default function Links() { export default function Links() {
const { links } = useLinkStore(); const { links } = useLinkStore();
const [viewMode, setViewMode] = useState<string>(localStorage.getItem('viewMode') || ViewMode.Default); const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Default
);
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst); const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
useLinks({ sort: sortBy }); useLinks({ sort: sortBy });
const components = { const components = {
[ViewMode.Default]: DefaultGridView, [ViewMode.Default]: DefaultView,
[ViewMode.Compact]: CompactGridView, // [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView, [ViewMode.List]: ListView,
}; };

2
pages/links/pinned.tsx
View File

@ -1,4 +1,4 @@
import LinkCard from "@/components/LinkCard"; import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
import SortDropdown from "@/components/SortDropdown"; import SortDropdown from "@/components/SortDropdown";
import useLinks from "@/hooks/useLinks"; import useLinks from "@/hooks/useLinks";
import MainLayout from "@/layouts/MainLayout"; import MainLayout from "@/layouts/MainLayout";

2
pages/search.tsx
View File

@ -1,5 +1,5 @@
import FilterSearchDropdown from "@/components/FilterSearchDropdown"; import FilterSearchDropdown from "@/components/FilterSearchDropdown";
import LinkCard from "@/components/LinkCard"; import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
import SortDropdown from "@/components/SortDropdown"; import SortDropdown from "@/components/SortDropdown";
import useLinks from "@/hooks/useLinks"; import useLinks from "@/hooks/useLinks";
import MainLayout from "@/layouts/MainLayout"; import MainLayout from "@/layouts/MainLayout";

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

@ -1,4 +1,4 @@
import LinkCard from "@/components/LinkCard"; import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
import useLinkStore from "@/store/links"; import useLinkStore from "@/store/links";
import { import {
faCheck, faCheck,

2
types/global.ts
View File

@ -59,7 +59,7 @@ export interface PublicCollectionIncludingLinks extends Collection {
export enum ViewMode { export enum ViewMode {
Default = "default", Default = "default",
Compact = "compact", Grid = "grid",
List = "list", List = "list",
} }