From c54ee141734056d9d12d444c91508d1911444ac8 Mon Sep 17 00:00:00 2001
From: James Pine <ijamespine@me.com>
Date: Fri, 13 Mar 2026 01:49:24 -0700
Subject: [PATCH] fix: model loaded icon uses accent-colored CircleCheck, show
 size for loaded models, fix generate box overlapping player on stories route

---
 .../components/ServerSettings/ModelManagement.tsx | 15 +++++++--------
 app/src/components/StoriesTab/StoriesTab.tsx      |  5 ++++-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/app/src/components/ServerSettings/ModelManagement.tsx b/app/src/components/ServerSettings/ModelManagement.tsx
index ec94cb12..7f647eed 100644
--- a/app/src/components/ServerSettings/ModelManagement.tsx
+++ b/app/src/components/ServerSettings/ModelManagement.tsx
@@ -14,7 +14,6 @@ import {
   Scale,
   Trash2,
   X,
-  Zap,
 } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
 import {
@@ -389,7 +388,7 @@ export function ModelManagement() {
                         ) : isDownloading ? (
                           <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
                         ) : model.loaded ? (
-                          <Zap className="h-4 w-4 text-primary" />
+                          <CircleCheck className="h-4 w-4 text-accent" />
                         ) : model.downloaded ? (
                           <CircleCheck className="h-4 w-4 text-emerald-500" />
                         ) : (
@@ -426,11 +425,11 @@ export function ModelManagement() {
                           </Badge>
                         )}
                         {model.loaded && (
-                          <Badge variant="default" className="text-[10px] h-5">
-                            Active
+                          <Badge className="text-[10px] h-5 bg-accent/15 text-accent border-accent/30 hover:bg-accent/15">
+                            Loaded
                           </Badge>
                         )}
-                        {model.downloaded && !model.loaded && !isDownloading && !hasError && (
+                        {model.downloaded && !isDownloading && !hasError && (
                           <span className="text-xs text-muted-foreground">
                             {formatSize(model.size_mb)}
                           </span>
@@ -538,9 +537,9 @@ export function ModelManagement() {
                 {/* Status badges */}
                 <div className="flex items-center gap-2 flex-wrap">
                   {freshSelectedModel.loaded && (
-                    <Badge variant="default" className="text-xs">
-                      <Zap className="h-3 w-3 mr-1" />
-                      Loaded in memory
+                    <Badge className="text-xs bg-accent/15 text-accent border-accent/30 hover:bg-accent/15">
+                      <CircleCheck className="h-3 w-3 mr-1" />
+                      Loaded
                     </Badge>
                   )}
                   {freshSelectedModel.downloaded && !freshSelectedModel.loaded && (
diff --git a/app/src/components/StoriesTab/StoriesTab.tsx b/app/src/components/StoriesTab/StoriesTab.tsx
index f237e8db..7005092d 100644
--- a/app/src/components/StoriesTab/StoriesTab.tsx
+++ b/app/src/components/StoriesTab/StoriesTab.tsx
@@ -1,8 +1,11 @@
 import { FloatingGenerateBox } from '@/components/Generation/FloatingGenerateBox';
+import { usePlayerStore } from '@/stores/playerStore';
 import { StoryContent } from './StoryContent';
 import { StoryList } from './StoryList';
 
 export function StoriesTab() {
+  const audioUrl = usePlayerStore((state) => state.audioUrl);
+
   return (
     <div className="flex flex-col h-full min-h-0 overflow-hidden">
       {/* Main content area */}
@@ -18,7 +21,7 @@ export function StoriesTab() {
         </div>
 
         {/* Floating Generate Box - position is managed via storyStore.trackEditorHeight */}
-        <FloatingGenerateBox showVoiceSelector />
+        <FloatingGenerateBox showVoiceSelector isPlayerOpen={!!audioUrl} />
       </div>
     </div>
   );