make tracker script smaller and general improvement for web

apps/web/src/app/(app)/[organizationId]/[projectId]/list-dashboards.tsx

@@ -1,14 +1,15 @@
 'use client';
 
-import { api, handleError, handleErrorToastOptions } from '@/app/_trpc/client';
+import { api, handleErrorToastOptions } from '@/app/_trpc/client';
 import { Card, CardActions, CardActionsItem } from '@/components/Card';
 import { ToastAction } from '@/components/ui/toast';
 import { toast } from '@/components/ui/use-toast';
+import { useAppParams } from '@/hooks/useAppParams';
 import { pushModal } from '@/modals';
 import type { getDashboardsByProjectId } from '@/server/services/dashboard.service';
-import { Pencil, Plus, Trash } from 'lucide-react';
+import { Pencil, Trash } from 'lucide-react';
 import Link from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 
 interface ListDashboardsProps {
   dashboards: Awaited<ReturnType<typeof getDashboardsByProjectId>>;
@@ -16,7 +17,7 @@ interface ListDashboardsProps {
 
 export function ListDashboards({ dashboards }: ListDashboardsProps) {
   const router = useRouter();
-  const params = useParams();
+  const params = useAppParams();
   const { organizationId, projectId } = params;
   const deletion = api.dashboard.delete.useMutation({
     onError: (error, variables) => {

apps/web/src/app/(app)/[organizationId]/list-projects.tsx

@@ -1,19 +1,19 @@
 'use client';
 
 import { Card } from '@/components/Card';
+import { useAppParams } from '@/hooks/useAppParams';
 import { pushModal } from '@/modals';
 import type { getProjectsByOrganizationId } from '@/server/services/project.service';
 import { Plus } from 'lucide-react';
 import Link from 'next/link';
-import { useParams } from 'next/navigation';
 
 interface ListProjectsProps {
   projects: Awaited<ReturnType<typeof getProjectsByOrganizationId>>;
 }
 
 export function ListProjects({ projects }: ListProjectsProps) {
-  const params = useParams();
-  const organizationId = params.organizationId as string;
+  const params = useAppParams();
+  const organizationId = params.organizationId;
 
   return (
     <>

apps/web/src/app/(app)/[organizationId]/settings/clients/list-clients.tsx

@@ -2,19 +2,18 @@
 
 import { StickyBelowHeader } from '@/app/(app)/layout-sticky-below-header';
 import { columns } from '@/components/clients/table';
-import { ContentHeader } from '@/components/Content';
 import { DataTable } from '@/components/DataTable';
 import { Button } from '@/components/ui/button';
+import { useAppParams } from '@/hooks/useAppParams';
 import { pushModal } from '@/modals';
 import type { getClientsByOrganizationId } from '@/server/services/clients.service';
-import { KeySquareIcon, PlusIcon } from 'lucide-react';
-import { useParams } from 'next/navigation';
+import { PlusIcon } from 'lucide-react';
 
 interface ListClientsProps {
   clients: Awaited<ReturnType<typeof getClientsByOrganizationId>>;
 }
 export default function ListClients({ clients }: ListClientsProps) {
-  const organizationId = useParams().organizationId as string;
+  const organizationId = useAppParams().organizationId;
 
   return (
     <>

apps/web/src/app/(app)/[organizationId]/settings/projects/list-projects.tsx

@@ -4,16 +4,16 @@ import { StickyBelowHeader } from '@/app/(app)/layout-sticky-below-header';
 import { DataTable } from '@/components/DataTable';
 import { columns } from '@/components/projects/table';
 import { Button } from '@/components/ui/button';
+import { useAppParams } from '@/hooks/useAppParams';
 import { pushModal } from '@/modals';
 import type { getProjectsByOrganizationId } from '@/server/services/project.service';
-import { PlusIcon, WarehouseIcon } from 'lucide-react';
-import { useParams } from 'next/navigation';
+import { PlusIcon } from 'lucide-react';
 
 interface ListProjectsProps {
   projects: Awaited<ReturnType<typeof getProjectsByOrganizationId>>;
 }
 export default function ListProjects({ projects }: ListProjectsProps) {
-  const organizationId = useParams().organizationId as string;
+  const organizationId = useAppParams().organizationId;
   return (
     <>
       <StickyBelowHeader>

apps/web/src/app/(app)/layout-menu.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useAppParams } from '@/hooks/useAppParams';
 import type { IServiceRecentDashboards } from '@/server/services/dashboard.service';
 import {
   BuildingIcon,
@@ -13,7 +14,7 @@ import {
 } from 'lucide-react';
 import type { LucideProps } from 'lucide-react';
 import Link from 'next/link';
-import { useParams, usePathname } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 
 function LinkWithIcon({
   href,
@@ -44,12 +45,11 @@ export default function LayoutMenu({
   fallbackProjectId,
 }: LayoutMenuProps) {
   const pathname = usePathname();
-  const params = useParams();
-  const projectId = (
+  const params = useAppParams();
+  const projectId =
     !params.projectId || params.projectId === 'undefined'
       ? fallbackProjectId
-      : params.projectId
-  ) as string | null;
+      : params.projectId;
 
   return (
     <>
@@ -73,7 +73,7 @@ export default function LayoutMenu({
         label="Settings"
         href={`/${params.organizationId}/settings/organization`}
       />
-      {pathname.includes('/settings/') && (
+      {pathname?.includes('/settings/') && (
         <div className="pl-7">
           <LinkWithIcon
             icon={BuildingIcon}

apps/web/src/app/(app)/layout-organization-selector.tsx

@@ -1,8 +1,8 @@
 'use client';
 
+import { useAppParams } from '@/hooks/useAppParams';
 import type { IServiceOrganization } from '@/server/services/organization.service';
 import { Building } from 'lucide-react';
-import { useParams } from 'next/navigation';
 
 interface LayoutOrganizationSelectorProps {
   organizations: IServiceOrganization[];
@@ -11,7 +11,7 @@ interface LayoutOrganizationSelectorProps {
 export default function LayoutOrganizationSelector({
   organizations,
 }: LayoutOrganizationSelectorProps) {
-  const params = useParams();
+  const params = useAppParams();
 
   const organization = organizations.find(
     (item) => item.id === params.organizationId