frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

💅🏼 Prettified Library Table view

Browse Source
This commit is contained in:
Rishi Ghan
2025-07-22 23:34:01 -04:00
parent 2968987c6b
commit 3563fef461
3 changed files with 73 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/client/components/Library/Library.tsx
View File

@@ -152,10 +152,10 @@ export const Library = (): ReactElement => {
accessorKey: "_source.createdAt", accessorKey: "_source.createdAt",
cell: (info) => { cell: (info) => {
return !isNil(info.getValue()) ? ( return !isNil(info.getValue()) ? (
<div className="text-sm w-max ml-3 my-3 text-slate-600 dark:text-slate-900"> <span className="inline-flex items-center bg-slate-300 dark:bg-slate-500 text-xs font-medium text-slate-700 dark:text-slate-200 px-3 py-1 rounded-md shadow-sm whitespace-nowrap ml-3 my-3">
<p>{format(parseISO(info.getValue()), "dd MMMM, yyyy")} </p> <i className="icon-[solar--file-download-bold] w-4 h-4 mr-2 opacity-70" />
{format(parseISO(info.getValue()), "h aaaa")} {format(parseISO(info.getValue()), "dd MMM yyyy, h:mm a")}
</div> </span>
) : null; ) : null;
}, },
}, },
@@ -164,23 +164,25 @@ export const Library = (): ReactElement => {
accessorKey: "_source.acquisition", accessorKey: "_source.acquisition",
cell: (info) => ( cell: (info) => (
<div className="flex flex-col gap-2 ml-3 my-3"> <div className="flex flex-col gap-2 ml-3 my-3">
<span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400"> {/* DC++ Downloads */}
<span className="pr-1 pt-1"> {info.getValue().directconnect?.downloads?.length > 0 ? (
<i className="icon-[solar--folder-path-connect-bold-duotone] w-5 h-5"></i> <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
<i className="icon-[solar--folder-path-connect-bold-duotone] w-4 h-4 mr-1 opacity-70" />
<span>
DC++: {info.getValue().directconnect.downloads.length}
</span>
</span> </span>
<span className="text-md text-slate-900 dark:text-slate-900"> ) : null}
DC++: {info.getValue().directconnect.downloads.length}
</span>
</span>
<span className="inline-flex w-fit items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400"> {/* Torrent Downloads */}
<span className="pr-1 pt-1"> {info.getValue().torrent.length > 0 ? (
<i className="icon-[solar--magnet-bold-duotone] w-5 h-5"></i> <span className="inline-flex items-center whitespace-nowrap bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
<i className="icon-[solar--magnet-bold-duotone] w-4 h-4 mr-1 opacity-70" />
<span className="whitespace-nowrap">
Torrent: {info.getValue().torrent.length}
</span>
</span> </span>
<span className="text-md text-slate-900 dark:text-slate-900"> ) : null}
Torrent: {info.getValue().torrent.length}
</span>
</span>
</div> </div>
), ),
}, },

30
src/client/components/Search/Search.tsx
View File

@@ -271,23 +271,22 @@ export const Search = ({}: ISearchProps): ReactElement => {
return result.resource_type === "issue" ? ( return result.resource_type === "issue" ? (
<div <div
key={result.id} key={result.id}
className="relative flex items-start gap-4 py-6 border-b border-slate-300 dark:border-slate-700" className="relative flex gap-4 py-6 px-3 border-b border-slate-200 dark:border-slate-700 hover:bg-slate-100/50 dark:hover:bg-slate-800/30 transition-colors duration-150 group"
> >
{/* IMAGE */} {/* IMAGE */}
<Card <div className="flex-shrink-0">
orientation="cover-only" <Card
imageUrl={result?.image?.small_url} orientation="cover-only"
hasDetails={false} imageUrl={result.image.small_url}
cardContainerStyle={{ hasDetails={false}
width: "120px", cardContainerStyle={{ width: "120px", maxWidth: "150px" }}
maxWidth: "150px", />
}} </div>
/>
{/* RIGHT-SIDE CONTENT */} {/* RIGHT-SIDE CONTENT */}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
{/* TITLE */} {/* TITLE */}
<div className="text-base font-semibold text-gray-900 dark:text-white truncate"> <div className="text-base font-medium text-slate-800 dark:text-white tracking-tight truncate">
{result.volume?.name || <span>No Name</span>} {result.volume?.name || <span>No Name</span>}
</div> </div>
@@ -335,9 +334,10 @@ export const Search = ({}: ISearchProps): ReactElement => {
)} )}
</p> </p>
)} )}
{/* CTA BUTTON */} {/* CTA BUTTON */}
{result.volume.name ? ( {result.volume.name && (
<div className="mt-4 justify-self-end"> <div className="absolute bottom-4 right-4">
<PopoverButton <PopoverButton
content={`This will add ${result?.volume?.name} to your wanted list.`} content={`This will add ${result?.volume?.name} to your wanted list.`}
clickHandler={() => clickHandler={() =>
@@ -350,14 +350,14 @@ export const Search = ({}: ISearchProps): ReactElement => {
} }
/> />
</div> </div>
) : null} )}
</div> </div>
</div> </div>
) : ( ) : (
result.resource_type === "volume" && ( result.resource_type === "volume" && (
<div <div
key={result.id} key={result.id}
className="relative flex items-start gap-4 py-6 border-b border-slate-300 dark:border-slate-700" className="relative flex gap-4 py-6 px-3 border-b border-slate-200 dark:border-slate-700 hover:bg-slate-100/50 dark:hover:bg-slate-800/30 transition-colors duration-150 group"
> >
{/* LEFT COLUMN: COVER */} {/* LEFT COLUMN: COVER */}
<Card <Card

70
src/client/components/shared/MetadataPanel.tsx
View File

@@ -67,21 +67,21 @@ export const MetadataPanel = (props: MetadataPanelProps): ReactElement => {
{inferredMetadata.issue.number && ( {inferredMetadata.issue.number && (
<dd className="my-2"> <dd className="my-2">
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400"> <span className="inline-flex items-center bg-slate-100 dark:bg-slate-400 text-slate-800 dark:text-slate-900 text-xs font-medium px-2 py-1 rounded-md">
<i className="icon-[solar--hashtag-outline] w-3.5 h-3.5 pr-1 pt-1"></i> <i className="icon-[solar--hashtag-bold-duotone] w-4 h-4 mr-1 opacity-70"></i>
<span>{inferredMetadata.issue.number}</span> <span>{inferredMetadata.issue.number}</span>
</span> </span>
</dd> </dd>
)} )}
<dd className="flex flex-row gap-2 w-max"> <dd className="flex flex-row gap-2 w-max">
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400"> <span className="inline-flex items-center bg-slate-100 dark:bg-slate-400 text-slate-800 dark:text-slate-900 text-xs font-medium px-2 py-1 rounded-md">
<i className="icon-[solar--zip-file-bold-duotone] w-5 h-5 pr-1 pt-1" /> <i className="icon-[solar--file-text-bold-duotone] w-4 h-4 mr-1 opacity-70" />
{rawFileDetails.mimeType} {rawFileDetails.mimeType}
</span> </span>
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400"> <span className="inline-flex items-center bg-slate-100 dark:bg-slate-400 text-slate-800 dark:text-slate-900 text-xs font-medium px-2 py-1 rounded-md">
<i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5 pr-1 pt-1" /> <i className="icon-[solar--database-bold-duotone] w-4 h-4 mr-1 opacity-70" />
{prettyBytes(rawFileDetails.fileSize)} {prettyBytes(rawFileDetails.fileSize)}
</span> </span>
@@ -98,43 +98,48 @@ export const MetadataPanel = (props: MetadataPanelProps): ReactElement => {
{ {
name: "comicvine", name: "comicvine",
content: () => { content: () => {
console.log("comicvine:", comicvine);
console.log("volumeInformation:", comicvine?.volumeInformation);
return ( return (
!isUndefined(comicvine?.volumeInformation) && ( !isUndefined(comicvine?.volumeInformation) && (
<dl> <dl className="space-y-1 text-sm text-slate-700 dark:text-slate-200">
<dt> {/* Title */}
<h6 <dt className="text-base font-semibold text-slate-900 dark:text-white">
className="name has-text-weight-medium mb-1" {ellipsize(issueName, 28)}
style={props.titleStyle}
>
{ellipsize(issueName, 18)}
</h6>
</dt> </dt>
{/* Volume Name */}
<dd> <dd>
<span className="is-size-7"> <span className="text-sm text-slate-600 dark:text-slate-300">
Is a part of{" "} Part of{" "}
<span className="has-text-weight-semibold"> <span className="font-medium text-slate-800 dark:text-white">
{comicvine.volumeInformation.name} {comicvine.volumeInformation.name}
</span> </span>
</span> </span>
</dd> </dd>
<dd className="is-size-7">
<span> {/* Description */}
{ellipsize( <dd className="text-slate-600 dark:text-slate-300">
convert(comicvine.description || "", { {ellipsize(
baseElements: { selectors: ["p"] }, convert(comicvine.description || "", {
}), baseElements: { selectors: ["p"] },
120, }),
)} 160,
</span> )}
</dd> </dd>
<dd className="is-size-7 mt-2">
<span className="my-3 mx-2"> {/* Misc Info */}
<dd className="flex flex-wrap items-center gap-2 pt-2 text-xs text-slate-500 dark:text-slate-300">
<span className="inline-flex items-center bg-slate-100 dark:bg-slate-600 px-2 py-0.5 rounded-md">
<i className="icon-[solar--calendar-bold-duotone] w-4 h-4 mr-1 opacity-70" />
{comicvine.volumeInformation.start_year} {comicvine.volumeInformation.start_year}
</span> </span>
{comicvine.volumeInformation.count_of_issues} <span className="inline-flex items-center bg-slate-100 dark:bg-slate-600 px-2 py-0.5 rounded-md">
ComicVine ID: {comicvine.id} <i className="icon-[solar--book-bold-duotone] w-4 h-4 mr-1 opacity-70" />
{comicvine.volumeInformation.count_of_issues} issues
</span>
<span className="inline-flex items-center bg-slate-100 dark:bg-slate-600 px-2 py-0.5 rounded-md">
<i className="icon-[solar--hashtag-bold-duotone] w-4 h-4 mr-1 opacity-70" />
ID: {comicvine.id}
</span>
</dd> </dd>
</dl> </dl>
) )
@@ -187,6 +192,7 @@ export const MetadataPanel = (props: MetadataPanelProps): ReactElement => {
orientation="cover-only" orientation="cover-only"
hasDetails={false} hasDetails={false}
imageStyle={props.imageStyle} imageStyle={props.imageStyle}
cardContainerStyle={{ width: "190px", maxWidth: "230px" }}
/> />
<div>{metadataPanel?.content()}</div> <div>{metadataPanel?.content()}</div>
</div> </div>