update ui update and fix layout issue

src/shared/layouts/ProtectedLayout.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import {AuthGuard} from '@/features/auth/guards/AuthGuard';
+import {WorkspaceShell} from '@/shared/layouts/workspace/WorkspaceShell';
+
+/**
+ * Everything behind the sign-in wall renders through here.
+ *
+ * Two responsibilities, in order: prove there is a session, then draw the
+ * workspace frame around whatever the route rendered. Keeping them composed in
+ * one named layout — rather than repeated in each route group — is what makes
+ * "add a protected section" a matter of putting a folder under (workspace)
+ * with nothing to remember.
+ *
+ * The guard sits OUTSIDE the shell deliberately. Inside, an expired session
+ * would paint a full sidebar, top bar and Loyaly AI rail around a spinner before
+ * redirecting; outside, an unauthenticated visitor never sees the chrome of an
+ * account they are not in.
+ */
+export function ProtectedLayout({children}: {children: React.ReactNode}) {
+  return (
+    <AuthGuard>
+      <WorkspaceShell>{children}</WorkspaceShell>
+    </AuthGuard>
+  );
+}