From 74948ccc6e7d3808a64334bcbeeeb69a34aa83c6 Mon Sep 17 00:00:00 2001
From: patel-jeel92 <patel.jeel92@gmail.com>
Date: Sat, 20 Jan 2024 15:37:17 -0500
Subject: [PATCH 1/9] Add layout setting

---
 src/Configuration.ts                | 13 ++++++++++++-
 src/SettingsModal.svelte            | 16 +++++++++++++++-
 src/components/HourlyDetails.svelte |  2 +-
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/Configuration.ts b/src/Configuration.ts
index 8f3d16f..a7ab0b1 100644
--- a/src/Configuration.ts
+++ b/src/Configuration.ts
@@ -21,6 +21,11 @@ export enum AutoExpand {
   None,
 }
 
+export enum Layout {
+  Horizontal,
+  Vertical,
+}
+
 export interface Configuration {
   providerFactory: ProviderFactory;
   providerParams: { [key: string]: string };
@@ -31,6 +36,7 @@ export interface Configuration {
   refreshInterval: number;
   showHourlyPrecipitation: boolean;
   showHourlyWind: boolean;
+  layout: Layout;
 }
 
 const DEFAULT_CONFIGURATION: Configuration = {
@@ -43,6 +49,7 @@ const DEFAULT_CONFIGURATION: Configuration = {
   refreshInterval: 2 * 3600,
   showHourlyPrecipitation: true,
   showHourlyWind: true,
+  layout: Layout.Horizontal,
 };
 
 function decodeConfiguration(params: { [key: string]: string }): Configuration {
@@ -63,6 +70,7 @@ function decodeConfiguration(params: { [key: string]: string }): Configuration {
   const showHourlyPrecipitation =
     params['hourly_precipitation'] === undefined ? DEFAULT_CONFIGURATION.showHourlyPrecipitation : params['hourly_precipitation'] === 'true' ? true : false;
   const showHourlyWind = params['hourly_wind'] === undefined ? DEFAULT_CONFIGURATION.showHourlyWind : params['hourly_wind'] === 'true' ? true : false;
+  const layout = params['layout'] === 'vertical' ? Layout.Vertical : Layout.Horizontal;
 
   return {
     providerFactory,
@@ -74,6 +82,7 @@ function decodeConfiguration(params: { [key: string]: string }): Configuration {
     refreshInterval,
     showHourlyPrecipitation,
     showHourlyWind,
+    layout,
   };
 }
 
@@ -107,7 +116,9 @@ function encodeConfiguration(configuration: Configuration): object {
   if (configuration.showHourlyWind !== DEFAULT_CONFIGURATION.showHourlyWind) {
     params['hourly_wind'] = configuration.showHourlyWind.toString();
   }
-
+  if (configuration.layout !== DEFAULT_CONFIGURATION.layout) {
+    params['layout'] = configuration.layout.toString();
+  }
   return params;
 }
 
diff --git a/src/SettingsModal.svelte b/src/SettingsModal.svelte
index c3bf738..493704c 100644
--- a/src/SettingsModal.svelte
+++ b/src/SettingsModal.svelte
@@ -4,7 +4,7 @@
 
   import { ProviderFactories } from './providers';
   import { Location } from './providers/Location';
-  import { Units, AutoExpand, loadConfiguration, storeConfiguration } from './Configuration';
+  import { Units, AutoExpand, loadConfiguration, Layout, storeConfiguration } from './Configuration';
 
   import { Modal, Tabs, TabItem, Label, Select, Input, Hr, Button, ButtonGroup, Spinner, Radio, Checkbox } from 'flowbite-svelte';
   import Icon from '@iconify/svelte';
@@ -29,6 +29,7 @@
   let showHourlyPrecipitation: boolean;
   let showHourlyWind: boolean;
   let valid: boolean;
+  let layout: Layout;
 
   /* Loading State for location */
   let locationLoading: boolean = false;
@@ -51,6 +52,7 @@
     title = currentConfiguration.title;
     showHourlyPrecipitation = currentConfiguration.showHourlyPrecipitation;
     showHourlyWind = currentConfiguration.showHourlyWind;
+    layout = currentConfiguration.layout;
 
     updateProviderParams();
 
@@ -88,6 +90,7 @@
       refreshInterval: currentConfiguration.refreshInterval,
       showHourlyPrecipitation,
       showHourlyWind,
+      layout,
     };
 
     storeConfiguration(configuration);
@@ -203,6 +206,17 @@
               bind:value={autoexpand}
             />
           </div>
+          <div>
+            <Label for="select-layout" class="mb-2">Layout</Label>
+            <Select
+              id="select-layout"
+              items={[
+                { name: 'Horizontal', value: Layout.Horizontal },
+                { name: 'Vertical', value: Layout.Vertical },
+              ]}
+              bind:value={layout}
+            />
+          </div>
           <div>
             <Checkbox bind:checked={showHourlyPrecipitation}>Show Hourly Precipitation Chart</Checkbox>
           </div>
diff --git a/src/components/HourlyDetails.svelte b/src/components/HourlyDetails.svelte
index 314c89b..59d8ad0 100644
--- a/src/components/HourlyDetails.svelte
+++ b/src/components/HourlyDetails.svelte
@@ -62,7 +62,7 @@
     [ConditionsIcon.Thunderstorm]: HourlyConditions.Rain,
   };
 
-  const MIN_TEMPERATURE_OPACITY = 0.25;
+  const MIN_TEMPERATURE_OPACITY = 0.35;
 
   /* State */
 

From 06b5e39dfbd1ed7a4b3df93b9a21babc07cca186 Mon Sep 17 00:00:00 2001
From: patel-jeel92 <patel.jeel92@gmail.com>
Date: Tue, 23 Jan 2024 22:43:59 -0500
Subject: [PATCH 2/9] Fix saving configuration correctly

---
 src/Configuration.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Configuration.ts b/src/Configuration.ts
index a7ab0b1..35c655c 100644
--- a/src/Configuration.ts
+++ b/src/Configuration.ts
@@ -117,7 +117,7 @@ function encodeConfiguration(configuration: Configuration): object {
     params['hourly_wind'] = configuration.showHourlyWind.toString();
   }
   if (configuration.layout !== DEFAULT_CONFIGURATION.layout) {
-    params['layout'] = configuration.layout.toString();
+    params['layout'] = configuration.layout === Layout.Vertical ? 'vertical' : 'horizontal';
   }
   return params;
 }

From be41681f9d784f23268ae0b54d0839e3a660508a Mon Sep 17 00:00:00 2001
From: patel-jeel92 <patel.jeel92@gmail.com>
Date: Tue, 23 Jan 2024 22:44:15 -0500
Subject: [PATCH 3/9] Increase the precision for lat and long

---
 src/providers/Location.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/providers/Location.ts b/src/providers/Location.ts
index 9803a98..b7d5807 100644
--- a/src/providers/Location.ts
+++ b/src/providers/Location.ts
@@ -27,7 +27,7 @@ export class Location {
     return new Promise(function (resolve) {
       window.navigator.geolocation.getCurrentPosition(
         (position: GeolocationPosition) => {
-          resolve(new Location(position.coords.latitude.toFixed(3), position.coords.longitude.toFixed(3)));
+          resolve(new Location(position.coords.latitude.toFixed(7), position.coords.longitude.toFixed(7)));
         },
         (error: GeolocationPositionError) => {
           console.error(`Error getting geolocation: ${error.message} (${error.code})`);

From ce1d2d38f43b3d627c18f4fe8f035985ea610e8d Mon Sep 17 00:00:00 2001
From: patel-jeel92 <patel.jeel92@gmail.com>
Date: Tue, 23 Jan 2024 22:44:42 -0500
Subject: [PATCH 4/9] Add vertical layout

---
 src/App.svelte                                | 42 ++++++------
 src/components/CurrentDetails.svelte          | 11 +++-
 .../DailyPrecipitationDetails.svelte          | 26 ++++++++
 src/components/DailySunDetails.svelte         | 18 ++++++
 src/components/HourlyDetails.svelte           | 64 ++++++++++++++++++-
 src/components/scalars/Temperature.svelte     |  7 +-
 src/providers/Provider.ts                     | 10 +++
 7 files changed, 155 insertions(+), 23 deletions(-)
 create mode 100644 src/components/DailyPrecipitationDetails.svelte
 create mode 100644 src/components/DailySunDetails.svelte

diff --git a/src/App.svelte b/src/App.svelte
index 2a5e218..fdb2886 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -20,7 +20,7 @@
   import type { ProviderFactory, Provider, Weather } from './providers/Provider';
   import { Location } from './providers/Location';
   import { ExampleProvider } from './providers/ExampleProvider';
-  import { AutoExpand, configuration } from './Configuration';
+  import { AutoExpand, configuration, Layout } from './Configuration';
 
   import Timestamp from './components/scalars/Timestamp.svelte';
   import CurrentDetails from './components/CurrentDetails.svelte';
@@ -128,11 +128,16 @@
 
   <div class="container mx-auto">
     {#if weather}
+      {@const { sunset_timestamp, sunrise_timestamp, precipitation_amount, precipitation_probability } = weather.daily[0]}
       <div class="mb-6">
-        <CurrentDetails current={weather.current} />
+        <CurrentDetails
+          current={weather.current}
+          suntimes={{ sunset_timestamp, sunrise_timestamp }}
+          precipitation={{ precipitation_probability, precipitation_amount }}
+        />
       </div>
       <div class="mx-6 mb-6">
-        <HourlyDetails hourly={weather.current.hourly} />
+        <HourlyDetails hourly={weather.current.hourly} today />
       </div>
       <Accordion
         multiple
@@ -141,20 +146,21 @@
         class="text-inherit dark:text-inherit mx-2 sm:mx-0"
       >
         {#each weather.daily as daily, i}
-          <AccordionItem
-            class="!px-2 !py-3 md:!p-4"
-            paddingDefault="py-4 px-4 md:px-14"
-            open={$configuration.autoexpand === AutoExpand.All || (i === 0 && $configuration.autoexpand === AutoExpand.Today)}
-          >
-            <DailySummary
-              slot="header"
-              current={weather.current}
-              {daily}
-              global_low={Math.min(...weather.daily.map((d) => d.temperature_low))}
-              global_high={Math.max(...weather.daily.map((d) => d.temperature_high))}
-            />
-            <div class="grid gap-y-4 mb-2">
+          {#if ($configuration.layout === Layout.Vertical && i > 0) || $configuration.layout === Layout.Horizontal}
+            <AccordionItem
+              class="!px-2 md:!px-4 py-4 md:px-8"
+              paddingDefault="py-4 px-4 md:px-14"
+              open={$configuration.autoexpand === AutoExpand.All || (i === 0 && $configuration.autoexpand === AutoExpand.Today)}
+            >
+              <DailySummary
+                slot="header"
+                current={weather.current}
+                {daily}
+                global_low={Math.min(...weather.daily.map((d) => d.temperature_low))}
+                global_high={Math.max(...weather.daily.map((d) => d.temperature_high))}
+              />
               <DailyDetails {daily} />
+              <br />
               <HourlyDetails hourly={daily.hourly} />
               {#if daily.hourly[0].precipitation_probability !== undefined && $configuration.showHourlyPrecipitation}
                 <HourlyPrecipitationChart index={i} hourly={[...daily.hourly, ...(weather.daily[i + 1] ? [weather.daily[i + 1].hourly[0]] : [])]} />
@@ -162,8 +168,8 @@
               {#if daily.hourly[0].wind_speed !== undefined && $configuration.showHourlyWind}
                 <HourlyWindChart index={i} hourly={[...daily.hourly, ...(weather.daily[i + 1] ? [weather.daily[i + 1].hourly[0]] : [])]} />
               {/if}
-            </div>
-          </AccordionItem>
+            </AccordionItem>
+          {/if}
         {/each}
       </Accordion>
     {:else if error}
diff --git a/src/components/CurrentDetails.svelte b/src/components/CurrentDetails.svelte
index 3b77724..6e567b8 100644
--- a/src/components/CurrentDetails.svelte
+++ b/src/components/CurrentDetails.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { CurrentWeather } from '../providers/Provider';
+  import type { CurrentWeather, SunTimes, DailyPrecipitation } from '../providers/Provider';
 
   import Conditions from './scalars/Conditions.svelte';
   import ConditionsIcon from './scalars/ConditionsIcon.svelte';
@@ -9,8 +9,15 @@
   import UVIndex from './scalars/UVIndex.svelte';
   import Distance from './scalars/Distance.svelte';
   import Pressure from './scalars/Pressure.svelte';
+  import DailySunDetails from './DailySunDetails.svelte';
+  import DailyPrecipitationDetails from './DailyPrecipitationDetails.svelte';
 
+  import Icon from '@iconify/svelte';
+
+  import Timestamp from './scalars/Timestamp.svelte';
   export let current: CurrentWeather;
+  export let suntimes: SunTimes;
+  export let precipitation: DailyPrecipitation;
 </script>
 
 <div>
@@ -36,5 +43,7 @@
       <div><span class="font-semibold">Visibility: </span><Distance value={current.visibility} /></div>
     {/if}
     <div><span class="font-semibold">Pressure: </span><Pressure value={current.pressure} /></div>
+    <DailySunDetails {suntimes} />
+    <!-- <DailyPrecipitationDetails {precipitation} /> -->
   </div>
 </div>
diff --git a/src/components/DailyPrecipitationDetails.svelte b/src/components/DailyPrecipitationDetails.svelte
new file mode 100644
index 0000000..e7172a9
--- /dev/null
+++ b/src/components/DailyPrecipitationDetails.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { DailyPrecipitation } from '../providers/Provider';
+
+  import Amount from './scalars/Amount.svelte';
+
+  export let precipitation: DailyPrecipitation;
+</script>
+
+{#if precipitation.precipitation_probability !== undefined && precipitation.precipitation_amount !== undefined}
+  <div>
+    <span class="text-sm md:text-base font-semibold">Precipitation:</span> <span class="text-sm md:text-base">{precipitation.precipitation_probability}%</span>
+  </div>
+  <div>
+    <span class="text-sm md:text-base font-semibold">Amount:</span>
+    <Amount value={precipitation.precipitation_amount} />
+  </div>
+{:else if precipitation.precipitation_probability !== undefined}
+  <div>
+    <span class="text-sm md:text-base font-semibold">Precipitation:</span> <span class="text-sm md:text-base">{precipitation.precipitation_probability}%</span>
+  </div>
+{:else if precipitation.precipitation_amount !== undefined}
+  <div>
+    <span class="text-sm md:text-base font-semibold">Precipitation:</span>
+    <span class="text-sm md:text-base"><Amount value={precipitation.precipitation_amount} /></span>
+  </div>
+{/if}
diff --git a/src/components/DailySunDetails.svelte b/src/components/DailySunDetails.svelte
new file mode 100644
index 0000000..523d16e
--- /dev/null
+++ b/src/components/DailySunDetails.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { SunTimes } from '../providers/Provider';
+
+  import Icon from '@iconify/svelte';
+
+  import Timestamp from './scalars/Timestamp.svelte';
+
+  export let suntimes: SunTimes;
+</script>
+
+<div>
+  <span style="transform:translate(-2px,-2px)"><Icon icon="mingcute:sunrise-line" class="inline text-2xl sm:text-3xl align-bottom" /></span>
+  <span class="font-semibold">Sunrise: </span><Timestamp format="short" value={suntimes.sunrise_timestamp} />
+</div>
+<div>
+  <span style="transform:translate(-2px,-2px)"><Icon icon="mingcute:sunset-fill" class="inline text-2xl sm:text-3xl align-bottom" /></span>
+  <span class="font-semibold">Sunset: </span><Timestamp format="short" value={suntimes.sunset_timestamp} />
+</div>
diff --git a/src/components/HourlyDetails.svelte b/src/components/HourlyDetails.svelte
index 59d8ad0..a08e91e 100644
--- a/src/components/HourlyDetails.svelte
+++ b/src/components/HourlyDetails.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { ConditionsIcon } from '../providers/Provider';
   import type { HourlyWeather } from '../providers/Provider';
+  import { configuration, Layout } from '../Configuration';
 
   import Temperature from './scalars/Temperature.svelte';
   import Timestamp from './scalars/Timestamp.svelte';
@@ -8,6 +9,7 @@
   /* Properties */
 
   export let hourly: HourlyWeather[] = [];
+  export let today: boolean = false;
 
   /* Constants */
 
@@ -72,6 +74,7 @@
   }[] = [];
   let temperatureLow: number;
   let temperatureHigh: number;
+  let selectedPill = 'Temp';
 
   function temperatureOpacity(value: number): string {
     let percent = (value - temperatureLow) / (temperatureHigh - temperatureLow);
@@ -97,7 +100,7 @@
   }
 </script>
 
-<div class="-mb-2">
+{#if $configuration.layout === Layout.Horizontal}
   <div class="flex mb-1.5 overflow-hidden rounded-md text-sm sm:text-base">
     {#each aggregation as entry}
       <div class="h-10 leading-9 {CLASS_TEXT_MAP[entry.conditions][0]} text-center" style="width: {(100 * entry.duration) / 24}%;">
@@ -146,4 +149,61 @@
     {/each}
     <div style="width: {100 / 24}%;" />
   </div>
-</div>
+{:else if $configuration.layout === Layout.Vertical}
+  <div class="flex flex-row mx-auto">
+    <div class="flex flex-col w-9 overflow-hidden rounded-md text-sm sm:text-base">
+      {#each aggregation as entry}
+        <div class={CLASS_TEXT_MAP[entry.conditions][0]} style="height: {(100 * entry.duration) / 24}%;"></div>
+      {/each}
+    </div>
+    <div class="text-sm ml-2 grow">
+      <div style="height:{100 / 24}%;transform:translateY(2px);" class="grow flex items-top">
+        {#if today}
+          <span class="font-bold w-9 mr-2 inline-block text-right">Now</span>
+        {:else}
+          <span class="font-bold w-9 mr-2 inline-block text-right">
+            <Timestamp value={hourly[0].timestamp} format="hour" />
+          </span>
+        {/if}
+        <span class="font-normal italic mr-2">{hourly[0].conditions}</span>
+        <span class="min-w-fit inline-block border-solid border-b-[1px] border-slate-300 grow h-2/4"></span>
+      </div>
+      <div style="height:{100 / 24}%;transform:translateY(2px);">&nbsp;</div>
+      {#each Array(11) as _, i}
+        {@const timestamp = hourly[2 * (i + 1)].timestamp}
+        {@const condition = hourly[2 * (i + 1)].conditions}
+        {@const previousCondition = hourly[2 * i].conditions}
+        {@const newCondition = previousCondition !== condition}
+        {@const width = (100 * (hourly[2 * i + 1].temperature - temperatureLow)) / (temperatureHigh - temperatureLow)}
+        <div style="height:{100 / 24}%;transform:translateY(2px);" class="font-bold grow flex items-top">
+          <span class="w-9 mr-2 inline-block text-right"><Timestamp value={timestamp} format="hour" /></span>
+          <span class="font-normal italic mr-2 {newCondition ? 'block' : 'hidden'}">{newCondition ? condition : ''}</span>
+          <span class="min-w-fit inline-block border-solid border-b-[1px] border-slate-300 grow h-2/4" style="min-width: calc({width}% - 50px)"></span>
+        </div>
+        <div style="height:{100 / 24}%;background:transparent;">&nbsp;</div>
+      {/each}
+    </div>
+    <div class="grow text-base sm:text-lg font-light text-black dark:text-white">
+      {#each Array(12) as _, i}
+        {@const temperature = hourly[2 * i].temperature}
+        {@const width = (100 * (temperature - temperatureLow)) / (temperatureHigh - temperatureLow)}
+        <div style="height:{100 / 24}%;transform:translateY(2px);" class="grow flex items-top">
+          <span class="min-w-fit inline-block border-solid border-b-[1px] border-slate-300 h-2/4" style="min-width: calc({width}% - 50px);"></span>
+          <span class="ml-2" style="transform:translateY(-1px);"><Temperature pill value={temperature} /></span>
+        </div>
+        <div style="height:{100 / 24}%;">&nbsp;</div>
+      {/each}
+    </div>
+  </div>
+  <!-- <div class="flex flex-row mx-auto justify-between mt-8 mb-8 space-x-2 sm:space-x-0">
+    {#each ['Temp', 'Feels like', 'wind ', 'Percipitation', 'Pressure', 'UV Index'] as text}
+      <span
+        class="border border-slate-300 rounded-full px-2 py-0.5 font-medium text-center"
+        on:click={() => (selectedPill = text)}
+        on:keydown={() => (selectedPill = text)}
+        role="button"
+        tabindex="0">{text}</span
+      >
+    {/each}
+  </div> -->
+{/if}
diff --git a/src/components/scalars/Temperature.svelte b/src/components/scalars/Temperature.svelte
index 9c84d77..52406c0 100644
--- a/src/components/scalars/Temperature.svelte
+++ b/src/components/scalars/Temperature.svelte
@@ -2,14 +2,17 @@
   import { configuration, Units } from '../../Configuration';
 
   export let value: number = 0;
+  export let pill: boolean = false;
 
   function cToF(temperature: number): number {
     return (temperature * 9) / 5 + 32;
   }
+
+  $: pillStyle = pill ? 'border border-slate-300 rounded-full px-2 py-0.5 font-medium' : '';
 </script>
 
 {#if $configuration.units === Units.Imperial}
-  <span>{cToF(value).toFixed(0)}°</span>
+  <span class={pillStyle}>{cToF(value).toFixed(0)}°</span>
 {:else}
-  <span>{value.toFixed(1)}°</span>
+  <span class={pillStyle}>{value.toFixed(1)}°</span>
 {/if}
diff --git a/src/providers/Provider.ts b/src/providers/Provider.ts
index 3e84c9d..c601dba 100644
--- a/src/providers/Provider.ts
+++ b/src/providers/Provider.ts
@@ -66,6 +66,16 @@ export interface HourlyWeather {
   precipitation_type?: PrecipitationType;
 }
 
+export interface SunTimes {
+  sunrise_timestamp: Date;
+  sunset_timestamp: Date;
+}
+
+export interface DailyPrecipitation {
+  precipitation_probability?: number; // in integral percent 0-100
+  precipitation_amount?: number; // in mm
+}
+
 export interface Weather {
   current: CurrentWeather;
   daily: DailyWeather[];

From 9e205ee4bfcdbdb8030ceaf3de3b43f8a2051f64 Mon Sep 17 00:00:00 2001
From: patel-jeel92 <patel.jeel92@gmail.com>
Date: Tue, 23 Jan 2024 23:00:55 -0500
Subject: [PATCH 5/9] Extract Horizontal and Vertical Layout in its own
 components

---
 src/components/HourlyDetails.svelte          | 116 +------------------
 src/components/HourlyHorizontalLayout.svelte |  70 +++++++++++
 src/components/HourlyVerticalLayout.svelte   |  58 ++++++++++
 3 files changed, 132 insertions(+), 112 deletions(-)
 create mode 100644 src/components/HourlyHorizontalLayout.svelte
 create mode 100644 src/components/HourlyVerticalLayout.svelte

diff --git a/src/components/HourlyDetails.svelte b/src/components/HourlyDetails.svelte
index a08e91e..bb0513c 100644
--- a/src/components/HourlyDetails.svelte
+++ b/src/components/HourlyDetails.svelte
@@ -3,6 +3,8 @@
   import type { HourlyWeather } from '../providers/Provider';
   import { configuration, Layout } from '../Configuration';
 
+  import HourlyVerticalLayout from './HourlyVerticalLayout.svelte';
+  import HourlyHorizontalLayout from './HourlyHorizontalLayout.svelte';
   import Temperature from './scalars/Temperature.svelte';
   import Timestamp from './scalars/Timestamp.svelte';
 
@@ -64,8 +66,6 @@
     [ConditionsIcon.Thunderstorm]: HourlyConditions.Rain,
   };
 
-  const MIN_TEMPERATURE_OPACITY = 0.35;
-
   /* State */
 
   let aggregation: {
@@ -76,12 +76,6 @@
   let temperatureHigh: number;
   let selectedPill = 'Temp';
 
-  function temperatureOpacity(value: number): string {
-    let percent = (value - temperatureLow) / (temperatureHigh - temperatureLow);
-    const opacity = percent * (1 - MIN_TEMPERATURE_OPACITY) + MIN_TEMPERATURE_OPACITY;
-    return opacity.toFixed(2);
-  }
-
   $: {
     /* Aggregate conditions into contiguous regions */
     aggregation = [];
@@ -101,109 +95,7 @@
 </script>
 
 {#if $configuration.layout === Layout.Horizontal}
-  <div class="flex mb-1.5 overflow-hidden rounded-md text-sm sm:text-base">
-    {#each aggregation as entry}
-      <div class="h-10 leading-9 {CLASS_TEXT_MAP[entry.conditions][0]} text-center" style="width: {(100 * entry.duration) / 24}%;">
-        {#if entry.duration > 4}
-          <div class="truncate">{CLASS_TEXT_MAP[entry.conditions][1]}</div>
-        {:else if entry.duration > 2}
-          <div class="hidden md:block truncate">{CLASS_TEXT_MAP[entry.conditions][1]}</div>
-        {/if}
-      </div>
-    {/each}
-  </div>
-  <div class="flex w-full mb-1">
-    {#each Array(25) as _, i}
-      <div class="{i % 2 === 0 ? 'h-[8px]' : 'h-[5px]'} border-l border-gray-400" style="width: {i < 24 ? 100 / 24 : 0}%;" />
-    {/each}
-  </div>
-  <div class="flex w-full text-xs sm:text-sm">
-    <div style="width: {100 / 24}%;">
-      <div class="hidden md:block">
-        <Timestamp value={hourly[0].timestamp} format="hour" />
-      </div>
-    </div>
-    {#each Array(11) as _, i}
-      {@const timestamp = hourly[2 * (i + 1)].timestamp}
-      <div class="text-center" style="width: {100 / 12}%;">
-        <div class="{i === 0 || i === 2 || i === 4 || i === 6 || i === 8 || i === 10 ? 'block' : 'hidden'} md:block">
-          <Timestamp value={timestamp} format="hour" />
-        </div>
-      </div>
-    {/each}
-    <div style="width: {100 / 24}%;" />
-  </div>
-  <div class="flex w-full text-base sm:text-lg font-light text-black dark:text-white">
-    <div style="width: {100 / 24}%; opacity: {temperatureOpacity(hourly[0].temperature)};">
-      <div class="hidden md:block">
-        <Temperature value={hourly[0].temperature} />
-      </div>
-    </div>
-    {#each Array(11) as _, i}
-      {@const temperature = hourly[2 * (i + 1)].temperature}
-      <div class="text-center" style="width: {100 / 12}%; opacity: {temperatureOpacity(temperature)};">
-        <div class="{i === 0 || i === 2 || i === 4 || i === 6 || i === 8 || i === 10 ? 'block' : 'hidden'} md:block">
-          &nbsp;<Temperature value={temperature} />
-        </div>
-      </div>
-    {/each}
-    <div style="width: {100 / 24}%;" />
-  </div>
+  <HourlyHorizontalLayout {aggregation} {hourly} {temperatureLow} {temperatureHigh} {CLASS_TEXT_MAP} />
 {:else if $configuration.layout === Layout.Vertical}
-  <div class="flex flex-row mx-auto">
-    <div class="flex flex-col w-9 overflow-hidden rounded-md text-sm sm:text-base">
-      {#each aggregation as entry}
-        <div class={CLASS_TEXT_MAP[entry.conditions][0]} style="height: {(100 * entry.duration) / 24}%;"></div>
-      {/each}
-    </div>
-    <div class="text-sm ml-2 grow">
-      <div style="height:{100 / 24}%;transform:translateY(2px);" class="grow flex items-top">
-        {#if today}
-          <span class="font-bold w-9 mr-2 inline-block text-right">Now</span>
-        {:else}
-          <span class="font-bold w-9 mr-2 inline-block text-right">
-            <Timestamp value={hourly[0].timestamp} format="hour" />
-          </span>
-        {/if}
-        <span class="font-normal italic mr-2">{hourly[0].conditions}</span>
-        <span class="min-w-fit inline-block border-solid border-b-[1px] border-slate-300 grow h-2/4"></span>
-      </div>
-      <div style="height:{100 / 24}%;transform:translateY(2px);">&nbsp;</div>
-      {#each Array(11) as _, i}
-        {@const timestamp = hourly[2 * (i + 1)].timestamp}
-        {@const condition = hourly[2 * (i + 1)].conditions}
-        {@const previousCondition = hourly[2 * i].conditions}
-        {@const newCondition = previousCondition !== condition}
-        {@const width = (100 * (hourly[2 * i + 1].temperature - temperatureLow)) / (temperatureHigh - temperatureLow)}
-        <div style="height:{100 / 24}%;transform:translateY(2px);" class="font-bold grow flex items-top">
-          <span class="w-9 mr-2 inline-block text-right"><Timestamp value={timestamp} format="hour" /></span>
-          <span class="font-normal italic mr-2 {newCondition ? 'block' : 'hidden'}">{newCondition ? condition : ''}</span>
-          <span class="min-w-fit inline-block border-solid border-b-[1px] border-slate-300 grow h-2/4" style="min-width: calc({width}% - 50px)"></span>
-        </div>
-        <div style="height:{100 / 24}%;background:transparent;">&nbsp;</div>
-      {/each}
-    </div>
-    <div class="grow text-base sm:text-lg font-light text-black dark:text-white">
-      {#each Array(12) as _, i}
-        {@const temperature = hourly[2 * i].temperature}
-        {@const width = (100 * (temperature - temperatureLow)) / (temperatureHigh - temperatureLow)}
-        <div style="height:{100 / 24}%;transform:translateY(2px);" class="grow flex items-top">
-          <span class="min-w-fit inline-block border-solid border-b-[1px] border-slate-300 h-2/4" style="min-width: calc({width}% - 50px);"></span>
-          <span class="ml-2" style="transform:translateY(-1px);"><Temperature pill value={temperature} /></span>
-        </div>
-        <div style="height:{100 / 24}%;">&nbsp;</div>
-      {/each}
-    </div>
-  </div>
-  <!-- <div class="flex flex-row mx-auto justify-between mt-8 mb-8 space-x-2 sm:space-x-0">
-    {#each ['Temp', 'Feels like', 'wind ', 'Percipitation', 'Pressure', 'UV Index'] as text}
-      <span
-        class="border border-slate-300 rounded-full px-2 py-0.5 font-medium text-center"
-        on:click={() => (selectedPill = text)}
-        on:keydown={() => (selectedPill = text)}
-        role="button"
-        tabindex="0">{text}</span
-      >
-    {/each}
-  </div> -->
+  <HourlyVerticalLayout {aggregation} {today} {hourly} {temperatureLow} {temperatureHigh} {CLASS_TEXT_MAP} />
 {/if}
diff --git a/src/components/HourlyHorizontalLayout.svelte b/src/components/HourlyHorizontalLayout.svelte
new file mode 100644
index 0000000..a4dbb6e
--- /dev/null
+++ b/src/components/HourlyHorizontalLayout.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { HourlyWeather } from '../providers/Provider';
+  import Temperature from './scalars/Temperature.svelte';
+  import Timestamp from './scalars/Timestamp.svelte';
+
+  /* Properties */
+  export let aggregation: { conditions: number; duration: number }[] = [];
+  export let hourly: HourlyWeather[] = [];
+  export let temperatureLow: number;
+  export let temperatureHigh: number;
+  export let CLASS_TEXT_MAP: { [key: number]: [string, string] };
+
+  /* State */
+  const MIN_TEMPERATURE_OPACITY = 0.35;
+
+  function temperatureOpacity(value: number): string {
+    let percent = (value - temperatureLow) / (temperatureHigh - temperatureLow);
+    const opacity = percent * (1 - MIN_TEMPERATURE_OPACITY) + MIN_TEMPERATURE_OPACITY;
+    return opacity.toFixed(2);
+  }
+</script>
+
+<div class="flex mb-1.5 overflow-hidden rounded-md text-sm sm:text-base">
+  {#each aggregation as entry}
+    <div class="h-10 leading-9 {CLASS_TEXT_MAP[entry.conditions][0]} text-center" style="width: {(100 * entry.duration) / 24}%;">
+      {#if entry.duration > 4}
+        <div class="truncate">{CLASS_TEXT_MAP[entry.conditions][1]}</div>
+      {:else if entry.duration > 2}
+        <div class="hidden md:block truncate">{CLASS_TEXT_MAP[entry.conditions][1]}</div>
+      {/if}
+    </div>
+  {/each}
+</div>
+<div class="flex w-full mb-1">
+  {#each Array(25) as _, i}
+    <div class="{i % 2 === 0 ? 'h-[8px]' : 'h-[5px]'} border-l border-gray-400" style="width: {i < 24 ? 100 / 24 : 0}%;" />
+  {/each}
+</div>
+<div class="flex w-full text-xs sm:text-sm">
+  <div style="width: {100 / 24}%;">
+    <div class="hidden md:block">
+      <Timestamp value={hourly[0].timestamp} format="hour" />
+    </div>
+  </div>
+  {#each Array(11) as _, i}
+    {@const timestamp = hourly[2 * (i + 1)].timestamp}
+    <div class="text-center" style="width: {100 / 12}%;">
+      <div class="{i % 2 === 0 ? 'block' : 'hidden'} md:block">
+        <Timestamp value={timestamp} format="hour" />
+      </div>
+    </div>
+  {/each}
+  <div style="width: {100 / 24}%;" />
+</div>
+<div class="flex w-full text-base sm:text-lg font-light text-black dark:text-white">
+  <div style="width: {100 / 24}%; opacity: {temperatureOpacity(hourly[0].temperature)};">
+    <div class="hidden md:block">
+      <Temperature value={hourly[0].temperature} />
+    </div>
+  </div>
+  {#each Array(11) as _, i}
+    {@const temperature = hourly[2 * (i + 1)].temperature}
+    <div class="text-center" style="width: {100 / 12}%; opacity: {temperatureOpacity(temperature)};">
+      <div class="{i % 2 === 0 ? 'block' : 'hidden'} md:block">
+        &nbsp;<Temperature value={temperature} />
+      </div>
+    </div>
+  {/each}
+  <div style="width: {100 / 24}%;" />
+</div>
diff --git a/src/components/HourlyVerticalLayout.svelte b/src/components/HourlyVerticalLayout.svelte
new file mode 100644
index 0000000..87c7310
--- /dev/null
+++ b/src/components/HourlyVerticalLayout.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { HourlyWeather } from '../providers/Provider';
+  import Temperature from './scalars/Temperature.svelte';
+  import Timestamp from './scalars/Timestamp.svelte';
+  /* Properties */
+  export let aggregation: { conditions: number; duration: number }[] = [];
+  export let today: boolean = false;
+  export let hourly: HourlyWeather[] = [];
+  export let temperatureLow: number;
+  export let temperatureHigh: number;
+  export let CLASS_TEXT_MAP: { [key: number]: [string, string] };
+</script>
+
+<div class="flex flex-row mx-auto">
+  <div class="flex flex-col w-9 overflow-hidden rounded-md text-sm sm:text-base">
+    {#each aggregation as entry}
+      <div class={CLASS_TEXT_MAP[entry.conditions][0]} style="height: {(100 * entry.duration) / 24}%;"></div>
+    {/each}
+  </div>
+  <div class="text-sm ml-2 grow">
+    <div style="height:{100 / 24}%;transform:translateY(2px);" class="grow flex items-top">
+      {#if today}
+        <span class="font-bold w-9 mr-2 inline-block text-right">Now</span>
+      {:else}
+        <span class="font-bold w-9 mr-2 inline-block text-right">
+          <Timestamp value={hourly[0].timestamp} format="hour" />
+        </span>
+      {/if}
+      <span class="font-normal italic mr-2">{hourly[0].conditions}</span>
+      <span class="min-w-fit inline-block border-solid border-b-[1px] border-slate-300 grow h-2/4"></span>
+    </div>
+    <div style="height:{100 / 24}%;transform:translateY(2px);">&nbsp;</div>
+    {#each Array(11) as _, i}
+      {@const timestamp = hourly[2 * (i + 1)].timestamp}
+      {@const condition = hourly[2 * (i + 1)].conditions}
+      {@const previousCondition = hourly[2 * i].conditions}
+      {@const newCondition = previousCondition !== condition}
+      {@const width = (100 * (hourly[2 * i + 1].temperature - temperatureLow)) / (temperatureHigh - temperatureLow)}
+      <div style="height:{100 / 24}%;transform:translateY(2px);" class="font-bold grow flex items-top">
+        <span class="w-9 mr-2 inline-block text-right"><Timestamp value={timestamp} format="hour" /></span>
+        <span class="font-normal italic mr-2 {newCondition ? 'block' : 'hidden'}">{newCondition ? condition : ''}</span>
+        <span class="min-w-fit inline-block border-solid border-b-[1px] border-slate-300 grow h-2/4" style="min-width: calc({width}% - 50px)"></span>
+      </div>
+      <div style="height:{100 / 24}%;background:transparent;">&nbsp;</div>
+    {/each}
+  </div>
+  <div class="grow text-base sm:text-lg font-light text-black dark:text-white">
+    {#each Array(12) as _, i}
+      {@const temperature = hourly[2 * i].temperature}
+      {@const width = (100 * (temperature - temperatureLow)) / (temperatureHigh - temperatureLow)}
+      <div style="height:{100 / 24}%;transform:translateY(2px);" class="grow flex items-top">
+        <span class="min-w-fit inline-block border-solid border-b-[1px] border-slate-300 h-2/4" style="min-width: calc({width}% - 50px);"></span>
+        <span class="ml-2" style="transform:translateY(-1px);"><Temperature pill value={temperature} /></span>
+      </div>
+      <div style="height:{100 / 24}%;">&nbsp;</div>
+    {/each}
+  </div>
+</div>

From 4d00dde3a0b32d7653b64a96cfa53432d085d587 Mon Sep 17 00:00:00 2001
From: patel-jeel92 <patel.jeel92@gmail.com>
Date: Thu, 25 Jan 2024 10:40:32 -0500
Subject: [PATCH 6/9] Fix today accordian not showing up

---
 src/App.svelte                             | 46 +++++++++++-----------
 src/components/HourlyVerticalLayout.svelte |  6 +--
 2 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index fdb2886..14aef75 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -146,30 +146,28 @@
         class="text-inherit dark:text-inherit mx-2 sm:mx-0"
       >
         {#each weather.daily as daily, i}
-          {#if ($configuration.layout === Layout.Vertical && i > 0) || $configuration.layout === Layout.Horizontal}
-            <AccordionItem
-              class="!px-2 md:!px-4 py-4 md:px-8"
-              paddingDefault="py-4 px-4 md:px-14"
-              open={$configuration.autoexpand === AutoExpand.All || (i === 0 && $configuration.autoexpand === AutoExpand.Today)}
-            >
-              <DailySummary
-                slot="header"
-                current={weather.current}
-                {daily}
-                global_low={Math.min(...weather.daily.map((d) => d.temperature_low))}
-                global_high={Math.max(...weather.daily.map((d) => d.temperature_high))}
-              />
-              <DailyDetails {daily} />
-              <br />
-              <HourlyDetails hourly={daily.hourly} />
-              {#if daily.hourly[0].precipitation_probability !== undefined && $configuration.showHourlyPrecipitation}
-                <HourlyPrecipitationChart index={i} hourly={[...daily.hourly, ...(weather.daily[i + 1] ? [weather.daily[i + 1].hourly[0]] : [])]} />
-              {/if}
-              {#if daily.hourly[0].wind_speed !== undefined && $configuration.showHourlyWind}
-                <HourlyWindChart index={i} hourly={[...daily.hourly, ...(weather.daily[i + 1] ? [weather.daily[i + 1].hourly[0]] : [])]} />
-              {/if}
-            </AccordionItem>
-          {/if}
+          <AccordionItem
+            class="!px-2 md:!px-4 py-4 md:px-8"
+            paddingDefault="py-4 px-4 md:px-14"
+            open={$configuration.autoexpand === AutoExpand.All || (i === 0 && $configuration.autoexpand === AutoExpand.Today)}
+          >
+            <DailySummary
+              slot="header"
+              current={weather.current}
+              {daily}
+              global_low={Math.min(...weather.daily.map((d) => d.temperature_low))}
+              global_high={Math.max(...weather.daily.map((d) => d.temperature_high))}
+            />
+            <DailyDetails {daily} />
+            <br />
+            <HourlyDetails hourly={daily.hourly} />
+            {#if daily.hourly[0].precipitation_probability !== undefined && $configuration.showHourlyPrecipitation}
+              <HourlyPrecipitationChart index={i} hourly={[...daily.hourly, ...(weather.daily[i + 1] ? [weather.daily[i + 1].hourly[0]] : [])]} />
+            {/if}
+            {#if daily.hourly[0].wind_speed !== undefined && $configuration.showHourlyWind}
+              <HourlyWindChart index={i} hourly={[...daily.hourly, ...(weather.daily[i + 1] ? [weather.daily[i + 1].hourly[0]] : [])]} />
+            {/if}
+          </AccordionItem>
         {/each}
       </Accordion>
     {:else if error}
diff --git a/src/components/HourlyVerticalLayout.svelte b/src/components/HourlyVerticalLayout.svelte
index 87c7310..56b0e5c 100644
--- a/src/components/HourlyVerticalLayout.svelte
+++ b/src/components/HourlyVerticalLayout.svelte
@@ -17,7 +17,7 @@
       <div class={CLASS_TEXT_MAP[entry.conditions][0]} style="height: {(100 * entry.duration) / 24}%;"></div>
     {/each}
   </div>
-  <div class="text-sm ml-2 grow">
+  <div class="text-sm ml-2">
     <div style="height:{100 / 24}%;transform:translateY(2px);" class="grow flex items-top">
       {#if today}
         <span class="font-bold w-9 mr-2 inline-block text-right">Now</span>
@@ -29,7 +29,7 @@
       <span class="font-normal italic mr-2">{hourly[0].conditions}</span>
       <span class="min-w-fit inline-block border-solid border-b-[1px] border-slate-300 grow h-2/4"></span>
     </div>
-    <div style="height:{100 / 24}%;transform:translateY(2px);">&nbsp;</div>
+    <div style="height:{100 / 24}%">&nbsp;</div>
     {#each Array(11) as _, i}
       {@const timestamp = hourly[2 * (i + 1)].timestamp}
       {@const condition = hourly[2 * (i + 1)].conditions}
@@ -41,7 +41,7 @@
         <span class="font-normal italic mr-2 {newCondition ? 'block' : 'hidden'}">{newCondition ? condition : ''}</span>
         <span class="min-w-fit inline-block border-solid border-b-[1px] border-slate-300 grow h-2/4" style="min-width: calc({width}% - 50px)"></span>
       </div>
-      <div style="height:{100 / 24}%;background:transparent;">&nbsp;</div>
+      <div style="height:{100 / 24}%">&nbsp;</div>
     {/each}
   </div>
   <div class="grow text-base sm:text-lg font-light text-black dark:text-white">

From 95b39c01864c53f717ca2f15c1eba4e0176f81d7 Mon Sep 17 00:00:00 2001
From: patel-jeel92 <patel.jeel92@gmail.com>
Date: Thu, 25 Jan 2024 10:44:58 -0500
Subject: [PATCH 7/9] Remove unused imports

---
 src/components/CurrentDetails.svelte | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/CurrentDetails.svelte b/src/components/CurrentDetails.svelte
index 6e567b8..c3b02ad 100644
--- a/src/components/CurrentDetails.svelte
+++ b/src/components/CurrentDetails.svelte
@@ -10,14 +10,9 @@
   import Distance from './scalars/Distance.svelte';
   import Pressure from './scalars/Pressure.svelte';
   import DailySunDetails from './DailySunDetails.svelte';
-  import DailyPrecipitationDetails from './DailyPrecipitationDetails.svelte';
 
-  import Icon from '@iconify/svelte';
-
-  import Timestamp from './scalars/Timestamp.svelte';
   export let current: CurrentWeather;
   export let suntimes: SunTimes;
-  export let precipitation: DailyPrecipitation;
 </script>
 
 <div>

From d82ff44bea63fdf1c95d5d84ce3f443b379891ba Mon Sep 17 00:00:00 2001
From: patel-jeel92 <patel.jeel92@gmail.com>
Date: Thu, 25 Jan 2024 21:02:58 -0500
Subject: [PATCH 8/9] Use <hr> instead of a span element for lines

---
 src/components/HourlyVerticalLayout.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/HourlyVerticalLayout.svelte b/src/components/HourlyVerticalLayout.svelte
index 56b0e5c..80894a4 100644
--- a/src/components/HourlyVerticalLayout.svelte
+++ b/src/components/HourlyVerticalLayout.svelte
@@ -36,10 +36,10 @@
       {@const previousCondition = hourly[2 * i].conditions}
       {@const newCondition = previousCondition !== condition}
       {@const width = (100 * (hourly[2 * i + 1].temperature - temperatureLow)) / (temperatureHigh - temperatureLow)}
-      <div style="height:{100 / 24}%;transform:translateY(2px);" class="font-bold grow flex items-top">
+      <div style="height:{100 / 24}%;transform:translateY(2px);" class="font-bold grow flex items-center">
         <span class="w-9 mr-2 inline-block text-right"><Timestamp value={timestamp} format="hour" /></span>
         <span class="font-normal italic mr-2 {newCondition ? 'block' : 'hidden'}">{newCondition ? condition : ''}</span>
-        <span class="min-w-fit inline-block border-solid border-b-[1px] border-slate-300 grow h-2/4" style="min-width: calc({width}% - 50px)"></span>
+        <hr class="h-px bg-gray-200 border-0 grow" style="min-width: calc({width}% - 50px);" />
       </div>
       <div style="height:{100 / 24}%">&nbsp;</div>
     {/each}
@@ -48,8 +48,8 @@
     {#each Array(12) as _, i}
       {@const temperature = hourly[2 * i].temperature}
       {@const width = (100 * (temperature - temperatureLow)) / (temperatureHigh - temperatureLow)}
-      <div style="height:{100 / 24}%;transform:translateY(2px);" class="grow flex items-top">
-        <span class="min-w-fit inline-block border-solid border-b-[1px] border-slate-300 h-2/4" style="min-width: calc({width}% - 50px);"></span>
+      <div style="height:{100 / 24}%;transform:translateY(2px);" class="grow flex items-center">
+        <hr class="h-px bg-gray-200 border-0" style="min-width: calc({width}% - 50px);" />
         <span class="ml-2" style="transform:translateY(-1px);"><Temperature pill value={temperature} /></span>
       </div>
       <div style="height:{100 / 24}%;">&nbsp;</div>

From 03c830d3f7d1dc4b740d6a8e3961ac20ba2c3110 Mon Sep 17 00:00:00 2001
From: patel-jeel92 <patel.jeel92@gmail.com>
Date: Thu, 25 Jan 2024 21:18:30 -0500
Subject: [PATCH 9/9] Remove unwanted component props

---
 src/App.svelte                       | 6 +-----
 src/components/CurrentDetails.svelte | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 14aef75..f34de81 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -130,11 +130,7 @@
     {#if weather}
       {@const { sunset_timestamp, sunrise_timestamp, precipitation_amount, precipitation_probability } = weather.daily[0]}
       <div class="mb-6">
-        <CurrentDetails
-          current={weather.current}
-          suntimes={{ sunset_timestamp, sunrise_timestamp }}
-          precipitation={{ precipitation_probability, precipitation_amount }}
-        />
+        <CurrentDetails current={weather.current} suntimes={{ sunset_timestamp, sunrise_timestamp }} />
       </div>
       <div class="mx-6 mb-6">
         <HourlyDetails hourly={weather.current.hourly} today />
diff --git a/src/components/CurrentDetails.svelte b/src/components/CurrentDetails.svelte
index c3b02ad..cd5d41b 100644
--- a/src/components/CurrentDetails.svelte
+++ b/src/components/CurrentDetails.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { CurrentWeather, SunTimes, DailyPrecipitation } from '../providers/Provider';
+  import type { CurrentWeather, SunTimes } from '../providers/Provider';
 
   import Conditions from './scalars/Conditions.svelte';
   import ConditionsIcon from './scalars/ConditionsIcon.svelte';