Add developer section to user profile

app/views/users/_developer.html.erb

@@ -0,0 +1,9 @@
+<div class="flex flex-column align-center gap margin-block-start-double">
+  <header class="full-width">
+    <h2 class="divider txt-large margin-none-block">Developer</h2>
+  </header>
+
+  <div class="flex align-center gap txt-normal">
+    <%= link_to "Personal access tokens", user_access_tokens_path(user), class: "btn" %>
+  </div>
+</div>

app/views/users/_transfer.html.erb

@@ -1,13 +1,13 @@
-<div class="flex flex-column align-center gap txt-medium--responsive txt-medium">
+<div class="flex flex-column align-center gap">
   <% url = session_transfer_url(user.identity.transfer_id, script_name: nil) %>
 
+  <header class="full-width">
+    <h2 class="divider txt-large">Link a device</h2>
+    <p class="margin-none-block" id="session_transfer_label">Use this link to sign-in on another device</p>
+  </header>
+
   <label class="flex flex-column gap full-width">
-    <div class="flex align-center gap justify-center">
-      <strong id="session_transfer_label" class="txt-medium">Link to automatically log in on another device</strong>
-    </div>
-    <span class="flex align-center gap margin-inline">
-      <input type="text" class="input fill-white" id="session_transfer_url" value="<%= url %>" aria-labelledby="session_transfer_label" readonly>
-    </span>
+    <input type="text" class="input fill-white" id="session_transfer_url" value="<%= url %>" aria-labelledby="session_transfer_label" readonly>
   </label>
 
   <div class="flex align-center gap">
@@ -34,4 +34,4 @@
       <span class="for-screen-reader">Copy auto-login link</span>
     <% end %>
   </div>
-</div>
+</div>

app/views/users/show.html.erb

@@ -32,9 +32,9 @@
       <% if @user.verified? %>
         <div class="flex-inline center justify-center flex-wrap gap">
           <%= link_to "Which cards are assigned to #{me_or_you}?",
-                cards_path(assignee_ids: [ @user.id ], sorted_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
+                cards_path(assignee_ids: [ @user.id ], sorted_by: "newest"), class: "btn btn--link", data: { turbo_frame: "_top" } %>
           <%= link_to "Which cards were added by #{me_or_you}?",
-                cards_path(creator_ids: [ @user.id ], sorted_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
+                cards_path(creator_ids: [ @user.id ], sorted_by: "newest"), class: "btn btn--link", data: { turbo_frame: "_top" } %>
         </div>
       <% end %>
     </div>
@@ -43,10 +43,11 @@
   <% if Current.user == @user %>
     <section class="panel shadow" style="--panel-size: 45ch;">
       <%= render "users/transfer", user: @user %>
+      <%= render "users/developer", user: @user %>
 
       <div class="center margin-block-start-double">
         <%= button_to session_url(script_name: nil), method: :delete, class: "btn btn--plain txt-link txt-small", data: { turbo: false } do %>
-        <span>Sign out</span>
+        <span>Sign out of Fizzy</span>
       <% end %>
       </div>
     </section>