Add community index

UI/BigComponents/CommunityIndexView.svelte

@@ -9,8 +9,8 @@
   import ToSvelte from "../Base/ToSvelte.svelte"
   import type { Feature, Geometry, GeometryCollection } from "@turf/turf"
 
-  export let locationControl: Store<{ lat: number; lon: number }>
-  const tileToFetch: Store<string> = locationControl.mapD((l) => {
+  export let location: Store<{ lat: number; lon: number }>
+  const tileToFetch: Store<string> = location.mapD((l) => {
     const t = Tiles.embedded_tile(l.lat, l.lon, 6)
     return `https://raw.githubusercontent.com/pietervdvn/MapComplete-data/main/community_index/tile_${t.z}_${t.x}_${t.y}.geojson`
   })
@@ -30,9 +30,9 @@
   const filteredResources = resources.map(
     (features) =>
       features.filter((f) => {
-        return GeoOperations.inside([locationControl.data.lon, locationControl.data.lat], f)
+        return GeoOperations.inside([location.data.lon, location.data.lat], f)
       }),
-    [locationControl]
+    [location]
   )
 </script>
 

UI/ThemeViewGUI.svelte

@@ -21,6 +21,7 @@
   import Translations from "./i18n/Translations";
   import { MenuIcon } from "@rgossiaux/svelte-heroicons/solid";
   import Tr from "./Base/Tr.svelte";
+  import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte";
 
   export let layout: LayoutConfig;
   const state = new ThemeViewState(layout);
@@ -142,13 +143,21 @@
 
 <If condition={state.guistate.menuIsOpened}>
   <!-- Menu page -->
-  <div class="absolute top-0 left-0 w-screen h-screen" style="background-color: #00000088">
+  <div class="absolute top-0 left-0 w-screen h-screen overflow-auto" style="background-color: #00000088">
     <div class="flex flex-col m-4 sm:m-6 md:m-8 p-4 sm:p-6 md:m-8 normal-background rounded">
       <div on:click={() => state.guistate.menuIsOpened.setData(false)}>Close</div>
       <TabGroup>
         <TabList>
           <Tab class={({selected}) => selected ? "tab-selected" : "tab-unselected"}>About MapComplete</Tab>
           <Tab class={({selected}) => selected ? "tab-selected" : "tab-unselected"}>Settings</Tab>
+          <Tab class={({selected}) => selected ? "tab-selected" : "tab-unselected"}>
+            <div class="flex">
+              <div class="w-6">
+                <ToSvelte construct={Svg.community_ui}></ToSvelte>
+              </div>
+              Get in touch with others
+            </div>
+          </Tab>
           <Tab class={({selected}) => selected ? "tab-selected" : "tab-unselected"}>Privacy</Tab>
         </TabList>
         <TabPanels>
@@ -158,6 +167,10 @@
 
           </TabPanel>
           <TabPanel>User settings</TabPanel>
+          <TabPanel>
+            <CommunityIndexView location={state.mapProperties.location}></CommunityIndexView>
+
+          </TabPanel>
           <TabPanel>Privacy</TabPanel>
         </TabPanels>
       </TabGroup>

css/index-tailwind-output.css

@@ -1043,10 +1043,6 @@ video {
   height: 100vh;
 }
 
-.h-7 {
-  height: 1.75rem;
-}
-
 .h-4 {
   height: 1rem;
 }
@@ -1087,10 +1083,6 @@ video {
   max-height: 20vh;
 }
 
-.max-h-8 {
-  max-height: 2rem;
-}
-
 .max-h-32 {
   max-height: 8rem;
 }
@@ -1099,6 +1091,10 @@ video {
   max-height: 1.75rem;
 }
 
+.max-h-8 {
+  max-height: 2rem;
+}
+
 .min-h-\[8rem\] {
   min-height: 8rem;
 }
@@ -1135,10 +1131,6 @@ video {
   width: 100vw;
 }
 
-.w-7 {
-  width: 1.75rem;
-}
-
 .w-4 {
   width: 1rem;
 }