Implement proper Payload CMS DefaultTemplate layout integration

Layout Implementation:
- Fixed import to use DefaultTemplate from '@payloadcms/next/templates'
- Added proper template props interface with i18n, locale, payload, etc.
- Restructured component to use DefaultTemplate wrapper correctly
- Created FeatureFlagsContent as child component for template

Template Structure:
- Component now receives standard Payload admin view props
- DefaultTemplate provides proper admin layout with sidebar navigation
- All template props (i18n, locale, params, payload, permissions, etc.) are passed through
- Maintains theme integration and responsive design within admin layout

The feature flags dashboard now properly integrates with Payload's admin
layout system, including the navigation sidebar and standard admin styling,
while preserving all spreadsheet functionality and inline editing capabilities.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/views/FeatureFlagsView.tsx

@@ -4,6 +4,7 @@ import {
   useConfig,
   useTheme
 } from '@payloadcms/ui'
+import { DefaultTemplate } from '@payloadcms/next/templates'
 
 interface FeatureFlag {
   id: string
@@ -24,11 +25,17 @@ interface FeatureFlag {
 }
 
 interface FeatureFlagsViewProps {
-  // Props that would typically be passed from the parent view
-  [key: string]: any
+  i18n?: any
+  locale?: any
+  params?: any
+  payload?: any
+  permissions?: any
+  searchParams?: any
+  user?: any
+  visibleEntities?: any
 }
 
-const FeatureFlagsViewComponent = (props: FeatureFlagsViewProps = {}) => {
+const FeatureFlagsViewComponent = (props: FeatureFlagsViewProps) => {
   const { config } = useConfig()
   const { theme } = useTheme()
   const [flags, setFlags] = useState<FeatureFlag[]>([])
@@ -197,28 +204,7 @@ const FeatureFlagsViewComponent = (props: FeatureFlagsViewProps = {}) => {
 
   const styles = getThemeStyles()
 
-  if (loading) {
-    return (
-      <div style={{
-        padding: '2rem',
-        textAlign: 'center',
-        minHeight: '400px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}>
-        <div style={{ fontSize: '1.125rem', color: styles.textMuted }}>Loading feature flags...</div>
-      </div>
-    )
-  }
-
-  return (
-    <div style={{
-      padding: '0',
-      height: '100%',
-      overflow: 'auto'
-    }}>
-      {/* Content Container */}
+  const FeatureFlagsContent = () => (
     <div style={{
       padding: '2rem',
       maxWidth: '100%'
@@ -242,6 +228,19 @@ const FeatureFlagsViewComponent = (props: FeatureFlagsViewProps = {}) => {
         </p>
       </div>
 
+      {loading ? (
+        <div style={{
+          padding: '2rem',
+          textAlign: 'center',
+          minHeight: '400px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+          <div style={{ fontSize: '1.125rem', color: styles.textMuted }}>Loading feature flags...</div>
+        </div>
+      ) : (
+        <>
           {/* Success/Error Messages */}
           {successMessage && (
             <div style={{
@@ -619,8 +618,24 @@ const FeatureFlagsViewComponent = (props: FeatureFlagsViewProps = {}) => {
           <span style={{ fontWeight: '600' }}>A/B Tests:</span> {flags.filter(f => f && f.variants && f.variants.length > 0).length}
         </div>
       </div>
+        </>
+      )}
     </div>
-    </div>
+  )
+
+  return (
+    <DefaultTemplate
+      i18n={props.i18n}
+      locale={props.locale}
+      params={props.params}
+      payload={props.payload}
+      permissions={props.permissions}
+      searchParams={props.searchParams}
+      user={props.user}
+      visibleEntities={props.visibleEntities}
+    >
+      <FeatureFlagsContent />
+    </DefaultTemplate>
   )
 }