fix dashboard bug

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -12,14 +12,16 @@ import { useDeleteLink, useGetLink, useUpdateLink } from "@/hooks/store/links";
 import toast from "react-hot-toast";
 import LinkModal from "@/components/ModalContent/LinkModal";
 import { useRouter } from "next/router";
+import clsx from "clsx";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
   className?: string;
+  btnStyle?: string;
 };
 
-export default function LinkActions({ link, className }: Props) {
+export default function LinkActions({ link, className, btnStyle }: Props) {
   const { t } = useTranslation();
 
   const permissions = usePermissions(link.collection.id as number);
@@ -85,13 +87,17 @@ export default function LinkActions({ link, className }: Props) {
     <>
       {isPublicRoute ? (
         <div
-          className={`absolute ${className || "top-3 right-3"} z-20`}
+          className={clsx(
+            className || "top-3 right-3",
+            "absolute z-20",
+            btnStyle
+          )}
           tabIndex={0}
           role="button"
           onMouseDown={dropdownTriggerer}
           onClick={() => setLinkModal(true)}
         >
-          <div className="btn btn-ghost btn-sm btn-square text-neutral">
+          <div className="btn btn-sm btn-square text-neutral">
             <i title="More" className="bi-three-dots text-xl" />
           </div>
         </div>
@@ -105,7 +111,7 @@ export default function LinkActions({ link, className }: Props) {
             tabIndex={0}
             role="button"
             onMouseDown={dropdownTriggerer}
-            className="btn btn-sm btn-square text-neutral"
+            className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}
           >
             <i title="More" className="bi-three-dots text-xl" />
           </div>

components/LinkViews/LinkComponents/LinkList.tsx

@@ -93,7 +93,7 @@ export default function LinkCardCompact({ link, editMode }: Props) {
   return (
     <>
       <div
-        className={`${selectedStyle} rounded-md border relative items-center flex ${
+        className={`${selectedStyle} rounded-md border relative group items-center flex ${
           !isPWA() ? "hover:bg-base-300 px-2 py-1" : "py-1"
         } duration-200 w-full`}
         onClick={() =>
@@ -137,7 +137,10 @@ export default function LinkCardCompact({ link, editMode }: Props) {
         <LinkActions
           link={link}
           collection={collection}
-          className="top-3 right-3"
+          className={
+            "top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
+          }
+          btnStyle="btn-ghost"
         />
       </div>
       <div className="last:hidden rounded-none my-0 mx-1 border-t border-base-300 h-[1px]"></div>

components/ViewDropdown.tsx

@@ -114,6 +114,8 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
               </label>
             </li>
           ))}
+        {settings.viewMode !== ViewMode.List && (
+          <>
             <p className="mb-1 mt-2 text-sm text-neutral">
               {t("columns")}:{" "}
               {settings.columns === 0 ? t("default") : settings.columns}
@@ -140,6 +142,8 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
                 <span>|</span>
               </div>
             </div>
+          </>
+        )}
       </ul>
     </div>
   );

hooks/store/dashboardData.tsx

@@ -1,4 +1,3 @@
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { useQuery } from "@tanstack/react-query";
 import { useSession } from "next-auth/react";
 
@@ -7,11 +6,11 @@ const useDashboardData = () => {
 
   return useQuery({
     queryKey: ["dashboardData"],
-    queryFn: async (): Promise<LinkIncludingShortenedCollectionAndTags[]> => {
+    queryFn: async () => {
-      const response = await fetch("/api/v1/dashboard");
+      const response = await fetch("/api/v2/dashboard");
       const data = await response.json();
 
-      return data.response;
+      return data.data;
     },
     enabled: status === "authenticated",
   });

lib/api/controllers/dashboard/getDashboardDataV2.ts

@@ -48,7 +48,7 @@ export default async function getDashboardData(
   });
 
   const pinnedLinks = await prisma.link.findMany({
-    take: 10,
+    take: 16,
     where: {
       AND: [
         {
@@ -80,7 +80,7 @@ export default async function getDashboardData(
   });
 
   const recentlyAddedLinks = await prisma.link.findMany({
-    take: 10,
+    take: 16,
     where: {
       collection: {
         OR: [

pages/dashboard.tsx

@@ -16,17 +16,21 @@ import { useCollections } from "@/hooks/store/collections";
 import { useTags } from "@/hooks/store/tags";
 import { useDashboardData } from "@/hooks/store/dashboardData";
 import Links from "@/components/LinkViews/Links";
+import useLocalSettingsStore from "@/store/localSettings";
 
 export default function Dashboard() {
   const { t } = useTranslation();
   const { data: collections = [] } = useCollections();
-  const dashboardData = useDashboardData();
+  const { data: { links = [] } = { links: [] }, ...dashboardData } =
+    useDashboardData();
   const { data: tags = [] } = useTags();
 
   const [numberOfLinks, setNumberOfLinks] = useState(0);
 
   const [showLinks, setShowLinks] = useState(3);
 
+  const { settings } = useLocalSettingsStore();
+
   useEffect(() => {
     setNumberOfLinks(
       collections.reduce(
@@ -52,8 +56,10 @@ export default function Dashboard() {
   const { width } = useWindowDimensions();
 
   useEffect(() => {
-    handleNumberOfLinksToShow();
+    settings.columns === 0
-  }, [width]);
+      ? handleNumberOfLinksToShow()
+      : setShowLinks(settings.columns);
+  }, [width, settings.columns]);
 
   const importBookmarks = async (
     e: React.ChangeEvent<HTMLInputElement>,
@@ -160,10 +166,7 @@ export default function Dashboard() {
 
         <div
           style={{
-            flex:
+            flex: links || dashboardData.isLoading ? "0 1 auto" : "1 1 auto",
-              dashboardData.data || dashboardData.isLoading
-                ? "0 1 auto"
-                : "1 1 auto",
           }}
           className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
         >
@@ -175,14 +178,9 @@ export default function Dashboard() {
                 useData={dashboardData}
               />
             </div>
-          ) : dashboardData.data &&
+          ) : links && links[0] && !dashboardData.isLoading ? (
-            dashboardData.data[0] &&
-            !dashboardData.isLoading ? (
             <div className="w-full">
-              <Links
+              <Links links={links.slice(0, showLinks)} layout={viewMode} />
-                links={dashboardData.data.slice(0, showLinks)}
-                layout={viewMode}
-              />
             </div>
           ) : (
             <div className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200">
@@ -317,11 +315,11 @@ export default function Dashboard() {
                 useData={dashboardData}
               />
             </div>
-          ) : dashboardData.data?.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
+          ) : links?.some((e: any) => e.pinnedBy && e.pinnedBy[0]) ? (
             <div className="w-full">
               <Links
-                links={dashboardData.data
+                links={links
-                  .filter((e) => e.pinnedBy && e.pinnedBy[0])
+                  .filter((e: any) => e.pinnedBy && e.pinnedBy[0])
                   .slice(0, showLinks)}
                 layout={viewMode}
               />