feat: overhaul AI settings and shadowing cleanup

Author: mxggle

src/components/controls/CombinedControls.tsx

@@ -1,8 +1,7 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect } from "react";
 import { usePlayerStore } from "../../stores/playerStore";
 import { useTranslation } from "react-i18next";
 import { formatTime } from "../../utils/formatTime";
-import { checkAudioRecordingSupport, getRecordingUnsupportedMessage } from "../../utils/browserCheck";
 import {
   Play,
   Pause,
@@ -20,11 +19,8 @@ import {
   Bookmark,
   ListMusic,
   X,
-  Mic,
   RotateCcw,
 } from "lucide-react";
-import { useShadowingStore } from "../../stores/shadowingStore";
-import { useShadowingRecorder } from "../../hooks/useShadowingRecorder";
 import { Slider } from "../ui/slider";
 import { Button } from "../ui/button";
 import { Plus } from "lucide-react";
@@ -69,15 +65,6 @@ export const CombinedControls = () => {
     selectedBookmarkId,
   } = usePlayerStore();
 
-  const {
-    isShadowingMode,
-    setShadowingMode,
-    isRecording,
-  } = useShadowingStore();
-
-  // Initialize shadowing recorder
-  useShadowingRecorder();
-
   const [rangeValues, setRangeValues] = useState<[number, number]>([0, 100]);
   const [showABControls, setShowABControls] = useState(false);
   // Get current media bookmarks for the bookmark button
@@ -93,20 +80,6 @@ export const CombinedControls = () => {
     setRangeValues([(start / duration) * 100, (end / duration) * 100]);
   }, [loopStart, loopEnd, duration]);
 
-  // Check if audio recording is supported in this browser
-  const recordingCapabilities = useMemo(() => checkAudioRecordingSupport(), []);
-  const canRecord = recordingCapabilities.supportsAudioRecording;
-
-  // Handle shadowing mode toggle
-  const handleShadowingToggle = () => {
-    if (!isShadowingMode && !canRecord) {
-      const errorMessage = getRecordingUnsupportedMessage(recordingCapabilities);
-      toast.error(errorMessage, { duration: 5000 });
-      return;
-    }
-    setShadowingMode(!isShadowingMode);
-  };
-
   // Toggle play/pause
   const togglePlayPause = () => {
     setIsPlaying(!isPlaying);
@@ -413,22 +386,6 @@ export const CombinedControls = () => {
               )}
             </button>
 
-            <button
-              onClick={handleShadowingToggle}
-              className={`p-2.5 rounded-full transition-all duration-150 ${isRecording
-                ? "bg-red-600 text-white animate-pulse"
-                : isShadowingMode
-                  ? "bg-orange-600 text-white hover:bg-orange-700"
-                  : canRecord
-                    ? "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600"
-                    : "bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed opacity-50"
-                }`}
-              aria-label={isShadowingMode ? t("shadowing.disable") : t("shadowing.enable")}
-              title={!canRecord ? "Audio recording is not supported on this device/browser" : (isShadowingMode ? t("shadowing.disable") : t("shadowing.enable"))}
-            >
-              <Mic size={18} className="sm:w-[20px] sm:h-[20px]" />
-            </button>
-
             <button
               onClick={seekForward}
               className="p-2.5 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors"

src/components/controls/MobileControls.tsx

@@ -1,7 +1,6 @@
-import { useState, useMemo } from "react";
+import { useState } from "react";
 import { usePlayerStore } from "../../stores/playerStore";
 import { useTranslation } from "react-i18next";
-import { checkAudioRecordingSupport, getRecordingUnsupportedMessage } from "../../utils/browserCheck";
 
 import { toast } from "react-hot-toast";
 import {
@@ -21,18 +20,12 @@ import {
   ChevronLeft,
   ChevronRight,
   ChevronsRight,
-  Mic,
 } from "lucide-react";
 import { Button } from "../ui/button";
-import { useShadowingStore } from "../../stores/shadowingStore";
-import { useShadowingRecorder } from "../../hooks/useShadowingRecorder";
 
 export const MobileControls = () => {
   const { t } = useTranslation();
 
-  // Initialize shadowing recorder
-  useShadowingRecorder();
-
   const {
     isPlaying,
     duration,
@@ -69,20 +62,10 @@ export const MobileControls = () => {
     toggleLooping,
   } = usePlayerStore();
 
-  const {
-    isShadowingMode,
-    setShadowingMode,
-    isRecording,
-  } = useShadowingStore();
-
   const [showSpeedControls, setShowSpeedControls] = useState(false);
   const [showVolumeDrawer, setShowVolumeDrawer] = useState(false);
   const [showPlaylistDrawer, setShowPlaylistDrawer] = useState(false);
 
-  // Check if audio recording is supported in this browser
-  const recordingCapabilities = useMemo(() => checkAudioRecordingSupport(), []);
-  const canRecord = recordingCapabilities.supportsAudioRecording;
-
   // Get current media bookmarks for the bookmark button
   const bookmarks = getCurrentMediaBookmarks();
 
@@ -236,19 +219,6 @@ export const MobileControls = () => {
 
   // Clear loop points function moved to waveform footer
 
-  // Handle shadowing mode toggle
-  const handleShadowingToggle = () => {
-    // If trying to enable shadowing mode, check browser support first
-    if (!isShadowingMode && !canRecord) {
-      const errorMessage = getRecordingUnsupportedMessage(recordingCapabilities);
-      toast.error(errorMessage, { duration: 5000 });
-      return;
-    }
-
-    // Toggle shadowing mode
-    setShadowingMode(!isShadowingMode);
-  };
-
   // Note: Loop jump functions removed as they're not used in the mobile interface
 
   return (
@@ -293,23 +263,6 @@ export const MobileControls = () => {
               )}
             </button>
 
-            {/* Shadowing toggle button */}
-            <button
-              onClick={handleShadowingToggle}
-              className={`p-3 rounded-full transition-all duration-150 ${isRecording
-                  ? "bg-red-600 text-white animate-pulse"
-                  : isShadowingMode
-                    ? "bg-orange-600 text-white hover:bg-orange-700"
-                    : canRecord
-                      ? "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600"
-                      : "bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed opacity-50"
-                }`}
-              aria-label={isShadowingMode ? t("shadowing.disable") : t("shadowing.enable")}
-              title={!canRecord ? "Audio recording is not supported on this device/browser" : undefined}
-            >
-              <Mic size={24} />
-            </button>
-
             <button
               onClick={seekForward}
               className="p-3 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"

src/components/player/MediaHistory.tsx

@@ -304,6 +304,8 @@ export const MediaHistory = ({
   const [hoveredFolder, setHoveredFolder] = useState<
     string | "unfiled" | "all" | null
   >(null);
+  const [pendingDeleteItem, setPendingDeleteItem] =
+    useState<MediaHistoryItem | null>(null);
 
   const {
     mediaHistory,
@@ -473,7 +475,10 @@ export const MediaHistory = ({
   // Remove an item from history
   const handleRemoveFromHistory = (id: string, e: React.MouseEvent) => {
     e.stopPropagation();
-    removeFromHistory(id);
+    const item = mediaHistory.find((historyItem) => historyItem.id === id);
+    if (item) {
+      setPendingDeleteItem(item);
+    }
   };
 
   // Clear all history
@@ -1200,6 +1205,20 @@ export const MediaHistory = ({
           setConfirmClearOpen(false);
         }}
       />
+      <ConfirmDeleteDialog
+        open={!!pendingDeleteItem}
+        itemName={pendingDeleteItem?.name ?? ""}
+        onOpenChange={(open) => {
+          if (!open) {
+            setPendingDeleteItem(null);
+          }
+        }}
+        onConfirm={async () => {
+          if (!pendingDeleteItem) return;
+          await removeFromHistory(pendingDeleteItem.id);
+          setPendingDeleteItem(null);
+        }}
+      />
     </>
   );
 };
@@ -1427,6 +1446,40 @@ function ConfirmClearDialog({
   );
 }
 
+function ConfirmDeleteDialog({
+  open,
+  itemName,
+  onOpenChange,
+  onConfirm,
+}: {
+  open: boolean;
+  itemName: string;
+  onOpenChange: (v: boolean) => void;
+  onConfirm: () => void | Promise<void>;
+}) {
+  const { t } = useTranslation();
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("history.deleteItemTitle")}</DialogTitle>
+          <DialogDescription>
+            {t("history.deleteItemDescription", { name: itemName })}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t("common.cancel")}
+          </Button>
+          <Button className="bg-red-600 hover:bg-red-700" onClick={onConfirm}>
+            {t("history.removeFromHistory")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 function RenameItemButton({ item }: { item: MediaHistoryItem }) {
   const { renameHistoryItem } = usePlayerStore();
   const [open, setOpen] = useState(false);

src/components/player/MediaPlayer.tsx

@@ -118,6 +118,36 @@ export const MediaPlayer = ({ hiddenMode = false }: MediaPlayerProps) => {
     }
   }, [isPlaying, currentFile, setIsPlaying, safePlay]);
 
+  // Keep the global playback state aligned with actual media element state.
+  // This is required for features like shadowing recording that react to store playback.
+  useEffect(() => {
+    const mediaElement = currentFile?.type.includes("video")
+      ? videoRef.current
+      : audioRef.current;
+    if (!mediaElement) return;
+
+    const handlePlay = () => {
+      if (!usePlayerStore.getState().isPlaying) {
+        setIsPlaying(true);
+      }
+    };
+
+    const handlePause = () => {
+      if (isDelayingRef.current || mediaElement.ended) return;
+      if (usePlayerStore.getState().isPlaying) {
+        setIsPlaying(false);
+      }
+    };
+
+    mediaElement.addEventListener("play", handlePlay);
+    mediaElement.addEventListener("pause", handlePause);
+
+    return () => {
+      mediaElement.removeEventListener("play", handlePlay);
+      mediaElement.removeEventListener("pause", handlePause);
+    };
+  }, [currentFile, setIsPlaying]);
+
   // Handle volume changes
   useEffect(() => {
     const mediaElement = currentFile?.type.includes("video")

src/components/ui/ModelSelector.tsx

@@ -87,13 +87,13 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   const getProviderColor = (provider: AIProvider) => {
     switch (provider) {
       case "openai":
-        return "text-green-600 bg-green-50";
+        return "bg-green-50 text-green-600 dark:bg-green-950/40 dark:text-green-400";
       case "gemini":
-        return "text-blue-600 bg-blue-50";
+        return "bg-blue-50 text-blue-600 dark:bg-blue-950/40 dark:text-blue-400";
       case "grok":
-        return "text-purple-600 bg-purple-50";
+        return "bg-purple-50 text-purple-600 dark:bg-purple-950/40 dark:text-purple-400";
       default:
-        return "text-gray-600 bg-gray-50";
+        return "bg-gray-50 text-gray-600 dark:bg-gray-800 dark:text-gray-300";
     }
   };
 
@@ -178,12 +178,12 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       </Button>
 
       {isOpen && (
-        <div className="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg max-h-96 overflow-auto">
+        <div className="absolute z-50 mt-1 max-h-96 w-full overflow-auto rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900">
           {Object.entries(groupedModels).map(
             ([providerKey, providerModels]) => (
               <div key={providerKey}>
                 {showAllProviders && (
-                  <div className="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b">
+                  <div className="border-b border-gray-200 bg-gray-50 px-3 py-2 text-xs font-semibold text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400">
                     <div className="flex items-center gap-2">
                       {getProviderIcon(providerKey as AIProvider)}
                       {providerKey.toUpperCase()}
@@ -198,15 +198,15 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                       setIsOpen(false);
                     }}
                     className={cn(
-                      "w-full px-3 py-2 text-left hover:bg-gray-50 border-b border-gray-100 last:border-b-0",
+                      "w-full border-b border-gray-100 px-3 py-2 text-left hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-gray-800/80 last:border-b-0",
                       selectedModel === model.id &&
-                        "bg-blue-50 border-blue-200",
+                        "border-blue-200 bg-blue-50 dark:border-blue-900/60 dark:bg-blue-950/30",
                       compact && "py-1"
                     )}
                   >
                     <div className="flex items-start justify-between gap-2">
                       <div className="min-w-0 flex-1">
-                          <div className="flex items-center gap-2 mb-1">
+                        <div className="mb-1 flex items-center gap-2">
                           {!showAllProviders && (
                             <div
                               className={cn(
@@ -221,11 +221,11 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                             {model.name}
                           </span>
                           {selectedModel === model.id && (
-                            <CheckCircle className="w-4 h-4 text-blue-600" />
+                            <CheckCircle className="w-4 h-4 text-blue-600 dark:text-blue-400" />
                           )}
                         </div>
                         {!compact && (
-                          <p className="text-xs text-gray-600 mb-2">
+                          <p className="mb-2 text-xs text-gray-600 dark:text-gray-400">
                             {model.description}
                           </p>
                         )}
@@ -236,14 +236,14 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                               .map((capability) => (
                                 <span
                                   key={capability}
-                                  className="inline-flex items-center gap-1 px-1.5 py-0.5 bg-gray-100 text-gray-700 text-xs rounded"
+                                  className="inline-flex items-center gap-1 rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-700 dark:bg-gray-800 dark:text-gray-300"
                                 >
                                   {getCapabilityIcon(capability)}
                                   {getCapabilityLabel(capability)}
                                 </span>
                               ))}
                             {model.capabilities.length > 4 && (
-                              <span className="text-xs text-gray-500">
+                              <span className="text-xs text-gray-500 dark:text-gray-400">
                                 {t("modelSelector.moreCapabilities", {
                                   count: model.capabilities.length - 4,
                                 })}
@@ -252,7 +252,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                           </div>
                         )}
                         {showPricing && !compact && (
-                          <div className="flex items-center gap-4 text-xs text-gray-500">
+                          <div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
                             <div className="flex items-center gap-1">
                               <DollarSign className="w-3 h-3" />
                               {t("modelSelector.inputPrice", {
@@ -281,7 +281,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
             )
           )}
           {models.length === 0 && (
-            <div className="px-3 py-4 text-center text-gray-500">
+            <div className="px-3 py-4 text-center text-gray-500 dark:text-gray-400">
               <AlertCircle className="w-6 h-6 mx-auto mb-2" />
               <p className="text-sm">{t("modelSelector.noModels")}</p>
               {!showAllProviders && !provider && (