first commit

src/components/shell/AppTopNav.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import {TopNav} from '@astryxdesign/core/TopNav';
+import {HStack} from '@astryxdesign/core/Layout';
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {Icon} from '@astryxdesign/core/Icon';
+import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
+import {Avatar} from '@astryxdesign/core/Avatar';
+import {Divider} from '@astryxdesign/core/Divider';
+import {ICONS} from '@/lib/icons';
+import {GlobalSearch} from './GlobalSearch';
+import {StoreSwitcher} from './StoreSwitcher';
+import {RangePicker} from './RangePicker';
+import {CopilotToggle} from '@/features/copilot/CopilotToggle';
+
+/**
+ * Compact application bar. Scope controls (store, range) live at the start
+ * because they govern the whole workspace; identity and alerts live at the end.
+ */
+export function AppTopNav() {
+  return (
+    <TopNav
+      label="Workspace"
+      startContent={
+        <HStack gap={1} vAlign="center">
+          <StoreSwitcher />
+          <Divider orientation="vertical" />
+          <RangePicker />
+        </HStack>
+      }
+      centerContent={<GlobalSearch />}
+      endContent={
+        <HStack gap={1} vAlign="center">
+          <CopilotToggle />
+          <IconButton
+            icon={<Icon icon={ICONS.notifications} />}
+            label="Notifications"
+            variant="ghost"
+          />
+          <DropdownMenu
+            hasChevron={false}
+            button={{
+              variant: 'ghost',
+              isIconOnly: true,
+              label: 'Account',
+              icon: <Avatar name="Suriya N" size="sm" tooltip={false} />,
+            }}
+            menuWidth={200}
+            items={[
+              {
+                type: 'section',
+                title: 'suriya@nearle.in',
+                items: [
+                  {label: 'Profile', icon: ICONS.profile},
+                  {label: 'Settings', icon: ICONS.settings},
+                ],
+              },
+              {type: 'divider'},
+              {label: 'Sign out', icon: ICONS.signOut},
+            ]}
+          />
+        </HStack>
+      }
+    />
+  );
+}