feat: allow searching for statuses (#632)

This commit is contained in:
Daniel Roe 2022-12-29 15:44:26 +01:00 committed by GitHub
parent 86a604ae9c
commit 12280afe70
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 25 additions and 7 deletions

View file

@ -11,6 +11,7 @@ const onActivate = () => {
<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" :active="active" :to="result.to" py2 block px2 :aria-selected="active" :class="{ 'bg-active': active }" hover:bg-active @click="() => onActivate()">
<SearchHashtagInfo v-if="result.type === 'hashtag'" :hashtag="result.hashtag" /> <SearchHashtagInfo v-if="result.type === 'hashtag'" :hashtag="result.hashtag" />
<AccountInfo v-else-if="result.type === 'account'" :account="result.account" /> <AccountInfo v-else-if="result.type === 'account'" :account="result.account" />
<StatusCard v-else-if="result.type === 'status'" :status="result.status" :actions="false" :show-reply-to="false" />
<div v-else-if="result.type === 'action'" text-center> <div v-else-if="result.type === 'action'" text-center>
{{ result.action!.label }} {{ result.action!.label }}
</div> </div>

View file

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
const query = ref('') const query = ref('')
const { accounts, hashtags, loading } = useSearch(query) const { accounts, hashtags, loading, statuses } = useSearch(query)
const index = ref(0) const index = ref(0)
const { t } = useI18n() const { t } = useI18n()
@ -13,8 +13,9 @@ const results = computed(() => {
return [] return []
const results = [ const results = [
...hashtags.value.slice(0, 3).map(hashtag => ({ type: 'hashtag', hashtag, to: `/tags/${hashtag.name}` })), ...hashtags.value.slice(0, 3).map(hashtag => ({ type: 'hashtag', hashtag, to: getTagRoute(hashtag.name) })),
...accounts.value.map(account => ({ type: 'account', account, to: `/@${account.acct}` })), ...accounts.value.map(account => ({ type: 'account', account, to: getAccountRoute(account) })),
...statuses.value.map(status => ({ type: 'status', status, to: getStatusRoute(status) })),
// Disable until search page is implemented // Disable until search page is implemented
// { // {

View file

@ -1,10 +1,11 @@
import type { Account } from 'masto' import type { Account, Status } from 'masto'
export interface SearchResult { export interface SearchResult {
type: 'account' | 'hashtag' | 'action' type: 'account' | 'hashtag' | 'action' | 'status'
to: string to: string
label?: string label?: string
account?: Account account?: Account
status?: Status
hashtag?: any hashtag?: any
action?: { action?: {
label: string label: string

View file

@ -145,7 +145,7 @@ const isDM = $computed(() => status.visibility === 'direct')
<StatusEditIndicator :status="status" inline /> <StatusEditIndicator :status="status" inline />
</div> </div>
</div> </div>
<StatusActionsMore :status="status" mr--2 /> <StatusActionsMore v-if="actions !== false" :status="status" mr--2 />
</div> </div>
<StatusContent :status="status" :context="context" mb2 :class="{ mt2: isDM }" /> <StatusContent :status="status" :context="context" mb2 :class="{ mt2: isDM }" />
<div> <div>

View file

@ -111,6 +111,16 @@ export function getStatusRoute(status: Status) {
}) })
} }
export function getTagRoute(tag: string) {
return useRouter().resolve({
name: 'tag',
params: {
server: currentServer.value,
tag,
},
})
}
export function getStatusPermalinkRoute(status: Status) { export function getStatusPermalinkRoute(status: Status) {
return status.url ? withoutProtocol(status.url) : null return status.url ? withoutProtocol(status.url) : null
} }

View file

@ -7,6 +7,7 @@ export interface UseSearchOptions {
export function useSearch(query: MaybeRef<string>, options?: UseSearchOptions) { export function useSearch(query: MaybeRef<string>, options?: UseSearchOptions) {
const done = ref(false) const done = ref(false)
const masto = useMasto()
const loading = ref(false) const loading = ref(false)
const statuses = ref<Status[]>([]) const statuses = ref<Status[]>([])
const accounts = ref<Account[]>([]) const accounts = ref<Account[]>([])
@ -24,7 +25,7 @@ export function useSearch(query: MaybeRef<string>, options?: UseSearchOptions) {
* Based on the source it seems like modifying the params when calling next would result in a new search, * Based on the source it seems like modifying the params when calling next would result in a new search,
* but that doesn't seem to be the case. So instead we just create a new paginator with the new params. * but that doesn't seem to be the case. So instead we just create a new paginator with the new params.
*/ */
paginator = useMasto().search({ q: unref(query), type: unref(options?.type) }) paginator = masto.search({ q: unref(query), resolve: true, type: unref(options?.type) })
const nextResults = await paginator.next() const nextResults = await paginator.next()
done.value = nextResults.done || false done.value = nextResults.done || false

View file

@ -1,4 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
definePageMeta({
name: 'tag',
})
const params = useRoute().params const params = useRoute().params
const tagName = $(computedEager(() => params.tag as string)) const tagName = $(computedEager(() => params.tag as string))