date formatting and some fixes for filters

frontend/src/components/FeedItem.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { useFeedStore } from '@/stores/feed.ts'
-import { computed, onMounted, useTemplateRef } from 'vue'
+import { computed, inject, onMounted, useTemplateRef } from 'vue'
 import { useSubscriptionsStore } from '@/stores/subscriptions.ts'
 import { useRoute } from 'vue-router'
 import IconPaid from '@/components/icons/IconPaid.vue'
+import { Injection } from '@/utils/constants.ts'
 
 const emit = defineEmits(['appear'])
+const intlService = inject(Injection.Intl)
 
 const route = useRoute()
 const { id } = defineProps({ id: Number })
@@ -89,7 +91,7 @@ function stripTags(htmlString: string) {
         <small>{{ feed.title }}</small>
       </RouterLink>
       <small class="paragraph">
-        {{ feedItem.pub_date }}
+        {{ intlService.formatDate(new Date(feedItem.pub_date)) }}
       </small>
     </div>
     <RouterLink :to="getDetailLinkParams()" class="feed-links-list-item-link">

frontend/src/main.ts

@@ -6,11 +6,13 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import { DialogsService } from '@/services/dialogs.ts'
+import { IntlService } from '@/services/intl'
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(DialogsService.initPlugin())
+app.use(IntlService.initPlugin())
 app.use(router)
 
 app.mount('#app')

frontend/src/services/intl.ts

@@ -0,0 +1,25 @@
+import type { App as AppType, Plugin } from 'vue'
+import { Injection } from '@/utils/constants.ts'
+
+export class IntlService {
+  private readonly _datetime: Intl.DateTimeFormat
+  constructor() {
+    this._datetime = new Intl.DateTimeFormat(['en-GB'], {
+      month: 'short',
+      year: 'numeric',
+      day: 'numeric',
+    })
+  }
+
+  formatDate(date: Date): string {
+    return this._datetime.format(date)
+  }
+
+  static initPlugin(): Plugin {
+    return {
+      install: (app: AppType) => {
+        app.provide(Injection.Intl, new IntlService())
+      }
+    }
+  }
+}

frontend/src/stores/feed.ts

@@ -67,7 +67,10 @@ export const useFeedStore = defineStore('feed', {
       this.items = items
     },
     setFilters(category: string, filters: Record<string, Filter>) {
-      this.filters[category] = filters
+      this.filters[category] = {
+        ...this.filters[category],
+        ...filters,
+      }
     },
     updateItem(id: number, update: Partial<FeedItem>) {
       this.items = this.items.map((item: FeedItem) => {

frontend/src/utils/constants.ts

@@ -1,6 +1,8 @@
 import type { InjectionKey } from 'vue'
 import type { DialogsService } from '@/services/dialogs.ts'
+import type { IntlService } from '@/services/intl.ts'
 
 export const Injection = {
   DialogController: Symbol("dialogs-controller") as InjectionKey<DialogsService>,
+  Intl: Symbol("intl") as InjectionKey<IntlService>,
 }