refactor: timeline style tweaks

apps/client/src/views/timeline/timeline.options.ts

@@ -1,6 +1,10 @@
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
 import { getTimeOption } from '../../common/components/view-params-editor/common.options';
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../common/components/view-params-editor/viewParams.types';
+import { isStringBoolean } from '../../features/viewers/common/viewUtils';
 
 export const getTimelineOptions = (timeFormat: string): ViewOption[] => {
   return [
@@ -16,7 +20,40 @@ export const getTimelineOptions = (timeFormat: string): ViewOption[] => {
           type: 'boolean',
           defaultValue: false,
         },
+        {
+          id: 'autosize',
+          title: 'Autosize timeline',
+          description: 'Timeline will adjust sizes to help with readability and automatically scroll if necessary',
+          type: 'boolean',
+          defaultValue: false,
+        },
       ],
     },
   ];
 };
+
+type TimelineOptions = {
+  hidePast: boolean;
+  autosize: boolean;
+};
+
+/**
+ * Utility extract the view options from URL Params
+ * the names and fallback are manually matched with timerOptions
+ */
+function getOptionsFromParams(searchParams: URLSearchParams): TimelineOptions {
+  // we manually make an object that matches the key above
+  return {
+    hidePast: isStringBoolean(searchParams.get('hidePast')),
+    autosize: isStringBoolean(searchParams.get('autosize')),
+  };
+}
+
+/**
+ * Hook exposes the timeline view options
+ */
+export function useTimelineOptions(): TimelineOptions {
+  const [searchParams] = useSearchParams();
+  const options = useMemo(() => getOptionsFromParams(searchParams), [searchParams]);
+  return options;
+}