From d465d6441ffa252fbc3671455c0ccb204b9d5b02 Mon Sep 17 00:00:00 2001
From: Zak Nesler <zak@nesler.dev>
Date: Thu, 23 May 2024 14:07:35 -0400
Subject: [PATCH] render html and display title

---
 ui/src/components/entry/entry-item.tsx | 6 ++++--
 ui/src/components/entry/entry-view.tsx | 5 ++++-
 ui/src/components/feed/feed-info.tsx   | 2 +-
 ui/src/components/feed/feed-item.tsx   | 2 +-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/entry/entry-item.tsx b/ui/src/components/entry/entry-item.tsx
index 9f55b59e..64b91db3 100644
--- a/ui/src/components/entry/entry-item.tsx
+++ b/ui/src/components/entry/entry-item.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable solid/no-innerhtml */
+
 import { A, AnchorProps, useMatch } from '@solidjs/router';
 import { createQuery } from '@tanstack/solid-query';
 import { cx } from 'class-variance-authority';
@@ -54,7 +56,7 @@ export const EntryItem: Component<EntryItemProps> = props => {
       )}
       {...rest}
     >
-      <h4 class="text-pretty text-base/5 md:text-sm xl:text-base/5">{local.entry.title}</h4>
+      <h4 class="text-pretty text-base/5 md:text-sm xl:text-base/5" innerHTML={local.entry.title} />
 
       <small
         class={cx(
@@ -73,7 +75,7 @@ export const EntryItem: Component<EntryItemProps> = props => {
 
         {!filter.params.feed_uuid && (
           <>
-            <span class="truncate break-all font-medium">{feed()?.title}</span>
+            <span class="truncate break-all font-medium">{feed()?.title_display || feed()?.title}</span>
             {!!getDate() && <span class="opacity-50">&ndash;</span>}
           </>
         )}
diff --git a/ui/src/components/entry/entry-view.tsx b/ui/src/components/entry/entry-view.tsx
index ad654a18..73e726cd 100644
--- a/ui/src/components/entry/entry-view.tsx
+++ b/ui/src/components/entry/entry-view.tsx
@@ -33,7 +33,10 @@ export const EntryView: ParentComponent<EntryViewProps> = props => {
       )}
 
       <article class="flex flex-col gap-4">
-        <h1 class="text-balance text-xl font-bold text-gray-800 lg:text-2xl dark:text-gray-100">{local.entry.title}</h1>
+        <h1
+          class="text-balance text-xl font-bold text-gray-800 lg:text-2xl dark:text-gray-100"
+          innerHTML={local.entry.title}
+        />
 
         {!!getDate() && <div class="text-sm text-gray-500 dark:text-gray-400">{formatDateTime(getDate()!)}</div>}
 
diff --git a/ui/src/components/feed/feed-info.tsx b/ui/src/components/feed/feed-info.tsx
index fd66f4fb..3d727057 100644
--- a/ui/src/components/feed/feed-info.tsx
+++ b/ui/src/components/feed/feed-info.tsx
@@ -31,7 +31,7 @@ export const FeedInfo: Component<FeedInfoProps> = props => {
 
       <Match when={feed.isSuccess}>
         <div class="flex w-full items-start justify-between">
-          <FeedHeader title={feed.data?.title} subtitle={feed.data?.url_feed} />
+          <FeedHeader title={feed.data?.title_display || feed.data?.title} subtitle={feed.data?.url_feed} />
 
           <MenuFeed
             uuid={props.uuid}
diff --git a/ui/src/components/feed/feed-item.tsx b/ui/src/components/feed/feed-item.tsx
index d41d03b0..bcc2a198 100644
--- a/ui/src/components/feed/feed-item.tsx
+++ b/ui/src/components/feed/feed-item.tsx
@@ -30,7 +30,7 @@ export const FeedItem: Component<FeedItemProps> = props => {
   return (
     <BaseFeedItem
       href={getPath().concat(filter.getQueryString())}
-      title={props.feed.title}
+      title={props.feed.title_display || props.feed.title}
       open={open()}
       active={isActive()}
       setOpen={setOpen}