diff options
Diffstat (limited to 'apps/web/components')
3 files changed, 128 insertions, 23 deletions
diff --git a/apps/web/components/dashboard/ViewOptions.tsx b/apps/web/components/dashboard/ViewOptions.tsx index 6367421f..c86f43fb 100644 --- a/apps/web/components/dashboard/ViewOptions.tsx +++ b/apps/web/components/dashboard/ViewOptions.tsx @@ -1,6 +1,6 @@ "use client"; -import React from "react"; +import { createElement, useEffect, useState } from "react"; import { ButtonWithTooltip } from "@/components/ui/button"; import { DropdownMenu, @@ -9,14 +9,19 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; +import { Label } from "@/components/ui/label"; import { Slider } from "@/components/ui/slider"; +import { Switch } from "@/components/ui/switch"; +import { useTranslation } from "@/lib/i18n/client"; import { + useBookmarkDisplaySettings, useBookmarkLayout, useGridColumns, } from "@/lib/userLocalSettings/bookmarksLayout"; import { updateBookmarksLayout, updateGridColumns, + updateShowNotes, } from "@/lib/userLocalSettings/userLocalSettings"; import { Check, @@ -25,6 +30,7 @@ import { LayoutList, List, LucideIcon, + NotepadText, Settings, } from "lucide-react"; @@ -37,22 +43,17 @@ const iconMap: Record<LayoutType, LucideIcon> = { compact: List, }; -const layoutNames: Record<LayoutType, string> = { - masonry: "Masonry", - grid: "Grid", - list: "List", - compact: "Compact", -}; - export default function ViewOptions() { + const { t } = useTranslation(); const layout = useBookmarkLayout(); const gridColumns = useGridColumns(); - const [tempColumns, setTempColumns] = React.useState(gridColumns); + const { showNotes } = useBookmarkDisplaySettings(); + const [tempColumns, setTempColumns] = useState(gridColumns); const showColumnSlider = layout === "grid" || layout === "masonry"; // Update temp value when actual value changes - React.useEffect(() => { + useEffect(() => { setTempColumns(gridColumns); }, [gridColumns]); @@ -60,7 +61,7 @@ export default function ViewOptions() { <DropdownMenu> <DropdownMenuTrigger asChild> <ButtonWithTooltip - tooltip="View Options" + tooltip={t("view_options.title")} delayDuration={100} variant="ghost" > @@ -68,7 +69,9 @@ export default function ViewOptions() { </ButtonWithTooltip> </DropdownMenuTrigger> <DropdownMenuContent className="w-56"> - <div className="px-2 py-1.5 text-sm font-semibold">Layout</div> + <div className="px-2 py-1.5 text-sm font-semibold"> + {t("view_options.layout")} + </div> {(Object.keys(iconMap) as LayoutType[]).map((key) => ( <DropdownMenuItem key={key} @@ -76,8 +79,8 @@ export default function ViewOptions() { onClick={async () => await updateBookmarksLayout(key as LayoutType)} > <div className="flex items-center gap-2"> - {React.createElement(iconMap[key as LayoutType], { size: 18 })} - <span>{layoutNames[key]}</span> + {createElement(iconMap[key as LayoutType], { size: 18 })} + <span>{t(`layouts.${key}`)}</span> </div> {layout === key && <Check className="ml-2 size-4" />} </DropdownMenuItem> @@ -88,7 +91,9 @@ export default function ViewOptions() { <DropdownMenuSeparator /> <div className="px-2 py-3"> <div className="mb-2 flex items-center justify-between"> - <span className="text-sm font-semibold">Columns</span> + <span className="text-sm font-semibold"> + {t("view_options.columns")} + </span> <span className="text-sm text-muted-foreground"> {tempColumns} </span> @@ -109,6 +114,28 @@ export default function ViewOptions() { </div> </> )} + + <DropdownMenuSeparator /> + <div className="px-2 py-1.5 text-sm font-semibold"> + {t("view_options.display_options")} + </div> + + <div className="space-y-3 px-2 py-2"> + <div className="flex items-center justify-between"> + <Label + htmlFor="show-notes" + className="flex cursor-pointer items-center gap-2 text-sm" + > + <NotepadText size={16} /> + <span>{t("view_options.show_note_previews")}</span> + </Label> + <Switch + id="show-notes" + checked={showNotes} + onCheckedChange={updateShowNotes} + /> + </div> + </div> </DropdownMenuContent> </DropdownMenu> ); diff --git a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx index 4b511a3c..26c1c72b 100644 --- a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx +++ b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx @@ -1,10 +1,14 @@ +"use client"; + import type { BookmarksLayoutTypes } from "@/lib/userLocalSettings/types"; -import React, { useEffect, useState } from "react"; +import type { ReactNode } from "react"; +import { useEffect, useState } from "react"; import Image from "next/image"; import Link from "next/link"; import useBulkActionsStore from "@/lib/bulkActions"; import { bookmarkLayoutSwitch, + useBookmarkDisplaySettings, useBookmarkLayout, } from "@/lib/userLocalSettings/bookmarksLayout"; import { cn } from "@/lib/utils"; @@ -17,14 +21,15 @@ import { isBookmarkStillTagging } from "@karakeep/shared/utils/bookmarkUtils"; import BookmarkActionBar from "./BookmarkActionBar"; import BookmarkFormattedCreatedAt from "./BookmarkFormattedCreatedAt"; +import { NotePreview } from "./NotePreview"; import TagList from "./TagList"; interface Props { bookmark: ZBookmark; - image: (layout: BookmarksLayoutTypes, className: string) => React.ReactNode; - title?: React.ReactNode; - content?: React.ReactNode; - footer?: React.ReactNode; + image: (layout: BookmarksLayoutTypes, className: string) => ReactNode; + title?: ReactNode; + content?: ReactNode; + footer?: ReactNode; className?: string; fitHeight?: boolean; wrapTags: boolean; @@ -34,7 +39,7 @@ function BottomRow({ footer, bookmark, }: { - footer?: React.ReactNode; + footer?: ReactNode; bookmark: ZBookmark; }) { return ( @@ -112,6 +117,9 @@ function ListView({ footer, className, }: Props) { + const { showNotes } = useBookmarkDisplaySettings(); + const note = showNotes ? bookmark.note?.trim() : undefined; + return ( <div className={cn( @@ -131,6 +139,7 @@ function ListView({ </div> )} {content && <div className="shrink-1 overflow-hidden">{content}</div>} + {note && <NotePreview note={note} bookmarkId={bookmark.id} />} <div className="flex shrink-0 flex-wrap gap-1 overflow-hidden"> <TagList bookmark={bookmark} @@ -155,7 +164,9 @@ function GridView({ layout, fitHeight = false, }: Props & { layout: BookmarksLayoutTypes }) { - const img = image("grid", "h-56 min-h-56 w-full object-cover rounded-t-lg"); + const { showNotes } = useBookmarkDisplaySettings(); + const note = showNotes ? bookmark.note?.trim() : undefined; + const img = image("grid", "h-52 min-h-52 w-full object-cover rounded-t-lg"); return ( <div @@ -166,7 +177,7 @@ function GridView({ )} > <MultiBookmarkSelector bookmark={bookmark} /> - {img && <div className="h-56 w-full shrink-0 overflow-hidden">{img}</div>} + {img && <div className="h-52 w-full shrink-0 overflow-hidden">{img}</div>} <div className="flex h-full flex-col justify-between gap-2 overflow-hidden p-2"> <div className="grow-1 flex flex-col gap-2 overflow-hidden"> {title && ( @@ -175,6 +186,7 @@ function GridView({ </div> )} {content && <div className="shrink-1 overflow-hidden">{content}</div>} + {note && <NotePreview note={note} bookmarkId={bookmark.id} />} <div className="flex shrink-0 flex-wrap gap-1 overflow-hidden"> <TagList className={wrapTags ? undefined : "h-full"} diff --git a/apps/web/components/dashboard/bookmarks/NotePreview.tsx b/apps/web/components/dashboard/bookmarks/NotePreview.tsx new file mode 100644 index 00000000..c32c85a3 --- /dev/null +++ b/apps/web/components/dashboard/bookmarks/NotePreview.tsx @@ -0,0 +1,66 @@ +"use client"; + +import { useState } from "react"; +import Link from "next/link"; +import { Button } from "@/components/ui/button"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { useTranslation } from "@/lib/i18n/client"; +import { cn } from "@/lib/utils"; +import { ExternalLink, NotepadText } from "lucide-react"; + +interface NotePreviewProps { + note: string; + bookmarkId: string; + className?: string; +} + +export function NotePreview({ note, bookmarkId, className }: NotePreviewProps) { + const { t } = useTranslation(); + const [isOpen, setIsOpen] = useState(false); + + if (!note?.trim()) { + return null; + } + + return ( + <Popover open={isOpen} onOpenChange={setIsOpen}> + <PopoverTrigger asChild> + <div + className={cn( + "flex cursor-pointer items-center gap-1.5 text-sm font-light italic text-gray-500 dark:text-gray-400", + className, + )} + > + <NotepadText className="size-5 shrink-0" /> + <div className="line-clamp-2 min-w-0 flex-1 overflow-hidden text-wrap break-words"> + {note} + </div> + </div> + </PopoverTrigger> + <PopoverContent className="w-96 max-w-[calc(100vw-2rem)]" align="start"> + <div className="space-y-3"> + <div className="max-h-60 overflow-y-auto whitespace-pre-wrap break-words text-sm text-gray-700 dark:text-gray-300"> + {note} + </div> + <div className="flex justify-end"> + <Link href={`/dashboard/preview/${bookmarkId}`}> + <Button + variant="outline" + size="sm" + className="gap-2" + onClick={() => setIsOpen(false)} + > + {t("actions.edit_notes")} + <ExternalLink className="size-4" /> + </Button> + </Link> + </div> + </div> + </PopoverContent> + </Popover> + ); +} |