Improvements to tags pages

Author: fileformat

app/components/Tag.tsx

@@ -3,13 +3,15 @@ import { Link as RemixLink } from "@remix-run/react";
 type TagProps = {
     tag: string,
     url: string,
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void,
 }
 
-export function Tag({ tag, url }: TagProps) {
+export function Tag({ tag, onClick, url }: TagProps) {
     return (
         <RemixLink
             key={tag}
             to={url}
+            onClick={onClick}
             preventScrollReset={true}
             className="badge text-bg-primary text-decoration-none me-2"
         >

app/components/TagTree.tsx

@@ -13,8 +13,18 @@ export type TagTreeEntry = {
 
 function TagTreeRow(tag: string, currentTag: string, entries: SerializeFrom<TagTreeEntry>[]) {
     return (
-        <details className="mt-2" open={tag === currentTag}>
-            <summary><Tag tag={tag} url={`?tag=${encodeURIComponent(tag)}`} /></summary>
+        <details className="mt-2" open={tag === currentTag} key={tag} id={tag}>
+            <summary><Tag tag={tag} url={`?tag=${encodeURIComponent(tag)}`} onClick={(e) => {
+                console.log(`clicked ${tag}`);
+                e.preventDefault();
+                const el = document.getElementById(tag) as HTMLDetailsElement | null;
+                if (el == null) {
+                    console.log(`how is el for ${tag} null?`);
+                    return;
+                }
+                el.open = !el.open;
+                history.replaceState(null, "", `?tag=${encodeURIComponent(tag)}`);
+            }} /> ({entries.length})</summary>
             <ul className="mt-1">
                 {entries?.map((entry) => (
                     <li key={entry.url}>

app/routes/links.edit[.]html.tsx

@@ -1,6 +1,7 @@
 import type { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { json, Link as RemixLink, redirect, useLoaderData, useSearchParams } from "@remix-run/react";
 import { eq } from "drizzle-orm"
+import { PiArrowSquareOut } from "react-icons/pi";
 
 import { dborm } from "~/db/connection.server";
 import { regex_link } from "~/db/schema";
@@ -81,7 +82,7 @@ export default function Index() {
     const [searchParams] = useSearchParams();
     const next = searchParams.get("next") || "/links/";
 
-    const theLink = data.link;
+    const theLink = data.link as unknown as typeof regex_link.$inferSelect;
 
     return (
         <>
@@ -90,7 +91,7 @@ export default function Index() {
                 <input type="hidden" name="rxl_id" value={theLink.rxl_id} />
                 <input type="hidden" name="next" value={next} />
                 <div className="mb-3">
-                    <label htmlFor="rxl_url" className="form-label">URL</label>
+                    <label htmlFor="rxl_url" className="form-label">URL <a className="ms-2" href={theLink.rxl_url} target="_new">open<PiArrowSquareOut className="ms-1"/></a></label>
                     <input type="text" className="form-control" id="rxl_url" name="rxl_url" defaultValue={theLink.rxl_url} />
                 </div>
                 <div className="mb-3">

app/routes/links.tags[.]html.tsx

@@ -1,7 +1,8 @@
-import type { MetaFunction } from "@remix-run/node";
+import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { json, Link as RemixLink, useLoaderData, useSearchParams } from "@remix-run/react";
 import { dbconnection } from "~/db/connection.server";
 import { TagTree, TagTreeEntry } from "~/components/TagTree";
+import { authenticator } from "~/services/auth.server";
 
 
 export const meta: MetaFunction = () => {
@@ -10,7 +11,9 @@ export const meta: MetaFunction = () => {
     ];
 };
 
-export async function loader() {
+export async function loader({ request }: LoaderFunctionArgs) {
+
+    const user = await authenticator.isAuthenticated(request);
 
     const taglinks = await dbconnection`SELECT rxl_id, rxl_title, rxl_url, UNNEST(rxl_tags) as tag FROM regex_link ORDER BY tag`;
 
@@ -22,7 +25,11 @@ export async function loader() {
             links = [];
             tagmap[tag] = links;
         }
-        links.push({ id: taglink.rxl_id, title: taglink.rxl_title, url: taglink.rxl_url });
+        links.push({ 
+            id: taglink.rxl_id, 
+            title: taglink.rxl_title, 
+            url: user?.isAdmin ? `/links/edit.html?rxl_id=${encodeURIComponent(taglink.rxl_id)}` : taglink.rxl_url 
+        });
     }
 
     return json(tagmap);
@@ -37,7 +44,10 @@ export default function Tags() {
         <>
             <h1 className="py-2">Links by Tag</h1>
             {TagTree(currentTag, tagMap)}
-            <RemixLink to="/links/untagged.html" className="btn btn-primary">Untagged</RemixLink>
+            <div className="mt-3">
+                {Object.entries(tagMap).length} tags
+            </div>
+            <RemixLink to="/links/untagged.html" className="btn btn-primary mt-3">Untagged</RemixLink>
         </>
     );
 

app/routes/patterns.tags[.]html.tsx

@@ -43,10 +43,9 @@ export default function Tags() {
         <>
             <h1 className="py-2">Tags</h1>
             { TagTree(currentTag, tagMap) }
-            <hr />
-            <details><summary>Raw data</summary>
-                <pre>{JSON.stringify(tagMap, null, 4)}</pre>
-            </details>
+            <div className="mt-3">
+                {Object.entries(tagMap).length} tags
+            </div>
         </>
     );
 }

app/util/constants.ts

@@ -0,0 +1,3 @@
+
+
+export const MIN_ARCHIVE_YEAR = 2007;