feeds-fun 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "author": "Aliaksei Yaletski (Tiendil) <a.eletsky@gmail.com> (https://tiendil.org/)",
   "description": "Frontend for the Feeds Fun — web-based news reader",
   "keywords": [

package/src/components/EntriesList.vue

@@ -9,7 +9,8 @@
           <entry-for-list
             :entryId="entryId"
             :time-field="timeField"
-            :show-tags="showTags" />
+            :show-tags="showTags"
+            :tags-count="tagsCount" />
         </li>
       </ul>
 
@@ -36,6 +37,7 @@
     showTags: boolean;
     showFromStart: number;
     showPerPage: number;
+    tagsCount: {[key: string]: number};
   }>();
 
   const showEntries = ref(properties.showFromStart);

package/src/components/EntryForList.vue

@@ -14,23 +14,25 @@
         on-text="read"
         off-text="new!" />
 
-      ·
-
       <a
         href="#"
-        style="text-decoration: none"
+        style="text-decoration: none; margin-left: 0.25rem"
         v-if="!showBody"
         @click.prevent="displayBody()"
         >&#9660;</a
       >
       <a
         href="#"
-        style="text-decoration: none"
+        style="text-decoration: none; margin-left: 0.25rem"
         v-if="showBody"
         @click.prevent="showBody = false"
         >&#9650;</a
       >
 
+      <favicon-element
+        :url="entry.url"
+        style="width: 1rem; height: 1rem; vertical-align: text-bottom; margin-left: 0.25rem; margin-right: 0.25rem" />
+
       <a
         :href="entry.url"
         target="_blank"
@@ -41,7 +43,10 @@
 
       <template v-if="showTags">
         <br />
-        <tags-list :tags="entry.tags" />
+        <tags-list
+          :tags="entry.tags"
+          :tags-count="tagsCount"
+          :contributions="entry.scoreContributions" />
       </template>
 
       <div
@@ -80,6 +85,7 @@
     entryId: t.EntryId;
     timeField: string;
     showTags: boolean;
+    tagsCount: {[key: string]: number};
   }>();
 
   const entry = computed(() => {

package/src/components/FaviconElement.vue

@@ -0,0 +1,34 @@
+<template>
+  <img
+    :src="faviconUrl"
+    @error="handleFaviconError" />
+</template>
+
+<script setup lang="ts">
+  import * as utils from "@/logic/utils";
+  import {computed, ref} from "vue";
+
+  const properties = defineProps<{url: string}>();
+
+  const noFavicon = ref(false);
+
+  function handleFaviconError() {
+    noFavicon.value = true;
+  }
+
+  const faviconUrl = computed(() => {
+    if (noFavicon.value) {
+      return "/no-favicon.ico";
+    }
+
+    const url = utils.faviconForUrl(properties.url);
+
+    if (url == null) {
+      return "/no-favicon.ico";
+    }
+
+    return url;
+  });
+</script>
+
+<style scoped></style>

package/src/components/FeedForList.vue

@@ -41,6 +41,10 @@
       >
     </div>
 
+    <favicon-element
+      :url="feed.url"
+      style="width: 1rem; height: 1rem; vertical-align: text-bottom; margin-right: 0.25rem" />
+
     <div style="flex-grow: 1">
       <value-url
         :value="feed.url"

package/src/components/FfunTag.vue

@@ -77,7 +77,8 @@
   .tag {
     display: inline-block;
     cursor: pointer;
-    padding: 0.25rem;
+    padding: 0.1rem;
+    margin-right: 0.2rem;
     white-space: nowrap;
   }
 
@@ -92,4 +93,12 @@
   .tag.excluded {
     background-color: #ffcccc;
   }
+
+  .tag.positive {
+    color: darkgreen;
+  }
+
+  .tag.negative {
+    color: darkred;
+  }
 </style>

package/src/components/TagsFilter.vue

@@ -3,14 +3,25 @@
     <ul
       v-if="displayedSelectedTags.length > 0"
       style="list-style: none; padding: 0; margin: 0">
-      <tags-filter-element
+      <li
+        class="filter-element"
         v-for="tag of displayedSelectedTags"
-        :key="tag"
-        :tag="tag"
-        :count="tags[tag] ?? 0"
-        :selected="true"
-        @tag:selected="onTagSelected"
-        @tag:deselected="onTagDeselected" />
+        :key="tag">
+        <ffun-tag
+          :uid="tag"
+          :count="tags[tag] ?? 0"
+          count-mode="no"
+          :mode="tagStates[tag]"
+          @tag:clicked="onTagClicked">
+          <template #start>
+            <a
+              href="#"
+              @click.prevent="deselect(tag)"
+              >[X]</a
+            >
+          </template>
+        </ffun-tag>
+      </li>
     </ul>
 
     <input
@@ -21,14 +32,17 @@
     <ul
       v-if="displayedTags.length > 0"
       style="list-style: none; padding: 0; margin: 0">
-      <tags-filter-element
+      <li
+        class="filter-element"
         v-for="tag of displayedTags"
-        :key="tag"
-        :tag="tag"
-        :count="tags[tag]"
-        :selected="false"
-        @tag:selected="onTagSelected"
-        @tag:deselected="onTagDeselected" />
+        :key="tag">
+        <ffun-tag
+          :uid="tag"
+          :count="tags[tag]"
+          count-mode="prefix"
+          :mode="null"
+          @tag:clicked="onTagClicked" />
+      </li>
     </ul>
 
     <hr />
@@ -45,11 +59,15 @@
 <script lang="ts" setup>
   import {computed, ref} from "vue";
   import {useTagsStore} from "@/stores/tags";
-
+  import type * as tagsFilterState from "@/logic/tagsFilterState";
   const tagsStore = useTagsStore();
 
   const selectedTags = ref<{[key: string]: boolean}>({});
 
+  const tagStates = ref<{[key: string]: tagsFilterState.State}>({});
+
+  const emit = defineEmits(["tag:stateChanged"]);
+
   const properties = defineProps<{tags: {[key: string]: number}}>();
 
   const showFromStart = ref(25);
@@ -128,12 +146,30 @@
     return values;
   });
 
-  function onTagSelected(tag: string) {
-    selectedTags.value[tag] = true;
+  function onTagClicked(tag: string) {
+    const state = tagStates.value[tag] || "none";
+
+    if (state === "none") {
+      tagStates.value[tag] = "required";
+      selectedTags.value[tag] = true;
+    } else if (state === "required") {
+      tagStates.value[tag] = "excluded";
+      selectedTags.value[tag] = true;
+    } else if (state === "excluded") {
+      tagStates.value[tag] = "required";
+      selectedTags.value[tag] = true;
+    } else {
+      throw new Error(`Unknown tag state: ${state}`);
+    }
+
+    emit("tag:stateChanged", {tag: tag, state: tagStates.value[tag]});
   }
 
-  function onTagDeselected(tag: string) {
+  function deselect(tag: string) {
     selectedTags.value[tag] = false;
+    tagStates.value[tag] = "none";
+
+    emit("tag:stateChanged", {tag: tag, state: tagStates.value[tag]});
   }
 </script>
 

package/src/components/TagsList.vue

@@ -9,8 +9,8 @@
       v-for="tag of displayedTags"
       :key="tag"
       :uid="tag"
-      :mode="!!selectedTags[tag] ? 'selected' : null"
-      :count="entriesStore.reportTagsCount[tag]"
+      :mode="tagMode(tag)"
+      :count="tagsCount[tag]"
       count-mode="tooltip"
       @tag:clicked="onTagClicked" />
 
@@ -32,16 +32,17 @@
 
 <script lang="ts" setup>
   import {computed, ref} from "vue";
-  import {useEntriesStore} from "@/stores/entries";
-
-  const entriesStore = useEntriesStore();
 
   const showAll = ref(false);
   const showLimit = ref(5);
 
   const selectedTags = ref<{[key: string]: boolean}>({});
 
-  const properties = defineProps<{tags: string[]}>();
+  const properties = defineProps<{
+    tags: string[];
+    contributions: {[key: string]: number};
+    tagsCount: {[key: string]: number};
+  }>();
 
   const tagsNumber = computed(() => {
     return properties.tags.length;
@@ -55,6 +56,32 @@
     return preparedTags.value.slice(0, showLimit.value);
   });
 
+  function tagMode(tag: string) {
+    if (!!selectedTags.value[tag]) {
+      return "selected";
+    }
+
+    // return null;
+
+    if (!properties.contributions) {
+      return null;
+    }
+
+    if (!(tag in properties.contributions)) {
+      return null;
+    }
+
+    if (properties.contributions[tag] == 0) {
+      return null;
+    }
+
+    if (properties.contributions[tag] > 0) {
+      return "positive";
+    }
+
+    return "negative";
+  }
+
   const preparedTags = computed(() => {
     const values = [];
 
@@ -63,8 +90,19 @@
     }
 
     values.sort((a, b) => {
-      const aCount = entriesStore.reportTagsCount[a];
-      const bCount = entriesStore.reportTagsCount[b];
+      const aContributions = Math.abs(properties.contributions[a] || 0);
+      const bContributions = Math.abs(properties.contributions[b] || 0);
+
+      if (aContributions > bContributions) {
+        return -1;
+      }
+
+      if (aContributions < bContributions) {
+        return 1;
+      }
+
+      const aCount = properties.tagsCount[a];
+      const bCount = properties.tagsCount[b];
 
       if (aCount > bCount) {
         return -1;

package/src/logic/tagsFilterState.ts

@@ -0,0 +1,54 @@
+export type State = "required" | "excluded" | "none";
+
+interface ReturnTagsForEntity {
+  (entity: any): string[];
+}
+
+export class Storage {
+  requiredTags: {[key: string]: boolean};
+  excludedTags: {[key: string]: boolean};
+
+  constructor() {
+    this.requiredTags = {};
+    this.excludedTags = {};
+  }
+
+  onTagStateChanged({tag, state}: {tag: string; state: State}) {
+    if (state === "required") {
+      this.requiredTags[tag] = true;
+      this.excludedTags[tag] = false;
+    } else if (state === "excluded") {
+      this.excludedTags[tag] = true;
+      this.requiredTags[tag] = false;
+    } else if (state === "none") {
+      this.excludedTags[tag] = false;
+      this.requiredTags[tag] = false;
+    } else {
+      throw new Error(`Unknown tag state: ${state}`);
+    }
+  }
+
+  filterByTags(entities: any[], getTags: ReturnTagsForEntity) {
+    let report = entities.slice();
+
+    report = report.filter((entity) => {
+      for (const tag of getTags(entity)) {
+        if (this.excludedTags[tag]) {
+          return false;
+        }
+      }
+      return true;
+    });
+
+    report = report.filter((entity) => {
+      for (const tag of Object.keys(this.requiredTags)) {
+        if (this.requiredTags[tag] && !getTags(entity).includes(tag)) {
+          return false;
+        }
+      }
+      return true;
+    });
+
+    return report;
+  }
+}

package/src/logic/types.ts

@@ -114,6 +114,7 @@ export class Entry {
   readonly tags: string[];
   readonly markers: e.Marker[];
   readonly score: number;
+  readonly scoreContributions: {[key: string]: number};
   readonly scoreToZero: number;
   readonly publishedAt: Date;
   readonly catalogedAt: Date;
@@ -127,6 +128,7 @@ export class Entry {
     tags,
     markers,
     score,
+    scoreContributions,
     publishedAt,
     catalogedAt,
     body
@@ -138,6 +140,7 @@ export class Entry {
     tags: string[];
     markers: e.Marker[];
     score: number;
+    scoreContributions: {[key: string]: number};
     publishedAt: Date;
     catalogedAt: Date;
     body: string | null;
@@ -149,6 +152,7 @@ export class Entry {
     this.tags = tags;
     this.markers = markers;
     this.score = score;
+    this.scoreContributions = scoreContributions;
     this.publishedAt = publishedAt;
     this.catalogedAt = catalogedAt;
     this.body = body;
@@ -181,6 +185,7 @@ export function entryFromJSON({
   tags,
   markers,
   score,
+  scoreContributions,
   publishedAt,
   catalogedAt,
   body
@@ -192,6 +197,7 @@ export function entryFromJSON({
   tags: string[];
   markers: string[];
   score: number;
+  scoreContributions: {[key: string]: number};
   publishedAt: string;
   catalogedAt: string;
   body: string | null;
@@ -210,6 +216,7 @@ export function entryFromJSON({
       throw new Error(`Unknown marker: ${m}`);
     }),
     score: score,
+    scoreContributions: scoreContributions,
     publishedAt: new Date(publishedAt),
     catalogedAt: new Date(catalogedAt),
     body: body

package/src/logic/utils.ts

@@ -57,3 +57,13 @@ export function compareLexicographically(a: string[], b: string[]) {
 
   return 0;
 }
+
+export function faviconForUrl(url: string): string | null {
+  try {
+    const parsedUrl = new URL(url);
+    return `${parsedUrl.protocol}//${parsedUrl.host}/favicon.ico`;
+  } catch (error) {
+    console.error("Invalid URL:", error);
+    return null;
+  }
+}

package/src/main.ts

@@ -15,7 +15,6 @@ import EntryForList from "./components/EntryForList.vue";
 import RuleConstructor from "./components/RuleConstructor.vue";
 import RuleScoreUpdater from "./components/RuleScoreUpdater.vue";
 import TagsFilter from "./components/TagsFilter.vue";
-import TagsFilterElement from "./components/TagsFilterElement.vue";
 import DiscoveryForm from "./components/DiscoveryForm.vue";
 import FeedInfo from "./components/FeedInfo.vue";
 import EntryInfo from "./components/EntryInfo.vue";
@@ -28,6 +27,7 @@ import FfunTag from "./components/FfunTag.vue";
 import SimplePagination from "./components/SimplePagination.vue";
 import UserSetting from "./components/UserSetting.vue";
 import OpenaiTokensUsage from "./components/OpenaiTokensUsage.vue";
+import FaviconElement from "./components/FaviconElement.vue";
 
 import ScoreSelector from "./inputs/ScoreSelector.vue";
 import InputMarker from "./inputs/Marker.vue";
@@ -57,7 +57,6 @@ app.component("EntryForList", EntryForList);
 app.component("RuleConstructor", RuleConstructor);
 app.component("RuleScoreUpdater", RuleScoreUpdater);
 app.component("TagsFilter", TagsFilter);
-app.component("TagsFilterElement", TagsFilterElement);
 app.component("DiscoveryForm", DiscoveryForm);
 app.component("FeedInfo", FeedInfo);
 app.component("EntryInfo", EntryInfo);
@@ -70,6 +69,7 @@ app.component("FfunTag", FfunTag);
 app.component("SimplePagination", SimplePagination);
 app.component("UserSetting", UserSetting);
 app.component("OpenaiTokensUsage", OpenaiTokensUsage);
+app.component("FaviconElement", FaviconElement);
 
 app.component("ScoreSelector", ScoreSelector);
 app.component("InputMarker", InputMarker);

package/src/stores/entries.ts

@@ -15,9 +15,6 @@ export const useEntriesStore = defineStore("entriesStore", () => {
   const entries = ref<{[key: t.EntryId]: t.Entry}>({});
   const requestedEntries = ref<{[key: t.EntryId]: boolean}>({});
 
-  const requiredTags = ref<{[key: string]: boolean}>({});
-  const excludedTags = ref<{[key: string]: boolean}>({});
-
   const firstTimeEntriesLoading = ref(true);
 
   function registerEntry(entry: t.Entry) {
@@ -58,89 +55,6 @@ export const useEntriesStore = defineStore("entriesStore", () => {
     return report;
   }, []);
 
-  const entriesReport = computedAsync(async () => {
-    let report = loadedEntriesReport.value.slice();
-
-    if (!globalSettings.showRead) {
-      report = report.filter((entryId) => {
-        return !entries.value[entryId].hasMarker(e.Marker.Read);
-      });
-    }
-
-    report = report.filter((entryId) => {
-      for (const tag of entries.value[entryId].tags) {
-        if (excludedTags.value[tag]) {
-          return false;
-        }
-      }
-      return true;
-    });
-
-    report = report.filter((entryId) => {
-      for (const tag of Object.keys(requiredTags.value)) {
-        if (requiredTags.value[tag] && !entries.value[entryId].tags.includes(tag)) {
-          return false;
-        }
-      }
-      return true;
-    });
-
-    report = report.sort((a: t.EntryId, b: t.EntryId) => {
-      const orderProperties = e.EntriesOrderProperties.get(globalSettings.entriesOrder);
-
-      if (orderProperties === undefined) {
-        throw new Error(`Unknown order ${globalSettings.entriesOrder}`);
-      }
-
-      const field = orderProperties.orderField;
-
-      const valueA = _.get(entries.value[a], field, null);
-      const valueB = _.get(entries.value[b], field, null);
-
-      if (valueA === null && valueB === null) {
-        return 0;
-      }
-
-      if (valueA === null) {
-        return 1;
-      }
-
-      if (valueB === null) {
-        return -1;
-      }
-
-      if (valueA < valueB) {
-        return 1;
-      }
-
-      if (valueA > valueB) {
-        return -1;
-      }
-
-      return 0;
-    });
-
-    return report;
-  }, []);
-
-  const reportTagsCount = computed(() => {
-    const tagsCount: {[key: string]: number} = {};
-
-    for (const entryId of entriesReport.value) {
-      const entry = entries.value[entryId];
-
-      for (const tag of entry.tags) {
-        if (tag in tagsCount) {
-          tagsCount[tag] += 1;
-        } else {
-          tagsCount[tag] = 1;
-        }
-      }
-    }
-
-    return tagsCount;
-  });
-
   function requestFullEntry({entryId}: {entryId: t.EntryId}) {
     if (entryId in entries.value && entries.value[entryId].body !== null) {
       return;
@@ -185,33 +99,12 @@ export const useEntriesStore = defineStore("entriesStore", () => {
     }
   }
 
-  function requireTag({tag}: {tag: string}) {
-    requiredTags.value[tag] = true;
-    excludedTags.value[tag] = false;
-  }
-
-  function excludeTag({tag}: {tag: string}) {
-    excludedTags.value[tag] = true;
-    requiredTags.value[tag] = false;
-  }
-
-  function resetTag({tag}: {tag: string}) {
-    excludedTags.value[tag] = false;
-    requiredTags.value[tag] = false;
-  }
-
   return {
     entries,
-    entriesReport,
-    reportTagsCount,
     requestFullEntry,
     setMarker,
     removeMarker,
-    requireTag,
-    excludeTag,
-    resetTag,
-    requiredTags,
-    excludedTags,
-    firstTimeEntriesLoading
+    firstTimeEntriesLoading,
+    loadedEntriesReport
   };
 });

package/src/values/Score.vue

@@ -36,7 +36,7 @@
   .score {
     display: inline-block;
     cursor: pointer;
-    padding: 0.25rem;
+    padding: 0.1rem;
     background-color: #c1c1ff;
   }
 </style>

package/src/views/MainView.vue

@@ -17,28 +17,50 @@
 
     <h2>What is it?</h2>
 
-    <ul style="text-align: left">
-      <li>Web-based news reader. Self-hosted, if it is your way.</li>
-      <li>Automatically assigns tags to news entries.</li>
+    <p>
+      <i>Web-based news reader. Self-hosted, if it is your way.</i>
+    </p>
+
+    <ul class="main-page-element">
+      <li>Reader automatically assigns tags to news entries.</li>
       <li>You create rules to score news by tags.</li>
-      <li>Then filter and sort news how you want.</li>
+      <li>Filter and sort news how you want, to read only what you want.</li>
+      <li>?????</li>
+      <li>Profit.</li>
     </ul>
 
     <h2>You are in control</h2>
 
-    <ul style="text-align: left">
+    <ul class="main-page-element">
       <li>No black box recommendation algorithms.</li>
       <li>No "smart" reordering of your news.</li>
       <li>No ads.</li>
       <li>No selling of your data.</li>
     </ul>
 
-    <h2>What will it become?</h2>
+    <h2>Screenshots</h2>
+
+    <p><i>GUI is still in the early development stage, like the whole project. It will become more pleasurable.</i></p>
+
+    <img
+      src="/news-filtering-example.png"
+      alt="News filtering example" />
+
+    <p class="main-page-element"><strong>Explanation</strong></p>
+
+    <ul class="main-page-element">
+      <li>From the news for the last week, sorted by score.</li>
+      <li>Show only news about <code>game-development</code> from <code>reddit.com</code>.</li>
+      <li>Exclude news related to <code>employment</code>.</li>
+      <li>Hide already read news.</li>
+    </ul>
+
+    <p class="main-page-element"><strong>Tags sorting for news records</strong></p>
 
-    <ul style="text-align: left">
-      <li>Will become much prettier.</li>
-      <li> Will collect not only RSS/ATOM but any news feeds, including private if you allow. </li>
-      <li>Will suggest new rules to score & new feeds, if you allow.</li>
+    <ul class="main-page-element">
+      <li>Tags are sorted by the impact on the score.</li>
+      <li>Green tags have a positive impact.</li>
+      <li>Red tags have a negative impact.</li>
     </ul>
   </wide-layout>
 </template>
@@ -64,4 +86,11 @@
   }
 </script>
 
-<style></style>
+<style>
+  .main-page-element {
+    text-align: left;
+    margin-left: auto;
+    max-width: 27rem;
+    margin-right: auto;
+  }
+</style>

package/src/views/NewsView.vue

@@ -32,8 +32,8 @@
 
     <template #side-footer>
       <tags-filter
-        v-if="globalSettings.mainPanelMode == e.MainPanelMode.Entries"
-        :tags="entriesStore.reportTagsCount" />
+        :tags="tagsCount"
+        @tag:stateChanged="onTagStateChanged" />
     </template>
 
     <template #main-header>
@@ -50,9 +50,10 @@
     </template>
 
     <entries-list
-      :entriesIds="entriesStore.entriesReport"
+      :entriesIds="entriesReport"
       :time-field="timeField"
       :show-tags="globalSettings.showEntriesTags"
+      :tags-count="tagsCount"
       :showFromStart="25"
       :showPerPage="25" />
   </side-panel-layout>
@@ -62,20 +63,91 @@
   import {computed, ref, onUnmounted, watch} from "vue";
   import {computedAsync} from "@vueuse/core";
   import * as api from "@/logic/api";
-  import * as t from "@/logic/types";
+  import * as tagsFilterState from "@/logic/tagsFilterState";
   import * as e from "@/logic/enums";
+  import type * as t from "@/logic/types";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import {useEntriesStore} from "@/stores/entries";
+  import _ from "lodash";
 
   const globalSettings = useGlobalSettingsStore();
   const entriesStore = useEntriesStore();
 
+  const tagsStates = ref<tagsFilterState.Storage>(new tagsFilterState.Storage());
+
   globalSettings.mainPanelMode = e.MainPanelMode.Entries;
 
   globalSettings.updateDataVersion();
 
+  const entriesReport = computed(() => {
+    let report = entriesStore.loadedEntriesReport.slice();
+
+    if (!globalSettings.showRead) {
+      report = report.filter((entryId) => {
+        return !entriesStore.entries[entryId].hasMarker(e.Marker.Read);
+      });
+    }
+
+    report = tagsStates.value.filterByTags(report, (entryId) => entriesStore.entries[entryId].tags);
+
+    report = report.sort((a: t.EntryId, b: t.EntryId) => {
+      const orderProperties = e.EntriesOrderProperties.get(globalSettings.entriesOrder);
+
+      if (orderProperties === undefined) {
+        throw new Error(`Unknown order ${globalSettings.entriesOrder}`);
+      }
+
+      const field = orderProperties.orderField;
+
+      const valueA = _.get(entriesStore.entries[a], field, null);
+      const valueB = _.get(entriesStore.entries[b], field, null);
+
+      if (valueA === null && valueB === null) {
+        return 0;
+      }
+
+      if (valueA === null) {
+        return 1;
+      }
+
+      if (valueB === null) {
+        return -1;
+      }
+
+      if (valueA < valueB) {
+        return 1;
+      }
+
+      if (valueA > valueB) {
+        return -1;
+      }
+
+      return 0;
+    });
+
+    return report;
+  });
+
+  const tagsCount = computed(() => {
+    const tagsCount: {[key: string]: number} = {};
+
+    for (const entryId of entriesReport.value) {
+      const entry = entriesStore.entries[entryId];
+
+      for (const tag of entry.tags) {
+        if (tag in tagsCount) {
+          tagsCount[tag] += 1;
+        } else {
+          tagsCount[tag] = 1;
+        }
+      }
+    }
+
+    return tagsCount;
+  });
+
   const entriesNumber = computed(() => {
-    return entriesStore.entriesReport.length;
+    return entriesReport.value.length;
   });
 
   const hasEntries = computed(() => {
@@ -91,6 +163,10 @@
 
     return orderProperties.timeField;
   });
+
+  function onTagStateChanged({tag, state}: {tag: string; state: tagsFilterState.State}) {
+    tagsStates.value.onTagStateChanged({tag, state});
+  }
 </script>
 
 <style></style>

package/src/views/RulesView.vue

@@ -12,6 +12,12 @@
         v-model:property="globalSettings.rulesOrder" />
     </template>
 
+    <template #side-footer>
+      <tags-filter
+        :tags="tags"
+        @tag:stateChanged="onTagStateChanged" />
+    </template>
+
     <rules-list
       v-if="rules"
       :rules="sortedRules" />
@@ -27,6 +33,8 @@
   import * as api from "@/logic/api";
   import type * as t from "@/logic/types";
   import * as e from "@/logic/enums";
+  import * as tagsFilterState from "@/logic/tagsFilterState";
+  const tagsStates = ref<tagsFilterState.Storage>(new tagsFilterState.Storage());
 
   const globalSettings = useGlobalSettingsStore();
 
@@ -38,11 +46,31 @@
     return await api.getRules();
   }, null);
 
+  const tags = computed(() => {
+    if (!rules.value) {
+      return {};
+    }
+
+    const tags: {[key: string]: number} = {};
+
+    for (const rule of rules.value) {
+      for (const tag of rule.tags) {
+        tags[tag] = (tags[tag] || 0) + 1;
+      }
+    }
+
+    return tags;
+  });
+
   const sortedRules = computed(() => {
     if (!rules.value) {
       return null;
     }
 
+    let sorted = rules.value.slice();
+
+    sorted = tagsStates.value.filterByTags(sorted, (rule) => rule.tags);
+
     const orderProperties = e.RulesOrderProperties.get(globalSettings.rulesOrder);
 
     if (!orderProperties) {
@@ -56,8 +84,6 @@
       throw new Error(`Invalid order direction: ${orderProperties.orderDirection}`);
     }
 
-    let sorted = rules.value.slice();
-
     sorted = sorted.sort((a: t.Rule, b: t.Rule) => {
       if (globalSettings.rulesOrder === e.RulesOrder.Tags) {
         return utils.compareLexicographically(a.tags, b.tags);
@@ -67,7 +93,7 @@
       const valueB = _.get(b, orderField, null);
 
       if (valueA === null && valueB === null) {
-        return 0;
+        return utils.compareLexicographically(a.tags, b.tags);
       }
 
       if (valueA === null) {
@@ -86,11 +112,15 @@
         return -1 * direction;
       }
 
-      return 0;
+      return utils.compareLexicographically(a.tags, b.tags);
     });
 
     return sorted;
   });
+
+  function onTagStateChanged({tag, state}: {tag: string; state: tagsFilterState.State}) {
+    tagsStates.value.onTagStateChanged({tag, state});
+  }
 </script>
 
 <style></style>

package/src/components/TagsFilterElement.vue

@@ -1,89 +0,0 @@
-<template>
-  <li class="filter-element">
-    <ffun-tag
-      :uid="tag"
-      :count="count"
-      :count-mode="countMode"
-      :mode="mode"
-      @tag:clicked="onTagClicked">
-      <template #start>
-        <a
-          v-if="selected"
-          href="#"
-          @click.prevent="deselect(tag)"
-          >[X]</a
-        >
-      </template>
-    </ffun-tag>
-  </li>
-</template>
-
-<script lang="ts" setup>
-  import {computed, ref} from "vue";
-  import {useEntriesStore} from "@/stores/entries";
-
-  const entriesStore = useEntriesStore();
-
-  const properties = defineProps<{
-    tag: string;
-    count: number;
-    selected: boolean;
-  }>();
-
-  const emit = defineEmits(["tag:selected", "tag:deselected"]);
-
-  const countMode = computed(() => {
-    if (properties.selected) {
-      return "no";
-    }
-
-    return "prefix";
-  });
-
-  const mode = computed(() => {
-    if (entriesStore.requiredTags[properties.tag]) {
-      return "required";
-    } else if (entriesStore.excludedTags[properties.tag]) {
-      return "excluded";
-    } else if (properties.selected) {
-      return "selected";
-    }
-
-    return null;
-  });
-
-  function onTagClicked(tag: string) {
-    if (entriesStore.requiredTags[properties.tag]) {
-      switchToExcluded(tag);
-    } else {
-      switchToRequired(tag);
-    }
-  }
-
-  function switchToExcluded(tag: string) {
-    entriesStore.excludeTag({tag: tag});
-    emit("tag:selected", properties.tag);
-  }
-
-  function switchToRequired(tag: string) {
-    entriesStore.requireTag({tag: tag});
-    emit("tag:selected", properties.tag);
-  }
-
-  function deselect(tag: string) {
-    entriesStore.resetTag({tag: tag});
-    emit("tag:deselected", properties.tag);
-  }
-</script>
-
-<style scoped>
-  .filter-element {
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  .filter-element value-tag {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-</style>