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

🧾 Modernizing tables

Browse Source
This commit is contained in:
Rishi Ghan
2025-06-03 22:33:49 -04:00
parent f3333b5c2c
commit c0b189c9e6
3 changed files with 45 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/client/components/ComicDetail/AcquisitionPanel.tsx
View File

@@ -294,25 +294,25 @@ export const AcquisitionPanel = (
{/* AirDC++ results */} {/* AirDC++ results */}
<div className=""> <div className="">
{!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? ( {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
<div className="overflow-x-auto max-w-full mt-4 rounded-lg border border-gray-200 dark:border-gray-500"> <div className="overflow-x-auto max-w-full mt-6">
<table className="w-full table-auto divide-y-2 divide-gray-200 dark:divide-gray-500 text-md"> <table className="w-full table-auto text-sm text-gray-900 dark:text-slate-100">
<thead> <thead>
<tr> <tr className="border-b border-gray-300 dark:border-slate-700">
<th className="whitespace-nowrap px-2 py-2 font-medium text-gray-900 dark:text-slate-200"> <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
Name Name
</th> </th>
<th className="whitespace-nowrap px-2 py-2 font-medium text-gray-900 dark:text-slate-200"> <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
Type Type
</th> </th>
<th className="whitespace-nowrap px-2 py-2 font-medium text-gray-900 dark:text-slate-200"> <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
Slots Slots
</th> </th>
<th className="whitespace-nowrap px-2 py-2 font-medium text-gray-900 dark:text-slate-200"> <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
Actions Actions
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-slate-100 dark:divide-gray-500"> <tbody>
{map( {map(
airDCPPSearchResults, airDCPPSearchResults,
({ dupe, type, name, id, slots, users, size }, idx) => ( ({ dupe, type, name, id, slots, users, size }, idx) => (
@@ -320,8 +320,8 @@ export const AcquisitionPanel = (
key={idx} key={idx}
className={ className={
!isNil(dupe) !isNil(dupe)
? "bg-gray-100 dark:bg-gray-700" ? "border-b border-gray-200 dark:border-slate-700 bg-gray-100 dark:bg-gray-700"
: "text-sm" : "border-b border-gray-200 dark:border-slate-700 text-sm"
} }
> >
{/* NAME */} {/* NAME */}

57
src/client/components/ComicDetail/AirDCPPBundles.tsx
View File

@@ -3,46 +3,55 @@ import prettyBytes from "pretty-bytes";
import dayjs from "dayjs"; import dayjs from "dayjs";
import ellipsize from "ellipsize"; import ellipsize from "ellipsize";
import { map } from "lodash"; import { map } from "lodash";
import {DownloadProgressTick} from "./DownloadProgressTick" import { DownloadProgressTick } from "./DownloadProgressTick";
export const AirDCPPBundles = (props) => { export const AirDCPPBundles = (props) => {
return ( return (
<div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200"> <div className="overflow-x-auto w-fit mt-6">
<table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md"> <table className="min-w-full text-sm text-gray-900 dark:text-slate-100">
<thead> <thead>
<tr> <tr className="border-b border-gray-300 dark:border-slate-700">
<th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200"> <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
Filename Filename
</th> </th>
<th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200"> <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
Size Size
</th> </th>
<th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200"> <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
Download Time Download Status
</th> </th>
<th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200"> <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
Bundle ID Bundle ID
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-200"> <tbody>
{map(props.data, (bundle) => ( {map(props.data, (bundle, index) => (
<tr key={bundle.id} className="text-sm"> <tr
<td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300"> key={bundle.id}
<h5>{ellipsize(bundle.name, 58)}</h5> className={
<span className="text-xs">{ellipsize(bundle.target, 88)}</span> Number(index) !== props.data.length - 1
? "border-b border-gray-200 dark:border-slate-700"
: ""
}
>
<td className="px-3 py-2 align-top">
<h5 className="font-medium text-gray-800 dark:text-slate-200">
{ellipsize(bundle.name, 58)}
</h5>
<p className="text-xs text-gray-500 dark:text-slate-400">
{ellipsize(bundle.target, 88)}
</p>
</td> </td>
<td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300"> <td className="px-3 py-2 align-top">
{prettyBytes(bundle.size)} {prettyBytes(bundle.size)}
</td> </td>
<td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300"> <td className="px-3 py-2 align-top">
{dayjs <DownloadProgressTick bundleId={bundle.id} />
.unix(bundle.time_finished)
.format("h:mm on ddd, D MMM, YYYY")}
{/* Download progress */}
<DownloadProgressTick bundleId={bundle.id} />
</td> </td>
<td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300"> <td className="px-3 py-2 align-top">
<span className="tag is-warning">{bundle.id}</span> <span className="text-xs text-yellow-800 dark:text-yellow-300 font-medium">
{bundle.id}
</span>
</td> </td>
</tr> </tr>
))} ))}

7
src/client/components/ComicDetail/DownloadProgressTick.tsx
View File

@@ -91,7 +91,7 @@ export const DownloadProgressTick: React.FC<DownloadProgressTickProps> = ({
}, [socketRef, bundleId]); }, [socketRef, bundleId]);
if (!tick) { if (!tick) {
return null; return <>Nothing detected.</>;
} }
// Compute human-readable values and percentages // Compute human-readable values and percentages
@@ -105,9 +105,6 @@ export const DownloadProgressTick: React.FC<DownloadProgressTickProps> = ({
return ( return (
<div className="mt-2 p-2 border rounded-md bg-white shadow-sm"> <div className="mt-2 p-2 border rounded-md bg-white shadow-sm">
{/* File name */}
<h5 className="text-md font-medium truncate">{tick.name}</h5>
{/* Downloaded vs Total */} {/* Downloaded vs Total */}
<div className="mt-1 flex items-center space-x-2"> <div className="mt-1 flex items-center space-x-2">
<span className="text-sm text-gray-700">{downloaded} of {total}</span> <span className="text-sm text-gray-700">{downloaded} of {total}</span>
@@ -123,7 +120,7 @@ export const DownloadProgressTick: React.FC<DownloadProgressTickProps> = ({
<div className="mt-1 text-xs text-gray-600">{percent}% complete</div> <div className="mt-1 text-xs text-gray-600">{percent}% complete</div>
{/* Speed and Time Left */} {/* Speed and Time Left */}
<div className="mt-2 flex space-x-4 text-sm text-gray-600"> <div className="mt-2 flex space-x-4 text-xs text-gray-600">
<span>Speed: {speed}</span> <span>Speed: {speed}</span>
<span>Time left: {minutesLeft} min</span> <span>Time left: {minutesLeft} min</span>
</div> </div>