SYNC: Merge branch 'feature/audit-logs'

packages/web/src/elements/Chip.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import FontIcon from "../icons/FontIcon.svelte";
+
+  export let onClose;
+</script>
+
+<div class="chip">
+  <slot />
+  {#if onClose}
+    <span class="close" on:click={onClose}><FontIcon icon="icon close" /></span>
+  {/if}
+</div>
+
+<style>
+  .chip {
+    display: inline-block;
+    padding: 0.25em 0.5em;
+    border-radius: 1em;
+    background-color: var(--theme-bg-2);
+    color: var(--theme-text-1);
+    font-size: 0.875em;
+    cursor: pointer;
+    margin: 2px;
+  }
+  .chip .close {
+    margin-left: 0.2em;
+    color: var(--theme-text-2);
+    cursor: pointer;
+  }
+  .chip .close:hover {
+    color: var(--theme-font-hover);
+  }
+</style>

packages/web/src/elements/DateRangeSelector.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import flatpickr from 'flatpickr';
+  import 'flatpickr/dist/flatpickr.min.css';
+  import 'flatpickr/dist/themes/dark.css';
+
+  import { onMount } from 'svelte';
+
+  let flatpickrInstance;
+  let inputElement;
+
+  export let defaultValue = ['today', 'today'];
+  export let onChange: (value) => void;
+
+  onMount(() => {
+    flatpickrInstance = flatpickr(inputElement, {
+      mode: 'range',
+      maxDate: 'today',
+      dateFormat: 'Y-m-d',
+      defaultDate: defaultValue,
+
+      onClose: selectedDates => {
+        console.log('Selected dates:', selectedDates);
+        if (selectedDates.length === 1) {
+          flatpickrInstance.setDate([selectedDates[0], selectedDates[0]], true);
+        }
+        onChange(selectedDates.length == 1 ? [selectedDates[0], selectedDates[0]] : selectedDates);
+      },
+    });
+  });
+</script>
+
+<input bind:this={inputElement} type="text" class="input1" />