Basic filtering in studio (#1898)

public/css/index-tailwind-output.css

@@ -693,6 +693,10 @@ video {
   position: relative;
 }
 
+.\!relative {
+  position: relative !important;
+}
+
 .sticky {
   position: -webkit-sticky;
   position: sticky;
@@ -717,6 +721,10 @@ video {
   top: 14rem;
 }
 
+.bottom-0 {
+  bottom: 0px;
+}
+
 .top-0 {
   top: 0px;
 }
@@ -725,10 +733,6 @@ video {
   left: 0px;
 }
 
-.bottom-0 {
-  bottom: 0px;
-}
-
 .right-4 {
   right: 1rem;
 }
@@ -896,14 +900,6 @@ video {
   margin-right: 4rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
-.mb-8 {
-  margin-bottom: 2rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -936,6 +932,10 @@ video {
   margin-right: 0.25rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -968,6 +968,10 @@ video {
   margin-top: 2rem;
 }
 
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
 .-ml-6 {
   margin-left: -1.5rem;
 }
@@ -1076,12 +1080,18 @@ video {
   height: 6rem;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-screen {
   height: 100vh;
 }
 
-.h-full {
+.h-fit {
-  height: 100%;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
 }
 
 .h-32 {
@@ -1105,16 +1115,6 @@ video {
   height: 1.5rem;
 }
 
-.h-fit {
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-}
-
-.h-96 {
-  height: 24rem;
-}
-
 .h-0 {
   height: 0px;
 }
@@ -1786,10 +1786,6 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-white\/50 {
-  background-color: rgb(255 255 255 / 0.5);
-}
-
 .bg-red-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
@@ -1876,6 +1872,10 @@ video {
   padding-right: 0.5rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .pr-12 {
   padding-right: 3rem;
 }
@@ -1888,10 +1888,6 @@ video {
   padding-right: 0.25rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
 .pt-0\.5 {
   padding-top: 0.125rem;
 }
@@ -2122,6 +2118,11 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .outline {
   outline-style: solid;
 }
@@ -2217,12 +2218,6 @@ video {
           backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
-.transition-colors {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -2231,6 +2226,12 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -2928,11 +2929,6 @@ svg.apply-fill path {
   max-width: 100%;
 }
 
-.hover\:bg-white:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-indigo-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(199 210 254 / var(--tw-bg-opacity));

src/UI/StudioGUI.svelte

@@ -29,6 +29,7 @@
   import Translations from "./i18n/Translations"
   import Tr from "./Base/Tr.svelte"
   import Add from "../assets/svg/Add.svelte"
+  import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
 
   export let studioUrl =
     window.location.hostname === "127.0.0.2"
@@ -54,26 +55,66 @@
   const uid = osmConnection.userDetails.map((ud) => ud?.uid)
   const studio = new StudioServer(studioUrl, uid)
 
+  let layerFilterTerm: string = ""
+
   let layersWithErr = UIEventSource.FromPromiseWithErr(studio.fetchOverview())
   let layers: Store<{ owner: number; id: string }[]> = layersWithErr.mapD((l) =>
     l["success"]?.filter((l) => l.category === "layers")
   )
-  let selfLayers = layers.mapD((ls) => ls.filter((l) => l.owner === uid.data), [uid])
+  $: selfLayers = layers.mapD(
-  let otherLayers = layers.mapD(
+    (ls) =>
-    (ls) => ls.filter((l) => l.owner !== undefined && l.owner !== uid.data),
+      ls.filter(
+        (l) => l.owner === uid.data && l.id.toLowerCase().includes(layerFilterTerm.toLowerCase())
+      ),
     [uid]
   )
-  let officialLayers = layers.mapD((ls) => ls.filter((l) => l.owner === undefined), [uid])
+  $: otherLayers = layers.mapD(
+    (ls) =>
+      ls.filter(
+        (l) =>
+          l.owner !== undefined &&
+          l.owner !== uid.data &&
+          l.id.toLowerCase().includes(layerFilterTerm.toLowerCase())
+      ),
+    [uid]
+  )
+  $: officialLayers = layers.mapD(
+    (ls) =>
+      ls.filter(
+        (l) => l.owner === undefined && l.id.toLowerCase().includes(layerFilterTerm.toLowerCase())
+      ),
+    [uid]
+  )
+
+  let themeFilterTerm: string = ""
 
   let themes: Store<{ owner: number; id: string }[]> = layersWithErr.mapD((l) =>
     l["success"]?.filter((l) => l.category === "themes")
   )
-  let selfThemes = themes.mapD((ls) => ls.filter((l) => l.owner === uid.data), [uid])
+  $: selfThemes = themes.mapD(
-  let otherThemes = themes.mapD(
+    (ls) =>
-    (ls) => ls.filter((l) => l.owner !== undefined && l.owner !== uid.data),
+      ls.filter(
+        (l) => l.owner === uid.data && l.id.toLowerCase().includes(themeFilterTerm.toLowerCase())
+      ),
+    [uid]
+  )
+  $: otherThemes = themes.mapD(
+    (ls) =>
+      ls.filter(
+        (l) =>
+          l.owner !== undefined &&
+          l.owner !== uid.data &&
+          l.id.toLowerCase().includes(themeFilterTerm.toLowerCase())
+      ),
+    [uid]
+  )
+  $: officialThemes = themes.mapD(
+    (ls) =>
+      ls.filter(
+        (l) => l.owner === undefined && l.id.toLowerCase().includes(themeFilterTerm.toLowerCase())
+      ),
     [uid]
   )
-  let officialThemes = themes.mapD((ls) => ls.filter((l) => l.owner === undefined), [uid])
 
   let state:
     | undefined
@@ -224,6 +265,22 @@
           MapComplete Studio
         </BackButton>
         <h2>Choose a layer to edit</h2>
+
+        <form class="flex justify-center">
+          <label
+            class="neutral-label my-2 flex w-full items-center rounded-full border-2 border-black sm:w-1/2"
+          >
+            <SearchIcon aria-hidden="true" class="h-8 w-8" />
+            <input
+              class="mr-4 w-full outline-none"
+              id="layer-search"
+              type="search"
+              placeholder="Filter layers by name"
+              bind:value={layerFilterTerm}
+            />
+          </label>
+        </form>
+
         <ChooseLayerToEdit {osmConnection} layerIds={$selfLayers} on:layerSelected={editLayer}>
           <h3 slot="title">Your layers</h3>
         </ChooseLayerToEdit>
@@ -257,6 +314,22 @@
           MapComplete Studio
         </BackButton>
         <h2>Choose a theme to edit</h2>
+
+        <form class="flex justify-center">
+          <label
+            class="neutral-label my-2 flex w-full items-center rounded-full border-2 border-black sm:w-1/2"
+          >
+            <SearchIcon aria-hidden="true" class="h-8 w-8" />
+            <input
+              class="mr-4 w-full outline-none"
+              id="theme-search"
+              type="search"
+              placeholder="Filter themes by name"
+              bind:value={themeFilterTerm}
+            />
+          </label>
+        </form>
+
         <ChooseLayerToEdit {osmConnection} layerIds={$selfThemes} on:layerSelected={editTheme}>
           <h3 slot="title">Your themes</h3>
         </ChooseLayerToEdit>