feat: Render human tags before AI tags (#1740)

3 files changed, 40 insertions, 29 deletions

diff --git a/apps/browser-extension/src/components/TagList.tsx b/apps/browser-extension/src/components/TagList.tsx
index 4c5f6dfa..5635a7c2 100644
--- a/apps/browser-extension/src/components/TagList.tsx
+++ b/apps/browser-extension/src/components/TagList.tsx
@@ -14,16 +14,20 @@ export default function TagList({ bookmarkId }: { bookmarkId: string }) {
       {bookmark.tags.length === 0 && !isBookmarkStillTagging(bookmark) && (
         <Badge variant="secondary">No tags</Badge>
       )}
-      {bookmark.tags.map((tag) => (
-        <Badge
-          key={tag.id}
-          className={
-            tag.attachedBy == "ai" ? "bg-purple-500 text-white" : undefined
-          }
-        >
-          {tag.name}
-        </Badge>
-      ))}
+      {[...bookmark.tags]
+        .sort((a, b) =>
+          a.attachedBy === "ai" ? 1 : b.attachedBy === "ai" ? -1 : 0,
+        )
+        .map((tag) => (
+          <Badge
+            key={tag.id}
+            className={
+              tag.attachedBy === "ai" ? "bg-purple-500 text-white" : undefined
+            }
+          >
+            {tag.name}
+          </Badge>
+        ))}
       {isBookmarkStillTagging(bookmark) && (
         <Badge variant="secondary">AI tags loading...</Badge>
       )}
diff --git a/apps/web/components/dashboard/bookmarks/TagList.tsx b/apps/web/components/dashboard/bookmarks/TagList.tsx
index 593a269b..e8bed9eb 100644
--- a/apps/web/components/dashboard/bookmarks/TagList.tsx
+++ b/apps/web/components/dashboard/bookmarks/TagList.tsx
@@ -24,20 +24,24 @@ export default function TagList({
   }
   return (
     <>
-      {bookmark.tags.map((t) => (
-        <div key={t.id} className={className}>
-          <Link
-            key={t.id}
-            className={cn(
-              badgeVariants({ variant: "secondary" }),
-              "text-nowrap font-light text-gray-700 hover:bg-foreground hover:text-secondary dark:text-gray-400",
-            )}
-            href={`/dashboard/tags/${t.id}`}
-          >
-            {t.name}
-          </Link>
-        </div>
-      ))}
+      {bookmark.tags
+        .sort((a, b) =>
+          a.attachedBy === "ai" ? 1 : b.attachedBy === "ai" ? -1 : 0,
+        )
+        .map((t) => (
+          <div key={t.id} className={className}>
+            <Link
+              key={t.id}
+              className={cn(
+                badgeVariants({ variant: "secondary" }),
+                "text-nowrap font-light text-gray-700 hover:bg-foreground hover:text-secondary dark:text-gray-400",
+              )}
+              href={`/dashboard/tags/${t.id}`}
+            >
+              {t.name}
+            </Link>
+          </div>
+        ))}
     </>
   );
 }
diff --git a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
index 5efdd0dd..1893c2a6 100644
--- a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
+++ b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
@@ -96,11 +96,14 @@ export function TagsEditor({
           attachedBy: "human" as const,
         })) ?? []
       }
-      value={optimisticTags.map((t) => ({
-        label: t.name,
-        value: t.id,
-        attachedBy: t.attachedBy,
-      }))}
+      value={optimisticTags
+        .slice()
+        .sort((a) => (a.attachedBy === "human" ? -1 : 1))
+        .map((t) => ({
+          label: t.name,
+          value: t.id,
+          attachedBy: t.attachedBy,
+        }))}
       isMulti
       closeMenuOnSelect={false}
       isClearable={false}