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

choose to show which detail in each views

This commit is contained in:
daniel31x13 2024-08-26 19:56:04 -04:00
parent 9ae9c7c81a
commit 0371695eb3
7 changed files with 158 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/Icon.tsx
View File

@ -5,12 +5,12 @@ type Props = {
icon: string; icon: string;
} & Icons.IconProps; } & Icons.IconProps;
const Icon = forwardRef<SVGSVGElement, Props>(({ icon, ...rest }) => { const Icon = forwardRef<SVGSVGElement, Props>(({ icon, ...rest }, ref) => {
const IconComponent: any = Icons[icon as keyof typeof Icons]; const IconComponent: any = Icons[icon as keyof typeof Icons];
if (!IconComponent) { if (!IconComponent) {
return <></>; return null;
} else return <IconComponent {...rest} />; } else return <IconComponent ref={ref} {...rest} />;
}); });
export default Icon; export default Icon;

2
components/LinkDetails.tsx
View File

@ -192,7 +192,7 @@ export default function LinkDetails({ className, link }: Props) {
<p className="text-sm mb-2 text-neutral">{t("tags")}</p> <p className="text-sm mb-2 text-neutral">{t("tags")}</p>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2 flex-wrap">
{link.tags.map((tag) => {link.tags.map((tag) =>
isPublicRoute ? ( isPublicRoute ? (
<div key={tag.id} className="rounded-lg px-3 py-1 bg-base-200"> <div key={tag.id} className="rounded-lg px-3 py-1 bg-base-200">

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

@ -24,6 +24,7 @@ import { useUser } from "@/hooks/store/user";
import { useGetLink, useLinks } from "@/hooks/store/links"; import { useGetLink, useLinks } from "@/hooks/store/links";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useLocalSettingsStore from "@/store/localSettings"; import useLocalSettingsStore from "@/store/localSettings";
import clsx from "clsx";
type Props = { type Props = {
link: LinkIncludingShortenedCollectionAndTags; link: LinkIncludingShortenedCollectionAndTags;
@ -148,64 +149,70 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
!editMode && window.open(generateLinkHref(link, user), "_blank") !editMode && window.open(generateLinkHref(link, user), "_blank")
} }
> >
<div> {show.image && (
<div className="relative rounded-t-2xl h-40 overflow-hidden">
{previewAvailable(link) ? (
<Image
src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
width={1280}
height={720}
alt=""
className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
style={
link.type !== "image" ? { filter: "blur(1px)" } : undefined
}
draggable="false"
onError={(e) => {
const target = e.target as HTMLElement;
target.style.display = "none";
}}
/>
) : link.preview === "unavailable" ? (
<div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
) : (
<div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
)}
<div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
<LinkIcon link={link} />
</div>
</div>
<hr className="divider my-0 border-t border-neutral-content h-[1px]" />
</div>
<div className="flex flex-col justify-between h-full">
<div className="p-3 flex flex-col gap-2">
<p className="truncate w-full pr-9 text-primary text-sm">
{unescapeString(link.name)}
</p>
<LinkTypeBadge link={link} />
</div>
<div> <div>
<hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" /> <div className="relative rounded-t-2xl h-40 overflow-hidden">
{previewAvailable(link) ? (
<div className="flex justify-between text-xs text-neutral px-3 pb-1 gap-2"> <Image
<div className="cursor-pointer truncate"> src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
{collection && ( width={1280}
<LinkCollection link={link} collection={collection} /> height={720}
)} alt=""
</div> className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
<LinkDate link={link} /> style={show.icon ? { filter: "blur(1px)" } : undefined}
draggable="false"
onError={(e) => {
const target = e.target as HTMLElement;
target.style.display = "none";
}}
/>
) : link.preview === "unavailable" ? (
<div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
) : (
<div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
)}
{show.icon && (
<div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
<LinkIcon link={link} />
</div>
)}
</div> </div>
<hr className="divider my-0 border-t border-neutral-content h-[1px]" />
</div> </div>
)}
<div className="flex flex-col justify-between h-full min-h-24">
<div className="p-3 flex flex-col gap-2">
{show.name && (
<p className="truncate w-full pr-9 text-primary text-sm">
{unescapeString(link.name)}
</p>
)}
{show.link && <LinkTypeBadge link={link} />}
</div>
{(show.collection || show.date) && (
<div>
<hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
<div className="flex justify-between text-xs text-neutral px-3 pb-1 gap-2">
{show.collection && (
<div className="cursor-pointer truncate">
<LinkCollection link={link} collection={collection} />
</div>
)}
{show.date && <LinkDate link={link} />}
</div>
</div>
)}
</div> </div>
</div> </div>
<LinkActions <LinkActions
link={link} link={link}
collection={collection} collection={collection}
position="top-[10.75rem] right-3" position={clsx(show.image ? "top-[10.75rem]" : "top-3", "right-3")}
flipDropdown={flipDropdown} flipDropdown={flipDropdown}
/> />
</div> </div>

35
components/LinkViews/LinkComponents/LinkList.tsx
View File

@ -18,6 +18,7 @@ import { useTranslation } from "next-i18next";
import { useCollections } from "@/hooks/store/collections"; import { useCollections } from "@/hooks/store/collections";
import { useUser } from "@/hooks/store/user"; import { useUser } from "@/hooks/store/user";
import { useLinks } from "@/hooks/store/links"; import { useLinks } from "@/hooks/store/links";
import useLocalSettingsStore from "@/store/localSettings";
type Props = { type Props = {
link: LinkIncludingShortenedCollectionAndTags; link: LinkIncludingShortenedCollectionAndTags;
@ -39,6 +40,10 @@ export default function LinkCardCompact({
const { data: user = {} } = useUser(); const { data: user = {} } = useUser();
const { setSelectedLinks, selectedLinks } = useLinkStore(); const { setSelectedLinks, selectedLinks } = useLinkStore();
const {
settings: { show },
} = useLocalSettingsStore();
const { links } = useLinks(); const { links } = useLinks();
useEffect(() => { useEffect(() => {
@ -105,33 +110,31 @@ export default function LinkCardCompact({
} }
> >
<div <div
className="flex items-center cursor-pointer w-full" className="flex items-center cursor-pointer w-full min-h-12"
onClick={() => onClick={() =>
!editMode && window.open(generateLinkHref(link, user), "_blank") !editMode && window.open(generateLinkHref(link, user), "_blank")
} }
> >
<div className="shrink-0"> {show.icon && (
<LinkIcon link={link} hideBackground /> <div className="shrink-0">
</div> <LinkIcon link={link} hideBackground />
</div>
)}
<div className="w-[calc(100%-56px)] ml-2"> <div className="w-[calc(100%-56px)] ml-2">
<p className="line-clamp-1 mr-8 text-primary select-none"> {show.name && (
{link.name ? ( <p className="line-clamp-1 mr-8 text-primary select-none">
unescapeString(link.name) {unescapeString(link.name)}
) : ( </p>
<div className="mt-2"> )}
<LinkTypeBadge link={link} />
</div>
)}
</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-x-3 text-neutral flex-wrap"> <div className="flex items-center gap-x-3 text-neutral flex-wrap">
{collection && ( {show.link && <LinkTypeBadge link={link} />}
{show.collection && (
<LinkCollection link={link} collection={collection} /> <LinkCollection link={link} collection={collection} />
)} )}
{link.name && <LinkTypeBadge link={link} />} {show.date && <LinkDate link={link} />}
<LinkDate link={link} />
</div> </div>
</div> </div>
</div> </div>

117
components/LinkViews/LinkComponents/LinkMasonry.tsx
View File

@ -22,6 +22,8 @@ import { useTranslation } from "next-i18next";
import { useCollections } from "@/hooks/store/collections"; import { useCollections } from "@/hooks/store/collections";
import { useUser } from "@/hooks/store/user"; import { useUser } from "@/hooks/store/user";
import { useGetLink, useLinks } from "@/hooks/store/links"; import { useGetLink, useLinks } from "@/hooks/store/links";
import useLocalSettingsStore from "@/store/localSettings";
import clsx from "clsx";
type Props = { type Props = {
link: LinkIncludingShortenedCollectionAndTags; link: LinkIncludingShortenedCollectionAndTags;
@ -39,6 +41,10 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
const { setSelectedLinks, selectedLinks } = useLinkStore(); const { setSelectedLinks, selectedLinks } = useLinkStore();
const {
settings: { show },
} = useLocalSettingsStore();
const { links } = useLinks(); const { links } = useLinks();
const getLink = useGetLink(); const getLink = useGetLink();
@ -129,55 +135,64 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
: undefined : undefined
} }
> >
<div <div>
className="rounded-2xl cursor-pointer" {show.image && previewAvailable(link) && (
onClick={() => <div
!editMode && window.open(generateLinkHref(link, user), "_blank") className="rounded-2xl cursor-pointer"
} onClick={() =>
> !editMode && window.open(generateLinkHref(link, user), "_blank")
<div className="relative rounded-t-2xl overflow-hidden"> }
{previewAvailable(link) ? ( >
<Image <div className="relative rounded-t-2xl overflow-hidden">
src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`} {previewAvailable(link) ? (
width={1280} <Image
height={720} src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
alt="" width={1280}
className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105" height={720}
style={ alt=""
link.type !== "image" ? { filter: "blur(1px)" } : undefined className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
} style={show.icon ? { filter: "blur(1px)" } : undefined}
draggable="false" draggable="false"
onError={(e) => { onError={(e) => {
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
target.style.display = "none"; target.style.display = "none";
}} }}
/> />
) : link.preview === "unavailable" ? null : ( ) : link.preview === "unavailable" ? null : (
<div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div> <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
)} )}
<div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md"> {show.icon && (
<LinkIcon link={link} /> <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
</div> <LinkIcon link={link} />
</div> </div>
)}
</div>
{link.preview !== "unavailable" && ( <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
<hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" /> </div>
)} )}
<div className="p-3 flex flex-col gap-2"> <div className="p-3 flex flex-col gap-2 h-full min-h-14">
<p className="hyphens-auto w-full pr-9 text-primary text-sm"> {show.name && (
{unescapeString(link.name)} <p className="hyphens-auto w-full pr-9 text-primary text-sm">
</p> {unescapeString(link.name)}
</p>
)}
<LinkTypeBadge link={link} /> {show.link && <LinkTypeBadge link={link} />}
{link.description && ( {show.description && link.description && (
<p className="hyphens-auto text-sm"> <p
className={clsx(
"hyphens-auto text-sm w-full",
((!show.name && !show.link) || !link.name) && "pr-9"
)}
>
{unescapeString(link.description)} {unescapeString(link.description)}
</p> </p>
)} )}
{link.tags && link.tags[0] && ( {show.tags && link.tags && link.tags[0] && (
<div className="flex gap-1 items-center flex-wrap"> <div className="flex gap-1 items-center flex-wrap">
{link.tags.map((e, i) => ( {link.tags.map((e, i) => (
<Link <Link
@ -195,21 +210,29 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
)} )}
</div> </div>
<hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" /> {(show.collection || show.date) && (
<div>
<hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
<div className="flex flex-wrap justify-between text-xs text-neutral px-3 pb-1 w-full gap-x-2"> <div className="flex flex-wrap justify-between text-xs text-neutral px-3 pb-1 w-full gap-x-2">
{collection && <LinkCollection link={link} collection={collection} />} {show.collection && (
<LinkDate link={link} /> <div className="cursor-pointer truncate">
</div> <LinkCollection link={link} collection={collection} />
</div>
)}
{show.date && <LinkDate link={link} />}
</div>
</div>
)}
</div> </div>
<LinkActions <LinkActions
link={link} link={link}
collection={collection} collection={collection}
position={ position={
link.preview !== "unavailable" previewAvailable(link) && show.image
? "top-[10.75rem] right-3" ? "top-[10.75rem] right-3"
: "top-[.75rem] right-3" : "top-3 right-3"
} }
flipDropdown={flipDropdown} flipDropdown={flipDropdown}
/> />

11
components/ViewDropdown.tsx
View File

@ -89,10 +89,13 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
<p className="my-1 text-sm text-neutral">{t("show")}</p> <p className="my-1 text-sm text-neutral">{t("show")}</p>
{Object.entries(settings.show) {Object.entries(settings.show)
.filter((e) => .filter((e) =>
settings.viewMode === ViewMode.List // Hide tags and image checkbox in list view settings.viewMode === ViewMode.List // Hide tags, image, icon, and description checkboxes in list view
? e[0] !== "tags" && e[0] !== "image" ? e[0] !== "tags" &&
: settings.viewMode === ViewMode.Card // Hide tags checkbox in card view e[0] !== "image" &&
? e[0] !== "tags" e[0] !== "icon" &&
e[0] !== "description"
: settings.viewMode === ViewMode.Card // Hide tags and description checkboxes in card view
? e[0] !== "tags" && e[0] !== "description"
: true : true
) )
.map(([key, value]) => ( .map(([key, value]) => (

4
store/localSettings.ts
View File

@ -6,7 +6,7 @@ type LocalSettings = {
viewMode: string; viewMode: string;
show: { show: {
link: boolean; link: boolean;
title: boolean; name: boolean;
description: boolean; description: boolean;
image: boolean; image: boolean;
tags: boolean; tags: boolean;
@ -29,7 +29,7 @@ const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
viewMode: "", viewMode: "",
show: { show: {
link: true, link: true,
title: true, name: true,
description: true, description: true,
image: true, image: true,
tags: true, tags: true,