Splitting out header

ui/src/components/Header/index.tsx

@@ -90,6 +90,50 @@ export default function Header() {
             />
           </div>
         </div>
+        <UserSection
+          profilePicture={profilePicture}
+          setProfilePicture={setProfilePicture}
+          toggle={toggle}
+          setFavorites={setFavorites}
+          refreshId={refreshId}
+        />
+      </nav>
+      <HeaderModal
+        type={modalType}
+        toggle={toggle}
+        setUser={(u) => {
+          setUser(u);
+          getFavorites().then((response) => {
+            if (response) {
+              setFavorites(response);
+            }
+          });
+          if (u.profile_picture) {
+            getPicture().then((response) => {
+              if (response) {
+                setProfilePicture(response as File);
+              }
+            });
+          }
+        }}
+        setRefreshId={setRefreshId}
+      />
+    </>
+  );
+}
+
+interface UserSectionProps {
+  profilePicture: File | null;
+  setProfilePicture: (picture: File | null) => void;
+  toggle: (type: string) => void;
+  setFavorites: (favorites: string[]) => void;
+  refreshId: NodeJS.Timeout | undefined;
+}
+
+function UserSection({ profilePicture, setProfilePicture, setFavorites, refreshId, toggle }: UserSectionProps) {
+  const [user, setUser] = useRecoilState(userState);
+
+  return (
     <div className='user-section'>
       {user ? (
         <Menu shadow='md' width={200} openDelay={100} closeDelay={400}>
@@ -194,27 +238,5 @@ export default function Header() {
         </Group>
       )}
     </div>
-      </nav>
+  )
-      <HeaderModal
-        type={modalType}
-        toggle={toggle}
-        setUser={(u) => {
-          setUser(u);
-          getFavorites().then((response) => {
-            if (response) {
-              setFavorites(response);
-            }
-          });
-          if (u.profile_picture) {
-            getPicture().then((response) => {
-              if (response) {
-                setProfilePicture(response as File);
-              }
-            });
-          }
-        }}
-        setRefreshId={setRefreshId}
-      />
-    </>
-  );
 }

ui/src/components/Metars/MapTiles.tsx

@@ -55,7 +55,7 @@ export default function MapTiles() {
       },
       order_field: AirportOrderField.CATEGORY,
       order_by: 'asc',
-      limit: 100,
+      limit: 250,
       page: 1
     });
     const { data: metars } = await getMetars(airportData.map((a) => a.icao));