From ce2c9f03c229fcf51ec68284bcccdb84e9816f2b Mon Sep 17 00:00:00 2001
From: Roland <roland@learningselfreliance.com>
Date: Wed, 24 Dec 2025 11:46:28 -0700
Subject: [PATCH] Displaying Files, Zims, Channels and Domains columns when
 editing Tags.

---
 app/src/Tags.js          | 45 +++++++++++++++++++++++++++++++++-------
 wrolpi/tags.py           |  4 +++-
 wrolpi/test/test_tags.py |  6 ++++--
 3 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/app/src/Tags.js b/app/src/Tags.js
index 468833bf..e51f5cbd 100644
--- a/app/src/Tags.js
+++ b/app/src/Tags.js
@@ -184,7 +184,7 @@ export const useTagsInterval = () => {
 
 function EditTagRow({tag, onDelete, onEdit}) {
     const {SingleTag} = React.useContext(TagsContext);
-    const {name, color, id, file_group_count, zim_entry_count} = tag;
+    const {name, color, id, file_group_count, zim_entry_count, channel_count, domain_count} = tag;
 
     const deleteConfirm = <>
         <APIButton
@@ -196,18 +196,39 @@ function EditTagRow({tag, onDelete, onEdit}) {
         />
     </>;
     const editButton = <Button primary onClick={() => onEdit(name, color, id)} icon='edit'/>;
-    const countColor = (file_group_count + zim_entry_count) > 0 ? 'black' : 'grey';
-    const countLabel = <Label color={countColor}>{file_group_count + zim_entry_count}</Label>;
+
+    // Individual count labels for tablet+
+    const fileCountColor = file_group_count > 0 ? 'black' : 'grey';
+    const fileCountLabel = <Label color={fileCountColor}>{file_group_count}</Label>;
+    const zimCountColor = zim_entry_count > 0 ? 'black' : 'grey';
+    const zimCountLabel = <Label color={zimCountColor}>{zim_entry_count}</Label>;
+    const channelCountColor = channel_count > 0 ? 'black' : 'grey';
+    const channelCountLabel = <Label color={channelCountColor}>{channel_count}</Label>;
+    const domainCountColor = domain_count > 0 ? 'black' : 'grey';
+    const domainCountLabel = <Label color={domainCountColor}>{domain_count}</Label>;
+
+    // Combined count for mobile
+    const totalCount = file_group_count + zim_entry_count + channel_count + domain_count;
+    const totalCountColor = totalCount > 0 ? 'black' : 'grey';
+    const totalCountLabel = <Label color={totalCountColor}>{totalCount}</Label>;
 
     return <TableRow>
         <TableCell>{deleteConfirm}</TableCell>
         <TableCell>{editButton}</TableCell>
         <TableCell><SingleTag name={name}/></TableCell>
+        <Media at='mobile'>
+            {(className, renderChildren) => {
+                return renderChildren ? <TableCell className={className}>{totalCountLabel}</TableCell> : null;
+            }}
+        </Media>
         <Media greaterThanOrEqual='tablet'>
             {(className, renderChildren) => {
-                return renderChildren ? <TableCell className={className}>
-                        {countLabel}
-                    </TableCell>
+                return renderChildren ? <>
+                        <TableCell className={className}>{fileCountLabel}</TableCell>
+                        <TableCell className={className}>{zimCountLabel}</TableCell>
+                        <TableCell className={className}>{channelCountLabel}</TableCell>
+                        <TableCell className={className}>{domainCountLabel}</TableCell>
+                    </>
                     : null;
             }}
         </Media>
@@ -278,12 +299,20 @@ function EditTagsModal() {
     }
 
     const tableHeaders = [
+        {key: 'delete', text: 'Delete', sortBy: null, width: 1},
+        {key: 'edit', text: 'Edit', sortBy: null, width: 1},
+        {key: 'name', text: 'Name', sortBy: 'name', width: 4},
+        {key: 'files', text: 'Files', sortBy: 'file_group_count', width: 2},
+        {key: 'zims', text: 'Zims', sortBy: 'zim_entry_count', width: 2},
+        {key: 'channels', text: 'Channels', sortBy: 'channel_count', width: 2},
+        {key: 'domains', text: 'Domains', sortBy: 'domain_count', width: 2},
+    ];
+    const mobileTableHeaders = [
         {key: 'delete', text: 'Delete', sortBy: null, width: 2},
         {key: 'edit', text: 'Edit', sortBy: null, width: 2},
         {key: 'name', text: 'Name', sortBy: 'name', width: 8},
-        {key: 'count', text: 'Count', sortBy: i => i['file_group_count'] + i['zim_entry_count'], width: 2},
+        {key: 'count', text: 'Count', sortBy: i => i['file_group_count'] + i['zim_entry_count'] + i['channel_count'] + i['domain_count'], width: 4},
     ];
-    const mobileTableHeaders = tableHeaders.slice(3);
 
     return <>
         <Modal closeIcon
diff --git a/wrolpi/tags.py b/wrolpi/tags.py
index 611890c5..e3c69809 100644
--- a/wrolpi/tags.py
+++ b/wrolpi/tags.py
@@ -650,7 +650,9 @@ def get_tags() -> List[dict]:
                             t.name,
                             t.color,
                             (SELECT COUNT(*) FROM tag_file WHERE tag_id = t.id) AS file_group_count,
-                            (SELECT COUNT(*) FROM tag_zim WHERE tag_id = t.id)  AS zim_entry_count
+                            (SELECT COUNT(*) FROM tag_zim WHERE tag_id = t.id)  AS zim_entry_count,
+                            (SELECT COUNT(*) FROM collection WHERE tag_id = t.id AND kind = 'channel') AS channel_count,
+                            (SELECT COUNT(*) FROM collection WHERE tag_id = t.id AND kind = 'domain') AS domain_count
                      FROM tag t
                      GROUP BY t.id, t.name, t.color
                      ORDER BY t.name
diff --git a/wrolpi/test/test_tags.py b/wrolpi/test/test_tags.py
index 0121b63b..6f4d3596 100644
--- a/wrolpi/test/test_tags.py
+++ b/wrolpi/test/test_tags.py
@@ -162,7 +162,8 @@ async def test_tags_crud(async_client, test_session, example_pdf, assert_tags_co
     # The tag can be retrieved.
     request, response = await async_client.get('/api/tag')
     assert response.status_code == HTTPStatus.OK
-    assert response.json['tags'] == [dict(name='jardín', color='#123456', id=1, file_group_count=0, zim_entry_count=0)]
+    assert response.json['tags'] == [dict(name='jardín', color='#123456', id=1, file_group_count=0, zim_entry_count=0,
+                                          channel_count=0, domain_count=0)]
 
     # Apply the tag to the PDF.
     tag = test_session.query(tags.Tag).one()
@@ -175,7 +176,8 @@ async def test_tags_crud(async_client, test_session, example_pdf, assert_tags_co
     assert response.status_code == HTTPStatus.OK
     request, response = await async_client.get('/api/tag')
     assert response.json['tags'] == [
-        dict(name='ガーデン', color='#000000', id=1, file_group_count=1, zim_entry_count=0)]
+        dict(name='ガーデン', color='#000000', id=1, file_group_count=1, zim_entry_count=0,
+             channel_count=0, domain_count=0)]
     assert_tags_config(tags={'ガーデン': {'color': '#000000'}})
 
     # Tag color can be changed