aboutsummaryrefslogtreecommitdiffstats
path: root/apps/web/components
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/components')
-rw-r--r--apps/web/components/dashboard/bookmarks/AssetCard.tsx2
-rw-r--r--apps/web/components/dashboard/bookmarks/LinkCard.tsx2
-rw-r--r--apps/web/components/dashboard/bookmarks/TextCard.tsx1
-rw-r--r--apps/web/components/dashboard/preview/BookmarkPreview.tsx51
-rw-r--r--apps/web/components/dashboard/preview/EditableTitle.tsx165
-rw-r--r--apps/web/components/ui/action-button.tsx40
-rw-r--r--apps/web/components/ui/button.tsx27
7 files changed, 240 insertions, 48 deletions
diff --git a/apps/web/components/dashboard/bookmarks/AssetCard.tsx b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
index 3bda1ee8..ea0317aa 100644
--- a/apps/web/components/dashboard/bookmarks/AssetCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
@@ -80,7 +80,7 @@ export default function AssetCard({
return (
<BookmarkLayoutAdaptingCard
- title={bookmarkedAsset.content.fileName}
+ title={bookmarkedAsset.title ?? bookmarkedAsset.content.fileName}
footer={null}
bookmark={bookmarkedAsset}
className={className}
diff --git a/apps/web/components/dashboard/bookmarks/LinkCard.tsx b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
index 5c329424..6d51695d 100644
--- a/apps/web/components/dashboard/bookmarks/LinkCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
@@ -16,7 +16,7 @@ function LinkTitle({ bookmark }: { bookmark: ZBookmarkTypeLink }) {
const parsedUrl = new URL(link.url);
return (
<Link className="line-clamp-2" href={link.url} target="_blank">
- {link?.title ?? parsedUrl.host}
+ {bookmark.title ?? link?.title ?? parsedUrl.host}
</Link>
);
}
diff --git a/apps/web/components/dashboard/bookmarks/TextCard.tsx b/apps/web/components/dashboard/bookmarks/TextCard.tsx
index c715c8ab..e24108d2 100644
--- a/apps/web/components/dashboard/bookmarks/TextCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/TextCard.tsx
@@ -51,6 +51,7 @@ export default function TextCard({
setOpen={setPreviewModalOpen}
/>
<BookmarkLayoutAdaptingCard
+ title={bookmark.title}
content={
<Markdown className="prose dark:prose-invert">
{bookmarkedText.text}
diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
index 73e49376..93f14c64 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -24,6 +24,7 @@ import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
import ActionBar from "./ActionBar";
import { AssetContentSection } from "./AssetContentSection";
+import { EditableTitle } from "./EditableTitle";
import { NoteEditor } from "./NoteEditor";
import { TextContentSection } from "./TextContentSection";
@@ -62,37 +63,6 @@ function CreationTime({ createdAt }: { createdAt: Date }) {
);
}
-function LinkHeader({ bookmark }: { bookmark: ZBookmark }) {
- if (bookmark.content.type !== "link") {
- throw new Error("Unexpected content type");
- }
-
- const title = bookmark.content.title ?? bookmark.content.url;
-
- return (
- <div className="flex w-full flex-col items-center justify-center space-y-3">
- <Tooltip>
- <TooltipTrigger asChild>
- <p className="line-clamp-2 text-center text-lg">{title}</p>
- </TooltipTrigger>
- <TooltipPortal>
- <TooltipContent side="bottom" className="w-96">
- {title}
- </TooltipContent>
- </TooltipPortal>
- </Tooltip>
- <Link
- href={bookmark.content.url}
- className="mx-auto flex gap-2 text-gray-400"
- >
- <span className="my-auto">View Original</span>
- <ExternalLink />
- </Link>
- <Separator />
- </div>
- );
-}
-
export default function BookmarkPreview({
initialData,
}: {
@@ -131,17 +101,26 @@ export default function BookmarkPreview({
}
}
- const linkHeader = bookmark.content.type == "link" && (
- <LinkHeader bookmark={bookmark} />
- );
-
return (
<div className="grid h-full grid-rows-3 gap-2 overflow-hidden bg-background lg:grid-cols-3 lg:grid-rows-none">
<div className="row-span-2 h-full w-full overflow-auto p-2 md:col-span-2 lg:row-auto">
{isBookmarkStillCrawling(bookmark) ? <ContentLoading /> : content}
</div>
<div className="lg:col-span1 row-span-1 flex flex-col gap-4 overflow-auto bg-accent p-4 lg:row-auto">
- {linkHeader}
+ <div className="flex w-full flex-col items-center justify-center gap-y-2">
+ <EditableTitle bookmark={bookmark} />
+ {bookmark.content.type == "link" && (
+ <Link
+ href={bookmark.content.url}
+ className="flex items-center gap-2 text-gray-400"
+ >
+ <span>View Original</span>
+ <ExternalLink />
+ </Link>
+ )}
+ <Separator />
+ </div>
+
<CreationTime createdAt={bookmark.createdAt} />
<div className="flex gap-4">
<p className="text-sm text-gray-400">Tags</p>
diff --git a/apps/web/components/dashboard/preview/EditableTitle.tsx b/apps/web/components/dashboard/preview/EditableTitle.tsx
new file mode 100644
index 00000000..1500212d
--- /dev/null
+++ b/apps/web/components/dashboard/preview/EditableTitle.tsx
@@ -0,0 +1,165 @@
+import { useEffect, useRef, useState } from "react";
+import { ActionButtonWithTooltip } from "@/components/ui/action-button";
+import { ButtonWithTooltip } from "@/components/ui/button";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipPortal,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { toast } from "@/components/ui/use-toast";
+import { Check, Pencil, X } from "lucide-react";
+
+import { useUpdateBookmark } from "@hoarder/shared-react/hooks/bookmarks";
+import { ZBookmark } from "@hoarder/trpc/types/bookmarks";
+
+interface Props {
+ bookmarkId: string;
+ originalTitle: string | null;
+ setEditable: (editable: boolean) => void;
+}
+
+function EditMode({ bookmarkId, originalTitle, setEditable }: Props) {
+ const ref = useRef<HTMLDivElement>(null);
+
+ const { mutate: updateBookmark, isPending } = useUpdateBookmark({
+ onSuccess: () => {
+ toast({
+ description: "Title updated!",
+ });
+ },
+ });
+
+ useEffect(() => {
+ if (ref.current) {
+ ref.current.focus();
+ ref.current.textContent = originalTitle;
+ }
+ }, [ref]);
+
+ const onSave = () => {
+ let toSave: string | null = ref.current?.textContent ?? null;
+ if (originalTitle == toSave) {
+ // Nothing to do here
+ return;
+ }
+ if (toSave == "") {
+ toSave = null;
+ }
+ updateBookmark({
+ bookmarkId,
+ title: toSave,
+ });
+ setEditable(false);
+ };
+
+ return (
+ <div className="flex gap-3">
+ <div
+ ref={ref}
+ role="presentation"
+ className="p-2 text-center text-lg"
+ contentEditable={true}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ }
+ }}
+ />
+ <ActionButtonWithTooltip
+ tooltip="Save"
+ delayDuration={500}
+ size="none"
+ variant="ghost"
+ className="align-middle text-gray-400"
+ loading={isPending}
+ onClick={() => onSave()}
+ >
+ <Check className="size-4" />
+ </ActionButtonWithTooltip>
+ <ButtonWithTooltip
+ tooltip="Cancel"
+ delayDuration={500}
+ size="none"
+ variant="ghost"
+ className="align-middle text-gray-400"
+ onClick={() => {
+ setEditable(false);
+ }}
+ >
+ <X className="size-4" />
+ </ButtonWithTooltip>
+ </div>
+ );
+}
+
+function ViewMode({ originalTitle, setEditable }: Props) {
+ return (
+ <Tooltip delayDuration={500}>
+ <div className="flex items-center gap-3 text-center">
+ <TooltipTrigger asChild>
+ {originalTitle ? (
+ <p className="line-clamp-2 text-lg">{originalTitle}</p>
+ ) : (
+ <p className="text-lg italic text-gray-600">Untitled</p>
+ )}
+ </TooltipTrigger>
+ <ButtonWithTooltip
+ delayDuration={500}
+ tooltip="Edit title"
+ size="none"
+ variant="ghost"
+ className="align-middle text-gray-400"
+ onClick={() => {
+ setEditable(true);
+ }}
+ >
+ <Pencil className="size-4" />
+ </ButtonWithTooltip>
+ </div>
+ <TooltipPortal>
+ {originalTitle && (
+ <TooltipContent side="bottom" className="max-w-[40ch]">
+ {originalTitle}
+ </TooltipContent>
+ )}
+ </TooltipPortal>
+ </Tooltip>
+ );
+}
+
+export function EditableTitle({ bookmark }: { bookmark: ZBookmark }) {
+ const [editable, setEditable] = useState(false);
+
+ let title: string | null = null;
+ switch (bookmark.content.type) {
+ case "link":
+ title = bookmark.content.title ?? bookmark.content.url;
+ break;
+ case "text":
+ title = null;
+ break;
+ case "asset":
+ title = bookmark.content.fileName ?? null;
+ break;
+ }
+
+ title = bookmark.title ?? title;
+ if (title == "") {
+ title = null;
+ }
+
+ return editable ? (
+ <EditMode
+ bookmarkId={bookmark.id}
+ originalTitle={title}
+ setEditable={setEditable}
+ />
+ ) : (
+ <ViewMode
+ bookmarkId={bookmark.id}
+ originalTitle={title}
+ setEditable={setEditable}
+ />
+ );
+}
diff --git a/apps/web/components/ui/action-button.tsx b/apps/web/components/ui/action-button.tsx
index e9cdc3c9..2ac361f5 100644
--- a/apps/web/components/ui/action-button.tsx
+++ b/apps/web/components/ui/action-button.tsx
@@ -4,15 +4,20 @@ import { useClientConfig } from "@/lib/clientConfig";
import type { ButtonProps } from "./button";
import { Button } from "./button";
import LoadingSpinner from "./spinner";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipPortal,
+ TooltipTrigger,
+} from "./tooltip";
-const ActionButton = React.forwardRef<
- HTMLButtonElement,
- ButtonProps & {
- loading: boolean;
- spinner?: React.ReactNode;
- ignoreDemoMode?: boolean;
- }
->(
+interface ActionButtonProps extends ButtonProps {
+ loading: boolean;
+ spinner?: React.ReactNode;
+ ignoreDemoMode?: boolean;
+}
+
+const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
(
{ children, loading, spinner, disabled, ignoreDemoMode = false, ...props },
ref,
@@ -35,4 +40,21 @@ const ActionButton = React.forwardRef<
);
ActionButton.displayName = "ActionButton";
-export { ActionButton };
+const ActionButtonWithTooltip = React.forwardRef<
+ HTMLButtonElement,
+ ActionButtonProps & { tooltip: string; delayDuration?: number }
+>(({ tooltip, delayDuration, ...props }, ref) => {
+ return (
+ <Tooltip delayDuration={delayDuration}>
+ <TooltipTrigger>
+ <ActionButton ref={ref} {...props} />
+ </TooltipTrigger>
+ <TooltipPortal>
+ <TooltipContent>{tooltip}</TooltipContent>
+ </TooltipPortal>
+ </Tooltip>
+ );
+});
+ActionButtonWithTooltip.displayName = "ActionButtonWithTooltip";
+
+export { ActionButton, ActionButtonWithTooltip };
diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx
index 40794eb2..2d6dee6b 100644
--- a/apps/web/components/ui/button.tsx
+++ b/apps/web/components/ui/button.tsx
@@ -4,6 +4,13 @@ import { cn } from "@/lib/utils";
import { Slot } from "@radix-ui/react-slot";
import { cva } from "class-variance-authority";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipPortal,
+ TooltipTrigger,
+} from "./tooltip";
+
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
@@ -24,6 +31,7 @@ const buttonVariants = cva(
link: "text-primary underline-offset-4 hover:underline",
},
size: {
+ none: "",
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
@@ -57,4 +65,21 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
);
Button.displayName = "Button";
-export { Button, buttonVariants };
+const ButtonWithTooltip = React.forwardRef<
+ HTMLButtonElement,
+ ButtonProps & { tooltip: string; delayDuration?: number }
+>(({ tooltip, delayDuration, ...props }, ref) => {
+ return (
+ <Tooltip delayDuration={delayDuration}>
+ <TooltipTrigger>
+ <Button ref={ref} {...props} />
+ </TooltipTrigger>
+ <TooltipPortal>
+ <TooltipContent>{tooltip}</TooltipContent>
+ </TooltipPortal>
+ </Tooltip>
+ );
+});
+ButtonWithTooltip.displayName = "ButtonWithTooltip";
+
+export { Button, buttonVariants, ButtonWithTooltip };
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-29 16:53:42 +0000