feat: show thumbnail on article list

Fixes: #140

src-tauri/src/structs/article.rs

@@ -1,6 +1,7 @@
 use chrono::Utc;
 use feed_rs::model::Entry;
 use serde::Serialize;
+use crate::structs::image::Image;
 
 #[derive(Debug, Serialize)]
 pub struct Article {
@@ -9,6 +10,7 @@ pub struct Article {
     pub content: String,
     pub date: String,
     pub read: bool,
+    pub image: Option<Image>
 }
 
 impl From<Entry> for Article {
@@ -30,12 +32,31 @@ impl From<Entry> for Article {
             .unwrap_or_else(|| entry.updated.unwrap_or_else(|| Utc::now()))
             .to_rfc3339();
 
+
+
+        let image = if entry.media.is_empty() {
+            None
+        } else {
+            let media = entry.media.iter().filter(|m| !m.thumbnails.is_empty()).next();
+            match media {
+                Some(m) => {
+                    let thumbnail = m.thumbnails.iter().next();
+                    match thumbnail {
+                        Some(t) => Some(Image::from(t.image.clone())),
+                        None => None
+                    }
+                },
+                None => None
+            }
+        };
+
         Article {
             id,
             title,
             content,
             date,
             read: false,
+            image,
         }
     }
 }

src-tauri/src/structs/image.rs

@@ -3,7 +3,6 @@ use serde::Serialize;
 #[derive(Debug, Serialize)]
 pub struct Image {
     pub uri: String,
-    pub title: Option<String>,
     pub width: Option<u32>,
     pub height: Option<u32>,
     pub description: Option<String>,
@@ -13,7 +12,6 @@ impl From<feed_rs::model::Image> for Image {
     fn from(image: feed_rs::model::Image) -> Self {
         Image {
             uri: image.uri,
-            title: image.title,
             width: image.width,
             height: image.height,
             description: image.description,

src/components/layout/Article.tsx

@@ -4,6 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import useActiveFeed from '../../hooks/useActiveFeed';
 import useDataDispatch from '../../hooks/useDataDispatch';
+import usePreference from '../../hooks/usePreference';
 import useViewDispatch from '../../hooks/useViewDispatch';
 import { READ_ARTICLE } from '../../state/data/DataActionType';
 import { SET_ACTIVE_ARTICLE } from '../../state/view/ViewActionType';
@@ -13,9 +14,17 @@ interface ArticleProps extends ArticleType {
   active: boolean;
 }
 
-function Article({ identifier, title, date, read, active }: ArticleProps) {
+function Article({
+  identifier,
+  title,
+  date,
+  read,
+  image,
+  active,
+}: ArticleProps) {
   const navigate = useNavigate();
   const location = useLocation();
+  const { showArticleThumbnails } = usePreference();
   const viewDispatch = useViewDispatch();
   const dataDispatch = useDataDispatch();
   const feed = useActiveFeed();
@@ -40,11 +49,12 @@ function Article({ identifier, title, date, read, active }: ArticleProps) {
     navigate,
     viewDispatch,
   ]);
+  console.log(image);
 
   return (
     <div
       className={clsx(
-        'flex justify-between items-center text-xl p-3 font-bold border-l-[3px] cursor-pointer transition-all duration-300 hover:pl-6 hover:bg-neutral-100 hover:dark:bg-neutral-600',
+        'flex justify-between items-center gap-2 text-lg p-3 font-bold border-l-[3px] cursor-pointer hover:bg-neutral-100 hover:dark:bg-neutral-600',
         read
           ? 'border-neutral-50 dark:border-neutral-700 hover:border-neutral-100 dark:hover:border-neutral-600'
           : 'border-orange-400',
@@ -53,10 +63,21 @@ function Article({ identifier, title, date, read, active }: ArticleProps) {
       )}
       onClick={selectArticle}
     >
-      <div className="text-black dark:text-white">
-        {title.length > 40 ? `${title.slice(0, 40)}...` : title}
+      <div className="flex items-center text-black dark:text-white transition-all duration-300 hover:pl-6 h-12">
+        {/* Hacky way to preserve emojis */}
+        {title.length > 35 ? `${[...title].slice(0, 35).join('')}...` : title}
+      </div>
+
+      <div className="flex items-center text-orange-400 text-xl flex gap-4 flex-nowrap">
+        {showArticleThumbnails && image !== null && (
+          <img
+            src={image.uri}
+            alt={image.description ?? ''}
+            className="w-12 h-12 object-cover rounded-full"
+          />
+        )}
+        {date.toLocaleDateString()}
       </div>
-      <div className="text-orange-400 text-xl">{date.toLocaleDateString()}</div>
     </div>
   );
 }

src/components/layout/FeedIcon.tsx

@@ -13,7 +13,7 @@ interface FeedIconProps {
 const ImageIcon = styled.img`
   width: 2rem;
   height: 2rem;
-  border-radius: 50%;
+  border-radius: 9999px;
   object-fit: cover;
   object-position: center;
 `;

src/components/modal/PreferenceModal.tsx

@@ -31,7 +31,14 @@ function PreferenceModal() {
     useModal<PreferenceState>(modalIdentifier);
 
   const defaultForm = useMemo(
-    () => (isStateEmpty ? { darkMode: false, showFeedIcons: false } : state),
+    () =>
+      isStateEmpty
+        ? {
+            darkMode: false,
+            showFeedIcons: false,
+            showArticleThumbnails: false,
+          }
+        : state,
     [isStateEmpty, state],
   );
 
@@ -78,6 +85,14 @@ function PreferenceModal() {
           value={form.showFeedIcons}
           onChange={(showFeedIcons) => setForm({ ...form, showFeedIcons })}
         />
+        <Switch
+          label="Show article thumbnails"
+          name="showArticleThumbnails"
+          value={form.showArticleThumbnails}
+          onChange={(showArticleThumbnails) =>
+            setForm({ ...form, showArticleThumbnails })
+          }
+        />
 
         <div className={clsx('mt-4 flex justify-between flex-row-reverse')}>
           <Form.Submit asChild>

src/data/transformers/v2.ts

@@ -9,6 +9,10 @@ export default {
         feeds: backup.state.feeds.map((feed) => ({
           ...feed,
           image: null,
+          articles: feed.articles.map((article) => ({
+            ...article,
+            image: null,
+          })),
         })),
       },
     };

src/state/preference/PreferenceReducer.ts

@@ -8,11 +8,13 @@ import { SetPreferencesAction } from './actions/GeneralActions';
 export interface PreferenceState {
   darkMode: boolean;
   showFeedIcons: boolean;
+  showArticleThumbnails: boolean;
 }
 
 export const initialPreferenceState: PreferenceState = {
   darkMode: true,
   showFeedIcons: true,
+  showArticleThumbnails: true,
 };
 
 export type PreferenceActions = SetPreferencesAction;

src/state/preference/actions/GeneralActions.ts

@@ -14,4 +14,5 @@ export function setPreferences(
 ) {
   draft.darkMode = payload.darkMode;
   draft.showFeedIcons = payload.showFeedIcons;
+  draft.showArticleThumbnails = payload.showArticleThumbnails;
 }

src/types/Article.ts

@@ -1,7 +1,10 @@
+import ImageStructure from './ImageStructure';
+
 export default interface Article {
   identifier: string;
   title: string;
   content: string;
   date: Date;
   read: boolean;
+  image: ImageStructure | null;
 }

src/types/SyncResponse.ts

@@ -7,6 +7,7 @@ export interface ArticleResponse {
   content: string;
   date: string;
   read: boolean;
+  image: ImageStructure | null;
 }
 
 export default interface SyncResponse {

src/utils/articleMapper.ts

@@ -1,17 +1,20 @@
 import { xxHash32 } from 'js-xxhash';
 
+import Article from '../types/Article';
 import { ArticleResponse } from '../types/SyncResponse';
 
 export default function articleMapper({
   id,
   title,
   content,
   date,
-}: ArticleResponse) {
+  image,
+}: ArticleResponse): Article {
   return {
     identifier: xxHash32(id).toString(16),
     title,
     content,
+    image,
     read: false,
     date: new Date(date),
   };