Code cleanup and Story additions

web/src/App.tsx

@@ -18,7 +18,7 @@ const MapOverlays = lazy(() => import('components/MapOverlays'));
 const FAQModal = lazy(() => import('features/modals/FAQModal'));
 const InfoModal = lazy(() => import('features/modals/InfoModal'));
 const SettingsModal = lazy(() => import('features/modals/SettingsModal'));
-const TimeControllerWrapper = lazy(() => import('features/time/TimeControllerWrapper'));
+const TimeController = lazy(() => import('features/time/TimeController'));
 const AnnouncementModal = lazy(() => import('features/modals/AnnouncementModal'));
 
 const isProduction = import.meta.env.PROD;
@@ -89,7 +89,7 @@ export default function App(): ReactElement {
                 <MapWrapper />
               </Suspense>
               <Suspense>
-                <TimeControllerWrapper />
+                <TimeController />
               </Suspense>
               <Suspense>
                 <MapOverlays />

web/src/components/Badge.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Badge from './Badge';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Basics/Badge',
+  component: Badge,
+  decorators: [
+    (Story) => (
+      <div className="flex">
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: ['default', 'success', 'warning'],
+        labels: {
+          default: 'Default',
+          success: 'Success',
+          warning: 'Warning',
+        },
+      },
+    },
+  },
+  args: {
+    pillText: 'Badge',
+    type: 'default',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  name: 'Default Badge',
+};
+
+export const Success: Story = {
+  name: 'Success Badge',
+  args: {
+    type: 'success',
+  },
+};
+
+export const Warning: Story = {
+  name: 'Warning Badge',
+  args: {
+    type: 'warning',
+  },
+};

web/src/components/TimeAverageToggle.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TimeAverages } from 'utils/constants';
+
+import TimeAverageToggle from './TimeAverageToggle';
+
+const meta = {
+  component: TimeAverageToggle,
+  title: 'Toggles/TimeAverageToggle',
+  args: {
+    onToggleGroupClick: () => {},
+  },
+} satisfies Meta<typeof TimeAverageToggle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Hourly: Story = {
+  args: {
+    timeAverage: TimeAverages.HOURLY,
+  },
+};
+
+export const Daily: Story = {
+  args: {
+    timeAverage: TimeAverages.DAILY,
+  },
+};
+
+export const Monthly: Story = {
+  args: {
+    timeAverage: TimeAverages.MONTHLY,
+  },
+};
+
+export const Yearly: Story = {
+  args: {
+    timeAverage: TimeAverages.YEARLY,
+  },
+};

web/src/features/time/TimeBadge.tsx

@@ -5,17 +5,17 @@ import { useTranslation } from 'react-i18next';
 import { formatDate } from 'utils/formatting';
 import { selectedDatetimeIndexAtom, timeAverageAtom } from 'utils/state/atoms';
 
-export default function TimeHeader() {
+export default function TimeBadge() {
   const { i18n } = useTranslation();
   const [timeAverage] = useAtom(timeAverageAtom);
   const [selectedDatetime] = useAtom(selectedDatetimeIndexAtom);
   const { isLoading } = useGetState();
 
-  const date = formatDate(
+  const formattedDate = formatDate(
     new Date(selectedDatetime.datetimeString),
     i18n.language,
     timeAverage
   );
 
-  return !isLoading && <Badge pillText={date} type="success" />;
+  return !isLoading && <Badge pillText={formattedDate} type="success" />;
 }

web/src/features/time/TimeController.tsx

@@ -10,17 +10,17 @@ import trackEvent from 'utils/analytics';
 import { TimeAverages } from 'utils/constants';
 import { dateToDatetimeString } from 'utils/helpers';
 import { selectedDatetimeIndexAtom, timeAverageAtom } from 'utils/state/atoms';
-import { useIsMobile } from 'utils/styling';
+import { useIsBiggerThanMobile, useIsMobile } from 'utils/styling';
 
 import TimeAxis from './TimeAxis';
-import TimeHeader from './TimeBadge';
+import TimeBadge from './TimeBadge';
 
 const timeControllerCollapsedAtom = atomWithStorage<boolean | null>(
   'timeControllerCollapsed',
   null
 );
 
-export default function TimeController({ className }: { className?: string }) {
+function InternalTimeController({ className }: { className?: string }) {
   const { t } = useTranslation();
   const isMobile = useIsMobile();
   const [timeControllerCollapsed, setTimeControllerCollapsed] = useAtom(
@@ -85,7 +85,7 @@ export default function TimeController({ className }: { className?: string }) {
     <div className={className}>
       <Accordion
         title={t('time-controller.title')}
-        badge={<TimeHeader />}
+        badge={<TimeBadge />}
         isOnTop
         isCollapsedAtom={timeControllerCollapsedAtom}
       >
@@ -110,3 +110,24 @@ export default function TimeController({ className }: { className?: string }) {
     </div>
   );
 }
+
+function FloatingTimeController() {
+  return (
+    <div className="fixed bottom-3 left-3 z-20 w-[calc(14vw_+_16rem)] rounded-2xl bg-white/80 px-4 py-3 shadow-xl drop-shadow-2xl backdrop-blur min-[780px]:w-[calc((14vw_+_16rem)_-_30px)] xl:px-5 dark:bg-gray-800/80">
+      <InternalTimeController />
+    </div>
+  );
+}
+
+function FixedTimeController() {
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-20 w-full border-t border-neutral-200 bg-white/80 px-4 py-3 backdrop-blur dark:border-gray-700 dark:bg-gray-800/80">
+      <InternalTimeController />
+    </div>
+  );
+}
+
+export default function TimeController() {
+  const isBiggerThanMobile = useIsBiggerThanMobile();
+  return isBiggerThanMobile ? <FloatingTimeController /> : <FixedTimeController />;
+}