Typing and Density settings

src/pages/homepage/components/Bookmarks/Bookmarks.tsx

@@ -12,7 +12,7 @@ function Links({ contentType }: { contentType: [string] }) {
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
 		endpoint: 'api/categories',
 	});
-	const { isMobile, bookmarkSort } = useCommonHooks();
+	const { isMobile, bookmarkSort, bookmarkDensity } = useCommonHooks();
 	const [bookmarkData, setBookmarkData] = useState<Bookmark[]>([]);
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 
@@ -62,7 +62,9 @@ function Links({ contentType }: { contentType: [string] }) {
 								flexWrap: 'nowrap',
 								gridColumnGap: '20px',
 								gridRowGap: '0px',
-								gridTemplateColumns: isMobile ? '1fr 1fr' : '1fr 1fr 1fr 1fr 1fr',
+								gridTemplateColumns: isMobile
+									? '1fr 1fr'
+									: `repeat(${bookmarkDensity}, 1fr)`,
 								gridTemplateRows: 'auto',
 							}}
 						>