feat:Dim Quote Headers and Add Author Metadata

Author: TannPat

src/ps/commands/quotes.tsx

@@ -20,7 +20,7 @@ import type { PSMessage } from '@/types/ps';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
 type IndexedQuoteModel = [index: number, quote: QuoteModel];
-type QuoteCollection = [index: number, quote: string, addedBy?: string, dateAdded?: string][];
+type QuoteCollection = {index: number, quote: string, addedBy?: string, dateAdded?: string}[];
 
 const PAGE_SIZE = 50;
 const MAX_QUOTE_LENGTH = (MAX_CHAT_HTML_LENGTH / PAGE_SIZE) * 2; // Leniency margin of 2x
@@ -170,7 +170,7 @@ function FormatQuote({
 	const quoteLines = quote.split('\n');
 	return (
 		<>
-			<div style={{ opacity: 0.6 }}>{header}</div>
+			<div style={{ opacity: 0.78 }}>{header}</div>
 			<div style={{ marginLeft: 12 }}>
 				{quoteLines.length > 5 ? (
 					<details className="readmore">
@@ -192,7 +192,7 @@ function FormatQuote({
 					quoteLines.map(line => <FormatQuoteLine line={line} psUsernameTag={psUsernameTag} />)
 				)}
 			</div>
-			<div style={{ fontSize: 10, opacity: 0.8, marginTop: 6 }}>
+			<div style={{ fontSize: 10, opacity: 0.6, marginTop: 6 }}>
 				Added by {addedBy} on {dateAdded}
 			</div>
 		</>
@@ -235,8 +235,8 @@ function MultiQuotes({
 	})}${total > list.length ? ` of ${total} total` : ''})`;
 	const title = baseTitle ? `${baseTitle} ${suffix}` : pageNum ? `Page ${pageNum} of ${pageCount} ${suffix}` : `All Quotes`;
 	const quotes = list
-		.map(([header, quote, addedBy, dateAdded]) => (
-			<FormatQuote quote={quote} header={`#${header}`} addedBy={addedBy ?? ''} dateAdded={dateAdded ?? ''} />
+		.map( quote => (
+			<FormatQuote quote={quote.quote} header={`#${quote.index}`} addedBy={quote.addedBy ?? ''} dateAdded={quote.dateAdded ?? ''} />
 		))
 		.space(<hr />, !useDropdown);
 
@@ -399,7 +399,12 @@ export const command: PSCommand = {
 				const foundQuotes: QuoteCollection = searchQuotes(
 					quotes.map<IndexedQuoteModel>((quote, index) => [index + 1, quote]),
 					arg
-				).map(([index, quote]) => [index, quote.quote, quote.addedBy, new Date(quote.at).toDateString()]);
+				).map(([index, quote]) => ({
+					index,
+					quote: quote.quote,
+					addedBy: quote.addedBy,
+					dateAdded: new Date(quote.at).toDateString(),
+				}));
 
 				if (!foundQuotes.length) return broadcast($T('COMMANDS.QUOTES.NO_QUOTES_FOUND'));
 
@@ -457,7 +462,12 @@ export const command: PSCommand = {
 				const endIndex = startIndex + PAGE_SIZE;
 				const pagedQuotes: QuoteCollection = quotes
 					.slice(startIndex, endIndex)
-					.map((quote, index) => [startIndex + index + 1, quote.quote, quote.addedBy, new Date(quote.at).toDateString()]);
+					.map((quote, index) => ({
+						index: startIndex + index + 1, 
+						quote: quote.quote, 
+						addedBy: quote.addedBy, 
+						dateAdded: new Date(quote.at).toDateString()
+					}));
 
 				if (!pagedQuotes.length) throw new ChatError('Invalid page number.' as ToTranslate);
 
@@ -488,7 +498,12 @@ export const command: PSCommand = {
 				const endIndex = startIndex + PAGE_SIZE;
 				const pageQuotes: QuoteCollection = quotes
 					.slice(startIndex, endIndex)
-					.map((quote, index) => [startIndex + index + 1, quote.quote, quote.addedBy, new Date(quote.at).toDateString()]);
+					.map((quote, index) => ({
+						index: startIndex + index + 1, 
+						quote: quote.quote, 
+						addedBy: quote.addedBy, 
+						dateAdded: new Date(quote.at).toDateString()
+					}));
 
 				if (!pageQuotes.length) throw new ChatError('Invalid page number.' as ToTranslate);