From 1ecf7382224e9084201c37230c0bd5b13d0110eb Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 27 Mar 2026 08:21:43 +0100
Subject: [PATCH 01/15] Add outline processor for discovery

---
 .../Discovery/TopicPicker/useOutlineTree.ts   | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts

diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
new file mode 100644
index 000000000..15ebadca0
--- /dev/null
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
@@ -0,0 +1,60 @@
+import { activity as activityUtils } from '@tailor-cms/utils';
+import { schema as schemaConfig } from '@tailor-cms/config';
+
+import { useCurrentRepository } from '@/stores/current-repository';
+import type { TopicItem } from './types';
+
+const buildTopicMeta = (
+  activity: any,
+  activityCollection: any[],
+  repositoryName: string,
+): TopicItem => {
+  const name = activity.data?.name || '';
+  const isLeaf = schemaConfig.isEditable(activity.type);
+  const ancestors = activityUtils.getAncestors(activityCollection, activity);
+  const ancestorNames = ancestors.map((a: any) => a.data?.name).filter(Boolean);
+  return {
+    id: activity.id,
+    name,
+    parentName: ancestorNames.at(-1),
+    isLeaf,
+    isGroup: !isLeaf,
+    depth: ancestors.length,
+    context: [name, ...ancestorNames, repositoryName].filter(Boolean),
+  };
+};
+
+function flattenTree(nodes: any[]): TopicItem[] {
+  const result: TopicItem[] = [];
+  for (const node of nodes) {
+    if (node.topicMeta) result.push(node.topicMeta);
+    if (node.children?.length) {
+      result.push(...flattenTree(node.children));
+    }
+  }
+  return result;
+}
+
+/**
+ * Derives a flat topic list from the repository outline.
+ * Uses shared toTreeFormat for hierarchy, schemaConfig.isEditable
+ * for leaf detection, and getAncestors for parent context.
+ */
+export function useOutlineTree() {
+  const store = useCurrentRepository();
+  const hasOutline = computed(() => store.outlineActivities.length > 0);
+
+  const items = computed<TopicItem[]>(() => {
+    const activities = store.outlineActivities as any[];
+    if (!activities.length) return [];
+    const repo = store.repository;
+    const tree = activityUtils.toTreeFormat(activities, {
+      processNodeFn: (activity: any) => ({
+        topicMeta: buildTopicMeta(activity, activities, repo?.name || ''),
+      }),
+    });
+    return flattenTree(tree);
+  });
+
+  return { hasOutline, items };
+}

From 972f7cb144806dc743f17cbb5a8c423e0ad59875 Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 27 Mar 2026 08:23:34 +0100
Subject: [PATCH 02/15] Add filtering type

---
 .../repository/Assets/Discovery/TopicPicker/types.ts   | 10 ++++++++++
 .../Assets/Discovery/TopicPicker/useOutlineTree.ts     |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/types.ts

diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/types.ts b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/types.ts
new file mode 100644
index 000000000..5aadbb2ae
--- /dev/null
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/types.ts
@@ -0,0 +1,10 @@
+export interface TopicItem {
+  id: number;
+  name: string;
+  parentName?: string;
+  isGroup: boolean;
+  isLeaf: boolean;
+  depth: number;
+  // Full context path for building search queries.
+  context: string[];
+}
diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
index 15ebadca0..63053c733 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
@@ -17,8 +17,8 @@ const buildTopicMeta = (
     id: activity.id,
     name,
     parentName: ancestorNames.at(-1),
-    isLeaf,
     isGroup: !isLeaf,
+    isLeaf,
     depth: ancestors.length,
     context: [name, ...ancestorNames, repositoryName].filter(Boolean),
   };

From fe07d4cf375668d1feb8a66f8b2bc696b0d854b6 Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 27 Mar 2026 08:24:46 +0100
Subject: [PATCH 03/15] Emit search input

---
 .../components/repository/Assets/Discovery/SearchBar.vue   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/app/components/repository/Assets/Discovery/SearchBar.vue b/apps/frontend/app/components/repository/Assets/Discovery/SearchBar.vue
index fc46f3d28..3cf56677c 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/SearchBar.vue
+++ b/apps/frontend/app/components/repository/Assets/Discovery/SearchBar.vue
@@ -15,6 +15,7 @@
       hide-details
       @click:clear="query = ''"
       @keyup.enter="emit('search')"
+      @update:model-value="emit('search:input')"
     />
     <VBtn
       :loading="isSearching"
@@ -47,6 +48,7 @@ import type { ContentFilter } from '@tailor-cms/interfaces/discovery';
 const CONTENT_FILTERS: { label: string; value: ContentFilter; icon: string }[] = [
   { label: 'All types', value: 'all', icon: 'mdi-view-grid' },
   { label: 'Images', value: 'image', icon: 'mdi-image-outline' },
+  { label: 'Videos', value: 'video', icon: 'mdi-video-outline' },
   { label: 'PDFs', value: 'pdf', icon: 'mdi-file-document-outline' },
   { label: 'Articles', value: 'article', icon: 'mdi-newspaper' },
   { label: 'Research', value: 'research', icon: 'mdi-school' },
@@ -57,7 +59,10 @@ defineProps<{
   isSearching: boolean;
 }>();
 
-const emit = defineEmits<{ search: [] }>();
+const emit = defineEmits<{
+  'search': [];
+  'search:input': [];
+}>();
 
 const query = defineModel<string>('query', { required: true });
 const contentFilter = defineModel<ContentFilter>('contentFilter', { required: true });

From 12347d8aca24cb7f2b1099e753ef40cb1a92b788 Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 27 Mar 2026 08:43:05 +0100
Subject: [PATCH 04/15] Init Topic picker

---
 .../Discovery/TopicPicker/TopicList.vue       | 55 ++++++++++++++++
 .../Assets/Discovery/TopicPicker/index.vue    | 63 +++++++++++++++++++
 2 files changed, 118 insertions(+)
 create mode 100644 apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/TopicList.vue
 create mode 100644 apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue

diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/TopicList.vue b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/TopicList.vue
new file mode 100644
index 000000000..c44fca548
--- /dev/null
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/TopicList.vue
@@ -0,0 +1,55 @@
+<template>
+  <VList class="topic-list pa-2" density="compact">
+    <template v-for="item in items" :key="item.id">
+      <VListSubheader
+        v-if="item.isGroup"
+        class="text-uppercase font-weight-bold"
+      >
+        {{ item.name }}
+      </VListSubheader>
+      <VListItem
+        v-else
+        :prepend-icon="item.isLeaf
+          ? 'mdi-file-document-outline'
+          : 'mdi-folder-outline'"
+        :value="item.id"
+        class="topic-list-item"
+        @click="emit('topic:select', item)"
+      >
+        <VListItemTitle class="text-body-2">
+          {{ item.name }}
+        </VListItemTitle>
+        <VListItemSubtitle v-if="item.parentName" class="text-caption">
+          {{ item.parentName }}
+        </VListItemSubtitle>
+      </VListItem>
+    </template>
+  </VList>
+</template>
+
+<script lang="ts" setup>
+import type { TopicItem } from './types';
+
+defineProps<{
+  items: TopicItem[];
+}>();
+
+const emit = defineEmits<{
+  'topic:select': [topic: TopicItem];
+}>();
+</script>
+
+<style lang="scss" scoped>
+.topic-list {
+  max-height: 30rem;
+  overflow-y: auto;
+}
+
+.topic-list-item {
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+}
+</style>
diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
new file mode 100644
index 000000000..8c60801b0
--- /dev/null
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="d-flex align-center ga-3">
+    <VMenu
+      v-model="isOpen"
+      :close-on-content-click="false"
+      max-height="400"
+      min-width="420"
+    >
+      <template #activator="{ props: menuProps }">
+        <VBtn
+          v-bind="menuProps"
+          :color="modelValue ? 'teal-lighten-3' : 'primary-lighten-3'"
+          prepend-icon="mdi-file-tree-outline"
+          size="small"
+          variant="tonal"
+        >
+          {{ modelValue ? modelValue.name : 'Search by topic' }}
+          <VIcon end>mdi-chevron-down</VIcon>
+        </VBtn>
+      </template>
+      <VCard min-width="360">
+        <VCardTitle class="text-body-2"> Select outline topic </VCardTitle>
+        <VDivider />
+        <TopicList :items="items" @topic:select="onSelect" />
+      </VCard>
+    </VMenu>
+    <VChip
+      v-if="modelValue"
+      closable
+      color="teal-lighten-3"
+      size="small"
+      variant="tonal"
+      @click:close="emit('topic:clear')"
+    >
+      {{ modelValue.name }}
+    </VChip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import TopicList from './TopicList.vue';
+import type { TopicItem } from './types';
+import { useOutlineTree } from './useOutlineTree';
+
+defineProps<{
+  modelValue: TopicItem | null;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [topic: TopicItem | null];
+  'topic:select': [topic: TopicItem];
+  'topic:clear': [];
+}>();
+
+const isOpen = ref(false);
+const { items } = useOutlineTree();
+
+function onSelect(topic: TopicItem) {
+  isOpen.value = false;
+  emit('update:modelValue', topic);
+  emit('topic:select', topic);
+}
+</script>

From 3b0208242580fef77a6eac029133b2020f082633 Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 27 Mar 2026 09:17:04 +0100
Subject: [PATCH 05/15] Add outline based discovery

---
 .../Assets/Discovery/SearchResults/index.vue  | 60 +++++++++++++-----
 .../repository/Assets/Discovery/index.vue     | 62 ++++++++++++++++---
 2 files changed, 98 insertions(+), 24 deletions(-)

diff --git a/apps/frontend/app/components/repository/Assets/Discovery/SearchResults/index.vue b/apps/frontend/app/components/repository/Assets/Discovery/SearchResults/index.vue
index 6f71243b5..a6c300540 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/SearchResults/index.vue
+++ b/apps/frontend/app/components/repository/Assets/Discovery/SearchResults/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isSearching" class="d-flex justify-center pa-12">
+  <div v-if="isSearching" class="d-flex flex-column align-center pa-12 ga-4">
     <span class="text-body-1 text-primary-lighten-3">
       Searching the web for relevant resources...
     </span>
@@ -13,27 +13,41 @@
         variant="tonal"
       >
         {{ suggestions.length }} results
+        <template v-if="selectedUrls.size">
+          <VIcon size="x-small">mdi-circle-small</VIcon>
+          {{ selectedUrls.size }} selected
+        </template>
       </VChip>
       <VSpacer />
       <VBtn
-        v-if="selectedUrls.size"
         color="primary-lighten-3"
-        prepend-icon="mdi-close-circle-outline"
+        prepend-icon="mdi-checkbox-multiple-outline"
         size="small"
         variant="text"
-        @click="emit('deselect-all')"
+        @click="emit('select:all')"
       >
-        Deselect all
+        Select all
       </VBtn>
       <VBtn
-        v-else
+        v-for="it in bulkImportTypes"
+        :key="it.value"
+        :prepend-icon="it.icon"
         color="primary-lighten-3"
-        prepend-icon="mdi-checkbox-multiple-outline"
         size="small"
         variant="text"
-        @click="emit('select-all')"
+        @click="emit('select:type', it.value as ContentType)"
       >
-        Select all
+        All {{ it.label.toLowerCase() }}
+      </VBtn>
+      <VBtn
+        v-if="selectedUrls.size"
+        color="primary-lighten-3"
+        prepend-icon="mdi-close-circle-outline"
+        size="small"
+        variant="text"
+        @click="emit('select:clear')"
+      >
+        Clear
       </VBtn>
     </div>
     <div class="d-flex flex-column ga-2">
@@ -42,7 +56,7 @@
         :key="it.url"
         :is-selected="selectedUrls.has(it.url)"
         :suggestion="it"
-        @toggle="emit('toggle', it.url)"
+        @toggle="emit('result:toggle', it.url)"
       />
     </div>
     <div v-if="totalPages > 1" class="d-flex justify-center mt-4">
@@ -69,10 +83,18 @@
 </template>
 
 <script lang="ts" setup>
-import type { DiscoveryResult } from '@tailor-cms/interfaces/discovery';
+import type {
+  ContentType,
+  DiscoveryResult,
+} from '@tailor-cms/interfaces/discovery';
 
 import SearchResult from './SearchResult/index.vue';
 
+const BULK_TYPES: { label: string; value: ContentType; icon: string }[] = [
+  { label: 'images', value: 'image', icon: 'mdi-image-outline' },
+  { label: 'videos', value: 'video', icon: 'mdi-video-outline' },
+];
+
 const ITEMS_PER_PAGE = 20;
 
 const props = defineProps<{
@@ -85,11 +107,21 @@ const props = defineProps<{
 const page = defineModel<number>('page', { required: true });
 
 const emit = defineEmits<{
-  'toggle': [url: string];
-  'select-all': [];
-  'deselect-all': [];
+  'result:toggle': [url: string];
+  'select:all': [];
+  'select:clear': [];
+  'select:type': [type: ContentType];
+  'search:cancel': [];
 }>();
 
+const bulkImportTypes = computed(() => {
+  const counts = new Map<string, number>();
+  props.suggestions.forEach((s) => {
+    counts.set(s.type, (counts.get(s.type) || 0) + 1);
+  });
+  return BULK_TYPES.filter((it) => (counts.get(it.value) || 0) > 0);
+});
+
 const totalPages = computed(() =>
   Math.ceil(props.suggestions.length / ITEMS_PER_PAGE),
 );
diff --git a/apps/frontend/app/components/repository/Assets/Discovery/index.vue b/apps/frontend/app/components/repository/Assets/Discovery/index.vue
index 4c86b5e37..d4bd586f2 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/index.vue
+++ b/apps/frontend/app/components/repository/Assets/Discovery/index.vue
@@ -5,7 +5,7 @@
         <VToolbarTitle class="text-primary-lighten-4 ml-4">
           <VIcon
             class="mx-2"
-            color="teal-lighten-4"
+            color="primary-lighten-4"
             icon="mdi-earth-plus"
             size="small"
           />
@@ -25,11 +25,19 @@
       <VContainer class="discovery-content pt-6" fluid>
         <VRow justify="center">
           <VCol cols="12" lg="10" xl="8">
+            <TopicPicker
+              v-if="hasOutline"
+              v-model="selectedTopic"
+              class="mb-4"
+              @topic:select="onTopicSelect"
+              @topic:clear="selectedTopic = null"
+            />
             <SearchBar
               v-model:query="query"
               v-model:content-filter="contentFilter"
               :is-searching="isSearching"
               @search="search"
+              @search:input="selectedTopic = null"
             />
             <VAlert
               class="mb-4"
@@ -50,9 +58,11 @@
               :selected-urls="selectedUrls"
               :is-searching="isSearching"
               :has-searched="hasSearched"
-              @toggle="toggleSuggestion"
-              @select-all="selectAll"
-              @deselect-all="selectedUrls.clear()"
+              @result:toggle="toggleSuggestion"
+              @select:all="selectAll"
+              @select:clear="selectedUrls.clear()"
+              @select:type="selectByType"
+              @search:cancel="isSearching = false"
             />
           </VCol>
         </VRow>
@@ -64,27 +74,39 @@
 <script lang="ts" setup>
 import type {
   ContentFilter,
+  ContentType,
   DiscoveryResult,
 } from '@tailor-cms/interfaces/discovery';
 
 import api from '@/api/repositoryAsset';
+import { useCurrentRepository } from '@/stores/current-repository';
 import DiscoveryActions from './DiscoveryActions.vue';
 import SearchBar from './SearchBar.vue';
 import SearchResults from './SearchResults/index.vue';
-import { useCurrentRepository } from '@/stores/current-repository';
+import TopicPicker from './TopicPicker/index.vue';
+import type { TopicItem } from './TopicPicker/types';
+import { useOutlineTree } from './TopicPicker/useOutlineTree';
 
-const DOWNLOADABLE_TYPES = new Set(['image', 'pdf', 'video', 'audio']);
 const FETCH_COUNT = 100;
+const MAX_QUERY_WORDS = 15;
+const DOWNLOADABLE_TYPES = new Set([
+  'image', 'pdf', 'video', 'audio',
+]);
 
 const show = defineModel<boolean>({ default: false });
 const emit = defineEmits(['added']);
 
 const notify = useNotification();
-const currentRepositoryStore = useCurrentRepository();
-const repositoryId = computed(() => currentRepositoryStore.repository?.id);
+const store = useCurrentRepository();
+const repositoryId = computed(
+  () => store.repository?.id,
+);
 
 const query = ref('');
 const contentFilter = ref<ContentFilter>('all');
+const selectedTopic = ref<TopicItem | null>(null);
+
+const { hasOutline } = useOutlineTree();
 
 const isAdding = ref(false);
 const isSearching = ref(false);
@@ -93,7 +115,6 @@ const hasSearched = ref(false);
 const suggestions = ref<DiscoveryResult[]>([]);
 const selectedUrls = reactive(new Set<string>());
 const page = ref(1);
-
 const hasDownloadable = computed(() => {
   if (!selectedUrls.size) return false;
   return suggestions.value
@@ -123,6 +144,15 @@ async function search() {
   }
 }
 
+function onTopicSelect(topic: TopicItem) {
+  query.value = topic.context
+    .join(' ')
+    .split(/\s+/)
+    .slice(0, MAX_QUERY_WORDS)
+    .join(' ');
+  search();
+}
+
 function toggleSuggestion(url: string) {
   if (selectedUrls.has(url)) selectedUrls.delete(url);
   else selectedUrls.add(url);
@@ -132,8 +162,19 @@ function selectAll() {
   suggestions.value.forEach((s) => selectedUrls.add(s.url));
 }
 
+function selectByType(type: ContentType) {
+  suggestions.value
+    .filter((s) => s.type === type)
+    .forEach((s) => selectedUrls.add(s.url));
+}
+
 function toImportMeta(result?: DiscoveryResult) {
   if (!result) return {};
+  const tags = [...(result.tags || [])];
+  if (selectedTopic.value) {
+    const topicName = selectedTopic.value.name;
+    if (!tags.includes(topicName)) tags.push(topicName);
+  }
   return {
     contentType: result.type,
     title: result.title,
@@ -141,7 +182,7 @@ function toImportMeta(result?: DiscoveryResult) {
     downloadUrl: result.downloadUrl,
     author: result.author,
     license: result.license,
-    tags: result.tags,
+    tags,
   };
 }
 
@@ -183,6 +224,7 @@ watch(show, (v) => {
   selectedUrls.clear();
   hasSearched.value = false;
   page.value = 1;
+  selectedTopic.value = null;
 });
 
 watch(contentFilter, () => {

From eaf411b148f2f9618a77967179336ae50da88f55 Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 27 Mar 2026 08:21:43 +0100
Subject: [PATCH 06/15] Add outline processor for discovery

---
 .../Discovery/TopicPicker/useOutlineTree.ts   | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts

diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
new file mode 100644
index 000000000..15ebadca0
--- /dev/null
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
@@ -0,0 +1,60 @@
+import { activity as activityUtils } from '@tailor-cms/utils';
+import { schema as schemaConfig } from '@tailor-cms/config';
+
+import { useCurrentRepository } from '@/stores/current-repository';
+import type { TopicItem } from './types';
+
+const buildTopicMeta = (
+  activity: any,
+  activityCollection: any[],
+  repositoryName: string,
+): TopicItem => {
+  const name = activity.data?.name || '';
+  const isLeaf = schemaConfig.isEditable(activity.type);
+  const ancestors = activityUtils.getAncestors(activityCollection, activity);
+  const ancestorNames = ancestors.map((a: any) => a.data?.name).filter(Boolean);
+  return {
+    id: activity.id,
+    name,
+    parentName: ancestorNames.at(-1),
+    isLeaf,
+    isGroup: !isLeaf,
+    depth: ancestors.length,
+    context: [name, ...ancestorNames, repositoryName].filter(Boolean),
+  };
+};
+
+function flattenTree(nodes: any[]): TopicItem[] {
+  const result: TopicItem[] = [];
+  for (const node of nodes) {
+    if (node.topicMeta) result.push(node.topicMeta);
+    if (node.children?.length) {
+      result.push(...flattenTree(node.children));
+    }
+  }
+  return result;
+}
+
+/**
+ * Derives a flat topic list from the repository outline.
+ * Uses shared toTreeFormat for hierarchy, schemaConfig.isEditable
+ * for leaf detection, and getAncestors for parent context.
+ */
+export function useOutlineTree() {
+  const store = useCurrentRepository();
+  const hasOutline = computed(() => store.outlineActivities.length > 0);
+
+  const items = computed<TopicItem[]>(() => {
+    const activities = store.outlineActivities as any[];
+    if (!activities.length) return [];
+    const repo = store.repository;
+    const tree = activityUtils.toTreeFormat(activities, {
+      processNodeFn: (activity: any) => ({
+        topicMeta: buildTopicMeta(activity, activities, repo?.name || ''),
+      }),
+    });
+    return flattenTree(tree);
+  });
+
+  return { hasOutline, items };
+}

From 9d5310668c0444ff243f1ad24255df8480fdd05f Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 27 Mar 2026 08:23:34 +0100
Subject: [PATCH 07/15] Add filtering type

---
 .../repository/Assets/Discovery/TopicPicker/types.ts   | 10 ++++++++++
 .../Assets/Discovery/TopicPicker/useOutlineTree.ts     |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/types.ts

diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/types.ts b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/types.ts
new file mode 100644
index 000000000..5aadbb2ae
--- /dev/null
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/types.ts
@@ -0,0 +1,10 @@
+export interface TopicItem {
+  id: number;
+  name: string;
+  parentName?: string;
+  isGroup: boolean;
+  isLeaf: boolean;
+  depth: number;
+  // Full context path for building search queries.
+  context: string[];
+}
diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
index 15ebadca0..63053c733 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
@@ -17,8 +17,8 @@ const buildTopicMeta = (
     id: activity.id,
     name,
     parentName: ancestorNames.at(-1),
-    isLeaf,
     isGroup: !isLeaf,
+    isLeaf,
     depth: ancestors.length,
     context: [name, ...ancestorNames, repositoryName].filter(Boolean),
   };

From 979b8e0d714fff4b3f0c051a64ac26836f44ebdc Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 27 Mar 2026 08:24:46 +0100
Subject: [PATCH 08/15] Emit search input

---
 .../components/repository/Assets/Discovery/SearchBar.vue    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/app/components/repository/Assets/Discovery/SearchBar.vue b/apps/frontend/app/components/repository/Assets/Discovery/SearchBar.vue
index 337c9484e..b1f74501b 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/SearchBar.vue
+++ b/apps/frontend/app/components/repository/Assets/Discovery/SearchBar.vue
@@ -15,6 +15,7 @@
       hide-details
       @click:clear="query = ''"
       @keyup.enter="emit('search')"
+      @update:model-value="emit('search:input')"
     />
     <VBtn
       :loading="isSearching"
@@ -50,7 +51,10 @@ defineProps<{
   isSearching: boolean;
 }>();
 
-const emit = defineEmits<{ search: [] }>();
+const emit = defineEmits<{
+  'search': [];
+  'search:input': [];
+}>();
 
 const query = defineModel<string>('query', { required: true });
 const contentFilter = defineModel<ContentFilter>('contentFilter', { required: true });

From df17615e4e04f635871280f6a154e45360aa44be Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 27 Mar 2026 08:43:05 +0100
Subject: [PATCH 09/15] Init Topic picker

---
 .../Discovery/TopicPicker/TopicList.vue       | 55 ++++++++++++++++
 .../Assets/Discovery/TopicPicker/index.vue    | 63 +++++++++++++++++++
 2 files changed, 118 insertions(+)
 create mode 100644 apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/TopicList.vue
 create mode 100644 apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue

diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/TopicList.vue b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/TopicList.vue
new file mode 100644
index 000000000..c44fca548
--- /dev/null
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/TopicList.vue
@@ -0,0 +1,55 @@
+<template>
+  <VList class="topic-list pa-2" density="compact">
+    <template v-for="item in items" :key="item.id">
+      <VListSubheader
+        v-if="item.isGroup"
+        class="text-uppercase font-weight-bold"
+      >
+        {{ item.name }}
+      </VListSubheader>
+      <VListItem
+        v-else
+        :prepend-icon="item.isLeaf
+          ? 'mdi-file-document-outline'
+          : 'mdi-folder-outline'"
+        :value="item.id"
+        class="topic-list-item"
+        @click="emit('topic:select', item)"
+      >
+        <VListItemTitle class="text-body-2">
+          {{ item.name }}
+        </VListItemTitle>
+        <VListItemSubtitle v-if="item.parentName" class="text-caption">
+          {{ item.parentName }}
+        </VListItemSubtitle>
+      </VListItem>
+    </template>
+  </VList>
+</template>
+
+<script lang="ts" setup>
+import type { TopicItem } from './types';
+
+defineProps<{
+  items: TopicItem[];
+}>();
+
+const emit = defineEmits<{
+  'topic:select': [topic: TopicItem];
+}>();
+</script>
+
+<style lang="scss" scoped>
+.topic-list {
+  max-height: 30rem;
+  overflow-y: auto;
+}
+
+.topic-list-item {
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+}
+</style>
diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
new file mode 100644
index 000000000..8c60801b0
--- /dev/null
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="d-flex align-center ga-3">
+    <VMenu
+      v-model="isOpen"
+      :close-on-content-click="false"
+      max-height="400"
+      min-width="420"
+    >
+      <template #activator="{ props: menuProps }">
+        <VBtn
+          v-bind="menuProps"
+          :color="modelValue ? 'teal-lighten-3' : 'primary-lighten-3'"
+          prepend-icon="mdi-file-tree-outline"
+          size="small"
+          variant="tonal"
+        >
+          {{ modelValue ? modelValue.name : 'Search by topic' }}
+          <VIcon end>mdi-chevron-down</VIcon>
+        </VBtn>
+      </template>
+      <VCard min-width="360">
+        <VCardTitle class="text-body-2"> Select outline topic </VCardTitle>
+        <VDivider />
+        <TopicList :items="items" @topic:select="onSelect" />
+      </VCard>
+    </VMenu>
+    <VChip
+      v-if="modelValue"
+      closable
+      color="teal-lighten-3"
+      size="small"
+      variant="tonal"
+      @click:close="emit('topic:clear')"
+    >
+      {{ modelValue.name }}
+    </VChip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import TopicList from './TopicList.vue';
+import type { TopicItem } from './types';
+import { useOutlineTree } from './useOutlineTree';
+
+defineProps<{
+  modelValue: TopicItem | null;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [topic: TopicItem | null];
+  'topic:select': [topic: TopicItem];
+  'topic:clear': [];
+}>();
+
+const isOpen = ref(false);
+const { items } = useOutlineTree();
+
+function onSelect(topic: TopicItem) {
+  isOpen.value = false;
+  emit('update:modelValue', topic);
+  emit('topic:select', topic);
+}
+</script>

From f3bc112686adf3a84fc80f51b9b55402ef277cf4 Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 27 Mar 2026 09:17:04 +0100
Subject: [PATCH 10/15] Add outline based discovery

---
 .../Assets/Discovery/SearchResults/index.vue  | 59 ++++++++++++++----
 .../repository/Assets/Discovery/index.vue     | 61 ++++++++++++++++---
 2 files changed, 98 insertions(+), 22 deletions(-)

diff --git a/apps/frontend/app/components/repository/Assets/Discovery/SearchResults/index.vue b/apps/frontend/app/components/repository/Assets/Discovery/SearchResults/index.vue
index b626ce123..a6c300540 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/SearchResults/index.vue
+++ b/apps/frontend/app/components/repository/Assets/Discovery/SearchResults/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isSearching" class="d-flex justify-center pa-12">
+  <div v-if="isSearching" class="d-flex flex-column align-center pa-12 ga-4">
     <span class="text-body-1 text-primary-lighten-3">
       Searching the web for relevant resources...
     </span>
@@ -13,27 +13,41 @@
         variant="tonal"
       >
         {{ suggestions.length }} results
+        <template v-if="selectedUrls.size">
+          <VIcon size="x-small">mdi-circle-small</VIcon>
+          {{ selectedUrls.size }} selected
+        </template>
       </VChip>
       <VSpacer />
       <VBtn
-        v-if="selectedUrls.size"
         color="primary-lighten-3"
-        prepend-icon="mdi-close-circle-outline"
+        prepend-icon="mdi-checkbox-multiple-outline"
         size="small"
         variant="text"
-        @click="emit('toggle-all', false)"
+        @click="emit('select:all')"
       >
-        Deselect all
+        Select all
       </VBtn>
       <VBtn
-        v-else
+        v-for="it in bulkImportTypes"
+        :key="it.value"
+        :prepend-icon="it.icon"
         color="primary-lighten-3"
-        prepend-icon="mdi-checkbox-multiple-outline"
         size="small"
         variant="text"
-        @click="emit('toggle-all', true)"
+        @click="emit('select:type', it.value as ContentType)"
       >
-        Select all
+        All {{ it.label.toLowerCase() }}
+      </VBtn>
+      <VBtn
+        v-if="selectedUrls.size"
+        color="primary-lighten-3"
+        prepend-icon="mdi-close-circle-outline"
+        size="small"
+        variant="text"
+        @click="emit('select:clear')"
+      >
+        Clear
       </VBtn>
     </div>
     <div class="d-flex flex-column ga-2">
@@ -42,7 +56,7 @@
         :key="it.url"
         :is-selected="selectedUrls.has(it.url)"
         :suggestion="it"
-        @toggle="emit('toggle', it.url)"
+        @toggle="emit('result:toggle', it.url)"
       />
     </div>
     <div v-if="totalPages > 1" class="d-flex justify-center mt-4">
@@ -69,10 +83,18 @@
 </template>
 
 <script lang="ts" setup>
-import type { DiscoveryResult } from '@tailor-cms/interfaces/discovery';
+import type {
+  ContentType,
+  DiscoveryResult,
+} from '@tailor-cms/interfaces/discovery';
 
 import SearchResult from './SearchResult/index.vue';
 
+const BULK_TYPES: { label: string; value: ContentType; icon: string }[] = [
+  { label: 'images', value: 'image', icon: 'mdi-image-outline' },
+  { label: 'videos', value: 'video', icon: 'mdi-video-outline' },
+];
+
 const ITEMS_PER_PAGE = 20;
 
 const props = defineProps<{
@@ -85,10 +107,21 @@ const props = defineProps<{
 const page = defineModel<number>('page', { required: true });
 
 const emit = defineEmits<{
-  'toggle': [url: string];
-  'toggle-all': [selected: boolean];
+  'result:toggle': [url: string];
+  'select:all': [];
+  'select:clear': [];
+  'select:type': [type: ContentType];
+  'search:cancel': [];
 }>();
 
+const bulkImportTypes = computed(() => {
+  const counts = new Map<string, number>();
+  props.suggestions.forEach((s) => {
+    counts.set(s.type, (counts.get(s.type) || 0) + 1);
+  });
+  return BULK_TYPES.filter((it) => (counts.get(it.value) || 0) > 0);
+});
+
 const totalPages = computed(() =>
   Math.ceil(props.suggestions.length / ITEMS_PER_PAGE),
 );
diff --git a/apps/frontend/app/components/repository/Assets/Discovery/index.vue b/apps/frontend/app/components/repository/Assets/Discovery/index.vue
index b6e2412f0..ed9d87444 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/index.vue
+++ b/apps/frontend/app/components/repository/Assets/Discovery/index.vue
@@ -5,7 +5,7 @@
         <VToolbarTitle class="text-primary-lighten-4 ml-4">
           <VIcon
             class="mx-2"
-            color="teal-lighten-4"
+            color="primary-lighten-4"
             icon="mdi-earth-plus"
             size="small"
           />
@@ -24,11 +24,19 @@
       <VContainer class="discovery-content pt-6" fluid>
         <VRow justify="center">
           <VCol cols="12" lg="10" xl="8">
+            <TopicPicker
+              v-if="hasOutline"
+              v-model="selectedTopic"
+              class="mb-4"
+              @topic:select="onTopicSelect"
+              @topic:clear="selectedTopic = null"
+            />
             <SearchBar
               v-model:query="query"
               v-model:content-filter="contentFilter"
               :is-searching="isSearching"
               @search="search"
+              @search:input="selectedTopic = null"
             />
             <VAlert
               class="mb-4"
@@ -49,8 +57,11 @@
               :selected-urls="selectedUrls"
               :is-searching="isSearching"
               :has-searched="hasSearched"
-              @toggle="toggleSuggestion"
-              @toggle-all="$event ? selectAll() : selectedUrls.clear()"
+              @result:toggle="toggleSuggestion"
+              @select:all="selectAll"
+              @select:clear="selectedUrls.clear()"
+              @select:type="selectByType"
+              @search:cancel="isSearching = false"
             />
           </VCol>
         </VRow>
@@ -62,27 +73,39 @@
 <script lang="ts" setup>
 import type {
   ContentFilter,
+  ContentType,
   DiscoveryResult,
 } from '@tailor-cms/interfaces/discovery';
 
 import api from '@/api/repositoryAsset';
+import { useCurrentRepository } from '@/stores/current-repository';
 import DiscoveryActions from './DiscoveryActions.vue';
 import SearchBar from './SearchBar.vue';
 import SearchResults from './SearchResults/index.vue';
-import { useCurrentRepository } from '@/stores/current-repository';
+import TopicPicker from './TopicPicker/index.vue';
+import type { TopicItem } from './TopicPicker/types';
+import { useOutlineTree } from './TopicPicker/useOutlineTree';
 
-const DOWNLOADABLE_TYPES = new Set(['image', 'pdf', 'video', 'audio']);
 const FETCH_COUNT = 100;
+const MAX_QUERY_WORDS = 15;
+const DOWNLOADABLE_TYPES = new Set([
+  'image', 'pdf', 'video', 'audio',
+]);
 
 const show = defineModel<boolean>({ default: false });
 const emit = defineEmits(['added']);
 
 const notify = useNotification();
-const currentRepositoryStore = useCurrentRepository();
-const repositoryId = computed(() => currentRepositoryStore.repository?.id);
+const store = useCurrentRepository();
+const repositoryId = computed(
+  () => store.repository?.id,
+);
 
 const query = ref('');
 const contentFilter = ref<ContentFilter>('all');
+const selectedTopic = ref<TopicItem | null>(null);
+
+const { hasOutline } = useOutlineTree();
 
 const isAdding = ref(false);
 const isSearching = ref(false);
@@ -91,7 +114,6 @@ const hasSearched = ref(false);
 const suggestions = ref<DiscoveryResult[]>([]);
 const selectedUrls = reactive(new Set<string>());
 const page = ref(1);
-
 const hasDownloadable = computed(() => {
   if (!selectedUrls.size) return false;
   return suggestions.value
@@ -121,6 +143,15 @@ async function search() {
   }
 }
 
+function onTopicSelect(topic: TopicItem) {
+  query.value = topic.context
+    .join(' ')
+    .split(/\s+/)
+    .slice(0, MAX_QUERY_WORDS)
+    .join(' ');
+  search();
+}
+
 function toggleSuggestion(url: string) {
   if (selectedUrls.has(url)) selectedUrls.delete(url);
   else selectedUrls.add(url);
@@ -130,8 +161,19 @@ function selectAll() {
   suggestions.value.forEach((s) => selectedUrls.add(s.url));
 }
 
+function selectByType(type: ContentType) {
+  suggestions.value
+    .filter((s) => s.type === type)
+    .forEach((s) => selectedUrls.add(s.url));
+}
+
 function toImportMeta(result?: DiscoveryResult) {
   if (!result) return {};
+  const tags = [...(result.tags || [])];
+  if (selectedTopic.value) {
+    const topicName = selectedTopic.value.name;
+    if (!tags.includes(topicName)) tags.push(topicName);
+  }
   return {
     contentType: result.type,
     title: result.title,
@@ -139,7 +181,7 @@ function toImportMeta(result?: DiscoveryResult) {
     downloadUrl: result.downloadUrl,
     author: result.author,
     license: result.license,
-    tags: result.tags,
+    tags,
     altText: result.altText,
   };
 }
@@ -182,6 +224,7 @@ watch(show, (v) => {
   selectedUrls.clear();
   hasSearched.value = false;
   page.value = 1;
+  selectedTopic.value = null;
 });
 
 watch(contentFilter, () => {

From 44ca48e5bcf08096d3ba638d648c68f489a4c936 Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Tue, 7 Apr 2026 10:48:38 +0200
Subject: [PATCH 11/15] =?UTF-8?q?=F0=9F=A7=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Assets/Discovery/SearchResults/index.vue  | 30 +------------------
 .../Discovery/TopicPicker/TopicList.vue       |  1 -
 .../Assets/Discovery/TopicPicker/index.vue    |  5 ++--
 .../repository/Assets/Discovery/index.vue     | 18 +++++------
 4 files changed, 13 insertions(+), 41 deletions(-)

diff --git a/apps/frontend/app/components/repository/Assets/Discovery/SearchResults/index.vue b/apps/frontend/app/components/repository/Assets/Discovery/SearchResults/index.vue
index a6c300540..5cb81ab66 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/SearchResults/index.vue
+++ b/apps/frontend/app/components/repository/Assets/Discovery/SearchResults/index.vue
@@ -28,17 +28,6 @@
       >
         Select all
       </VBtn>
-      <VBtn
-        v-for="it in bulkImportTypes"
-        :key="it.value"
-        :prepend-icon="it.icon"
-        color="primary-lighten-3"
-        size="small"
-        variant="text"
-        @click="emit('select:type', it.value as ContentType)"
-      >
-        All {{ it.label.toLowerCase() }}
-      </VBtn>
       <VBtn
         v-if="selectedUrls.size"
         color="primary-lighten-3"
@@ -83,18 +72,10 @@
 </template>
 
 <script lang="ts" setup>
-import type {
-  ContentType,
-  DiscoveryResult,
-} from '@tailor-cms/interfaces/discovery';
+import type { DiscoveryResult } from '@tailor-cms/interfaces/discovery';
 
 import SearchResult from './SearchResult/index.vue';
 
-const BULK_TYPES: { label: string; value: ContentType; icon: string }[] = [
-  { label: 'images', value: 'image', icon: 'mdi-image-outline' },
-  { label: 'videos', value: 'video', icon: 'mdi-video-outline' },
-];
-
 const ITEMS_PER_PAGE = 20;
 
 const props = defineProps<{
@@ -110,18 +91,9 @@ const emit = defineEmits<{
   'result:toggle': [url: string];
   'select:all': [];
   'select:clear': [];
-  'select:type': [type: ContentType];
   'search:cancel': [];
 }>();
 
-const bulkImportTypes = computed(() => {
-  const counts = new Map<string, number>();
-  props.suggestions.forEach((s) => {
-    counts.set(s.type, (counts.get(s.type) || 0) + 1);
-  });
-  return BULK_TYPES.filter((it) => (counts.get(it.value) || 0) > 0);
-});
-
 const totalPages = computed(() =>
   Math.ceil(props.suggestions.length / ITEMS_PER_PAGE),
 );
diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/TopicList.vue b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/TopicList.vue
index c44fca548..d73bd8028 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/TopicList.vue
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/TopicList.vue
@@ -41,7 +41,6 @@ const emit = defineEmits<{
 
 <style lang="scss" scoped>
 .topic-list {
-  max-height: 30rem;
   overflow-y: auto;
 }
 
diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
index 8c60801b0..308b32b05 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
@@ -3,8 +3,9 @@
     <VMenu
       v-model="isOpen"
       :close-on-content-click="false"
-      max-height="400"
-      min-width="420"
+      offset="2"
+      max-height="600"
+      min-width="480"
     >
       <template #activator="{ props: menuProps }">
         <VBtn
diff --git a/apps/frontend/app/components/repository/Assets/Discovery/index.vue b/apps/frontend/app/components/repository/Assets/Discovery/index.vue
index ed9d87444..5bcf98eae 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/index.vue
+++ b/apps/frontend/app/components/repository/Assets/Discovery/index.vue
@@ -29,7 +29,7 @@
               v-model="selectedTopic"
               class="mb-4"
               @topic:select="onTopicSelect"
-              @topic:clear="selectedTopic = null"
+              @topic:clear="clearTopic"
             />
             <SearchBar
               v-model:query="query"
@@ -60,7 +60,7 @@
               @result:toggle="toggleSuggestion"
               @select:all="selectAll"
               @select:clear="selectedUrls.clear()"
-              @select:type="selectByType"
+
               @search:cancel="isSearching = false"
             />
           </VCol>
@@ -73,7 +73,6 @@
 <script lang="ts" setup>
 import type {
   ContentFilter,
-  ContentType,
   DiscoveryResult,
 } from '@tailor-cms/interfaces/discovery';
 
@@ -152,6 +151,13 @@ function onTopicSelect(topic: TopicItem) {
   search();
 }
 
+function clearTopic() {
+  selectedTopic.value = null;
+  query.value = '';
+  suggestions.value = [];
+  hasSearched.value = false;
+}
+
 function toggleSuggestion(url: string) {
   if (selectedUrls.has(url)) selectedUrls.delete(url);
   else selectedUrls.add(url);
@@ -161,12 +167,6 @@ function selectAll() {
   suggestions.value.forEach((s) => selectedUrls.add(s.url));
 }
 
-function selectByType(type: ContentType) {
-  suggestions.value
-    .filter((s) => s.type === type)
-    .forEach((s) => selectedUrls.add(s.url));
-}
-
 function toImportMeta(result?: DiscoveryResult) {
   if (!result) return {};
   const tags = [...(result.tags || [])];

From 43b6364637061a093e0057af586a94bd8f0df10b Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Tue, 7 Apr 2026 11:02:45 +0200
Subject: [PATCH 12/15] =?UTF-8?q?=F0=9F=92=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Assets/Discovery/TopicPicker/index.vue    |  9 ++++-----
 .../Discovery/TopicPicker/useOutlineTree.ts   |  2 +-
 .../repository/Assets/Discovery/index.vue     | 20 +++++++++----------
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
index 308b32b05..3509535d3 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
@@ -20,17 +20,17 @@
         </VBtn>
       </template>
       <VCard min-width="360">
-        <VCardTitle class="text-body-2"> Select outline topic </VCardTitle>
+        <VCardTitle class="text-body-2">Select outline topic</VCardTitle>
         <VDivider />
         <TopicList :items="items" @topic:select="onSelect" />
       </VCard>
     </VMenu>
     <VChip
       v-if="modelValue"
-      closable
       color="teal-lighten-3"
       size="small"
       variant="tonal"
+      closable
       @click:close="emit('topic:clear')"
     >
       {{ modelValue.name }}
@@ -49,16 +49,15 @@ defineProps<{
 
 const emit = defineEmits<{
   'update:modelValue': [topic: TopicItem | null];
-  'topic:select': [topic: TopicItem];
   'topic:clear': [];
 }>();
 
-const isOpen = ref(false);
 const { items } = useOutlineTree();
 
+const isOpen = ref(false);
+
 function onSelect(topic: TopicItem) {
   isOpen.value = false;
   emit('update:modelValue', topic);
-  emit('topic:select', topic);
 }
 </script>
diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
index 63053c733..290ee6790 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
@@ -16,8 +16,8 @@ const buildTopicMeta = (
   return {
     id: activity.id,
     name,
-    parentName: ancestorNames.at(-1),
     isGroup: !isLeaf,
+    parentName: ancestorNames.at(-1),
     isLeaf,
     depth: ancestors.length,
     context: [name, ...ancestorNames, repositoryName].filter(Boolean),
diff --git a/apps/frontend/app/components/repository/Assets/Discovery/index.vue b/apps/frontend/app/components/repository/Assets/Discovery/index.vue
index 5bcf98eae..0226fc80c 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/index.vue
+++ b/apps/frontend/app/components/repository/Assets/Discovery/index.vue
@@ -28,7 +28,6 @@
               v-if="hasOutline"
               v-model="selectedTopic"
               class="mb-4"
-              @topic:select="onTopicSelect"
               @topic:clear="clearTopic"
             />
             <SearchBar
@@ -60,7 +59,6 @@
               @result:toggle="toggleSuggestion"
               @select:all="selectAll"
               @select:clear="selectedUrls.clear()"
-
               @search:cancel="isSearching = false"
             />
           </VCol>
@@ -142,14 +140,6 @@ async function search() {
   }
 }
 
-function onTopicSelect(topic: TopicItem) {
-  query.value = topic.context
-    .join(' ')
-    .split(/\s+/)
-    .slice(0, MAX_QUERY_WORDS)
-    .join(' ');
-  search();
-}
 
 function clearTopic() {
   selectedTopic.value = null;
@@ -227,6 +217,16 @@ watch(show, (v) => {
   selectedTopic.value = null;
 });
 
+watch(selectedTopic, (topic) => {
+  if (!topic) return;
+  query.value = topic.context
+    .join(' ')
+    .split(/\s+/)
+    .slice(0, MAX_QUERY_WORDS)
+    .join(' ');
+  search();
+});
+
 watch(contentFilter, () => {
   if (query.value.trim()) search();
 });

From 678abb983a889b9bd235d82cf8fb36e42506c8f1 Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Tue, 7 Apr 2026 11:05:17 +0200
Subject: [PATCH 13/15] =?UTF-8?q?=F0=9F=92=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/components/repository/Assets/Discovery/index.vue         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/frontend/app/components/repository/Assets/Discovery/index.vue b/apps/frontend/app/components/repository/Assets/Discovery/index.vue
index 0226fc80c..9b41cebea 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/index.vue
+++ b/apps/frontend/app/components/repository/Assets/Discovery/index.vue
@@ -140,7 +140,6 @@ async function search() {
   }
 }
 
-
 function clearTopic() {
   selectedTopic.value = null;
   query.value = '';

From aba427a9de739fb16dd0eb86f6785ac7f2a1908a Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Mon, 13 Apr 2026 14:24:52 +0200
Subject: [PATCH 14/15] =?UTF-8?q?=F0=9F=92=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Assets/Discovery/TopicPicker/index.vue    | 91 ++++++++++---------
 .../Assets/Discovery/TopicPicker/types.ts     |  2 +
 .../Discovery/TopicPicker/useOutlineTree.ts   |  1 +
 3 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
index 3509535d3..1d3407925 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
@@ -1,45 +1,48 @@
 <template>
-  <div class="d-flex align-center ga-3">
-    <VMenu
-      v-model="isOpen"
-      :close-on-content-click="false"
-      offset="2"
-      max-height="600"
-      min-width="480"
-    >
-      <template #activator="{ props: menuProps }">
-        <VBtn
-          v-bind="menuProps"
-          :color="modelValue ? 'teal-lighten-3' : 'primary-lighten-3'"
-          prepend-icon="mdi-file-tree-outline"
-          size="small"
-          variant="tonal"
-        >
-          {{ modelValue ? modelValue.name : 'Search by topic' }}
-          <VIcon end>mdi-chevron-down</VIcon>
-        </VBtn>
-      </template>
-      <VCard min-width="360">
-        <VCardTitle class="text-body-2">Select outline topic</VCardTitle>
-        <VDivider />
-        <TopicList :items="items" @topic:select="onSelect" />
-      </VCard>
-    </VMenu>
-    <VChip
-      v-if="modelValue"
-      color="teal-lighten-3"
-      size="small"
-      variant="tonal"
-      closable
-      @click:close="emit('topic:clear')"
-    >
-      {{ modelValue.name }}
-    </VChip>
-  </div>
+  <VAutocomplete
+    :items="items"
+    :model-value="modelValue?.id ?? null"
+    color="primary-lighten-3"
+    density="default"
+    item-title="name"
+    item-value="id"
+    label="Outline topic"
+    min-width="550"
+    max-width="550"
+    placeholder="Browse topics..."
+    prepend-inner-icon="mdi-file-tree-outline"
+    variant="outlined"
+    clearable
+    hide-details
+    @update:model-value="onSelect"
+  >
+    <template #item="{ item, props: itemProps }">
+      <VListItem v-bind="itemProps">
+        <template #prepend>
+          <VIcon
+            :icon="item.raw.isLeaf
+              ? 'mdi-file-document-outline'
+              : 'mdi-folder-outline'"
+            size="small"
+          />
+        </template>
+        <VListItemSubtitle v-if="item.raw.breadcrumb" class="text-caption">
+          {{ item.raw.breadcrumb }}
+        </VListItemSubtitle>
+      </VListItem>
+    </template>
+    <template v-if="modelValue?.breadcrumb" #selection>
+      <div>
+        <div class="text-body-2">{{ modelValue.name }}</div>
+        <div class="text-caption text-primary-lighten-3">
+          {{ modelValue.breadcrumb }}
+        </div>
+      </div>
+    </template>
+  </VAutocomplete>
 </template>
 
 <script lang="ts" setup>
-import TopicList from './TopicList.vue';
 import type { TopicItem } from './types';
 import { useOutlineTree } from './useOutlineTree';
 
@@ -54,10 +57,12 @@ const emit = defineEmits<{
 
 const { items } = useOutlineTree();
 
-const isOpen = ref(false);
-
-function onSelect(topic: TopicItem) {
-  isOpen.value = false;
-  emit('update:modelValue', topic);
+function onSelect(id: number | null) {
+  if (!id) {
+    emit('topic:clear');
+    return;
+  }
+  const topic = items.value.find((it) => it.id === id);
+  if (topic) emit('update:modelValue', topic);
 }
 </script>
diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/types.ts b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/types.ts
index 5aadbb2ae..ec1615293 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/types.ts
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/types.ts
@@ -2,6 +2,8 @@ export interface TopicItem {
   id: number;
   name: string;
   parentName?: string;
+  // Full ancestor breadcrumb (e.g. "Module 1 / Sub-module")
+  breadcrumb: string;
   isGroup: boolean;
   isLeaf: boolean;
   depth: number;
diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
index 290ee6790..0d27b7384 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts
@@ -18,6 +18,7 @@ const buildTopicMeta = (
     name,
     isGroup: !isLeaf,
     parentName: ancestorNames.at(-1),
+    breadcrumb: ancestorNames.toReversed().join(' / '),
     isLeaf,
     depth: ancestors.length,
     context: [name, ...ancestorNames, repositoryName].filter(Boolean),

From 107dc84669df9becf0b711742ec6db7a8cb78832 Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Wed, 15 Apr 2026 11:28:17 +0200
Subject: [PATCH 15/15] =?UTF-8?q?=F0=9F=92=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../repository/Assets/Discovery/TopicPicker/index.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
index 1d3407925..1562e5bc9 100644
--- a/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
+++ b/apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue
@@ -17,7 +17,7 @@
     @update:model-value="onSelect"
   >
     <template #item="{ item, props: itemProps }">
-      <VListItem v-bind="itemProps">
+      <VListItem v-bind="itemProps" color="primary-darken-4">
         <template #prepend>
           <VIcon
             :icon="item.raw.isLeaf