egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add route for pinned links + better dashboard UX

Browse Source
This commit is contained in:
daniel31x13
2023-11-11 14:57:46 -05:00
parent 49b1ea4875
commit b19d6694ec
8 changed files with 186 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/NoLinksFound.tsx
+1 -1
View File
@@ -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
+19 -19
View File
@@ -43,9 +43,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
<div
className={`${
active === `/settings/account`
? "bg-sky-200 dark:bg-sky-800"
: "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`}
? "bg-sky-500"
: "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={faUser}
@@ -62,9 +62,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
<div
className={`${
active === `/settings/appearance`
? "bg-sky-200 dark:bg-sky-800"
: "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`}
? "bg-sky-500"
: "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={faPalette}
@@ -81,9 +81,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
<div
className={`${
active === `/settings/archive`
? "bg-sky-200 dark:bg-sky-800"
: "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`}
? "bg-sky-500"
: "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={faBoxArchive}
@@ -100,9 +100,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
<div
className={`${
active === `/settings/password`
? "bg-sky-200 dark:bg-sky-800"
: "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`}
? "bg-sky-500"
: "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={faKey}
@@ -120,9 +120,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
<div
className={`${
active === `/settings/billing`
? "bg-sky-200 dark:bg-sky-800"
: "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`}
? "bg-sky-500"
: "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={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
+65 -54
View File
@@ -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">
<Link
href="/dashboard"
className={`${
active === "/dashboard"
? "bg-sky-200 dark:bg-sky-800"
: "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`}
/>
<p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
Dashboard
</p>
<div className="flex flex-col gap-2 mt-2">
<Link href={`/dashboard`}>
<div
className={`${
active === `/dashboard` ? "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={faChartSimple}
className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
/>
<p className="text-black dark:text-white truncate w-full">
Dashboard
</p>
</div>
</Link>
<Link
href="/links"
className={`${
active === "/links"
? "bg-sky-200 dark:bg-sky-800"
: "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`}
/>
<p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
Links
</p>
<Link href={`/links`}>
<div
className={`${
active === `/links` ? "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={faLink}
className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
/>
<p className="text-black dark:text-white truncate w-full">
All Links
</p>
</div>
</Link>
<Link
href="/collections"
className={`${
active === "/collections"
? "bg-sky-200 dark:bg-sky-800"
: "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`}
/>
<Link href={`/collections`}>
<div
className={`${
active === `/collections` ? "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={faFolder}
className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
/>
<p className="text-black dark:text-white truncate w-full">
All Collections
</p>
</div>
</Link>
<p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
Collections
</p>
<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"
: "hover:bg-slate-200 hover:dark:bg-neutral-700"
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
? "bg-sky-500"
: "hover:bg-slate-500"
} 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"
: "hover:bg-slate-200 hover:dark:bg-neutral-700"
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
? "bg-sky-500"
: "hover:bg-slate-500"
} 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}