Accepted incoming changes
This commit is contained in:
daniel31x13
@@ -27,7 +27,7 @@ const CollectionListing = () => {
|
||||
const updateCollection = useUpdateCollection();
|
||||
const { data: collections = [], isLoading } = useCollections();
|
||||
|
||||
const { data: user = {} } = useUser();
|
||||
const { data: user = {}, refetch } = useUser();
|
||||
const updateUser = useUpdateUser();
|
||||
|
||||
const router = useRouter();
|
||||
@@ -36,10 +36,7 @@ const CollectionListing = () => {
|
||||
const [tree, setTree] = useState<TreeData | undefined>();
|
||||
|
||||
const initialTree = useMemo(() => {
|
||||
if (
|
||||
// !tree &&
|
||||
collections.length > 0
|
||||
) {
|
||||
if (collections.length > 0) {
|
||||
return buildTreeFromCollections(
|
||||
collections,
|
||||
router,
|
||||
@@ -49,12 +46,12 @@ const CollectionListing = () => {
|
||||
}, [collections, user, router]);
|
||||
|
||||
useEffect(() => {
|
||||
// if (!tree)
|
||||
setTree(initialTree);
|
||||
}, [initialTree]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user.username) {
|
||||
refetch();
|
||||
if (
|
||||
(!user.collectionOrder || user.collectionOrder.length === 0) &&
|
||||
collections.length > 0
|
||||
@@ -62,11 +59,7 @@ const CollectionListing = () => {
|
||||
updateUser.mutate({
|
||||
...user,
|
||||
collectionOrder: collections
|
||||
.filter(
|
||||
(e) =>
|
||||
e.parentId === null ||
|
||||
!collections.find((i) => i.id === e.parentId)
|
||||
) // Filter out collections with non-null parentId
|
||||
.filter((e) => e.parentId === null)
|
||||
.map((e) => e.id as number),
|
||||
});
|
||||
else {
|
||||
@@ -100,7 +93,7 @@ const CollectionListing = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [collections]);
|
||||
}, [user, collections]);
|
||||
|
||||
const onExpand = (movedCollectionId: ItemId) => {
|
||||
setTree((currentTree) =>
|
||||
|
||||
@@ -8,13 +8,15 @@ export default function dashboardItem({
|
||||
icon: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<div className="w-[4rem] aspect-square flex justify-center items-center bg-primary/20 rounded-xl select-none">
|
||||
<div className="flex items-center justify-between w-full rounded-2xl border border-neutral-content p-3 bg-gradient-to-tr from-neutral-content/70 to-50% to-base-200">
|
||||
<div className="w-14 aspect-square flex justify-center items-center bg-primary/20 rounded-xl select-none">
|
||||
<i className={`${icon} text-primary text-3xl drop-shadow`}></i>
|
||||
</div>
|
||||
<div className="ml-4 flex flex-col justify-center">
|
||||
<p className="text-neutral text-xs tracking-wider">{name}</p>
|
||||
<p className="font-thin text-5xl text-primary mt-0.5">{value}</p>
|
||||
<p className="text-neutral text-xs tracking-wider text-right">{name}</p>
|
||||
<p className="font-thin text-4xl text-primary mt-0.5 text-right">
|
||||
{value || 0}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
import React, { ReactNode, useEffect } from "react";
|
||||
import { Drawer as D } from "vaul";
|
||||
import clsx from "clsx";
|
||||
|
||||
type Props = {
|
||||
toggleDrawer: Function;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
dismissible?: boolean;
|
||||
};
|
||||
|
||||
export default function Drawer({
|
||||
toggleDrawer,
|
||||
className,
|
||||
children,
|
||||
dismissible = true,
|
||||
}: Props) {
|
||||
const [drawerIsOpen, setDrawerIsOpen] = React.useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (window.innerWidth >= 640) {
|
||||
document.body.style.overflow = "hidden";
|
||||
document.body.style.position = "relative";
|
||||
return () => {
|
||||
document.body.style.overflow = "auto";
|
||||
document.body.style.position = "";
|
||||
};
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (window.innerWidth < 640) {
|
||||
return (
|
||||
<D.Root
|
||||
open={drawerIsOpen}
|
||||
onClose={() => dismissible && setDrawerIsOpen(false)}
|
||||
onAnimationEnd={(isOpen) => !isOpen && toggleDrawer()}
|
||||
dismissible={dismissible}
|
||||
>
|
||||
<D.Portal>
|
||||
<D.Overlay className="fixed inset-0 bg-black/40" />
|
||||
<D.Content className="flex flex-col rounded-t-2xl mt-24 fixed bottom-0 left-0 right-0 z-30 h-[90%] !select-auto focus:outline-none">
|
||||
<div
|
||||
className={clsx(
|
||||
"p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto",
|
||||
className
|
||||
)}
|
||||
data-testid="mobile-modal-container"
|
||||
>
|
||||
<div data-testid="mobile-modal-slider" />
|
||||
{children}
|
||||
</div>
|
||||
</D.Content>
|
||||
</D.Portal>
|
||||
</D.Root>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<D.Root
|
||||
open={drawerIsOpen}
|
||||
onClose={() => dismissible && setDrawerIsOpen(false)}
|
||||
onAnimationEnd={(isOpen) => !isOpen && toggleDrawer()}
|
||||
dismissible={dismissible}
|
||||
direction="right"
|
||||
>
|
||||
<D.Portal>
|
||||
<D.Overlay className="fixed inset-0 bg-black/10 z-20" />
|
||||
<D.Content className="bg-white flex flex-col h-full w-2/5 min-w-[30rem] mt-24 fixed bottom-0 right-0 z-40 !select-auto focus:outline-none">
|
||||
<div
|
||||
className={clsx(
|
||||
"p-4 bg-base-100 flex-1 border-neutral-content border-l overflow-y-auto",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</D.Content>
|
||||
</D.Portal>
|
||||
</D.Root>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { icons } from "@/lib/client/icons";
|
||||
import Fuse from "fuse.js";
|
||||
import { forwardRef, useMemo } from "react";
|
||||
import { FixedSizeGrid as Grid } from "react-window";
|
||||
|
||||
const fuse = new Fuse(icons, {
|
||||
keys: [{ name: "name", weight: 4 }, "tags", "categories"],
|
||||
threshold: 0.2,
|
||||
useExtendedSearch: true,
|
||||
});
|
||||
|
||||
type Props = {
|
||||
query: string;
|
||||
color: string;
|
||||
weight: "light" | "regular" | "bold" | "fill" | "duotone" | "thin";
|
||||
iconName?: string;
|
||||
setIconName: Function;
|
||||
};
|
||||
|
||||
const IconGrid = ({ query, color, weight, iconName, setIconName }: Props) => {
|
||||
const filteredIcons = useMemo(() => {
|
||||
if (!query) {
|
||||
return icons;
|
||||
}
|
||||
return fuse.search(query).map((result) => result.item);
|
||||
}, [query]);
|
||||
|
||||
const columnCount = 6;
|
||||
const rowCount = Math.ceil(filteredIcons.length / columnCount);
|
||||
const GUTTER_SIZE = 5;
|
||||
|
||||
const Cell = ({ columnIndex, rowIndex, style }: any) => {
|
||||
const index = rowIndex * columnCount + columnIndex;
|
||||
if (index >= filteredIcons.length) return null; // Prevent overflow
|
||||
|
||||
const icon = filteredIcons[index];
|
||||
const IconComponent = icon.Icon;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
...style,
|
||||
left: style.left + GUTTER_SIZE,
|
||||
top: style.top + GUTTER_SIZE,
|
||||
width: style.width - GUTTER_SIZE,
|
||||
height: style.height - GUTTER_SIZE,
|
||||
}}
|
||||
onClick={() => setIconName(icon.pascal_name)}
|
||||
className={`cursor-pointer p-[6px] rounded-lg bg-base-100 w-full ${
|
||||
icon.pascal_name === iconName
|
||||
? "outline outline-1 outline-primary"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<IconComponent size={32} weight={weight} color={color} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const InnerElementType = forwardRef(({ style, ...rest }: any, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
style={{
|
||||
...style,
|
||||
paddingLeft: GUTTER_SIZE,
|
||||
paddingTop: GUTTER_SIZE,
|
||||
}}
|
||||
{...rest}
|
||||
/>
|
||||
));
|
||||
|
||||
InnerElementType.displayName = "InnerElementType";
|
||||
|
||||
return (
|
||||
<Grid
|
||||
columnCount={columnCount}
|
||||
rowCount={rowCount}
|
||||
columnWidth={50}
|
||||
rowHeight={50}
|
||||
innerElementType={InnerElementType}
|
||||
width={320}
|
||||
height={158}
|
||||
itemData={filteredIcons}
|
||||
className="hide-scrollbar ml-[4px] w-fit"
|
||||
>
|
||||
{Cell}
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconGrid;
|
||||
@@ -0,0 +1,147 @@
|
||||
import React, { useState } from "react";
|
||||
import TextInput from "./TextInput";
|
||||
import Popover from "./Popover";
|
||||
import { HexColorPicker } from "react-colorful";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import IconGrid from "./IconGrid";
|
||||
import clsx from "clsx";
|
||||
|
||||
type Props = {
|
||||
alignment?: string;
|
||||
color: string;
|
||||
setColor: Function;
|
||||
iconName?: string;
|
||||
setIconName: Function;
|
||||
weight: "light" | "regular" | "bold" | "fill" | "duotone" | "thin";
|
||||
setWeight: Function;
|
||||
reset: Function;
|
||||
className?: string;
|
||||
onClose: Function;
|
||||
};
|
||||
|
||||
const IconPopover = ({
|
||||
alignment,
|
||||
color,
|
||||
setColor,
|
||||
iconName,
|
||||
setIconName,
|
||||
weight,
|
||||
setWeight,
|
||||
reset,
|
||||
className,
|
||||
onClose,
|
||||
}: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
return (
|
||||
<Popover
|
||||
onClose={() => onClose()}
|
||||
className={clsx(
|
||||
className,
|
||||
"fade-in bg-base-200 border border-neutral-content p-3 w-[22.5rem] rounded-lg shadow-md"
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col gap-3 w-full h-full">
|
||||
<TextInput
|
||||
className="p-2 rounded w-full h-7 text-sm"
|
||||
placeholder={t("search")}
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-6 gap-1 w-full overflow-y-auto h-44 border border-neutral-content bg-base-100 rounded-md p-2">
|
||||
<IconGrid
|
||||
query={query}
|
||||
color={color}
|
||||
weight={weight}
|
||||
iconName={iconName}
|
||||
setIconName={setIconName}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 color-picker w-full justify-between">
|
||||
<HexColorPicker
|
||||
color={color}
|
||||
onChange={(e) => setColor(e)}
|
||||
className="border border-neutral-content rounded-lg"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
className="radio radio-primary mr-2"
|
||||
value="regular"
|
||||
checked={weight === "regular"}
|
||||
onChange={() => setWeight("regular")}
|
||||
/>
|
||||
{t("regular")}
|
||||
</label>
|
||||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
className="radio radio-primary mr-2"
|
||||
value="thin"
|
||||
checked={weight === "thin"}
|
||||
onChange={() => setWeight("thin")}
|
||||
/>
|
||||
{t("thin")}
|
||||
</label>
|
||||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
className="radio radio-primary mr-2"
|
||||
value="light"
|
||||
checked={weight === "light"}
|
||||
onChange={() => setWeight("light")}
|
||||
/>
|
||||
{t("light_icon")}
|
||||
</label>
|
||||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
className="radio radio-primary mr-2"
|
||||
value="bold"
|
||||
checked={weight === "bold"}
|
||||
onChange={() => setWeight("bold")}
|
||||
/>
|
||||
{t("bold")}
|
||||
</label>
|
||||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
className="radio radio-primary mr-2"
|
||||
value="fill"
|
||||
checked={weight === "fill"}
|
||||
onChange={() => setWeight("fill")}
|
||||
/>
|
||||
{t("fill")}
|
||||
</label>
|
||||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
className="radio radio-primary mr-2"
|
||||
value="duotone"
|
||||
checked={weight === "duotone"}
|
||||
onChange={() => setWeight("duotone")}
|
||||
/>
|
||||
{t("duotone")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row gap-2 justify-between items-center mt-2">
|
||||
<div
|
||||
className="btn btn-ghost btn-xs w-fit"
|
||||
onClick={reset as React.MouseEventHandler<HTMLDivElement>}
|
||||
>
|
||||
{t("reset_defaults")}
|
||||
</div>
|
||||
<p className="text-neutral text-xs">{t("click_out_to_apply")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconPopover;
|
||||
@@ -16,6 +16,10 @@ export const styles: StylesConfig = {
|
||||
},
|
||||
transition: "all 50ms",
|
||||
}),
|
||||
menu: (styles) => ({
|
||||
...styles,
|
||||
zIndex: 10,
|
||||
}),
|
||||
control: (styles, state) => ({
|
||||
...styles,
|
||||
fontFamily: font,
|
||||
|
||||
@@ -0,0 +1,687 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
LinkIncludingShortenedCollectionAndTags,
|
||||
ArchivedFormat,
|
||||
} from "@/types/global";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
pdfAvailable,
|
||||
readabilityAvailable,
|
||||
monolithAvailable,
|
||||
screenshotAvailable,
|
||||
previewAvailable,
|
||||
} from "@/lib/shared/getArchiveValidity";
|
||||
import PreservedFormatRow from "@/components/PreserverdFormatRow";
|
||||
import getPublicUserData from "@/lib/client/getPublicUserData";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import { BeatLoader } from "react-spinners";
|
||||
import { useUser } from "@/hooks/store/user";
|
||||
import {
|
||||
useGetLink,
|
||||
useUpdateLink,
|
||||
useUpdatePreview,
|
||||
} from "@/hooks/store/links";
|
||||
import LinkIcon from "./LinkViews/LinkComponents/LinkIcon";
|
||||
import CopyButton from "./CopyButton";
|
||||
import { useRouter } from "next/router";
|
||||
import Icon from "./Icon";
|
||||
import { IconWeight } from "@phosphor-icons/react";
|
||||
import Image from "next/image";
|
||||
import clsx from "clsx";
|
||||
import toast from "react-hot-toast";
|
||||
import CollectionSelection from "./InputSelect/CollectionSelection";
|
||||
import TagSelection from "./InputSelect/TagSelection";
|
||||
import unescapeString from "@/lib/client/unescapeString";
|
||||
import IconPopover from "./IconPopover";
|
||||
import TextInput from "./TextInput";
|
||||
import usePermissions from "@/hooks/usePermissions";
|
||||
|
||||
type Props = {
|
||||
className?: string;
|
||||
activeLink: LinkIncludingShortenedCollectionAndTags;
|
||||
standalone?: boolean;
|
||||
mode?: "view" | "edit";
|
||||
setMode?: Function;
|
||||
onUpdateArchive?: Function;
|
||||
};
|
||||
|
||||
export default function LinkDetails({
|
||||
className,
|
||||
activeLink,
|
||||
standalone,
|
||||
mode = "view",
|
||||
setMode,
|
||||
onUpdateArchive,
|
||||
}: Props) {
|
||||
const [link, setLink] =
|
||||
useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
|
||||
|
||||
useEffect(() => {
|
||||
setLink(activeLink);
|
||||
}, [activeLink]);
|
||||
|
||||
const permissions = usePermissions(link.collection.id as number);
|
||||
|
||||
const { t } = useTranslation();
|
||||
const getLink = useGetLink();
|
||||
const { data: user = {} } = useUser();
|
||||
|
||||
const [collectionOwner, setCollectionOwner] = useState({
|
||||
id: null as unknown as number,
|
||||
name: "",
|
||||
username: "",
|
||||
image: "",
|
||||
archiveAsScreenshot: undefined as unknown as boolean,
|
||||
archiveAsMonolith: undefined as unknown as boolean,
|
||||
archiveAsPDF: undefined as unknown as boolean,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchOwner = async () => {
|
||||
if (link.collection.ownerId !== user.id) {
|
||||
const owner = await getPublicUserData(
|
||||
link.collection.ownerId as number
|
||||
);
|
||||
setCollectionOwner(owner);
|
||||
} else if (link.collection.ownerId === user.id) {
|
||||
setCollectionOwner({
|
||||
id: user.id as number,
|
||||
name: user.name,
|
||||
username: user.username as string,
|
||||
image: user.image as string,
|
||||
archiveAsScreenshot: user.archiveAsScreenshot as boolean,
|
||||
archiveAsMonolith: user.archiveAsScreenshot as boolean,
|
||||
archiveAsPDF: user.archiveAsPDF as boolean,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
fetchOwner();
|
||||
}, [link.collection.ownerId]);
|
||||
|
||||
const isReady = () => {
|
||||
return (
|
||||
link &&
|
||||
(collectionOwner.archiveAsScreenshot === true
|
||||
? link.pdf && link.pdf !== "pending"
|
||||
: true) &&
|
||||
(collectionOwner.archiveAsMonolith === true
|
||||
? link.monolith && link.monolith !== "pending"
|
||||
: true) &&
|
||||
(collectionOwner.archiveAsPDF === true
|
||||
? link.pdf && link.pdf !== "pending"
|
||||
: true) &&
|
||||
link.readable &&
|
||||
link.readable !== "pending"
|
||||
);
|
||||
};
|
||||
|
||||
const atLeastOneFormatAvailable = () => {
|
||||
return (
|
||||
screenshotAvailable(link) ||
|
||||
pdfAvailable(link) ||
|
||||
readabilityAvailable(link) ||
|
||||
monolithAvailable(link)
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
await getLink.mutateAsync({
|
||||
id: link.id as number,
|
||||
});
|
||||
})();
|
||||
|
||||
let interval: any;
|
||||
|
||||
if (!isReady()) {
|
||||
interval = setInterval(async () => {
|
||||
await getLink.mutateAsync({
|
||||
id: link.id as number,
|
||||
});
|
||||
}, 5000);
|
||||
} else {
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
};
|
||||
}, [link.monolith]);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
|
||||
|
||||
const updateLink = useUpdateLink();
|
||||
const updatePreview = useUpdatePreview();
|
||||
|
||||
const submit = async (e?: any) => {
|
||||
e?.preventDefault();
|
||||
|
||||
const { updatedAt: b, ...oldLink } = activeLink;
|
||||
const { updatedAt: a, ...newLink } = link;
|
||||
|
||||
if (JSON.stringify(oldLink) === JSON.stringify(newLink)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const load = toast.loading(t("updating"));
|
||||
|
||||
await updateLink.mutateAsync(link, {
|
||||
onSettled: (data, error) => {
|
||||
toast.dismiss(load);
|
||||
|
||||
if (error) {
|
||||
toast.error(error.message);
|
||||
} else {
|
||||
toast.success(t("updated"));
|
||||
setMode && setMode("view");
|
||||
setLink(data);
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const setCollection = (e: any) => {
|
||||
if (e?.__isNew__) e.value = null;
|
||||
setLink({
|
||||
...link,
|
||||
collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
|
||||
});
|
||||
};
|
||||
|
||||
const setTags = (e: any) => {
|
||||
const tagNames = e.map((e: any) => ({ name: e.label }));
|
||||
setLink({ ...link, tags: tagNames });
|
||||
};
|
||||
|
||||
const [iconPopover, setIconPopover] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={clsx(className)} data-vaul-no-drag>
|
||||
<div
|
||||
className={clsx(
|
||||
standalone && "sm:border sm:border-neutral-content sm:rounded-2xl p-5"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"overflow-hidden select-none relative group h-40 opacity-80",
|
||||
standalone
|
||||
? "sm:max-w-xl -mx-5 -mt-5 sm:rounded-t-2xl"
|
||||
: "-mx-4 -mt-4"
|
||||
)}
|
||||
>
|
||||
{previewAvailable(link) ? (
|
||||
<Image
|
||||
src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true&updatedAt=${link.updatedAt}`}
|
||||
width={1280}
|
||||
height={720}
|
||||
alt=""
|
||||
className="object-cover scale-105 object-center h-full"
|
||||
style={{
|
||||
filter: "blur(1px)",
|
||||
}}
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
target.style.display = "none";
|
||||
}}
|
||||
/>
|
||||
) : link.preview === "unavailable" ? (
|
||||
<div className="bg-gray-50 duration-100 h-40"></div>
|
||||
) : (
|
||||
<div className="duration-100 h-40 skeleton rounded-none"></div>
|
||||
)}
|
||||
|
||||
{!standalone &&
|
||||
(permissions === true || permissions?.canUpdate) &&
|
||||
!isPublicRoute && (
|
||||
<div className="absolute top-0 bottom-0 left-0 right-0 opacity-0 group-hover:opacity-100 duration-100 flex justify-end items-end">
|
||||
<label className="btn btn-xs mb-2 mr-3 opacity-50 hover:opacity-100">
|
||||
{t("upload_preview_image")}
|
||||
<input
|
||||
type="file"
|
||||
accept="image/jpg, image/jpeg, image/png"
|
||||
onChange={async (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const load = toast.loading(t("updating"));
|
||||
|
||||
await updatePreview.mutateAsync(
|
||||
{
|
||||
linkId: link.id as number,
|
||||
file,
|
||||
},
|
||||
{
|
||||
onSettled: (data, error) => {
|
||||
toast.dismiss(load);
|
||||
|
||||
if (error) {
|
||||
toast.error(error.message);
|
||||
} else {
|
||||
toast.success(t("updated"));
|
||||
setLink({ updatedAt: data.updatedAt, ...link });
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
}}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!standalone &&
|
||||
(permissions === true || permissions?.canUpdate) &&
|
||||
!isPublicRoute ? (
|
||||
<div className="-mt-14 ml-8 relative w-fit pb-2">
|
||||
<div className="tooltip tooltip-bottom" data-tip={t("change_icon")}>
|
||||
<LinkIcon
|
||||
link={link}
|
||||
className="hover:bg-opacity-70 duration-100 cursor-pointer"
|
||||
onClick={() => setIconPopover(true)}
|
||||
/>
|
||||
</div>
|
||||
{iconPopover && (
|
||||
<IconPopover
|
||||
color={link.color || "#006796"}
|
||||
setColor={(color: string) => setLink({ ...link, color })}
|
||||
weight={(link.iconWeight || "regular") as IconWeight}
|
||||
setWeight={(iconWeight: string) =>
|
||||
setLink({ ...link, iconWeight })
|
||||
}
|
||||
iconName={link.icon as string}
|
||||
setIconName={(icon: string) => setLink({ ...link, icon })}
|
||||
reset={() =>
|
||||
setLink({
|
||||
...link,
|
||||
color: "",
|
||||
icon: "",
|
||||
iconWeight: "",
|
||||
})
|
||||
}
|
||||
className="top-12"
|
||||
onClose={() => {
|
||||
setIconPopover(false);
|
||||
submit();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="-mt-14 ml-8 relative w-fit pb-2">
|
||||
<LinkIcon link={link} onClick={() => setIconPopover(true)} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="max-w-xl sm:px-8 p-5 pb-8 pt-2">
|
||||
{mode === "view" && (
|
||||
<div className="text-xl mt-2 pr-7">
|
||||
<p
|
||||
className={clsx("relative w-fit", !link.name && "text-neutral")}
|
||||
>
|
||||
{unescapeString(link.name) || t("untitled")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode === "edit" && (
|
||||
<>
|
||||
<br />
|
||||
|
||||
<div>
|
||||
<p className="text-sm mb-2 text-neutral relative w-fit flex justify-between">
|
||||
{t("name")}
|
||||
</p>
|
||||
<TextInput
|
||||
value={link.name}
|
||||
onChange={(e) => setLink({ ...link, name: e.target.value })}
|
||||
placeholder={t("placeholder_example_link")}
|
||||
className="bg-base-200"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{link.url && mode === "view" ? (
|
||||
<>
|
||||
<br />
|
||||
|
||||
<p className="text-sm mb-2 text-neutral">{t("link")}</p>
|
||||
|
||||
<div className="relative">
|
||||
<div className="rounded-md p-2 bg-base-200 hide-scrollbar overflow-x-auto whitespace-nowrap flex justify-between items-center gap-2 pr-14">
|
||||
<Link href={link.url} title={link.url} target="_blank">
|
||||
{link.url}
|
||||
</Link>
|
||||
<div className="absolute right-0 px-2 bg-base-200">
|
||||
<CopyButton text={link.url} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : activeLink.url ? (
|
||||
<>
|
||||
<br />
|
||||
|
||||
<div>
|
||||
<p className="text-sm mb-2 text-neutral relative w-fit flex justify-between">
|
||||
{t("link")}
|
||||
</p>
|
||||
<TextInput
|
||||
value={link.url || ""}
|
||||
onChange={(e) => setLink({ ...link, url: e.target.value })}
|
||||
placeholder={t("placeholder_example_link")}
|
||||
className="bg-base-200"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : undefined}
|
||||
|
||||
<br />
|
||||
|
||||
<div className="relative">
|
||||
<p className="text-sm mb-2 text-neutral relative w-fit flex justify-between">
|
||||
{t("collection")}
|
||||
</p>
|
||||
|
||||
{mode === "view" ? (
|
||||
<div className="relative">
|
||||
<Link
|
||||
href={
|
||||
isPublicRoute
|
||||
? `/public/collections/${link.collection.id}`
|
||||
: `/collections/${link.collection.id}`
|
||||
}
|
||||
className="rounded-md p-2 bg-base-200 border border-base-200 hide-scrollbar overflow-x-auto whitespace-nowrap flex justify-between items-center gap-2 pr-14"
|
||||
>
|
||||
<p>{link.collection.name}</p>
|
||||
<div className="absolute right-0 px-2 bg-base-200">
|
||||
{link.collection.icon ? (
|
||||
<Icon
|
||||
icon={link.collection.icon}
|
||||
size={30}
|
||||
weight={
|
||||
(link.collection.iconWeight ||
|
||||
"regular") as IconWeight
|
||||
}
|
||||
color={link.collection.color}
|
||||
/>
|
||||
) : (
|
||||
<i
|
||||
className="bi-folder-fill text-2xl"
|
||||
style={{ color: link.collection.color }}
|
||||
></i>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<CollectionSelection
|
||||
onChange={setCollection}
|
||||
defaultValue={
|
||||
link.collection.id
|
||||
? { value: link.collection.id, label: link.collection.name }
|
||||
: { value: null as unknown as number, label: "Unorganized" }
|
||||
}
|
||||
creatable={false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div className="relative">
|
||||
<p className="text-sm mb-2 text-neutral relative w-fit flex justify-between">
|
||||
{t("tags")}
|
||||
</p>
|
||||
|
||||
{mode === "view" ? (
|
||||
<div className="flex gap-2 flex-wrap rounded-md p-2 bg-base-200 border border-base-200 w-full text-xs">
|
||||
{link.tags && link.tags[0] ? (
|
||||
link.tags.map((tag) =>
|
||||
isPublicRoute ? (
|
||||
<div
|
||||
key={tag.id}
|
||||
className="bg-base-200 p-1 hover:bg-neutral-content rounded-md duration-100"
|
||||
>
|
||||
{tag.name}
|
||||
</div>
|
||||
) : (
|
||||
<Link
|
||||
href={"/tags/" + tag.id}
|
||||
key={tag.id}
|
||||
className="bg-base-200 p-1 hover:bg-neutral-content btn btn-xs btn-ghost rounded-md"
|
||||
>
|
||||
{tag.name}
|
||||
</Link>
|
||||
)
|
||||
)
|
||||
) : (
|
||||
<div className="text-neutral text-base">{t("no_tags")}</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<TagSelection
|
||||
onChange={setTags}
|
||||
defaultValue={link.tags.map((e) => ({
|
||||
label: e.name,
|
||||
value: e.id,
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div className="relative">
|
||||
<p className="text-sm mb-2 text-neutral relative w-fit flex justify-between">
|
||||
{t("description")}
|
||||
</p>
|
||||
|
||||
{mode === "view" ? (
|
||||
<div className="rounded-md p-2 bg-base-200 hyphens-auto">
|
||||
{link.description ? (
|
||||
<p>{link.description}</p>
|
||||
) : (
|
||||
<p className="text-neutral">{t("no_description_provided")}</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<textarea
|
||||
value={unescapeString(link.description) as string}
|
||||
onChange={(e) =>
|
||||
setLink({ ...link, description: e.target.value })
|
||||
}
|
||||
placeholder={t("link_description_placeholder")}
|
||||
className="resize-none w-full rounded-md p-2 h-32 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{mode === "view" && (
|
||||
<div>
|
||||
<br />
|
||||
|
||||
<div className="flex gap-1 items-center mb-2">
|
||||
<p
|
||||
className="text-sm text-neutral"
|
||||
title={t("available_formats")}
|
||||
>
|
||||
{link.url ? t("preserved_formats") : t("file")}
|
||||
</p>
|
||||
|
||||
{onUpdateArchive &&
|
||||
(permissions === true || permissions?.canUpdate) &&
|
||||
!isPublicRoute && (
|
||||
<div
|
||||
className="tooltip tooltip-bottom"
|
||||
data-tip={t("refresh_preserved_formats")}
|
||||
>
|
||||
<button
|
||||
className="btn btn-xs btn-ghost btn-square text-neutral"
|
||||
onClick={() => onUpdateArchive()}
|
||||
>
|
||||
<i className="bi-arrow-clockwise text-sm" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={`flex flex-col rounded-md p-3 bg-base-200`}>
|
||||
{monolithAvailable(link) ? (
|
||||
<>
|
||||
<PreservedFormatRow
|
||||
name={t("webpage")}
|
||||
icon={"bi-filetype-html"}
|
||||
format={ArchivedFormat.monolith}
|
||||
link={link}
|
||||
downloadable={true}
|
||||
/>
|
||||
<hr className="m-3 border-t border-neutral-content" />
|
||||
</>
|
||||
) : undefined}
|
||||
|
||||
{screenshotAvailable(link) ? (
|
||||
<>
|
||||
<PreservedFormatRow
|
||||
name={t("screenshot")}
|
||||
icon={"bi-file-earmark-image"}
|
||||
format={
|
||||
link?.image?.endsWith("png")
|
||||
? ArchivedFormat.png
|
||||
: ArchivedFormat.jpeg
|
||||
}
|
||||
link={link}
|
||||
downloadable={true}
|
||||
/>
|
||||
<hr className="m-3 border-t border-neutral-content" />
|
||||
</>
|
||||
) : undefined}
|
||||
|
||||
{pdfAvailable(link) ? (
|
||||
<>
|
||||
<PreservedFormatRow
|
||||
name={t("pdf")}
|
||||
icon={"bi-file-earmark-pdf"}
|
||||
format={ArchivedFormat.pdf}
|
||||
link={link}
|
||||
downloadable={true}
|
||||
/>
|
||||
<hr className="m-3 border-t border-neutral-content" />
|
||||
</>
|
||||
) : undefined}
|
||||
|
||||
{readabilityAvailable(link) ? (
|
||||
<>
|
||||
<PreservedFormatRow
|
||||
name={t("readable")}
|
||||
icon={"bi-file-earmark-text"}
|
||||
format={ArchivedFormat.readability}
|
||||
link={link}
|
||||
/>
|
||||
<hr className="m-3 border-t border-neutral-content" />
|
||||
</>
|
||||
) : undefined}
|
||||
|
||||
{!isReady() && !atLeastOneFormatAvailable() ? (
|
||||
<div
|
||||
className={`w-full h-full flex flex-col justify-center p-10`}
|
||||
>
|
||||
<BeatLoader
|
||||
color="oklch(var(--p))"
|
||||
className="mx-auto mb-3"
|
||||
size={30}
|
||||
/>
|
||||
|
||||
<p className="text-center text-2xl">
|
||||
{t("preservation_in_queue")}
|
||||
</p>
|
||||
<p className="text-center text-lg">
|
||||
{t("check_back_later")}
|
||||
</p>
|
||||
</div>
|
||||
) : link.url && !isReady() && atLeastOneFormatAvailable() ? (
|
||||
<div
|
||||
className={`w-full h-full flex flex-col justify-center p-5`}
|
||||
>
|
||||
<BeatLoader
|
||||
color="oklch(var(--p))"
|
||||
className="mx-auto mb-3"
|
||||
size={20}
|
||||
/>
|
||||
<p className="text-center">{t("there_are_more_formats")}</p>
|
||||
<p className="text-center text-sm">
|
||||
{t("check_back_later")}
|
||||
</p>
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
{link.url && (
|
||||
<Link
|
||||
href={`https://web.archive.org/web/${link?.url?.replace(
|
||||
/(^\w+:|^)\/\//,
|
||||
""
|
||||
)}`}
|
||||
target="_blank"
|
||||
className="text-neutral mx-auto duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm"
|
||||
>
|
||||
<p className="whitespace-nowrap">
|
||||
{t("view_latest_snapshot")}
|
||||
</p>
|
||||
<i className="bi-box-arrow-up-right" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode === "view" ? (
|
||||
<>
|
||||
<br />
|
||||
|
||||
<p className="text-neutral text-xs text-center">
|
||||
{t("saved")}{" "}
|
||||
{new Date(link.createdAt || "").toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
})}{" "}
|
||||
at{" "}
|
||||
{new Date(link.createdAt || "").toLocaleTimeString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
})}
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<br />
|
||||
<div className="flex justify-end items-center">
|
||||
<button
|
||||
className={clsx(
|
||||
"btn btn-accent text-white",
|
||||
JSON.stringify(activeLink) === JSON.stringify(link)
|
||||
? "btn-disabled"
|
||||
: "dark:border-violet-400"
|
||||
)}
|
||||
onClick={submit}
|
||||
>
|
||||
{t("save_changes")}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,207 +4,189 @@ import {
|
||||
LinkIncludingShortenedCollectionAndTags,
|
||||
} from "@/types/global";
|
||||
import usePermissions from "@/hooks/usePermissions";
|
||||
import EditLinkModal from "@/components/ModalContent/EditLinkModal";
|
||||
import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
|
||||
import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
|
||||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import { useUser } from "@/hooks/store/user";
|
||||
import { useDeleteLink, useUpdateLink } from "@/hooks/store/links";
|
||||
import { useDeleteLink, useGetLink } from "@/hooks/store/links";
|
||||
import toast from "react-hot-toast";
|
||||
import LinkModal from "@/components/ModalContent/LinkModal";
|
||||
import { useRouter } from "next/router";
|
||||
import clsx from "clsx";
|
||||
import usePinLink from "@/lib/client/pinLink";
|
||||
|
||||
type Props = {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
collection: CollectionIncludingMembersAndLinkCount;
|
||||
position?: string;
|
||||
toggleShowInfo?: () => void;
|
||||
linkInfo?: boolean;
|
||||
alignToTop?: boolean;
|
||||
flipDropdown?: boolean;
|
||||
btnStyle?: string;
|
||||
};
|
||||
|
||||
export default function LinkActions({
|
||||
link,
|
||||
toggleShowInfo,
|
||||
position,
|
||||
linkInfo,
|
||||
alignToTop,
|
||||
flipDropdown,
|
||||
}: Props) {
|
||||
export default function LinkActions({ link, btnStyle }: Props) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const permissions = usePermissions(link.collection.id as number);
|
||||
const getLink = useGetLink();
|
||||
|
||||
const pinLink = usePinLink();
|
||||
|
||||
const [editLinkModal, setEditLinkModal] = useState(false);
|
||||
const [linkModal, setLinkModal] = useState(false);
|
||||
const [deleteLinkModal, setDeleteLinkModal] = useState(false);
|
||||
const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
|
||||
|
||||
const { data: user = {} } = useUser();
|
||||
|
||||
const updateLink = useUpdateLink();
|
||||
const deleteLink = useDeleteLink();
|
||||
|
||||
const pinLink = async () => {
|
||||
const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0] ? true : false;
|
||||
const updateArchive = async () => {
|
||||
const load = toast.loading(t("sending_request"));
|
||||
|
||||
const load = toast.loading(t("updating"));
|
||||
const response = await fetch(`/api/v1/links/${link?.id}/archive`, {
|
||||
method: "PUT",
|
||||
});
|
||||
|
||||
await updateLink.mutateAsync(
|
||||
{
|
||||
...link,
|
||||
pinnedBy: isAlreadyPinned ? undefined : [{ id: user.id }],
|
||||
},
|
||||
{
|
||||
onSettled: (data, error) => {
|
||||
toast.dismiss(load);
|
||||
const data = await response.json();
|
||||
toast.dismiss(load);
|
||||
|
||||
if (error) {
|
||||
toast.error(error.message);
|
||||
} else {
|
||||
toast.success(
|
||||
isAlreadyPinned ? t("link_unpinned") : t("link_pinned")
|
||||
);
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
if (response.ok) {
|
||||
await getLink.mutateAsync({ id: link.id as number });
|
||||
|
||||
toast.success(t("link_being_archived"));
|
||||
} else toast.error(data.response);
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`dropdown dropdown-left absolute ${
|
||||
position || "top-3 right-3"
|
||||
} ${alignToTop ? "" : "dropdown-end"} z-20`}
|
||||
>
|
||||
{isPublicRoute ? (
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
className="absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
|
||||
onMouseDown={dropdownTriggerer}
|
||||
className="btn btn-ghost btn-sm btn-square text-neutral"
|
||||
onClick={() => setLinkModal(true)}
|
||||
>
|
||||
<i title="More" className="bi-three-dots text-xl" />
|
||||
<div className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}>
|
||||
<i title="More" className="bi-info-circle text-xl" />
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box mr-1 ${
|
||||
alignToTop ? "" : "translate-y-10"
|
||||
}`}
|
||||
) : (
|
||||
<div
|
||||
className={`dropdown dropdown-end absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100 z-20`}
|
||||
>
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
pinLink();
|
||||
}}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
{link?.pinnedBy && link.pinnedBy[0]
|
||||
? t("unpin")
|
||||
: t("pin_to_dashboard")}
|
||||
</div>
|
||||
</li>
|
||||
{linkInfo !== undefined && toggleShowInfo ? (
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
onMouseDown={dropdownTriggerer}
|
||||
className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}
|
||||
>
|
||||
<i title="More" className="bi-three-dots text-xl" />
|
||||
</div>
|
||||
<ul
|
||||
className={
|
||||
"dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1"
|
||||
}
|
||||
>
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
toggleShowInfo();
|
||||
pinLink(link);
|
||||
}}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
{!linkInfo ? t("show_link_details") : t("hide_link_details")}
|
||||
{link?.pinnedBy && link.pinnedBy[0]
|
||||
? t("unpin")
|
||||
: t("pin_to_dashboard")}
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
{permissions === true || permissions?.canUpdate ? (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setEditLinkModal(true);
|
||||
setLinkModal(true);
|
||||
}}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
{t("edit_link")}
|
||||
{t("show_link_details")}
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
{link.type === "url" && (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setPreservedFormatsModal(true);
|
||||
}}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
{t("preserved_formats")}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
{permissions === true || permissions?.canDelete ? (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={async (e) => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
e.shiftKey
|
||||
? async () => {
|
||||
const load = toast.loading(t("deleting"));
|
||||
{(permissions === true || permissions?.canUpdate) && (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setEditLinkModal(true);
|
||||
}}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
{t("edit_link")}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
{(permissions === true || permissions?.canDelete) && (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={async (e) => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
console.log(e.shiftKey);
|
||||
e.shiftKey
|
||||
? (async () => {
|
||||
const load = toast.loading(t("deleting"));
|
||||
|
||||
await deleteLink.mutateAsync(link.id as number, {
|
||||
onSettled: (data, error) => {
|
||||
toast.dismiss(load);
|
||||
await deleteLink.mutateAsync(link.id as number, {
|
||||
onSettled: (data, error) => {
|
||||
toast.dismiss(load);
|
||||
|
||||
if (error) {
|
||||
toast.error(error.message);
|
||||
} else {
|
||||
toast.success(t("deleted"));
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
: setDeleteLinkModal(true);
|
||||
}}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
{t("delete")}
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{editLinkModal ? (
|
||||
<EditLinkModal
|
||||
if (error) {
|
||||
toast.error(error.message);
|
||||
} else {
|
||||
toast.success(t("deleted"));
|
||||
}
|
||||
},
|
||||
});
|
||||
})()
|
||||
: setDeleteLinkModal(true);
|
||||
}}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
{t("delete")}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{editLinkModal && (
|
||||
<LinkModal
|
||||
onClose={() => setEditLinkModal(false)}
|
||||
activeLink={link}
|
||||
onPin={() => pinLink(link)}
|
||||
onUpdateArchive={updateArchive}
|
||||
onDelete={() => setDeleteLinkModal(true)}
|
||||
link={link}
|
||||
activeMode="edit"
|
||||
/>
|
||||
) : undefined}
|
||||
{deleteLinkModal ? (
|
||||
)}
|
||||
{deleteLinkModal && (
|
||||
<DeleteLinkModal
|
||||
onClose={() => setDeleteLinkModal(false)}
|
||||
activeLink={link}
|
||||
/>
|
||||
) : undefined}
|
||||
{preservedFormatsModal ? (
|
||||
<PreservedFormatsModal
|
||||
onClose={() => setPreservedFormatsModal(false)}
|
||||
)}
|
||||
{linkModal && (
|
||||
<LinkModal
|
||||
onClose={() => setLinkModal(false)}
|
||||
onPin={() => pinLink(link)}
|
||||
onUpdateArchive={updateArchive}
|
||||
onDelete={() => setDeleteLinkModal(true)}
|
||||
link={link}
|
||||
/>
|
||||
) : undefined}
|
||||
{/* {expandedLink ? (
|
||||
<ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
|
||||
) : undefined} */}
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import {
|
||||
CollectionIncludingMembersAndLinkCount,
|
||||
LinkIncludingShortenedCollectionAndTags,
|
||||
} from "@/types/global";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import useLinkStore from "@/store/links";
|
||||
import unescapeString from "@/lib/client/unescapeString";
|
||||
import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
|
||||
@@ -11,7 +11,6 @@ import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
|
||||
import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
|
||||
import Image from "next/image";
|
||||
import { previewAvailable } from "@/lib/shared/getArchiveValidity";
|
||||
import Link from "next/link";
|
||||
import LinkIcon from "./LinkIcon";
|
||||
import useOnScreen from "@/hooks/useOnScreen";
|
||||
import { generateLinkHref } from "@/lib/client/generateLinkHref";
|
||||
@@ -22,24 +21,47 @@ import { useTranslation } from "next-i18next";
|
||||
import { useCollections } from "@/hooks/store/collections";
|
||||
import { useUser } from "@/hooks/store/user";
|
||||
import { useGetLink, useLinks } from "@/hooks/store/links";
|
||||
import { useRouter } from "next/router";
|
||||
import useLocalSettingsStore from "@/store/localSettings";
|
||||
import LinkPin from "./LinkPin";
|
||||
|
||||
type Props = {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
count: number;
|
||||
columns: number;
|
||||
className?: string;
|
||||
flipDropdown?: boolean;
|
||||
editMode?: boolean;
|
||||
};
|
||||
|
||||
export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
||||
export default function LinkCard({ link, columns, editMode }: Props) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const heightMap = {
|
||||
1: "h-44",
|
||||
2: "h-40",
|
||||
3: "h-36",
|
||||
4: "h-32",
|
||||
5: "h-28",
|
||||
6: "h-24",
|
||||
7: "h-20",
|
||||
8: "h-20",
|
||||
};
|
||||
|
||||
const imageHeightClass = useMemo(
|
||||
() => (columns ? heightMap[columns as keyof typeof heightMap] : "h-40"),
|
||||
[columns]
|
||||
);
|
||||
|
||||
const { data: collections = [] } = useCollections();
|
||||
|
||||
const { data: user = {} } = useUser();
|
||||
|
||||
const { setSelectedLinks, selectedLinks } = useLinkStore();
|
||||
|
||||
const {
|
||||
settings: { show },
|
||||
} = useLocalSettingsStore();
|
||||
|
||||
const {
|
||||
data: { data: links = [] },
|
||||
} = useLinks();
|
||||
@@ -90,8 +112,11 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
||||
const isVisible = useOnScreen(ref);
|
||||
const permissions = usePermissions(collection?.id as number);
|
||||
|
||||
const router = useRouter();
|
||||
const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
|
||||
|
||||
useEffect(() => {
|
||||
let interval: any;
|
||||
let interval: NodeJS.Timeout | null = null;
|
||||
|
||||
if (
|
||||
isVisible &&
|
||||
@@ -99,7 +124,10 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
||||
link.preview !== "unavailable"
|
||||
) {
|
||||
interval = setInterval(async () => {
|
||||
getLink.mutateAsync(link.id as number);
|
||||
getLink.mutateAsync({
|
||||
id: link.id as number,
|
||||
isPublicRoute: isPublicRoute,
|
||||
});
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
@@ -110,8 +138,6 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
||||
};
|
||||
}, [isVisible, link.preview]);
|
||||
|
||||
const [showInfo, setShowInfo] = useState(false);
|
||||
|
||||
const selectedStyle = selectedLinks.some(
|
||||
(selectedLink) => selectedLink.id === link.id
|
||||
)
|
||||
@@ -125,7 +151,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative`}
|
||||
className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative group`}
|
||||
onClick={() =>
|
||||
selectable
|
||||
? handleCheckboxClick(link)
|
||||
@@ -140,121 +166,76 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
||||
!editMode && window.open(generateLinkHref(link, user), "_blank")
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<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>
|
||||
)}
|
||||
{link.type !== "image" && (
|
||||
<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>
|
||||
|
||||
{show.image && (
|
||||
<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">
|
||||
<div className="cursor-pointer truncate">
|
||||
{collection && (
|
||||
<LinkCollection link={link} collection={collection} />
|
||||
)}
|
||||
</div>
|
||||
<LinkDate link={link} />
|
||||
<div
|
||||
className={`relative rounded-t-2xl ${imageHeightClass} overflow-hidden`}
|
||||
>
|
||||
{previewAvailable(link) ? (
|
||||
<Image
|
||||
src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true&updatedAt=${link.updatedAt}`}
|
||||
width={1280}
|
||||
height={720}
|
||||
alt=""
|
||||
className={`rounded-t-2xl select-none object-cover z-10 ${imageHeightClass} w-full shadow opacity-80 scale-105`}
|
||||
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 ${imageHeightClass} bg-opacity-80`}
|
||||
></div>
|
||||
) : (
|
||||
<div
|
||||
className={`${imageHeightClass} 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 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 min-h-24">
|
||||
<div className="p-3 flex flex-col gap-2">
|
||||
{show.name && (
|
||||
<p className="truncate w-full 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 items-center text-xs text-neutral px-3 pb-1 gap-2">
|
||||
{show.collection && !isPublicRoute && (
|
||||
<div className="cursor-pointer truncate">
|
||||
<LinkCollection link={link} collection={collection} />
|
||||
</div>
|
||||
)}
|
||||
{show.date && <LinkDate link={link} />}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showInfo && (
|
||||
<div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-[0.9rem] fade-in overflow-y-auto">
|
||||
<div
|
||||
onClick={() => setShowInfo(!showInfo)}
|
||||
className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
|
||||
>
|
||||
<i className="bi-x text-neutral text-2xl"></i>
|
||||
</div>
|
||||
<p className="text-neutral text-lg font-semibold">
|
||||
{t("description")}
|
||||
</p>
|
||||
|
||||
<hr className="divider my-2 border-t border-neutral-content h-[1px]" />
|
||||
<p>
|
||||
{link.description ? (
|
||||
unescapeString(link.description)
|
||||
) : (
|
||||
<span className="text-neutral text-sm">
|
||||
{t("no_description")}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{link.tags && link.tags[0] && (
|
||||
<>
|
||||
<p className="text-neutral text-lg mt-3 font-semibold">
|
||||
{t("tags")}
|
||||
</p>
|
||||
|
||||
<hr className="divider my-2 border-t border-neutral-content h-[1px]" />
|
||||
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<LinkActions
|
||||
link={link}
|
||||
collection={collection}
|
||||
position="top-[10.75rem] right-3"
|
||||
toggleShowInfo={() => setShowInfo(!showInfo)}
|
||||
linkInfo={showInfo}
|
||||
flipDropdown={flipDropdown}
|
||||
/>
|
||||
{/* Overlay on hover */}
|
||||
<div className="absolute pointer-events-none top-0 left-0 right-0 bottom-0 bg-base-100 bg-opacity-0 group-hover:bg-opacity-20 group-focus-within:opacity-20 rounded-2xl duration-100"></div>
|
||||
<LinkActions link={link} collection={collection} />
|
||||
{!isPublicRoute && <LinkPin link={link} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import {
|
||||
LinkIncludingShortenedCollectionAndTags,
|
||||
} from "@/types/global";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import React from "react";
|
||||
|
||||
export default function LinkCollection({
|
||||
@@ -12,7 +13,11 @@ export default function LinkCollection({
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
collection: CollectionIncludingMembersAndLinkCount;
|
||||
}) {
|
||||
return (
|
||||
const router = useRouter();
|
||||
|
||||
const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
|
||||
|
||||
return !isPublicRoute && collection?.name ? (
|
||||
<>
|
||||
<Link
|
||||
href={`/collections/${link.collection.id}`}
|
||||
@@ -29,5 +34,5 @@ export default function LinkCollection({
|
||||
<p className="truncate capitalize">{collection?.name}</p>
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
) : null;
|
||||
}
|
||||
|
||||
@@ -1,73 +1,75 @@
|
||||
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||
import Image from "next/image";
|
||||
import isValidUrl from "@/lib/shared/isValidUrl";
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import Icon from "@/components/Icon";
|
||||
import { IconWeight } from "@phosphor-icons/react";
|
||||
import clsx from "clsx";
|
||||
|
||||
export default function LinkIcon({
|
||||
link,
|
||||
className,
|
||||
size,
|
||||
hideBackground,
|
||||
onClick,
|
||||
}: {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
className?: string;
|
||||
size?: "small" | "medium";
|
||||
hideBackground?: boolean;
|
||||
onClick?: Function;
|
||||
}) {
|
||||
let iconClasses: string =
|
||||
"bg-white shadow rounded-md border-[2px] flex item-center justify-center border-white select-none z-10 " +
|
||||
(className || "");
|
||||
|
||||
let dimension;
|
||||
|
||||
switch (size) {
|
||||
case "small":
|
||||
dimension = " w-8 h-8";
|
||||
break;
|
||||
case "medium":
|
||||
dimension = " w-12 h-12";
|
||||
break;
|
||||
default:
|
||||
size = "medium";
|
||||
dimension = " w-12 h-12";
|
||||
break;
|
||||
}
|
||||
let iconClasses: string = clsx(
|
||||
"rounded flex item-center justify-center shadow select-none z-10 w-12 h-12",
|
||||
!hideBackground && "rounded-md bg-white backdrop-blur-lg bg-opacity-50 p-1",
|
||||
className
|
||||
);
|
||||
|
||||
const url =
|
||||
isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
|
||||
|
||||
const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
|
||||
const [faviconLoaded, setFaviconLoaded] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{link.type === "url" && url ? (
|
||||
showFavicon ? (
|
||||
<div onClick={() => onClick && onClick()}>
|
||||
{link.icon ? (
|
||||
<div className={iconClasses}>
|
||||
<Icon
|
||||
icon={link.icon}
|
||||
size={30}
|
||||
weight={(link.iconWeight || "regular") as IconWeight}
|
||||
color={link.color || "#006796"}
|
||||
className="m-auto"
|
||||
/>
|
||||
</div>
|
||||
) : link.type === "url" && url ? (
|
||||
<>
|
||||
<Image
|
||||
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
|
||||
width={64}
|
||||
height={64}
|
||||
alt=""
|
||||
className={iconClasses + dimension}
|
||||
className={clsx(
|
||||
iconClasses,
|
||||
faviconLoaded ? "" : "absolute opacity-0"
|
||||
)}
|
||||
draggable="false"
|
||||
onError={() => {
|
||||
setShowFavicon(false);
|
||||
}}
|
||||
onLoadingComplete={() => setFaviconLoaded(true)}
|
||||
onError={() => setFaviconLoaded(false)}
|
||||
/>
|
||||
) : (
|
||||
<LinkPlaceholderIcon
|
||||
iconClasses={iconClasses + dimension}
|
||||
size={size}
|
||||
icon="bi-link-45deg"
|
||||
/>
|
||||
)
|
||||
{!faviconLoaded && (
|
||||
<LinkPlaceholderIcon
|
||||
iconClasses={iconClasses}
|
||||
icon="bi-link-45deg"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : link.type === "pdf" ? (
|
||||
<LinkPlaceholderIcon
|
||||
iconClasses={iconClasses + dimension}
|
||||
size={size}
|
||||
iconClasses={iconClasses}
|
||||
icon="bi-file-earmark-pdf"
|
||||
/>
|
||||
) : link.type === "image" ? (
|
||||
<LinkPlaceholderIcon
|
||||
iconClasses={iconClasses + dimension}
|
||||
size={size}
|
||||
iconClasses={iconClasses}
|
||||
icon="bi-file-earmark-image"
|
||||
/>
|
||||
) : // : link.type === "monolith" ? (
|
||||
@@ -78,25 +80,19 @@ export default function LinkIcon({
|
||||
// />
|
||||
// )
|
||||
undefined}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const LinkPlaceholderIcon = ({
|
||||
iconClasses,
|
||||
size,
|
||||
icon,
|
||||
}: {
|
||||
iconClasses: string;
|
||||
size?: "small" | "medium";
|
||||
icon: string;
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={`${
|
||||
size === "small" ? "text-2xl" : "text-4xl"
|
||||
} text-black aspect-square ${iconClasses}`}
|
||||
>
|
||||
<div className={clsx(iconClasses, "aspect-square text-4xl text-[#006796]")}>
|
||||
<i className={`${icon} m-auto`}></i>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -18,20 +18,18 @@ import { useTranslation } from "next-i18next";
|
||||
import { useCollections } from "@/hooks/store/collections";
|
||||
import { useUser } from "@/hooks/store/user";
|
||||
import { useLinks } from "@/hooks/store/links";
|
||||
import useLocalSettingsStore from "@/store/localSettings";
|
||||
import LinkPin from "./LinkPin";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
type Props = {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
count: number;
|
||||
className?: string;
|
||||
flipDropdown?: boolean;
|
||||
editMode?: boolean;
|
||||
};
|
||||
|
||||
export default function LinkCardCompact({
|
||||
link,
|
||||
flipDropdown,
|
||||
editMode,
|
||||
}: Props) {
|
||||
export default function LinkCardCompact({ link, editMode }: Props) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { data: collections = [] } = useCollections();
|
||||
@@ -39,6 +37,10 @@ export default function LinkCardCompact({
|
||||
const { data: user = {} } = useUser();
|
||||
const { setSelectedLinks, selectedLinks } = useLinkStore();
|
||||
|
||||
const {
|
||||
settings: { show },
|
||||
} = useLocalSettingsStore();
|
||||
|
||||
const { links } = useLinks();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -80,8 +82,6 @@ export default function LinkCardCompact({
|
||||
|
||||
const permissions = usePermissions(collection?.id as number);
|
||||
|
||||
const [showInfo, setShowInfo] = useState(false);
|
||||
|
||||
const selectedStyle = selectedLinks.some(
|
||||
(selectedLink) => selectedLink.id === link.id
|
||||
)
|
||||
@@ -92,12 +92,15 @@ export default function LinkCardCompact({
|
||||
editMode &&
|
||||
(permissions === true || permissions?.canCreate || permissions?.canDelete);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
let isPublic = router.pathname.startsWith("/public") ? true : undefined;
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`${selectedStyle} border relative items-center flex ${
|
||||
!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
|
||||
} duration-200 rounded-lg w-full`}
|
||||
className={`${selectedStyle} rounded-md border relative group items-center flex ${
|
||||
!isPWA() ? "hover:bg-base-300 px-2 py-1" : "py-1"
|
||||
} duration-200 w-full`}
|
||||
onClick={() =>
|
||||
selectable
|
||||
? handleCheckboxClick(link)
|
||||
@@ -106,67 +109,40 @@ export default function LinkCardCompact({
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{/* {showCheckbox &&
|
||||
editMode &&
|
||||
(permissions === true ||
|
||||
permissions?.canCreate ||
|
||||
permissions?.canDelete) && (
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox checkbox-primary my-auto mr-2"
|
||||
checked={selectedLinks.some(
|
||||
(selectedLink) => selectedLink.id === link.id
|
||||
)}
|
||||
onChange={() => handleCheckboxClick(link)}
|
||||
/>
|
||||
)} */}
|
||||
<div
|
||||
className="flex items-center cursor-pointer w-full"
|
||||
className="flex items-center cursor-pointer w-full min-h-12"
|
||||
onClick={() =>
|
||||
!editMode && window.open(generateLinkHref(link, user), "_blank")
|
||||
}
|
||||
>
|
||||
<div className="shrink-0">
|
||||
<LinkIcon link={link} className="w-12 h-12 text-4xl" />
|
||||
</div>
|
||||
{show.icon && (
|
||||
<div className="shrink-0">
|
||||
<LinkIcon link={link} hideBackground />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="w-[calc(100%-56px)] ml-2">
|
||||
<p className="line-clamp-1 mr-8 text-primary select-none">
|
||||
{link.name ? (
|
||||
unescapeString(link.name)
|
||||
) : (
|
||||
<div className="mt-2">
|
||||
<LinkTypeBadge link={link} />
|
||||
</div>
|
||||
)}
|
||||
</p>
|
||||
{show.name && (
|
||||
<p className="line-clamp-1 mr-8 text-primary select-none">
|
||||
{unescapeString(link.name)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<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">
|
||||
{collection ? (
|
||||
{show.link && <LinkTypeBadge link={link} />}
|
||||
{show.collection && (
|
||||
<LinkCollection link={link} collection={collection} />
|
||||
) : undefined}
|
||||
{link.name && <LinkTypeBadge link={link} />}
|
||||
<LinkDate link={link} />
|
||||
)}
|
||||
{show.date && <LinkDate link={link} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LinkActions
|
||||
link={link}
|
||||
collection={collection}
|
||||
position="top-3 right-3"
|
||||
flipDropdown={flipDropdown}
|
||||
// toggleShowInfo={() => setShowInfo(!showInfo)}
|
||||
// linkInfo={showInfo}
|
||||
/>
|
||||
{!isPublic && <LinkPin link={link} btnStyle="btn-ghost" />}
|
||||
<LinkActions link={link} collection={collection} btnStyle="btn-ghost" />
|
||||
</div>
|
||||
<div
|
||||
className="last:hidden rounded-none"
|
||||
style={{
|
||||
borderTop: "1px solid var(--fallback-bc,oklch(var(--bc)/0.1))",
|
||||
}}
|
||||
></div>
|
||||
<div className="last:hidden rounded-none my-0 mx-1 border-t border-base-300 h-[1px]"></div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import {
|
||||
CollectionIncludingMembersAndLinkCount,
|
||||
LinkIncludingShortenedCollectionAndTags,
|
||||
} from "@/types/global";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import useLinkStore from "@/store/links";
|
||||
import unescapeString from "@/lib/client/unescapeString";
|
||||
import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
|
||||
@@ -22,23 +22,45 @@ import { useTranslation } from "next-i18next";
|
||||
import { useCollections } from "@/hooks/store/collections";
|
||||
import { useUser } from "@/hooks/store/user";
|
||||
import { useGetLink, useLinks } from "@/hooks/store/links";
|
||||
import useLocalSettingsStore from "@/store/localSettings";
|
||||
import clsx from "clsx";
|
||||
import LinkPin from "./LinkPin";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
type Props = {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
count: number;
|
||||
className?: string;
|
||||
flipDropdown?: boolean;
|
||||
columns: number;
|
||||
editMode?: boolean;
|
||||
};
|
||||
|
||||
export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
|
||||
export default function LinkMasonry({ link, editMode, columns }: Props) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const heightMap = {
|
||||
1: "h-44",
|
||||
2: "h-40",
|
||||
3: "h-36",
|
||||
4: "h-32",
|
||||
5: "h-28",
|
||||
6: "h-24",
|
||||
7: "h-20",
|
||||
8: "h-20",
|
||||
};
|
||||
|
||||
const imageHeightClass = useMemo(
|
||||
() => (columns ? heightMap[columns as keyof typeof heightMap] : "h-40"),
|
||||
[columns]
|
||||
);
|
||||
|
||||
const { data: collections = [] } = useCollections();
|
||||
const { data: user = {} } = useUser();
|
||||
|
||||
const { setSelectedLinks, selectedLinks } = useLinkStore();
|
||||
|
||||
const {
|
||||
settings: { show },
|
||||
} = useLocalSettingsStore();
|
||||
|
||||
const { links } = useLinks();
|
||||
const getLink = useGetLink();
|
||||
|
||||
@@ -87,8 +109,12 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
|
||||
const isVisible = useOnScreen(ref);
|
||||
const permissions = usePermissions(collection?.id as number);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
let isPublic = router.pathname.startsWith("/public") ? true : undefined;
|
||||
|
||||
useEffect(() => {
|
||||
let interval: any;
|
||||
let interval: NodeJS.Timeout | null = null;
|
||||
|
||||
if (
|
||||
isVisible &&
|
||||
@@ -96,7 +122,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
|
||||
link.preview !== "unavailable"
|
||||
) {
|
||||
interval = setInterval(async () => {
|
||||
getLink.mutateAsync(link.id as number);
|
||||
getLink.mutateAsync({ id: link.id as number });
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
@@ -107,8 +133,6 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
|
||||
};
|
||||
}, [isVisible, link.preview]);
|
||||
|
||||
const [showInfo, setShowInfo] = useState(false);
|
||||
|
||||
const selectedStyle = selectedLinks.some(
|
||||
(selectedLink) => selectedLink.id === link.id
|
||||
)
|
||||
@@ -122,7 +146,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative`}
|
||||
className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative group`}
|
||||
onClick={() =>
|
||||
selectable
|
||||
? handleCheckboxClick(link)
|
||||
@@ -137,51 +161,55 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
|
||||
!editMode && window.open(generateLinkHref(link, user), "_blank")
|
||||
}
|
||||
>
|
||||
<div className="relative rounded-t-2xl 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" ? null : (
|
||||
<div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
|
||||
)}
|
||||
{link.type !== "image" && (
|
||||
<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} />
|
||||
{show.image && previewAvailable(link) && (
|
||||
<div>
|
||||
<div className="relative rounded-t-2xl overflow-hidden">
|
||||
{previewAvailable(link) ? (
|
||||
<Image
|
||||
src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true&updatedAt=${link.updatedAt}`}
|
||||
width={1280}
|
||||
height={720}
|
||||
alt=""
|
||||
className={`rounded-t-2xl select-none object-cover z-10 ${imageHeightClass} w-full shadow opacity-80 scale-105`}
|
||||
style={show.icon ? { filter: "blur(1px)" } : undefined}
|
||||
draggable="false"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
target.style.display = "none";
|
||||
}}
|
||||
/>
|
||||
) : link.preview === "unavailable" ? null : (
|
||||
<div
|
||||
className={`duration-100 ${imageHeightClass} 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 rounded-md">
|
||||
<LinkIcon link={link} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{link.preview !== "unavailable" && (
|
||||
<hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
|
||||
<hr className="divider my-0 border-t border-neutral-content h-[1px]" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-3 flex flex-col gap-2">
|
||||
<p className="hyphens-auto w-full pr-9 text-primary text-sm">
|
||||
{unescapeString(link.name)}
|
||||
</p>
|
||||
<div className="p-3 flex flex-col gap-2 h-full min-h-14">
|
||||
{show.name && (
|
||||
<p className="hyphens-auto w-full text-primary text-sm">
|
||||
{unescapeString(link.name)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<LinkTypeBadge link={link} />
|
||||
{show.link && <LinkTypeBadge link={link} />}
|
||||
|
||||
{link.description && (
|
||||
<p className="hyphens-auto text-sm">
|
||||
{show.description && link.description && (
|
||||
<p className={clsx("hyphens-auto text-sm w-full")}>
|
||||
{unescapeString(link.description)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{link.tags && link.tags[0] && (
|
||||
{show.tags && link.tags && link.tags[0] && (
|
||||
<div className="flex gap-1 items-center flex-wrap">
|
||||
{link.tags.map((e, i) => (
|
||||
<Link
|
||||
@@ -199,77 +227,26 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
|
||||
)}
|
||||
</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">
|
||||
{collection && <LinkCollection link={link} collection={collection} />}
|
||||
<LinkDate link={link} />
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-between items-center text-xs text-neutral px-3 pb-1 w-full gap-x-2">
|
||||
{!isPublic && show.collection && (
|
||||
<div className="cursor-pointer truncate">
|
||||
<LinkCollection link={link} collection={collection} />
|
||||
</div>
|
||||
)}
|
||||
{show.date && <LinkDate link={link} />}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showInfo && (
|
||||
<div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
|
||||
<div
|
||||
onClick={() => setShowInfo(!showInfo)}
|
||||
className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
|
||||
>
|
||||
<i className="bi-x text-neutral text-2xl"></i>
|
||||
</div>
|
||||
<p className="text-neutral text-lg font-semibold">
|
||||
{t("description")}
|
||||
</p>
|
||||
|
||||
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
||||
<p>
|
||||
{link.description ? (
|
||||
unescapeString(link.description)
|
||||
) : (
|
||||
<span className="text-neutral text-sm">
|
||||
{t("no_description")}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{link.tags && link.tags[0] && (
|
||||
<>
|
||||
<p className="text-neutral text-lg mt-3 font-semibold">
|
||||
{t("tags")}
|
||||
</p>
|
||||
|
||||
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
||||
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<LinkActions
|
||||
link={link}
|
||||
collection={collection}
|
||||
position={
|
||||
link.preview !== "unavailable"
|
||||
? "top-[10.75rem] right-3"
|
||||
: "top-[.75rem] right-3"
|
||||
}
|
||||
toggleShowInfo={() => setShowInfo(!showInfo)}
|
||||
linkInfo={showInfo}
|
||||
flipDropdown={flipDropdown}
|
||||
/>
|
||||
{/* Overlay on hover */}
|
||||
<div className="absolute pointer-events-none top-0 left-0 right-0 bottom-0 bg-base-100 bg-opacity-0 group-hover:bg-opacity-20 group-focus-within:opacity-20 rounded-2xl duration-100"></div>
|
||||
<LinkActions link={link} collection={collection} />
|
||||
{!isPublic && <LinkPin link={link} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+13
-16
@@ -32,28 +32,25 @@ export default function Modal({
|
||||
return (
|
||||
<Drawer.Root
|
||||
open={drawerIsOpen}
|
||||
onClose={() => dismissible && setTimeout(() => toggleModal(), 100)}
|
||||
onClose={() => dismissible && setDrawerIsOpen(false)}
|
||||
onAnimationEnd={(isOpen) => !isOpen && toggleModal()}
|
||||
dismissible={dismissible}
|
||||
>
|
||||
<Drawer.Portal>
|
||||
<Drawer.Overlay className="fixed inset-0 bg-black/40" />
|
||||
<ClickAwayHandler
|
||||
onClickOutside={() => dismissible && setDrawerIsOpen(false)}
|
||||
>
|
||||
<Drawer.Content className="flex flex-col rounded-t-2xl min-h-max mt-24 fixed bottom-0 left-0 right-0 z-30">
|
||||
<Drawer.Content className="flex flex-col rounded-t-2xl h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30">
|
||||
<div
|
||||
className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
|
||||
data-testid="mobile-modal-container"
|
||||
>
|
||||
<div
|
||||
className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
|
||||
data-testid="mobile-modal-container"
|
||||
>
|
||||
<div
|
||||
className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5"
|
||||
data-testid="mobile-modal-slider"
|
||||
/>
|
||||
className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5"
|
||||
data-testid="mobile-modal-slider"
|
||||
/>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
</Drawer.Content>
|
||||
</ClickAwayHandler>
|
||||
{children}
|
||||
</div>
|
||||
</Drawer.Content>
|
||||
</Drawer.Portal>
|
||||
</Drawer.Root>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import toast from "react-hot-toast";
|
||||
import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
|
||||
import {
|
||||
AccountSettings,
|
||||
CollectionIncludingMembersAndLinkCount,
|
||||
Member,
|
||||
} from "@/types/global";
|
||||
import getPublicUserData from "@/lib/client/getPublicUserData";
|
||||
import usePermissions from "@/hooks/usePermissions";
|
||||
import ProfilePhoto from "../ProfilePhoto";
|
||||
@@ -11,6 +15,8 @@ import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import { useUpdateCollection } from "@/hooks/store/collections";
|
||||
import { useUser } from "@/hooks/store/user";
|
||||
import CopyButton from "../CopyButton";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
@@ -40,6 +46,7 @@ export default function EditCollectionSharingModal({
|
||||
|
||||
await updateCollection.mutateAsync(collection, {
|
||||
onSettled: (data, error) => {
|
||||
setSubmitLoader(false);
|
||||
toast.dismiss(load);
|
||||
|
||||
if (error) {
|
||||
@@ -50,8 +57,6 @@ export default function EditCollectionSharingModal({
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
setSubmitLoader(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -62,17 +67,11 @@ export default function EditCollectionSharingModal({
|
||||
|
||||
const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
|
||||
|
||||
const [memberUsername, setMemberUsername] = useState("");
|
||||
const [memberIdentifier, setMemberIdentifier] = useState("");
|
||||
|
||||
const [collectionOwner, setCollectionOwner] = useState({
|
||||
id: null as unknown as number,
|
||||
name: "",
|
||||
username: "",
|
||||
image: "",
|
||||
archiveAsScreenshot: undefined as unknown as boolean,
|
||||
archiveAsMonolith: undefined as unknown as boolean,
|
||||
archiveAsPDF: undefined as unknown as boolean,
|
||||
});
|
||||
const [collectionOwner, setCollectionOwner] = useState<
|
||||
Partial<AccountSettings>
|
||||
>({});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchOwner = async () => {
|
||||
@@ -93,19 +92,25 @@ export default function EditCollectionSharingModal({
|
||||
members: [...collection.members, newMember],
|
||||
});
|
||||
|
||||
setMemberUsername("");
|
||||
setMemberIdentifier("");
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
|
||||
|
||||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin">
|
||||
{permissions === true ? t("share_and_collaborate") : t("team")}
|
||||
{permissions === true && !isPublicRoute
|
||||
? t("share_and_collaborate")
|
||||
: t("team")}
|
||||
</p>
|
||||
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
{permissions === true && (
|
||||
{permissions === true && !isPublicRoute && (
|
||||
<div>
|
||||
<p>{t("make_collection_public")}</p>
|
||||
|
||||
@@ -132,43 +137,35 @@ export default function EditCollectionSharingModal({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{collection.isPublic ? (
|
||||
<div className={permissions === true ? "pl-5" : ""}>
|
||||
<p className="mb-2">{t("sharable_link_guide")}</p>
|
||||
<div
|
||||
onClick={() => {
|
||||
try {
|
||||
navigator.clipboard
|
||||
.writeText(publicCollectionURL)
|
||||
.then(() => toast.success(t("copied")));
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}}
|
||||
className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border outline-none hover:border-primary dark:hover:border-primary duration-100 cursor-text"
|
||||
>
|
||||
{collection.isPublic && (
|
||||
<div>
|
||||
<p className="mb-2">{t("sharable_link")}</p>
|
||||
<div className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border flex items-center gap-2 justify-between">
|
||||
{publicCollectionURL}
|
||||
<CopyButton text={publicCollectionURL} />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
)}
|
||||
|
||||
{permissions === true && <div className="divider my-3"></div>}
|
||||
{permissions === true && !isPublicRoute && (
|
||||
<div className="divider my-3"></div>
|
||||
)}
|
||||
|
||||
{permissions === true && (
|
||||
{permissions === true && !isPublicRoute && (
|
||||
<>
|
||||
<p>{t("members")}</p>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<TextInput
|
||||
value={memberUsername || ""}
|
||||
value={memberIdentifier || ""}
|
||||
className="bg-base-200"
|
||||
placeholder={t("members_username_placeholder")}
|
||||
onChange={(e) => setMemberUsername(e.target.value)}
|
||||
placeholder={t("add_member_placeholder")}
|
||||
onChange={(e) => setMemberIdentifier(e.target.value)}
|
||||
onKeyDown={(e) =>
|
||||
e.key === "Enter" &&
|
||||
addMemberToCollection(
|
||||
user.username as string,
|
||||
memberUsername || "",
|
||||
user,
|
||||
memberIdentifier.replace(/^@/, "") || "",
|
||||
collection,
|
||||
setMemberState,
|
||||
t
|
||||
@@ -179,8 +176,8 @@ export default function EditCollectionSharingModal({
|
||||
<div
|
||||
onClick={() =>
|
||||
addMemberToCollection(
|
||||
user.username as string,
|
||||
memberUsername || "",
|
||||
user,
|
||||
memberIdentifier.replace(/^@/, "") || "",
|
||||
collection,
|
||||
setMemberState,
|
||||
t
|
||||
@@ -266,7 +263,7 @@ export default function EditCollectionSharingModal({
|
||||
</div>
|
||||
|
||||
<div className={"flex items-center gap-2"}>
|
||||
{permissions === true ? (
|
||||
{permissions === true && !isPublicRoute ? (
|
||||
<div className="dropdown dropdown-bottom dropdown-end">
|
||||
<div
|
||||
tabIndex={0}
|
||||
@@ -427,7 +424,7 @@ export default function EditCollectionSharingModal({
|
||||
</p>
|
||||
)}
|
||||
|
||||
{permissions === true && (
|
||||
{permissions === true && !isPublicRoute && (
|
||||
<i
|
||||
className={
|
||||
"bi-x text-xl btn btn-sm btn-square btn-ghost text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
|
||||
@@ -458,7 +455,7 @@ export default function EditCollectionSharingModal({
|
||||
</>
|
||||
)}
|
||||
|
||||
{permissions === true && (
|
||||
{permissions === true && !isPublicRoute && (
|
||||
<button
|
||||
className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto mt-3"
|
||||
onClick={submit}
|
||||
|
||||
@@ -0,0 +1,131 @@
|
||||
import toast from "react-hot-toast";
|
||||
import Modal from "../Modal";
|
||||
import TextInput from "../TextInput";
|
||||
import { FormEvent, useState } from "react";
|
||||
import { useTranslation, Trans } from "next-i18next";
|
||||
import { useAddUser } from "@/hooks/store/admin/users";
|
||||
import Link from "next/link";
|
||||
import { signIn } from "next-auth/react";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
};
|
||||
|
||||
type FormData = {
|
||||
username?: string;
|
||||
email?: string;
|
||||
invite: boolean;
|
||||
};
|
||||
|
||||
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
|
||||
|
||||
export default function InviteModal({ onClose }: Props) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const addUser = useAddUser();
|
||||
|
||||
const [form, setForm] = useState<FormData>({
|
||||
username: emailEnabled ? undefined : "",
|
||||
email: emailEnabled ? "" : undefined,
|
||||
invite: true,
|
||||
});
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
async function submit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!submitLoader) {
|
||||
const checkFields = () => {
|
||||
if (emailEnabled) {
|
||||
return form.email !== "";
|
||||
} else {
|
||||
return form.username !== "";
|
||||
}
|
||||
};
|
||||
|
||||
if (checkFields()) {
|
||||
setSubmitLoader(true);
|
||||
|
||||
await addUser.mutateAsync(form, {
|
||||
onSettled: () => {
|
||||
setSubmitLoader(false);
|
||||
},
|
||||
onSuccess: async () => {
|
||||
await signIn("invite", {
|
||||
email: form.email,
|
||||
callbackUrl: "/member-onboarding",
|
||||
redirect: false,
|
||||
});
|
||||
onClose();
|
||||
},
|
||||
});
|
||||
} else {
|
||||
toast.error(t("fill_all_fields_error"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin">{t("invite_user")}</p>
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
<p className="mb-3">{t("invite_user_desc")}</p>
|
||||
<form onSubmit={submit}>
|
||||
{emailEnabled ? (
|
||||
<div>
|
||||
<TextInput
|
||||
placeholder={t("placeholder_email")}
|
||||
className="bg-base-200"
|
||||
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
||||
value={form.email}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<p className="mb-2">
|
||||
{t("username")}{" "}
|
||||
{emailEnabled && (
|
||||
<span className="text-xs text-neutral">{t("optional")}</span>
|
||||
)}
|
||||
</p>
|
||||
<TextInput
|
||||
placeholder={t("placeholder_john")}
|
||||
className="bg-base-200"
|
||||
onChange={(e) => setForm({ ...form, username: e.target.value })}
|
||||
value={form.username}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div role="note" className="alert alert-note mt-5">
|
||||
<i className="bi-exclamation-triangle text-xl" />
|
||||
<span>
|
||||
<p>{t("invite_user_note")}</p>
|
||||
<p className="mb-1">
|
||||
{t("invite_user_price", {
|
||||
price: 4,
|
||||
priceAnnual: 36,
|
||||
})}
|
||||
</p>
|
||||
<Link
|
||||
href="https://docs.linkwarden.app/billing/seats#how-seats-affect-billing"
|
||||
className="font-semibold whitespace-nowrap hover:opacity-80 duration-100"
|
||||
target="_blank"
|
||||
>
|
||||
{t("learn_more")} <i className="bi-box-arrow-up-right"></i>
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center mt-5">
|
||||
<button
|
||||
className="btn btn-accent dark:border-violet-400 text-white ml-auto"
|
||||
type="submit"
|
||||
>
|
||||
{t("send_invitation")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
import React, { useState } from "react";
|
||||
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import { useDeleteLink } from "@/hooks/store/links";
|
||||
import Drawer from "../Drawer";
|
||||
import LinkDetails from "../LinkDetails";
|
||||
import Link from "next/link";
|
||||
import usePermissions from "@/hooks/usePermissions";
|
||||
import { useRouter } from "next/router";
|
||||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import toast from "react-hot-toast";
|
||||
import clsx from "clsx";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
onDelete: Function;
|
||||
onUpdateArchive: Function;
|
||||
onPin: Function;
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
activeMode?: "view" | "edit";
|
||||
};
|
||||
|
||||
export default function LinkModal({
|
||||
onClose,
|
||||
onDelete,
|
||||
onUpdateArchive,
|
||||
onPin,
|
||||
link,
|
||||
activeMode,
|
||||
}: Props) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const permissions = usePermissions(link.collection.id as number);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
|
||||
|
||||
const deleteLink = useDeleteLink();
|
||||
|
||||
const [mode, setMode] = useState<"view" | "edit">(activeMode || "view");
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
toggleDrawer={onClose}
|
||||
className="sm:h-screen items-center relative"
|
||||
>
|
||||
<div className="absolute top-3 left-0 right-0 flex justify-between px-3">
|
||||
<div
|
||||
className="bi-x text-xl btn btn-sm btn-circle text-base-content opacity-50 hover:opacity-100 z-10"
|
||||
onClick={() => onClose()}
|
||||
></div>
|
||||
|
||||
{(permissions === true || permissions?.canUpdate) && !isPublicRoute && (
|
||||
<div className="flex gap-1 h-8 rounded-full bg-neutral-content bg-opacity-50 text-base-content p-1 text-xs duration-100 select-none z-10">
|
||||
<div
|
||||
className={clsx(
|
||||
"py-1 px-2 cursor-pointer duration-100 rounded-full font-semibold",
|
||||
mode === "view" && "bg-primary bg-opacity-50"
|
||||
)}
|
||||
onClick={() => {
|
||||
setMode("view");
|
||||
}}
|
||||
>
|
||||
View
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"py-1 px-2 cursor-pointer duration-100 rounded-full font-semibold",
|
||||
mode === "edit" && "bg-primary bg-opacity-50"
|
||||
)}
|
||||
onClick={() => {
|
||||
setMode("edit");
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
{!isPublicRoute && (
|
||||
<div className={`dropdown dropdown-end z-20`}>
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
onMouseDown={dropdownTriggerer}
|
||||
className="btn btn-sm btn-circle text-base-content opacity-50 hover:opacity-100 z-10"
|
||||
>
|
||||
<i title="More" className="bi-three-dots text-xl" />
|
||||
</div>
|
||||
<ul
|
||||
className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box`}
|
||||
>
|
||||
{
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
onPin();
|
||||
}}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
{link?.pinnedBy && link.pinnedBy[0]
|
||||
? t("unpin")
|
||||
: t("pin_to_dashboard")}
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
{link.type === "url" &&
|
||||
(permissions === true || permissions?.canUpdate) && (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
onUpdateArchive();
|
||||
}}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
{t("refresh_preserved_formats")}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
{(permissions === true || permissions?.canDelete) && (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={async (e) => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
console.log(e.shiftKey);
|
||||
if (e.shiftKey) {
|
||||
const load = toast.loading(t("deleting"));
|
||||
|
||||
await deleteLink.mutateAsync(link.id as number, {
|
||||
onSettled: (data, error) => {
|
||||
toast.dismiss(load);
|
||||
|
||||
if (error) {
|
||||
toast.error(error.message);
|
||||
} else {
|
||||
toast.success(t("deleted"));
|
||||
}
|
||||
},
|
||||
});
|
||||
onClose();
|
||||
} else {
|
||||
onDelete();
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
{t("delete")}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{link.url && (
|
||||
<Link
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
className="bi-box-arrow-up-right btn-circle text-base-content opacity-50 hover:opacity-100 btn btn-sm select-none z-10"
|
||||
></Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<LinkDetails
|
||||
activeLink={link}
|
||||
className="sm:mt-0 -mt-11"
|
||||
mode={mode}
|
||||
setMode={(mode: "view" | "edit") => setMode(mode)}
|
||||
onUpdateArchive={onUpdateArchive}
|
||||
/>
|
||||
</div>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import React, { useState } from "react";
|
||||
import Modal from "../Modal";
|
||||
import Button from "../ui/Button";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
submit: Function;
|
||||
};
|
||||
|
||||
export default function SurveyModal({ onClose, submit }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const [referer, setReferrer] = useState("rather_not_say");
|
||||
const [other, setOther] = useState("");
|
||||
|
||||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin">{t("quick_survey")}</p>
|
||||
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<p>{t("how_did_you_discover_linkwarden")}</p>
|
||||
|
||||
<select
|
||||
onChange={(e) => {
|
||||
setReferrer(e.target.value);
|
||||
setOther("");
|
||||
}}
|
||||
className="select border border-neutral-content focus:outline-none focus:border-primary duration-100 w-full bg-base-200 rounded-[0.375rem] min-h-0 h-[2.625rem] leading-4 p-2"
|
||||
>
|
||||
<option value="rather_not_say">{t("rather_not_say")}</option>
|
||||
<option value="search_engine">{t("search_engine")}</option>
|
||||
<option value="people_recommendation">
|
||||
{t("people_recommendation")}
|
||||
</option>
|
||||
<option value="reddit">{t("reddit")}</option>
|
||||
<option value="github">{t("github")}</option>
|
||||
<option value="twitter">{t("twitter")}</option>
|
||||
<option value="mastodon">{t("mastodon")}</option>
|
||||
<option value="lemmy">{t("lemmy")}</option>
|
||||
<option value="other">{t("other")}</option>
|
||||
</select>
|
||||
|
||||
{referer === "other" && (
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t("please_specify")}
|
||||
onChange={(e) => {
|
||||
setOther(e.target.value);
|
||||
}}
|
||||
value={other}
|
||||
className="input border border-neutral-content focus:border-primary focus:outline-none duration-100 w-full bg-base-200 rounded-[0.375rem] min-h-0 h-[2.625rem] leading-4 p-2"
|
||||
/>
|
||||
)}
|
||||
|
||||
<Button
|
||||
className="ml-auto mt-3"
|
||||
intent="accent"
|
||||
onClick={() => submit(referer, other)}
|
||||
>
|
||||
{t("submit")}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -60,7 +60,7 @@ export default function ProfileDropdown() {
|
||||
})}
|
||||
</div>
|
||||
</li>
|
||||
{isAdmin ? (
|
||||
{isAdmin && (
|
||||
<li>
|
||||
<Link
|
||||
href="/admin"
|
||||
@@ -72,7 +72,7 @@ export default function ProfileDropdown() {
|
||||
{t("server_administration")}
|
||||
</Link>
|
||||
</li>
|
||||
) : null}
|
||||
)}
|
||||
<li>
|
||||
<div
|
||||
onClick={() => {
|
||||
|
||||
+127
-52
@@ -1,7 +1,8 @@
|
||||
import React, { Dispatch, SetStateAction, useEffect } from "react";
|
||||
import useLocalSettingsStore from "@/store/localSettings";
|
||||
|
||||
import { ViewMode } from "@/types/global";
|
||||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
viewMode: ViewMode;
|
||||
@@ -9,64 +10,138 @@ type Props = {
|
||||
};
|
||||
|
||||
export default function ViewDropdown({ viewMode, setViewMode }: Props) {
|
||||
const { updateSettings } = useLocalSettingsStore();
|
||||
|
||||
const onChangeViewMode = (
|
||||
e: React.MouseEvent<HTMLButtonElement>,
|
||||
viewMode: ViewMode
|
||||
) => {
|
||||
setViewMode(viewMode);
|
||||
};
|
||||
const { settings, updateSettings } = useLocalSettingsStore((state) => state);
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
updateSettings({ viewMode });
|
||||
}, [viewMode]);
|
||||
}, [viewMode, updateSettings]);
|
||||
|
||||
const onChangeViewMode = (mode: ViewMode) => {
|
||||
setViewMode(mode);
|
||||
updateSettings({ viewMode });
|
||||
};
|
||||
|
||||
const toggleShowSetting = (setting: keyof typeof settings.show) => {
|
||||
const newShowSettings = {
|
||||
...settings.show,
|
||||
[setting]: !settings.show[setting],
|
||||
};
|
||||
updateSettings({ show: newShowSettings });
|
||||
};
|
||||
|
||||
const onColumnsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
updateSettings({ columns: Number(e.target.value) });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-1 flex flex-row gap-1 border border-neutral-content rounded-[0.625rem]">
|
||||
<button
|
||||
onClick={(e) => onChangeViewMode(e, ViewMode.Card)}
|
||||
className={`btn btn-square btn-sm btn-ghost ${
|
||||
viewMode == ViewMode.Card
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
<div className="dropdown dropdown-bottom dropdown-end">
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
onMouseDown={dropdownTriggerer}
|
||||
className="btn btn-sm btn-square btn-ghost border-none"
|
||||
>
|
||||
<i className="bi-grid w-4 h-4 text-neutral"></i>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={(e) => onChangeViewMode(e, ViewMode.Masonry)}
|
||||
className={`btn btn-square btn-sm btn-ghost ${
|
||||
viewMode == ViewMode.Masonry
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
{viewMode === ViewMode.Card ? (
|
||||
<i className="bi-grid w-4 h-4 text-neutral"></i>
|
||||
) : viewMode === ViewMode.Masonry ? (
|
||||
<i className="bi-columns-gap w-4 h-4 text-neutral"></i>
|
||||
) : (
|
||||
<i className="bi-view-stacked w-4 h-4 text-neutral"></i>
|
||||
)}
|
||||
</div>
|
||||
<ul
|
||||
tabIndex={0}
|
||||
className="dropdown-content z-[30] menu shadow bg-base-200 min-w-52 border border-neutral-content rounded-xl mt-1"
|
||||
>
|
||||
<i className="bi bi-columns-gap w-4 h-4 text-neutral"></i>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={(e) => onChangeViewMode(e, ViewMode.List)}
|
||||
className={`btn btn-square btn-sm btn-ghost ${
|
||||
viewMode == ViewMode.List
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<i className="bi bi-view-stacked w-4 h-4 text-neutral"></i>
|
||||
</button>
|
||||
|
||||
{/* <button
|
||||
onClick={(e) => onChangeViewMode(e, ViewMode.Grid)}
|
||||
className={`btn btn-square btn-sm btn-ghost ${
|
||||
viewMode == ViewMode.Grid
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<i className="bi-columns-gap w-4 h-4 text-neutral"></i>
|
||||
</button> */}
|
||||
<p className="mb-1 text-sm text-neutral">{t("view")}</p>
|
||||
<div className="p-1 flex w-full justify-between gap-1 border border-neutral-content rounded-[0.625rem]">
|
||||
<button
|
||||
onClick={(e) => onChangeViewMode(ViewMode.Card)}
|
||||
className={`btn w-[31%] btn-sm btn-ghost ${
|
||||
viewMode === ViewMode.Card
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<i className="bi-grid text-lg text-neutral"></i>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => onChangeViewMode(ViewMode.Masonry)}
|
||||
className={`btn w-[31%] btn-sm btn-ghost ${
|
||||
viewMode === ViewMode.Masonry
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<i className="bi-columns-gap text-lg text-neutral"></i>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => onChangeViewMode(ViewMode.List)}
|
||||
className={`btn w-[31%] btn-sm btn-ghost ${
|
||||
viewMode === ViewMode.List
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<i className="bi-view-stacked text-lg text-neutral"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p className="mb-1 mt-2 text-sm text-neutral">{t("show")}</p>
|
||||
{Object.entries(settings.show)
|
||||
.filter((e) =>
|
||||
settings.viewMode === ViewMode.List // Hide tags, image, and description checkboxes in list view
|
||||
? e[0] !== "tags" && e[0] !== "image" && e[0] !== "description"
|
||||
: settings.viewMode === ViewMode.Card // Hide tags and description checkboxes in card view
|
||||
? e[0] !== "tags" && e[0] !== "description"
|
||||
: true
|
||||
)
|
||||
.map(([key, value]) => (
|
||||
<li key={key}>
|
||||
<label className="label cursor-pointer flex justify-start">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox checkbox-primary"
|
||||
checked={value}
|
||||
onChange={() =>
|
||||
toggleShowSetting(key as keyof typeof settings.show)
|
||||
}
|
||||
/>
|
||||
<span className="label-text whitespace-nowrap">{t(key)}</span>
|
||||
</label>
|
||||
</li>
|
||||
))}
|
||||
{settings.viewMode !== ViewMode.List && (
|
||||
<>
|
||||
<p className="mb-1 mt-2 text-sm text-neutral">
|
||||
{t("columns")}:{" "}
|
||||
{settings.columns === 0 ? t("default") : settings.columns}
|
||||
</p>
|
||||
<div>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max="8"
|
||||
value={settings.columns}
|
||||
onChange={(e) => onColumnsChange(e)}
|
||||
className="range range-xs range-primary"
|
||||
step="1"
|
||||
/>
|
||||
<div className="flex w-full justify-between px-2 text-xs text-neutral select-none">
|
||||
<span>|</span>
|
||||
<span>|</span>
|
||||
<span>|</span>
|
||||
<span>|</span>
|
||||
<span>|</span>
|
||||
<span>|</span>
|
||||
<span>|</span>
|
||||
<span>|</span>
|
||||
<span>|</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import clsx from "clsx";
|
||||
import React from "react";
|
||||
|
||||
type Props = {
|
||||
className?: string;
|
||||
vertical?: boolean;
|
||||
};
|
||||
|
||||
function Divider({ className, vertical = false }: Props) {
|
||||
return vertical ? (
|
||||
<hr className={clsx("border-neutral-content border-l h-full", className)} />
|
||||
) : (
|
||||
<hr className={clsx("border-neutral-content border-t", className)} />
|
||||
);
|
||||
}
|
||||
|
||||
export default Divider;
|
||||
Reference in New Issue
Block a user