- {filteredQueryResultsSelector.map((icon) => {
- const IconComponent = icon.Icon;
- return (
-
console.log(icon.name)}>
-
-
- );
- })}
+
+
setIconPicker(!iconPicker)}
+ className="btn btn-square w-20 h-20"
+ >
+ {iconName ? (
+
+ ) : !iconName && hideDefaultIcon ? (
+
{t("set_custom_icon")}
+ ) : (
+
+ )}
+ {iconPicker && (
+
setIconPicker(false)}
+ className={clsx(
+ className,
+ alignment || "lg:-translate-x-1/3 top-20 left-0"
+ )}
+ />
+ )}
);
};
diff --git a/components/IconPopover.tsx b/components/IconPopover.tsx
new file mode 100644
index 00000000..12086617
--- /dev/null
+++ b/components/IconPopover.tsx
@@ -0,0 +1,142 @@
+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 (
+
onClose()}
+ className={clsx(
+ className,
+ "fade-in bg-base-200 border border-neutral-content p-2 w-[22.5rem] rounded-lg shadow-md"
+ )}
+ >
+
+
+
setQuery(e.target.value)}
+ />
+
+
+
+
+
+
+ }
+ >
+ {t("reset_defaults")}
+
+
+
+ );
+};
+
+export default IconPopover;
diff --git a/components/InputSelect/CollectionSelection.tsx b/components/InputSelect/CollectionSelection.tsx
index 81bef390..f53df37f 100644
--- a/components/InputSelect/CollectionSelection.tsx
+++ b/components/InputSelect/CollectionSelection.tsx
@@ -16,6 +16,8 @@ type Props = {
}
| undefined;
creatable?: boolean;
+ autoFocus?: boolean;
+ onBlur?: any;
};
export default function CollectionSelection({
@@ -23,6 +25,8 @@ export default function CollectionSelection({
defaultValue,
showDefaultValue = true,
creatable = true,
+ autoFocus,
+ onBlur,
}: Props) {
const { data: collections = [] } = useCollections();
@@ -76,7 +80,7 @@ export default function CollectionSelection({
return (
{data.label}
@@ -104,6 +108,8 @@ export default function CollectionSelection({
onChange={onChange}
options={options}
styles={styles}
+ autoFocus={autoFocus}
+ onBlur={onBlur}
defaultValue={showDefaultValue ? defaultValue : null}
components={{
Option: customOption,
@@ -120,7 +126,9 @@ export default function CollectionSelection({
onChange={onChange}
options={options}
styles={styles}
+ autoFocus={autoFocus}
defaultValue={showDefaultValue ? defaultValue : null}
+ onBlur={onBlur}
components={{
Option: customOption,
}}
diff --git a/components/InputSelect/TagSelection.tsx b/components/InputSelect/TagSelection.tsx
index 65e74997..08460ea3 100644
--- a/components/InputSelect/TagSelection.tsx
+++ b/components/InputSelect/TagSelection.tsx
@@ -10,9 +10,16 @@ type Props = {
value: number;
label: string;
}[];
+ autoFocus?: boolean;
+ onBlur?: any;
};
-export default function TagSelection({ onChange, defaultValue }: Props) {
+export default function TagSelection({
+ onChange,
+ defaultValue,
+ autoFocus,
+ onBlur,
+}: Props) {
const { data: tags = [] } = useTags();
const [options, setOptions] = useState
([]);
@@ -35,6 +42,8 @@ export default function TagSelection({ onChange, defaultValue }: Props) {
styles={styles}
defaultValue={defaultValue}
isMulti
+ autoFocus={autoFocus}
+ onBlur={onBlur}
/>
);
}
diff --git a/components/InputSelect/styles.ts b/components/InputSelect/styles.ts
index 96aad6d9..f05f4a51 100644
--- a/components/InputSelect/styles.ts
+++ b/components/InputSelect/styles.ts
@@ -14,7 +14,7 @@ export const styles: StylesConfig = {
? "oklch(var(--p))"
: "oklch(var(--nc))",
},
- transition: "all 50ms",
+ transition: "all 100ms",
}),
control: (styles, state) => ({
...styles,
@@ -50,19 +50,28 @@ export const styles: StylesConfig = {
multiValue: (styles) => {
return {
...styles,
- backgroundColor: "#0ea5e9",
- color: "white",
+ backgroundColor: "oklch(var(--b2))",
+ color: "oklch(var(--bc))",
+ display: "flex",
+ alignItems: "center",
+ gap: "0.1rem",
+ marginRight: "0.4rem",
};
},
multiValueLabel: (styles) => ({
...styles,
- color: "white",
+ color: "oklch(var(--bc))",
}),
multiValueRemove: (styles) => ({
...styles,
+ height: "1.2rem",
+ width: "1.2rem",
+ borderRadius: "100px",
+ transition: "all 100ms",
+ color: "oklch(var(--w))",
":hover": {
- color: "white",
- backgroundColor: "#38bdf8",
+ color: "red",
+ backgroundColor: "oklch(var(--nc))",
},
}),
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
diff --git a/components/LinkDetails.tsx b/components/LinkDetails.tsx
index 0f237ca2..5c71ff78 100644
--- a/components/LinkDetails.tsx
+++ b/components/LinkDetails.tsx
@@ -4,31 +4,63 @@ import {
ArchivedFormat,
} from "@/types/global";
import Link from "next/link";
-import { useSession } from "next-auth/react";
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 } from "@/hooks/store/links";
+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;
- link: LinkIncludingShortenedCollectionAndTags;
+ activeLink: LinkIncludingShortenedCollectionAndTags;
+ standalone?: boolean;
+ mode?: "view" | "edit";
+ setMode?: Function;
};
-export default function LinkDetails({ className, link }: Props) {
+export default function LinkDetails({
+ className,
+ activeLink,
+ standalone,
+ mode = "view",
+ setMode,
+}: Props) {
+ const [link, setLink] =
+ useState(activeLink);
+
+ useEffect(() => {
+ setLink(activeLink);
+ }, [activeLink]);
+
+ const permissions = usePermissions(link.collection.id as number);
+
const { t } = useTranslation();
- const session = useSession();
const getLink = useGetLink();
const { data: user = {} } = useUser();
@@ -117,188 +149,498 @@ export default function LinkDetails({ className, link }: Props) {
clearInterval(interval);
}
};
- }, [link?.monolith]);
+ }, [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 (
-
-
-
- {link.name &&
{link.name}
}
-
- {link.url && (
- <>
-
-
-
{t("link")}
-
-
-
- )}
-
-
-
-
{t("collection")}
-
-
-
+
+
-
{link.collection.name}
-
-
-
-
-
+ {previewAvailable(link) ? (
+
{
+ const target = e.target as HTMLElement;
+ target.style.display = "none";
+ }}
+ />
+ ) : link.preview === "unavailable" ? (
+
+ ) : (
+
+ )}
- {link.tags[0] && (
- <>
-
+ {!standalone && (permissions === true || permissions?.canUpdate) && (
+
+
+
+ setIconPopover(true)}
+ />
+
+ {iconPopover && (
+
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();
+ }}
+ />
)}
+ setIconPopover(true)} />
+
+ )}
+
+
+ {mode === "view" && (
+
+
+ {link.name || t("untitled")}
+
+
+ )}
+
+ {link.url && (
+ <>
+
+
+
{t("link")}
+
+
+
+ )}
+
+ {mode === "edit" && (
+ <>
+
+
+
+
+ {t("name")}
+
+
setLink({ ...link, name: e.target.value })}
+ placeholder={t("placeholder_example_link")}
+ className="bg-base-200"
+ />
+
+
+ )}
- {link.description && (
- <>
-
-
{t("notes")}
+
+
+ {t("collection")}
+
-
-
{link.description}
+ {mode === "view" ? (
+
+
+
{link.collection.name}
+
+ {link.collection.icon ? (
+
+ ) : (
+
+ )}
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+ {t("tags")}
+
+
+ {mode === "view" ? (
+
+ {link.tags[0] ? (
+ link.tags.map((tag) =>
+ isPublicRoute ? (
+
+ {tag.name}
+
+ ) : (
+
+ {tag.name}
+
+ )
+ )
+ ) : (
+
{t("no_tags")}
+ )}
+
+ ) : (
+
({
+ label: e.name,
+ value: e.id,
+ }))}
+ />
+ )}
+
+
+
+
+
+
+ {t("description")}
+
+
+ {mode === "view" ? (
+
+ {link.description ? (
+
{link.description}
+ ) : (
+
{t("no_description_provided")}
+ )}
+
+ ) : (
+