xtablo-source/backend/templates/app_layout.templ

package templates

import (
	"backend/internal/auth"
	"backend/internal/db/sqlc"
	"backend/internal/web/ui"
)

// SidebarNavIcon renders the SVG icon for the given sidebar icon kind.
// SVG paths ported verbatim from go-backend/internal/web/views/icons.templ SidebarIcon.
templ SidebarNavIcon(kind string) {
	switch kind {
		case "panels":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<rect width="18" height="18" x="3" y="3" rx="2"></rect>
				<path d="M3 9h18"></path>
				<path d="M9 21V9"></path>
			</svg>
		case "tasks":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<rect x="3" y="5" width="6" height="6" rx="1"></rect>
				<path d="m3 17 2 2 4-4"></path>
				<path d="M13 6h8"></path>
				<path d="M13 12h8"></path>
				<path d="M13 18h8"></path>
			</svg>
		case "layers":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"></path>
				<path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"></path>
				<path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"></path>
			</svg>
		case "planning":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<rect width="18" height="18" x="3" y="3" rx="2"></rect>
				<path d="M8 7v7"></path>
				<path d="M12 7v4"></path>
				<path d="M16 7v9"></path>
			</svg>
		case "chat":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path>
			</svg>
		case "files":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path>
			</svg>
		case "team":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
				<circle cx="9" cy="7" r="4"></circle>
				<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
				<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
			</svg>
		default:
			<span></span>
	}
}

// SidebarNavItemRow renders one nav list item.
// If item.Href is empty, renders as a non-interactive div (visual-only, per D-N02).
// If item.Href is non-empty, renders as an anchor tag.
templ SidebarNavItemRow(item sidebarNavItem) {
	if item.Href == "" {
		<div class={ sidebarNavItemClass(item.Active) } style="cursor: default">
			<div class="sidebar-nav-link-inner">
				<span class="sidebar-nav-icon">
					@SidebarNavIcon(item.Icon)
				</span>
				<div class="sidebar-nav-label">{ item.Label }</div>
			</div>
		</div>
	} else {
		<a href={ templ.SafeURL(item.Href) } class={ sidebarNavItemClass(item.Active) }>
			<div class="sidebar-nav-link-inner">
				<span class="sidebar-nav-icon">
					@SidebarNavIcon(item.Icon)
				</span>
				<div class="sidebar-nav-label">{ item.Label }</div>
			</div>
		</a>
	}
}

// SidebarProjectsSection renders the projects list in the sidebar.
templ SidebarProjectsSection(tablos []sqlc.Tablo) {
	<div class="sidebar-projects">
		<hr role="separator"/>
		<div class="sidebar-section-label">Projects</div>
		<ul class="sidebar-project-list">
			for _, tablo := range tablos {
				<li>
					<a href={ templ.SafeURL("/tablos/" + tablo.ID.String()) } class="sidebar-project-link">
						if tablo.Color.Valid && tablo.Color.String != "" {
							<span class="sidebar-project-icon" style={ "background-color: " + tablo.Color.String }></span>
						} else {
							<span class="sidebar-project-icon"></span>
						}
						<span class="sidebar-project-label">{ tablo.Title }</span>
					</a>
				</li>
			}
		</ul>
	</div>
}

// SidebarOrganizationFooter renders the user/org info at the bottom of the sidebar.
// Per D-F01/D-F02/D-F03: shows user email initial as avatar, email as name, and logout form.
templ SidebarOrganizationFooter(user *auth.User, csrfToken string) {
	<div class="sidebar-organization">
		<div class="organization-button">
			<span class="organization-avatar">{ string([]rune(user.Email)[:1]) }</span>
			<span class="organization-copy">
				<span class="organization-name">{ user.Email }</span>
			</span>
		</div>
		<form method="POST" action="/logout">
			@ui.CSRFField(csrfToken)
			<button type="submit" class="text-sm">Log out</button>
		</form>
	</div>
}

// DashboardSidebar renders the full sidebar with brand, nav, projects, and footer.
templ DashboardSidebar(activePath string, tablos []sqlc.Tablo, user *auth.User, csrfToken string) {
	<aside class="dashboard-sidebar">
		<nav aria-label="Main navigation" class="sidebar-nav-shell">
			<div class="sidebar-brand">
				<a class="sidebar-brand-link" href="/" aria-label="Home">
					<img class="sidebar-brand-logo" src="/static/logo_dark.png" alt="Logo XTablo"/>
					<h1 class="sidebar-brand-title">XTablo</h1>
				</a>
			</div>
			<div class="sidebar-primary">
				<ul class="sidebar-list" role="list">
					for _, item := range sidebarPrimaryNavItems(activePath) {
						<li>
							@SidebarNavItemRow(item)
						</li>
						if item.DividerAfter {
							<li class="sidebar-divider"><hr role="separator"/></li>
						}
					}
				</ul>
				@SidebarProjectsSection(tablos)
				@SidebarOrganizationFooter(user, csrfToken)
			</div>
		</nav>
	</aside>
}

// AppLayout is the authenticated HTML shell for all dashboard pages.
// It replaces Layout for all authenticated routes in Phase 15+.
//
// Differences from Layout:
//   - Uses .dashboard-shell grid with sidebar + main content
//   - DashboardSidebar renders nav, projects, and org footer
//   - main#app-main-content.dashboard-main wraps page children
//   - Scripts: htmx.min.js, sortable.min.js, discussion-sse.js (per D-L04)
templ AppLayout(title string, user *auth.User, csrfToken string, activePath string, tablos []sqlc.Tablo, pageTitle string, breadcrumb []BreadcrumbItem, headerActions templ.Component) {
	<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="utf-8"/>
			<meta name="viewport" content="width=device-width, initial-scale=1"/>
			<title>{ title }</title>
			<link rel="stylesheet" href="/static/tailwind.css"/>
		</head>
		<body>
			<div class="dashboard-shell">
				@DashboardSidebar(activePath, tablos, user, csrfToken)
				<main id="app-main-content" class="dashboard-main">
					if len(breadcrumb) > 0 {
						<!-- breadcrumb: Plan 03 will render this properly -->
					}
					if headerActions != nil {
						@headerActions
					}
					{ children... }
				</main>
			</div>
			<script src="/static/htmx.min.js" defer></script>
			<script src="/static/sortable.min.js" defer></script>
			<script src="/static/discussion-sse.js" defer></script>
		</body>
	</html>
}