CommunityRule/community-rule
2
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Pin the review card description under the sections and tint the card from the uploaded logo.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilalloandCursor committed 2026-09-28 15:46:45 -06:00
1 parent 2653ae4602
commit 56adcd59fd
10 files changed
+508 -42
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/cards/Rule/Rule.view.tsx
+56 -38
View File
@@ -35,6 +35,8 @@ export function RuleView({
recommended = false,
templateGridFigmaShell = false,
fluidWidth = false,
descriptionAtBottom = false,
surfaceColor,
cardAriaLabel,
recommendedLabel,
}: RuleViewProps) {
@@ -267,8 +269,58 @@ export function RuleView({
}
const cardClassName = `${backgroundColor} ${cardPadding} ${cardGap} ${borderRadiusClass} shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] ${interactiveCard ? "hover:shadow-[0px_0px_64px_0px_rgba(0,0,0,0.15)] transition-shadow duration-200" : ""} flex flex-col items-start justify-center relative ${cardWidth || "w-full"} ${href ? "no-underline text-inherit" : ""} ${className || ""}`;
const surfaceStyle = surfaceColor
? { backgroundColor: surfaceColor }
: undefined;
const isLinkCard = Boolean(href) && interactiveCard;
const hasCategories = Boolean(categories && categories.length > 0);
const expandedDescriptionFrameClass = [
"relative w-full shrink-0",
hasCategories
? descriptionAtBottom
? "border-t border-solid border-[var(--color-content-invert-primary)] pt-[16px]"
: "border-b border-solid border-[var(--color-content-invert-primary)] pb-[16px]"
: "",
isLarge || isMedium ? "px-0" : "px-[12px]",
]
.filter(Boolean)
.join(" ");
const showExpandedDescription = Boolean(
description ||
(onDescriptionClick && typeof descriptionEmptyHint === "string"),
);
const expandedDescription = showExpandedDescription ? (
<div className={expandedDescriptionFrameClass}>
{onDescriptionClick ? (
<InlineTextButton
type="button"
underline={false}
data-testid="rule-description-edit"
ariaLabel={descriptionEditAriaLabel}
className={`${descriptionClass} w-full min-w-0 cursor-pointer whitespace-pre-wrap text-left text-[var(--color-content-invert-primary)] hover:!opacity-100 ${
!description && descriptionEmptyHint ? "opacity-70" : ""
}`.trim()}
onClick={(e) => {
e.stopPropagation();
onDescriptionClick();
}}
>
{description ?? descriptionEmptyHint ?? ""}
</InlineTextButton>
) : (
description && (
<p
className={`${descriptionClass} cursor-inherit text-[var(--color-content-invert-primary)]`}
>
{description}
</p>
)
)}
</div>
) : null;
const cardBody = (
<>
{/* Figma: Header = `border-b` row, `gap-px`, icon `pl-1 pr-2 py-2` + `border-l` on title. */}
@@ -382,43 +434,7 @@ export function RuleView({
</div>
) : expanded ? (
<>
{(description ||
(onDescriptionClick &&
typeof descriptionEmptyHint === "string")) && (
<div
className={`relative w-full shrink-0 ${
categories && categories.length > 0
? "border-b border-solid border-[var(--color-content-invert-primary)] pb-[16px]"
: ""
} ${expanded && (isLarge || isMedium) ? "px-0" : "px-[12px]"}`}
>
{onDescriptionClick ? (
<InlineTextButton
type="button"
underline={false}
data-testid="rule-description-edit"
ariaLabel={descriptionEditAriaLabel}
className={`${descriptionClass} w-full min-w-0 cursor-pointer whitespace-pre-wrap text-left text-[var(--color-content-invert-primary)] hover:!opacity-100 ${
!description && descriptionEmptyHint ? "opacity-70" : ""
}`.trim()}
onClick={(e) => {
e.stopPropagation();
onDescriptionClick();
}}
>
{description ?? descriptionEmptyHint ?? ""}
</InlineTextButton>
) : (
description && (
<p
className={`${descriptionClass} cursor-inherit text-[var(--color-content-invert-primary)]`}
>
{description}
</p>
)
)}
</div>
)}
{descriptionAtBottom ? null : expandedDescription}
{/* Categories Section - Using MultiSelect */}
{categories && categories.length > 0 && (
<div
@@ -459,6 +475,7 @@ export function RuleView({
))}
</div>
)}
{descriptionAtBottom ? expandedDescription : null}
</>
) : (
/* Collapsed State: Description */
@@ -488,6 +505,7 @@ export function RuleView({
<NextLink
href={href}
className={cardClassName}
style={surfaceStyle}
aria-label={ariaLabel}
onClick={onClick}
>
@@ -499,6 +517,7 @@ export function RuleView({
return (
<div
className={cardClassName}
style={surfaceStyle}
tabIndex={interactiveCard ? 0 : undefined}
role={interactiveCard ? "button" : "article"}
aria-label={ariaLabel}
@@ -510,4 +529,3 @@ export function RuleView({
</div>
);
}