OASIS_MOBILE/src/views/favorites_view.js

const { form, button, div, h2, p, section, input, a, span, img } = require("../server/node_modules/hyperaxe");

const { template, i18n, userLink, renderContentActions } = require("./main_views");
const moment = require("../server/node_modules/moment");
const { config } = require("../server/SSB_server.js");
const { renderUrl } = require("../backend/renderUrl");

const userId = config.keys.id;

const safeArr = (v) => (Array.isArray(v) ? v : []);
const safeText = (v) => String(v || "").trim();

const buildReturnTo = (filter) => {
  const f = safeText(filter || "all");
  return `/favorites?filter=${encodeURIComponent(f)}`;
};

const renderTags = (tags) => {
  const list = safeArr(tags).map((t) => String(t || "").trim()).filter(Boolean);
  return list.length
    ? div(
        { class: "card-tags" },
        list.map((tag) => a({ href: `/search?query=%23${encodeURIComponent(tag)}`, class: "tag-link" }, `#${tag}`))
      )
    : null;
};

const renderBookmarkUrl = (item) => {
  if (item.kind !== "bookmarks") return null;
  if (!item.url) return null;
  return p(
    a(
      { href: item.url, target: "_blank", rel: "noreferrer noopener", class: "bookmark-url" },
      item.url
    )
  );
};

const renderImagePreview = (item) => {
  if (item.kind !== "images") return null;
  if (!item.url) return null;

  return div(
    { class: "image-container" },
    a(
      { href: item.viewHref },
      img({
        src: `/image/256/${encodeURIComponent(item.url)}`,
        alt: item.title || "",
        class: "media-preview",
        loading: "lazy"
      })
    )
  );
};

const renderFavoriteCard = (item, filter) => {
  const returnTo = buildReturnTo(filter);

  const title = safeText(item.title) || safeText(item.name) || safeText(item.category) || safeText(item.url) || "";

  const ts = item.updatedAt || item.createdAt;
  const absDate = ts ? moment(ts).format("YYYY/MM/DD HH:mm:ss") : "";

  const isOwn = item.author && String(item.author) === String(userId);
  return div(
    { class: "trending-card favorites-card" + (isOwn ? " own-content" : "") },
    div(
      { class: "card-header activity-card-header" },
      div({ class: 'card-chips-row' },
        span({ class: 'pm-exposition-chip pm-exposition-whole' },
          span({ class: 'pm-exposition-text' }, String(item.kind || '').toUpperCase())
        )
      ),
      renderContentActions(item.favId, item.viewHref)
    ),
    div(
      { class: "card-section favorites-card-body" },
      div(
        { class: "bookmark-topbar" },
        div(
          { class: "bookmark-topbar-left" },
          form(
            {
              method: "POST",
              action: `/favorites/remove/${encodeURIComponent(item.kind)}/${encodeURIComponent(item.favId)}`,
              class: "bookmark-favorite-form"
            },
            input({ type: "hidden", name: "returnTo", value: returnTo }),
            button({ type: "submit", class: "filter-btn" }, i18n.favoritesRemoveButton)
          )
        )
      ),
      title ? h2(title) : null,
      renderImagePreview(item),
      renderBookmarkUrl(item),
      safeText(item.description) ? p(...renderUrl(item.description)) : null,
      renderTags(item.tags),
      p(
        { class: "card-footer" },
        absDate ? span({ class: "date-link" }, `${absDate} ${i18n.performed} `) : "",
        item.author ? userLink(item.author) : ""
      )
    )
  );
};

exports.favoritesView = async (items, filter = "all", counts = {}) => {
  const c = counts || {};
  const total = typeof c.all === "number" ? c.all : safeArr(items).length;

  return template(
    i18n.favoritesTitle,
    section(
      div({ class: "tags-header" }, h2(i18n.favoritesTitle), p(i18n.favoritesDescription)),
      div(
        { class: "filters" },
        form(
          { method: "GET", action: "/favorites", class: "ui-toolbar ui-toolbar--filters" },
          button(
            { type: "submit", name: "filter", value: "all", class: filter === "all" ? "filter-btn active" : "filter-btn" },
            `${i18n.favoritesFilterAll} (${total})`
          ),
          button(
            { type: "submit", name: "filter", value: "recent", class: filter === "recent" ? "filter-btn active" : "filter-btn" },
            `${i18n.favoritesFilterRecent} (${total})`
          ),
          button(
            { type: "submit", name: "filter", value: "audios", class: filter === "audios" ? "filter-btn active" : "filter-btn" },
            `${i18n.favoritesFilterAudios} (${c.audios || 0})`
          ),
          button(
            { type: "submit", name: "filter", value: "bookmarks", class: filter === "bookmarks" ? "filter-btn active" : "filter-btn" },
            `${i18n.favoritesFilterBookmarks} (${c.bookmarks || 0})`
          ),
          button(
            { type: "submit", name: "filter", value: "documents", class: filter === "documents" ? "filter-btn active" : "filter-btn" },
            `${i18n.favoritesFilterDocuments} (${c.documents || 0})`
          ),
          button(
            { type: "submit", name: "filter", value: "images", class: filter === "images" ? "filter-btn active" : "filter-btn" },
            `${i18n.favoritesFilterImages} (${c.images || 0})`
          ),
          button(
            { type: "submit", name: "filter", value: "maps", class: filter === "maps" ? "filter-btn active" : "filter-btn" },
            `${i18n.favoritesFilterMaps} (${c.maps || 0})`
          ),
          button(
            { type: "submit", name: "filter", value: "pads", class: filter === "pads" ? "filter-btn active" : "filter-btn" },
            `${i18n.favoritesFilterPads || "PADS"} (${c.pads || 0})`
          ),
          button(
            { type: "submit", name: "filter", value: "chats", class: filter === "chats" ? "filter-btn active" : "filter-btn" },
            `${i18n.favoritesFilterChats || "CHATS"} (${c.chats || 0})`
          ),
          button(
            { type: "submit", name: "filter", value: "calendars", class: filter === "calendars" ? "filter-btn active" : "filter-btn" },
            `${i18n.favoritesFilterCalendars || "CALENDARS"} (${c.calendars || 0})`
          ),
          button(
            { type: "submit", name: "filter", value: "videos", class: filter === "videos" ? "filter-btn active" : "filter-btn" },
            `${i18n.favoritesFilterVideos} (${c.videos || 0})`
          ),
          button(
            { type: "submit", name: "filter", value: "torrents", class: filter === "torrents" ? "filter-btn active" : "filter-btn" },
            `${i18n.favoritesFilterTorrents || "TORRENTS"} (${c.torrents || 0})`
          ),
          button(
            { type: "submit", name: "filter", value: "market", class: filter === "market" ? "filter-btn active" : "filter-btn" },
            `${i18n.favoritesFilterMarket || "MARKET"} (${c.market || 0})`
          ),
          button(
            { type: "submit", name: "filter", value: "shopProducts", class: filter === "shopProducts" ? "filter-btn active" : "filter-btn" },
            `${i18n.favoritesFilterShopProducts || "SHOP ITEMS"} (${c.shopProducts || 0})`
          )
        )
      ),
      div({ class: "bookmark-list" }, safeArr(items).length ? safeArr(items).map((it) => renderFavoriteCard(it, filter)) : p(i18n.favoritesNoItems))
    )
  );
};