Compare commits
No commits in common. "72228d1c8a05f62fbc27927b99a110db905e7373" and "7bcd793afd7fa7ae05f3cb97deb1c071027b997c" have entirely different histories.
72228d1c8a
...
7bcd793afd
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "misskey",
|
||||
"version": "12.119.0+birb4-1",
|
||||
"version": "12.119.0+birb4",
|
||||
"codename": "indigo",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ export function toHtml(nodes: mfm.MfmNode[] | null, mentionedRemoteUsers: IMenti
|
|||
|
||||
hashtag(node) {
|
||||
const a = doc.createElement('a');
|
||||
a.href = `${config.url}/explore/tags/${node.props.hashtag}`;
|
||||
a.href = `${config.url}/tags/${node.props.hashtag}`;
|
||||
a.textContent = `#${node.props.hashtag}`;
|
||||
a.setAttribute('rel', 'tag');
|
||||
return a;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@ import config from '@/config/index.js';
|
|||
|
||||
export default (tag: string) => ({
|
||||
type: 'Hashtag',
|
||||
href: `${config.url}/explore/tags/${encodeURIComponent(tag)}`,
|
||||
href: `${config.url}/tags/${encodeURIComponent(tag)}`,
|
||||
name: `#${tag}`,
|
||||
});
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -245,7 +245,7 @@ export default defineComponent({
|
|||
case 'hashtag': {
|
||||
return [h(MkA, {
|
||||
key: Math.random(),
|
||||
to: `/explore/tags/${encodeURIComponent(token.props.hashtag)}`,
|
||||
to: this.isNote ? `/tags/${encodeURIComponent(token.props.hashtag)}` : `/explore/tags/${encodeURIComponent(token.props.hashtag)}`,
|
||||
style: 'color:var(--hashtag);',
|
||||
}, `#${token.props.hashtag}`)];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<template>
|
||||
<MkSpacer :content-max="1200">
|
||||
<div>
|
||||
<MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock">
|
||||
<template #prefix><i class="fas fa-search"></i></template>
|
||||
<template #label>{{ i18n.ts.searchUser }}</template>
|
||||
</MkInput>
|
||||
<MkRadios v-model="searchOrigin" class="_formBlock">
|
||||
<option value="combined">{{ i18n.ts.all }}</option>
|
||||
<option value="local">{{ i18n.ts.local }}</option>
|
||||
<option value="remote">{{ i18n.ts.remote }}</option>
|
||||
</MkRadios>
|
||||
</div>
|
||||
|
||||
<XUserList v-if="searchQuery" ref="searchEl" class="_gap" :pagination="searchPagination"/>
|
||||
</MkSpacer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import MkInput from '@/components/form/input.vue';
|
||||
import MkRadios from '@/components/form/radios.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import XUserList from '@/components/MkUserList.vue';
|
||||
|
||||
let searchQuery = $ref(null);
|
||||
let searchOrigin = $ref('combined');
|
||||
|
||||
const searchPagination = {
|
||||
endpoint: 'users/search' as const,
|
||||
limit: 10,
|
||||
params: computed(() => (searchQuery && searchQuery !== '') ? {
|
||||
query: searchQuery,
|
||||
origin: searchOrigin,
|
||||
} : null),
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
<template>
|
||||
<MkSpacer :content-max="1200">
|
||||
<MkFolder ref="tagsEl" class="_gap">
|
||||
<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
|
||||
|
||||
<div class="vxjfqztj">
|
||||
<MkA v-for="tag in tagsTrending" :key="'trend:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="trending">{{ tag.tag }}</MkA>
|
||||
<MkA v-for="tag in tagsLocal" :key="'local:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="local">{{ tag.tag }}</MkA>
|
||||
<MkA v-for="tag in tagsRemote" :key="'remote:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="remote">{{ tag.tag }}</MkA>
|
||||
</div>
|
||||
</MkFolder>
|
||||
|
||||
<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
|
||||
<template #header><i class="fas fa-users fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.users }}</template>
|
||||
<XUserList :pagination="tagUsers"/>
|
||||
</MkFolder>
|
||||
|
||||
<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
|
||||
<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.notes }}</template>
|
||||
<MkSpacer :content-max="800">
|
||||
<XNotes class="_content" :pagination="tagPosts"/>
|
||||
</MkSpacer>
|
||||
</MkFolder>
|
||||
|
||||
</MkSpacer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, watch, onMounted } from 'vue';
|
||||
import XUserList from '@/components/MkUserList.vue';
|
||||
import XNotes from '@/components/MkNotes.vue';
|
||||
import MkFolder from '@/components/MkFolder.vue';
|
||||
import MkTab from '@/components/MkTab.vue';
|
||||
import number from '@/filters/number';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { instance } from '@/instance';
|
||||
import { useInterval } from '@/scripts/use-interval';
|
||||
|
||||
|
||||
const props = defineProps<{
|
||||
tag?: string;
|
||||
}>();
|
||||
|
||||
let origin = $ref('local');
|
||||
let tagsEl = $ref<InstanceType<typeof MkFolder>>();
|
||||
let tagsLocal = $ref([]);
|
||||
let tagsRemote = $ref([]);
|
||||
let tagsTrending = $ref([]);
|
||||
|
||||
watch(() => props.tag, () => {
|
||||
if (tagsEl) tagsEl.toggleContent(props.tag == null);
|
||||
}, { immediate: true });
|
||||
|
||||
const tagUsers = $computed(() => ({
|
||||
endpoint: 'hashtags/users' as const,
|
||||
limit: 30,
|
||||
params: {
|
||||
tag: props.tag,
|
||||
origin: 'combined',
|
||||
sort: '+follower',
|
||||
},
|
||||
}));
|
||||
|
||||
const tagPosts = $computed(() => ({
|
||||
endpoint: 'notes/search-by-tag' as const,
|
||||
limit: 10,
|
||||
params: {
|
||||
tag: props.tag,
|
||||
},
|
||||
}));
|
||||
|
||||
const fetch = async () => {
|
||||
const [local, remote, trending] = await Promise.all([
|
||||
os.api('hashtags/list', {
|
||||
sort: '+attachedLocalUsers',
|
||||
attachedToLocalUserOnly: true,
|
||||
limit: 15,
|
||||
}),
|
||||
os.api('hashtags/list', {
|
||||
sort: '+attachedRemoteUsers',
|
||||
attachedToRemoteUserOnly: true,
|
||||
limit: 15,
|
||||
}),
|
||||
os.api('hashtags/trend')
|
||||
]);
|
||||
|
||||
// Deduplicate (trends > local > remote)
|
||||
tagsRemote = remote.filter((rTag) => (
|
||||
!local.some((lTag) => lTag.tag == rTag.tag) && !trending.some((tTag) => tTag.tag == rTag.tag)
|
||||
));
|
||||
tagsLocal = local.filter((lTag) => (
|
||||
!trending.some((tTag) => tTag.tag == lTag.tag)
|
||||
));
|
||||
tagsTrending = trending;
|
||||
};
|
||||
|
||||
useInterval(fetch, 1000 * 60, {
|
||||
immediate: true,
|
||||
afterMounted: true,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vxjfqztj {
|
||||
> * {
|
||||
margin-right: 16px;
|
||||
|
||||
&.trending {
|
||||
color: var(--hashtag);
|
||||
}
|
||||
&.local {
|
||||
color: var(--fg);
|
||||
}
|
||||
&.remote {
|
||||
color: var(--fgTransparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,36 +5,54 @@
|
|||
<option value="remote">{{ i18n.ts.remote }}</option>
|
||||
</MkTab>
|
||||
<div v-if="origin === 'local'">
|
||||
<MkFolder class="_gap" persist-key="explore-pinned-users">
|
||||
<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
|
||||
<XUserList :pagination="pinnedUsers"/>
|
||||
</MkFolder>
|
||||
<MkFolder class="_gap" persist-key="explore-popular-users">
|
||||
<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
|
||||
<XUserList :pagination="popularUsers"/>
|
||||
</MkFolder>
|
||||
<MkFolder class="_gap" persist-key="explore-recently-updated-users">
|
||||
<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
|
||||
<XUserList :pagination="recentlyUpdatedUsers"/>
|
||||
</MkFolder>
|
||||
<MkFolder class="_gap" persist-key="explore-recently-registered-users">
|
||||
<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
|
||||
<XUserList :pagination="recentlyRegisteredUsers"/>
|
||||
</MkFolder>
|
||||
<template v-if="tag == null">
|
||||
<MkFolder class="_gap" persist-key="explore-pinned-users">
|
||||
<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
|
||||
<XUserList :pagination="pinnedUsers"/>
|
||||
</MkFolder>
|
||||
<MkFolder class="_gap" persist-key="explore-popular-users">
|
||||
<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
|
||||
<XUserList :pagination="popularUsers"/>
|
||||
</MkFolder>
|
||||
<MkFolder class="_gap" persist-key="explore-recently-updated-users">
|
||||
<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
|
||||
<XUserList :pagination="recentlyUpdatedUsers"/>
|
||||
</MkFolder>
|
||||
<MkFolder class="_gap" persist-key="explore-recently-registered-users">
|
||||
<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
|
||||
<XUserList :pagination="recentlyRegisteredUsers"/>
|
||||
</MkFolder>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else>
|
||||
<MkFolder class="_gap">
|
||||
<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
|
||||
<XUserList :pagination="popularUsersF"/>
|
||||
<MkFolder ref="tagsEl" :foldable="true" :expanded="false" class="_gap">
|
||||
<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
|
||||
|
||||
<div class="vxjfqztj">
|
||||
<MkA v-for="tag in tagsLocal" :key="'local:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="local">{{ tag.tag }}</MkA>
|
||||
<MkA v-for="tag in tagsRemote" :key="'remote:' + tag.tag" :to="`/explore/tags/${tag.tag}`">{{ tag.tag }}</MkA>
|
||||
</div>
|
||||
</MkFolder>
|
||||
<MkFolder class="_gap">
|
||||
<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
|
||||
<XUserList :pagination="recentlyUpdatedUsersF"/>
|
||||
</MkFolder>
|
||||
<MkFolder class="_gap">
|
||||
<template #header><i class="fas fa-rocket fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyDiscoveredUsers }}</template>
|
||||
<XUserList :pagination="recentlyRegisteredUsersF"/>
|
||||
|
||||
<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
|
||||
<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
|
||||
<XUserList :pagination="tagUsers"/>
|
||||
</MkFolder>
|
||||
|
||||
<template v-if="tag == null">
|
||||
<MkFolder class="_gap">
|
||||
<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
|
||||
<XUserList :pagination="popularUsersF"/>
|
||||
</MkFolder>
|
||||
<MkFolder class="_gap">
|
||||
<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
|
||||
<XUserList :pagination="recentlyUpdatedUsersF"/>
|
||||
</MkFolder>
|
||||
<MkFolder class="_gap">
|
||||
<template #header><i class="fas fa-rocket fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyDiscoveredUsers }}</template>
|
||||
<XUserList :pagination="recentlyRegisteredUsersF"/>
|
||||
</MkFolder>
|
||||
</template>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</template>
|
||||
|
|
@ -49,7 +67,28 @@ import * as os from '@/os';
|
|||
import { i18n } from '@/i18n';
|
||||
import { instance } from '@/instance';
|
||||
|
||||
const props = defineProps<{
|
||||
tag?: string;
|
||||
}>();
|
||||
|
||||
let origin = $ref('local');
|
||||
let tagsEl = $ref<InstanceType<typeof MkFolder>>();
|
||||
let tagsLocal = $ref([]);
|
||||
let tagsRemote = $ref([]);
|
||||
|
||||
watch(() => props.tag, () => {
|
||||
if (tagsEl) tagsEl.toggleContent(props.tag == null);
|
||||
});
|
||||
|
||||
const tagUsers = $computed(() => ({
|
||||
endpoint: 'hashtags/users' as const,
|
||||
limit: 30,
|
||||
params: {
|
||||
tag: props.tag,
|
||||
origin: 'combined',
|
||||
sort: '+follower',
|
||||
},
|
||||
}));
|
||||
|
||||
const pinnedUsers = { endpoint: 'pinned-users' };
|
||||
const popularUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
|
||||
|
|
@ -79,4 +118,31 @@ const recentlyRegisteredUsersF = { endpoint: 'users', limit: 10, noPaging: true,
|
|||
origin: 'combined',
|
||||
sort: '+createdAt',
|
||||
} };
|
||||
|
||||
os.api('hashtags/list', {
|
||||
sort: '+attachedLocalUsers',
|
||||
attachedToLocalUserOnly: true,
|
||||
limit: 30,
|
||||
}).then(tags => {
|
||||
tagsLocal = tags;
|
||||
});
|
||||
os.api('hashtags/list', {
|
||||
sort: '+attachedRemoteUsers',
|
||||
attachedToRemoteUserOnly: true,
|
||||
limit: 30,
|
||||
}).then(tags => {
|
||||
tagsRemote = tags;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vxjfqztj {
|
||||
> * {
|
||||
margin-right: 16px;
|
||||
|
||||
&.local {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,11 +8,22 @@
|
|||
<div v-else-if="tab === 'users'">
|
||||
<XUsers/>
|
||||
</div>
|
||||
<div v-else-if="tab === 'tags'">
|
||||
<XTags :tag="props.tag" />
|
||||
</div>
|
||||
<div v-else-if="tab === 'search'">
|
||||
<XSearch />
|
||||
<MkSpacer :content-max="1200">
|
||||
<div>
|
||||
<MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock">
|
||||
<template #prefix><i class="fas fa-search"></i></template>
|
||||
<template #label>{{ i18n.ts.searchUser }}</template>
|
||||
</MkInput>
|
||||
<MkRadios v-model="searchOrigin" class="_formBlock">
|
||||
<option value="combined">{{ i18n.ts.all }}</option>
|
||||
<option value="local">{{ i18n.ts.local }}</option>
|
||||
<option value="remote">{{ i18n.ts.remote }}</option>
|
||||
</MkRadios>
|
||||
</div>
|
||||
|
||||
<XUserList v-if="searchQuery" ref="searchEl" class="_gap" :pagination="searchPagination"/>
|
||||
</MkSpacer>
|
||||
</div>
|
||||
</div>
|
||||
</MkStickyContainer>
|
||||
|
|
@ -22,26 +33,37 @@
|
|||
import { computed, watch } from 'vue';
|
||||
import XFeatured from './explore.featured.vue';
|
||||
import XUsers from './explore.users.vue';
|
||||
import XTags from './explore.tags.vue';
|
||||
import XSearch from './explore.search.vue';
|
||||
import MkFolder from '@/components/MkFolder.vue';
|
||||
import MkInput from '@/components/form/input.vue';
|
||||
import MkRadios from '@/components/form/radios.vue';
|
||||
import number from '@/filters/number';
|
||||
import * as os from '@/os';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
import { i18n } from '@/i18n';
|
||||
import { useRouter } from '@/router';
|
||||
import { instance } from '@/instance';
|
||||
import XUserList from '@/components/MkUserList.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
tag?: string;
|
||||
}>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
let tab = $ref('featured');
|
||||
let tagsEl = $ref<InstanceType<typeof MkFolder>>();
|
||||
let searchQuery = $ref(null);
|
||||
let searchOrigin = $ref('combined');
|
||||
|
||||
watch(() => props.tag, () => {
|
||||
if (props.tag != null) tab = 'tags';
|
||||
}, { immediate: true });
|
||||
if (tagsEl) tagsEl.toggleContent(props.tag == null);
|
||||
});
|
||||
|
||||
const searchPagination = {
|
||||
endpoint: 'users/search' as const,
|
||||
limit: 10,
|
||||
params: computed(() => (searchQuery && searchQuery !== '') ? {
|
||||
query: searchQuery,
|
||||
origin: searchOrigin,
|
||||
} : null),
|
||||
};
|
||||
|
||||
const headerActions = $computed(() => []);
|
||||
|
||||
|
|
@ -53,10 +75,6 @@ const headerTabs = $computed(() => [{
|
|||
key: 'users',
|
||||
icon: 'fas fa-users',
|
||||
title: i18n.ts.users,
|
||||
}, {
|
||||
key: 'tags',
|
||||
icon: 'fas fa-hashtag',
|
||||
title: i18n.ts.tags,
|
||||
}, {
|
||||
key: 'search',
|
||||
title: i18n.ts.search,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<MkSpacer :content-max="800">
|
||||
<XNotes class="_content" :pagination="pagination"/>
|
||||
</MkSpacer>
|
||||
</MkStickyContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import XNotes from '@/components/MkNotes.vue';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
|
||||
const props = defineProps<{
|
||||
tag: string;
|
||||
}>();
|
||||
|
||||
const pagination = {
|
||||
endpoint: 'notes/search-by-tag' as const,
|
||||
limit: 10,
|
||||
params: computed(() => ({
|
||||
tag: props.tag,
|
||||
})),
|
||||
};
|
||||
|
||||
const headerActions = $computed(() => []);
|
||||
|
||||
const headerTabs = $computed(() => []);
|
||||
|
||||
definePageMetadata(computed(() => ({
|
||||
title: props.tag,
|
||||
icon: 'fas fa-hashtag',
|
||||
})));
|
||||
</script>
|
||||
|
|
@ -203,13 +203,9 @@ export const defaultRoutes = [{
|
|||
}, {
|
||||
path: '/explore/tags/:tag',
|
||||
component: page(() => import('./pages/explore.vue')),
|
||||
name: 'explore',
|
||||
globalCacheKey: 'explore',
|
||||
}, {
|
||||
path: '/explore',
|
||||
component: page(() => import('./pages/explore.vue')),
|
||||
name: 'explore',
|
||||
globalCacheKey: 'explore',
|
||||
}, {
|
||||
path: '/search',
|
||||
component: page(() => import('./pages/search.vue')),
|
||||
|
|
@ -250,6 +246,9 @@ export const defaultRoutes = [{
|
|||
icon: 'icon',
|
||||
permission: 'permission',
|
||||
},
|
||||
}, {
|
||||
path: '/tags/:tag',
|
||||
component: page(() => import('./pages/tag.vue')),
|
||||
}, {
|
||||
path: '/pages/new',
|
||||
component: page(() => import('./pages/page-editor/page-editor.vue')),
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export async function search() {
|
|||
}
|
||||
|
||||
if (q.startsWith('#')) {
|
||||
mainRouter.value.push(`/explore/tags/${encodeURIComponent(q.substr(1))}`);
|
||||
mainRouter.value.push(`/tags/${encodeURIComponent(q.substr(1))}`);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -113,8 +113,6 @@ const routes = [
|
|||
hash: 'tlSrc',
|
||||
component: $i ? page(() => import('./chat/pages/timeline.vue')) : page(() => import('../pages/welcome.vue')),
|
||||
globalCacheKey: 'index',
|
||||
}, {
|
||||
...defaultRoutes.find((route) => route.path == '/channels/new'),
|
||||
}, {
|
||||
path: '/channels/:channelId',
|
||||
props: { tlSrc: 'channel' },
|
||||
|
|
@ -457,6 +455,7 @@ onMounted(() => {
|
|||
min-width: 0;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
background: var(--panel);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,271 @@
|
|||
<template>
|
||||
<div v-if="channel" class="hhizbblb">
|
||||
<div v-if="date" class="info">
|
||||
<MkInfo>{{ $ts.showingPastTimeline }} <button class="_textButton clear" @click="timetravel()">{{ $ts.clear }}</button></MkInfo>
|
||||
</div>
|
||||
<div ref="body" class="tl">
|
||||
<div v-if="queue > 0" class="new" :style="{ width: width + 'px', bottom: bottom + 'px' }"><button class="_buttonPrimary" @click="goTop()">{{ $ts.newNoteRecived }}</button></div>
|
||||
<XNotes ref="tl" v-follow="true" class="tl" :pagination="pagination" @queue="queueUpdated"/>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div v-if="typers.length > 0" class="typers">
|
||||
<I18n :src="$ts.typingUsers" text-tag="span" class="users">
|
||||
<template #users>
|
||||
<b v-for="user in typers" :key="user.id" class="user">{{ user.username }}</b>
|
||||
</template>
|
||||
</I18n>
|
||||
<MkEllipsis/>
|
||||
</div>
|
||||
<XPostForm :channel="channel"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, markRaw } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import XNotes from '../notes.vue';
|
||||
import * as os from '@/os';
|
||||
import { stream } from '@/stream';
|
||||
import * as sound from '@/scripts/sound';
|
||||
import { scrollToBottom, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
|
||||
import follow from '@/directives/follow-append';
|
||||
import XPostForm from '../post-form.vue';
|
||||
import MkInfo from '@/components/ui/info.vue';
|
||||
import * as symbols from '@/symbols';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XNotes,
|
||||
XPostForm,
|
||||
MkInfo,
|
||||
},
|
||||
|
||||
directives: {
|
||||
follow
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
inChannel: true
|
||||
};
|
||||
},
|
||||
|
||||
props: {
|
||||
channelId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
channel: null as Misskey.entities.Channel | null,
|
||||
connection: null,
|
||||
pagination: null,
|
||||
baseQuery: {
|
||||
includeMyRenotes: this.$store.state.showMyRenotes,
|
||||
includeRenotedMyNotes: this.$store.state.showRenotedMyNotes,
|
||||
includeLocalRenotes: this.$store.state.showLocalRenotes
|
||||
},
|
||||
queue: 0,
|
||||
width: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
typers: [],
|
||||
date: null,
|
||||
[symbols.PAGE_INFO]: computed(() => ({
|
||||
title: this.channel ? this.channel.name : '-',
|
||||
subtitle: this.channel ? this.channel.description : '-',
|
||||
icon: 'fas fa-satellite-dish',
|
||||
actions: [{
|
||||
icon: this.channel?.isFollowing ? 'fas fa-star' : 'far fa-star',
|
||||
text: this.channel?.isFollowing ? this.$ts.unfollow : this.$ts.follow,
|
||||
highlighted: this.channel?.isFollowing,
|
||||
handler: this.toggleChannelFollow
|
||||
}, {
|
||||
icon: 'fas fa-search',
|
||||
text: this.$ts.inChannelSearch,
|
||||
handler: this.inChannelSearch
|
||||
}, {
|
||||
icon: 'fas fa-calendar-alt',
|
||||
text: this.$ts.jumpToSpecifiedDate,
|
||||
handler: this.timetravel
|
||||
}]
|
||||
})),
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
channelId() {
|
||||
this.connection.dispose();
|
||||
this.$refs.tl.reload();
|
||||
this.setup();
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.setup();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.connection.dispose();
|
||||
},
|
||||
|
||||
methods: {
|
||||
async setup() {
|
||||
const prepend = note => {
|
||||
(this.$refs.tl as any).prepend(note);
|
||||
|
||||
this.$emit('note');
|
||||
|
||||
sound.play(note.userId === this.$i.id ? 'noteMy' : 'note');
|
||||
};
|
||||
|
||||
this.connection = markRaw(stream.useChannel('channel', {
|
||||
channelId: this.channelId
|
||||
}));
|
||||
this.connection.on('note', prepend);
|
||||
this.connection.on('typers', typers => {
|
||||
this.typers = this.$i ? typers.filter(u => u.id !== this.$i.id) : typers;
|
||||
});
|
||||
|
||||
this.pagination = {
|
||||
endpoint: 'channels/timeline',
|
||||
reversed: true,
|
||||
limit: 10,
|
||||
params: init => ({
|
||||
channelId: this.channelId,
|
||||
untilDate: this.date?.getTime(),
|
||||
...this.baseQuery
|
||||
})
|
||||
};
|
||||
|
||||
this.channel = await os.api('channels/show', { channelId: this.channelId });
|
||||
},
|
||||
focus() {
|
||||
this.$refs.body.focus();
|
||||
},
|
||||
|
||||
goTop() {
|
||||
const container = getScrollContainer(this.$refs.body);
|
||||
container.scrollTop = 0;
|
||||
},
|
||||
|
||||
queueUpdated(q) {
|
||||
if (this.$refs.body.offsetWidth !== 0) {
|
||||
const rect = this.$refs.body.getBoundingClientRect();
|
||||
this.width = this.$refs.body.offsetWidth;
|
||||
this.top = rect.top;
|
||||
this.bottom = this.$refs.body.offsetHeight;
|
||||
}
|
||||
this.queue = q;
|
||||
},
|
||||
|
||||
async inChannelSearch() {
|
||||
const { canceled, result: query } = await os.inputText({
|
||||
title: this.$ts.inChannelSearch,
|
||||
});
|
||||
if (canceled || query == null || query === '') return;
|
||||
router.push(`/search?q=${encodeURIComponent(query)}&channel=${this.channelId}`);
|
||||
},
|
||||
|
||||
async toggleChannelFollow() {
|
||||
if (this.channel.isFollowing) {
|
||||
await os.apiWithDialog('channels/unfollow', {
|
||||
channelId: this.channelId
|
||||
});
|
||||
this.channel.isFollowing = false;
|
||||
} else {
|
||||
await os.apiWithDialog('channels/follow', {
|
||||
channelId: this.channelId
|
||||
});
|
||||
this.channel.isFollowing = true;
|
||||
}
|
||||
},
|
||||
|
||||
openChannelMenu(ev) {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.copyUrl,
|
||||
icon: 'fas fa-link',
|
||||
action: () => {
|
||||
copyToClipboard(`${url}/channels/${this.currentChannel.id}`);
|
||||
}
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
|
||||
timetravel(date?: Date) {
|
||||
this.date = date;
|
||||
this.$refs.tl.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hhizbblb {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
|
||||
> .info {
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
|
||||
> .top {
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
|
||||
> .bottom {
|
||||
padding: 0 16px 16px 16px;
|
||||
position: relative;
|
||||
|
||||
> .typers {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
padding: 0 8px 0 8px;
|
||||
font-size: 0.9em;
|
||||
background: var(--panel);
|
||||
border-radius: 0 8px 0 0;
|
||||
color: var(--fgTransparentWeak);
|
||||
|
||||
> .users {
|
||||
> .user + .user:before {
|
||||
content: ", ";
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
> .user:last-of-type:after {
|
||||
content: " ";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .tl {
|
||||
position: relative;
|
||||
padding: 16px 0;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
|
||||
> .new {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
|
||||
> button {
|
||||
display: block;
|
||||
margin: 16px auto;
|
||||
padding: 8px 16px;
|
||||
border-radius: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</I18n>
|
||||
<MkEllipsis/>
|
||||
</div>
|
||||
<XPostForm :channel="channel" :defaultFocus="channelId != null" />
|
||||
<XPostForm :channel="channel"/>
|
||||
</div>
|
||||
<div ref="scroller" class="tl">
|
||||
<div v-if="queue > 0" class="new" :style="{ width: width + 'px', top: top + 'px' }"><button class="_buttonPrimary" @click="goTop()">{{ i18n.ts.newNoteRecived }}</button></div>
|
||||
|
|
@ -187,7 +187,6 @@ function queueUpdated(q) {
|
|||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
background: var(--panel);
|
||||
|
||||
> .info {
|
||||
padding: 16px 16px 0 16px;
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ export default defineComponent({
|
|||
required: false
|
||||
},
|
||||
channel: {
|
||||
type: Object,
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
mention: {
|
||||
|
|
@ -109,7 +109,7 @@ export default defineComponent({
|
|||
required: false,
|
||||
default: false
|
||||
},
|
||||
defaultFocus: {
|
||||
autofocus: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
|
|
@ -268,8 +268,12 @@ export default defineComponent({
|
|||
this.cw = this.reply.cw;
|
||||
}
|
||||
|
||||
if (this.defaultFocus) {
|
||||
if (this.autofocus) {
|
||||
this.focus();
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.focus();
|
||||
});
|
||||
}
|
||||
|
||||
// TODO: detach when unmount
|
||||
|
|
@ -424,7 +428,7 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
onKeydown(e: KeyboardEvent) {
|
||||
if ((e.which === 10 || e.which === 13) && (e.ctrlKey || e.metaKey) && this.canPost) this.post(true);
|
||||
if ((e.which === 10 || e.which === 13) && (e.ctrlKey || e.metaKey) && this.canPost) this.post();
|
||||
if (e.which === 27) this.$emit('esc');
|
||||
this.typing();
|
||||
},
|
||||
|
|
@ -534,7 +538,7 @@ export default defineComponent({
|
|||
localStorage.setItem('drafts', JSON.stringify(data));
|
||||
},
|
||||
|
||||
async post(keepFocus) {
|
||||
async post() {
|
||||
let data = {
|
||||
text: this.text == '' ? undefined : this.text,
|
||||
fileIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
|
||||
|
|
@ -556,8 +560,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
this.posting = true;
|
||||
try {
|
||||
await os.api('notes/create', data);
|
||||
os.api('notes/create', data).then(() => {
|
||||
this.clear();
|
||||
this.$nextTick(() => {
|
||||
this.deleteDraft();
|
||||
|
|
@ -568,17 +571,14 @@ export default defineComponent({
|
|||
localStorage.setItem('hashtags', JSON.stringify(unique(hashtags.concat(history))));
|
||||
}
|
||||
this.posting = false;
|
||||
if (keepFocus) {
|
||||
this.$nextTick(this.focus)
|
||||
}
|
||||
});
|
||||
} catch {
|
||||
}).catch(err => {
|
||||
this.posting = false;
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: err.message + '\n' + (err as any).id,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
cancel() {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="tags">
|
||||
<div v-for="stat in stats" :key="stat.tag">
|
||||
<div class="tag">
|
||||
<MkA class="a" :to="`/explore/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>
|
||||
<MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>
|
||||
<p>{{ $t('nUsersMentioned', { n: stat.usersCount }) }}</p>
|
||||
</div>
|
||||
<MkMiniChart class="chart" :src="stat.chart"/>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue