Create a right drawer for viewing steps in workflow runs (#10366)

- Improve the type-safety of the objects mapping the id of a right
drawer or side panel view to a React component
- Improve the types of the `useTabList` hook to type the available tab
identifiers strictly
- Create a specialized `WorkflowRunDiagramCanvas` component to render a
`WorkflowRunDiagramCanvasEffect` component that opens
`RightDrawerPages.WorkflowRunStepView` when a step is selected
- Create a new side panel view specifically for workflow run step
details
- Create tab list in the new side panel; all the tabs are `Node`,
`Input` and `Output`
- Create a hook `useWorkflowSelectedNodeOrThrow` not to duplicate
throwing mechanisms

Closes https://github.com/twentyhq/core-team-issues/issues/432

## Demo


https://github.com/user-attachments/assets/8d5df7dc-0b99-49a2-9a54-d3eaee80a8e6

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

@@ -9,10 +9,10 @@ import { useEffect } from 'react';
 import { IconComponent } from 'twenty-ui';
 import { Tab } from './Tab';
 
-export type SingleTabProps = {
+export type SingleTabProps<T extends string = string> = {
   title: string;
   Icon?: IconComponent;
-  id: string;
+  id: T;
   hide?: boolean;
   disabled?: boolean;
   pill?: string | React.ReactElement;

packages/twenty-front/src/modules/ui/layout/tab/hooks/useTabList.ts

@@ -1,13 +1,15 @@
-import { useRecoilState } from 'recoil';
+import { RecoilState, useRecoilState } from 'recoil';
 
 import { useTabListStates } from '@/ui/layout/tab/hooks/internal/useTabListStates';
 
-export const useTabList = (tabListId?: string) => {
+export const useTabList = <T extends string>(tabListId?: string) => {
   const { activeTabIdState } = useTabListStates({
     tabListScopeId: tabListId,
   });
 
-  const [activeTabId, setActiveTabId] = useRecoilState(activeTabIdState);
+  const [activeTabId, setActiveTabId] = useRecoilState(
+    activeTabIdState as RecoilState<T | null>,
+  );
 
   return {
     activeTabId,