From a1524f01eb2921cc03975b93fe32411041e9b6e9 Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Tue, 11 Jun 2024 16:13:40 +0000
Subject: [PATCH 01/12] Add filter tags to generic list items

---
 libs/cms/src/lib/generated/contentfulTypes.d.ts        | 10 ++++++++--
 libs/cms/src/lib/models/genericList.model.ts           |  5 +++++
 libs/cms/src/lib/models/genericListItem.model.ts       |  5 +++++
 .../lib/search/importers/genericListItem.service.ts    |  6 +++++-
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/libs/cms/src/lib/generated/contentfulTypes.d.ts b/libs/cms/src/lib/generated/contentfulTypes.d.ts
index 7bdfdf7dddc8..82c4890c4294 100644
--- a/libs/cms/src/lib/generated/contentfulTypes.d.ts
+++ b/libs/cms/src/lib/generated/contentfulTypes.d.ts
@@ -1548,6 +1548,9 @@ export interface IGenericListFields {
 
   /** Item Type */
   itemType?: 'Non-clickable' | 'Clickable' | undefined
+
+  /** Filter Tags */
+  filterTags?: IGenericTag[] | undefined
 }
 
 /** A list of items which can be embedded into rich text */
@@ -1585,11 +1588,14 @@ export interface IGenericListItemFields {
   /** Card Intro */
   cardIntro?: Document | undefined
 
+  /** Slug */
+  slug?: string | undefined
+
   /** Content */
   content?: Document | undefined
 
-  /** Slug */
-  slug?: string | undefined
+  /** Filter Tags */
+  filterTags?: IGenericTag[] | undefined
 }
 
 /** An item that belongs to a generic list */
diff --git a/libs/cms/src/lib/models/genericList.model.ts b/libs/cms/src/lib/models/genericList.model.ts
index 48622500262f..71612005b311 100644
--- a/libs/cms/src/lib/models/genericList.model.ts
+++ b/libs/cms/src/lib/models/genericList.model.ts
@@ -5,6 +5,7 @@ import { CacheField } from '@island.is/nest/graphql'
 import { IGenericList, IGenericListFields } from '../generated/contentfulTypes'
 import { GenericListItemResponse } from './genericListItemResponse.model'
 import { GetGenericListItemsInput } from '../dto/getGenericListItems.input'
+import { GenericTag, mapGenericTag } from './genericTag.model'
 
 enum GenericListItemType {
   NonClickable = 'NonClickable',
@@ -28,6 +29,9 @@ export class GenericList {
 
   @CacheField(() => GenericListItemType, { nullable: true })
   itemType?: GenericListItemType
+
+  @CacheField(() => [GenericTag], { nullable: true })
+  filterTags?: GenericTag[]
 }
 
 const mapItemType = (itemType?: IGenericListFields['itemType']) =>
@@ -49,4 +53,5 @@ export const mapGenericList = ({
   },
   searchInputPlaceholder: fields.searchInputPlaceholder,
   itemType: mapItemType(fields.itemType),
+  filterTags: fields.filterTags ? fields.filterTags.map(mapGenericTag) : [],
 })
diff --git a/libs/cms/src/lib/models/genericListItem.model.ts b/libs/cms/src/lib/models/genericListItem.model.ts
index d14c6ebc1a59..5754b3757227 100644
--- a/libs/cms/src/lib/models/genericListItem.model.ts
+++ b/libs/cms/src/lib/models/genericListItem.model.ts
@@ -3,6 +3,7 @@ import { Field, ID, ObjectType } from '@nestjs/graphql'
 import { SliceUnion, mapDocument } from '../unions/slice.union'
 import { GenericList, mapGenericList } from './genericList.model'
 import { IGenericListItem } from '../generated/contentfulTypes'
+import { GenericTag, mapGenericTag } from './genericTag.model'
 
 @ObjectType()
 export class GenericListItem {
@@ -26,6 +27,9 @@ export class GenericListItem {
 
   @Field(() => String, { nullable: true })
   slug?: string
+
+  @CacheField(() => [GenericTag], { nullable: true })
+  filterTags?: GenericTag[]
 }
 
 export const mapGenericListItem = ({
@@ -45,4 +49,5 @@ export const mapGenericListItem = ({
     ? mapDocument(fields.content, `${sys.id}:content`)
     : [],
   slug: fields.slug,
+  filterTags: fields.filterTags ? fields.filterTags.map(mapGenericTag) : [],
 })
diff --git a/libs/cms/src/lib/search/importers/genericListItem.service.ts b/libs/cms/src/lib/search/importers/genericListItem.service.ts
index 6c8e4981c0c4..88291a7f8f24 100644
--- a/libs/cms/src/lib/search/importers/genericListItem.service.ts
+++ b/libs/cms/src/lib/search/importers/genericListItem.service.ts
@@ -38,7 +38,11 @@ export class GenericListItemSyncService
             2,
           )
 
-          const tags: MappedData['tags'] = []
+          const tags: MappedData['tags'] =
+            mapped.filterTags?.map((tag) => ({
+              type: 'genericTag',
+              key: tag.id,
+            })) ?? []
 
           if (mapped.genericList) {
             tags.push({

From 268808316ba98be1fa89745dca34389664541321 Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Wed, 12 Jun 2024 10:35:32 +0000
Subject: [PATCH 02/12] Add query params

---
 .../components/GenericList/GenericList.tsx    | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/apps/web/components/GenericList/GenericList.tsx b/apps/web/components/GenericList/GenericList.tsx
index c81fa54c431b..6b8b777e2168 100644
--- a/apps/web/components/GenericList/GenericList.tsx
+++ b/apps/web/components/GenericList/GenericList.tsx
@@ -1,7 +1,8 @@
-import { useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { useDebounce } from 'react-use'
 import { Locale } from 'locale'
 import { useRouter } from 'next/router'
+import { parseAsInteger, useQueryState } from 'next-usequerystate'
 import { useLazyQuery } from '@apollo/client'
 
 import {
@@ -17,6 +18,7 @@ import {
   Stack,
   Text,
 } from '@island.is/island-ui/core'
+import { stringHash } from '@island.is/shared/utils'
 import {
   GenericListItem,
   GenericListItemResponse,
@@ -125,8 +127,15 @@ export const GenericList = ({
   searchInputPlaceholder,
   itemType,
 }: GenericListProps) => {
-  const [searchValue, setSearchValue] = useState('')
-  const [page, setPage] = useState(1)
+  const hashedId = useMemo(() => {
+    return stringHash(id).toString().slice(0, 4)
+  }, [id])
+
+  const searchQueryId = `${hashedId}q`
+  const pageQueryId = `${hashedId}page`
+
+  const [searchValue, setSearchValue] = useQueryState(searchQueryId)
+  const [page, setPage] = useQueryState(pageQueryId, parseAsInteger)
   const pageRef = useRef(page)
   const searchValueRef = useRef(searchValue)
   const [itemsResponse, setItemsResponse] = useState(firstPageItemResponse)
@@ -171,8 +180,8 @@ export const GenericList = ({
             genericListId: id,
             size: ITEMS_PER_PAGE,
             lang: activeLocale,
-            page,
-            queryString: searchValue,
+            page: page ?? 1,
+            queryString: searchValue || '',
           },
         },
       })
@@ -201,12 +210,12 @@ export const GenericList = ({
             <FilterInput
               name="list-search"
               onChange={(value) => {
-                setSearchValue(value)
+                setSearchValue(value || null)
                 searchValueRef.current = value
-                setPage(1)
+                setPage(null)
                 pageRef.current = 1
               }}
-              value={searchValue}
+              value={searchValue ?? ''}
               loading={loading}
               placeholder={searchInputPlaceholder ?? undefined}
               backgroundColor="white"
@@ -232,7 +241,7 @@ export const GenericList = ({
                 </Text>
                 {totalPages > 1 && (
                   <Text>
-                    {activeLocale === 'is' ? 'Síða' : 'Page'} {page}{' '}
+                    {activeLocale === 'is' ? 'Síða' : 'Page'} {page ?? 1}{' '}
                     {activeLocale === 'is' ? 'af' : 'of'} {totalPages}
                   </Text>
                 )}
@@ -264,13 +273,13 @@ export const GenericList = ({
 
           {totalItems > ITEMS_PER_PAGE && (
             <Pagination
-              page={page}
+              page={page ?? 1}
               itemsPerPage={ITEMS_PER_PAGE}
               totalItems={totalItems}
               renderLink={(page, className, children) => (
                 <button
                   onClick={() => {
-                    setPage(page)
+                    setPage(page === 1 ? null : page)
                     pageRef.current = page
 
                     // Scroll to top of the list on page change

From 22d03ecc020f7301e764dfa92c4c5e0ae1ff4a8d Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Wed, 12 Jun 2024 12:00:56 +0000
Subject: [PATCH 03/12] Add todos

---
 apps/web/components/GenericList/GenericList.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/web/components/GenericList/GenericList.tsx b/apps/web/components/GenericList/GenericList.tsx
index 6b8b777e2168..729277d5d63a 100644
--- a/apps/web/components/GenericList/GenericList.tsx
+++ b/apps/web/components/GenericList/GenericList.tsx
@@ -134,6 +134,10 @@ export const GenericList = ({
   const searchQueryId = `${hashedId}q`
   const pageQueryId = `${hashedId}page`
 
+  // TODO: add query params for filter tag search
+  // TODO: ignore initial response if there are query params set and fetch according to the query params
+  // TODO: perhaps add referrer decorator to graphql resolver so we can read query params
+
   const [searchValue, setSearchValue] = useQueryState(searchQueryId)
   const [page, setPage] = useQueryState(pageQueryId, parseAsInteger)
   const pageRef = useRef(page)

From c7297ef847dcf6497a7a72fd2e70652bc2492bb5 Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Wed, 12 Jun 2024 15:32:13 +0000
Subject: [PATCH 04/12] Add todos

---
 apps/web/components/GenericList/GenericList.tsx   | 8 ++------
 libs/cms/src/lib/cms.elasticsearch.service.ts     | 1 +
 libs/cms/src/lib/dto/getGenericListItems.input.ts | 2 ++
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/GenericList/GenericList.tsx b/apps/web/components/GenericList/GenericList.tsx
index 729277d5d63a..5dbade353e52 100644
--- a/apps/web/components/GenericList/GenericList.tsx
+++ b/apps/web/components/GenericList/GenericList.tsx
@@ -127,12 +127,8 @@ export const GenericList = ({
   searchInputPlaceholder,
   itemType,
 }: GenericListProps) => {
-  const hashedId = useMemo(() => {
-    return stringHash(id).toString().slice(0, 4)
-  }, [id])
-
-  const searchQueryId = `${hashedId}q`
-  const pageQueryId = `${hashedId}page`
+  const searchQueryId = `${id}q`
+  const pageQueryId = `${id}page`
 
   // TODO: add query params for filter tag search
   // TODO: ignore initial response if there are query params set and fetch according to the query params
diff --git a/libs/cms/src/lib/cms.elasticsearch.service.ts b/libs/cms/src/lib/cms.elasticsearch.service.ts
index 8e90d69363c7..3bd9d8a74f13 100644
--- a/libs/cms/src/lib/cms.elasticsearch.service.ts
+++ b/libs/cms/src/lib/cms.elasticsearch.service.ts
@@ -479,6 +479,7 @@ export class CmsElasticsearchService {
                   },
                 },
               ],
+              // TODO: implement .concat(generateGenericTagGroupQueries()),
             },
           },
         },
diff --git a/libs/cms/src/lib/dto/getGenericListItems.input.ts b/libs/cms/src/lib/dto/getGenericListItems.input.ts
index df6d836c12ec..4f04403eefbf 100644
--- a/libs/cms/src/lib/dto/getGenericListItems.input.ts
+++ b/libs/cms/src/lib/dto/getGenericListItems.input.ts
@@ -27,4 +27,6 @@ export class GetGenericListItemsInput {
   @IsString()
   @IsOptional()
   queryString?: string
+
+  // TODO: add tags and tagGroups
 }

From 19fd1fded64bbb019342ecd191e919ff737f7c43 Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Fri, 14 Jun 2024 14:15:01 +0000
Subject: [PATCH 05/12] Add tag query support in backend

---
 .../Organization/Slice/SliceMachine.tsx       |  1 +
 apps/web/screens/queries/fragments.ts         |  2 ++
 apps/web/utils/richText.tsx                   |  1 +
 libs/cms/src/lib/cms.elasticsearch.service.ts | 31 +++++++++++--------
 .../src/lib/dto/getGenericListItems.input.ts  |  9 ++++--
 5 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/apps/web/components/Organization/Slice/SliceMachine.tsx b/apps/web/components/Organization/Slice/SliceMachine.tsx
index 1ff93403ffa8..9cd6b0494820 100644
--- a/apps/web/components/Organization/Slice/SliceMachine.tsx
+++ b/apps/web/components/Organization/Slice/SliceMachine.tsx
@@ -192,6 +192,7 @@ const renderSlice = (
             (slice as GenericListSchema).searchInputPlaceholder
           }
           itemType={(slice as GenericListSchema).itemType}
+          filterTags={(slice as GenericListSchema).filterTags}
         />
       )
     default:
diff --git a/apps/web/screens/queries/fragments.ts b/apps/web/screens/queries/fragments.ts
index b3990c0a5e08..cd4b73da8c72 100644
--- a/apps/web/screens/queries/fragments.ts
+++ b/apps/web/screens/queries/fragments.ts
@@ -862,6 +862,8 @@ export const slices = gql`
         page
         queryString
         size
+        tags
+        tagGroups
       }
       items {
         id
diff --git a/apps/web/utils/richText.tsx b/apps/web/utils/richText.tsx
index a8a0b163ddad..e3fac688bd5a 100644
--- a/apps/web/utils/richText.tsx
+++ b/apps/web/utils/richText.tsx
@@ -194,6 +194,7 @@ const defaultRenderComponent = {
       firstPageItemResponse={slice.firstPageListItemResponse}
       searchInputPlaceholder={slice.searchInputPlaceholder}
       itemType={slice.itemType}
+      filterTags={slice.filterTags}
     />
   ),
 }
diff --git a/libs/cms/src/lib/cms.elasticsearch.service.ts b/libs/cms/src/lib/cms.elasticsearch.service.ts
index 3bd9d8a74f13..268cef094a77 100644
--- a/libs/cms/src/lib/cms.elasticsearch.service.ts
+++ b/libs/cms/src/lib/cms.elasticsearch.service.ts
@@ -454,6 +454,23 @@ export class CmsElasticsearchService {
   async getGenericListItems(
     input: GetGenericListItemsInput,
   ): Promise<GenericListItemResponse> {
+    const tagsMust: unknown[] = [
+      {
+        term: {
+          'tags.key': input.genericListId,
+        },
+      },
+      {
+        term: {
+          'tags.type': 'referencedBy',
+        },
+      },
+    ]
+
+    if (input.tags && input.tagGroups) {
+      tagsMust.push(generateGenericTagGroupQueries(input.tags, input.tagGroups))
+    }
+
     const must: Record<string, unknown>[] = [
       {
         term: {
@@ -467,19 +484,7 @@ export class CmsElasticsearchService {
           path: 'tags',
           query: {
             bool: {
-              must: [
-                {
-                  term: {
-                    'tags.key': input.genericListId,
-                  },
-                },
-                {
-                  term: {
-                    'tags.type': 'referencedBy',
-                  },
-                },
-              ],
-              // TODO: implement .concat(generateGenericTagGroupQueries()),
+              must: tagsMust,
             },
           },
         },
diff --git a/libs/cms/src/lib/dto/getGenericListItems.input.ts b/libs/cms/src/lib/dto/getGenericListItems.input.ts
index 4f04403eefbf..4a2104bac400 100644
--- a/libs/cms/src/lib/dto/getGenericListItems.input.ts
+++ b/libs/cms/src/lib/dto/getGenericListItems.input.ts
@@ -1,6 +1,7 @@
-import { ElasticsearchIndexLocale } from '@island.is/content-search-index-manager'
 import { Field, InputType, Int, ObjectType } from '@nestjs/graphql'
 import { IsInt, IsOptional, IsString } from 'class-validator'
+import GraphQLJSON from 'graphql-type-json'
+import { ElasticsearchIndexLocale } from '@island.is/content-search-index-manager'
 
 @InputType()
 @ObjectType('GenericListItemResponseInput')
@@ -28,5 +29,9 @@ export class GetGenericListItemsInput {
   @IsOptional()
   queryString?: string
 
-  // TODO: add tags and tagGroups
+  @Field(() => [String], { nullable: true })
+  tags?: string[]
+
+  @Field(() => GraphQLJSON, { nullable: true })
+  tagGroups?: Record<string, string[]>
 }

From 8b9ff698ac511710282bc6c387f01bc19abd3225 Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Fri, 14 Jun 2024 15:44:29 +0000
Subject: [PATCH 06/12] Display filter tags

---
 .../components/GenericList/GenericList.tsx    | 89 +++++++++++++++----
 apps/web/screens/queries/fragments.ts         | 10 +++
 libs/cms/src/lib/cms.elasticsearch.service.ts |  2 +-
 .../importers/genericListItem.service.ts      |  4 +-
 4 files changed, 88 insertions(+), 17 deletions(-)

diff --git a/apps/web/components/GenericList/GenericList.tsx b/apps/web/components/GenericList/GenericList.tsx
index 5dbade353e52..77f262484a9c 100644
--- a/apps/web/components/GenericList/GenericList.tsx
+++ b/apps/web/components/GenericList/GenericList.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useDebounce } from 'react-use'
 import { Locale } from 'locale'
 import { useRouter } from 'next/router'
@@ -8,7 +8,9 @@ import { useLazyQuery } from '@apollo/client'
 import {
   AlertMessage,
   Box,
+  Filter,
   FilterInput,
+  FilterMultiChoice,
   FocusableBox,
   GridColumn,
   GridContainer,
@@ -18,15 +20,18 @@ import {
   Stack,
   Text,
 } from '@island.is/island-ui/core'
-import { stringHash } from '@island.is/shared/utils'
+import { theme } from '@island.is/island-ui/theme'
 import {
   GenericListItem,
   GenericListItemResponse,
+  GenericTag,
   GetGenericListItemsQueryVariables,
   Query,
 } from '@island.is/web/graphql/schema'
+import { useWindowSize } from '@island.is/web/hooks/useViewport'
 import { useI18n } from '@island.is/web/i18n'
 import { useDateUtils } from '@island.is/web/i18n/useDateUtils'
+import { getFilterCategories } from '@island.is/web/screens/Organization/PublishedMaterial/utils'
 import { GET_GENERIC_LIST_ITEMS_QUERY } from '@island.is/web/screens/queries/GenericList'
 import { webRichText } from '@island.is/web/utils/richText'
 
@@ -119,6 +124,7 @@ interface GenericListProps {
   firstPageItemResponse?: GenericListItemResponse
   searchInputPlaceholder?: string | null
   itemType?: string | null
+  filterTags?: GenericTag[] | null
 }
 
 export const GenericList = ({
@@ -126,6 +132,7 @@ export const GenericList = ({
   firstPageItemResponse,
   searchInputPlaceholder,
   itemType,
+  filterTags,
 }: GenericListProps) => {
   const searchQueryId = `${id}q`
   const pageQueryId = `${id}page`
@@ -136,6 +143,9 @@ export const GenericList = ({
 
   const [searchValue, setSearchValue] = useQueryState(searchQueryId)
   const [page, setPage] = useQueryState(pageQueryId, parseAsInteger)
+
+  const initialFilterCategories = getFilterCategories(filterTags ?? [])
+
   const pageRef = useRef(page)
   const searchValueRef = useRef(searchValue)
   const [itemsResponse, setItemsResponse] = useState(firstPageItemResponse)
@@ -182,6 +192,8 @@ export const GenericList = ({
             lang: activeLocale,
             page: page ?? 1,
             queryString: searchValue || '',
+            tags: [],
+            tagGroups: {},
           },
         },
       })
@@ -190,6 +202,14 @@ export const GenericList = ({
     [searchValue, page],
   )
 
+  const { width } = useWindowSize()
+
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    setIsMobile(width < theme.breakpoints.md)
+  }, [width])
+
   const totalItems = itemsResponse?.total ?? 0
   const items = itemsResponse?.items ?? []
 
@@ -202,24 +222,63 @@ export const GenericList = ({
 
   const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE)
 
+  const filterInputComponent = (
+    <FilterInput
+      name="list-search"
+      onChange={(value) => {
+        setSearchValue(value || null)
+        searchValueRef.current = value
+        setPage(null)
+        pageRef.current = 1
+      }}
+      value={searchValue ?? ''}
+      loading={loading}
+      placeholder={searchInputPlaceholder ?? undefined}
+      backgroundColor="white"
+    />
+  )
+
   return (
     <Box paddingBottom={3}>
       <GridContainer>
         <Stack space={5}>
           <Box ref={ref}>
-            <FilterInput
-              name="list-search"
-              onChange={(value) => {
-                setSearchValue(value || null)
-                searchValueRef.current = value
-                setPage(null)
-                pageRef.current = 1
-              }}
-              value={searchValue ?? ''}
-              loading={loading}
-              placeholder={searchInputPlaceholder ?? undefined}
-              backgroundColor="white"
-            />
+            {initialFilterCategories.length > 0 && (
+              <Filter
+                resultCount={totalItems}
+                labelClear={'Hreinsa síu'}
+                labelClearAll={'Hreinsa allar síur'}
+                labelOpen={'Opna síu'}
+                labelClose={'Loka síu'}
+                labelResult={'Skoða niðurstöður'}
+                labelTitle={'Sía niðurstöður'}
+                variant={isMobile ? 'dialog' : 'popover'}
+                onFilterClear={() => {
+                  //
+                }}
+                filterInput={filterInputComponent}
+              >
+                <FilterMultiChoice
+                  labelClear={'Hreinsa val'}
+                  onChange={({ categoryId, selected }) => {
+                    // setIsTyping(true)
+                    // setParameters((prevParameters) => ({
+                    //   ...prevParameters,
+                    //   [categoryId]: selected,
+                    // }))
+                  }}
+                  onClear={(categoryId) => {
+                    // setIsTyping(true)
+                    // setParameters((prevParameters) => ({
+                    //   ...prevParameters,
+                    //   [categoryId]: [],
+                    // }))
+                  }}
+                  categories={initialFilterCategories}
+                />
+              </Filter>
+            )}
+            {initialFilterCategories.length === 0 && filterInputComponent}
           </Box>
           {errorOccurred && (
             <AlertMessage
diff --git a/apps/web/screens/queries/fragments.ts b/apps/web/screens/queries/fragments.ts
index cd4b73da8c72..015ade447af5 100644
--- a/apps/web/screens/queries/fragments.ts
+++ b/apps/web/screens/queries/fragments.ts
@@ -855,6 +855,16 @@ export const slices = gql`
     id
     searchInputPlaceholder
     itemType
+    filterTags {
+      id
+      title
+      slug
+      genericTagGroup {
+        id
+        title
+        slug
+      }
+    }
     firstPageListItemResponse {
       input {
         genericListId
diff --git a/libs/cms/src/lib/cms.elasticsearch.service.ts b/libs/cms/src/lib/cms.elasticsearch.service.ts
index 268cef094a77..54d21584147f 100644
--- a/libs/cms/src/lib/cms.elasticsearch.service.ts
+++ b/libs/cms/src/lib/cms.elasticsearch.service.ts
@@ -467,7 +467,7 @@ export class CmsElasticsearchService {
       },
     ]
 
-    if (input.tags && input.tagGroups) {
+    if (input.tags && input.tags.length > 0 && input.tagGroups) {
       tagsMust.push(generateGenericTagGroupQueries(input.tags, input.tagGroups))
     }
 
diff --git a/libs/cms/src/lib/search/importers/genericListItem.service.ts b/libs/cms/src/lib/search/importers/genericListItem.service.ts
index 88291a7f8f24..6c7ecf5cceb3 100644
--- a/libs/cms/src/lib/search/importers/genericListItem.service.ts
+++ b/libs/cms/src/lib/search/importers/genericListItem.service.ts
@@ -33,7 +33,9 @@ export class GenericListItemSyncService
           const mapped = mapGenericListItem(entry)
 
           const content = extractStringsFromObject(
-            mapped.cardIntro.map(pruneNonSearchableSliceUnionFields),
+            mapped.cardIntro
+              .concat(mapped.content ?? []) // TODO: should the content be searchable?
+              .map(pruneNonSearchableSliceUnionFields),
             100,
             2,
           )

From d3c750fb7afc79dd490c6314d34bb7f44a40b34b Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Fri, 14 Jun 2024 16:09:09 +0000
Subject: [PATCH 07/12] Add todos

---
 apps/web/components/GenericList/GenericList.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/GenericList/GenericList.tsx b/apps/web/components/GenericList/GenericList.tsx
index 77f262484a9c..0cb596f8d471 100644
--- a/apps/web/components/GenericList/GenericList.tsx
+++ b/apps/web/components/GenericList/GenericList.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useDebounce } from 'react-use'
 import { Locale } from 'locale'
 import { useRouter } from 'next/router'
-import { parseAsInteger, useQueryState } from 'next-usequerystate'
+import { parseAsInteger, parseAsJson, useQueryState } from 'next-usequerystate'
 import { useLazyQuery } from '@apollo/client'
 
 import {
@@ -136,6 +136,7 @@ export const GenericList = ({
 }: GenericListProps) => {
   const searchQueryId = `${id}q`
   const pageQueryId = `${id}page`
+  const tagQueryId = `${id}tag`
 
   // TODO: add query params for filter tag search
   // TODO: ignore initial response if there are query params set and fetch according to the query params
@@ -143,6 +144,7 @@ export const GenericList = ({
 
   const [searchValue, setSearchValue] = useQueryState(searchQueryId)
   const [page, setPage] = useQueryState(pageQueryId, parseAsInteger)
+  const [parameters, setParameters] = useQueryState(tagQueryId, parseAsJson())
 
   const initialFilterCategories = getFilterCategories(filterTags ?? [])
 
@@ -274,7 +276,7 @@ export const GenericList = ({
                     //   [categoryId]: [],
                     // }))
                   }}
-                  categories={initialFilterCategories}
+                  categories={initialFilterCategories} // TODO: dont use same thing as published material, do things differently and more efficiently here
                 />
               </Filter>
             )}

From aeecc4e8558a9c6c7cdc33986076dd039423bcf3 Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Tue, 18 Jun 2024 13:37:58 +0000
Subject: [PATCH 08/12] Add tag filters to url

---
 .../components/GenericList/GenericList.tsx    | 253 ++++++++++++------
 .../Organization/Slice/SliceMachine.tsx       |   3 -
 apps/web/screens/queries/GenericList.ts       |   5 +
 apps/web/screens/queries/fragments.ts         |  21 --
 apps/web/utils/richText.tsx                   |   1 -
 libs/cms/src/lib/cms.elasticsearch.service.ts |   6 +-
 libs/cms/src/lib/cms.module.ts                |   2 -
 libs/cms/src/lib/cms.resolver.ts              |  15 --
 libs/cms/src/lib/models/genericList.model.ts  |  12 -
 .../importers/genericListItem.service.ts      |   2 +-
 10 files changed, 184 insertions(+), 136 deletions(-)

diff --git a/apps/web/components/GenericList/GenericList.tsx b/apps/web/components/GenericList/GenericList.tsx
index 0cb596f8d471..606dd2373fda 100644
--- a/apps/web/components/GenericList/GenericList.tsx
+++ b/apps/web/components/GenericList/GenericList.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useDebounce } from 'react-use'
 import { Locale } from 'locale'
 import { useRouter } from 'next/router'
@@ -18,6 +18,7 @@ import {
   Inline,
   Pagination,
   Stack,
+  Tag,
   Text,
 } from '@island.is/island-ui/core'
 import { theme } from '@island.is/island-ui/theme'
@@ -31,10 +32,16 @@ import {
 import { useWindowSize } from '@island.is/web/hooks/useViewport'
 import { useI18n } from '@island.is/web/i18n'
 import { useDateUtils } from '@island.is/web/i18n/useDateUtils'
-import { getFilterCategories } from '@island.is/web/screens/Organization/PublishedMaterial/utils'
+import {
+  extractFilterTags,
+  getFilterCategories,
+  getGenericTagGroupHierarchy,
+} from '@island.is/web/screens/Organization/PublishedMaterial/utils'
 import { GET_GENERIC_LIST_ITEMS_QUERY } from '@island.is/web/screens/queries/GenericList'
 import { webRichText } from '@island.is/web/utils/richText'
 
+import { FilterTag } from '../FilterTag'
+
 const DEBOUNCE_TIME_IN_MS = 300
 const ITEMS_PER_PAGE = 10
 
@@ -71,18 +78,27 @@ const NonClickableItem = ({ item }: ItemProps) => {
       borderRadius="large"
       height="full"
     >
-      <Stack space={0}>
+      <Stack space={3}>
         <Stack space={0}>
-          <Text variant="eyebrow" color="purple400">
-            {item.date && format(new Date(item.date), 'dd.MM.yyyy')}
-          </Text>
-          <Text variant="h3" as="span" color="dark400">
-            {item.title}
-          </Text>
+          <Stack space={0}>
+            <Text variant="eyebrow" color="purple400">
+              {item.date && format(new Date(item.date), 'dd.MM.yyyy')}
+            </Text>
+            <Text variant="h3" as="span" color="dark400">
+              {item.title}
+            </Text>
+          </Stack>
+          {item.cardIntro?.length > 0 && (
+            <Box>{webRichText(item.cardIntro ?? [])}</Box>
+          )}
         </Stack>
-        {item.cardIntro?.length > 0 && (
-          <Box>{webRichText(item.cardIntro ?? [])}</Box>
-        )}
+        <Inline space={0}>
+          {item.filterTags?.map((tag) => (
+            <Tag disabled={true} variant="purple" outlined={true} key={tag.id}>
+              {tag.title}
+            </Tag>
+          ))}
+        </Inline>
       </Stack>
     </Box>
   )
@@ -102,18 +118,27 @@ const ClickableItem = ({ item }: ItemProps) => {
       href={item.slug ? `${pathname}/${item.slug}` : undefined}
       height="full"
     >
-      <Stack space={0}>
+      <Stack space={3}>
         <Stack space={0}>
-          <Text variant="eyebrow" color="purple400">
-            {item.date && format(new Date(item.date), 'dd.MM.yyyy')}
-          </Text>
-          <Text variant="h3" as="span" color="blue400">
-            {item.title}
-          </Text>
+          <Stack space={0}>
+            <Text variant="eyebrow" color="purple400">
+              {item.date && format(new Date(item.date), 'dd.MM.yyyy')}
+            </Text>
+            <Text variant="h3" as="span" color="blue400">
+              {item.title}
+            </Text>
+          </Stack>
+          {item.cardIntro?.length > 0 && (
+            <Box>{webRichText(item.cardIntro ?? [])}</Box>
+          )}
         </Stack>
-        {item.cardIntro?.length > 0 && (
-          <Box>{webRichText(item.cardIntro ?? [])}</Box>
-        )}
+        <Inline space={0}>
+          {item.filterTags?.map((tag) => (
+            <Tag disabled={true} variant="purple" outlined={true} key={tag.id}>
+              {tag.title}
+            </Tag>
+          ))}
+        </Inline>
       </Stack>
     </FocusableBox>
   )
@@ -121,7 +146,6 @@ const ClickableItem = ({ item }: ItemProps) => {
 
 interface GenericListProps {
   id: string
-  firstPageItemResponse?: GenericListItemResponse
   searchInputPlaceholder?: string | null
   itemType?: string | null
   filterTags?: GenericTag[] | null
@@ -129,7 +153,6 @@ interface GenericListProps {
 
 export const GenericList = ({
   id,
-  firstPageItemResponse,
   searchInputPlaceholder,
   itemType,
   filterTags,
@@ -137,21 +160,34 @@ export const GenericList = ({
   const searchQueryId = `${id}q`
   const pageQueryId = `${id}page`
   const tagQueryId = `${id}tag`
-
-  // TODO: add query params for filter tag search
-  // TODO: ignore initial response if there are query params set and fetch according to the query params
-  // TODO: perhaps add referrer decorator to graphql resolver so we can read query params
+  const router = useRouter()
 
   const [searchValue, setSearchValue] = useQueryState(searchQueryId)
   const [page, setPage] = useQueryState(pageQueryId, parseAsInteger)
-  const [parameters, setParameters] = useQueryState(tagQueryId, parseAsJson())
+  const [parameters, setParameters] = useQueryState<Record<string, string[]>>(
+    tagQueryId,
+    parseAsJson(),
+  )
 
-  const initialFilterCategories = getFilterCategories(filterTags ?? [])
+  const filterCategories = useMemo(() => {
+    const categories = getFilterCategories(filterTags ?? [])
+    if (parameters !== null) {
+      for (const category of categories) {
+        if (category.id in parameters) {
+          category.selected = parameters[category.id]
+          if (!Array.isArray(category.selected)) {
+            category.selected = []
+          }
+        }
+      }
+    }
+    return categories
+  }, [filterTags, parameters])
 
-  const pageRef = useRef(page)
-  const searchValueRef = useRef(searchValue)
-  const [itemsResponse, setItemsResponse] = useState(firstPageItemResponse)
-  const firstRender = useRef(true)
+  const pageRef = useRef(page ?? 1)
+  const searchValueRef = useRef(searchValue ?? '')
+  const [itemsResponse, setItemsResponse] =
+    useState<GenericListItemResponse | null>(null)
   const [errorOccurred, setErrorOccurred] = useState(false)
   const ref = useRef<HTMLElement | null>(null)
 
@@ -179,13 +215,11 @@ export const GenericList = ({
 
   useDebounce(
     () => {
-      // Only fetch initial items in case we don't have them
-      if (firstRender.current) {
-        firstRender.current = false
-        if (firstPageItemResponse) {
-          return
-        }
-      }
+      const selectedCategories: string[] = []
+      filterCategories.forEach((c) =>
+        c.selected.forEach((t) => selectedCategories.push(t)),
+      )
+
       fetchListItems({
         variables: {
           input: {
@@ -194,14 +228,14 @@ export const GenericList = ({
             lang: activeLocale,
             page: page ?? 1,
             queryString: searchValue || '',
-            tags: [],
-            tagGroups: {},
+            tags: selectedCategories,
+            tagGroups: getGenericTagGroupHierarchy(filterCategories),
           },
         },
       })
     },
     DEBOUNCE_TIME_IN_MS,
-    [searchValue, page],
+    [searchValue, page, filterCategories],
   )
 
   const { width } = useWindowSize()
@@ -240,47 +274,106 @@ export const GenericList = ({
     />
   )
 
+  const selectedFilters = extractFilterTags(filterCategories)
+
   return (
     <Box paddingBottom={3}>
       <GridContainer>
         <Stack space={5}>
           <Box ref={ref}>
-            {initialFilterCategories.length > 0 && (
-              <Filter
-                resultCount={totalItems}
-                labelClear={'Hreinsa síu'}
-                labelClearAll={'Hreinsa allar síur'}
-                labelOpen={'Opna síu'}
-                labelClose={'Loka síu'}
-                labelResult={'Skoða niðurstöður'}
-                labelTitle={'Sía niðurstöður'}
-                variant={isMobile ? 'dialog' : 'popover'}
-                onFilterClear={() => {
-                  //
-                }}
-                filterInput={filterInputComponent}
-              >
-                <FilterMultiChoice
-                  labelClear={'Hreinsa val'}
-                  onChange={({ categoryId, selected }) => {
-                    // setIsTyping(true)
-                    // setParameters((prevParameters) => ({
-                    //   ...prevParameters,
-                    //   [categoryId]: selected,
-                    // }))
-                  }}
-                  onClear={(categoryId) => {
-                    // setIsTyping(true)
-                    // setParameters((prevParameters) => ({
-                    //   ...prevParameters,
-                    //   [categoryId]: [],
-                    // }))
+            {filterCategories.length > 0 && (
+              <Stack space={4}>
+                <Filter
+                  resultCount={totalItems}
+                  labelClear={'Hreinsa síu'}
+                  labelClearAll={'Hreinsa allar síur'}
+                  labelOpen={'Opna síu'}
+                  labelClose={'Loka síu'}
+                  labelResult={'Skoða niðurstöður'}
+                  labelTitle={'Sía niðurstöður'}
+                  variant={isMobile ? 'dialog' : 'popover'}
+                  onFilterClear={() => {
+                    setParameters(null)
                   }}
-                  categories={initialFilterCategories} // TODO: dont use same thing as published material, do things differently and more efficiently here
-                />
-              </Filter>
+                  filterInput={filterInputComponent}
+                >
+                  <FilterMultiChoice
+                    labelClear={'Hreinsa val'}
+                    onChange={({ categoryId, selected }) => {
+                      setParameters((prevParameters) => {
+                        // Make sure we clear out the query params from the url when there is nothing selected
+                        if (
+                          selected.length === 0 &&
+                          prevParameters !== null &&
+                          Object.values(prevParameters).every(
+                            (s) => !s || s.length === 0,
+                          )
+                        ) {
+                          return null
+                        }
+
+                        return {
+                          ...prevParameters,
+                          [categoryId]: selected,
+                        }
+                      })
+                    }}
+                    onClear={(categoryId) => {
+                      setParameters((prevParameters) => {
+                        const updatedParameters = {
+                          ...prevParameters,
+                          [categoryId]: [],
+                        }
+
+                        // Make sure we clear out the query params from the url when there is nothing selected
+                        if (
+                          Object.values(updatedParameters).every(
+                            (s) => !s || s.length === 0,
+                          )
+                        ) {
+                          return null
+                        }
+
+                        return updatedParameters
+                      })
+                    }}
+                    categories={filterCategories}
+                  />
+                </Filter>
+
+                <Inline space={1}>
+                  {selectedFilters.map(({ value, label, category }) => (
+                    <FilterTag
+                      key={value}
+                      onClick={() => {
+                        setParameters((prevParameters) => {
+                          const updatedParameters = {
+                            ...prevParameters,
+                            [category]: (
+                              prevParameters?.[category] ?? []
+                            ).filter((prevValue) => prevValue !== value),
+                          }
+
+                          // Make sure we clear out the query params from the url when there is nothing selected
+                          if (
+                            Object.values(updatedParameters).every(
+                              (s) => !s || s.length === 0,
+                            )
+                          ) {
+                            return null
+                          }
+
+                          return updatedParameters
+                        })
+                      }}
+                    >
+                      {label}
+                    </FilterTag>
+                  ))}
+                </Inline>
+              </Stack>
             )}
-            {initialFilterCategories.length === 0 && filterInputComponent}
+            {filterCategories.length === 0 && filterInputComponent}
           </Box>
           {errorOccurred && (
             <AlertMessage
@@ -293,7 +386,9 @@ export const GenericList = ({
               }
             />
           )}
-          {items.length === 0 && <Text>{noResultsFoundText}</Text>}
+          {itemsResponse && items.length === 0 && (
+            <Text>{noResultsFoundText}</Text>
+          )}
           {items.length > 0 && (
             <Stack space={3}>
               <Inline space={2} justifyContent="spaceBetween" alignY="center">
diff --git a/apps/web/components/Organization/Slice/SliceMachine.tsx b/apps/web/components/Organization/Slice/SliceMachine.tsx
index 9cd6b0494820..fcfac420043d 100644
--- a/apps/web/components/Organization/Slice/SliceMachine.tsx
+++ b/apps/web/components/Organization/Slice/SliceMachine.tsx
@@ -185,9 +185,6 @@ const renderSlice = (
       return (
         <GenericList
           id={slice.id}
-          firstPageItemResponse={
-            (slice as GenericListSchema).firstPageListItemResponse
-          }
           searchInputPlaceholder={
             (slice as GenericListSchema).searchInputPlaceholder
           }
diff --git a/apps/web/screens/queries/GenericList.ts b/apps/web/screens/queries/GenericList.ts
index 73cd9b6f972a..a8dcf18bbd24 100644
--- a/apps/web/screens/queries/GenericList.ts
+++ b/apps/web/screens/queries/GenericList.ts
@@ -16,6 +16,11 @@ export const GET_GENERIC_LIST_ITEMS_QUERY = gql`
         cardIntro {
           ...HtmlFields
         }
+        filterTags {
+          id
+          title
+          slug
+        }
         slug
       }
       total
diff --git a/apps/web/screens/queries/fragments.ts b/apps/web/screens/queries/fragments.ts
index 015ade447af5..9b5db5057ef4 100644
--- a/apps/web/screens/queries/fragments.ts
+++ b/apps/web/screens/queries/fragments.ts
@@ -865,27 +865,6 @@ export const slices = gql`
         slug
       }
     }
-    firstPageListItemResponse {
-      input {
-        genericListId
-        lang
-        page
-        queryString
-        size
-        tags
-        tagGroups
-      }
-      items {
-        id
-        date
-        title
-        slug
-        cardIntro {
-          ...HtmlFields
-        }
-      }
-      total
-    }
   }
 
   fragment BaseSlices on Slice {
diff --git a/apps/web/utils/richText.tsx b/apps/web/utils/richText.tsx
index e3fac688bd5a..3aefe22d1574 100644
--- a/apps/web/utils/richText.tsx
+++ b/apps/web/utils/richText.tsx
@@ -191,7 +191,6 @@ const defaultRenderComponent = {
   GenericList: (slice: GenericListSchema) => (
     <GenericList
       id={slice.id}
-      firstPageItemResponse={slice.firstPageListItemResponse}
       searchInputPlaceholder={slice.searchInputPlaceholder}
       itemType={slice.itemType}
       filterTags={slice.filterTags}
diff --git a/libs/cms/src/lib/cms.elasticsearch.service.ts b/libs/cms/src/lib/cms.elasticsearch.service.ts
index 54d21584147f..e9a588123a0c 100644
--- a/libs/cms/src/lib/cms.elasticsearch.service.ts
+++ b/libs/cms/src/lib/cms.elasticsearch.service.ts
@@ -454,7 +454,7 @@ export class CmsElasticsearchService {
   async getGenericListItems(
     input: GetGenericListItemsInput,
   ): Promise<GenericListItemResponse> {
-    const tagsMust: unknown[] = [
+    let tagsMust: unknown[] = [
       {
         term: {
           'tags.key': input.genericListId,
@@ -468,7 +468,9 @@ export class CmsElasticsearchService {
     ]
 
     if (input.tags && input.tags.length > 0 && input.tagGroups) {
-      tagsMust.push(generateGenericTagGroupQueries(input.tags, input.tagGroups))
+      tagsMust = tagsMust.concat(
+        generateGenericTagGroupQueries(input.tags, input.tagGroups),
+      )
     }
 
     const must: Record<string, unknown>[] = [
diff --git a/libs/cms/src/lib/cms.module.ts b/libs/cms/src/lib/cms.module.ts
index 0aac0db44b46..bd8287ca80ab 100644
--- a/libs/cms/src/lib/cms.module.ts
+++ b/libs/cms/src/lib/cms.module.ts
@@ -11,7 +11,6 @@ import {
   FeaturedSupportQNAsResolver,
   PowerBiSliceResolver,
   LatestEventsSliceResolver,
-  GenericListResolver,
 } from './cms.resolver'
 import { CmsContentfulService } from './cms.contentful.service'
 import { ContentfulRepository } from './contentful.repository'
@@ -51,7 +50,6 @@ import { OrganizationTitleEnByReferenceIdLoader } from './loaders/organizationTi
     PowerBiService,
     PowerBiSliceResolver,
     LatestEventsSliceResolver,
-    GenericListResolver,
   ],
   exports: [
     ContentfulRepository,
diff --git a/libs/cms/src/lib/cms.resolver.ts b/libs/cms/src/lib/cms.resolver.ts
index 4d47feba92e8..92567e7b9e49 100644
--- a/libs/cms/src/lib/cms.resolver.ts
+++ b/libs/cms/src/lib/cms.resolver.ts
@@ -818,18 +818,3 @@ export class FeaturedEventsResolver {
     }
   }
 }
-
-@Resolver(() => GenericList)
-@CacheControl(defaultCache)
-export class GenericListResolver {
-  constructor(
-    private readonly cmsElasticsearchService: CmsElasticsearchService,
-  ) {}
-
-  @ResolveField(() => GenericListItemResponse)
-  firstPageListItemResponse(
-    @Parent() { firstPageListItemResponse: input }: GenericList,
-  ) {
-    return this.cmsElasticsearchService.getGenericListItems(input)
-  }
-}
diff --git a/libs/cms/src/lib/models/genericList.model.ts b/libs/cms/src/lib/models/genericList.model.ts
index 71612005b311..c7e24fe634a2 100644
--- a/libs/cms/src/lib/models/genericList.model.ts
+++ b/libs/cms/src/lib/models/genericList.model.ts
@@ -1,10 +1,7 @@
 import { Field, ID, ObjectType, registerEnumType } from '@nestjs/graphql'
-import { ElasticsearchIndexLocale } from '@island.is/content-search-index-manager'
 import { SystemMetadata } from '@island.is/shared/types'
 import { CacheField } from '@island.is/nest/graphql'
 import { IGenericList, IGenericListFields } from '../generated/contentfulTypes'
-import { GenericListItemResponse } from './genericListItemResponse.model'
-import { GetGenericListItemsInput } from '../dto/getGenericListItems.input'
 import { GenericTag, mapGenericTag } from './genericTag.model'
 
 enum GenericListItemType {
@@ -21,9 +18,6 @@ export class GenericList {
   @Field(() => ID)
   id!: string
 
-  @CacheField(() => GenericListItemResponse)
-  firstPageListItemResponse!: GetGenericListItemsInput
-
   @Field(() => String, { nullable: true })
   searchInputPlaceholder?: string
 
@@ -45,12 +39,6 @@ export const mapGenericList = ({
 }: IGenericList): SystemMetadata<GenericList> => ({
   typename: 'GenericList',
   id: sys.id,
-  firstPageListItemResponse: {
-    genericListId: sys.id,
-    lang:
-      sys.locale === 'is-IS' ? 'is' : (sys.locale as ElasticsearchIndexLocale),
-    page: 1,
-  },
   searchInputPlaceholder: fields.searchInputPlaceholder,
   itemType: mapItemType(fields.itemType),
   filterTags: fields.filterTags ? fields.filterTags.map(mapGenericTag) : [],
diff --git a/libs/cms/src/lib/search/importers/genericListItem.service.ts b/libs/cms/src/lib/search/importers/genericListItem.service.ts
index 6c7ecf5cceb3..028cbceb8e63 100644
--- a/libs/cms/src/lib/search/importers/genericListItem.service.ts
+++ b/libs/cms/src/lib/search/importers/genericListItem.service.ts
@@ -43,7 +43,7 @@ export class GenericListItemSyncService
           const tags: MappedData['tags'] =
             mapped.filterTags?.map((tag) => ({
               type: 'genericTag',
-              key: tag.id,
+              key: tag.slug,
             })) ?? []
 
           if (mapped.genericList) {

From 79197adc5baf7e21ea36d3b47e2cf43e3d846c5f Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Tue, 18 Jun 2024 13:44:47 +0000
Subject: [PATCH 09/12] Add filter input to mobile screens

---
 .../components/GenericList/GenericList.tsx    | 116 +++++++++---------
 1 file changed, 59 insertions(+), 57 deletions(-)

diff --git a/apps/web/components/GenericList/GenericList.tsx b/apps/web/components/GenericList/GenericList.tsx
index 606dd2373fda..89983c030e38 100644
--- a/apps/web/components/GenericList/GenericList.tsx
+++ b/apps/web/components/GenericList/GenericList.tsx
@@ -160,7 +160,6 @@ export const GenericList = ({
   const searchQueryId = `${id}q`
   const pageQueryId = `${id}page`
   const tagQueryId = `${id}tag`
-  const router = useRouter()
 
   const [searchValue, setSearchValue] = useQueryState(searchQueryId)
   const [page, setPage] = useQueryState(pageQueryId, parseAsInteger)
@@ -283,63 +282,66 @@ export const GenericList = ({
           <Box ref={ref}>
             {filterCategories.length > 0 && (
               <Stack space={4}>
-                <Filter
-                  resultCount={totalItems}
-                  labelClear={'Hreinsa síu'}
-                  labelClearAll={'Hreinsa allar síur'}
-                  labelOpen={'Opna síu'}
-                  labelClose={'Loka síu'}
-                  labelResult={'Skoða niðurstöður'}
-                  labelTitle={'Sía niðurstöður'}
-                  variant={isMobile ? 'dialog' : 'popover'}
-                  onFilterClear={() => {
-                    setParameters(null)
-                  }}
-                  filterInput={filterInputComponent}
-                >
-                  <FilterMultiChoice
-                    labelClear={'Hreinsa val'}
-                    onChange={({ categoryId, selected }) => {
-                      setParameters((prevParameters) => {
-                        // Make sure we clear out the query params from the url when there is nothing selected
-                        if (
-                          selected.length === 0 &&
-                          prevParameters !== null &&
-                          Object.values(prevParameters).every(
-                            (s) => !s || s.length === 0,
-                          )
-                        ) {
-                          return null
-                        }
-
-                        return {
-                          ...prevParameters,
-                          [categoryId]: selected,
-                        }
-                      })
+                <Stack space={3}>
+                  {isMobile && filterInputComponent}
+                  <Filter
+                    resultCount={totalItems}
+                    labelClear={'Hreinsa síu'}
+                    labelClearAll={'Hreinsa allar síur'}
+                    labelOpen={'Opna síu'}
+                    labelClose={'Loka síu'}
+                    labelResult={'Skoða niðurstöður'}
+                    labelTitle={'Sía niðurstöður'}
+                    variant={isMobile ? 'dialog' : 'popover'}
+                    onFilterClear={() => {
+                      setParameters(null)
                     }}
-                    onClear={(categoryId) => {
-                      setParameters((prevParameters) => {
-                        const updatedParameters = {
-                          ...prevParameters,
-                          [categoryId]: [],
-                        }
-
-                        // Make sure we clear out the query params from the url when there is nothing selected
-                        if (
-                          Object.values(updatedParameters).every(
-                            (s) => !s || s.length === 0,
-                          )
-                        ) {
-                          return null
-                        }
-
-                        return updatedParameters
-                      })
-                    }}
-                    categories={filterCategories}
-                  />
-                </Filter>
+                    filterInput={filterInputComponent}
+                  >
+                    <FilterMultiChoice
+                      labelClear={'Hreinsa val'}
+                      onChange={({ categoryId, selected }) => {
+                        setParameters((prevParameters) => {
+                          // Make sure we clear out the query params from the url when there is nothing selected
+                          if (
+                            selected.length === 0 &&
+                            prevParameters !== null &&
+                            Object.values(prevParameters).every(
+                              (s) => !s || s.length === 0,
+                            )
+                          ) {
+                            return null
+                          }
+
+                          return {
+                            ...prevParameters,
+                            [categoryId]: selected,
+                          }
+                        })
+                      }}
+                      onClear={(categoryId) => {
+                        setParameters((prevParameters) => {
+                          const updatedParameters = {
+                            ...prevParameters,
+                            [categoryId]: [],
+                          }
+
+                          // Make sure we clear out the query params from the url when there is nothing selected
+                          if (
+                            Object.values(updatedParameters).every(
+                              (s) => !s || s.length === 0,
+                            )
+                          ) {
+                            return null
+                          }
+
+                          return updatedParameters
+                        })
+                      }}
+                      categories={filterCategories}
+                    />
+                  </Filter>
+                </Stack>
 
                 <Inline space={1}>
                   {selectedFilters.map(({ value, label, category }) => (

From 9be6935bc0ae2bcee5a7408fa96ae4d68a873fd5 Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Tue, 18 Jun 2024 13:51:12 +0000
Subject: [PATCH 10/12] Fix spacing

---
 apps/web/components/GenericList/GenericList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/GenericList/GenericList.tsx b/apps/web/components/GenericList/GenericList.tsx
index 89983c030e38..e33b51842491 100644
--- a/apps/web/components/GenericList/GenericList.tsx
+++ b/apps/web/components/GenericList/GenericList.tsx
@@ -92,7 +92,7 @@ const NonClickableItem = ({ item }: ItemProps) => {
             <Box>{webRichText(item.cardIntro ?? [])}</Box>
           )}
         </Stack>
-        <Inline space={0}>
+        <Inline space={1}>
           {item.filterTags?.map((tag) => (
             <Tag disabled={true} variant="purple" outlined={true} key={tag.id}>
               {tag.title}
@@ -132,7 +132,7 @@ const ClickableItem = ({ item }: ItemProps) => {
             <Box>{webRichText(item.cardIntro ?? [])}</Box>
           )}
         </Stack>
-        <Inline space={0}>
+        <Inline space={1}>
           {item.filterTags?.map((tag) => (
             <Tag disabled={true} variant="purple" outlined={true} key={tag.id}>
               {tag.title}

From 104bae9540622fc469d3170b199a1a48bb5ca3ba Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Tue, 18 Jun 2024 16:00:12 +0000
Subject: [PATCH 11/12] Fix elasticsearch query

---
 .../components/GenericList/GenericList.tsx    | 22 ++++++----
 apps/web/screens/queries/GenericList.ts       |  1 +
 libs/cms/src/lib/cms.elasticsearch.service.ts | 40 +++++++++----------
 .../importers/genericListItem.service.ts      |  4 +-
 4 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/apps/web/components/GenericList/GenericList.tsx b/apps/web/components/GenericList/GenericList.tsx
index e33b51842491..a4d1aab4e8cb 100644
--- a/apps/web/components/GenericList/GenericList.tsx
+++ b/apps/web/components/GenericList/GenericList.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useDebounce } from 'react-use'
 import { Locale } from 'locale'
+import flatten from 'lodash/flatten'
 import { useRouter } from 'next/router'
 import { parseAsInteger, parseAsJson, useQueryState } from 'next-usequerystate'
 import { useLazyQuery } from '@apollo/client'
@@ -183,8 +184,6 @@ export const GenericList = ({
     return categories
   }, [filterTags, parameters])
 
-  const pageRef = useRef(page ?? 1)
-  const searchValueRef = useRef(searchValue ?? '')
   const [itemsResponse, setItemsResponse] =
     useState<GenericListItemResponse | null>(null)
   const [errorOccurred, setErrorOccurred] = useState(false)
@@ -197,11 +196,21 @@ export const GenericList = ({
     GetGenericListItemsQueryVariables
   >(GET_GENERIC_LIST_ITEMS_QUERY, {
     onCompleted(data) {
+      const searchParams = new URLSearchParams(window.location.search)
+
+      const queryString = searchParams.get(searchQueryId) || ''
+      const pageQuery = searchParams.get(pageQueryId) || '1'
+      const tagQuery = searchParams.get(tagQueryId) || '{}'
+
+      const tags: string[] = flatten(Object.values(JSON.parse(tagQuery)))
+
       if (
         // Make sure the response matches the request input
-        searchValueRef.current ===
-          data?.getGenericListItems?.input?.queryString &&
-        pageRef.current === data?.getGenericListItems?.input?.page
+        queryString === data?.getGenericListItems?.input?.queryString &&
+        pageQuery === data?.getGenericListItems?.input?.page?.toString() &&
+        tags.every((tag) =>
+          (data?.getGenericListItems?.input?.tags ?? []).includes(tag),
+        )
       ) {
         setItemsResponse(data.getGenericListItems)
         setErrorOccurred(false)
@@ -262,9 +271,7 @@ export const GenericList = ({
       name="list-search"
       onChange={(value) => {
         setSearchValue(value || null)
-        searchValueRef.current = value
         setPage(null)
-        pageRef.current = 1
       }}
       value={searchValue ?? ''}
       loading={loading}
@@ -438,7 +445,6 @@ export const GenericList = ({
                 <button
                   onClick={() => {
                     setPage(page === 1 ? null : page)
-                    pageRef.current = page
 
                     // Scroll to top of the list on page change
                     const position = ref.current?.getBoundingClientRect()
diff --git a/apps/web/screens/queries/GenericList.ts b/apps/web/screens/queries/GenericList.ts
index a8dcf18bbd24..4fda16eca04b 100644
--- a/apps/web/screens/queries/GenericList.ts
+++ b/apps/web/screens/queries/GenericList.ts
@@ -8,6 +8,7 @@ export const GET_GENERIC_LIST_ITEMS_QUERY = gql`
       input {
         page
         queryString
+        tags
       }
       items {
         id
diff --git a/libs/cms/src/lib/cms.elasticsearch.service.ts b/libs/cms/src/lib/cms.elasticsearch.service.ts
index e9a588123a0c..bc692fe7bb11 100644
--- a/libs/cms/src/lib/cms.elasticsearch.service.ts
+++ b/libs/cms/src/lib/cms.elasticsearch.service.ts
@@ -454,26 +454,7 @@ export class CmsElasticsearchService {
   async getGenericListItems(
     input: GetGenericListItemsInput,
   ): Promise<GenericListItemResponse> {
-    let tagsMust: unknown[] = [
-      {
-        term: {
-          'tags.key': input.genericListId,
-        },
-      },
-      {
-        term: {
-          'tags.type': 'referencedBy',
-        },
-      },
-    ]
-
-    if (input.tags && input.tags.length > 0 && input.tagGroups) {
-      tagsMust = tagsMust.concat(
-        generateGenericTagGroupQueries(input.tags, input.tagGroups),
-      )
-    }
-
-    const must: Record<string, unknown>[] = [
+    let must: Record<string, unknown>[] = [
       {
         term: {
           type: {
@@ -486,7 +467,18 @@ export class CmsElasticsearchService {
           path: 'tags',
           query: {
             bool: {
-              must: tagsMust,
+              must: [
+                {
+                  term: {
+                    'tags.key': input.genericListId,
+                  },
+                },
+                {
+                  term: {
+                    'tags.type': 'referencedBy',
+                  },
+                },
+              ],
             },
           },
         },
@@ -524,6 +516,12 @@ export class CmsElasticsearchService {
       sort.unshift('_score')
     }
 
+    if (input.tags && input.tags.length > 0 && input.tagGroups) {
+      must = must.concat(
+        generateGenericTagGroupQueries(input.tags, input.tagGroups),
+      )
+    }
+
     const response: ApiResponse<SearchResponse<MappedData>> =
       await this.elasticService.findByQuery(getElasticsearchIndex(input.lang), {
         query: {
diff --git a/libs/cms/src/lib/search/importers/genericListItem.service.ts b/libs/cms/src/lib/search/importers/genericListItem.service.ts
index 028cbceb8e63..76f74b612e60 100644
--- a/libs/cms/src/lib/search/importers/genericListItem.service.ts
+++ b/libs/cms/src/lib/search/importers/genericListItem.service.ts
@@ -33,9 +33,7 @@ export class GenericListItemSyncService
           const mapped = mapGenericListItem(entry)
 
           const content = extractStringsFromObject(
-            mapped.cardIntro
-              .concat(mapped.content ?? []) // TODO: should the content be searchable?
-              .map(pruneNonSearchableSliceUnionFields),
+            mapped.cardIntro.map(pruneNonSearchableSliceUnionFields),
             100,
             2,
           )

From a85baf9b50dbfe94ca10a7af8a0f3fa4778b3fb8 Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Tue, 18 Jun 2024 16:12:21 +0000
Subject: [PATCH 12/12] Add translations

---
 .../components/GenericList/GenericList.tsx    | 38 +++++++++++++++----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/GenericList/GenericList.tsx b/apps/web/components/GenericList/GenericList.tsx
index a4d1aab4e8cb..96b3d66a79b1 100644
--- a/apps/web/components/GenericList/GenericList.tsx
+++ b/apps/web/components/GenericList/GenericList.tsx
@@ -293,12 +293,32 @@ export const GenericList = ({
                   {isMobile && filterInputComponent}
                   <Filter
                     resultCount={totalItems}
-                    labelClear={'Hreinsa síu'}
-                    labelClearAll={'Hreinsa allar síur'}
-                    labelOpen={'Opna síu'}
-                    labelClose={'Loka síu'}
-                    labelResult={'Skoða niðurstöður'}
-                    labelTitle={'Sía niðurstöður'}
+                    labelClear={
+                      activeLocale === 'is' ? 'Hreinsa síu' : 'Clear filter'
+                    }
+                    labelClearAll={
+                      activeLocale === 'is'
+                        ? 'Hreinsa allar síur'
+                        : 'Clear all filters'
+                    }
+                    labelOpen={
+                      activeLocale === 'is'
+                        ? 'Sía niðurstöður'
+                        : 'Filter results'
+                    }
+                    labelClose={
+                      activeLocale === 'is' ? 'Loka síu' : 'Close filter menu'
+                    }
+                    labelResult={
+                      activeLocale === 'is'
+                        ? 'Skoða niðurstöður'
+                        : 'See results'
+                    }
+                    labelTitle={
+                      activeLocale === 'is'
+                        ? 'Sía niðurstöður'
+                        : 'Filter results'
+                    }
                     variant={isMobile ? 'dialog' : 'popover'}
                     onFilterClear={() => {
                       setParameters(null)
@@ -306,7 +326,11 @@ export const GenericList = ({
                     filterInput={filterInputComponent}
                   >
                     <FilterMultiChoice
-                      labelClear={'Hreinsa val'}
+                      labelClear={
+                        activeLocale === 'is'
+                          ? 'Hreinsa val'
+                          : 'Clear selection'
+                      }
                       onChange={({ categoryId, selected }) => {
                         setParameters((prevParameters) => {
                           // Make sure we clear out the query params from the url when there is nothing selected