Draft search results UI

Tekst-Web/src/api/schema.d.ts

@@ -2170,6 +2170,8 @@ export interface components {
       id: string;
       /** Label */
       label: string;
+      /** Fulllabel */
+      fullLabel: string;
       /**
        * Textid
        * @example 5eb7cf5a86d9755df3a6c593
@@ -2197,6 +2199,11 @@ export interface components {
       totalHitsRelation: 'eq' | 'gte';
       /** Maxscore */
       maxScore: number | null;
+      /**
+       * Indexcreationtime
+       * Format: date-time
+       */
+      indexCreationTime: string;
     };
     /** TekstErrorModel */
     TekstErrorModel: {

Tekst-Web/src/assets/main.css

@@ -187,3 +187,7 @@ img {
 .n-thing-header__title {
   font-size: var(--font-size) !important;
 }
+
+.n-list-item__main {
+  min-width: 0;
+}

Tekst-Web/src/components/search/SearchResult.vue

@@ -1,26 +1,84 @@
 <script setup lang="ts">
 import type { SearchHit } from '@/api';
-import { NListItem, NThing } from 'naive-ui';
+import Color from 'color';
+import { NListItem, NTag } from 'naive-ui';
+import { computed } from 'vue';
 
 export interface SearchResultProps {
   id: SearchHit['id'];
   label: SearchHit['label'];
+  fullLabel: SearchHit['fullLabel'];
   text: string;
   textColor: string;
   level: SearchHit['level'];
   levelLabel: string;
   position: SearchHit['position'];
-  score: SearchHit['score'];
+  scorePercent: number;
+  smallScreen?: boolean;
 }
 
 const props = defineProps<SearchResultProps>();
 const emit = defineEmits(['click']);
+const textTagColor = computed(() => Color(props.textColor).fade(0.75).rgb().string());
+const scoreTagColor = computed(
+  () => `rgba(${180 - props.scorePercent * 1.8}, ${props.scorePercent * 1.8}, 0, 0.2)`
+);
 </script>
 
 <template>
-  <n-list-item @click="emit('click', props)">
-    <n-thing>
-      <template #header> {{ levelLabel }}: {{ label }} </template>
-    </n-thing>
+  <n-list-item class="sr-item" :title="fullLabel" @click="emit('click', props)">
+    <div class="sr-container">
+      <div class="sr-header ellipsis">
+        {{ fullLabel }} bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
+        foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo
+        bar foo bar foo bar foo bar foo bar foo bar foo bar
+      </div>
+      <div class="sr-body">
+        <div class="ellipsis">
+          foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo
+          foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo
+        </div>
+        <div class="ellipsis">
+          bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar
+          bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar
+        </div>
+      </div>
+      <div class="sr-footer">
+        <n-tag size="small" :bordered="false" :color="{ color: textTagColor }">
+          {{ text }}
+        </n-tag>
+        <n-tag size="small" :bordered="false">
+          {{ levelLabel }}
+        </n-tag>
+        <n-tag size="small" :bordered="false" :color="{ color: scoreTagColor }">
+          Relevance: {{ scorePercent }}%
+        </n-tag>
+      </div>
+    </div>
   </n-list-item>
 </template>
+
+<style scoped>
+.sr-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.sr-header {
+  font-weight: var(--font-weight-bold);
+}
+.sr-body {
+  display: flex;
+  flex-direction: column;
+}
+.sr-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--content-gap);
+}
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

Tekst-Web/src/views/SearchResultsView.vue

@@ -2,7 +2,7 @@
 import IconHeading from '@/components/generic/IconHeading.vue';
 import { SearchResultsIcon } from '@/icons';
 import SearchResult from '@/components/search/SearchResult.vue';
-import { NList } from 'naive-ui';
+import { NList, NTime } from 'naive-ui';
 import { usePlatformData } from '@/composables/platformData';
 import { computed, onBeforeMount, ref } from 'vue';
 import { GET, type SearchResults } from '@/api';
@@ -18,16 +18,20 @@ const resultsData = ref<SearchResults>();
 const results = computed<SearchResultProps[]>(
   () =>
     resultsData.value?.hits.map((r) => {
-      const text = pfData.value?.texts.find((t) => t.id === r.id);
+      const text = pfData.value?.texts.find((t) => t.id === r.textId);
       return {
         id: r.id,
         label: r.label,
+        fullLabel: r.fullLabel,
         text: text?.title || '',
         textColor: text?.accentColor || '#000',
         level: r.level,
         levelLabel: state.textLevelLabels[r.level] || '',
         position: r.position,
-        score: r.score,
+        scorePercent: resultsData.value?.maxScore
+          ? (r.score / resultsData.value?.maxScore) * 100
+          : 0,
+        smallScreen: state.smallScreen,
       };
     }) || []
 );
@@ -64,8 +68,33 @@ onBeforeMount(async () => {
     {{ $t('search.results.heading') }}
   </icon-heading>
 
+  <div
+    v-if="resultsData"
+    style="
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      column-gap: var(--layout-gap);
+      flex-wrap: wrap;
+    "
+    class="text-small translucent"
+  >
+    <div>
+      {{
+        $t('search.results.results', {
+          count: (resultsData.totalHitsRelation === 'eq' ? '' : '≥') + resultsData.totalHits,
+          ms: resultsData.took,
+        })
+      }}
+    </div>
+    <div>
+      {{ $t('search.results.indexCreationTime') }}:
+      <n-time :time="new Date(resultsData.indexCreationTime)" type="datetime" />
+    </div>
+  </div>
+
   <div class="content-block">
-    <n-list clickable hoverable style="background-color: transparent">
+    <n-list v-if="results.length" clickable hoverable style="background-color: transparent">
       <search-result
         v-for="result in results"
         :key="result.id"

Tekst-Web/src/views/SearchView.vue

@@ -2,14 +2,32 @@
 import HelpButtonWidget from '@/components/HelpButtonWidget.vue';
 import IconHeading from '@/components/generic/IconHeading.vue';
 import { SearchIcon } from '@/icons';
+
+function generateScoreColor(scorePercent: number) {
+  return `rgba(${180 - scorePercent * 1.8}, ${scorePercent * 1.8}, 0, 0.2)`;
+}
 </script>
 
 <template>
   <icon-heading level="1" :icon="SearchIcon">
     {{ $t('search.heading') }}
     <help-button-widget help-key="searchView" />
   </icon-heading>
-  <div class="content-block">...</div>
+  <div class="content-block">
+    <div style="height: 32px" :style="{ backgroundColor: generateScoreColor(100) }">
+      Relevance: 100%
+    </div>
+    <div style="height: 32px" :style="{ backgroundColor: generateScoreColor(90) }">100%</div>
+    <div style="height: 32px" :style="{ backgroundColor: generateScoreColor(80) }">100%</div>
+    <div style="height: 32px" :style="{ backgroundColor: generateScoreColor(70) }">100%</div>
+    <div style="height: 32px" :style="{ backgroundColor: generateScoreColor(60) }">100%</div>
+    <div style="height: 32px" :style="{ backgroundColor: generateScoreColor(50) }">100%</div>
+    <div style="height: 32px" :style="{ backgroundColor: generateScoreColor(40) }">100%</div>
+    <div style="height: 32px" :style="{ backgroundColor: generateScoreColor(30) }">100%</div>
+    <div style="height: 32px" :style="{ backgroundColor: generateScoreColor(20) }">100%</div>
+    <div style="height: 32px" :style="{ backgroundColor: generateScoreColor(10) }">100%</div>
+    <div style="height: 32px" :style="{ backgroundColor: generateScoreColor(1) }">100%</div>
+  </div>
 </template>
 
 <style scoped></style>

Tekst-Web/translations/ui/deDE.yml

@@ -677,6 +677,8 @@ search:
     heading: Globale Sucheinstellungen
   results:
     heading: Suchergebnisse
+    results: '{count} Ergebnisse in {ms} Millisekunden'
+    indexCreationTime: Stand der Daten für diese Suche
   nothingFound: Nichts gefunden
 
 help:

Tekst-Web/translations/ui/enUS.yml

@@ -653,6 +653,8 @@ search:
     heading: Global Search Settings
   results:
     heading: Search Results
+    results: '{count} results in {ms} milliseconds'
+    indexCreationTime: State of data for this search
   nothingFound: Nothing found
 
 help: