feat: add visible buttons with text for role CRUD operations

- Add text labels to Edit and Delete buttons in index page
- Change button size from btn-xs to btn-sm for better visibility
- Add Delete button to show page for non-system roles
- Implement handle_event for delete in show page
- Add format_error helper to show page

lib/mv_web/live/role_live/index.html.heex

@@ -55,8 +55,9 @@
       </div>
 
       <%= if can?(@current_user, :update, Mv.Authorization.Role) do %>
-        <.link navigate={~p"/admin/roles/#{role}/edit"} class="btn btn-ghost btn-xs">
+        <.link navigate={~p"/admin/roles/#{role}/edit"} class="btn btn-ghost btn-sm">
           <.icon name="hero-pencil" class="size-4" />
+          {gettext("Edit")}
         </.link>
       <% end %>
     </:action>
@@ -66,10 +67,10 @@
         <.link
           phx-click={JS.push("delete", value: %{id: role.id}) |> hide("#row-#{role.id}")}
           data-confirm={gettext("Are you sure?")}
-          class="btn btn-ghost btn-xs text-error"
-          aria-label={gettext("Delete role")}
+          class="btn btn-ghost btn-sm text-error"
         >
           <.icon name="hero-trash" class="size-4" />
+          {gettext("Delete")}
         </.link>
       <% else %>
         <div
@@ -78,11 +79,12 @@
           data-tip={gettext("System roles cannot be deleted")}
         >
           <button
-            class="btn btn-ghost btn-xs text-error opacity-50 cursor-not-allowed"
+            class="btn btn-ghost btn-sm text-error opacity-50 cursor-not-allowed"
             disabled={true}
             aria-label={gettext("Cannot delete system role")}
           >
             <.icon name="hero-trash" class="size-4" />
+            {gettext("Delete")}
           </button>
         </div>
       <% end %>