Skip to content

Commit 83befa0

Browse files
tonyespinoza1Tony Espinozaclaude
authored
feat(default-app): Simplify pattern list with clickable names and minimal actions (#2019)
* feat(default-app): Simplify pattern list with clickable names and minimal actions Improved the pattern list UI for better usability and cleaner appearance: - Made pattern names clickable links with hover underline (removed Visit button) - Replaced "Remove" button text with trash icon (🗑️) - Changed trash button to ghost variant (transparent background) - Added CSS styling for pattern name hover effects - Increased spacing around action buttons for better visual balance The result is a more intuitive interface where users can click pattern names directly to visit them, and actions are represented with clear visual icons. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Format code with deno fmt --------- Co-authored-by: Tony Espinoza <tonyespinoza@Tonys-MacBook-Pro.local> Co-authored-by: Claude <noreply@anthropic.com>
1 parent 851a6c8 commit 83befa0

File tree

1 file changed

+27
-16
lines changed

1 file changed

+27
-16
lines changed

packages/patterns/default-app.tsx

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -165,29 +165,40 @@ export default recipe<CharmsListInput, CharmsListOutput>(
165165

166166
<ct-vscroll flex showScrollbar>
167167
<ct-vstack gap="4" padding="6">
168+
<style>
169+
{`
170+
.pattern-link {
171+
cursor: pointer;
172+
color: inherit;
173+
text-decoration: none;
174+
}
175+
.pattern-link:hover {
176+
text-decoration: underline;
177+
}
178+
`}
179+
</style>
168180
<h2>Patterns</h2>
169181

170182
<ct-table full-width hover>
171183
<tbody>
172184
{allCharms.map((charm) => (
173185
<tr>
174-
<td>{charm?.[NAME] || "Untitled Charm"}</td>
175186
<td>
176-
<ct-hstack gap="2">
177-
<ct-button
178-
size="sm"
179-
onClick={visit({ charm })}
180-
>
181-
Visit
182-
</ct-button>
183-
<ct-button
184-
size="sm"
185-
variant="destructive"
186-
onClick={removeCharm({ charm, allCharms })}
187-
>
188-
Remove
189-
</ct-button>
190-
</ct-hstack>
187+
<a
188+
className="pattern-link"
189+
onClick={visit({ charm })}
190+
>
191+
{charm?.[NAME] || "Untitled Charm"}
192+
</a>
193+
</td>
194+
<td>
195+
<ct-button
196+
size="sm"
197+
variant="ghost"
198+
onClick={removeCharm({ charm, allCharms })}
199+
>
200+
🗑️
201+
</ct-button>
191202
</td>
192203
</tr>
193204
))}

0 commit comments

Comments
 (0)