making wallpapers random

components/ConfigurationModal.tsx

@@ -13,7 +13,7 @@ interface ConfigurationModalProps {
   onSave: (config: Config) => void;
   currentConfig: Config;
   onWallpaperChange: (newConfig: Partial<Config>) => void;
-  onNextWallpaper: () => void;
+  onRandomWallpaper: () => void;
 }
 
 const ConfigurationModal: React.FC<ConfigurationModalProps> = ({
@@ -21,7 +21,7 @@ const ConfigurationModal: React.FC<ConfigurationModalProps> = ({
   onSave,
   currentConfig,
   onWallpaperChange,
-  onNextWallpaper,
+  onRandomWallpaper,
 }) => {
   const [config, setConfig] = useState<Config>(currentConfig);
   const [activeTab, setActiveTab] = useState('general');
@@ -177,7 +177,7 @@ const ConfigurationModal: React.FC<ConfigurationModalProps> = ({
               onAddWallpaper={handleAddWallpaper}
               onAddWallpaperFile={handleAddWallpaperFile}
               onDeleteWallpaper={handleDeleteWallpaper}
-              onNextWallpaper={onNextWallpaper}
+              onRandomWallpaper={onRandomWallpaper}
             />
           )}
           {activeTab === 'clock' && (

components/Wallpaper.tsx

@@ -27,6 +27,12 @@ const parseFrequencyToMs = (freq: string): number => {
   return Math.min(MAX_WALLPAPER_FREQUENCY_MS, Math.max(MIN_WALLPAPER_FREQUENCY_MS, frequencyMs));
 };
 
+const getRandomWallpaperIndex = (wallpaperCount: number, currentIndex: number): number => {
+  if (wallpaperCount <= 1) return 0;
+  const offset = Math.floor(Math.random() * (wallpaperCount - 1)) + 1;
+  return (currentIndex + offset) % wallpaperCount;
+};
+
 const wallpaperUrlCache = new Map<string, string | undefined>();
 
 const getWallpaperUrlByName = async (name: string): Promise<string | undefined> => {
@@ -91,7 +97,7 @@ const Wallpaper: React.FC<WallpaperProps> = ({ wallpaperNames, blur, brightness,
 
       const shouldRotate = now - lastChange >= freqMs;
       let resolvedIndex = shouldRotate
-        ? (storedIndex + 1) % wallpaperNames.length
+        ? getRandomWallpaperIndex(wallpaperNames.length, storedIndex)
         : storedIndex;
 
       const tried = new Set<number>();

components/configuration/ThemeTab.tsx

@@ -11,7 +11,7 @@ interface ThemeTabProps {
   onAddWallpaper: (name: string, url: string) => Promise<void>;
   onAddWallpaperFile: (file: File) => Promise<void>;
   onDeleteWallpaper: (wallpaper: Wallpaper) => Promise<void>;
-  onNextWallpaper: () => void;
+  onRandomWallpaper: () => void;
 }
 
 type RangeStyle = React.CSSProperties & { '--range-progress': string };
@@ -48,7 +48,7 @@ const ThemeTab: React.FC<ThemeTabProps> = ({
   onAddWallpaper,
   onAddWallpaperFile,
   onDeleteWallpaper,
-  onNextWallpaper,
+  onRandomWallpaper,
 }) => {
   const [newWallpaperName, setNewWallpaperName] = useState('');
   const [newWallpaperUrl, setNewWallpaperUrl] = useState('');
@@ -263,7 +263,7 @@ const ThemeTab: React.FC<ThemeTabProps> = ({
       </div>
       <div className="flex justify-center pt-2">
         <button
-          onClick={onNextWallpaper}
+          onClick={onRandomWallpaper}
           disabled={config.currentWallpapers.length === 0}
           className="liquid-surface liquid-control liquid-focus disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-semibold py-2 px-4 rounded-2xl"
         >
@@ -276,7 +276,7 @@ const ThemeTab: React.FC<ThemeTabProps> = ({
           >
             <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM4.5 7.5a.5.5 0 0 1 .5-.5h5.379L8.646 5.354a.5.5 0 1 1 .708-.708l2.5 2.5a.5.5 0 0 1 0 .708l-2.5 2.5a.5.5 0 0 1-.708-.708L10.379 8H5a.5.5 0 0 1-.5-.5z" />
           </svg>
-          Next Wallpaper
+          Random Wallpaper
         </button>
       </div>
     </div>