focus-flow/apps/focus_flow_flutter/lib/widgets/app_shell.dart

/// Renders the App Shell widget for the FocusFlow Flutter UI.
library;

import 'package:flutter/material.dart';

import '../theme/focus_flow_tokens.dart';

/// Top-level shell that frames the sidebar and main content area.
class AppShell extends StatelessWidget {
  /// Creates an app shell with a [sidebar] and main [child].
  const AppShell({required this.sidebar, required this.child, super.key});

  /// Sidebar widget displayed at the left edge of the app.
  final Widget sidebar;

  /// Primary content widget displayed beside the sidebar.
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return ColoredBox(
      color: FocusFlowTokens.appBackground,
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(4),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(FocusFlowTokens.appFrameRadius),
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: FocusFlowTokens.appBackground,
                border: Border.all(color: FocusFlowTokens.appFrameBorder),
                borderRadius: BorderRadius.circular(
                  FocusFlowTokens.appFrameRadius,
                ),
              ),
              child: Row(
                children: [
                  SizedBox(width: FocusFlowTokens.sidebarWidth, child: sidebar),
                  const VerticalDivider(
                    width: 1,
                    thickness: 1,
                    color: FocusFlowTokens.subtleBorder,
                  ),
                  Expanded(child: child),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}