diff --git a/app/(dashboard)/loading.tsx b/app/(dashboard)/loading.tsx
index dbfc9201..94b168ff 100644
--- a/app/(dashboard)/loading.tsx
+++ b/app/(dashboard)/loading.tsx
@@ -1,3 +1,6 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
import { Skeleton } from '@/components/ui/skeleton'
/**
@@ -10,8 +13,43 @@ import { Skeleton } from '@/components/ui/skeleton'
* A greeting + hairline-separated rows reads honestly on Hem and stays neutral
* on the plain list pages that fall back here (a page title + rows), which is
* why it is not shaped like any one page's specific grid.
+ *
+ * /chat is the exception: MainContainer renders it full-bleed (no max-width,
+ * no padding), so the column silhouette would stretch edge-to-edge and read
+ * broken. The chat branch mirrors the two-pane chat shell instead:
+ * conversation sidebar + empty conversation pane (see ChatLayout/ChatSidebar).
*/
export default function DashboardLoading() {
+ const pathname = usePathname()
+
+ if (pathname.startsWith('/chat')) {
+ return (
+
+
+
+
+ )
+ }
+
return (
{/* Greeting hero (title + date line) */}
diff --git a/app/globals.css b/app/globals.css
index 1c23d20f..cf634f76 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -348,6 +348,8 @@ body {
@utility fade-out-0 { --tw-exit-opacity: 0; }
@utility zoom-in-95 { --tw-enter-scale: 0.95; }
@utility zoom-out-95 { --tw-exit-scale: 0.95; }
+@utility zoom-in-98 { --tw-enter-scale: 0.98; }
+@utility zoom-out-98 { --tw-exit-scale: 0.98; }
@utility slide-in-from-top { --tw-enter-translate-y: -100%; }
@utility slide-in-from-top-1 { --tw-enter-translate-y: -0.25rem; }
@utility slide-in-from-top-2 { --tw-enter-translate-y: -0.5rem; }
diff --git a/components/dashboard/DashboardNav.tsx b/components/dashboard/DashboardNav.tsx
index f8006791..44cd19eb 100644
--- a/components/dashboard/DashboardNav.tsx
+++ b/components/dashboard/DashboardNav.tsx
@@ -876,20 +876,24 @@ export default function DashboardNav({ companyName: _companyName, entityType, pa
{/* Sticky user block (bottom-left): avatar, name, active company.
Opens the upward user menu with the company-switcher flyout,
- account links and logout (concept PR 2). */}
-
- void handleLogout()}
+ account links and logout (concept PR 2). The hairline above is
+ inset to the content edges, not edge-to-edge (concept). */}
+
+
+
+ void handleLogout()}
+ />
+
diff --git a/components/dashboard/UserMenu.tsx b/components/dashboard/UserMenu.tsx
index 84690805..747e91fe 100644
--- a/components/dashboard/UserMenu.tsx
+++ b/components/dashboard/UserMenu.tsx
@@ -18,7 +18,6 @@ import {
HelpCircle,
Loader2,
LogOut,
- MessagesSquare,
Plus,
Search,
Settings,
@@ -30,6 +29,16 @@ import {
// actually asks for that.
const DISCORD_INVITE_URL = 'https://discord.gg/D9SxtTgvx'
+// Lucide ships no brand marks, so the Discord logo is inlined (simple-icons
+// path, CC0). Sized and colored like the surrounding lucide icons.
+function DiscordLogo({ className }: { className?: string }) {
+ return (
+
+ )
+}
+
interface UserMenuProps {
userName: string | null
userEmail: string | null
@@ -333,7 +342,7 @@ export default function UserMenu({
onClick={close}
className={menuRow}
>
-
+
{tNav('discord_community')}
diff --git a/components/settings/SettingsModal.tsx b/components/settings/SettingsModal.tsx
index a3d7df03..eb3ba1ad 100644
--- a/components/settings/SettingsModal.tsx
+++ b/components/settings/SettingsModal.tsx
@@ -27,11 +27,15 @@ export function SettingsModal({ sectionId }: { sectionId?: string }) {
const { company } = useCompany()
const t = useTranslations('settings_modal')
+ // Tab clicks inside the modal update the URL shallowly (see SettingsRail),
+ // so the pathname is the live source of truth for the active section; the
+ // sectionId route param only covers the very first intercepted render.
// Bare /settings (or an unknown section) defaults to company, or to account
// when there is no active company (the no-company escape hatch).
+ const urlSection = pathname.split('/')[2] ?? sectionId
const resolved =
- sectionId && SETTINGS_SECTIONS[sectionId]
- ? sectionId
+ urlSection && SETTINGS_SECTIONS[urlSection]
+ ? urlSection
: company
? 'company'
: 'account'
diff --git a/components/settings/SettingsRail.tsx b/components/settings/SettingsRail.tsx
index 7c8c1acf..1052d705 100644
--- a/components/settings/SettingsRail.tsx
+++ b/components/settings/SettingsRail.tsx
@@ -16,8 +16,11 @@ import {
import { useSettingsNavItems } from './useSettingsNavItems'
interface SettingsRailProps {
- /** Layout context: 'page' navigates with push (real route), 'modal' replaces
- * the URL so section-switching keeps a single back-stack entry. */
+ /** Layout context: 'page' navigates with push (real route), 'modal' swaps
+ * the URL shallowly (history.replaceState) so section-switching keeps a
+ * single back-stack entry AND never re-renders the intercepted modal
+ * route: a router navigation would remount the Dialog and replay its
+ * open animation on every tab click. */
variant: 'page' | 'modal'
/** 'rail' = grouped vertical list (desktop); 'select' = grouped dropdown (mobile). */
display: 'rail' | 'select'
@@ -38,7 +41,9 @@ export function SettingsRail({ variant, display, activeId }: SettingsRailProps)
items[0]?.id
function navigate(href: string) {
- if (variant === 'modal') router.replace(href)
+ // Shallow update: Next syncs usePathname() from the native History API,
+ // so SettingsModal re-resolves the section without a route transition.
+ if (variant === 'modal') window.history.replaceState(null, '', href)
else router.push(href)
}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 820d5675..a2072af3 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<