Merge remote-tracking branch 'origin/master' into dev

web/src/components/card/AnimatedEventCard.tsx

@@ -213,6 +213,7 @@ export function AnimatedEventCard({
                       playsInline
                       muted
                       disableRemotePlayback
+                      disablePictureInPicture
                       loop
                       onTimeUpdate={() => {
                         if (!isLoaded) {

web/src/components/filter/CameraGroupSelector.tsx

@@ -77,6 +77,7 @@ import { useStreamingSettings } from "@/context/streaming-settings-provider";
 import { Trans, useTranslation } from "react-i18next";
 import { CameraNameLabel } from "../camera/FriendlyNameLabel";
 import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
+import { useHasFullCameraAccess } from "@/hooks/use-has-full-camera-access";
 import { useIsAdmin } from "@/hooks/use-is-admin";
 import { useUserPersistedOverlayState } from "@/hooks/use-overlay-state";
 
@@ -677,7 +678,7 @@ export function CameraGroupEdit({
     );
 
   const allowedCameras = useAllowedCameras();
-  const isAdmin = useIsAdmin();
+  const hasFullCameraAccess = useHasFullCameraAccess();
 
   const [openCamera, setOpenCamera] = useState<string | null>();
 
@@ -866,8 +867,7 @@ export function CameraGroupEdit({
                 <FormDescription>{t("group.cameras.desc")}</FormDescription>
                 <FormMessage />
                 {[
-                  ...(birdseyeConfig?.enabled &&
-                  (isAdmin || "birdseye" in allowedCameras)
+                  ...(birdseyeConfig?.enabled && hasFullCameraAccess
                     ? ["birdseye"]
                     : []),
                   ...Object.keys(config?.cameras ?? {})

web/src/components/menu/AccountSettings.tsx

@@ -126,19 +126,21 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
 
           <DropdownMenuSeparator className={isDesktop ? "my-2" : "my-2"} />
 
-          {profile?.username && profile.username !== "anonymous" && (
-            <MenuItem
-              className={cn(
-                "flex w-full items-center gap-2",
-                isDesktop ? "cursor-pointer" : "p-2 text-sm",
-              )}
-              aria-label={t("menu.user.setPassword", { ns: "common" })}
-              onClick={() => setPasswordDialogOpen(true)}
-            >
-              <LuSquarePen className="mr-2 size-4" />
-              <span>{t("menu.user.setPassword", { ns: "common" })}</span>
-            </MenuItem>
-          )}
+          {config?.auth?.enabled !== false &&
+            profile?.username &&
+            profile.username !== "anonymous" && (
+              <MenuItem
+                className={cn(
+                  "flex w-full items-center gap-2",
+                  isDesktop ? "cursor-pointer" : "p-2 text-sm",
+                )}
+                aria-label={t("menu.user.setPassword", { ns: "common" })}
+                onClick={() => setPasswordDialogOpen(true)}
+              >
+                <LuSquarePen className="mr-2 size-4" />
+                <span>{t("menu.user.setPassword", { ns: "common" })}</span>
+              </MenuItem>
+            )}
 
           <MenuItem
             className={cn(

web/src/components/menu/GeneralSettings.tsx

@@ -266,20 +266,24 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                 <DropdownMenuSeparator
                   className={isDesktop ? "mt-3" : "mt-1"}
                 />
-                {profile?.username && profile.username !== "anonymous" && (
-                  <MenuItem
-                    className={
-                      isDesktop
-                        ? "cursor-pointer"
-                        : "flex items-center p-2 text-sm"
-                    }
-                    aria-label={t("menu.user.setPassword", { ns: "common" })}
-                    onClick={() => setPasswordDialogOpen(true)}
-                  >
-                    <LuSquarePen className="mr-2 size-4" />
-                    <span>{t("menu.user.setPassword", { ns: "common" })}</span>
-                  </MenuItem>
-                )}
+                {config?.auth?.enabled !== false &&
+                  profile?.username &&
+                  profile.username !== "anonymous" && (
+                    <MenuItem
+                      className={
+                        isDesktop
+                          ? "cursor-pointer"
+                          : "flex items-center p-2 text-sm"
+                      }
+                      aria-label={t("menu.user.setPassword", { ns: "common" })}
+                      onClick={() => setPasswordDialogOpen(true)}
+                    >
+                      <LuSquarePen className="mr-2 size-4" />
+                      <span>
+                        {t("menu.user.setPassword", { ns: "common" })}
+                      </span>
+                    </MenuItem>
+                  )}
                 <MenuItem
                   className={
                     isDesktop

web/src/components/overlay/ClassificationSelectionDialog.tsx

@@ -125,17 +125,23 @@ export default function ClassificationSelectionDialog({
                 isMobile && "gap-2 pb-4",
               )}
             >
-              {classes.sort().map((category) => (
-                <SelectorItem
-                  key={category}
-                  className="flex cursor-pointer gap-2 smart-capitalize"
-                  onClick={() => onCategorizeImage(category)}
-                >
-                  {category === "none"
-                    ? t("details.none")
-                    : category.replaceAll("_", " ")}
-                </SelectorItem>
-              ))}
+              {classes
+                .sort((a, b) => {
+                  if (a === "none") return 1;
+                  if (b === "none") return -1;
+                  return a.localeCompare(b);
+                })
+                .map((category) => (
+                  <SelectorItem
+                    key={category}
+                    className="flex cursor-pointer gap-2 smart-capitalize"
+                    onClick={() => onCategorizeImage(category)}
+                  >
+                    {category === "none"
+                      ? t("details.none")
+                      : category.replaceAll("_", " ")}
+                  </SelectorItem>
+                ))}
               <Separator />
               <SelectorItem
                 className="flex cursor-pointer gap-2 smart-capitalize"

web/src/components/overlay/detail/TrackingDetails.tsx

@@ -41,6 +41,7 @@ import ImageLoadingIndicator from "@/components/indicators/ImageLoadingIndicator
 import ObjectTrackOverlay from "../ObjectTrackOverlay";
 import { useIsAdmin } from "@/hooks/use-is-admin";
 import { VideoResolutionType } from "@/types/live";
+import { VodManifest } from "@/types/playback";
 
 type TrackingDetailsProps = {
   className?: string;
@@ -133,19 +134,64 @@ export function TrackingDetails({
     },
   );
 
+  // Fetch the VOD manifest JSON to get the actual clipFrom after keyframe
+  // snapping. The backend may snap clipFrom backwards to a keyframe, making
+  // the video start earlier than the requested time.
+  const vodManifestUrl = useMemo(() => {
+    if (!event.camera) return null;
+    const startTime =
+      event.start_time + annotationOffset / 1000 - REVIEW_PADDING;
+    const endTime =
+      (event.end_time ?? Date.now() / 1000) +
+      annotationOffset / 1000 +
+      REVIEW_PADDING;
+    return `vod/clip/${event.camera}/start/${startTime}/end/${endTime}`;
+  }, [event, annotationOffset]);
+
+  const { data: vodManifest } = useSWR<VodManifest>(vodManifestUrl, null, {
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    dedupingInterval: 30000,
+  });
+
+  // Derive the actual video start time from the VOD manifest's first clip.
+  // Without this correction the timeline-to-player-time mapping is off by
+  // the keyframe preroll amount.
+  const actualVideoStart = useMemo(() => {
+    const videoStartTime = eventStartRecord - REVIEW_PADDING;
+
+    if (!vodManifest?.sequences?.[0]?.clips?.[0] || !recordings?.length) {
+      return videoStartTime;
+    }
+
+    const firstClip = vodManifest.sequences[0].clips[0];
+
+    // Guard: clipFrom is only expected when the first recording starts before
+    // the requested start. If this doesn't hold, fall back.
+    if (recordings[0].start_time >= videoStartTime) {
+      return recordings[0].start_time;
+    }
+
+    if (firstClip.clipFrom !== undefined) {
+      // clipFrom is in milliseconds from the start of the first recording
+      return recordings[0].start_time + firstClip.clipFrom / 1000;
+    }
+
+    // clipFrom absent means the full recording is included (keyframe probe failed)
+    return recordings[0].start_time;
+  }, [vodManifest, recordings, eventStartRecord]);
+
   // Convert a timeline timestamp to actual video player time, accounting for
   // motion-only recording gaps. Uses the same algorithm as DynamicVideoController.
   const timestampToVideoTime = useCallback(
     (timestamp: number): number => {
       if (!recordings || recordings.length === 0) {
         // Fallback to simple calculation if no recordings data
-        return timestamp - (eventStartRecord - REVIEW_PADDING);
+        return timestamp - actualVideoStart;
       }
 
-      const videoStartTime = eventStartRecord - REVIEW_PADDING;
-
-      // If timestamp is before video start, return 0
-      if (timestamp < videoStartTime) return 0;
+      // If timestamp is before actual video start, return 0
+      if (timestamp < actualVideoStart) return 0;
 
       // Check if timestamp is before the first recording or after the last
       if (
@@ -159,10 +205,10 @@ export function TrackingDetails({
       // Calculate the inpoint offset - the HLS video may start partway through the first segment
       let inpointOffset = 0;
       if (
-        videoStartTime > recordings[0].start_time &&
-        videoStartTime < recordings[0].end_time
+        actualVideoStart > recordings[0].start_time &&
+        actualVideoStart < recordings[0].end_time
       ) {
-        inpointOffset = videoStartTime - recordings[0].start_time;
+        inpointOffset = actualVideoStart - recordings[0].start_time;
       }
 
       let seekSeconds = 0;
@@ -180,7 +226,7 @@ export function TrackingDetails({
           if (segment === recordings[0]) {
             // For the first segment, account for the inpoint offset
             seekSeconds +=
-              timestamp - Math.max(segment.start_time, videoStartTime);
+              timestamp - Math.max(segment.start_time, actualVideoStart);
           } else {
             seekSeconds += timestamp - segment.start_time;
           }
@@ -190,7 +236,7 @@ export function TrackingDetails({
 
       return seekSeconds;
     },
-    [recordings, eventStartRecord],
+    [recordings, actualVideoStart],
   );
 
   // Convert video player time back to timeline timestamp, accounting for
@@ -199,19 +245,16 @@ export function TrackingDetails({
     (playerTime: number): number => {
       if (!recordings || recordings.length === 0) {
         // Fallback to simple calculation if no recordings data
-        const videoStartTime = eventStartRecord - REVIEW_PADDING;
-        return playerTime + videoStartTime;
+        return playerTime + actualVideoStart;
       }
 
-      const videoStartTime = eventStartRecord - REVIEW_PADDING;
-
       // Calculate the inpoint offset - the video may start partway through the first segment
       let inpointOffset = 0;
       if (
-        videoStartTime > recordings[0].start_time &&
-        videoStartTime < recordings[0].end_time
+        actualVideoStart > recordings[0].start_time &&
+        actualVideoStart < recordings[0].end_time
       ) {
-        inpointOffset = videoStartTime - recordings[0].start_time;
+        inpointOffset = actualVideoStart - recordings[0].start_time;
       }
 
       let timestamp = 0;
@@ -228,7 +271,7 @@ export function TrackingDetails({
           if (segment === recordings[0]) {
             // For the first segment, add the inpoint offset
             timestamp =
-              Math.max(segment.start_time, videoStartTime) +
+              Math.max(segment.start_time, actualVideoStart) +
               (playerTime - totalTime);
           } else {
             timestamp = segment.start_time + (playerTime - totalTime);
@@ -241,7 +284,7 @@ export function TrackingDetails({
 
       return timestamp;
     },
-    [recordings, eventStartRecord],
+    [recordings, actualVideoStart],
   );
 
   eventSequence?.map((event) => {
@@ -1080,7 +1123,7 @@ function LifecycleIconRow({
         <div className="ml-3 flex-shrink-0 px-1 text-right text-xs text-primary-variant">
           <div className="flex flex-row items-center gap-3">
             <div className="whitespace-nowrap">{formattedEventTimestamp}</div>
-            {isAdmin && config?.plus?.enabled && item.data.box && (
+            {isAdmin && (config?.plus?.enabled || item.data.box) && (
               <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
                 <DropdownMenuTrigger>
                   <div className="rounded p-1 pr-2" role="button">

web/src/components/player/HlsVideoPlayer.tsx

@@ -357,7 +357,7 @@ export default function HlsVideoPlayer({
           {transformedOverlay}
           {isDetailMode &&
             camera &&
-            currentTime &&
+            currentTime != null &&
             loadedMetadata &&
             videoDimensions.width > 0 &&
             videoDimensions.height > 0 && (

web/src/components/settings/CameraWizardDialog.tsx

@@ -20,7 +20,10 @@ import type {
   CameraConfigData,
   ConfigSetBody,
 } from "@/types/cameraWizard";
-import { processCameraName } from "@/utils/cameraUtil";
+import {
+  processCameraName,
+  calculateDetectDimensions,
+} from "@/utils/cameraUtil";
 import { cn } from "@/lib/utils";
 
 type WizardState = {
@@ -203,6 +206,25 @@ export default function CameraWizardDialog({
         },
       };
 
+      // Calculate detect dimensions from the detect stream's probed resolution
+      const detectStream = wizardData.streams.find((stream) =>
+        stream.roles.includes("detect"),
+      );
+      if (detectStream?.testResult?.resolution) {
+        const [streamWidth, streamHeight] = detectStream.testResult.resolution
+          .split("x")
+          .map(Number);
+        if (streamWidth > 0 && streamHeight > 0) {
+          const detectDimensions = calculateDetectDimensions(
+            streamWidth,
+            streamHeight,
+          );
+          if (detectDimensions) {
+            configData.cameras[finalCameraName].detect = detectDimensions;
+          }
+        }
+      }
+
       // Add live.streams configuration for go2rtc streams
       if (wizardData.streams && wizardData.streams.length > 0) {
         configData.cameras[finalCameraName].live = {

web/src/hooks/use-camera-live-mode.ts

@@ -18,18 +18,25 @@ export default function useCameraLiveMode(
 
     const streamNames = new Set<string>();
     cameras.forEach((camera) => {
-      const isRestreamed = Object.keys(config.go2rtc.streams || {}).includes(
-        Object.values(camera.live.streams)[0],
-      );
+      if (activeStreams && activeStreams[camera.name]) {
+        const selectedStreamName = activeStreams[camera.name];
+        const isRestreamed = Object.keys(config.go2rtc.streams || {}).includes(
+          selectedStreamName,
+        );
 
-      if (isRestreamed) {
-        if (activeStreams && activeStreams[camera.name]) {
-          streamNames.add(activeStreams[camera.name]);
-        } else {
-          Object.values(camera.live.streams).forEach((streamName) => {
-            streamNames.add(streamName);
-          });
+        if (isRestreamed) {
+          streamNames.add(selectedStreamName);
         }
+      } else {
+        Object.values(camera.live.streams).forEach((streamName) => {
+          const isRestreamed = Object.keys(
+            config.go2rtc.streams || {},
+          ).includes(streamName);
+
+          if (isRestreamed) {
+            streamNames.add(streamName);
+          }
+        });
       }
     });
 
@@ -66,11 +73,11 @@ export default function useCameraLiveMode(
     } = {};
 
     cameras.forEach((camera) => {
+      const selectedStreamName =
+        activeStreams?.[camera.name] ?? Object.values(camera.live.streams)[0];
       const isRestreamed =
         config &&
-        Object.keys(config.go2rtc.streams || {}).includes(
-          Object.values(camera.live.streams)[0],
-        );
+        Object.keys(config.go2rtc.streams || {}).includes(selectedStreamName);
 
       newIsRestreamedStates[camera.name] = isRestreamed ?? false;
 
@@ -101,14 +108,21 @@ export default function useCameraLiveMode(
     setPreferredLiveModes(newPreferredLiveModes);
     setIsRestreamedStates(newIsRestreamedStates);
     setSupportsAudioOutputStates(newSupportsAudioOutputStates);
-  }, [cameras, config, windowVisible, streamMetadata]);
+  }, [activeStreams, cameras, config, windowVisible, streamMetadata]);
 
   const resetPreferredLiveMode = useCallback(
     (cameraName: string) => {
       const mseSupported =
         "MediaSource" in window || "ManagedMediaSource" in window;
+      const cameraConfig = cameras.find((camera) => camera.name === cameraName);
+      const selectedStreamName =
+        activeStreams?.[cameraName] ??
+        (cameraConfig
+          ? Object.values(cameraConfig.live.streams)[0]
+          : cameraName);
       const isRestreamed =
-        config && Object.keys(config.go2rtc.streams || {}).includes(cameraName);
+        config &&
+        Object.keys(config.go2rtc.streams || {}).includes(selectedStreamName);
 
       setPreferredLiveModes((prevModes) => {
         const newModes = { ...prevModes };
@@ -122,7 +136,7 @@ export default function useCameraLiveMode(
         return newModes;
       });
     },
-    [config],
+    [activeStreams, cameras, config],
   );
 
   return {

web/src/hooks/use-has-full-camera-access.ts

@@ -0,0 +1,26 @@
+import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
+
+/**
+ * Returns true if the current user has access to all cameras.
+ * This is used to determine birdseye access — users who can see
+ * all cameras should also be able to see the birdseye view.
+ */
+export function useHasFullCameraAccess() {
+  const allowedCameras = useAllowedCameras();
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
+
+  if (!config?.cameras) return false;
+
+  const enabledCameraNames = Object.entries(config.cameras)
+    .filter(([, cam]) => cam.enabled_in_config)
+    .map(([name]) => name);
+
+  return (
+    enabledCameraNames.length > 0 &&
+    enabledCameraNames.every((name) => allowedCameras.includes(name))
+  );
+}

web/src/pages/FaceLibrary.tsx

@@ -598,18 +598,18 @@ function LibrarySelector({
           {Object.values(faces).map((face) => (
             <DropdownMenuItem
               key={face}
-              className="group flex items-center justify-between"
+              className="group flex items-center justify-between p-0"
             >
               <div
                 className="flex-grow cursor-pointer"
                 onClick={() => setPageToggle(face)}
               >
                 {face}
-                <span className="ml-2 text-muted-foreground">
+                <span className="ml-2 px-2 py-1.5 text-muted-foreground">
                   ({faceData?.[face].length})
                 </span>
               </div>
-              <div className="flex gap-0.5">
+              <div className="flex gap-0.5 px-2">
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button

web/src/pages/Live.tsx

@@ -11,12 +11,12 @@ import { useTranslation } from "react-i18next";
 import { useEffect, useMemo, useRef } from "react";
 import useSWR from "swr";
 import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
-import { useIsAdmin } from "@/hooks/use-is-admin";
+import { useHasFullCameraAccess } from "@/hooks/use-has-full-camera-access";
 
 function Live() {
   const { t } = useTranslation(["views/live"]);
   const { data: config } = useSWR<FrigateConfig>("config");
-  const isAdmin = useIsAdmin();
+  const hasFullCameraAccess = useHasFullCameraAccess();
 
   // selection
 
@@ -90,8 +90,8 @@ function Live() {
   const allowedCameras = useAllowedCameras();
 
   const includesBirdseye = useMemo(() => {
-    // Restricted users should never have access to birdseye
-    if (!isAdmin) {
+    // Users without access to all cameras should not have access to birdseye
+    if (!hasFullCameraAccess) {
       return false;
     }
 
@@ -106,7 +106,7 @@ function Live() {
     } else {
       return false;
     }
-  }, [config, cameraGroup, isAdmin]);
+  }, [config, cameraGroup, hasFullCameraAccess]);
 
   const cameras = useMemo(() => {
     if (!config) {
@@ -151,7 +151,9 @@ function Live() {
 
   return (
     <div className="size-full" ref={mainRef}>
-      {selectedCameraName === "birdseye" ? (
+      {selectedCameraName === "birdseye" &&
+      hasFullCameraAccess &&
+      config?.birdseye?.enabled ? (
         <LiveBirdseyeView
           supportsFullscreen={supportsFullScreen}
           fullscreen={fullscreen}

web/src/types/cameraWizard.ts

@@ -162,6 +162,10 @@ export type CameraConfigData = {
           input_args?: string;
         }[];
       };
+      detect?: {
+        width: number;
+        height: number;
+      };
       live?: {
         streams: Record<string, string>;
       };

web/src/types/frigateConfig.ts

@@ -401,6 +401,7 @@ export interface FrigateConfig {
   };
 
   auth: {
+    enabled: boolean;
     roles: {
       [roleName: string]: string[];
     };

web/src/types/playback.ts

@@ -11,3 +11,7 @@ export type PreviewPlayback = {
   preview: Preview | undefined;
   timeRange: TimeRange;
 };
+
+export type VodManifest = {
+  sequences: { clips: { clipFrom?: number }[] }[];
+};

web/src/utils/cameraUtil.ts

@@ -115,6 +115,51 @@ export type CameraAudioFeatures = {
  * @param requireSecureContext - If true, two-way audio requires secure context (default: true)
  * @returns CameraAudioFeatures object with detected capabilities
  */
+/**
+ * Calculates optimal detect dimensions from stream resolution.
+ *
+ * Scales dimensions to an efficient size for object detection while
+ * preserving the stream's aspect ratio. Does not upscale.
+ *
+ * @param streamWidth - Native stream width in pixels
+ * @param streamHeight - Native stream height in pixels
+ * @returns Detect dimensions with even values, or null if inputs are invalid
+ */
+
+// Target size for the smaller dimension (width or height) for detect streams
+export const DETECT_TARGET_PX = 720;
+
+export function calculateDetectDimensions(
+  streamWidth: number,
+  streamHeight: number,
+): { width: number; height: number } | null {
+  if (
+    !Number.isFinite(streamWidth) ||
+    !Number.isFinite(streamHeight) ||
+    streamWidth <= 0 ||
+    streamHeight <= 0
+  ) {
+    return null;
+  }
+
+  const smallerDim = Math.min(streamWidth, streamHeight);
+  const target = Math.min(DETECT_TARGET_PX, smallerDim);
+  const scale = target / smallerDim;
+
+  let width = Math.round(streamWidth * scale);
+  let height = Math.round(streamHeight * scale);
+
+  // Round down to even numbers (required for video processing)
+  width = width - (width % 2);
+  height = height - (height % 2);
+
+  if (width < 2 || height < 2) {
+    return null;
+  }
+
+  return { width, height };
+}
+
 export function detectCameraAudioFeatures(
   metadata: LiveStreamMetadata | null | undefined,
   requireSecureContext: boolean = true,

web/src/views/classification/ModelTrainingView.tsx

@@ -700,66 +700,72 @@ function LibrarySelector({
               </div>
             </>
           )}
-          {Object.keys(dataset).map((id) => (
-            <DropdownMenuItem
-              key={id}
-              className="group flex items-center justify-between"
-            >
-              <div
-                className="flex-grow cursor-pointer capitalize"
-                onClick={() => setPageToggle(id)}
+          {Object.keys(dataset)
+            .sort((a, b) => {
+              if (a === "none") return 1;
+              if (b === "none") return -1;
+              return a.localeCompare(b);
+            })
+            .map((id) => (
+              <DropdownMenuItem
+                key={id}
+                className="group flex items-center justify-between p-0"
               >
-                {id === "none" ? t("details.none") : id.replaceAll("_", " ")}
-                <span className="ml-2 text-muted-foreground">
-                  ({dataset?.[id].length})
-                </span>
-              </div>
-              {id != "none" && (
-                <div className="flex gap-0.5">
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="size-7 lg:opacity-0 lg:transition-opacity lg:group-hover:opacity-100"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          setRenameClass(id);
-                        }}
-                      >
-                        <LuPencil className="size-4 text-primary" />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipPortal>
-                      <TooltipContent>
-                        {t("button.renameCategory")}
-                      </TooltipContent>
-                    </TooltipPortal>
-                  </Tooltip>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="size-7 lg:opacity-0 lg:transition-opacity lg:group-hover:opacity-100"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          setConfirmDelete(id);
-                        }}
-                      >
-                        <LuTrash2 className="size-4 text-destructive" />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipPortal>
-                      <TooltipContent>
-                        {t("button.deleteCategory")}
-                      </TooltipContent>
-                    </TooltipPortal>
-                  </Tooltip>
+                <div
+                  className="flex-grow cursor-pointer px-2 py-1.5 capitalize"
+                  onClick={() => setPageToggle(id)}
+                >
+                  {id === "none" ? t("details.none") : id.replaceAll("_", " ")}
+                  <span className="ml-2 text-muted-foreground">
+                    ({dataset?.[id].length})
+                  </span>
                 </div>
-              )}
-            </DropdownMenuItem>
-          ))}
+                {id != "none" && (
+                  <div className="flex gap-0.5 px-2">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="size-7 lg:opacity-0 lg:transition-opacity lg:group-hover:opacity-100"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setRenameClass(id);
+                          }}
+                        >
+                          <LuPencil className="size-4 text-primary" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipPortal>
+                        <TooltipContent>
+                          {t("button.renameCategory")}
+                        </TooltipContent>
+                      </TooltipPortal>
+                    </Tooltip>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="size-7 lg:opacity-0 lg:transition-opacity lg:group-hover:opacity-100"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setConfirmDelete(id);
+                          }}
+                        >
+                          <LuTrash2 className="size-4 text-destructive" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipPortal>
+                        <TooltipContent>
+                          {t("button.deleteCategory")}
+                        </TooltipContent>
+                      </TooltipPortal>
+                    </Tooltip>
+                  </div>
+                )}
+              </DropdownMenuItem>
+            ))}
         </DropdownMenuContent>
       </DropdownMenu>
     </>