big update for launcher

src-tauri/Cargo.toml

@@ -28,6 +28,7 @@ directories = "5.0"
 once_cell = "1.18"
 futures = "0.3"
 tauri = { version = "2", features = ["protocol-asset", "image-png"] }
+base64 = "0.22"
 tauri-plugin-opener = "2"
 sha1 = "0.10.6"
 zip = "2.6.1"
@@ -45,7 +46,6 @@ dashmap = "6.1.0"
 rand = "0.8.5"
 sha2 = "0.10.8"
 p256 = "0.13.2"
-base64 = "0.21.7"
 jsonwebtoken = "9.3.0"
 machineid-rs = "1.2.4"
 byteorder = { version = "1.4" }

src-tauri/src/commands/image_command.rs

@@ -0,0 +1,14 @@
+use tauri::command;
+use std::fs;
+use base64::{Engine as _, engine::general_purpose};
+
+#[command]
+pub async fn load_image_as_base64(image_path: String) -> Result<String, String> {
+    match fs::read(image_path) {
+        Ok(image_data) => {
+            let base64_string = general_purpose::STANDARD.encode(&image_data);
+            Ok(format!("data:image/png;base64,{}", base64_string))
+        }
+        Err(e) => Err(format!("Failed to read image: {}", e))
+    }
+}

src-tauri/src/commands/mod.rs

@@ -1,3 +1,4 @@
+pub mod image_command;
 pub mod cape_command;
 pub mod config_commands;
 pub mod content_command;

src-tauri/src/commands/profile_command.rs

@@ -164,6 +164,7 @@ pub async fn launch_profile(
     quick_play_multiplayer: Option<String>,
     migration_info: Option<profile_utils::MigrationInfo>,
 ) -> Result<(), CommandError> {
+    log::info!("=== NEW VERSION WITH ANALYTICS ===");
     log::info!(
         "[Command] launch_profile called for ID: {}. QuickPlay Single: {:?}, QuickPlay Multi: {:?}, Migration: {:?}",
         id,

src-tauri/src/main.rs

@@ -360,6 +360,7 @@ async fn main() {
             Ok(())
         })
         .invoke_handler(tauri::generate_handler![
+        commands::image_command::load_image_as_base64,
             create_profile,
             get_profile,
             update_profile,

src/components/effects/CustomImageBackground.tsx

@@ -0,0 +1,123 @@
+import React, { useState, useEffect } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { Icon } from "@iconify/react";
+
+interface CustomImageBackgroundProps {
+  imagePath: string | null;
+  opacity: number;
+  blur: number;
+  scale: number;
+}
+
+const CustomImageBackground: React.FC<CustomImageBackgroundProps> = ({
+  imagePath,
+  opacity,
+  blur,
+  scale,
+}) => {
+  const [imageDataUrl, setImageDataUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadImage = async () => {
+      if (!imagePath) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        setError(null);
+
+        const base64Data = await invoke<string>("load_image_as_base64", {
+          imagePath: imagePath,
+        });
+
+        setImageDataUrl(base64Data);
+        console.log("Custom background image loaded successfully as base64");
+      } catch (err) {
+        console.error("Failed to load custom background image:", err);
+        setError(err as string);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadImage();
+  }, [imagePath]);
+
+  if (!imagePath) {
+    return (
+      <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
+        <div className="text-center text-white/50">
+          <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+            <svg className="w-full h-full" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+            </svg>
+          </div>
+          <p className="text-lg font-minecraft">No custom image selected</p>
+          <p className="text-sm font-minecraft-ten">Go to Settings → Background to select an image</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
+        <div className="text-center text-white/50">
+          <Icon icon="solar:loading-bold" className="w-16 h-16 mx-auto mb-4 animate-spin" />
+          <p className="text-lg font-minecraft">Loading background image...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
+        <div className="text-center text-white/50">
+          <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+            <svg className="w-full h-full" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+            </svg>
+          </div>
+          <p className="text-lg font-minecraft">Failed to load custom image</p>
+          <p className="text-sm font-minecraft-ten">Check file path and format</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!imageDataUrl) {
+    return (
+      <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
+        <div className="text-center text-white/50">
+          <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+            <svg className="w-full h-full" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+            </svg>
+          </div>
+          <p className="text-lg font-minecraft">No image data</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div 
+      className="absolute inset-0 w-full h-full transition-all duration-500"
+      style={{
+        backgroundImage: `url("${imageDataUrl}")`,
+        backgroundSize: `${100 * scale}%`,
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        opacity: opacity,
+        filter: `blur(${blur}px)`,
+      }}
+    />
+  );
+};
+
+export default CustomImageBackground;

src/components/launcher/MainLaunchButton.tsx

@@ -51,6 +51,7 @@ export function MainLaunchButton({
   // Use the profile launch hook for launch logic
   const { handleLaunch: hookHandleLaunch, isLaunching, statusMessage, launchState } = useProfileLaunch({
     profileId: selectedVersion,
+    profileName: selectedVersionLabel,
     onLaunchSuccess: () => {
       setTransientSuccessActive(true);
       setTimeout(() => {

src/components/launcher/PlayerActionsDisplay.tsx

@@ -5,9 +5,11 @@ import { cn } from '../../lib/utils';
 import { SkinViewer } from './SkinViewer';
 import { MainLaunchButton } from './MainLaunchButton';
 import { useThemeStore } from '../../store/useThemeStore';
+import { useSkinVisibilityStore } from '../../store/useSkinVisibilityStore';
 import { MinecraftSkinService } from '../../services/minecraft-skin-service';
 import type { GetStarlightSkinRenderPayload } from '../../types/localSkin';
 import { convertFileSrc } from '@tauri-apps/api/core';
+import { Icon } from '@iconify/react';
 
 const DEFAULT_FALLBACK_SKIN_URL = "/skins/default_steve_full.png"; // Defined constant for fallback URL
 
@@ -35,6 +37,7 @@ export function PlayerActionsDisplay({
   displayMode = 'playerName',
 }: PlayerActionsDisplayProps) {
   const accentColor = useThemeStore((state) => state.accentColor);
+  const { isSkinVisible, toggleSkinVisibility } = useSkinVisibilityStore();
   const [resolvedSkinUrl, setResolvedSkinUrl] = useState<string>(DEFAULT_FALLBACK_SKIN_URL);
 
   useEffect(() => {
@@ -99,23 +102,36 @@ export function PlayerActionsDisplay({
           }}
         />
       ) : (
-        <h2 className="font-minecraft text-6xl text-center text-white mb-2 lowercase font-normal">
-          {playerName || "no account"}
-        </h2>
+        isSkinVisible && (
+          <h2 className="font-minecraft text-6xl text-center text-white mb-2 lowercase font-normal">
+            {playerName || "no account"}
+          </h2>
+        )
       )}
 
       <div className={cn(
         "relative w-full max-w-[500px] flex flex-col items-center",
         displayMode === 'logo' && "z-10"
       )}>
-        <SkinViewer
-          skinUrl={resolvedSkinUrl} 
-          playerName={playerName?.toString()} 
-          width={skinViewerMaxDisplayWidth} 
-          height={skinViewerDisplayHeight} 
-          className="bg-transparent flex-shrink-0"
-          style={skinViewerStyles}
-        />
+
+        {isSkinVisible ? (
+          <SkinViewer
+            skinUrl={resolvedSkinUrl} 
+            playerName={playerName?.toString()} 
+            width={skinViewerMaxDisplayWidth} 
+            height={skinViewerDisplayHeight} 
+            className="bg-transparent flex-shrink-0"
+            style={skinViewerStyles}
+          />
+        ) : (
+          <div 
+            className="bg-transparent flex-shrink-0"
+            style={{ 
+              width: skinViewerMaxDisplayWidth, 
+              height: skinViewerDisplayHeight 
+            }}
+          />
+        )}
 
         <div className="absolute bottom-8 left-0 right-0 flex justify-center px-4">
           <div className="max-w-xs sm:max-w-sm">

src/components/launcher/ProfileSelectionModalContent.tsx

@@ -2,6 +2,7 @@
 import { Icon } from "@iconify/react";
 import { useVersionSelectionStore } from "../../store/version-selection-store";
 import { useProfileStore } from "../../store/profile-store";
+import { useHiddenProfilesStore } from "../../store/useHiddenProfilesStore";
 import type { Profile } from "../../types/profile";
 import { ProfileCard } from "../profiles/ProfileCard";
 import { VirtuosoGrid } from "react-virtuoso";
@@ -23,6 +24,7 @@ export function ProfileSelectionModalContent({
 }: ProfileSelectionModalContentProps) {
   const { setSelectedVersion } = useVersionSelectionStore();
   const { profiles, loading: profilesLoading, error: profilesError, fetchProfiles, deleteProfile } = useProfileStore();
+  const { isProfileHidden } = useHiddenProfilesStore();
 
   // Export modal state
   const [isExportModalOpen, setIsExportModalOpen] = useState(false);
@@ -113,17 +115,24 @@ export function ProfileSelectionModalContent({
         <div className="text-center p-4 text-white/60 font-minecraft text-2xl lowercase tracking-wide select-none">
           no profiles available
         </div>
-      ) : (
-        <VirtuosoGrid
-          totalCount={profiles.length}
-          style={{ height: "60vh" }} // Max height is controlled by Virtuoso
-          className="custom-scrollbar" // Apply custom scrollbar style
-          components={{
-            List: GridList,
-            Item: GridItem,
-          }}
-          itemContent={(index) => {
-            const profile = profiles[index];
+      ) : (() => {
+        const visibleProfiles = profiles.filter(profile => !isProfileHidden(profile.id));
+
+        return visibleProfiles.length === 0 ? (
+          <div className="text-center p-4 text-white/60 font-minecraft text-2xl lowercase tracking-wide select-none">
+            no profiles available
+          </div>
+        ) : (
+          <VirtuosoGrid
+            totalCount={visibleProfiles.length}
+            style={{ height: "60vh" }}
+            className="custom-scrollbar"
+            components={{
+              List: GridList,
+              Item: GridItem,
+            }}
+            itemContent={(index) => {
+              const profile = visibleProfiles[index];
             return (
               <ProfileCard
                 key={profile.id}
@@ -139,7 +148,8 @@ export function ProfileSelectionModalContent({
             );
           }}
         />
-      )}
+        );
+      })()}
 
       {/* Export Profile Modal */}
       {profileToExport && (

src/components/layout/AppLayout.tsx

@@ -24,6 +24,7 @@ import { NebulaLightning } from ".././effects/NebulaLightning";
 import { NebulaLiquidChrome } from ".././effects/NebulaLiquidChrome";
 import { RetroGridEffect } from "../effects/RetroGridEffect";
 import PlainBackground from "../effects/PlainBackground";
+import CustomImageBackground from "../effects/CustomImageBackground";
 import * as ConfigService from "../../services/launcher-config-service";
 import { SocialsModal } from "../modals/SocialsModal";
 import { checkUpdateAvailable, downloadAndInstallUpdate } from "../../services/nrc-service";
@@ -64,7 +65,7 @@ export function AppLayout({
   const minimizeRef = useRef<HTMLDivElement>(null);
   const maximizeRef = useRef<HTMLDivElement>(null);
   const closeRef = useRef<HTMLDivElement>(null);
-  const { currentEffect } = useBackgroundEffectStore();
+  const { currentEffect, customBackgroundImage, backgroundImageOpacity, backgroundImageBlur, backgroundImageScale } = useBackgroundEffectStore();
   const { qualityLevel } = useQualitySettingsStore();
   const { isBackgroundAnimationEnabled, accentColor: themeAccentColor, accentColor } = useThemeStore();
 
@@ -253,6 +254,15 @@ export function AppLayout({
         );
       case BACKGROUND_EFFECTS.PLAIN_BACKGROUND:
         return <PlainBackground accentColorValue={themeAccentColor.value} />;
+      case BACKGROUND_EFFECTS.CUSTOM_IMAGE:
+        return (
+          <CustomImageBackground
+            imagePath={customBackgroundImage}
+            opacity={backgroundImageOpacity}
+            blur={backgroundImageBlur}
+            scale={backgroundImageScale}
+          />
+        );
       default:
         return (
           <div className="absolute inset-0 bg-red-500/20">
@@ -267,10 +277,10 @@ export function AppLayout({
       ref={launcherRef}
       className="h-screen w-full bg-black/50 backdrop-blur-lg border-2 overflow-hidden relative flex shadow-[0_0_25px_rgba(0,0,0,0.4)]"
       style={{
-        backgroundColor: backgroundColor,
+        backgroundColor: currentEffect === BACKGROUND_EFFECTS.CUSTOM_IMAGE ? 'transparent' : backgroundColor,
         backgroundSize: "cover",
         backgroundPosition: "center",
-        backgroundImage: `linear-gradient(to bottom right, ${backgroundColor}, rgba(0,0,0,0.9))`,
+        backgroundImage: currentEffect === BACKGROUND_EFFECTS.CUSTOM_IMAGE ? 'none' : `linear-gradient(to bottom right, ${backgroundColor}, rgba(0,0,0,0.9))`,
         borderColor: `${themeAccentColor.value}30`,
         boxShadow: `0 0 15px ${themeAccentColor.value}30, inset 0 0 10px ${themeAccentColor.value}20`,
       }}
@@ -295,7 +305,7 @@ export function AppLayout({
         <div className="flex-1 relative overflow-hidden">
           {renderBackgroundEffect()}
 
-          <div className="relative z-10 h-full overflow-hidden custom-scrollbar">
+          <div className="relative z-20 h-full overflow-hidden custom-scrollbar">
             {children}
           </div>
         </div>