improvement: address feedback

This commit is contained in:
Scott Wilson
2025-07-17 19:51:14 -07:00
parent cec15d6d51
commit a276d27451
@@ -2,6 +2,7 @@
import { useCallback, useRef, useState } from "react"; import { useCallback, useRef, useState } from "react";
import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons"; import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
export interface Version { export interface Version {
id?: string; id?: string;
@@ -452,7 +453,7 @@ const formatDeletedJson = (json: JsonValue): JSX.Element => {
{lines.map((line, lineIndex) => { {lines.map((line, lineIndex) => {
const lineKey = `deleted-${line.slice(0, 30)}-${lineIndex}`; const lineKey = `deleted-${line.slice(0, 30)}-${lineIndex}`;
return ( return (
<div key={lineKey} className="flex"> <div key={lineKey} className="flex w-fit">
<div className="w-4 flex-shrink-0">-</div> <div className="w-4 flex-shrink-0">-</div>
<div>{line}</div> <div>{line}</div>
</div> </div>
@@ -516,7 +517,7 @@ export const SecretVersionDiffView = ({
} }
oldVersionContent = ( oldVersionContent = (
<div className="font-mono text-sm"> <div className="w-fit font-mono text-sm">
{renderJsonWithDiffs( {renderJsonWithDiffs(
cleanOldVersion, cleanOldVersion,
diffPaths, diffPaths,
@@ -532,7 +533,7 @@ export const SecretVersionDiffView = ({
</div> </div>
); );
newVersionContent = ( newVersionContent = (
<div className="font-mono text-sm"> <div className="w-fit font-mono text-sm">
{renderJsonWithDiffs( {renderJsonWithDiffs(
cleanNewVersion, cleanNewVersion,
diffPaths, diffPaths,
@@ -572,19 +573,19 @@ export const SecretVersionDiffView = ({
if (item.isDeleted) { if (item.isDeleted) {
textStyle = "line-through text-red-300"; textStyle = "line-through text-red-300";
changeBadge = ( changeBadge = (
<span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium"> <span className="ml-2 whitespace-nowrap rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
{isSecret ? "Secret" : "Folder"} Deleted {isSecret ? "Secret" : "Folder"} Deleted
</span> </span>
); );
} else if (item.isAdded) { } else if (item.isAdded) {
changeBadge = ( changeBadge = (
<span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium"> <span className="ml-2 whitespace-nowrap rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
{isSecret ? "Secret" : "Folder"} Added {isSecret ? "Secret" : "Folder"} Added
</span> </span>
); );
} else if (item.isUpdated) { } else if (item.isUpdated) {
changeBadge = ( changeBadge = (
<span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium"> <span className="ml-2 whitespace-nowrap rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
{isSecret ? "Secret" : "Folder"} Updated {isSecret ? "Secret" : "Folder"} Updated
</span> </span>
); );
@@ -604,11 +605,14 @@ export const SecretVersionDiffView = ({
tabIndex={0} tabIndex={0}
aria-expanded={!collapsed} aria-expanded={!collapsed}
> >
<div className="flex items-center"> <div className="flex min-w-0 flex-1 items-center">
<span className={textStyle}>{key}</span> <p className={twMerge(textStyle, "truncate")}>{key}</p>
{changeBadge} {changeBadge}
</div> </div>
<FontAwesomeIcon icon={collapsed ? faChevronDown : faChevronUp} className="text-gray-400" /> <FontAwesomeIcon
icon={collapsed ? faChevronDown : faChevronUp}
className="ml-2 text-gray-400"
/>
</div> </div>
); );
}; };