diff --git a/src/composables/useFeatureFlags.ts b/src/composables/useFeatureFlags.ts
index 9a0bcd03d..643bb103f 100644
--- a/src/composables/useFeatureFlags.ts
+++ b/src/composables/useFeatureFlags.ts
@@ -8,7 +8,8 @@ import { api } from '@/scripts/api'
export enum ServerFeatureFlag {
SUPPORTS_PREVIEW_METADATA = 'supports_preview_metadata',
MAX_UPLOAD_SIZE = 'max_upload_size',
- MANAGER_SUPPORTS_V4 = 'extension.manager.supports_v4'
+ MANAGER_SUPPORTS_V4 = 'extension.manager.supports_v4',
+ MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled'
}
/**
@@ -24,6 +25,12 @@ export function useFeatureFlags() {
},
get supportsManagerV4() {
return api.getServerFeature(ServerFeatureFlag.MANAGER_SUPPORTS_V4)
+ },
+ get modelUploadButtonEnabled() {
+ return api.getServerFeature(
+ ServerFeatureFlag.MODEL_UPLOAD_BUTTON_ENABLED,
+ false
+ )
}
})
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 5a297bf23..bce0628b6 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1984,6 +1984,7 @@
"failedToCreateNode": "Failed to create node. Please try again or check console for details.",
"noModelsInFolder": "No {type} available in this folder",
"searchAssetsPlaceholder": "Type to search...",
+ "uploadModel": "Upload model",
"allModels": "All Models",
"allCategory": "All {category}",
"unknown": "Unknown",
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index dccd36208..2f0469e38 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -21,13 +21,27 @@
-
+
+
+
+
+
+
+
+
@@ -52,9 +66,11 @@ import { useAsyncState } from '@vueuse/core'
import { computed, provide, watch } from 'vue'
import { useI18n } from 'vue-i18n'
+import IconTextButton from '@/components/button/IconTextButton.vue'
import SearchBox from '@/components/input/SearchBox.vue'
import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
import AssetFilterBar from '@/platform/assets/components/AssetFilterBar.vue'
import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
@@ -168,4 +184,11 @@ function handleAssetSelectAndEmit(asset: AssetDisplayItem) {
// It handles the appropriate transformation (filename extraction or full asset)
props.onSelect?.(asset)
}
+
+const { flags } = useFeatureFlags()
+const isUploadButtonEnabled = computed(() => flags.modelUploadButtonEnabled)
+
+function handleUploadClick() {
+ // Will be implemented in the future commit
+}
diff --git a/src/types/buttonTypes.ts b/src/types/buttonTypes.ts
index 7b455db5c..39413209c 100644
--- a/src/types/buttonTypes.ts
+++ b/src/types/buttonTypes.ts
@@ -1,7 +1,7 @@
import type { HTMLAttributes } from 'vue'
export type ButtonSize = 'fit-content' | 'sm' | 'md'
-type ButtonType = 'primary' | 'secondary' | 'transparent'
+type ButtonType = 'primary' | 'secondary' | 'transparent' | 'accent'
type ButtonBorder = boolean
export interface BaseButtonProps {
@@ -28,7 +28,9 @@ export const getButtonTypeClasses = (type: ButtonType = 'primary') => {
secondary:
'bg-white border-none text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white',
transparent:
- 'bg-transparent border-none text-neutral-600 dark-theme:text-neutral-200'
+ 'bg-transparent border-none text-neutral-600 dark-theme:text-neutral-200',
+ accent:
+ 'bg-primary-background hover:bg-primary-background-hover border-none text-white font-bold'
} as const
return baseByType[type]
@@ -40,14 +42,17 @@ export const getBorderButtonTypeClasses = (type: ButtonType = 'primary') => {
'bg-neutral-900 text-white dark-theme:bg-white dark-theme:text-neutral-900',
secondary:
'bg-white text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white',
- transparent: 'bg-transparent text-neutral-600 dark-theme:text-neutral-400'
+ transparent: 'bg-transparent text-neutral-600 dark-theme:text-neutral-400',
+ accent:
+ 'bg-primary-background hover:bg-primary-background-hover text-white font-bold'
} as const
const borderByType = {
primary: 'border border-solid border-white dark-theme:border-neutral-900',
secondary: 'border border-solid border-neutral-950 dark-theme:border-white',
transparent:
- 'border border-solid border-neutral-950 dark-theme:border-white'
+ 'border border-solid border-neutral-950 dark-theme:border-white',
+ accent: 'border border-solid border-primary-background'
} as const
return `${baseByType[type]} ${borderByType[type]}`