set filter modal

packages/web/src/widgets/DropDownButton.svelte

@@ -1,8 +1,22 @@
-<script>
+<script lang="ts">
+  import _ from 'lodash';
+
   import FontIcon from '../icons/FontIcon.svelte';
+  import { currentDropDownMenu } from '../stores';
   import InlineButton from './InlineButton.svelte';
+
+  export let icon = 'icon chevron-down';
+  export let menu;
+  let domButton;
+
+  function handleClick() {
+    const rect = domButton.getBoundingClientRect();
+    const left = rect.left;
+    const top = rect.bottom;
+    currentDropDownMenu.set({ left, top, items: _.isFunction(menu) ? menu() : menu });
+  }
 </script>
 
-<InlineButton square>
-  <FontIcon icon="icon chevron-down" />
+<InlineButton square on:click={handleClick} bind:this={domButton}>
+  <FontIcon {icon} />
 </InlineButton>

packages/web/src/widgets/InlineButton.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
   export let disabled = false;
   export let square = false;
+
+  let domButton;
+
+  export function getBoundingClientRect() {
+    return domButton.getBoundingClientRect();
+  }
 </script>
 
-<div class="outer buttonLike" class:disabled class:square on:click>
+<div class="outer buttonLike" class:disabled class:square on:click bind:this={domButton}>
   <div class="inner">
     <slot />
   </div>
@@ -41,7 +47,6 @@
     background-color: var(--bg-2);
   }
 
-
   .inner {
     margin: auto;
     flex: 1;