From 916793f5aefa76c7e61d483268311affd5987dc9 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 5 Jan 2023 23:50:14 +0100
Subject: [PATCH] fix: ui search items

---
 components/common/CommonTrendingCharts.vue    |  6 ++++-
 components/search/SearchAccountInfo.vue       | 24 +++++++++++++++++++
 ...{HashtagInfo.vue => SearchHashtagInfo.vue} |  8 +++----
 components/search/SearchResult.vue            | 12 ++++++++--
 components/search/SearchWidget.vue            |  2 +-
 components/tiptap/TiptapHashtagList.vue       |  3 +--
 6 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 components/search/SearchAccountInfo.vue
 rename components/search/{HashtagInfo.vue => SearchHashtagInfo.vue} (64%)

diff --git a/components/common/CommonTrendingCharts.vue b/components/common/CommonTrendingCharts.vue
index 43fbf05b..b579dfee 100644
--- a/components/common/CommonTrendingCharts.vue
+++ b/components/common/CommonTrendingCharts.vue
@@ -4,8 +4,12 @@ import sparkline from '@fnando/sparkline'
 
 const {
   history,
+  width = 60,
+  height = 40,
 } = $defineProps<{
   history?: History[]
+  width?: number
+  height?: number
 }>()
 
 const historyNum = $computed(() => {
@@ -24,5 +28,5 @@ watch([$$(historyNum), $$(sparklineEl)], ([historyNum, sparklineEl]) => {
 </script>
 
 <template>
-  <svg ref="sparklineEl" class="sparkline" width="60" height="40" stroke-width="3" />
+  <svg ref="sparklineEl" class="sparkline" :width="width" :height="height" stroke-width="3" />
 </template>
diff --git a/components/search/SearchAccountInfo.vue b/components/search/SearchAccountInfo.vue
new file mode 100644
index 00000000..dd55f5c6
--- /dev/null
+++ b/components/search/SearchAccountInfo.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { Account } from 'masto'
+
+defineProps<{
+  account: Account
+}>()
+</script>
+
+<template>
+  <button flex gap-2 items-center>
+    <AccountAvatar w-10 h-10 :account="account" shrink-0 />
+    <div flex="~ col gap1" shrink h-full overflow-hidden leading-none>
+      <div flex="~" gap-2>
+        <ContentRich
+          line-clamp-1 ws-pre-wrap break-all text-base
+          :content="getDisplayName(account, { rich: true })"
+          :emojis="account.emojis"
+        />
+        <AccountBotIndicator v-if="account.bot" />
+      </div>
+      <AccountHandle text-sm :account="account" text-secondary-light />
+    </div>
+  </button>
+</template>
diff --git a/components/search/HashtagInfo.vue b/components/search/SearchHashtagInfo.vue
similarity index 64%
rename from components/search/HashtagInfo.vue
rename to components/search/SearchHashtagInfo.vue
index f98cf3fd..f7b9d06f 100644
--- a/components/search/HashtagInfo.vue
+++ b/components/search/SearchHashtagInfo.vue
@@ -9,8 +9,8 @@ const totalTrend = $computed(() =>
 </script>
 
 <template>
-  <div flex flex-row items-center gap2>
-    <div w-12 h-12 rounded-full bg-active flex place-items-center place-content-center>
+  <div flex flex-row items-center gap2 relative>
+    <div w-10 h-10 flex-none rounded-full bg-active flex place-items-center place-content-center>
       <div i-ri:hashtag text-secondary text-lg />
     </div>
     <div flex flex-col>
@@ -19,8 +19,8 @@ const totalTrend = $computed(() =>
       </span>
       <CommonTrending :history="hashtag.history" text-xs text-secondary truncate />
     </div>
-    <div v-if="totalTrend" w-12 h-12 flex place-items-center place-content-center ml-auto>
-      <CommonTrendingCharts :history="hashtag.history" text-xs text-secondary />
+    <div v-if="totalTrend" absolute left-15 right-0 top-0 bottom-4 op35 flex place-items-center place-content-center ml-auto>
+      <CommonTrendingCharts :history="hashtag.history" text-xs text-secondary width="150" height="20" h-full w-full />
     </div>
   </div>
 </template>
diff --git a/components/search/SearchResult.vue b/components/search/SearchResult.vue
index e4b17eff..a42baa56 100644
--- a/components/search/SearchResult.vue
+++ b/components/search/SearchResult.vue
@@ -12,9 +12,17 @@ const onActivate = () => {
 </script>
 
 <template>
-  <CommonScrollIntoView as="RouterLink" :active="active" :to="result.to" py2 block px2 :aria-selected="active" :class="{ 'bg-active': active }" hover:bg-active @click="() => onActivate()">
+  <CommonScrollIntoView
+    as="RouterLink"
+    hover:bg-active
+    :active="active"
+    :to="result.to" py2 block px2
+    :aria-selected="active"
+    :class="{ 'bg-active': active }"
+    @click="() => onActivate()"
+  >
     <SearchHashtagInfo v-if="result.type === 'hashtag'" :hashtag="result.hashtag" />
-    <AccountInfo v-else-if="result.type === 'account' && result.account" :account="result.account" />
+    <SearchAccountInfo v-else-if="result.type === 'account' && result.account" :account="result.account" />
     <StatusCard v-else-if="result.type === 'status' && result.status" :status="result.status" :actions="false" :show-reply-to="false" />
     <!-- <div v-else-if="result.type === 'action'" text-center>
       {{ result.action!.label }}
diff --git a/components/search/SearchWidget.vue b/components/search/SearchWidget.vue
index f364542b..0b150f64 100644
--- a/components/search/SearchWidget.vue
+++ b/components/search/SearchWidget.vue
@@ -90,7 +90,7 @@ const activate = () => {
       >
     </div>
     <!-- Results -->
-    <div p4 left-0 top-10 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
+    <div left-0 top-12 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
       <div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2>
         <span v-if="query.length === 0" block text-center text-sm text-secondary>
           {{ t('search.search_desc') }}
diff --git a/components/tiptap/TiptapHashtagList.vue b/components/tiptap/TiptapHashtagList.vue
index 15e57c92..88728379 100644
--- a/components/tiptap/TiptapHashtagList.vue
+++ b/components/tiptap/TiptapHashtagList.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Tag } from 'masto'
 import CommonScrollIntoView from '../common/CommonScrollIntoView.vue'
-import HashtagInfo from '../search/HashtagInfo.vue'
 
 const { items, command } = defineProps<{
   items: Tag[]
@@ -60,7 +59,7 @@ defineExpose({
         block m0 w-full text-left px2 py1
         @click="selectItem(index)"
       >
-        <HashtagInfo :hashtag="item" />
+        <SearchHashtagInfo :hashtag="item" />
       </CommonScrollIntoView>
     </template>
   </div>