xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

improved user experience

This commit is contained in:
daniel31x13 2023-10-24 17:03:33 -04:00
parent cb8c2d5f10
commit c38c5b2cc5
5 changed files with 82 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/CollectionCard.tsx
View File

@ -1,5 +1,5 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEllipsis, faLink } from "@fortawesome/free-solid-svg-icons";
import { faEllipsis, faGlobe, faLink } from "@fortawesome/free-solid-svg-icons";
import Link from "next/link";
import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
import Dropdown from "./Dropdown";
@ -82,6 +82,13 @@ export default function CollectionCard({ collection, className }: Props) {
</div>
<div className="text-right w-40">
<div className="text-black dark:text-white font-bold text-sm flex justify-end gap-1 items-center">
{collection.isPublic ? (
<FontAwesomeIcon
icon={faGlobe}
title="This collection is being shared publicly."
className="w-4 h-4 drop-shadow text-gray-500 dark:text-gray-300"
/>
) : undefined}
<FontAwesomeIcon
icon={faLink}
className="w-5 h-5 text-gray-500 dark:text-gray-300"

12
components/Sidebar.tsx
View File

@ -6,6 +6,7 @@ import {
faChartSimple,
faChevronDown,
faLink,
faGlobe,
} from "@fortawesome/free-solid-svg-icons";
import useTagStore from "@/store/tags";
import Link from "next/link";
@ -151,10 +152,17 @@ export default function Sidebar({ className }: { className?: string }) {
className="w-6 h-6 drop-shadow"
style={{ color: e.color }}
/>
<p className="text-black dark:text-white truncate w-full pr-7">
<p className="text-black dark:text-white truncate w-full">
{e.name}
</p>
{e.isPublic ? (
<FontAwesomeIcon
icon={faGlobe}
title="This collection is being shared publicly."
className="w-4 h-4 drop-shadow text-gray-500 dark:text-gray-300"
/>
) : undefined}
</div>
</Link>
);

2
pages/collections/[id].tsx
View File

@ -220,7 +220,7 @@ export default function Index() {
if (target.id !== "expand-dropdown")
setExpandDropdown(false);
}}
className="absolute top-8 right-0 z-10 w-fit"
className="absolute top-8 right-0 z-10 w-40"
/>
) : null}
</div>

58
pages/collections/index.tsx
View File

@ -26,7 +26,7 @@ export default function Collections() {
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
const [sortedCollections, setSortedCollections] = useState(collections);
const session = useSession();
const { data } = useSession();
const { setModal } = useModalStore();
@ -35,18 +35,24 @@ export default function Collections() {
return (
<MainLayout>
<div className="p-5">
<div className="flex gap-3 items-center justify-between mb-5">
<div className="flex gap-3 items-end">
<div className="flex gap-2">
<div className="flex gap-3 justify-between mb-5">
<div className="flex gap-3">
<div className="flex items-center gap-3">
<FontAwesomeIcon
icon={faFolder}
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500 drop-shadow"
className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
/>
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-thin">
All Collections
<div>
<p className="text-3xl capitalize text-black dark:text-white font-thin">
Your Collections
</p>
<p className="capitalize text-black dark:text-white">
Collections you own
</p>
</div>
<div className="relative">
</div>
<div className="relative mt-2">
<div
onClick={() => setExpandDropdown(!expandDropdown)}
id="expand-dropdown"
@ -79,13 +85,13 @@ export default function Collections() {
if (target.id !== "expand-dropdown")
setExpandDropdown(false);
}}
className="absolute top-8 left-0 w-36"
className="absolute top-8 sm:left-0 right-0 sm:right-auto w-36"
/>
) : null}
</div>
</div>
<div className="relative">
<div className="relative mt-2">
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
@ -109,7 +115,9 @@ export default function Collections() {
</div>
<div className="grid xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
{sortedCollections.map((e, i) => {
{sortedCollections
.filter((e) => e.ownerId !== data?.user.id)
.map((e, i) => {
return <CollectionCard key={i} collection={e} />;
})}
@ -132,6 +140,34 @@ export default function Collections() {
/>
</div>
</div>
{sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] ? (
<>
<div className="flex items-center gap-3 my-5">
<FontAwesomeIcon
icon={faFolder}
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">
Other Collections
</p>
<p className="capitalize text-black dark:text-white">
Shared collections you're a member of
</p>
</div>
</div>
<div className="grid xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
{sortedCollections
.filter((e) => e.ownerId !== data?.user.id)
.map((e, i) => {
return <CollectionCard key={i} collection={e} />;
})}
</div>
</>
) : undefined}
</div>
</MainLayout>
);

16
pages/links.tsx
View File

@ -20,18 +20,24 @@ export default function Links() {
return (
<MainLayout>
<div className="p-5 flex flex-col gap-5 w-full h-full">
<div className="flex gap-3 justify-between items-center">
<div className="flex gap-2">
<div className="flex gap-3 justify-between">
<div className="flex items-center gap-3">
<FontAwesomeIcon
icon={faLink}
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500 drop-shadow"
className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
/>
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-thin">
<div>
<p className="text-3xl capitalize text-black dark:text-white font-thin">
All Links
</p>
<p className="capitalize text-black dark:text-white">
All Links from every Collections
</p>
</div>
</div>
<div className="relative">
<div className="relative mt-2">
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"