make tracker script smaller and general improvement for web

apps/web/src/components/report/PreviousDiffIndicator.tsx

@@ -17,11 +17,8 @@ export function PreviousDiffIndicator({
 }: PreviousDiffIndicatorProps) {
   const { previous } = useChartContext();
   const number = useNumber();
-  if (
-    (children === undefined && (diff === null || diff === undefined)) ||
-    previous === false
-  ) {
-    return null;
+  if (diff === null || diff === undefined || previous === false) {
+    return children ?? null;
   }
 
   return (

apps/web/src/components/report/ReportSaveButton.tsx

@@ -3,6 +3,7 @@
 import { api, handleError } from '@/app/_trpc/client';
 import { Button } from '@/components/ui/button';
 import { toast } from '@/components/ui/use-toast';
+import { useAppParams } from '@/hooks/useAppParams';
 import { pushModal } from '@/modals';
 import { useDispatch, useSelector } from '@/redux';
 import { SaveIcon } from 'lucide-react';
@@ -14,7 +15,7 @@ interface ReportSaveButtonProps {
   className?: string;
 }
 export function ReportSaveButton({ className }: ReportSaveButtonProps) {
-  const { reportId } = useParams();
+  const { reportId } = useAppParams<{ reportId: string | undefined }>();
   const dispatch = useDispatch();
   const update = api.report.update.useMutation({
     onSuccess() {
@@ -36,7 +37,7 @@ export function ReportSaveButton({ className }: ReportSaveButtonProps) {
         loading={update.isLoading}
         onClick={() => {
           update.mutate({
-            reportId: reportId as string,
+            reportId: reportId,
             report,
           });
         }}

apps/web/src/components/report/sidebar/ReportBreakdowns.tsx

@@ -3,20 +3,20 @@
 import { api } from '@/app/_trpc/client';
 import { ColorSquare } from '@/components/ColorSquare';
 import { Combobox } from '@/components/ui/combobox';
+import { useAppParams } from '@/hooks/useAppParams';
 import { useDispatch, useSelector } from '@/redux';
 import type { IChartBreakdown } from '@/types';
-import { useParams } from 'next/navigation';
 
 import { addBreakdown, changeBreakdown, removeBreakdown } from '../reportSlice';
 import { ReportBreakdownMore } from './ReportBreakdownMore';
 import type { ReportEventMoreProps } from './ReportEventMore';
 
 export function ReportBreakdowns() {
-  const params = useParams();
+  const params = useAppParams();
   const selectedBreakdowns = useSelector((state) => state.report.breakdowns);
   const dispatch = useDispatch();
   const propertiesQuery = api.chart.properties.useQuery({
-    projectId: params.projectId as string,
+    projectId: params.projectId,
   });
   const propertiesCombobox = (propertiesQuery.data ?? []).map((item) => ({
     value: item,

apps/web/src/components/report/sidebar/ReportEventFilters.tsx

@@ -14,6 +14,7 @@ import {
   CommandSeparator,
 } from '@/components/ui/command';
 import { RenderDots } from '@/components/ui/RenderDots';
+import { useAppParams } from '@/hooks/useAppParams';
 import { useMappings } from '@/hooks/useMappings';
 import { useDispatch } from '@/redux';
 import type {
@@ -38,12 +39,12 @@ export function ReportEventFilters({
   isCreating,
   setIsCreating,
 }: ReportEventFiltersProps) {
-  const params = useParams();
+  const params = useAppParams();
   const dispatch = useDispatch();
   const propertiesQuery = api.chart.properties.useQuery(
     {
       event: event.name,
-      projectId: params.projectId as string,
+      projectId: params.projectId,
     },
     {
       enabled: !!event.name,

apps/web/src/components/report/sidebar/ReportEvents.tsx

@@ -6,6 +6,7 @@ import { ColorSquare } from '@/components/ColorSquare';
 import { Dropdown } from '@/components/Dropdown';
 import { Combobox } from '@/components/ui/combobox';
 import { Input } from '@/components/ui/input';
+import { useAppParams } from '@/hooks/useAppParams';
 import { useDebounceFn } from '@/hooks/useDebounceFn';
 import { useDispatch, useSelector } from '@/redux';
 import type { IChartEvent } from '@/types';
@@ -21,9 +22,9 @@ export function ReportEvents() {
   const [isCreating, setIsCreating] = useState(false);
   const selectedEvents = useSelector((state) => state.report.events);
   const dispatch = useDispatch();
-  const params = useParams();
+  const params = useAppParams();
   const eventsQuery = api.chart.events.useQuery({
-    projectId: String(params.projectId),
+    projectId: params.projectId,
   });
   const eventsCombobox = (eventsQuery.data ?? []).map((item) => ({
     value: item.name,
@@ -157,6 +158,7 @@ export function ReportEvents() {
 
         <Combobox
           value={''}
+          searchable
           onChange={(value) => {
             dispatch(
               addEvent({