+
Something went wrong in this component
{process.env.NODE_ENV === 'development' && this.state.error && (
-
+
{this.state.error.toString()}
)}
diff --git a/ui/src/components/file-browser.test.tsx b/ui/src/components/file-browser.test.tsx
index 3447b9a..074174c 100644
--- a/ui/src/components/file-browser.test.tsx
+++ b/ui/src/components/file-browser.test.tsx
@@ -201,7 +201,7 @@ describe('FileBrowser', () => {
await waitFor(() => {
const fileButton = screen.getByText('video.mp4').closest('button')
- expect(fileButton).toHaveClass('bg-violet-500/10')
+ expect(fileButton).toHaveClass('bg-primary/10')
})
})
@@ -250,7 +250,7 @@ describe('FileBrowser', () => {
await waitFor(() => {
const rootButton = screen.getByText('Local Storage').closest('button')
- expect(rootButton).toHaveClass('bg-violet-500/10')
+ expect(rootButton).toHaveClass('bg-primary/10')
})
})
})
@@ -260,8 +260,8 @@ describe('FileBrowser', () => {
renderWithQueryClient()
await waitFor(() => {
- // Folders have amber-400 color
- expect(document.querySelector('.text-amber-400')).toBeInTheDocument()
+ // Folders use the warning token
+ expect(document.querySelector('.text-warning')).toBeInTheDocument()
})
})
@@ -269,8 +269,8 @@ describe('FileBrowser', () => {
renderWithQueryClient()
await waitFor(() => {
- // Video files have violet-400 color
- expect(document.querySelector('.text-violet-400')).toBeInTheDocument()
+ // Video files use the brand token
+ expect(document.querySelector('.text-brand')).toBeInTheDocument()
})
})
})
diff --git a/ui/src/components/file-browser.tsx b/ui/src/components/file-browser.tsx
index 6f8d8ac..9f07b03 100644
--- a/ui/src/components/file-browser.tsx
+++ b/ui/src/components/file-browser.tsx
@@ -96,16 +96,16 @@ export function FileBrowser({ onSelect, selectedPath, mediaOnly = true }: FileBr
const getFileIcon = (entry: BrowseEntry) => {
if (entry.is_directory) {
- return ;
+ return ;
}
if (entry.is_video) {
- return ;
+ return ;
}
if (entry.is_audio) {
- return ;
+ return ;
}
if (entry.is_image) {
- return ;
+ return ;
}
return ;
};
@@ -190,12 +190,12 @@ export function FileBrowser({ onSelect, selectedPath, mediaOnly = true }: FileBr
return (
{/* Plugin header */}
-
{pluginId.replace('storage-', '')}
{isActivePlugin && (
-
+
)}
{/* Plugin roots */}
@@ -204,7 +204,7 @@ export function FileBrowser({ onSelect, selectedPath, mediaOnly = true }: FileBr
key={`${root.plugin_id}-${root.path}-${index}`}
onClick={() => handleSelectRoot(root)}
className={`w-full text-left px-3 py-2 text-sm flex items-center gap-2 hover:bg-muted/50 transition-colors ${activePath === root.path && activePlugin === root.plugin_id
- ? "bg-violet-500/10 text-violet-400 border-l-2 border-violet-400"
+ ? "bg-primary/10 text-brand border-l-2 border-primary"
: "text-muted-foreground"
}`}
>
@@ -235,17 +235,17 @@ export function FileBrowser({ onSelect, selectedPath, mediaOnly = true }: FileBr
onSelect(`file://${entry.path}`);
}
}}
- className={`w-full text-left px-4 py-2.5 flex items-center gap-3 hover:bg-muted/50 transition-colors group ${isSelected(entry) ? "bg-violet-500/10 border-l-2 border-violet-500" : ""
+ className={`w-full text-left px-4 py-2.5 flex items-center gap-3 hover:bg-muted/50 transition-colors group ${isSelected(entry) ? "bg-primary/10 border-l-2 border-primary" : ""
}`}
>
{getFileIcon(entry)}
-
+
{entry.name}
{isSelected(entry) && (
-
+
)}
{!entry.is_directory && (
@@ -286,7 +286,7 @@ export function FileBrowser({ onSelect, selectedPath, mediaOnly = true }: FileBr
{selectedPath && (
-
+
Selected:
{selectedPath.replace("file://", "")}
diff --git a/ui/src/components/file-upload.test.tsx b/ui/src/components/file-upload.test.tsx
index 6beee52..df3f151 100644
--- a/ui/src/components/file-upload.test.tsx
+++ b/ui/src/components/file-upload.test.tsx
@@ -417,8 +417,8 @@ describe('FileUpload', () => {
fireEvent.change(input)
await waitFor(() => {
- // Video files use violet-400 color
- expect(document.querySelector('.text-violet-400')).toBeInTheDocument()
+ // Video files use the brand token
+ expect(document.querySelector('.text-brand')).toBeInTheDocument()
})
})
@@ -432,8 +432,8 @@ describe('FileUpload', () => {
fireEvent.change(input)
await waitFor(() => {
- // Audio files use cyan-400 color
- expect(document.querySelector('.text-cyan-400')).toBeInTheDocument()
+ // Audio files use the info token
+ expect(document.querySelector('.text-info')).toBeInTheDocument()
})
})
})
diff --git a/ui/src/components/file-upload.tsx b/ui/src/components/file-upload.tsx
index 75c9b1a..9510207 100644
--- a/ui/src/components/file-upload.tsx
+++ b/ui/src/components/file-upload.tsx
@@ -151,13 +151,13 @@ export function FileUpload({
const getFileIcon = (file: File) => {
if (file.type.startsWith("video/")) {
- return ;
+ return ;
}
if (file.type.startsWith("audio/")) {
- return ;
+ return ;
}
if (file.type.startsWith("image/")) {
- return ;
+ return ;
}
return ;
};
@@ -191,8 +191,8 @@ export function FileUpload({
relative border-2 border-dashed rounded-lg p-8 text-center cursor-pointer
transition-all duration-200
${isDragging
- ? "border-violet-500 bg-violet-500/10"
- : "border-border hover:border-violet-500/50 hover:bg-muted/50"
+ ? "border-primary bg-primary/10"
+ : "border-border hover:border-primary/50 hover:bg-muted/50"
}
`}
>
@@ -200,11 +200,11 @@ export function FileUpload({
@@ -268,8 +268,8 @@ export function FileUpload({
{state === "uploading" && selectedFile && (
-
-
+
+
{selectedFile.name}
@@ -278,7 +278,7 @@ export function FileUpload({
{formatSize(progress.loaded)} / {formatSize(progress.total)}
•
-
{progress.percentage}%
+
{progress.percentage}%
@@ -290,13 +290,13 @@ export function FileUpload({
{/* Complete State */}
{state === "complete" && selectedFile && (
-
+
-
-
+
+
-
Upload Complete
+
Upload Complete
{selectedFile.name}
@@ -310,14 +310,14 @@ export function FileUpload({
{/* Error State */}
{state === "error" && (
-
+
-
-
+
-
Upload Failed
-
{error}
+
Upload Failed
+
{error}