diff --git a/src/components/SidebarRepoList.svelte b/src/components/SidebarRepoList.svelte index 2f676ca2d..ec11e710f 100644 --- a/src/components/SidebarRepoList.svelte +++ b/src/components/SidebarRepoList.svelte @@ -589,6 +589,43 @@ flex-shrink: 0; color: var(--color-text-tertiary); } + /* The badge is the rail's stand-in for the inline lock, which has no room + beside a 1rem avatar in a 2rem square. */ + .avatar { + position: relative; + display: inline-flex; + flex-shrink: 0; + } + .avatar-lock { + display: none; + } + :global(.sidebar.mini) .private-icon { + display: none; + } + /* Overhangs the avatar so it clears the generated pattern. Its backdrop is + the row's own fill, hence the states below. */ + :global(.sidebar.mini) .avatar-lock { + display: flex; + position: absolute; + right: -0.1875rem; + bottom: -0.1875rem; + align-items: center; + justify-content: center; + width: 0.75rem; + height: 0.75rem; + border-radius: var(--border-radius-sm); + background-color: var(--color-surface-canvas); + color: var(--color-text-secondary); + } + :global(.sidebar.mini) .avatar-lock :global(svg) { + width: 0.625rem; + height: 0.625rem; + } + :global(.sidebar.mini) .nav-item:hover .avatar-lock, + :global(.sidebar.mini) .nav-item.active .avatar-lock, + :global(.sidebar.mini) .nav-item.context-active .avatar-lock { + background-color: var(--color-surface-subtle); + } /* Out of flow: hidden, they still reserved a button's width on every row. They sit over the end of the name instead, on the row's own fill. */ .nav-item .row-actions { @@ -925,7 +962,14 @@ onclick={pinned && !sidebarCollapsed.value ? drag.onClick : undefined} oncontextmenu={e => openContextMenu(e, repo)} href={router.routeToPath({ resource: "repo.home", rid: repo.rid })}> - + + + {#if repo.private} + + + + {/if} + {repo.name} {#if repo.private}