diff --git a/src/layouts/bookmark/bookmark-grid.tsx b/src/layouts/bookmark/bookmark-grid.tsx index 36682b9f8..abec3fd38 100644 --- a/src/layouts/bookmark/bookmark-grid.tsx +++ b/src/layouts/bookmark/bookmark-grid.tsx @@ -195,6 +195,11 @@ export function BookmarkGrid({ const isAutoRows = isModal || !rowsCount + const sortableIds = useMemo( + () => displayedBookmarks.filter(Boolean).map((bookmark) => bookmark?.id || ''), + [displayedBookmarks] + ) + return (
bookmark?.id || '')} + items={sortableIds} strategy={rectSortingStrategy} > {displayedBookmarks.map((bookmark, i) => bookmark ? (
([]) - const sensors = useSensors( - useSensor(PointerSensor, { - activationConstraint: { - distance: 5, - }, - }) - ) + const sensors = useSensors(useSensor(PointerSensor, POINTER_SENSOR_OPTIONS)) const colsCount = size ? (size.w === 4 ? 5 : size.w) : 5 const rowsCount = size ? size.h : 2 const TOTAL_BOOKMARKS = colsCount * rowsCount + const primaryBookmarkInstanceId = usePrimaryBookmarkInstanceId() + const isPrimary = (() => { + if (!instanceId || instanceId === 'bookmarks-default') return true + if (primaryBookmarkInstanceId === undefined) return true + if (primaryBookmarkInstanceId === null) return true + return primaryBookmarkInstanceId === instanceId + })() + const handleDragEnd = async (event: DragEndEvent) => { if (!isAuthenticated) return showToast(translateError('UNAUTHORIZED') as string, 'error') @@ -64,7 +72,11 @@ export function BookmarksList({ size, instanceId }: BookmarksListProps = {}) { const { active, over } = event if (!over || active.id === over.id) return - const currentItems = getCurrentFolderItems(currentFolderId, instanceId) + const currentItems = getCurrentFolderItems( + currentFolderId, + instanceId, + isPrimary + ) const sourceIndex = currentItems.findIndex( (item) => item.id === active.id || item.onlineId === active.id @@ -137,14 +149,6 @@ export function BookmarksList({ size, instanceId }: BookmarksListProps = {}) { setFolderModalPath([{ id: targetId, title: folder.title }]) } - const primaryBookmarkInstanceId = usePrimaryBookmarkInstanceId() - const isPrimary = (() => { - if (!instanceId || instanceId === 'bookmarks-default') return true - if (primaryBookmarkInstanceId === undefined) return true - if (primaryBookmarkInstanceId === null) return true - return primaryBookmarkInstanceId === instanceId - })() - const currentFolderItems = getCurrentFolderItems( currentFolderId, instanceId, diff --git a/src/layouts/bookmark/components/bookmark-folder.tsx b/src/layouts/bookmark/components/bookmark-folder.tsx index 63ddec3e3..ef474ed0d 100644 --- a/src/layouts/bookmark/components/bookmark-folder.tsx +++ b/src/layouts/bookmark/components/bookmark-folder.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { memo, useMemo, useState } from 'react' import { addOpacityToColor } from '@/common/color' import type { Bookmark } from '../types/bookmark.types' import { RenderStickerPattern } from './bookmark/bookmark-sticker' @@ -8,7 +8,7 @@ import { BookmarkIcon } from './bookmark/bookmark-icon' import { Icon } from '@/icons' import { cn } from '@/common/utils/cn' -export function FolderBookmarkItem({ +export const FolderBookmarkItem = memo(function FolderBookmarkItem({ bookmark, onClick, isDragging = false, @@ -19,13 +19,17 @@ export function FolderBookmarkItem({ isDragging?: boolean onMenuClick?: (e: React.MouseEvent) => void }) { - const { getCurrentFolderItems } = useBookmarkStore() + const { bookmarks, getCurrentFolderItems } = useBookmarkStore() const [isHovered, setIsHovered] = useState(false) - const folderItems = getCurrentFolderItems(bookmark.id) - .filter((item) => item.type === 'BOOKMARK') - .slice(0, 6) + const folderItems = useMemo( + () => + getCurrentFolderItems(bookmark.id) + .filter((item) => item.type === 'BOOKMARK') + .slice(0, 6), + [bookmarks, bookmark.id] + ) const renderFolderIcons = () => { if (bookmark.icon) { @@ -123,4 +127,4 @@ export function FolderBookmarkItem({
) -} +}) diff --git a/src/layouts/bookmark/components/bookmark-item.tsx b/src/layouts/bookmark/components/bookmark-item.tsx index 79cb163a6..d397e0c95 100644 --- a/src/layouts/bookmark/components/bookmark-item.tsx +++ b/src/layouts/bookmark/components/bookmark-item.tsx @@ -1,3 +1,4 @@ +import { memo } from 'react' import { addOpacityToColor, getContrastingTextColor } from '@/common/color' import type { Bookmark } from '../types/bookmark.types' import { BookmarkIcon } from './bookmark/bookmark-icon' @@ -14,7 +15,7 @@ interface BookmarkItemProps { onMenuClick?: (e: React.MouseEvent) => void } -export function BookmarkItem({ +export const BookmarkItem = memo(function BookmarkItem({ bookmark, onClick, isDragging = false, @@ -91,4 +92,4 @@ export function BookmarkItem({
) -} +}) diff --git a/src/layouts/bookmark/components/modal/bookmark-folder.modal.tsx b/src/layouts/bookmark/components/modal/bookmark-folder.modal.tsx index 30d569c01..01bcb3716 100644 --- a/src/layouts/bookmark/components/modal/bookmark-folder.modal.tsx +++ b/src/layouts/bookmark/components/modal/bookmark-folder.modal.tsx @@ -22,6 +22,12 @@ import { AddBookmarkModal } from './add-bookmark.modal' import { ImportBrowserBookmarksModal } from './import-browser-bookmarks.modal' import { validate } from 'uuid' +const POINTER_SENSOR_OPTIONS = { + activationConstraint: { + distance: 5, + }, +} + interface BookmarkFolderModalProps { isOpen: boolean onClose: () => void @@ -47,13 +53,7 @@ export function BookmarkFolderModal({ const [showAddModal, setShowAddModal] = useState(false) const [showImportModal, setShowImportModal] = useState(false) - const sensors = useSensors( - useSensor(PointerSensor, { - activationConstraint: { - distance: 5, - }, - }) - ) + const sensors = useSensors(useSensor(PointerSensor, POINTER_SENSOR_OPTIONS)) const currentFolder = folderPath[folderPath.length - 1] const currentFolderId = currentFolder diff --git a/src/layouts/bookmark/components/sortable-bookmark-item.tsx b/src/layouts/bookmark/components/sortable-bookmark-item.tsx index bb5505fa5..877e9df55 100644 --- a/src/layouts/bookmark/components/sortable-bookmark-item.tsx +++ b/src/layouts/bookmark/components/sortable-bookmark-item.tsx @@ -32,7 +32,7 @@ export function SortableBookmarkItem({
diff --git a/src/styles/theme/glass.css b/src/styles/theme/glass.css index 7b671f21b..1ef1a308a 100644 --- a/src/styles/theme/glass.css +++ b/src/styles/theme/glass.css @@ -1,67 +1,68 @@ @plugin "daisyui/theme" { - name: "glass"; - --color-base-100: #171717b3; - --color-base-200: rgba(23, 23, 23, 0.1); - --color-base-300: rgba(255, 255, 255, 0.05); - --color-base-content: rgba(255, 255, 255, 0.95); - --color-primary: rgba(var(--brand-primary-rgb), 0.9); - --color-primary-focus: rgba(var(--brand-primary-rgb), 1); - --color-primary-content: #ffffff; - --color-secondary: rgba(var(--brand-secondary-rgb), 0.8); - --color-secondary-focus: rgba(var(--brand-secondary-rgb), 0.9); - --color-secondary-content: rgba(255, 255, 255, 1); - --color-accent: rgba(34, 197, 94, 0.8); - --color-accent-focus: rgba(22, 163, 74, 0.9); - --color-accent-content: rgba(255, 255, 255, 1); - --color-error: rgba(239, 68, 68, 0.8); - --color-success: rgba(34, 197, 94, 0.8); - --color-warning: rgba(245, 158, 11, 0.8); - --color-warning-content: #271b06; - --color-info: rgba(59, 130, 246, 0.8); - --glass: true; - --glass-opacity: 25%; - --glass-border-opacity: 15%; - --glass-reflex-degree: 120%; - --glass-reflex-opacity: 8%; - --glass-blur: 32px; + name: "glass"; + --color-base-100: #171717b3; + --color-base-200: rgba(23, 23, 23, 0.1); + --color-base-300: rgba(255, 255, 255, 0.05); + --color-base-content: rgba(255, 255, 255, 0.95); + --color-primary: rgba(var(--brand-primary-rgb), 0.9); + --color-primary-focus: rgba(var(--brand-primary-rgb), 1); + --color-primary-content: #ffffff; + --color-secondary: rgba(var(--brand-secondary-rgb), 0.8); + --color-secondary-focus: rgba(var(--brand-secondary-rgb), 0.9); + --color-secondary-content: rgba(255, 255, 255, 1); + --color-accent: rgba(34, 197, 94, 0.8); + --color-accent-focus: rgba(22, 163, 74, 0.9); + --color-accent-content: rgba(255, 255, 255, 1); + --color-error: rgba(239, 68, 68, 0.8); + --color-success: rgba(34, 197, 94, 0.8); + --color-warning: rgba(245, 158, 11, 0.8); + --color-warning-content: #271b06; + --color-info: rgba(59, 130, 246, 0.8); + --glass: true; + --glass-opacity: 25%; + --glass-border-opacity: 15%; + --glass-reflex-degree: 120%; + --glass-reflex-opacity: 8%; + --glass-blur: 32px; } - - - [data-theme="glass"] .menu, [data-theme="glass"] .navbar, [data-theme="glass"] .modal-box, [data-theme="glass"] .drawer-side, [data-theme="glass"] .collapse { - -webkit-backdrop-filter: blur(16px) saturate(180%); - backdrop-filter: blur(16px) saturate(180%); + -webkit-backdrop-filter: blur(16px) saturate(180%); + backdrop-filter: blur(16px) saturate(180%); } [data-theme="glass"] .search-box { - -webkit-backdrop-filter: blur(10px) saturate(180%); - backdrop-filter: blur(10px) saturate(180%); + -webkit-backdrop-filter: blur(10px) saturate(180%); + backdrop-filter: blur(10px) saturate(180%); } [data-theme="glass"] .widget-wrapper, [data-theme="glass"] .bg-glass, [data-theme="glass"] .tooltip { - background-color: #171717b3; - -webkit-backdrop-filter: blur(16px) saturate(150%); - backdrop-filter: blur(16px) saturate(150%); + background-color: #171717b3; + -webkit-backdrop-filter: blur(16px) saturate(150%); + backdrop-filter: blur(16px) saturate(150%); +} + +[data-theme="glass"] .widget-outer { + -webkit-backdrop-filter: none; + backdrop-filter: none; } [data-theme="glass"] .modal-box { - -webkit-backdrop-filter: blur(200px) saturate(200%); - backdrop-filter: blur(40px) saturate(10%); - background-color: #171717b3; + -webkit-backdrop-filter: blur(200px) saturate(200%); + backdrop-filter: blur(40px) saturate(10%); + background-color: #171717b3; } [data-theme="glass"] .portal { - background-color: #171717fa; + background-color: #171717fa; } - [data-theme="glass"] select:open { - background-color: #171717b3; -} \ No newline at end of file + background-color: #171717b3; +}