fix: bookmark reorder reverting, drag lag, and glass theme artifacts

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 (
 		<div
 			style={{
@@ -210,16 +215,14 @@ export function BookmarkGrid({
 			}
 		>
 			<SortableContext
-				items={displayedBookmarks
-					.filter(Boolean)
-					.map((bookmark) => bookmark?.id || '')}
+				items={sortableIds}
 				strategy={rectSortingStrategy}
 			>
 				{displayedBookmarks.map((bookmark, i) =>
 					bookmark ? (
 						<div
 							key={bookmark.id + '-' + i}
-							className="w-full h-full transition-transform duration-200"
+							className="w-full h-full"
 						>
 							<SortableBookmarkItem
 								bookmark={bookmark}

src/layouts/bookmark/bookmarks.tsx

@@ -23,6 +23,12 @@ import { usePrimaryBookmarkInstanceId } from '@/context/free-widget/free-widget.
 import type { WidgetSize } from '../widgets/layout-engine/types'
 import { validate } from 'uuid'
 
+const POINTER_SENSOR_OPTIONS = {
+	activationConstraint: {
+		distance: 5,
+	},
+}
+
 interface BookmarksListProps {
 	size?: WidgetSize
 	instanceId?: string
@@ -44,27 +50,33 @@ export function BookmarksList({ size, instanceId }: BookmarksListProps = {}) {
 	const { mutateAsync: updateOrder } = useUpdateBookmarkOrder()
 	const [folderPath, setFolderPath] = useState<FolderPathItem[]>([])
 
-	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')
 
 		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,

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<HTMLElement>) => 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({
 			</button>
 		</div>
 	)
-}
+})

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<HTMLElement>) => void
 }
 
-export function BookmarkItem({
+export const BookmarkItem = memo(function BookmarkItem({
 	bookmark,
 	onClick,
 	isDragging = false,
@@ -91,4 +92,4 @@ export function BookmarkItem({
 			</button>
 		</div>
 	)
-}
+})

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

src/layouts/bookmark/components/sortable-bookmark-item.tsx

@@ -32,7 +32,7 @@ export function SortableBookmarkItem({
 		<div
 			ref={setNodeRef}
 			style={style}
-			className={`w-full h-full transition-transform duration-200 ${isDragging ? 'z-10' : ''}`}
+			className={`w-full h-full ${isDragging ? 'z-10' : ''}`}
 			{...attributes}
 			{...listeners}
 		>

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;
-}
+  background-color: #171717b3;
+}