jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

add admin UX polish: nav grouping, inline settings, real preview data
All checks were successful
deploy / deploy (push) Successful in 1m33s
Details

Browse Source 
- sidebar nav grouped under Shop/Content/Settings section headers with
  subtle uppercase labels (#105)
- custom page settings now show inline in a collapsible panel within the
  editor instead of navigating away to a separate page (#107)
- admin editor preview loads real products and categories from the DB,
  falling back to PreviewData only on fresh installs (#108)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-02-28 20:17:03 +00:00
parent 32cd642110
commit 0a7982dfe8
4 changed files with 271 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
lib/berrypod_web/components/layouts/admin.html.heex
View File

@@ -53,104 +53,119 @@
<%!-- nav links --%>
<nav class="flex-1 p-2" aria-label="Admin navigation">
<ul class="admin-nav">
<li>
<.link
navigate={~p"/admin"}
class={admin_nav_active?(@current_path, "/admin")}
>
<.icon name="hero-home" class="size-5" /> Dashboard
</.link>
</li>
<li>
<.link
navigate={~p"/admin/analytics"}
class={admin_nav_active?(@current_path, "/admin/analytics")}
>
<.icon name="hero-chart-bar" class="size-5" /> Analytics
</.link>
</li>
<li>
<.link
navigate={~p"/admin/orders"}
class={admin_nav_active?(@current_path, "/admin/orders")}
>
<.icon name="hero-shopping-bag" class="size-5" /> Orders
</.link>
</li>
<li>
<.link
navigate={~p"/admin/products"}
class={admin_nav_active?(@current_path, "/admin/products")}
>
<.icon name="hero-cube" class="size-5" /> Products
</.link>
</li>
<li>
<.link
navigate={~p"/admin/providers"}
class={admin_nav_active?(@current_path, "/admin/providers")}
>
<.icon name="hero-link" class="size-5" /> Print providers
</.link>
</li>
<li>
<.link
navigate={~p"/admin/pages"}
class={admin_nav_active?(@current_path, "/admin/pages")}
>
<.icon name="hero-document" class="size-5" /> Pages
</.link>
</li>
<li>
<.link
navigate={~p"/admin/navigation"}
class={admin_nav_active?(@current_path, "/admin/navigation")}
>
<.icon name="hero-bars-3" class="size-5" /> Navigation
</.link>
</li>
<li>
<.link
navigate={~p"/admin/media"}
class={admin_nav_active?(@current_path, "/admin/media")}
>
<.icon name="hero-photo" class="size-5" /> Media
</.link>
</li>
<li>
<.link
href={~p"/admin/theme"}
class={admin_nav_active?(@current_path, "/admin/theme")}
>
<.icon name="hero-paint-brush" class="size-5" /> Theme
</.link>
</li>
<li>
<.link
navigate={~p"/admin/settings"}
class={admin_nav_active?(@current_path, "/admin/settings")}
>
<.icon name="hero-cog-6-tooth" class="size-5" /> Settings
</.link>
</li>
<li>
<.link
navigate={~p"/admin/settings/email"}
class={admin_nav_active?(@current_path, "/admin/settings/email")}
>
<.icon name="hero-envelope" class="size-5" /> Email
</.link>
</li>
<li>
<.link
navigate={~p"/admin/redirects"}
class={admin_nav_active?(@current_path, "/admin/redirects")}
>
<.icon name="hero-arrow-uturn-right" class="size-5" /> Redirects
</.link>
</li>
</ul>
<div class="admin-nav-group">
<span class="admin-nav-heading">Shop</span>
<ul class="admin-nav">
<li>
<.link
navigate={~p"/admin"}
class={admin_nav_active?(@current_path, "/admin")}
>
<.icon name="hero-home" class="size-5" /> Dashboard
</.link>
</li>
<li>
<.link
navigate={~p"/admin/analytics"}
class={admin_nav_active?(@current_path, "/admin/analytics")}
>
<.icon name="hero-chart-bar" class="size-5" /> Analytics
</.link>
</li>
<li>
<.link
navigate={~p"/admin/orders"}
class={admin_nav_active?(@current_path, "/admin/orders")}
>
<.icon name="hero-shopping-bag" class="size-5" /> Orders
</.link>
</li>
<li>
<.link
navigate={~p"/admin/products"}
class={admin_nav_active?(@current_path, "/admin/products")}
>
<.icon name="hero-cube" class="size-5" /> Products
</.link>
</li>
<li>
<.link
navigate={~p"/admin/providers"}
class={admin_nav_active?(@current_path, "/admin/providers")}
>
<.icon name="hero-link" class="size-5" /> Print providers
</.link>
</li>
</ul>
</div>
<div class="admin-nav-group">
<span class="admin-nav-heading">Content</span>
<ul class="admin-nav">
<li>
<.link
navigate={~p"/admin/pages"}
class={admin_nav_active?(@current_path, "/admin/pages")}
>
<.icon name="hero-document" class="size-5" /> Pages
</.link>
</li>
<li>
<.link
navigate={~p"/admin/navigation"}
class={admin_nav_active?(@current_path, "/admin/navigation")}
>
<.icon name="hero-bars-3" class="size-5" /> Navigation
</.link>
</li>
<li>
<.link
navigate={~p"/admin/media"}
class={admin_nav_active?(@current_path, "/admin/media")}
>
<.icon name="hero-photo" class="size-5" /> Media
</.link>
</li>
<li>
<.link
href={~p"/admin/theme"}
class={admin_nav_active?(@current_path, "/admin/theme")}
>
<.icon name="hero-paint-brush" class="size-5" /> Theme
</.link>
</li>
</ul>
</div>
<div class="admin-nav-group">
<span class="admin-nav-heading">Settings</span>
<ul class="admin-nav">
<li>
<.link
navigate={~p"/admin/settings"}
class={admin_nav_active?(@current_path, "/admin/settings")}
>
<.icon name="hero-cog-6-tooth" class="size-5" /> Settings
</.link>
</li>
<li>
<.link
navigate={~p"/admin/settings/email"}
class={admin_nav_active?(@current_path, "/admin/settings/email")}
>
<.icon name="hero-envelope" class="size-5" /> Email
</.link>
</li>
<li>
<.link
navigate={~p"/admin/redirects"}
class={admin_nav_active?(@current_path, "/admin/redirects")}
>
<.icon name="hero-arrow-uturn-right" class="size-5" /> Redirects
</.link>
</li>
</ul>
</div>
</nav>
<%!-- sidebar footer --%>