refactor: clean up code formatting and improve readability

- Standardized table formatting in `api.md` for privilege keys, enhancing clarity.
- Removed unnecessary line breaks and improved inline formatting in various components, including `right-section.tsx`, `company-settings.remote.service.ts`, and `timeline-helpers.tsx`, to streamline code readability.
- Updated test cases in `privilege-key-hierarchy.test.ts` and `filter-menu-by-view-privilege.test.ts` for better alignment and consistency in assertions.

These changes improve the overall code quality and maintainability, making it easier for developers to navigate and understand the codebase.

packages/ui/src/components/map/timeline-map.tsx

@@ -1,13 +1,5 @@
 import { useEffect, useMemo } from 'react';
-import {
-  CircleMarker,
-  MapContainer,
-  Polyline,
-  TileLayer,
-  Tooltip,
-  ZoomControl,
-  useMap,
-} from 'react-leaflet';
+import { CircleMarker, MapContainer, Polyline, TileLayer, Tooltip, ZoomControl, useMap } from 'react-leaflet';
 import { Box, Text } from '@mantine/core';
 import { OSM_ATTRIBUTION, OSM_TILE_URL } from './osm';
 import { DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM } from './location-point';
@@ -76,11 +68,7 @@ function InvalidateSize() {
   return null;
 }
 
-function FitTimelineBounds({
-  positions,
-}: {
-  positions: Array<[number, number]>;
-}) {
+function FitTimelineBounds({ positions }: { positions: Array<[number, number]> }) {
   const map = useMap();
   const boundsKey = positions.map(([lat, lng]) => `${lat.toFixed(6)},${lng.toFixed(6)}`).join('|');
   useEffect(() => {
@@ -97,9 +85,7 @@ function FitTimelineBounds({
   return null;
 }
 
-function groupFootprintsByEmployee(
-  footprints: readonly TimelineMapFootprint[],
-): Map<string, TimelineMapFootprint[]> {
+function groupFootprintsByEmployee(footprints: readonly TimelineMapFootprint[]): Map<string, TimelineMapFootprint[]> {
   const grouped = new Map<string, TimelineMapFootprint[]>();
   for (const point of footprints) {
     const existing = grouped.get(point.employeeId) ?? [];
@@ -125,10 +111,7 @@ export function TimelineMap({
   fullBleed = false,
   emptyLabel = 'No timeline data',
 }: TimelineMapProps) {
-  const groupedTracks = useMemo(
-    () => groupFootprintsByEmployee(footprints),
-    [footprints],
-  );
+  const groupedTracks = useMemo(() => groupFootprintsByEmployee(footprints), [footprints]);
 
   const positions = useMemo(() => {
     const points: Array<[number, number]> = [];
@@ -144,18 +127,12 @@ export function TimelineMap({
     return points;
   }, [activities, footprints, playbackPositions]);
 
-  const boundsPositions =
-    focusPositions && focusPositions.length > 0 ? focusPositions : positions;
+  const boundsPositions = focusPositions && focusPositions.length > 0 ? focusPositions : positions;
   const employeeIds = [...groupedTracks.keys()];
   const hasData = positions.length > 0;
 
   return (
-    <Box
-      h={height}
-      bdrs={fullBleed ? 0 : radius}
-      className="tg-map-viewport"
-      pos="relative"
-    >
+    <Box h={height} bdrs={fullBleed ? 0 : radius} className="tg-map-viewport" pos="relative">
       <MapContainer
         center={boundsPositions[0] ?? DEFAULT_MAP_CENTER}
         zoom={hasData ? 12 : DEFAULT_MAP_ZOOM}
@@ -221,13 +198,7 @@ export function TimelineMap({
         <InvalidateSize />
       </MapContainer>
       {!hasData ? (
-        <Box
-          pos="absolute"
-          top="50%"
-          left="50%"
-          style={{ zIndex: 1, transform: 'translate(-50%, -50%)' }}
-          p="sm"
-        >
+        <Box pos="absolute" top="50%" left="50%" style={{ zIndex: 1, transform: 'translate(-50%, -50%)' }} p="sm">
           <Text size="sm" c="dimmed">
             {emptyLabel}
           </Text>