From 0429eac7573e3f27d26409559b6f101aee55d41e Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 11 Nov 2024 12:37:14 -0800
Subject: [PATCH] conditional KModal / div display for categories selection
 modal & clean up

---
 .../CategorySearchModal/index.vue             |  8 ------
 .../components/SearchFiltersPanel/index.vue   | 28 ++++++++++++++-----
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/kolibri-common/components/SearchFiltersPanel/CategorySearchModal/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/CategorySearchModal/index.vue
index ae9c155f9b..42b8a3c5f2 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/CategorySearchModal/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/CategorySearchModal/index.vue
@@ -11,7 +11,6 @@
 
 <script>
 
-  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import CategorySearchOptions from './CategorySearchOptions';
 
@@ -20,7 +19,6 @@
     components: {
       CategorySearchOptions,
     },
-    mixins: [commonCoreStrings],
     setup() {
       const { windowIsLarge } = useKResponsiveWindow();
       return {
@@ -44,12 +42,6 @@
         this.$refs.searchOptions.$el.querySelector('.filter-list-title > h2 > a').focus();
       },
     },
-    $trs: {
-      title: {
-        message: 'Choose a category',
-        context: 'Title of the category selection window',
-      },
-    },
   };
 
 </script>
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
index 82bd62bf8f..9d4ad114dd 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -139,14 +139,24 @@
         </div>
       </div>
     </div>
-    <CategorySearchModal
-      v-if="currentCategory"
-      ref="searchModal"
-      :class="windowIsLarge ? '' : 'drawer-panel'"
-      :selectedCategory="currentCategory"
+    <!-- When accordion mode is NOT activated, show as KModal, otherwise, just a div -->
+    <component
+      :is="accordion ? 'div' : 'KModal'"
+      v-if="windowIsLarge && currentCategory"
+      appendToOverlay
+      :title="$tr('chooseACategory')"
+      :cancelText="coreString('closeAction')"
+      size="large"
       @cancel="currentCategory = null"
-      @input="selectCategory"
-    />
+    >
+      <CategorySearchModal
+        v-if="currentCategory"
+        ref="searchModal"
+        :class="windowIsLarge ? '' : 'drawer-panel'"
+        :selectedCategory="currentCategory"
+        @input="selectCategory"
+      />
+    </component>
   </section>
 
 </template>
@@ -404,6 +414,10 @@
         message: 'Categories',
         context: 'Section header label in the Library page sidebar.',
       },
+      chooseACategory: {
+        message: 'Choose a category',
+        context: 'Title of the category selection window',
+      },
     },
   };