Clean up

package-lock.json

@@ -4680,14 +4680,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4702,20 +4700,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4832,8 +4827,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4845,7 +4839,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4860,7 +4853,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4868,14 +4860,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4894,7 +4884,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4975,8 +4964,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4988,7 +4976,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5110,7 +5097,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -12258,6 +12244,16 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz",
+      "integrity": "sha512-mdHeHT/7u4BncpUZMlxNaIdcN/HIt1GsGG5LKByArvYG/v6DvHcOxvDCts+7SRdCoIRGllK8IMZvQtQXLppDYg=="
+    },
+    "vuex-module-decorators": {
+      "version": "0.9.8",
+      "resolved": "https://registry.npmjs.org/vuex-module-decorators/-/vuex-module-decorators-0.9.8.tgz",
+      "integrity": "sha512-yyh9+0mO7NYZxw5BlXWNA/lHioVOUL0muDpJPL9ssAvje2PHQfFSOCSridK4vA3HasjyaGRtTPJKH7+7UCcpwg=="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

package.json

@@ -13,7 +13,9 @@
     "vue": "^2.6.10",
     "vue-chartjs": "^3.4.2",
     "vue-class-component": "^6.0.0",
-    "vue-property-decorator": "^7.0.0"
+    "vue-property-decorator": "^7.0.0",
+    "vuex": "^3.1.0",
+    "vuex-module-decorators": "^0.9.8"
   },
   "devDependencies": {
     "@vue/cli-plugin-typescript": "^3.0.3",

src/App.vue

@@ -32,10 +32,10 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { Selectable } from './helpers/lists/Selectable'
 import LocalStorageHandler from './helpers/storage/LocalStorageHandler'
-import DiscordVue from './services/discord/Discord.vue'
-import MastodonVue from './services/mastodon/Mastodon.vue'
-import NextcloudNewsVue from './services/nextcloud/NextcloudNews.vue'
-import OpenWeatherMapVue from './services/openweathermap/OpenWeatherMap.vue'
+import Discord from './services/discord/Discord.vue'
+import Mastodon from './services/mastodon/Mastodon.vue'
+import NextcloudNews from './services/nextcloud/NextcloudNews.vue'
+import OpenWeatherMap from './services/openweathermap/OpenWeatherMap.vue'
 import { Auth, Layout, Rect, Service, serviceKey, tileKey } from './types/App'
 import * as Events from './types/Events'
 
@@ -50,14 +50,7 @@ function saveAuth(auth: Auth) {
   return res
 }
 
-@Component({
-  components: {
-    mastodon: MastodonVue,
-    'nextcloud-news': NextcloudNewsVue,
-    openweathermap: OpenWeatherMapVue,
-    discord: DiscordVue
-  }
-})
+@Component({ components: { Mastodon, NextcloudNews, openweathermap: OpenWeatherMap, Discord } })
 export default class App extends Vue {
   showManager = false
 

src/common.css

@@ -0,0 +1 @@
+/* No CSS *//*# sourceMappingURL=common.css.map */

src/common.css.map

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "",
+    "sources": [
+        "common.sass"
+    ],
+    "names": [],
+    "file": "common.css"
+}

src/components/FromNowMixin.ts

@@ -0,0 +1,37 @@
+import { Component, Vue } from 'vue-property-decorator'
+import { TimeModule } from '../store'
+
+const times = new Map<string, number>([
+  ['second', 1000],
+  ['minute', 60],
+  ['hour', 60],
+  ['day', 24],
+  ['month', 30.5],
+  ['year', 12],
+  ['century', 100]
+])
+
+@Component
+export default class FromNowMixin extends Vue {
+
+  protected static toNumber(date: Date | number | string) {
+    return Number(new Date(date))
+  }
+
+  fromNow(date: Date | number | string) {
+    const milliseconds = Math.floor(FromNowMixin.toNumber(TimeModule.now) - FromNowMixin.toNumber(date))
+
+    let cur = 0
+    let divider = 1
+    let name = 'millisecond'
+    for (const time of times) {
+      divider *= time[1]
+      const next = Math.floor(milliseconds / divider)
+      if(next <= 0) {
+        return `${cur} ${name}${cur > 1 ? 's' : ''}`
+      }
+      name = time[0]
+      cur = next
+    }
+  }
+}

src/components/ServiceEmiter.ts

@@ -1,10 +1,14 @@
 import { AxiosPromise } from 'axios'
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
+import LoadableBlock from './loadable/LoadableBlock.vue'
+import LoadableInline from './loadable/LoadableInline.vue'
+import SuccessLoadable from './loadable/SuccessLoadableBlock.vue'
+
 import { ServiceData } from '@/types/App'
 import * as Events from '@/types/Events'
 
-@Component({})
+@Component({ components: { LoadableBlock, LoadableInline, SuccessLoadable } })
 export default class ServiceEmiter extends Vue {
   @Prop(Function)
   readonly emit!: (name: string, msg: any) => void

src/components/input/SettingBoolean.vue

@@ -8,10 +8,10 @@ block input
 <script lang="ts">
 import { Component, Prop } from 'vue-property-decorator'
 
-import BaseSettingVue from './BaseSetting'
+import BaseSetting from './BaseSetting'
 
 @Component
-export default class SettingBoolean extends BaseSettingVue {
+export default class SettingBoolean extends BaseSetting {
 
   @Prop(Boolean)
   readonly value!: boolean

src/components/input/SettingInt.vue

@@ -8,10 +8,10 @@ block input
 <script lang="ts">
 import { Component, Prop } from 'vue-property-decorator'
 
-import BaseSettingVue from './BaseSetting'
+import BaseSetting from './BaseSetting'
 
 @Component
-export default class SettingInt extends BaseSettingVue {
+export default class SettingInt extends BaseSetting {
 
   @Prop({
     type: Number,

src/components/input/SettingString.vue

@@ -8,10 +8,10 @@ block input
 <script lang="ts">
 import { Component, Prop } from 'vue-property-decorator'
 
-import BaseSettingVue from './BaseSetting'
+import BaseSetting from './BaseSetting'
 
 @Component
-export default class SettingString extends BaseSettingVue {
+export default class SettingString extends BaseSetting {
 
   @Prop(String)
   readonly value!: string

src/components/loadable/SuccessLoadableBlock.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+div.loadable-block
+  slot(v-if="loadable.isSuccess") {{ get }}
+  template(v-else-if="loadable.error") {{ loadable.error }}
+  template(v-else)
+    .service-loader
+</template>
+
+<script lang="ts">
+import { Component } from 'vue-property-decorator'
+
+import Loadable from './Loadable'
+
+@Component
+export default class SuccessLoadableBlock<T, E> extends Loadable<T, E> { }
+</script>

src/components/service/BaseService.ts

@@ -1,18 +1,13 @@
 import { Component, Prop, Watch } from 'vue-property-decorator'
 
 import { Auth } from '@/types/App'
-import SettingBooleanVue from '../input/SettingBoolean.vue'
-import SettingIntVue from '../input/SettingInt.vue'
-import SettingStringVue from '../input/SettingString.vue'
+import SettingBoolean from '../input/SettingBoolean.vue'
+import SettingInt from '../input/SettingInt.vue'
+import SettingString from '../input/SettingString.vue'
 import ServiceEmiter from '../ServiceEmiter'
+import ServiceHeader from '../ServiceHeader.vue'
 
-@Component({
-  components: {
-    'setting-string': SettingStringVue,
-    'setting-int': SettingIntVue,
-    'setting-boolean': SettingBooleanVue
-  }
-})
+@Component({ components: { ServiceHeader, SettingString, SettingInt, SettingBoolean } })
 export default class BaseService extends ServiceEmiter {
 
   @Prop({

src/components/service/ConnectedService.ts

@@ -3,16 +3,9 @@ import { Component } from 'vue-property-decorator'
 
 import ErrorLoadable from '@/helpers/loadable/ErrorLoadable'
 import { Auth } from '@/types/App'
-import LoadableBlockVue from '../loadable/LoadableBlock.vue'
-import LoadableInlineVue from '../loadable/LoadableInline.vue'
 import BaseService from './BaseService'
 
-@Component({
-  components: {
-    'loadable-inline': LoadableInlineVue,
-    'loadable-block': LoadableBlockVue
-  }
-})
+@Component
 export default class ConnectedService<T, E> extends BaseService {
 
   get isSetup(): boolean {

src/components/time/FromNow.vue

@@ -1,46 +0,0 @@
-<template lang="pug">
-span {{ timeSince }}
-</template>
-
-<script lang="ts">
-import { Component, Mixins, Prop } from 'vue-property-decorator'
-import TimedMixin from './TimedMixin'
-
-@Component
-export default class FromNow extends Mixins(TimedMixin) {
-
-  protected static toNumber(date: Date | number | string) {
-    return Number(new Date(date))
-  }
-
-  @Prop([Date, Number, String])
-  readonly date!: Date | number | string
-
-  get timeSince() {
-    const seconds = Math.floor((FromNow.toNumber(this.now) - FromNow.toNumber(this.date)) / 1000)
-
-    let interval = Math.floor(seconds / 31536000)
-
-    if (interval > 1) {
-      return interval + ' years'
-    }
-    interval = Math.floor(seconds / 2592000)
-    if (interval > 1) {
-      return interval + ' months'
-    }
-    interval = Math.floor(seconds / 86400)
-    if (interval > 1) {
-      return interval + ' days'
-    }
-    interval = Math.floor(seconds / 3600)
-    if (interval > 1) {
-      return interval + ' hours'
-    }
-    interval = Math.floor(seconds / 60)
-    if (interval > 1) {
-      return interval + ' minutes'
-    }
-    return Math.floor(seconds) + ' seconds'
-  }
-}
-</script>

src/components/time/TimedMixin.ts

@@ -1,9 +0,0 @@
-import { Component, Prop, Vue } from 'vue-property-decorator'
-
-@Component
-export default class TimedMixin extends Vue {
-
-  @Prop([Number, Date])
-  readonly now!: number | Date
-
-}

src/components/time/TimerMixin.ts

@@ -1,15 +0,0 @@
-import { Component, Vue } from 'vue-property-decorator'
-
-@Component
-export default class TimerMixin extends Vue {
-
-  now = Date.now()
-
-  created() {
-    const self = this
-    setInterval(() => {
-      self.now = Date.now()
-    }, 30 * 1000)
-  }
-
-}

src/main.ts

@@ -1,8 +1,10 @@
-import Vue from 'vue';
-import App from './App.vue';
+import Vue from 'vue'
+import App from './App.vue'
+import store from './store'
 
-Vue.config.productionTip = false;
+Vue.config.productionTip = false
 
 new Vue({
+  store,
   render: h => h(App)
 }).$mount('#app');

src/services/discord/Channel.vue

@@ -11,7 +11,7 @@ import { MappedChannel } from './Types'
 const MAX_LENGTH = 20
 
 @Component
-export default class ChannelTag extends ShowMediaMixin {
+export default class Channel extends ShowMediaMixin {
 
   @Prop(Object)
   readonly channel!: MappedChannel

src/services/discord/Client.vue

@@ -1,52 +1,39 @@
 <template lang="pug">
 .client(@scroll.passive="onScroll")
-  loadable-block.guilds(:loadable="guilds")
-    template(#success)
-      guild(v-for="(guild, key) in guilds.get().data" :key="guild.id" :guild="guild" :showMedia="options.showMedia"
-        @click.native="selectGuild(key)" :class="{ selected: guilds.get().isSelected(key) }")
-  loadable-block.channels(:loadable="channels")
-    template(#success)
-      channel(v-for="(channel, key) in mapChannels" :key="channel.id" :channel="channel" :showMedia="options.showMedia"
-        @click.native="selectChannel(key)" :class="{ selected: channels.get().isSelected(key) }")
-  loadable-block.messages(:loadable="messages")
-    template(#success)
-      message(v-for="(message, key) in messages.get()" :key="message.id"
-        :message="message" :showMedia="options.showMedia" :now="now")
-
+  success-loadable.guilds(:loadable="guilds")
+    guild(v-for="(guild, key) in guilds.map(g => g.data, [])" :key="guild.id" :guild="guild" :showMedia="options.showMedia"
+      @click.native="selectGuild(key)" :class="{ selected: guilds.get().isSelected(key) }")
+  success-loadable.channels(:loadable="channels")
+    channel(v-for="(channel, key) in mapChannels" :key="channel.id" :channel="channel" :showMedia="options.showMedia"
+      @click.native="selectChannel(key)" :class="{ selected: channels.get().isSelected(key) }")
+  success-loadable.messages(:loadable="messages")
+    message(v-for="(message, key) in messages.get()" :key="message.id"
+      :message="message" :showMedia="options.showMedia")
 </template>
 
 <script lang="ts">
 import axios, { AxiosResponse } from 'axios'
 import { Component, Mixins } from 'vue-property-decorator'
 
-import LoadableBlockVue from '@/components/loadable/LoadableBlock.vue'
 import ServiceClient from '@/components/ServiceClient'
-import TimerMixin from '@/components/time/TimerMixin'
 import Lists from '@/helpers/lists/Lists'
 import { Selectable } from '@/helpers/lists/Selectable'
 import AxiosLoadable from '@/helpers/loadable/AxiosLoadable'
 import AxiosLoadableMore from '@/helpers/loadable/AxiosLoadableMore'
-import ChannelTagVue from './ChannelTag.vue'
+import Channel from './Channel.vue'
 import { AUTH, getRest } from './Discord.vue'
-import GuildTagVue from './GuildTag.vue'
-import MessageTagVue from './MessageTag.vue'
-import { Channel, getChannelOrder, MappedChannel, Message, Options, PartialGuild, TextChannelTypes } from './Types'
+import Guild from './Guild.vue'
+import Message from './Message.vue'
+import { Channel as IChannel, getChannelOrder, MappedChannel, Message as IMessage, Options, PartialGuild, TextChannelTypes } from './Types'
 
-@Component({
-  components: {
-    channel: ChannelTagVue,
-    guild: GuildTagVue,
-    message: MessageTagVue,
-    loadableBlock: LoadableBlockVue
-  }
-})
-export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient, TimerMixin) {
+@Component({ components: { Channel, Guild, Message } })
+export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient) {
 
   rest = getRest(this.auth, this.options.timeout)
 
   guilds = new AxiosLoadable<Selectable<PartialGuild>, object>()
-  channels = new AxiosLoadable<Selectable<Channel>, object>()
-  messages = new AxiosLoadableMore<Message[], object>()
+  channels = new AxiosLoadable<Selectable<IChannel>, object>()
+  messages = new AxiosLoadableMore<IMessage[], object>()
 
   get mapChannels() {
     return this.channels.map(cs => cs.data

src/services/discord/Discord.vue

@@ -22,10 +22,9 @@
 import axios, { AxiosResponse } from 'axios'
 import { Component, Mixins } from 'vue-property-decorator'
 
-import AccountService from '@/components/service/AccountService';
-import ServiceHeaderVue from '@/components/ServiceHeader.vue'
+import AccountService from '@/components/service/AccountService'
 import { Auth } from '@/types/App'
-import ClientVue from './Client.vue'
+import Client from './Client.vue'
 import { Options, User } from './Types'
 
 export const AUTH = { TOKEN: 'token' }
@@ -37,12 +36,7 @@ export function getRest(auth: Auth, timeout: number) {
   })
 }
 
-@Component({
-  components: {
-    client: ClientVue,
-    'service-header': ServiceHeaderVue
-  }
-})
+@Component({ components: { Client } })
 export default class Discord extends Mixins<AccountService<string, object, User>>(AccountService) { // TODO: Use oauth
 
   get params(): Options {

src/services/discord/Guild.vue

@@ -14,7 +14,7 @@ import { PartialGuild } from './Types'
 const MAX_LENGTH = 20
 
 @Component
-export default class GuildTag extends ShowMediaMixin {
+export default class Guild extends ShowMediaMixin {
 
   @Prop(Object)
   readonly guild!: PartialGuild

src/services/discord/Message.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 .message
   span.account {{ message.author.username }}
-  from-now.date.osef(:date="message.timestamp" :now="now")
+  span.date.osef {{ fromNow(message.timestamp) }}
   .content(v-html="content")
   a.embed(v-if="message.embeds" v-for="embed in message.embeds" :href="embed.url") {{ embed.title }}
   .react(v-if="message.reactions" v-for="react in message.reactions" :class="{ colored: react.me }")
@@ -12,22 +12,17 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 
+import FromNowMixin from '@/components/FromNowMixin'
 import ShowMediaMixin from '@/components/ShowMediaMixin'
-import fromNow from '@/components/time/FromNow.vue'
-import TimedMixin from '@/components/time/TimedMixin'
-import { Message } from './Types'
+import { Message as IMessage } from './Types'
 
 const MAX_LENGTH = 20
 
-@Component({
-  components:{
-    fromNow
-  }
-})
-export default class MessageTag extends Mixins(ShowMediaMixin, TimedMixin) {
+@Component
+export default class Message extends Mixins(ShowMediaMixin, FromNowMixin) {
 
   @Prop(Object)
-  readonly message!: Message
+  readonly message!: IMessage
 
   get content() {
     let text = this.message.content.split('\n').join('<br />')

src/services/mastodon/Client.vue

@@ -2,18 +2,17 @@
 .client(@scroll.passive="onScroll")
   .statues
     .header(v-if="hasNotifications") Accueil
-    loadable-block.list(:loadable="statues")
-      template(#success)
-        template(v-for="status in statues.get()")
-          status(v-if="showStatus(status)" :key="status.id" :status="status" :now="now" :showMedia="options.showMedia" @mark="onStatusMark")
-        .status(v-show="statues.loadingMore")
-          .service-loader
+    success-loadable.list(:loadable="statues")
+      template(v-for="status in statues.get()")
+        status(v-if="showStatus(status)" :key="status.id" :status="status" :showMedia="options.showMedia" @mark="onStatusMark")
+      .status(v-show="statues.loadingMore")
+        .service-loader
   .notifications(v-if="hasNotifications")
     .header
       | Notifications
       span.date(@click.stop.prevent="onNotificationsClear") ❌
     .list
-      notification(v-for="notification in notifications.get()" :key="notification.id" :notification="notification" :now="now"
+      notification(v-for="notification in notifications.get()" :key="notification.id" :notification="notification"
         :showMedia="options.showMedia" @dismiss="onNotificationDismiss" @mark="onStatusMark")
 </template>
 
@@ -21,30 +20,22 @@
 import axios, { AxiosResponse } from 'axios'
 import { Component, Mixins } from 'vue-property-decorator'
 
-import LoadableBlockVue from '@/components/loadable/LoadableBlock.vue'
 import ServiceClient from '@/components/ServiceClient'
-import TimerMixin from '@/components/time/TimerMixin'
 import Lists from '@/helpers/lists/Lists'
 import AxiosLodable from '@/helpers/loadable/AxiosLoadable'
 import AxiosLodableMore from '@/helpers/loadable/AxiosLoadableMore'
 import { AUTH, getRest } from './Mastodon.vue'
-import NotificationVue from './Notification.vue'
-import StatusVue from './Status.vue'
-import { MarkMessage, Notification, Options, Status } from './Types'
+import Notification from './Notification.vue'
+import Status from './Status.vue'
+import { MarkMessage, Notification as INotification, Options, Status as IStatus } from './Types'
 
-@Component({
-  components: {
-    status: StatusVue,
-    notification: NotificationVue,
-    loadableBlock: LoadableBlockVue
-  }
-})
-export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient, TimerMixin) {
+@Component({ components: { Status, Notification } })
+export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient) {
 
   rest = getRest(this.auth, this.options.timeout)
 
-  statues = new AxiosLodableMore<Status[], object>()
-  notifications = new AxiosLodable<Notification[], object>()
+  statues = new AxiosLodableMore<IStatus[], object>()
+  notifications = new AxiosLodable<INotification[], object>()
 
   get hasNotifications() {
     if(!this.notifications.isSuccess) {
@@ -85,7 +76,7 @@ export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient
     )
   }
 
-  showStatus(status: Status) {
+  showStatus(status: IStatus) {
     return (!status.in_reply_to_id || this.options.reply) && (!status.reblog || this.options.reblog)
   }
 

src/services/mastodon/Mastodon.vue

@@ -32,9 +32,8 @@ import axios, { AxiosResponse } from 'axios'
 import { Component, Mixins } from 'vue-property-decorator'
 
 import AccountService from '@/components/service/AccountService'
-import ServiceHeaderVue from '@/components/ServiceHeader.vue'
 import { Auth } from '@/types/App'
-import ClientVue from './Client.vue'
+import Client from './Client.vue'
 import { ParseEmojisMixin } from './ParseEmojisMixin'
 import { Account, Options } from './Types'
 
@@ -46,12 +45,7 @@ export function getRest(auth: Auth, timeout: number) {
   })
 }
 
-@Component({
-  components: {
-    client: ClientVue,
-    'service-header': ServiceHeaderVue
-  }
-})
+@Component({ components: { Client } })
 export default class Mastodon extends Mixins<AccountService<Account, object>>(AccountService, ParseEmojisMixin) { // TODO: Use oauth
 
   get server() {

src/services/mastodon/Notification.vue

@@ -6,11 +6,11 @@
   span.colored.text-icon.letter(v-if="notification.type == 'reblog'") ⟳
   span.colored.text-icon.letter(v-if="notification.type == 'favourite'") ⚝
 
-  from-now.date(:date="notification.created_at" :now="now")
+  span.date {{ fromNow(notification.created_at) }}
 
   .content
     template(v-if="notification.type == 'follow'") Vous suit
-    status.reblog(v-else-if="notification.status" :status="notification.status" :now="now"
+    status.reblog(v-else-if="notification.status" :status="notification.status"
       :showMedia="showMedia" :withAccount="notification.type != 'mention'" @mark="passMark")
 
   a.date(@click.stop.prevent="makeDismiss" style="margin-top: -1em") ❌
@@ -19,21 +19,14 @@
 <script lang="ts">
 import { Component, Emit, Mixins, Prop } from 'vue-property-decorator'
 
+import FromNowMixin from '@/components/FromNowMixin'
 import ShowMediaMixin from '@/components/ShowMediaMixin'
-import FromNowVue from '@/components/time/FromNow.vue'
-import TimedMixin from '@/components/time/TimedMixin'
-import AccountVue from './Account.vue'
-import StatusVue from './Status.vue'
+import Account from './Account.vue'
+import Status from './Status.vue'
 import { MarkMessage, Notification as INotification } from './Types'
 
-@Component({
-  components: {
-    fromNow: FromNowVue,
-    account: AccountVue,
-    status: StatusVue
-  }
-})
-export default class Notification extends Mixins(TimedMixin, ShowMediaMixin) {
+@Component({ components: { Account, Status } })
+export default class Notification extends Mixins(ShowMediaMixin, FromNowMixin) {
 
   @Prop(Object)
   readonly notification!: INotification

src/services/mastodon/Status.vue

@@ -4,8 +4,7 @@
 
   span.text-icon.letter(v-if="status.reblog") ⟳
 
-  a.date(target="_blank" :href="status.uri")
-    from-now(:date="status.created_at" :now="now")
+  a.date(target="_blank" :href="status.uri") {{ fromNow(status.created_at) }}
 
   .content(:class="{ avatared: showMedia }")
     template(v-if="!status.reblog")
@@ -19,7 +18,7 @@
             template(v-else) Wrong type
             .gif(v-if="media.type == 'gifv'") GIF
           template(v-else) Hidden media
-    status.reblog(v-else :status="status.reblog" :now="now" :showMedia="showMedia")
+    status.reblog(v-else :status="status.reblog" :showMedia="showMedia")
 
   .meta(v-if="!status.reblog")
     a.replies(@click.stop.prevent="makeReply(status)")
@@ -38,20 +37,14 @@
 <script lang="ts">
 import { Component, Emit, Mixins, Prop } from 'vue-property-decorator'
 
+import FromNowMixin from '@/components/FromNowMixin'
 import ShowMediaMixin from '@/components/ShowMediaMixin'
-import FromNowVue from '@/components/time/FromNow.vue'
-import TimedMixin from '@/components/time/TimedMixin'
-import AccountVue from './Account.vue'
+import Account from './Account.vue'
 import { ParseEmojisMixin } from './ParseEmojisMixin'
 import { MarkMessage, Status as IStatus } from './Types'
 
-@Component({
-  components: {
-    account: AccountVue,
-    fromNow: FromNowVue
-  }
-})
-export default class Status extends Mixins(TimedMixin, ParseEmojisMixin, ShowMediaMixin) {
+@Component({ components: { Account } })
+export default class Status extends Mixins(ParseEmojisMixin, ShowMediaMixin, FromNowMixin) {
 
   @Prop(Object)
   readonly status!: IStatus

src/services/nextcloud/NextcloudNews.vue

@@ -12,7 +12,7 @@
     template(#success)
       .news(v-for="line in news.get()")
         a(:href="line.url" target="_blank")
-          from-now.date(:date="line.pubDate * 1000" :now="now")
+          span.date {{ fromNow(line.pubDate * 1000) }}
         span.read(@click.stop="makeRead(line.id)") 👁
         span.title(@click.stop="line.open = !line.open") {{ line.author }} ─ {{ line.title }}
         .content(v-if="line.open && line.body") {{ line.body }}
@@ -35,10 +35,8 @@
 import axios, { AxiosInstance, AxiosResponse } from 'axios'
 import { Component, Mixins } from 'vue-property-decorator'
 
+import FromNowMixin from '@/components/FromNowMixin'
 import ConnectedService from '@/components/service/ConnectedService'
-import ServiceHeaderVue from '@/components/ServiceHeader.vue'
-import FromNowVue from '@/components/time/FromNow.vue'
-import TimerMixin from '@/components/time/TimerMixin'
 import Lists from '@/helpers/lists/Lists'
 import AxiosLoadable from '@/helpers/loadable/AxiosLoadable'
 import { Auth } from '@/types/App'
@@ -55,13 +53,8 @@ interface News {
 
 const AUTH = { SERVER: 'server', USERNAME: 'username', TOKEN: 'token' }
 
-@Component({
-  components: {
-    'service-header': ServiceHeaderVue,
-    fromNow: FromNowVue
-  }
-})
-export default class NextcloudNews extends Mixins<ConnectedService<object, object>>(ConnectedService, TimerMixin) { // TODO: handle unread
+@Component
+export default class NextcloudNews extends Mixins<ConnectedService<object, object>>(ConnectedService, FromNowMixin) { // TODO: handle unread
 
   rest!: AxiosInstance // NOTE: set in this.init()
   news = new AxiosLoadable<News[], object>()

src/services/openweathermap/OpenWeatherMap.vue

@@ -13,9 +13,8 @@
         weather(v-for="(city, id) in weathers.get().data" :key="id" :class="{ selected: weathers.get().isSelected(id) }"
           :city="city" @select="makeSelect(id)" @remove="removeCity(id)")
         input.weather(v-show="showAdd" placeholder="city id" @keyup.enter="addCity(parseInt($event.target.value))")
-      loadable-block.forecast(:loadable="forecast")
-        template(#success)
-          chart.chart(:chartData="forecastChart")
+      success-loadable.forecast(:loadable="forecast")
+        chart.chart(:chartData="forecastChart")
     template(#error)
       form(@submit.prevent="makeAuth")
         p
@@ -30,13 +29,12 @@ import axios, { AxiosInstance, AxiosResponse } from 'axios'
 import { Component } from 'vue-property-decorator'
 
 import ConnectedService from '@/components/service/ConnectedService'
-import ServiceHeaderVue from '@/components/ServiceHeader.vue'
 import Lists from '@/helpers/lists/Lists'
 import { Selectable } from '@/helpers/lists/Selectable'
 import AxiosLoadable from '@/helpers/loadable/AxiosLoadable'
 import { Auth } from '@/types/App'
 import Chart from './Chart'
-import WeatherVue, { IWeather } from './Weather.vue'
+import Weather, { IWeather } from './Weather.vue'
 
 interface Forecast {
   dt: number
@@ -50,13 +48,7 @@ interface Forecast {
 
 const AUTH = { TOKEN: 'token' }
 
-@Component({
-  components: {
-    'service-header': ServiceHeaderVue,
-    weather: WeatherVue,
-    chart: Chart
-  }
-})
+@Component({ components: { Weather, Chart } })
 export default class OpenWeatherMap extends ConnectedService<object, object> {
 
   rest!: AxiosInstance // NOTE: set in this.init()

src/store/Time.ts

@@ -0,0 +1,23 @@
+import { Action, Module, Mutation, VuexModule } from 'vuex-module-decorators'
+
+export interface TimeState {
+  now: Date
+}
+
+@Module({ name: 'time', namespaced: true })
+export default class Time extends VuexModule implements TimeState {
+  now = new Date
+
+  @Mutation
+  updateTime() {
+    this.now = new Date
+  }
+
+  @Action
+  start() {
+    setInterval(() => {
+      this.updateTime()
+    }, 15 * 1000)
+  }
+
+}

src/store/index.ts

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { getModule } from 'vuex-module-decorators'
+import Time from './Time'
+
+Vue.use(Vuex)
+
+export interface State {
+  time: Time
+}
+
+const store = new Vuex.Store<State>({
+  strict: process.env.NODE_ENV !== 'production',
+  modules: {
+    time: Time
+  }
+})
+
+export const TimeModule = getModule(Time, store)
+TimeModule.start()
+
+export default store

vue.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  /* ... other settings */
+  transpileDependencies: ["vuex-module-decorators"]
+}