diff --git a/src/components/AppSidebar.svelte b/src/components/AppSidebar.svelte index d20db9526..4f657a94c 100644 --- a/src/components/AppSidebar.svelte +++ b/src/components/AppSidebar.svelte @@ -6,6 +6,7 @@ import { boolean } from "zod"; import { checkRadicleCLI } from "@app/lib/checkRadicleCLI.svelte"; + import { hints } from "@app/lib/hints"; import { dynamicInterval } from "@app/lib/interval"; import { invoke } from "@app/lib/invoke"; import { modalStore, show } from "@app/lib/modal"; @@ -154,6 +155,36 @@ font: var(--txt-body-s-regular); color: var(--color-text-tertiary); } + .guide-item { + position: relative; + display: flex; + } + .guide-dismiss { + position: absolute; + top: 50%; + right: 0.5rem; + transform: translateY(-50%); + display: flex; + align-items: center; + justify-content: center; + padding: 0; + background: none; + border: none; + border-radius: var(--border-radius-sm); + color: var(--color-text-tertiary); + cursor: pointer; + opacity: 0; + pointer-events: none; + transition: opacity 0.1s ease; + } + .guide-item:hover .guide-dismiss, + .guide-item:focus-within .guide-dismiss { + opacity: 1; + pointer-events: auto; + } + .guide-dismiss:hover { + color: var(--color-text-primary); + }
- + {#if !hints.isDismissed("guide")} +
+ + +
+ {/if}