mirror of
https://github.com/thegeneralist01/archivr
synced 2026-07-21 18:55:36 +02:00
feat(ui): show website favicon in entry list for webpage entries
This commit is contained in:
parent
1206d7103d
commit
1239ad9f34
3 changed files with 27 additions and 3 deletions
|
|
@ -164,6 +164,7 @@ export default function App() {
|
||||||
entries={entries}
|
entries={entries}
|
||||||
selectedEntryUid={selectedEntryUid}
|
selectedEntryUid={selectedEntryUid}
|
||||||
onSelectEntry={selectEntry}
|
onSelectEntry={selectEntry}
|
||||||
|
archiveId={archiveId}
|
||||||
tagFilter={tagFilter}
|
tagFilter={tagFilter}
|
||||||
onClearTagFilter={handleClearTagFilter}
|
onClearTagFilter={handleClearTagFilter}
|
||||||
searchQuery={searchQuery}
|
searchQuery={searchQuery}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import EntryRow from './EntryRow';
|
import EntryRow from './EntryRow';
|
||||||
|
|
||||||
export default function EntriesView({ entries, selectedEntryUid, onSelectEntry }) {
|
export default function EntriesView({ entries, selectedEntryUid, onSelectEntry, archiveId }) {
|
||||||
return (
|
return (
|
||||||
<section id="archive-view" className="view is-active">
|
<section id="archive-view" className="view is-active">
|
||||||
<div className="entry-table">
|
<div className="entry-table">
|
||||||
|
|
@ -16,6 +16,7 @@ export default function EntriesView({ entries, selectedEntryUid, onSelectEntry }
|
||||||
<EntryRow
|
<EntryRow
|
||||||
key={entry.entry_uid}
|
key={entry.entry_uid}
|
||||||
entry={entry}
|
entry={entry}
|
||||||
|
archiveId={archiveId}
|
||||||
isSelected={entry.entry_uid === selectedEntryUid}
|
isSelected={entry.entry_uid === selectedEntryUid}
|
||||||
onSelect={() => onSelectEntry(entry)}
|
onSelect={() => onSelectEntry(entry)}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,28 @@
|
||||||
|
import { useState } from 'react';
|
||||||
import { formatTimestamp, formatBytes, valueText, sourceIconSvg } from '../utils';
|
import { formatTimestamp, formatBytes, valueText, sourceIconSvg } from '../utils';
|
||||||
|
|
||||||
export default function EntryRow({ entry, isSelected, onSelect }) {
|
export default function EntryRow({ entry, archiveId, isSelected, onSelect }) {
|
||||||
|
const [favFailed, setFavFailed] = useState(false);
|
||||||
|
const showFavicon =
|
||||||
|
entry.source_kind === 'web' &&
|
||||||
|
entry.entity_kind === 'page' &&
|
||||||
|
entry.has_favicon &&
|
||||||
|
archiveId &&
|
||||||
|
!favFailed;
|
||||||
|
|
||||||
|
const icon = showFavicon ? (
|
||||||
|
<img
|
||||||
|
src={`/api/archives/${archiveId}/entries/${entry.entry_uid}/favicon`}
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
alt=""
|
||||||
|
onError={() => setFavFailed(true)}
|
||||||
|
style={{ objectFit: 'contain' }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<span dangerouslySetInnerHTML={{ __html: sourceIconSvg(entry.source_kind) }} />
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={isSelected ? 'is-selected' : undefined}
|
className={isSelected ? 'is-selected' : undefined}
|
||||||
|
|
@ -11,7 +33,7 @@ export default function EntryRow({ entry, isSelected, onSelect }) {
|
||||||
>
|
>
|
||||||
<div className="col-added">{formatTimestamp(entry.archived_at)}</div>
|
<div className="col-added">{formatTimestamp(entry.archived_at)}</div>
|
||||||
<div className="col-title">
|
<div className="col-title">
|
||||||
<span className="source-icon" dangerouslySetInnerHTML={{ __html: sourceIconSvg(entry.source_kind) }} />
|
<span className="source-icon">{icon}</span>
|
||||||
<span className="entry-title">{valueText(entry.title) || valueText(entry.entry_uid)}</span>
|
<span className="entry-title">{valueText(entry.title) || valueText(entry.entry_uid)}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-type">
|
<div className="col-type">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue