Show the channel header actions when hovering the sidebar

resources/js/components/AppSidebar.vue

@@ -101,7 +101,6 @@ const mainNavItems = computed<NavItem[]>(() => [
                   title: trans('sidebar.repurposes'),
                   href: repurposes.url(),
                   icon: IconRepeat,
-                  badge: trans('common.beta'),
               },
           ]
         : []),

resources/js/components/NavChannels.vue

@@ -153,7 +153,7 @@ const reconnect = (channel: SidebarChannel): void => {
         class="group/channels min-h-0 flex-1 px-4 pt-4 pb-0 group-data-[collapsible=icon]:px-2.5"
         data-testid="sidebar-channels"
     >
-        <div class="group/channels-header relative">
+        <div class="relative">
             <SidebarGroupLabel
                 class="group-data-[collapsible=icon]:hidden"
                 data-testid="sidebar-channels-label"
@@ -170,7 +170,7 @@ const reconnect = (channel: SidebarChannel): void => {
                 :class="[
                     'absolute top-1 right-0 flex items-center gap-1 transition-opacity duration-(--motion-duration-sidebar-toggle) ease-(--motion-easing-sidebar-toggle) group-data-[collapsible=icon]:hidden',
                     channels.length > 0
-                        ? 'focus-within:opacity-100 md:opacity-0 md:group-hover/channels-header:opacity-100'
+                        ? 'focus-within:opacity-100 md:opacity-0 md:group-hover:opacity-100'
                         : '',
                 ]"
                 data-testid="sidebar-channels-actions"

resources/js/components/NavMain.vue

@@ -47,6 +47,7 @@ const { urlIsActive } = useActiveUrl();
                 <Badge
                     v-else-if="item.badge"
                     variant="secondary"
+                    :data-testid="`nav-badge-${item.href}`"
                     class="pointer-events-none absolute top-1/2 end-2 h-5 -translate-y-1/2 px-1.5 group-data-[collapsible=icon]:hidden"
                 >
                     {{ item.badge }}

tests/Browser/SidebarChannelsTest.php

@@ -277,6 +277,40 @@ function waitForSidebarChannelsScript(mixed $page, string $condition): void
         ->assertNoJavaScriptErrors();
 });
 
+test('hovering anywhere on the sidebar reveals the channels header actions', function () {
+    $user = sidebarChannelsUser('admin');
+    SocialAccount::factory()->linkedin()->create(['workspace_id' => $user->current_workspace_id]);
+    $this->actingAs($user);
+
+    $page = visit(route('app.posts.index'));
+    waitFor($page, '@sidebar-new');
+
+    $page->hover('@app-layout-content');
+    waitForState($page, '@sidebar-channels-actions', "getComputedStyle(element).opacity === '0'");
+
+    expect($page->script("getComputedStyle(document.querySelector('[data-testid=\"sidebar-channels-actions\"]')).opacity"))->toBe('0');
+
+    $page->hover('@sidebar-new');
+    waitForState($page, '@sidebar-channels-actions', "getComputedStyle(element).opacity === '1'");
+
+    expect($page->script("getComputedStyle(document.querySelector('[data-testid=\"sidebar-channels-actions\"]')).opacity"))->toBe('1');
+    $page->assertVisible('@sidebar-channels-search')
+        ->assertVisible('@sidebar-channels-settings')
+        ->assertVisible('@sidebar-channels-connect')
+        ->assertNoJavaScriptErrors();
+});
+
+test('the repurposes item has no beta badge', function () {
+    $this->actingAs(sidebarChannelsUser('admin'));
+
+    $page = visit(route('app.posts.index'));
+    waitFor($page, '[data-testid="nav-/repurposes"]');
+
+    $page->assertVisible('[data-testid="nav-/repurposes"]')
+        ->assertMissing('[data-testid="nav-badge-/repurposes"]')
+        ->assertNoJavaScriptErrors();
+});
+
 test('the channels search button shows its shortcut and opens the command palette', function () {
     $user = sidebarChannelsUser('admin');
     SocialAccount::factory()->linkedin()->create(['workspace_id' => $user->current_workspace_id]);