diff --git a/backend/app/core/config.py b/backend/app/core/config.py
index 70b521b..ae5a23e 100644
--- a/backend/app/core/config.py
+++ b/backend/app/core/config.py
@@ -73,6 +73,7 @@ class UIConfig(BaseModel):
"""UI preferences."""
default_theme: str = "dark"
+ welcome_message: str = "Paste any video or audio URL. We rip it, you download it. No accounts, no tracking."
class AdminConfig(BaseModel):
diff --git a/backend/app/routers/system.py b/backend/app/routers/system.py
index f1b50c7..8aa6004 100644
--- a/backend/app/routers/system.py
+++ b/backend/app/routers/system.py
@@ -23,6 +23,7 @@ async def public_config(request: Request) -> dict:
return {
"session_mode": config.session.mode,
"default_theme": config.ui.default_theme,
+ "welcome_message": config.ui.welcome_message,
"purge_enabled": config.purge.enabled,
"max_concurrent_downloads": config.downloads.max_concurrent,
}
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3a8b4e4..e8926ff 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -4,10 +4,11 @@ import { useSSE } from '@/composables/useSSE'
import { useConfigStore } from '@/stores/config'
import { useThemeStore } from '@/stores/theme'
import AppHeader from '@/components/AppHeader.vue'
+import AppFooter from '@/components/AppFooter.vue'
const configStore = useConfigStore()
const themeStore = useThemeStore()
-const { connectionStatus, connect } = useSSE()
+const { connect } = useSSE()
onMounted(async () => {
themeStore.init()
@@ -18,34 +19,7 @@ onMounted(async () => {
-
-
+
+
-
-
diff --git a/frontend/src/api/types.ts b/frontend/src/api/types.ts
index 8901605..6ad99c3 100644
--- a/frontend/src/api/types.ts
+++ b/frontend/src/api/types.ts
@@ -67,6 +67,7 @@ export interface FormatInfo {
export interface PublicConfig {
session_mode: string
default_theme: string
+ welcome_message: string
purge_enabled: boolean
max_concurrent_downloads: number
}
diff --git a/frontend/src/components/AppFooter.vue b/frontend/src/components/AppFooter.vue
new file mode 100644
index 0000000..cd49d8e
--- /dev/null
+++ b/frontend/src/components/AppFooter.vue
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 31b9ab6..bb9b215 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -1,17 +1,5 @@
@@ -21,13 +9,7 @@ const statusColor: Record = {
media.rip()
@@ -72,17 +54,4 @@ const statusColor: Record = {
align-items: center;
gap: var(--space-md);
}
-
-.header-status {
- display: flex;
- align-items: center;
- gap: var(--space-xs);
-}
-
-.status-dot {
- width: 10px;
- height: 10px;
- border-radius: 50%;
- transition: background-color 0.3s ease;
-}
diff --git a/frontend/src/components/AppLayout.vue b/frontend/src/components/AppLayout.vue
index 1684684..6f4f684 100644
--- a/frontend/src/components/AppLayout.vue
+++ b/frontend/src/components/AppLayout.vue
@@ -1,10 +1,5 @@
+
+
+
+
+
+
diff --git a/frontend/src/components/DownloadItem.vue b/frontend/src/components/DownloadItem.vue
index fcfec83..3ff9c0b 100644
--- a/frontend/src/components/DownloadItem.vue
+++ b/frontend/src/components/DownloadItem.vue
@@ -1,5 +1,5 @@
@@ -74,10 +80,12 @@ async function cancel(): Promise {
diff --git a/frontend/src/components/MainView.vue b/frontend/src/components/MainView.vue
index ce92833..83b7fb9 100644
--- a/frontend/src/components/MainView.vue
+++ b/frontend/src/components/MainView.vue
@@ -1,12 +1,14 @@
-
+
+
diff --git a/frontend/src/components/WelcomeMessage.vue b/frontend/src/components/WelcomeMessage.vue
new file mode 100644
index 0000000..db09288
--- /dev/null
+++ b/frontend/src/components/WelcomeMessage.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/stores/theme.ts b/frontend/src/stores/theme.ts
index 4934e58..7a4fe6b 100644
--- a/frontend/src/stores/theme.ts
+++ b/frontend/src/stores/theme.ts
@@ -33,6 +33,9 @@ export const useThemeStore = defineStore('theme', () => {
const customThemes = ref([])
const customThemeCSS = ref>(new Map())
+ /** Whether the current theme is a dark variant (cyberpunk and dark are dark; light is light). */
+ const isDark = computed(() => currentTheme.value !== 'light')
+
const allThemes = computed(() => [
...BUILTIN_THEMES,
...customThemes.value,
@@ -55,6 +58,20 @@ export const useThemeStore = defineStore('theme', () => {
_apply(currentTheme.value)
}
+ /**
+ * Toggle between the current theme's dark and light variant.
+ * Cyberpunk (default) ↔ Light. Dark ↔ Light.
+ */
+ function toggleDarkMode(): void {
+ if (isDark.value) {
+ setTheme('light')
+ } else {
+ // Return to the last dark theme, defaulting to cyberpunk
+ const lastDark = localStorage.getItem(STORAGE_KEY + '-dark') || DEFAULT_THEME
+ setTheme(lastDark === 'light' ? DEFAULT_THEME : lastDark)
+ }
+ }
+
/**
* Switch to a theme by ID. Saves to localStorage and applies immediately.
*/
@@ -64,6 +81,10 @@ export const useThemeStore = defineStore('theme', () => {
currentTheme.value = themeId
localStorage.setItem(STORAGE_KEY, themeId)
+ // Remember the last dark theme for toggle
+ if (themeId !== 'light') {
+ localStorage.setItem(STORAGE_KEY + '-dark', themeId)
+ }
_apply(themeId)
}
@@ -139,8 +160,10 @@ export const useThemeStore = defineStore('theme', () => {
customThemes,
allThemes,
currentMeta,
+ isDark,
init,
setTheme,
+ toggleDarkMode,
loadCustomThemes,
}
})
diff --git a/frontend/src/tests/stores/config.test.ts b/frontend/src/tests/stores/config.test.ts
index ad0957c..8f87430 100644
--- a/frontend/src/tests/stores/config.test.ts
+++ b/frontend/src/tests/stores/config.test.ts
@@ -28,6 +28,7 @@ describe('config store', () => {
const mockConfig = {
session_mode: 'isolated',
default_theme: 'dark',
+ welcome_message: 'Test welcome',
purge_enabled: false,
max_concurrent_downloads: 3,
}
diff --git a/frontend/src/tests/stores/theme.test.ts b/frontend/src/tests/stores/theme.test.ts
index bba842d..a7b6333 100644
--- a/frontend/src/tests/stores/theme.test.ts
+++ b/frontend/src/tests/stores/theme.test.ts
@@ -90,4 +90,49 @@ describe('theme store', () => {
expect(store.currentMeta?.id).toBe('cyberpunk')
expect(store.currentMeta?.name).toBe('Cyberpunk')
})
+
+ it('isDark is true for cyberpunk and dark themes', () => {
+ const store = useThemeStore()
+ store.init()
+ expect(store.isDark).toBe(true)
+
+ store.setTheme('dark')
+ expect(store.isDark).toBe(true)
+ })
+
+ it('isDark is false for light theme', () => {
+ const store = useThemeStore()
+ store.init()
+ store.setTheme('light')
+ expect(store.isDark).toBe(false)
+ })
+
+ it('toggleDarkMode switches from dark to light', () => {
+ const store = useThemeStore()
+ store.init() // starts on cyberpunk (dark)
+ store.toggleDarkMode()
+ expect(store.currentTheme).toBe('light')
+ expect(store.isDark).toBe(false)
+ })
+
+ it('toggleDarkMode switches from light back to last dark theme', () => {
+ const store = useThemeStore()
+ store.init()
+ // Start on cyberpunk, toggle to light, toggle back
+ store.toggleDarkMode()
+ expect(store.currentTheme).toBe('light')
+ store.toggleDarkMode()
+ expect(store.currentTheme).toBe('cyberpunk')
+ expect(store.isDark).toBe(true)
+ })
+
+ it('toggleDarkMode remembers dark theme when starting from dark', () => {
+ const store = useThemeStore()
+ store.init()
+ store.setTheme('dark') // switch to the "dark" theme (not cyberpunk)
+ store.toggleDarkMode()
+ expect(store.currentTheme).toBe('light')
+ store.toggleDarkMode()
+ expect(store.currentTheme).toBe('dark') // returns to dark, not cyberpunk
+ })
})