refactor: Update sidebar component and turbo stream updates for impro…

…ved header rendering

- Enhanced the sidebar component's HTML structure for better readability and maintainability.
- Updated the sidebar header to use a turbo frame for dynamic content rendering.
- Modified turbo stream updates in group and project views to render the new sidebar header component with appropriate labels.
- Ensured consistent styling and structure across sidebar elements.

app/components/layout/sidebar_component.html.erb

@@ -1,11 +1,17 @@
 <aside
   id="sidebar"
-  class="flex flex-col text-sm border-r sidebar border-slate-200 bg-slate-50 dark:border-slate-950 dark:bg-slate-900"
+  class="
+    flex flex-col text-sm border-r sidebar border-slate-200 bg-slate-50
+    dark:border-slate-950 dark:bg-slate-900
+  "
   aria-label="Sidebar"
 >
   <div class="grow">
     <div
-      class="flex overflow-x-hidden justify-between items-center px-2 whitespace-nowrap bg-slate-200 dark:bg-slate-950"
+      class="
+        flex items-center justify-between px-2 overflow-x-hidden whitespace-nowrap
+        bg-slate-200 dark:bg-slate-950
+      "
       style="height: 50px;"
     >
       <a href="<%= root_path %>" class="whitespace-nowrap">
@@ -18,7 +24,10 @@
         </span>
       </a>
       <div
-        class="flex flex-col flex-shrink-0 space-y-1 md:flex-row md:items-center lg:justify-end md:space-y-0 md:space-x-1"
+        class="
+          flex flex-col flex-shrink-0 space-y-1 md:flex-row md:items-center lg:justify-end
+          md:space-y-0 md:space-x-1
+        "
       >
         <button
           data-action="click->layout#collapse"
@@ -63,14 +72,24 @@
       data-viral--dropdown-position-value="bottom-start"
     >
       <button
-        class="py-2 w-full rounded-md border border-slate-400 bg-slate-50 dark:bg-slate-900 hover:bg-slate-300 dark:hover:bg-slate-950 dark:border-slate-800 dark:text-slate-200"
+        class="
+          w-full py-2 border rounded-md border-slate-400 bg-slate-50 dark:bg-slate-900
+          hover:bg-slate-300 dark:hover:bg-slate-950 dark:border-slate-800
+          dark:text-slate-200
+        "
         data-viral--dropdown-target='trigger'
-      >Go to</button>
+      ><%= t(:"general.default_sidebar.goto") %></button>
       <div
         data-viral--dropdown-target="menu"
-        class="hidden z-20 mx-3 w-56 bg-white rounded-lg divide-y shadow divide-slate-100 dark:bg-slate-700"
+        class="
+          z-20 hidden w-56 mx-3 bg-white divide-y rounded-lg shadow divide-slate-100
+          dark:bg-slate-700
+        "
       >
-        <ul class="py-2 w-full text-sm text-slate-700 dark:text-slate-200">
+        <h3 class="py-2 pl-4 font-semibold text-slate-900 dark:text-white">
+          <%= t(:"general.default_sidebar.title") %>
+        </h3>
+        <ul class="w-full py-2 text-sm text-slate-700 dark:text-slate-200">
           <li>
             <%= link_to t(:"general.default_sidebar.projects"),
             dashboard_projects_path,
@@ -93,7 +112,9 @@
       </div>
     </div>
     <div class="flex-1">
-      <%= header %>
+      <turbo-frame id="sidebar-header">
+        <%= header %>
+      </turbo-frame>
       <% if sections.present? %>
         <% sections.each do |section| %>
           <%= section %>

app/views/groups/update.turbo_stream.erb

@@ -5,8 +5,11 @@
 <% end %>
 
 <% if @updated %>
-  <%= turbo_stream.update "sidebar_group_name" do %>
-    <%= @group.name %>
+  <%= turbo_stream.update "sidebar-header" do %>
+    <%= render Layout::Sidebar::HeaderComponent.new(
+      label: t(:"groups.sidebar.label"),
+      item: @group,
+    ) %>
   <% end %>
 
   <%= turbo_stream.update "breadcrumb" do %>
@@ -18,11 +21,11 @@
                     partial: "edit_name_and_description_form",
                     locals: {
                       group: @group,
-                      authorized_namespaces: @authorized_namespaces
+                      authorized_namespaces: @authorized_namespaces,
                     } %>
 
 <%= turbo_stream.update "group_path_form",
                     partial: "edit_advanced_path",
                     locals: {
-                      group: @group
+                      group: @group,
                     } %>

app/views/projects/update.turbo_stream.erb

@@ -5,8 +5,11 @@
 <% end %>
 
 <% if @updated %>
-  <%= turbo_stream.update "sidebar_project_name" do %>
-    <%= @project.name %>
+  <%= turbo_stream.update "sidebar-header" do %>
+    <%= render Layout::Sidebar::HeaderComponent.new(
+      label: t(:"projects.sidebar.label"),
+      item: @project,
+    ) %>
   <% end %>
 
   <%= turbo_stream.update "breadcrumb" do %>