assets/css/app.css

@@ -140,7 +140,7 @@
   .footnote:before { content: '{'; }
   .footnote:after { content: '}'; }
 
-  body > header nav a {
+  a.button {
     @apply inline-block text-theme-base px-3 py-2.5 border border-theme-background1 hover:bg-theme-background1 rounded transition font-semibold;
   }
 }

lib/chiya_web/components/core_components.ex

@@ -30,9 +30,10 @@ defmodule ChiyaWeb.CoreComponents do
     """
   end
 
+  attr :class, :string, default: nil
   def darkmode_toggle(assigns) do
     ~H"""
-    <.link href="#" id="dark-mode-toggle" class="text-sm leading-6">
+    <.link href="#" id="dark-mode-toggle" class={["text-sm leading-6", @class]}>
       <span class="hidden dark:inline">🌙</span>
       <span class="inline dark:hidden">☀️</span>
     </.link>

lib/chiya_web/components/layouts/root_public.html.heex

@@ -42,30 +42,30 @@
       <nav class="mx-auto max-w-2xl">
         <ul class="flex gap-3">
           <li>
-            <a href="/">
+            <a href="/" class="button">
               <.icon name="hero-home" /> Home
             </a>
           </li>
           <li>
-            <a href="/about">
+            <a href="/about" class="button">
               <.icon name="hero-face-smile" /> About
             </a>
           </li>
           <li>
-            <a href="/wiki">
+            <a href="/wiki" class="button">
               <.icon name="hero-paper-clip" /> Wiki
             </a>
           </li>
           <%= if @current_user do %>
             <li>
-              <a href="/admin">
+              <a href="/admin" class="button">
                 <.icon name="hero-beaker" /> Admin
               </a>
             </li>
           <% end %>
           <li class="flex-1"></li>
           <li>
-            <.darkmode_toggle />
+            <.darkmode_toggle class="button" />
           </li>
         </ul>
       </nav>

lib/chiya_web/controllers/page_html/home.html.heex

@@ -7,19 +7,13 @@
   <section class="text-sm my-8">
     <ul class="flex flex-wrap gap-3">
       <li>
-        <a
-          href="#"
-          class="inline-block text-theme-base px-3 py-2.5 border border-theme-background1 hover:bg-theme-background1 rounded transition font-semibold"
-        >
+        <a href="#" class="button">
           <.icon name="hero-megaphone" />
         </a>
       </li>
       <%= for channel <- @channels do %>
         <li>
-          <a
-            href={~p"/channel/#{channel.slug}"}
-            class="inline-block text-theme-base px-3 py-2.5 border border-theme-background1 hover:bg-theme-background1 rounded transition font-semibold"
-          >
+          <a href={~p"/channel/#{channel.slug}"} class="button">
             <%= channel.name %>
           </a>
         </li>

lib/chiya_web/controllers/page_html/note.html.heex

@@ -3,6 +3,16 @@
     <%= @note.name %>
   </.header>
 
+  <%= if @current_user do %>
+    <section class="max-w-2xl mx-auto mt-8">
+      <ul class="flex gap-3">
+        <li><a href={~p"/admin/notes/#{@note}/edit"} class="button">
+          <.icon name="hero-pencil-square" /> Edit</a></li>
+        <li><a href={~p"/admin/notes/#{@note}"} class="button">Show in Admin</a></li>
+      </ul>
+    </section>
+  <% end %>
+
   <%= if has_outline?(@note) do %>
   <aside class="max-w-2xl mx-auto mt-8 prose prose-gruvbox">
     <div class="bg-theme-background1 rounded p-2">
@@ -54,10 +64,6 @@
       <.dot />
       <span><%= @note.kind %></span>
     <% end %>
-    <%= if @current_user do %>
-      <.dot />
-      <a href={~p"/admin/notes/#{@note}"} class="underline-link font-semibold">Show in Admin</a>
-    <% end %>
 
     <a href={~p"/"} class="hidden | h-card u-author">Inhji</a>
     <a href={~p"/note/#{@note.slug}"} class="hidden | u-url u-uid"><%= @note.name %></a>