Add tags page.

frontend/src/pages/home_page.tsx

@@ -3,10 +3,7 @@ import ResourcesView from "../components/resources_view.tsx";
 import {network} from "../network/network.ts";
 import { app } from "../app.ts";
 import {RSort} from "../network/models.ts";
-import Button from "../components/button.tsx";
-import {MdInfoOutline} from "react-icons/md";
 import {useTranslation} from "react-i18next";
-import {useNavigate} from "react-router";
 import {useAppContext} from "../components/AppContext.tsx";
 
 export default function HomePage() {
@@ -15,8 +12,6 @@ export default function HomePage() {
   }, [])
 
   const {t} = useTranslation()
-
-  const navigate = useNavigate()
   
   const appContext = useAppContext()
 
@@ -59,15 +54,6 @@ export default function HomePage() {
         <option value="4">{t("Downloads Ascending")}</option>
         <option value="5">{t("Downloads Descending")}</option>
       </select>
-      <span className={"flex-1"}/>
-      <Button onClick={() => {
-        navigate("/about");
-      }}>
-        <div className={"flex items-center"}>
-          <MdInfoOutline size={24} className={"inline-block mr-2"}/>
-          <span>{t("About this site")}</span>
-        </div>
-      </Button>
     </div>
     <ResourcesView
       key={`home_page_${order}`}

frontend/src/pages/tagged_resources_page.tsx

@@ -55,7 +55,7 @@ export default function TaggedResourcesPage() {
     <div className={"px-3"}>
       {
         (tag?.aliases ?? []).map((e) => {
-          return <Badge className={"m-1 badge-outline badge-soft"}>{e}</Badge>
+          return <Badge className={"m-1 badge-primary badge-soft"}>{e}</Badge>
         })
       }
     </div>

frontend/src/pages/tags_page.tsx

@@ -0,0 +1,62 @@
+import {TagWithCount} from "../network/models.ts";
+import {useEffect, useState} from "react";
+import {network} from "../network/network.ts";
+import showToast from "../components/toast.ts";
+import Loading from "../components/loading.tsx";
+import Badge from "../components/badge.tsx";
+import {useNavigate} from "react-router";
+
+export default function TagsPage() {
+  const [tags, setTags] = useState<TagWithCount[] | null>(null);
+
+  useEffect(() => {
+    network.getAllTags().then((res) => {
+      if (res.success) {
+        setTags(res.data!);
+      } else {
+        showToast({
+          type: "error",
+          message: res.message || "Failed to load tags"
+        })
+      }
+    })
+  }, []);
+
+  const navigate = useNavigate()
+
+  if (!tags) {
+    return <Loading/>
+  }
+
+  const tagsMap = new Map<string, TagWithCount[]>();
+
+  for (const tag of tags || []) {
+    const type = tag.type
+    if (!tagsMap.has(type)) {
+      tagsMap.set(type, []);
+    }
+    tagsMap.get(type)?.push(tag);
+  }
+
+  for (const [_, tags] of tagsMap) {
+    tags.sort((a, b) => b.resources_count - a.resources_count);
+  }
+
+  return <div className="flex flex-col gap-4 p-4">
+    <h1 className={"text-2xl font-bold py-2"}>Tags</h1>
+    {Array.from(tagsMap.entries()).map(([type, tags]) => (
+      <div key={type} className="flex flex-col gap-2">
+        <h2 className="text-lg font-bold pl-1">{type == "" ? "Other" : type}</h2>
+        <p>
+          {tags.map(tag => (
+            <Badge onClick={() => {
+              navigate(`/tag/${tag.name}`);
+            }} key={tag.name} className={"m-1 cursor-pointer badge-soft badge-primary"}>
+              {tag.name + (tag.resources_count > 0 ? ` (${tag.resources_count})` : "")}
+            </Badge>
+          ))}
+        </p>
+      </div>
+    ))}
+  </div>
+}