Tags in public collection

components/ModalContent/EditCollectionSharingModal.tsx

@@ -125,6 +125,32 @@ export default function EditCollectionSharingModal({
           </div>
         )}
 
+        {permissions === true && collection.isPublic && (
+          <div>
+            <p>Show tags in public collection</p>
+
+            <label className="label cursor-pointer justify-start gap-2">
+              <input
+                type="checkbox"
+                checked={collection.tagsArePublic}
+                onChange={() =>
+                  setCollection({
+                    ...collection,
+                    tagsArePublic: !collection.tagsArePublic,
+                  })
+                }
+                className="checkbox checkbox-primary"
+              />
+              <span className="label-text">Show tags in public collection</span>
+            </label>
+
+            <p className="text-neutral text-sm">
+              This will let <b>Anyone</b> view this collections tags and search
+              this collections links by them.
+            </p>
+          </div>
+        )}
+
         {collection.isPublic ? (
           <div className={permissions === true ? "pl-5" : ""}>
             <p className="mb-2">Sharable Link (Click to copy)</p>

lib/api/controllers/collections/collectionId/updateCollectionById.ts

@@ -62,6 +62,7 @@ export default async function updateCollection(
         description: data.description,
         color: data.color,
         isPublic: data.isPublic,
+        tagsArePublic: data.tagsArePublic,
         parent:
           data.parentId && data.parentId !== ("root" as any)
             ? {

pages/public/collections/[id].tsx

@@ -3,6 +3,7 @@ import getPublicCollectionData from "@/lib/client/getPublicCollectionData";
 import {
   CollectionIncludingMembersAndLinkCount,
   Sort,
+  TagIncludingLinkCount,
   ViewMode,
 } from "@/types/global";
 import { useRouter } from "next/router";
@@ -24,6 +25,7 @@ import EditCollectionSharingModal from "@/components/ModalContent/EditCollection
 import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
+import useTagStore from "@/store/tags";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 
 const cardVariants: Variants = {
@@ -56,6 +58,24 @@ export default function PublicCollections() {
     archiveAsPDF: undefined as unknown as boolean,
   });
 
+  const { tags } = useTagStore();
+  const handleTagSelection = (tag: TagIncludingLinkCount  | undefined) => {
+    if (tag) {
+      Object.keys(searchFilter).forEach((v) => searchFilter[(v as keyof {name: boolean, url: boolean, description: boolean, tags: boolean, textContent: boolean})] = false)
+      searchFilter.tags = true;
+      return router.push(
+        "/public/collections/" +
+        router.query.id +
+        "?q=" +
+        encodeURIComponent(tag.name || "")
+      );
+    } else {
+      return router.push(
+        "/public/collections/" +
+        router.query.id)
+    }
+  }
+
   const [searchFilter, setSearchFilter] = useState({
     name: true,
     url: true,
@@ -221,7 +241,49 @@ export default function PublicCollections() {
               <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
             </div>
           </div>
-
+{collection.tagsArePublic && tags[0] && (
+            <div>
+              <p className="text-sm">Browse by topic</p>
+              <div className="flex gap-2 mt-2 mb-6">
+                <button onClick={() => handleTagSelection(undefined)}>
+                  <div
+                    className="
+                      bg-neutral-content/20 hover:bg-neutral/20 duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 rounded-md h-8"
+                    >
+                      <i className="text-primary bi-hash text-2xl text-primary drop-shadow"></i>
+                      <p className="truncate pr-7">All</p>
+                      <div className="text-neutral drop-shadow text-neutral text-xs">
+                        {collection._count?.links}
+                      </div>
+                  </div>
+                </button>
+                {tags
+                  .sort((a, b) => a.name.localeCompare(b.name))
+                  .map((e, i) => {
+                    const active = router.query.q === e.name;
+                    return (
+                      <button key={i} onClick={() => handleTagSelection(e)}>
+                        <div
+                          className={`
+                            ${
+                            active
+                              ? "bg-primary/20"
+                              : "bg-neutral-content/20 hover:bg-neutral/20"
+                          } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 rounded-md h-8`}
+                        >
+                          <i className="bi-hash text-2xl text-primary drop-shadow"></i>
+                          <p className="truncate pr-7">{e.name}</p>
+                          <div className="drop-shadow text-neutral text-xs">
+                            {e._count?.links}
+                          </div>
+                        </div>
+                      </button>
+                    );
+                  })
+              }
+              </div>
+            </div>
+          )}
           {links[0] ? (
             <LinkComponent
               links={links

prisma/schema.prisma

@@ -87,6 +87,7 @@ model Collection {
   parent          Collection?           @relation("SubCollections", fields: [parentId], references: [id])
   subCollections  Collection[]          @relation("SubCollections")
   isPublic        Boolean               @default(false)
+  tagsArePublic   Boolean               @default(false) 
   owner           User                  @relation(fields: [ownerId], references: [id])
   ownerId         Int
   members         UsersAndCollections[]