Merge pull request #295 from linkwarden/dev

Dev

components/NoLinksFound.tsx

@@ -11,7 +11,7 @@ export default function NoLinksFound({ text }: Props) {
   const { setModal } = useModalStore();
 
   return (
-    <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
+    <div className="w-full h-full flex flex-col justify-center p-10">
       <p className="text-center text-2xl text-black dark:text-white">
         {text || "You haven't created any Links Here"}
       </p>

components/SettingsSidebar.tsx

@@ -20,7 +20,7 @@ import {
 } from "@fortawesome/free-brands-svg-icons";
 
 export default function SettingsSidebar({ className }: { className?: string }) {
-  const LINKWARDEN_VERSION = "v2.1.0";
+  const LINKWARDEN_VERSION = "v2.2.0";
 
   const { collections } = useCollectionStore();
 
@@ -43,9 +43,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/account`
-                ? "bg-sky-200 dark:bg-sky-800"
+                ? "bg-sky-500"
-                : "hover:bg-slate-200 hover:dark:bg-neutral-700"
+                : "hover:bg-slate-500"
-            } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faUser}
@@ -62,9 +62,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/appearance`
-                ? "bg-sky-200 dark:bg-sky-800"
+                ? "bg-sky-500"
-                : "hover:bg-slate-200 hover:dark:bg-neutral-700"
+                : "hover:bg-slate-500"
-            } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faPalette}
@@ -81,9 +81,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/archive`
-                ? "bg-sky-200 dark:bg-sky-800"
+                ? "bg-sky-500"
-                : "hover:bg-slate-200 hover:dark:bg-neutral-700"
+                : "hover:bg-slate-500"
-            } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faBoxArchive}
@@ -100,9 +100,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/password`
-                ? "bg-sky-200 dark:bg-sky-800"
+                ? "bg-sky-500"
-                : "hover:bg-slate-200 hover:dark:bg-neutral-700"
+                : "hover:bg-slate-500"
-            } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faKey}
@@ -120,9 +120,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
             <div
               className={`${
                 active === `/settings/billing`
-                  ? "bg-sky-200 dark:bg-sky-800"
+                  ? "bg-sky-500"
-                  : "hover:bg-slate-200 hover:dark:bg-neutral-700"
+                  : "hover:bg-slate-500"
-              } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+              } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
             >
               <FontAwesomeIcon
                 icon={faCreditCard}
@@ -147,7 +147,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
         </Link>
         <Link href="https://docs.linkwarden.app" target="_blank">
           <div
-            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faCircleQuestion as any}
@@ -162,7 +162,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
         <Link href="https://github.com/linkwarden/linkwarden" target="_blank">
           <div
-            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faGithub as any}
@@ -177,7 +177,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
         <Link href="https://twitter.com/LinkwardenHQ" target="_blank">
           <div
-            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faXTwitter as any}
@@ -192,7 +192,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
         <Link href="https://fosstodon.org/@linkwarden" target="_blank">
           <div
-            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faMastodon as any}

components/Sidebar.tsx

@@ -7,6 +7,7 @@ import {
   faChevronDown,
   faLink,
   faGlobe,
+  faThumbTack,
 } from "@fortawesome/free-solid-svg-icons";
 import useTagStore from "@/store/tags";
 import Link from "next/link";
@@ -55,59 +56,69 @@ export default function Sidebar({ className }: { className?: string }) {
         className || ""
       }`}
     >
-      <div className="flex justify-center gap-2 mt-2">
+      <div className="flex flex-col gap-2 mt-2">
-        <Link
+        <Link href={`/dashboard`}>
-          href="/dashboard"
+          <div
             className={`${
-            active === "/dashboard"
+              active === `/dashboard` ? "bg-sky-500" : "hover:bg-slate-500"
-              ? "bg-sky-200 dark:bg-sky-800"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
-              : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-          } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
           >
             <FontAwesomeIcon
               icon={faChartSimple}
-            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-500`}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
             />
-
+            <p className="text-black dark:text-white truncate w-full">
-          <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
               Dashboard
             </p>
+          </div>
         </Link>
 
-        <Link
+        <Link href={`/links`}>
-          href="/links"
+          <div
             className={`${
-            active === "/links"
+              active === `/links` ? "bg-sky-500" : "hover:bg-slate-500"
-              ? "bg-sky-200 dark:bg-sky-800"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
-              : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-          } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
           >
             <FontAwesomeIcon
               icon={faLink}
-            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-500`}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
             />
-
+            <p className="text-black dark:text-white truncate w-full">
-          <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
+              All Links
-            Links
             </p>
+          </div>
         </Link>
 
-        <Link
+        <Link href={`/collections`}>
-          href="/collections"
+          <div
             className={`${
-            active === "/collections"
+              active === `/collections` ? "bg-sky-500" : "hover:bg-slate-500"
-              ? "bg-sky-200 dark:bg-sky-800"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
-              : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-          } outline-sky-100 outline-1 duration-100  py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
           >
             <FontAwesomeIcon
               icon={faFolder}
-            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-500`}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
             />
-
+            <p className="text-black dark:text-white truncate w-full">
-          <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
+              All Collections
-            Collections
             </p>
+          </div>
+        </Link>
+
+        <Link href={`/links/pinned`}>
+          <div
+            className={`${
+              active === `/links/pinned` ? "bg-sky-500" : "hover:bg-slate-500"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+          >
+            <FontAwesomeIcon
+              icon={faThumbTack}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+            />
+            <p className="text-black dark:text-white truncate w-full">
+              Pinned Links
+            </p>
+          </div>
         </Link>
       </div>
 
@@ -145,9 +156,9 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/collections/${e.id}`
-                            ? "bg-sky-200 dark:bg-sky-800"
+                            ? "bg-sky-500"
-                            : "hover:bg-slate-200 hover:dark:bg-neutral-700"
+                            : "hover:bg-slate-500"
-                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+                        } duration-100 py-1 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
                       >
                         <FontAwesomeIcon
                           icon={faFolder}
@@ -212,9 +223,9 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/tags/${e.id}`
-                            ? "bg-sky-200 dark:bg-sky-800"
+                            ? "bg-sky-500"
-                            : "hover:bg-slate-200 hover:dark:bg-neutral-700"
+                            : "hover:bg-slate-500"
-                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+                        } duration-100 py-1 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
                       >
                         <FontAwesomeIcon
                           icon={faHashtag}

layouts/CenteredForm.tsx

@@ -16,7 +16,7 @@ export default function CenteredForm({ text, children }: Props) {
       <div className="m-auto flex flex-col gap-2 w-full">
         {theme ? (
           <Image
-            src={`/linkwarden_${theme === "dark" ? "dark" : "li"}.png`}
+            src={`/linkwarden_${theme === "dark" ? "dark" : "light"}.png`}
             width={640}
             height={136}
             alt="Linkwarden"

lib/api/controllers/dashboard/getDashboardData.ts

@@ -14,9 +14,7 @@ export default async function getDashboardData(
   else if (query.sort === Sort.DescriptionZA) order = { description: "desc" };
 
   const pinnedLinks = await prisma.link.findMany({
-    take: Number(process.env.PAGINATION_TAKE_COUNT) || 20,
+    take: 6,
-    skip: query.cursor ? 1 : undefined,
-    cursor: query.cursor ? { id: query.cursor } : undefined,
     where: {
       AND: [
         {

pages/dashboard.tsx

@@ -1,7 +1,6 @@
 import useCollectionStore from "@/store/collections";
 import {
   faChartSimple,
-  faChevronDown,
   faChevronRight,
   faClockRotateLeft,
   faFileImport,
@@ -36,14 +35,7 @@ export default function Dashboard() {
 
   const [numberOfLinks, setNumberOfLinks] = useState(0);
 
-  const [showRecents, setShowRecents] = useState(3);
+  const [showLinks, setShowLinks] = useState(3);
-
-  const [linkPinDisclosure, setLinkPinDisclosure] = useState<boolean>(() => {
-    const storedValue =
-      typeof window !== "undefined" &&
-      localStorage.getItem("linkPinDisclosure");
-    return storedValue ? storedValue === "true" : true;
-  });
 
   useLinks({ pinnedOnly: true, sort: 0 });
 
@@ -57,25 +49,18 @@ export default function Dashboard() {
     );
   }, [collections]);
 
-  useEffect(() => {
+  const handleNumberOfLinksToShow = () => {
-    localStorage.setItem(
+    if (window.innerWidth > 1535) {
-      "linkPinDisclosure",
+      setShowLinks(6);
-      linkPinDisclosure ? "true" : "false"
-    );
-  }, [linkPinDisclosure]);
-
-  const handleNumberOfRecents = () => {
-    if (window.innerWidth > 1550) {
-      setShowRecents(6);
     } else if (window.innerWidth > 1295) {
-      setShowRecents(4);
+      setShowLinks(4);
-    } else setShowRecents(3);
+    } else setShowLinks(3);
   };
 
   const { width } = useWindowDimensions();
 
   useEffect(() => {
-    handleNumberOfRecents();
+    handleNumberOfLinksToShow();
   }, [width]);
 
   const [importDropdown, setImportDropdown] = useState(false);
@@ -197,7 +182,7 @@ export default function Dashboard() {
               <div
                 className={`grid overflow-hidden 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
               >
-                {links.slice(0, showRecents).map((e, i) => (
+                {links.slice(0, showLinks).map((e, i) => (
                   <LinkCard key={i} link={e} count={i} />
                 ))}
               </div>
@@ -314,38 +299,32 @@ export default function Dashboard() {
             />
             <p className="text-2xl text-black dark:text-white">Pinned Links</p>
           </div>
-          {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
+          <Link
-            <button
+            href="/links/pinned"
             className="text-black dark:text-white flex items-center gap-2 cursor-pointer"
-              onClick={() => setLinkPinDisclosure(!linkPinDisclosure)}
           >
-              {linkPinDisclosure ? "Show Less" : "Show More"}
+            View All
             <FontAwesomeIcon
-                icon={faChevronDown}
+              icon={faChevronRight}
-                className={`w-4 h-4 text-black dark:text-white ${
+              className={`w-4 h-4 text-black dark:text-white`}
-                  linkPinDisclosure ? "rotate-reverse" : "rotate"
-                }`}
             />
-            </button>
+          </Link>
-          ) : undefined}
         </div>
 
         <div
-          style={{ flex: "1 1 auto" }}
+          style={{ flex: "0 1 auto" }}
           className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
         >
-          {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
+          {links[0] ? (
             <div className="w-full">
               <div
-                className={`grid overflow-hidden 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full ${
+                className={`grid overflow-hidden 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
-                  linkPinDisclosure ? "h-full" : "max-h-[20rem]"
-                }`}
               >
                 {links
+
                   .filter((e) => e.pinnedBy && e.pinnedBy[0])
-                  .map((e, i) => (
+                  .map((e, i) => <LinkCard key={i} link={e} count={i} />)
-                    <LinkCard key={i} link={e} count={i} />
+                  .slice(0, showLinks)}
-                  ))}
               </div>
             </div>
           ) : (

pages/links/pinned.tsx

@@ -0,0 +1,74 @@
+import LinkCard from "@/components/LinkCard";
+import NoLinksFound from "@/components/NoLinksFound";
+import SortDropdown from "@/components/SortDropdown";
+import useLinks from "@/hooks/useLinks";
+import MainLayout from "@/layouts/MainLayout";
+import useLinkStore from "@/store/links";
+import { Sort } from "@/types/global";
+import { faSort, faThumbTack } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
+
+export default function PinnedLinks() {
+  const { links } = useLinkStore();
+
+  const [sortDropdown, setSortDropdown] = useState(false);
+  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+
+  useLinks({ sort: sortBy, pinnedOnly: true });
+
+  return (
+    <MainLayout>
+      <div className="p-5 flex flex-col gap-5 w-full h-full">
+        <div className="flex gap-3 justify-between">
+          <div className="flex items-center gap-3">
+            <FontAwesomeIcon
+              icon={faThumbTack}
+              className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
+            />
+            <div>
+              <p className="text-3xl capitalize text-black dark:text-white font-thin">
+                Pinned Links
+              </p>
+
+              <p className="text-black dark:text-white">
+                Pinned Links from your Collections
+              </p>
+            </div>
+          </div>
+
+          <div className="relative mt-2">
+            <div
+              onClick={() => setSortDropdown(!sortDropdown)}
+              id="sort-dropdown"
+              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+            >
+              <FontAwesomeIcon
+                icon={faSort}
+                id="sort-dropdown"
+                className="w-5 h-5 text-gray-500 dark:text-gray-300"
+              />
+            </div>
+
+            {sortDropdown ? (
+              <SortDropdown
+                sortBy={sortBy}
+                setSort={setSortBy}
+                toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
+              />
+            ) : null}
+          </div>
+        </div>
+        {links[0] ? (
+          <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
+            {links.map((e, i) => {
+              return <LinkCard key={i} link={e} count={i} />;
+            })}
+          </div>
+        ) : (
+          <NoLinksFound text="You Haven't Created Any Links Yet" />
+        )}
+      </div>
+    </MainLayout>
+  );
+}

pages/settings/account.tsx

@@ -334,7 +334,7 @@ export default function Account() {
           </p>
 
           {user.isPrivate && (
-            <div className="pl-5 border-l">
+            <div className="pl-5">
               <p className="text-black dark:text-white mt-2">
                 Whitelisted Users
               </p>