From 4f17ea61cbb11a72712a1ea8c98904a1cc513e41 Mon Sep 17 00:00:00 2001 From: Mohamed Bassem Date: Sun, 14 Apr 2024 00:51:56 +0300 Subject: feature(web): Allow changing the bookmark grid layout (#98) --- apps/web/app/layout.tsx | 16 ++- .../components/dashboard/bookmarks/AssetCard.tsx | 96 ++++++++------- .../dashboard/bookmarks/BookmarkCardSkeleton.tsx | 30 ----- .../bookmarks/BookmarkLayoutAdaptingCard.tsx | 131 +++++++++++++++++++++ .../dashboard/bookmarks/BookmarksGrid.tsx | 44 +++++-- .../components/dashboard/bookmarks/EditorCard.tsx | 9 +- .../components/dashboard/bookmarks/LinkCard.tsx | 125 +++++++++++--------- .../web/components/dashboard/bookmarks/TagList.tsx | 5 +- .../components/dashboard/bookmarks/TextCard.tsx | 54 +++++---- .../dashboard/preview/BookmarkPreview.tsx | 2 +- .../dashboard/sidebar/SidebarProfileOptions.tsx | 90 +++++++++++--- apps/web/components/ui/imageCard.tsx | 69 ----------- apps/web/lib/providers.tsx | 34 +++--- apps/web/lib/userLocalSettings/bookmarksLayout.tsx | 37 ++++++ apps/web/lib/userLocalSettings/types.ts | 24 ++++ .../web/lib/userLocalSettings/userLocalSettings.ts | 18 +++ apps/web/package.json | 2 +- 17 files changed, 519 insertions(+), 267 deletions(-) delete mode 100644 apps/web/components/dashboard/bookmarks/BookmarkCardSkeleton.tsx create mode 100644 apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx delete mode 100644 apps/web/components/ui/imageCard.tsx create mode 100644 apps/web/lib/userLocalSettings/bookmarksLayout.tsx create mode 100644 apps/web/lib/userLocalSettings/types.ts create mode 100644 apps/web/lib/userLocalSettings/userLocalSettings.ts (limited to 'apps') diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index f879780e..1beb4b5c 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -5,8 +5,14 @@ import "@hoarder/tailwind-config/globals.css"; import type { Viewport } from "next"; import React from "react"; +import { cookies } from "next/headers"; import { Toaster } from "@/components/ui/toaster"; import Providers from "@/lib/providers"; +import { + defaultUserLocalSettings, + parseUserLocalSettings, + USER_LOCAL_SETTINGS_COOKIE_NAME, +} from "@/lib/userLocalSettings/types"; import { getServerAuthSession } from "@/server/auth"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; @@ -45,7 +51,15 @@ export default async function RootLayout({ return ( - + {children} diff --git a/apps/web/components/dashboard/bookmarks/AssetCard.tsx b/apps/web/components/dashboard/bookmarks/AssetCard.tsx index 8997a7e2..3bda1ee8 100644 --- a/apps/web/components/dashboard/bookmarks/AssetCard.tsx +++ b/apps/web/components/dashboard/bookmarks/AssetCard.tsx @@ -3,12 +3,48 @@ import Image from "next/image"; import { isBookmarkStillTagging } from "@/lib/bookmarkUtils"; import { api } from "@/lib/trpc"; -import { cn } from "@/lib/utils"; -import type { ZBookmark } from "@hoarder/trpc/types/bookmarks"; +import type { + ZBookmark, + ZBookmarkTypeAsset, +} from "@hoarder/trpc/types/bookmarks"; -import BookmarkActionBar from "./BookmarkActionBar"; -import TagList from "./TagList"; +import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard"; + +function AssetImage({ + bookmark, + className, +}: { + bookmark: ZBookmarkTypeAsset; + className?: string; +}) { + const bookmarkedAsset = bookmark.content; + switch (bookmarkedAsset.assetType) { + case "image": { + return ( + asset

+ ); + } + case "pdf": { + return ( +