feat: move Create Meeting button to header

- Remove 'Start a Quick Meeting' box from main content area
- Add showCreateButton and onCreateMeeting props to MinimalHeader
- Create Meeting button now appears in header left of Leave Room
- Only shows for room owners or shared room users
- Update no meetings message to remove reference to quick meeting below
- Cleaner, more accessible UI with actions in the header

www/app/[roomName]/MeetingSelection.tsx

@@ -185,6 +185,8 @@ export default function MeetingSelection({
         displayName={room?.name}
         showLeaveButton={true}
         onLeave={handleLeaveMeeting}
+        showCreateButton={isOwner || isSharedRoom}
+        onCreateMeeting={onCreateUnscheduled}
       />
 
       <Flex
@@ -391,29 +393,12 @@ export default function MeetingSelection({
                 </Text>
                 <Text fontSize="md" color="gray.600" maxW="400px">
                   There are no ongoing or upcoming meetings in this room at the moment.
-                  {(isOwner || isSharedRoom) && " You can start a quick meeting below."}
                 </Text>
               </VStack>
             </VStack>
           </Flex>
         )}
 
-        {/* Create Unscheduled Meeting - Only for room owners or shared rooms */}
-        {(isOwner || isSharedRoom) && (
-          <Box width="100%" bg="gray.50" borderRadius="md" p={4} mt={6}>
-            <HStack justify="space-between" align="center">
-              <VStack align="start" gap={1}>
-                <Text fontWeight="semibold">Start a Quick Meeting</Text>
-                <Text fontSize="sm" color="gray.600">
-                  Jump into a meeting room right away
-                </Text>
-              </VStack>
-              <Button colorScheme="green" onClick={onCreateUnscheduled}>
-                Create Meeting
-              </Button>
-            </HStack>
-          </Box>
-        )}
       </Flex>
     </Flex>
   );

www/app/components/MinimalHeader.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Flex, Link, Button, Text } from "@chakra-ui/react";
+import { Flex, Link, Button, Text, HStack } from "@chakra-ui/react";
 import NextLink from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
@@ -10,6 +10,8 @@ interface MinimalHeaderProps {
   displayName?: string;
   showLeaveButton?: boolean;
   onLeave?: () => void;
+  showCreateButton?: boolean;
+  onCreateMeeting?: () => void;
 }
 
 export default function MinimalHeader({
@@ -17,6 +19,8 @@ export default function MinimalHeader({
   displayName,
   showLeaveButton = true,
   onLeave,
+  showCreateButton = false,
+  onCreateMeeting,
 }: MinimalHeaderProps) {
   const router = useRouter();
 
@@ -63,17 +67,28 @@ export default function MinimalHeader({
         </Text>
       </Flex>
 
-      {/* Leave Room Button */}
-      {showLeaveButton && (
-        <Button
-          variant="outline"
-          colorScheme="gray"
-          size="sm"
-          onClick={handleLeaveMeeting}
-        >
-          Leave Room
-        </Button>
-      )}
+      {/* Action Buttons */}
+      <HStack gap={2}>
+        {showCreateButton && onCreateMeeting && (
+          <Button
+            colorScheme="green"
+            size="sm"
+            onClick={onCreateMeeting}
+          >
+            Create Meeting
+          </Button>
+        )}
+        {showLeaveButton && (
+          <Button
+            variant="outline"
+            colorScheme="gray"
+            size="sm"
+            onClick={handleLeaveMeeting}
+          >
+            Leave Room
+          </Button>
+        )}
+      </HStack>
     </Flex>
   );
 }