feeds-fun 1.16.6 → 1.17.1

package/src/components/tags/Base.vue

@@ -0,0 +1,28 @@
+<template>
+  <span>
+    {{ tagInfo.name }}
+
+    <a
+      v-if="tagInfo.link"
+      :href="tagInfo.link"
+      target="_blank"
+      @click.stop=""
+      rel="noopener noreferrer">
+      <i class="ti ti-external-link align-middle" />
+    </a>
+  </span>
+</template>
+
+<script lang="ts" setup>
+  import * as t from "@/logic/types";
+  import {computed, ref, inject} from "vue";
+  import type {Ref} from "vue";
+  import {useTagsStore} from "@/stores/tags";
+  import * as tagsFilterState from "@/logic/tagsFilterState";
+  import * as asserts from "@/logic/asserts";
+  import * as events from "@/logic/events";
+
+  const properties = defineProps<{
+    tagInfo: t.TagInfo;
+  }>();
+</script>

package/src/components/tags/EntryTag.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    :class="classes"
+    :title="tooltip"
+    @click.prevent="onClick()">
+    <tag-base :tag-info="tagInfo" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import * as t from "@/logic/types";
+  import {computed, ref, inject} from "vue";
+  import type {Ref} from "vue";
+  import {useTagsStore} from "@/stores/tags";
+  import * as tagsFilterState from "@/logic/tagsFilterState";
+  import * as asserts from "@/logic/asserts";
+  import * as events from "@/logic/events";
+
+  const tagsStore = useTagsStore();
+
+  const tagsStates = inject<Ref<tagsFilterState.Storage>>("tagsStates");
+
+  asserts.defined(tagsStates);
+
+  const properties = defineProps<{
+    uid: string;
+    cssModifier: string;
+    count: number;
+  }>();
+
+  const tagInfo = computed(() => {
+    const tagInfo = tagsStore.tags[properties.uid];
+
+    if (tagInfo) {
+      return tagInfo;
+    }
+
+    tagsStore.requestTagInfo({tagUid: properties.uid});
+
+    return t.noInfoTag(properties.uid);
+  });
+
+  const classes = computed(() => {
+    const result: {[key: string]: boolean} = {};
+
+    result[properties.cssModifier] = true;
+    result["ffun-entry-tag"] = true;
+
+    if (tagsStates.value.requiredTags[properties.uid]) {
+      result["required"] = true;
+    }
+
+    if (tagsStates.value.excludedTags[properties.uid]) {
+      result["excluded"] = true;
+    }
+
+    return result;
+  });
+
+  const changeSource = "entry_record";
+
+  async function onClick() {
+    asserts.defined(tagsStates);
+
+    let changeInfo = tagsStates.value.onTagClicked({tag: properties.uid});
+
+    await events.tagStateChanged({tag: properties.uid, source: changeSource, ...changeInfo});
+  }
+
+  const tooltip = computed(() => {
+    return `Articles with this tag: ${properties.count}`;
+  });
+</script>

package/src/components/{TagsList.vue → tags/EntryTagsList.vue}

@@ -1,17 +1,15 @@
 <template>
   <div>
-    <div class="text-base">
-      <ffun-tag
+    <div class="overflow-y-auto max-h-36">
+      <entry-tag
         v-for="tag of displayedTags"
         :key="tag"
         :uid="tag"
-        :count="tagsCount[tag]"
-        :secondary-mode="tagMode(tag)"
-        count-mode="tooltip"
-        change-source="entry_record" />
+        :css-modifier="tagMode(tag)"
+        :count="tagsCount[tag]" />
 
       <a
-        class=""
+        class="text-base whitespace-nowrap"
         title="Click on the news title to open it and see all tags"
         href="#"
         @click.prevent="emit('request-to-show-all')"
@@ -50,15 +48,15 @@
 
   function tagMode(tag: string) {
     if (!properties.contributions) {
-      return null;
+      return "neurtral";
     }
 
     if (!(tag in properties.contributions)) {
-      return null;
+      return "neurtral";
     }
 
     if (properties.contributions[tag] == 0) {
-      return null;
+      return "neurtral";
     }
 
     if (properties.contributions[tag] > 0) {

package/src/components/tags/FakeTag.vue

@@ -0,0 +1,35 @@
+<template>
+  <div :class="classes">
+    <tag-base :tag-info="tagInfo" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import * as t from "@/logic/types";
+  import {computed, ref, inject} from "vue";
+  import type {Ref} from "vue";
+  import {useTagsStore} from "@/stores/tags";
+  import * as tagsFilterState from "@/logic/tagsFilterState";
+  import * as asserts from "@/logic/asserts";
+  import * as events from "@/logic/events";
+
+  const properties = defineProps<{
+    uid: string;
+    name: string;
+    link: string | null;
+    cssModifier: string;
+  }>();
+
+  const tagInfo = computed(() => {
+    return t.fakeTag({uid: properties.uid, name: properties.name, link: properties.link, categories: []});
+  });
+
+  const classes = computed(() => {
+    const result: {[key: string]: boolean} = {};
+
+    result[properties.cssModifier] = true;
+    result["ffun-entry-tag"] = true;
+
+    return result;
+  });
+</script>

package/src/components/{FfunTag.vue → tags/FilterTag.vue}

@@ -1,29 +1,25 @@
 <template>
-  <div class="inline-block">
+  <div class="inline-block w-full">
     <a
       href="#"
       v-if="showSwitch"
-      class="pr-1"
+      class="pr-1 ffun-tag-switch"
+      :title="switchTooltip"
       @click.prevent="onRevers()"
       >⇄</a
     >
-    <div
+    <span
       :class="classes"
-      :title="tooltip"
+      :title="tagTooltip"
       @click.prevent="onClick()">
-      <span v-if="countMode == 'prefix'">[{{ count }}]</span>
-
-      {{ tagInfo.name }}
-
-      <a
-        v-if="tagInfo.link"
-        :href="tagInfo.link"
-        target="_blank"
-        @click.stop=""
-        rel="noopener noreferrer">
-        &#8599;
-      </a>
-    </div>
+      <span
+        v-if="showCount"
+        class="pr-1"
+        >[{{ count }}]</span
+      >
+
+      <tag-base :tag-info="tagInfo" />
+    </span>
   </div>
 </template>
 
@@ -45,10 +41,9 @@
   const properties = defineProps<{
     uid: string;
     count?: number | null;
-    countMode?: string | null;
-    secondaryMode?: string | null;
-    showSwitch?: boolean | null;
-    changeSource: events.TagChangeSource;
+    showCount: boolean;
+    showSwitch: boolean;
+    changeSource: "news_tags_filter" | "rules_tags_filter";
   }>();
 
   const tagInfo = computed(() => {
@@ -64,9 +59,11 @@
   });
 
   const classes = computed(() => {
-    const result: {[key: string]: boolean} = {
-      tag: true
-    };
+    const result: {[key: string]: boolean} = {};
+
+    result["ffun-filter-tag"] = true;
+    result["inline-block"] = true;
+    result["w-full"] = true;
 
     if (tagsStates.value.requiredTags[properties.uid]) {
       result["required"] = true;
@@ -76,10 +73,6 @@
       result["excluded"] = true;
     }
 
-    if (properties.secondaryMode) {
-      result[properties.secondaryMode] = true;
-    }
-
     return result;
   });
 
@@ -99,32 +92,23 @@
     await events.tagStateChanged({tag: properties.uid, source: properties.changeSource, ...changeInfo});
   }
 
-  const tooltip = computed(() => {
-    if (properties.countMode == "tooltip" && properties.count) {
-      return `articles with this tag: ${properties.count}`;
+  const switchTooltip = computed(() => {
+    if (tagsStates.value.requiredTags[properties.uid]) {
+      return "Switch to show news without this tag";
     }
-    return "";
-  });
-</script>
-
-<style scoped>
-  .tag {
-    @apply inline-block cursor-pointer p-0 mr-2 whitespace-nowrap hover:bg-green-100 px-1 hover:rounded-lg;
-  }
 
-  .tag.required {
-    @apply text-green-700 font-bold;
-  }
+    if (tagsStates.value.excludedTags[properties.uid]) {
+      return "Switch to show news with this tag";
+    }
 
-  .tag.excluded {
-    @apply text-red-700 font-bold;
-  }
+    return "Click to toggle";
+  });
 
-  .tag.positive {
-    @apply text-green-700;
-  }
+  const tagTooltip = computed(() => {
+    if (!tagsStates.value.requiredTags[properties.uid] && !tagsStates.value.excludedTags[properties.uid]) {
+      return "Show news with this tag";
+    }
 
-  .tag.negative {
-    @apply text-red-700;
-  }
-</style>
+    return "Stop filtering by this tag";
+  });
+</script>

package/src/components/tags/RuleTag.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    :class="classes"
+    @click.prevent="onClick()">
+    <tag-base :tag-info="tagInfo" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import * as t from "@/logic/types";
+  import {computed, ref, inject} from "vue";
+  import type {Ref} from "vue";
+  import {useTagsStore} from "@/stores/tags";
+  import * as tagsFilterState from "@/logic/tagsFilterState";
+  import * as asserts from "@/logic/asserts";
+  import * as events from "@/logic/events";
+
+  const tagsStore = useTagsStore();
+
+  const tagsStates = inject<Ref<tagsFilterState.Storage>>("tagsStates");
+
+  asserts.defined(tagsStates);
+
+  const properties = defineProps<{
+    uid: string;
+    cssModifier: string;
+  }>();
+
+  const tagInfo = computed(() => {
+    const tagInfo = tagsStore.tags[properties.uid];
+
+    if (tagInfo) {
+      return tagInfo;
+    }
+
+    tagsStore.requestTagInfo({tagUid: properties.uid});
+
+    return t.noInfoTag(properties.uid);
+  });
+
+  const classes = computed(() => {
+    const result: {[key: string]: boolean} = {};
+
+    result[properties.cssModifier] = true;
+    result["ffun-entry-tag"] = true;
+
+    if (tagsStates.value.requiredTags[properties.uid]) {
+      result["required"] = true;
+    }
+
+    if (tagsStates.value.excludedTags[properties.uid]) {
+      result["excluded"] = true;
+    }
+
+    return result;
+  });
+
+  const changeSource = "rule_record";
+
+  async function onClick() {
+    asserts.defined(tagsStates);
+
+    let changeInfo = tagsStates.value.onTagClicked({tag: properties.uid});
+
+    await events.tagStateChanged({tag: properties.uid, source: changeSource, ...changeInfo});
+  }
+</script>

package/src/components/{TagsFilter.vue → tags/TagsFilter.vue}

@@ -7,13 +7,12 @@
         v-for="tag of displayedSelectedTags"
         :key="tag"
         class="whitespace-nowrap line-clamp-1">
-        <ffun-tag
-          class="ml-1"
+        <filter-tag
           :uid="tag"
           :count="tags[tag] ?? 0"
           :show-switch="true"
-          count-mode="no"
-          change-source="tag_filter" />
+          :show-count="false"
+          :change-source="changeSource" />
       </li>
     </ul>
 
@@ -32,11 +31,12 @@
         v-for="tag of displayedTags"
         :key="tag"
         class="truncate">
-        <ffun-tag
+        <filter-tag
           :uid="tag"
           :count="tags[tag]"
-          count-mode="prefix"
-          changeSource="tag_filter" />
+          :show-switch="false"
+          :show-count="true"
+          :change-source="changeSource" />
       </li>
     </ul>
 
@@ -69,7 +69,11 @@
   const tagsStates = inject<Ref<tagsFilterState.Storage>>("tagsStates");
   asserts.defined(tagsStates);
 
-  const properties = defineProps<{tags: {[key: string]: number}; showCreateRule?: boolean}>();
+  const properties = defineProps<{
+    tags: {[key: string]: number};
+    showCreateRule?: boolean;
+    changeSource: "news_tags_filter" | "rules_tags_filter";
+  }>();
 
   const showFromStart = ref(25);
 

package/src/css/base.css

@@ -0,0 +1,38 @@
+@layer base {
+  html {
+    @apply font-sans;
+    @apply bg-white;
+  }
+
+  h1 {
+    @apply text-3xl font-bold leading-tight my-4;
+  }
+
+  h2 {
+    @apply text-2xl font-semibold leading-relaxed my-3;
+  }
+
+  h3 {
+    @apply text-xl font-semibold leading-relaxed my-2;
+  }
+
+  hr {
+    @apply border-slate-400 my-2;
+  }
+
+  p,
+  ul,
+  ol,
+  table {
+    @apply mb-1;
+  }
+
+  p a {
+    @apply text-blue-600 hover:text-blue-800 cursor-pointer;
+  }
+
+  /* TODO: move somewhere or remove in the honor of more specialized classes */
+  .ffun-normal-link {
+    @apply text-blue-600 hover:text-blue-800 cursor-pointer;
+  }
+}

package/src/css/inputs.css

@@ -0,0 +1,49 @@
+@layer components {
+  .ffun-x-input-common {
+    @apply border border-slate-300 rounded px-2 py-1;
+    @apply bg-white text-slate-700;
+    @apply focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-100;
+    @apply hover:border-blue-400;
+    @apply disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed;
+    @apply transition-colors duration-150;
+  }
+
+  .ffun-form-button {
+    @apply ffun-x-input-common font-semibold text-white;
+    @apply px-4 py-2;
+    @apply bg-blue-500 hover:bg-blue-600 focus:ring-0;
+    @apply disabled:bg-blue-300 disabled:text-slate-50;
+  }
+
+  .ffun-form-button.short {
+    @apply p-1 px-2;
+  }
+
+  .ffun-form-button.bad {
+    @apply bg-red-500 hover:bg-red-600;
+    @apply disabled:bg-red-300;
+  }
+
+  .ffun-file-button {
+    @apply text-slate-500;
+    @apply file:text-white file:font-semibold;
+    @apply file:border file:rounded file:px-4 file:py-2 file:shadow-none file:bg-blue-500 file:border-slate-300 file:border-solid file:outline-none;
+    @apply file:disabled:bg-blue-300 file:disabled:text-slate-400 file:disabled:cursor-not-allowed;
+    @apply file:enabled:hover:border-blue-400;
+    @apply file:focus:ring-0;
+    @apply file:cursor-pointer;
+  }
+
+  .ffun-config-flag {
+    @apply ffun-x-input-common px-2 py-0;
+  }
+
+  .ffun-input {
+    @apply ffun-x-input-common placeholder-gray-500;
+  }
+
+  .ffun-checkbox {
+    @apply ffun-x-input-common h-4 w-4 align-middle;
+    @apply bg-white;
+  }
+}

package/src/css/page_header.css

@@ -0,0 +1,34 @@
+@layer components {
+  .ffun-x-header-text {
+    @apply text-xl text-black px-2 py-1;
+  }
+
+  .ffun-page-header {
+    @apply px-4 pt-4 m-0 flex items-center cursor-default;
+  }
+
+  .ffun-page-header-left-block {
+    @apply items-center mr-auto m-0 p-0 flex space-x-2;
+  }
+
+  .ffun-page-header-right-block {
+    @apply items-center m-0 p-0 flex space-x-2;
+  }
+
+  .ffun-page-header-center-block {
+    @apply items-center mx-auto m-0 p-0 flex space-x-2;
+  }
+
+  .ffun-page-header-link {
+    @apply cursor-pointer no-underline ffun-x-header-text;
+    @apply underline-offset-4 hover:bg-blue-100 rounded;
+  }
+
+  .ffun-page-header-link-disabled {
+    @apply underline underline-offset-4 ffun-x-header-text;
+  }
+
+  .ffun-page-header-title {
+    @apply font-semibold ffun-x-header-text;
+  }
+}

package/src/css/panels.css

@@ -0,0 +1,49 @@
+@layer components {
+  .ffun-x-panel ul {
+    @apply list-disc list-inside;
+  }
+
+  .ffun-x-panel ol {
+    @apply list-decimal list-inside;
+  }
+
+  .ffun-x-panel code {
+    @apply bg-slate-800 px-1 rounded bg-opacity-10 text-sm;
+  }
+
+  .ffun-x-panel a {
+    @apply text-red-600 hover:text-red-800;
+  }
+
+  .ffun-x-panel h4 {
+    @apply font-semibold text-lg mb-2;
+  }
+
+  .ffun-x-panel p:last-child {
+    @apply pb-0 mb-0;
+  }
+
+  .ffun-x-info {
+    @apply ffun-x-panel border p-4 rounded-md;
+  }
+
+  .ffun-info-settings {
+    @apply ffun-x-info;
+  }
+
+  .ffun-info-common {
+    @apply ffun-x-info bg-blue-50 border-blue-200 text-blue-800;
+  }
+
+  .ffun-info-good {
+    @apply ffun-x-info bg-green-50 border-green-200 text-green-800;
+  }
+
+  .ffun-info-bad {
+    @apply ffun-x-info bg-red-50 border-red-200 text-red-800;
+  }
+
+  .ffun-info-waiting {
+    @apply ffun-x-info bg-yellow-50 border-yellow-200 text-yellow-800;
+  }
+}

package/src/css/side_panel_layout.css

@@ -0,0 +1,34 @@
+@layer components {
+  .ffun-side-panel-layout {
+    @apply flex divide-x;
+
+    .ffun-side-panel {
+      @apply px-4 w-72 bg-slate-50 flex-shrink-0;
+
+      .ffun-side-panel-controls-list {
+        @apply space-y-2;
+      }
+
+      /* TODO: move this style our layout? */
+      .ffun-side-panel-refresh-button {
+        @apply ffun-form-button my-1 block w-full text-center;
+      }
+    }
+
+    .ffun-body-panel {
+      @apply flex-grow;
+    }
+  }
+
+  .ffun-body-list-entry {
+    @apply mb-1;
+  }
+
+  .ffun-body-list-entry:not(:last-child) {
+    @apply border-b py-1;
+  }
+
+  .ffun-body-list-icon-column {
+    @apply flex-shrink-0 mr-2 text-center cursor-default text-2xl;
+  }
+}

package/src/css/tags.css

@@ -0,0 +1,44 @@
+@layer components {
+  .ffun-entry-tag {
+    @apply border inline-block cursor-pointer rounded whitespace-nowrap text-sm md:text-base;
+    @apply mr-1 mb-1 py-0.5 px-1.5 bg-slate-200 text-slate-800;
+    @apply hover:bg-slate-300;
+
+    &.positive {
+      @apply bg-green-50 text-green-800;
+      @apply hover:bg-green-100;
+    }
+
+    &.negative {
+      @apply bg-red-50 text-red-800;
+      @apply hover:bg-red-100;
+    }
+
+    &.required {
+      @apply border-orange-400;
+    }
+
+    &.excluded {
+    }
+  }
+
+  .ffun-filter-tag {
+    @apply inline-block cursor-pointer rounded whitespace-nowrap w-fit;
+    @apply py-0.5 px-1;
+    @apply hover:bg-blue-100;
+
+    &.required {
+      @apply font-bold text-green-700;
+    }
+
+    &.excluded {
+      @apply font-bold text-red-700;
+    }
+  }
+
+  .ffun-tag-switch {
+    @apply inline-block cursor-pointer rounded whitespace-nowrap w-fit;
+    @apply py-0.5 px-1;
+    @apply hover:bg-blue-100;
+  }
+}