Labyricorn/voicebox
1
0
Fork 0
mirror of https://github.com/jamiepine/voicebox.git synced 2026-10-03 09:05:17 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix: model loaded icon uses accent-colored CircleCheck, show size for loaded models, fix generate box overlapping player on stories route

Browse Source
This commit is contained in:
James Pine
2026-03-13 02:09:32 -07:00
parent cc07d4d3c9
commit c54ee14173
2 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/components/ServerSettings/ModelManagement.tsx
+7 -8
View File
@@ -14,7 +14,6 @@ import {
Scale, Scale,
Trash2, Trash2,
X, X,
Zap,
} from 'lucide-react'; } from 'lucide-react';
import { useCallback, useMemo, useState } from 'react'; import { useCallback, useMemo, useState } from 'react';
import { import {
@@ -389,7 +388,7 @@ export function ModelManagement() {
) : isDownloading ? ( ) : isDownloading ? (
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" /> <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
) : model.loaded ? ( ) : model.loaded ? (
<Zap className="h-4 w-4 text-primary" /> <CircleCheck className="h-4 w-4 text-accent" />
) : model.downloaded ? ( ) : model.downloaded ? (
<CircleCheck className="h-4 w-4 text-emerald-500" /> <CircleCheck className="h-4 w-4 text-emerald-500" />
) : ( ) : (
@@ -426,11 +425,11 @@ export function ModelManagement() {
</Badge> </Badge>
)} )}
{model.loaded && ( {model.loaded && (
<Badge variant="default" className="text-[10px] h-5"> <Badge className="text-[10px] h-5 bg-accent/15 text-accent border-accent/30 hover:bg-accent/15">
Active Loaded
</Badge> </Badge>
)} )}
{model.downloaded && !model.loaded && !isDownloading && !hasError && ( {model.downloaded && !isDownloading && !hasError && (
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
{formatSize(model.size_mb)} {formatSize(model.size_mb)}
</span> </span>
@@ -538,9 +537,9 @@ export function ModelManagement() {
{/* Status badges */} {/* Status badges */}
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
{freshSelectedModel.loaded && ( {freshSelectedModel.loaded && (
<Badge variant="default" className="text-xs"> <Badge className="text-xs bg-accent/15 text-accent border-accent/30 hover:bg-accent/15">
<Zap className="h-3 w-3 mr-1" /> <CircleCheck className="h-3 w-3 mr-1" />
Loaded in memory Loaded
</Badge> </Badge>
)} )}
{freshSelectedModel.downloaded && !freshSelectedModel.loaded && ( {freshSelectedModel.downloaded && !freshSelectedModel.loaded && (
app/src/components/StoriesTab/StoriesTab.tsx
+4 -1
View File
@@ -1,8 +1,11 @@
import { FloatingGenerateBox } from '@/components/Generation/FloatingGenerateBox'; import { FloatingGenerateBox } from '@/components/Generation/FloatingGenerateBox';
import { usePlayerStore } from '@/stores/playerStore';
import { StoryContent } from './StoryContent'; import { StoryContent } from './StoryContent';
import { StoryList } from './StoryList'; import { StoryList } from './StoryList';
export function StoriesTab() { export function StoriesTab() {
const audioUrl = usePlayerStore((state) => state.audioUrl);
return ( return (
<div className="flex flex-col h-full min-h-0 overflow-hidden"> <div className="flex flex-col h-full min-h-0 overflow-hidden">
{/* Main content area */} {/* Main content area */}
@@ -18,7 +21,7 @@ export function StoriesTab() {
</div> </div>
{/* Floating Generate Box - position is managed via storyStore.trackEditorHeight */} {/* Floating Generate Box - position is managed via storyStore.trackEditorHeight */}
<FloatingGenerateBox showVoiceSelector /> <FloatingGenerateBox showVoiceSelector isPlayerOpen={!!audioUrl} />
</div> </div>
</div> </div>
); );