barkey/src/client/app/desktop/views/components/timeline.vue

<template>
<div class="mk-timeline">
	<header>
		<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% %i18n:@home%</span>
		<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline">%fa:R comments% %i18n:@local%</span>
		<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</span>
		<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span>
		<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl">%fa:hashtag% {{ tagTl.title }}</span>
		<span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
		<div class="buttons">
			<button :data-active="src == 'mentions'" @click="src = 'mentions'" title="%i18n:@mentions%">%fa:at%<i class="badge" v-if="$store.state.i.hasUnreadMentions">%fa:circle%</i></button>
			<button :data-active="src == 'messages'" @click="src = 'messages'" title="%i18n:@messages%">%fa:envelope R%<i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i></button>
			<button @click="chooseTag" title="%i18n:@hashtag%" ref="tagButton">%fa:hashtag%</button>
			<button @click="chooseList" title="%i18n:@list%" ref="listButton">%fa:list%</button>
		</div>
	</header>
	<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
	<x-core v-if="src == 'local'" ref="tl" key="local" src="local"/>
	<x-core v-if="src == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/>
	<x-core v-if="src == 'global'" ref="tl" key="global" src="global"/>
	<x-core v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/>
	<x-core v-if="src == 'messages'" ref="tl" key="messages" src="messages"/>
	<x-core v-if="src == 'tag'" ref="tl" key="tag" src="tag" :tag-tl="tagTl"/>
	<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import XCore from './timeline.core.vue';
import Menu from '../../../common/views/components/menu.vue';
import MkSettingsWindow from './settings-window.vue';

export default Vue.extend({
	components: {
		XCore
	},

	data() {
		return {
			src: 'home',
			list: null,
			tagTl: null,
			enableLocalTimeline: false
		};
	},

	watch: {
		src() {
			this.saveSrc();
		},

		list(x) {
			this.saveSrc();
			if (x != null) this.tagTl = null;
		},

		tagTl(x) {
			this.saveSrc();
			if (x != null) this.list = null;
		}
	},

	created() {
		(this as any).os.getMeta().then(meta => {
			this.enableLocalTimeline = !meta.disableLocalTimeline;
		});

		if (this.$store.state.device.tl) {
			this.src = this.$store.state.device.tl.src;
			if (this.src == 'list') {
				this.list = this.$store.state.device.tl.arg;
			} else if (this.src == 'tag') {
				this.tagTl = this.$store.state.device.tl.arg;
			}
		} else if (this.$store.state.i.followingCount == 0) {
			this.src = 'hybrid';
		}
	},

	mounted() {
		(this.$refs.tl as any).$once('loaded', () => {
			this.$emit('loaded');
		});
	},

	methods: {
		saveSrc() {
			this.$store.commit('device/setTl', {
				src: this.src,
				arg: this.src == 'list' ? this.list : this.tagTl
			});
		},

		focus() {
			(this.$refs.tl as any).focus();
		},

		warp(date) {
			(this.$refs.tl as any).warp(date);
		},

		async chooseList() {
			const lists = await (this as any).api('users/lists/list');

			let menu = [{
				icon: '%fa:plus%',
				text: '%i18n:@add-list%',
				action: () => {
					(this as any).apis.input({
						title: '%i18n:@list-name%',
					}).then(async title => {
						const list = await (this as any).api('users/lists/create', {
							title
						});

						this.list = list;
						this.src = 'list';
					});
				}
			}];

			if (lists.length > 0) {
				menu.push(null);
			}

			menu = menu.concat(lists.map(list => ({
				icon: '%fa:list%',
				text: list.title,
				action: () => {
					this.list = list;
					this.src = 'list';
				}
			})));

			this.os.new(Menu, {
				source: this.$refs.listButton,
				compact: false,
				items: menu
			});
		},

		chooseTag() {
			let menu = [{
				icon: '%fa:plus%',
				text: '%i18n:@add-tag-timeline%',
				action: () => {
					(this as any).os.new(MkSettingsWindow, {
						initialPage: 'hashtags'
					});
				}
			}];

			if (this.$store.state.settings.tagTimelines.length > 0) {
				menu.push(null);
			}

			menu = menu.concat(this.$store.state.settings.tagTimelines.map(t => ({
				icon: '%fa:hashtag%',
				text: t.title,
				action: () => {
					this.tagTl = t;
					this.src = 'tag';
				}
			})));

			this.os.new(Menu, {
				source: this.$refs.tagButton,
				compact: false,
				items: menu
			});
		}
	}
});
</script>

<style lang="stylus" scoped>


root(isDark)
	background isDark ? #282C37 : #fff
	box-shadow var(--shadow)
	border-radius var(--round)
	overflow hidden

	> header
		padding 0 8px
		z-index 10
		background isDark ? #313543 : #fff
		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)

		> .buttons
			position absolute
			z-index 2
			top 0
			right 0
			padding-right 8px

			> button
				padding 0 8px
				font-size 0.9em
				line-height 42px
				color isDark ? #9baec8 : #ccc

				> .badge
					position absolute
					top -4px
					right 4px
					font-size 10px
					color var(--primary)

				&:hover
					color isDark ? #b2c1d5 : #aaa

				&:active
					color isDark ? #b2c1d5 : #999

				&[data-active]
					color var(--primary)
					cursor default

					&:before
						content ""
						display block
						position absolute
						bottom 0
						left 0
						width 100%
						height 2px
						background var(--primary)

		> span
			display inline-block
			padding 0 10px
			line-height 42px
			font-size 12px
			user-select none

			&[data-active]
				color var(--primary)
				cursor default
				font-weight bold

				&:before
					content ""
					display block
					position absolute
					bottom 0
					left -8px
					width calc(100% + 16px)
					height 2px
					background var(--primary)

			&:not([data-active])
				color isDark ? #9aa2a7 : #6f7477
				cursor pointer

				&:hover
					color isDark ? #d9dcde : #525a5f

.mk-timeline[data-darkmode]
	root(true)

.mk-timeline:not([data-darkmode])
	root(false)

</style>