feat(AppliedTagFilter): show readonly applied filters

src/components/AppliedTagFilter/AppliedTagFilter.tsx

@@ -0,0 +1,19 @@
+import { trpc } from '../../utils/trpcClient';
+import { AppliedFilter } from '../AppliedFilter/AppliedFilter';
+import { TagDropdown } from '../TagDropdown/TagDropdown';
+
+interface AppliedTagsFilterProps {
+    value?: string[];
+    label?: string;
+    readOnly?: boolean;
+}
+
+export const AppliedTagFilter = ({ value = [], label, readOnly }: AppliedTagsFilterProps) => {
+    const { data } = trpc.tag.getByIds.useQuery(value);
+
+    return (
+        <AppliedFilter readOnly={readOnly} label={label}>
+            <TagDropdown mode="multiple" value={data} readOnly={readOnly} placement="bottom" />
+        </AppliedFilter>
+    );
+};

src/components/FiltersPanel/FiltersPanel.tsx

@@ -41,6 +41,7 @@ import { AppliedPriorityFilter } from '../AppliedPriorityFilter/AppliedPriorityF
 import { AppliedStateFilter } from '../AppliedStateFilter/AppliedStateFilter';
 import { AppliedUsersFilter } from '../AppliedUsersFilter/AppliedUsersFilter';
 import { PageUserMenu } from '../PageUserMenu';
+import { AppliedTagFilter } from '../AppliedTagFilter/AppliedTagFilter';
 
 import { tr } from './FiltersPanel.i18n';
 
@@ -286,6 +287,9 @@ export const FiltersPanel: FC<{
                     {nullable(Boolean(queryFilterState?.project), () => (
                         <AppliedGoalParentFilter label={tr('Project')} value={queryFilterState?.project} readOnly />
                     ))}
+                    {nullable(Boolean(queryFilterState?.tag), () => (
+                        <AppliedTagFilter label={tr('Tags')} value={queryFilterState?.tag} readOnly />
+                    ))}
                     <Button
                         ref={filterTriggerRef}
                         text={tr('Filter')}

trpc/router/tag.ts

@@ -1,4 +1,5 @@
 import { Prisma } from '@prisma/client';
+import { z } from 'zod';
 
 import { prisma } from '../../src/utils/prisma';
 import { protectedProcedure, router } from '../trpcBackend';
@@ -50,4 +51,13 @@ export const tag = router({
             },
         });
     }),
+    getByIds: protectedProcedure.input(z.array(z.string())).query(({ input }) => {
+        return prisma.tag.findMany({
+            where: {
+                id: {
+                    in: input,
+                },
+            },
+        });
+    }),
 });