feat: inline the favorite star after the home row title

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Diego Imbert
2026-10-07 22:56:21 +02:00
co-authored by Claude Opus 5.5
parent 3155a79068
commit 67936b4e14
3 changed files with 41 additions and 4 deletions
+20 -2
View File
@@ -10,9 +10,21 @@
summary?: string
workspaceId?: string
size?: number
/** Starred items show in yellow. */
yellowWhenStarred?: boolean
/** Hidden until the surrounding `group/row` is hovered or focused, unless starred. */
revealOnRowHover?: boolean
}
let { path, kind, workspaceId, summary, size = 16 }: Props = $props()
let {
path,
kind,
workspaceId,
summary,
size = 16,
yellowWhenStarred = false,
revealOnRowHover = false
}: Props = $props()
let buttonHover = $state(false)
let starred = $derived(favoriteManager.isStarred(path, kind))
@@ -28,7 +40,13 @@
onclick={preventDefault(onClick)}
onmouseenter={() => (buttonHover = true)}
onmouseleave={() => (buttonHover = false)}
class="p-1"
class={[
'p-1',
starred && yellowWhenStarred && 'text-yellow-500',
!starred &&
revealOnRowHover &&
'invisible group-hover/row:visible group-focus-within/row:visible group-data-[row-keyboard-selected=true]/row:visible'
]}
>
{#if starred}
{#if buttonHover}
@@ -270,7 +270,6 @@
<div data-row-actions class="flex gap-2 items-center">
{@render actions?.()}
</div>
{@render favorite()}
</div>
</div>
{:else}
@@ -396,6 +395,23 @@
{/if}
{/snippet}
{#snippet inlineFavorite()}
{#if kind == 'app' || kind == 'raw_app' || kind == 'script' || kind == 'flow'}
<div class="relative z-[1] flex items-center shrink-0 -my-1 text-secondary">
{#if canFavorite}
<Star {kind} {path} {workspaceId} {summary} size={12} yellowWhenStarred revealOnRowHover />
{:else}
<span
class="p-1 opacity-20 invisible group-hover/row:visible"
title="Deploy it to add it to favorites"
>
<StarIcon size={12} />
</span>
{/if}
</div>
{/if}
{/snippet}
{#snippet rowContent(withIcon: boolean, linked: boolean, inlineBadges = true)}
{#if withIcon}
<div class="shrink">
@@ -425,6 +441,9 @@
<!-- The home table keeps the draft marker on the title line. -->
<div class="relative z-[1] flex items-center shrink-0">{@render draftBadge()}</div>
{/if}
{#if homeTable}
{@render inlineFavorite()}
{/if}
{#if inlineBadges && (badges || languageBadge || tagBadges || draftBadge || sharedBadge || labelBadges)}
<div class="relative z-[1] hidden lg:flex flex-row gap-1 items-center shrink-0">
{@render badges?.()}
@@ -7,7 +7,7 @@ import { getContext, setContext } from 'svelte'
* triggers and runs cells are hidden, and the template drops them too.
*/
export const HOME_TABLE_GRID =
'grid items-center gap-x-5 grid-cols-[1rem_minmax(0,1fr)_9rem] lg:grid-cols-[1rem_minmax(0,2fr)_minmax(0,1.5fr)_1.25rem_11rem_9rem]'
'grid items-center gap-x-5 grid-cols-[1rem_minmax(0,1fr)_6.5rem] lg:grid-cols-[1rem_minmax(0,2fr)_minmax(0,1.5fr)_1.25rem_11rem_6.5rem]'
/** Sub-columns of the badges area: labels · language · type tags · shared. */
export const HOME_TABLE_BADGE_GRID =