From 279bcc8a2dbf65e515504c5ef9d869508eb712e9 Mon Sep 17 00:00:00 2001
From: tplevko <tplevko@redhat.com>
Date: Tue, 17 Oct 2023 09:47:30 +0200
Subject: [PATCH] feat: persist catalog layout globally

---
 packages/ui/src/components/Catalog/Catalog.tsx | 4 +++-
 packages/ui/src/models/local-storage-keys.ts   | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Catalog/Catalog.tsx b/packages/ui/src/components/Catalog/Catalog.tsx
index 2fc13536d..6ae41361d 100644
--- a/packages/ui/src/components/Catalog/Catalog.tsx
+++ b/packages/ui/src/components/Catalog/Catalog.tsx
@@ -1,4 +1,6 @@
 import { FunctionComponent, PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import { useLocalStorage } from '../../hooks';
+import { LocalStorageKeys } from '../../models';
 import { BaseCatalog } from './BaseCatalog';
 import { CatalogLayout, ITile } from './Catalog.models';
 import './Catalog.scss';
@@ -15,7 +17,7 @@ export const Catalog: FunctionComponent<PropsWithChildren<CatalogProps>> = (prop
   const [searchTerm, setSearchTerm] = useState('');
   const [groups, setGroups] = useState<string[]>([]);
   const [activeGroup, setActiveGroup] = useState<string>(getFirstActiveGroup(props.tiles));
-  const [activeLayout, setActiveLayout] = useState(CatalogLayout.Gallery);
+  const [activeLayout, setActiveLayout] = useLocalStorage(LocalStorageKeys.CatalogLayout, CatalogLayout.Gallery);
   const [filteredTiles, setFilteredTiles] = useState<ITile[]>([]);
   const [filterTags, setFilterTags] = useState<string[]>([]);
 
diff --git a/packages/ui/src/models/local-storage-keys.ts b/packages/ui/src/models/local-storage-keys.ts
index cab9193d0..0a5ecd5c9 100644
--- a/packages/ui/src/models/local-storage-keys.ts
+++ b/packages/ui/src/models/local-storage-keys.ts
@@ -1,3 +1,4 @@
 export const enum LocalStorageKeys {
   SourceCode = 'sourceCode',
+  CatalogLayout = 'catalogLayout',
 }