feeds-fun 1.16.6 → 1.17.0

package/src/layouts/SidePanelLayout.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="flex divide-x">
-    <div class="p-4 w-60 bg-slate-200 flex-shrink-0">
-      <h2 class="leading-8 my-0">
-        <slot name="main-header"></slot>
-      </h2>
+  <div class="ffun-side-panel-layout">
+    <div class="ffun-side-panel">
+      <div class="ffun-page-header">
+        <div class="ffun-page-header-title">
+          <slot name="main-header"></slot>
+        </div>
+      </div>
 
       <hr />
 
-      <ul class="space-y-2">
+      <ul class="ffun-side-panel-controls-list">
         <li v-if="hasSideMenuItem(1)">
           <slot name="side-menu-item-1"></slot>
         </li>
@@ -32,7 +34,7 @@
       <hr v-if="reloadButton" />
 
       <a
-        class="ffun-form-button p-1 my-1 block w-full text-center"
+        class="ffun-side-panel-refresh-button short"
         v-if="reloadButton"
         href="#"
         @click="globalSettings.updateDataVersion()"
@@ -44,101 +46,43 @@
       <slot name="side-footer"></slot>
     </div>
 
-    <div class="flex-grow p-4">
-      <header class="flex items-center leading-8">
-        <div class="display:flex items-center mr-auto">
-          <ul class="list-none m-0 p-0 flex space-x-2">
-            <li
-              v-for="[mode, props] of e.MainPanelModeProperties"
-              :key="mode">
-              <a
-                v-if="globalSettings.mainPanelMode !== mode"
-                :href="router.resolve({name: mode, params: {}}).href"
-                class="ffun-header-link"
-                @click.prevent="router.push({name: mode, params: {}})">
-                {{ props.text }}
-              </a>
-
-              <span
-                class="ffun-header-link-disabled cursor-default"
-                v-else
-                >{{ props.text }}</span
-              >
-            </li>
-
-            <li class="">
-              <a
-                href="/api/docs"
-                target="_blank"
-                class="ffun-header-link"
-                style="text-decoration: none"
-                @click="events.socialLinkClicked({linkType: 'api'})"
-                >API</a
-              >
-            </li>
-
-            <li v-if="settings.blog">
-              <a
-                :href="settings.blog"
-                target="_blank"
-                class="ffun-header-link"
-                style="text-decoration: none"
-                @click="events.socialLinkClicked({linkType: 'blog'})"
-                >Blog</a
-              >
-            </li>
-
-            <li v-if="settings.redditSubreddit">
-              <a
-                :href="settings.redditSubreddit"
-                target="_blank"
-                class="ffun-header-link text-xl align-middle"
-                title="Reddit"
-                style="text-decoration: none"
-                @click="events.socialLinkClicked({linkType: 'reddit'})"
-                ><i class="ti ti-brand-reddit"></i
-              ></a>
-            </li>
-
-            <li v-if="settings.discordInvite">
-              <a
-                :href="settings.discordInvite"
-                target="_blank"
-                class="ffun-header-link text-xl align-middle"
-                title="Discord"
-                style="text-decoration: none"
-                @click="events.socialLinkClicked({linkType: 'discord'})"
-                ><i class="ti ti-brand-discord"></i
-              ></a>
-            </li>
-
-            <li v-if="settings.githubRepo">
-              <a
-                :href="settings.githubRepo"
-                target="_blank"
-                class="ffun-header-link text-xl align-middle"
-                title="GitHub"
-                style="text-decoration: none"
-                @click="events.socialLinkClicked({linkType: 'github'})">
-                <i class="ti ti-brand-github"></i
-              ></a>
-            </li>
-          </ul>
+    <div class="ffun-body-panel">
+      <div class="ffun-page-header">
+        <div class="ffun-page-header-left-block">
+          <template
+            v-for="[mode, props] of e.MainPanelModeProperties"
+            :key="mode">
+            <a
+              v-if="globalSettings.mainPanelMode !== mode"
+              :href="router.resolve({name: mode, params: {}}).href"
+              class="ffun-page-header-link"
+              @click.prevent="router.push({name: mode, params: {}})">
+              {{ props.text }}
+            </a>
+
+            <span
+              class="ffun-page-header-link-disabled"
+              v-else
+              >{{ props.text }}</span
+            >
+          </template>
+
+          <page-header-external-links :show-api="true" />
         </div>
 
-        <div class="flex items-center ml-4">
+        <div class="ffun-page-header-right-block">
           <a
             href="#"
-            class="ffun-header-link"
+            class="ffun-page-header-link"
             @click.prevent="logout()"
             >logout</a
           >
         </div>
-      </header>
+      </div>
 
       <hr class="my-2 border-slate-400" />
 
-      <main class="mb-4">
+      <main class="mb-4 px-4 min-h-screen">
         <slot></slot>
       </main>
 

package/src/layouts/WideLayout.vue

@@ -1,21 +1,9 @@
 <template>
-  <div class="flex justify-center h-screen">
-    <div class="flex flex-col justify-start items-center text-center p-4">
-      <header>
-        <h1>
-          <slot name="header"></slot>
-        </h1>
-      </header>
-
-      <main>
-        <slot></slot>
-      </main>
-
-      <footer>
-        <slot name="footer"></slot>
-      </footer>
-    </div>
-  </div>
+  <!-- <div class="flex justify-center h-screen"> -->
+  <!-- <div class="flex flex-col justify-start items-center text-center p-4"> -->
+  <slot></slot>
+  <!-- </div> -->
+  <!-- </div> -->
 </template>
 
 <script lang="ts" setup></script>

package/src/logic/events.ts

@@ -2,7 +2,7 @@ import * as api from "@/logic/api";
 import type * as t from "@/logic/types";
 import type {State as TagState} from "@/logic/tagsFilterState";
 
-export type TagChangeSource = "tag_filter" | "entry_record";
+export type TagChangeSource = "news_tags_filter" | "rules_tags_filter" | "entry_record" | "rule_record";
 
 export async function newsLinkOpened({entryId}: {entryId: t.EntryId}) {
   await api.trackEvent({name: "news_link_opened", entry_id: entryId});

package/src/logic/types.ts

@@ -261,7 +261,7 @@ export function ruleFromJSON({
     id: toRuleId(id),
     requiredTags: requiredTags,
     excludedTags: excludedTags,
-    allTags: requiredTags.concat(excludedTags),
+    allTags: requiredTags.concat(excludedTags).sort(),
     score: score,
     createdAt: new Date(createdAt),
     updatedAt: new Date(updatedAt)
@@ -344,12 +344,15 @@ export function noInfoTag(uid: string): TagInfo {
   return {uid, name: uid, link: null, categories: []};
 }
 
+export function fakeTag({uid, name, link, categories}: TagInfo): TagInfo {
+  return {uid, name, link, categories};
+}
+
 export type UserSetting = {
   readonly kind: string;
   readonly type: string;
   value: string | number | boolean;
   readonly name: string;
-  readonly description: string;
 };
 
 export function userSettingFromJSON({
@@ -369,8 +372,7 @@ export function userSettingFromJSON({
     kind,
     type,
     value: type === "decimal" ? parseFloat(value as string) : value,
-    name,
-    description
+    name
   };
 }
 
@@ -413,25 +415,29 @@ export class Collection {
   readonly name: string;
   readonly description: string;
   readonly feedsNumber: number;
+  readonly showOnMain: boolean;
 
   constructor({
     id,
     guiOrder,
     name,
     description,
-    feedsNumber
+    feedsNumber,
+    showOnMain
   }: {
     id: CollectionId;
     guiOrder: number;
     name: string;
     description: string;
     feedsNumber: number;
+    showOnMain: boolean;
   }) {
     this.id = id;
     this.guiOrder = guiOrder;
     this.name = name;
     this.description = description;
     this.feedsNumber = feedsNumber;
+    this.showOnMain = showOnMain;
   }
 }
 
@@ -440,20 +446,23 @@ export function collectionFromJSON({
   guiOrder,
   name,
   description,
-  feedsNumber
+  feedsNumber,
+  showOnMain
 }: {
   id: string;
   guiOrder: number;
   name: string;
   description: string;
   feedsNumber: number;
+  showOnMain: boolean;
 }): Collection {
   return {
     id: toCollectionId(id),
     guiOrder: guiOrder,
     name: name,
     description: description,
-    feedsNumber: feedsNumber
+    feedsNumber: feedsNumber,
+    showOnMain: showOnMain
   };
 }
 

package/src/logic/utils.ts

@@ -1,4 +1,5 @@
 import _ from "lodash";
+import DOMPurify from "dompurify";
 
 export function timeSince(date: Date) {
   const now = new Date();
@@ -67,3 +68,31 @@ export function faviconForUrl(url: string): string | null {
     return null;
   }
 }
+
+export function purifyTitle({raw, default_}: {raw: string | null; default_: string}) {
+  if (raw === null) {
+    return default_;
+  }
+
+  let title = DOMPurify.sanitize(raw, {ALLOWED_TAGS: []}).trim();
+
+  if (title.length === 0) {
+    return default_;
+  }
+
+  return title;
+}
+
+export function purifyBody({raw, default_}: {raw: string | null; default_: string}) {
+  if (raw === null) {
+    return default_;
+  }
+
+  let body = DOMPurify.sanitize(raw).trim();
+
+  if (body.length === 0) {
+    return default_;
+  }
+
+  return body;
+}

package/src/main.ts

@@ -9,18 +9,15 @@ import "./style.css";
 import FeedsList from "./components/FeedsList.vue";
 import EntriesList from "./components/EntriesList.vue";
 import RulesList from "./components/RulesList.vue";
-import TagsList from "./components/TagsList.vue";
 import ConfigSelector from "./components/ConfigSelector.vue";
 import ConfigFlag from "./components/ConfigFlag.vue";
 import EntryForList from "./components/EntryForList.vue";
 import RuleConstructor from "./components/RuleConstructor.vue";
-import TagsFilter from "./components/TagsFilter.vue";
 import DiscoveryForm from "./components/DiscoveryForm.vue";
 import FeedInfo from "./components/FeedInfo.vue";
 import OpmlUpload from "./components/OPMLUpload.vue";
 import FeedForList from "./components/FeedForList.vue";
 import SupertokensLogin from "./components/SupertokensLogin.vue";
-import FfunTag from "./components/FfunTag.vue";
 import SimplePagination from "./components/SimplePagination.vue";
 import UserSetting from "./components/UserSetting.vue";
 import TokensCost from "./components/TokensCost.vue";
@@ -28,6 +25,16 @@ import FaviconElement from "./components/FaviconElement.vue";
 import RuleForList from "./components/RuleForList.vue";
 import UserSettingForNotification from "./components/UserSettingForNotification.vue";
 
+import TagBase from "./components/tags/Base.vue";
+import EntryTag from "./components/tags/EntryTag.vue";
+import EntryTagsList from "./components/tags/EntryTagsList.vue";
+import FilterTag from "./components/tags/FilterTag.vue";
+import TagsFilter from "./components/tags/TagsFilter.vue";
+import RuleTag from "./components/tags/RuleTag.vue";
+import FakeTag from "./components/tags/FakeTag.vue";
+
+import PageHeaderExternalLinks from "./components/page_header/ExternalLinks.vue";
+
 import NotificationsApiKey from "./components/notifications/ApiKey.vue";
 import NotificationsCreateRuleHelp from "./components/notifications/CreateRuleHelp.vue";
 import Notifications from "./components/notifications/Block.vue";
@@ -41,13 +48,22 @@ import CollectionsSubscribingProgress from "./components/collections/Subscribing
 import CollectionsFeedItem from "./components/collections/FeedItem.vue";
 
 import ScoreSelector from "./inputs/ScoreSelector.vue";
-import InputMarker from "./inputs/Marker.vue";
 
-import ValueUrl from "./values/URL.vue";
+import ExternalUrl from "./values/ExternalUrl.vue";
 import ValueFeedId from "./values/FeedId.vue";
 import ValueDateTime from "./values/DateTime.vue";
 import ValueScore from "./values/Score.vue";
 
+import BodyListReverseTimeColumn from "./components/body_list/ReverseTimeColumn.vue";
+import BodyListFaviconColumn from "./components/body_list/FaviconColumn.vue";
+import BodyListEntryBody from "./components/body_list/EntryBody.vue";
+
+import MainDescription from "./components/main/Description.vue";
+import MainItem from "./components/main/Item.vue";
+import MainNewsTitle from "./components/main/NewsTitle.vue";
+import MainHeaderLine from "./components/main/HeaderLine.vue";
+import MainBlock from "./components/main/Block.vue";
+
 import WideLayout from "./layouts/WideLayout.vue";
 import SidePanelLayout from "./layouts/SidePanelLayout.vue";
 
@@ -60,18 +76,15 @@ const app = createApp(App);
 app.component("FeedsList", FeedsList);
 app.component("EntriesList", EntriesList);
 app.component("RulesList", RulesList);
-app.component("TagsList", TagsList);
 app.component("ConfigSelector", ConfigSelector);
 app.component("ConfigFlag", ConfigFlag);
 app.component("EntryForList", EntryForList);
 app.component("RuleConstructor", RuleConstructor);
-app.component("TagsFilter", TagsFilter);
 app.component("DiscoveryForm", DiscoveryForm);
 app.component("FeedInfo", FeedInfo);
 app.component("OpmlUpload", OpmlUpload);
 app.component("FeedForList", FeedForList);
 app.component("SupertokensLogin", SupertokensLogin);
-app.component("FfunTag", FfunTag);
 app.component("SimplePagination", SimplePagination);
 app.component("UserSetting", UserSetting);
 app.component("TokensCost", TokensCost);
@@ -79,6 +92,16 @@ app.component("FaviconElement", FaviconElement);
 app.component("RuleForList", RuleForList);
 app.component("UserSettingForNotification", UserSettingForNotification);
 
+app.component("TagBase", TagBase);
+app.component("EntryTag", EntryTag);
+app.component("EntryTagsList", EntryTagsList);
+app.component("FilterTag", FilterTag);
+app.component("TagsFilter", TagsFilter);
+app.component("RuleTag", RuleTag);
+app.component("FakeTag", FakeTag);
+
+app.component("PageHeaderExternalLinks", PageHeaderExternalLinks);
+
 app.component("NotificationsApiKey", NotificationsApiKey);
 app.component("NotificationsCreateRuleHelp", NotificationsCreateRuleHelp);
 app.component("Notifications", Notifications);
@@ -92,13 +115,22 @@ app.component("CollectionsSubscribingProgress", CollectionsSubscribingProgress);
 app.component("CollectionsFeedItem", CollectionsFeedItem);
 
 app.component("ScoreSelector", ScoreSelector);
-app.component("InputMarker", InputMarker);
 
-app.component("ValueUrl", ValueUrl);
+app.component("ExternalUrl", ExternalUrl);
 app.component("ValueFeedId", ValueFeedId);
 app.component("ValueDateTime", ValueDateTime);
 app.component("ValueScore", ValueScore);
 
+app.component("BodyListReverseTimeColumn", BodyListReverseTimeColumn);
+app.component("BodyListFaviconColumn", BodyListFaviconColumn);
+app.component("BodyListEntryBody", BodyListEntryBody);
+
+app.component("MainDescription", MainDescription);
+app.component("MainItem", MainItem);
+app.component("MainNewsTitle", MainNewsTitle);
+app.component("MainHeaderLine", MainHeaderLine);
+app.component("MainBlock", MainBlock);
+
 app.component("WideLayout", WideLayout);
 app.component("SidePanelLayout", SidePanelLayout);
 

package/src/style.css

@@ -1,102 +1,12 @@
 @import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css");
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  html {
-    @apply font-serif bg-slate-100;
-  }
-
-  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;
-  }
-
-  .ffun-normalized-text ul {
-    @apply list-disc list-inside;
-  }
-
-  .ffun-normalized-text code {
-    @apply bg-slate-800 px-1 rounded bg-opacity-10 text-sm;
-  }
-
-  .ffun-info-common {
-    @apply ffun-normalized-text border-2 p-2 my-1 rounded border-slate-200;
-  }
-
-  .ffun-info-good {
-    @apply ffun-info-common bg-green-50;
-  }
-
-  .ffun-info-bad {
-    @apply ffun-info-common bg-red-50;
-  }
-
-  .ffun-info-warning {
-    @apply ffun-info-common bg-orange-50;
-  }
-
-  .ffun-info-attention {
-    @apply ffun-info-common bg-purple-50;
-  }
-
-  .ffun-header-link {
-    @apply text-blue-600 hover:text-blue-900 cursor-pointer text-lg;
-  }
-
-  .ffun-normal-link {
-    @apply text-blue-600 hover:text-blue-800 cursor-pointer;
-  }
-
-  .ffun-header-link-disabled {
-    @apply text-lg underline underline-offset-4;
-  }
-
-  .ffun-input-common {
-    @apply border-2 rounded bg-slate-50 hover:bg-blue-50 enabled:hover:border-blue-400 px-1 disabled:bg-orange-50;
-  }
-
-  .ffun-form-button {
-    @apply ffun-input-common border-blue-300 disabled:bg-blue-100/25 py-1;
-  }
-
-  .ffun-file-button {
-    @apply file:border-2 file:rounded file:bg-slate-50 file:hover:bg-blue-50 file:enabled:hover:border-blue-400 file:px-1 file:disabled:bg-orange-50  file:border-blue-300 file:disabled:bg-blue-700/75 file:py-1 file:shadow-none file:border-solid text-slate-500;
-  }
-
-  .ffun-config-flag {
-    @apply ffun-input-common border-blue-300 disabled:bg-blue-700/75 py-0;
-  }
-
-  .ffun-input {
-    @apply ffun-input-common border-blue-200 focus:border-blue-300 focus:outline-none placeholder-gray-500 py-1;
-  }
-
-  .ffun-checkbox {
-    @apply ffun-input-common h-4 w-4 align-middle;
-  }
-}
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "./css/base.css";
+@import "./css/side_panel_layout.css";
+@import "./css/tags.css";
+@import "./css/inputs.css";
+@import "./css/panels.css";
+@import "./css/page_header.css";

package/src/values/DateTime.vue

@@ -1,5 +1,5 @@
 <template>
-  {{ text }}
+  <span>{{ text }}</span>
 </template>
 
 <script lang="ts" setup>

package/src/values/{URL.vue → ExternalUrl.vue}

@@ -1,24 +1,25 @@
 <template>
   <a
-    :href="value"
+    :href="url"
     target="_blank"
-    rel="noopener noreferrer"
-    >{{ renderedText }}</a
-  >
+    rel="noopener noreferrer">
+    {{ renderedText }}
+    <i class="ti ti-external-link" />
+  </a>
 </template>
 
 <script lang="ts" setup>
   import {computed} from "vue";
   import type * as t from "@/logic/types";
 
-  const properties = defineProps<{value: t.URL; text?: string | null}>();
+  const properties = defineProps<{url: t.URL; text?: string | null}>();
 
   const renderedText = computed(() => {
     if (properties.text) {
       return properties.text;
     }
 
-    return properties.value;
+    return properties.url;
   });
 </script>
 

package/src/views/CollectionsView.vue

@@ -2,12 +2,9 @@
   <side-panel-layout :reload-button="false">
     <template #main-header> Collections </template>
 
-    <div class="ffun-info-attention">
-      <p
-        >We've prepared some ready-to-use thematic collections just for you. All the feeds in them are fully tagged
-        free of charge.</p
-      >
-      <p>Subscribe to some and enjoy the full power of Feeds Fun!</p>
+    <div class="ffun-info-common">
+      <p>We've prepared thematic collections just for you.</p>
+      <p>News from collections are always tagged, ensuring you get the full power of Feeds Fun!</p>
     </div>
 
     <div

package/src/views/DiscoveryView.vue

@@ -8,27 +8,25 @@
       :collections-notification_="false"
       :collections-warning_="true" />
 
-    <h2>Load feeds from an OPML file</h2>
+    <h3>Load feeds from an OPML file</h3>
 
-    <div class="ffun-info-good">
+    <div class="ffun-info-common">
       <p>
-        <a
-          href="https://en.wikipedia.org/wiki/OPML"
-          target="_blank"
-          >OPML</a
-        >
+        <external-url
+          url="https://en.wikipedia.org/wiki/OPML"
+          text="OPML" />
         is a widely-used format for transferring news feed lists between platforms.
       </p>
 
       <p
-        >Export your feeds from your old reader in OPML format and import them into our reader to seamlessly
-        transition!</p
+        >Export your feeds from your old reader in OPML format and import them into Feeds Fun to seamlessly
+        transition.</p
       >
     </div>
 
-    <opml-upload />
+    <opml-upload class="mt-4" />
 
-    <h2>Search for a feed</h2>
+    <h3>Search for a feed</h3>
 
     <discovery-form />
   </side-panel-layout>