+
+ View changelog
+
+
+
+ Reload app
+
+
- No lines match this filter: {{ query }} -
- - + />
-
+
+
+ Wrap
+
+
diff --git a/ui/app/components/Markdown.vue b/ui/app/components/Markdown.vue
index 06f8cb45..06ff4a57 100644
--- a/ui/app/components/Markdown.vue
+++ b/ui/app/components/Markdown.vue
@@ -264,6 +264,10 @@
.markdown-alert-caution {
--markdown-alert-accent: var(--ui-error);
}
+.docs-markdown details summary {
+ cursor: pointer;
+ user-select: none;
+}
diff --git a/ui/app/components/SettingsPanel.vue b/ui/app/components/SettingsPanel.vue
index b94ff349..1b08f4e0 100644
--- a/ui/app/components/SettingsPanel.vue
+++ b/ui/app/components/SettingsPanel.vue
@@ -20,7 +20,9 @@
size="sm"
square
icon="i-lucide-x"
- class="ml-auto shrink-0 sm:hidden"
+ aria-label="Close settings"
+ title="Close settings"
+ class="ml-auto shrink-0"
@click="emitter('close')"
/>
@@ -37,14 +39,31 @@
-
+
+ Save layout
+
+
+
+
+
+
+
diff --git a/ui/app/components/ThemeButton.vue b/ui/app/components/ThemeButton.vue
new file mode 100644
index 00000000..e4ccbef8
--- /dev/null
+++ b/ui/app/components/ThemeButton.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+ {{ label }}
+
+ {{ value }}
+ {{ hint }}
+
+
+ {{ value }}
+ {{ hint }}
+
+
+
+
+
-
- Reconnect
-
+
+
-
-
-
+
-
-
+
+
+ ![YTPTube]()
+
+
+
+
+
-
-
+
+ + YTPTube +
++ {{ config.app.instance_title }} +
+
-
- View changelog
-
+
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
- Reload app
-
+
+ {{ section.label }} +
-
+
+ Home
+
+
+
+
+
+
+
+ Limits
+
+
+
+ Reload
+
+
+
+ WebUI Settings
+
+
+
+ Shutdown
+
+
+
+
+ ('simple_mode', config.app.simple_mode || false);
- simpleMode.value = ['true', '1', 'yes', 'on'].includes(route.query.simple as string);
- await nextTick();
- const url = new URL(window.location.href);
- url.searchParams.delete('simple');
- window.history.replaceState({}, '', url.toString());
- }
-
if (Object.keys(pendingDownloadFormItem.value).length > 0) {
await toNewDownload(pendingDownloadFormItem.value);
pendingDownloadFormItem.value = {};
diff --git a/ui/app/pages/logs.vue b/ui/app/pages/logs.vue
index f590ccec..c0d4f665 100644
--- a/ui/app/pages/logs.vue
+++ b/ui/app/pages/logs.vue
@@ -1,3 +1,20 @@
+
+
+
+
@@ -1228,20 +944,6 @@ const reloadPage = () => window.location.reload();
min-height: 100dvh;
}
-.shell-mode-enter-active,
-.shell-mode-leave-active {
- transition:
- opacity 0.28s ease,
- transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
- will-change: opacity, transform;
-}
-
-.shell-mode-enter-from,
-.shell-mode-leave-to {
- opacity: 0;
- transform: translateY(18px) scale(0.985);
-}
-
.shell-root {
min-height: 100vh;
min-height: 100dvh;
diff --git a/ui/app/middleware/mode.global.ts b/ui/app/middleware/mode.global.ts
new file mode 100644
index 00000000..bb29cf31
--- /dev/null
+++ b/ui/app/middleware/mode.global.ts
@@ -0,0 +1,35 @@
+import { cookieDefault, parseMode, routeTarget, savePref, usePref } from '~/composables/useMode';
+
+export default defineNuxtRouteMiddleware(async (to) => {
+ const path = to.path.replace(/\/+$/, '') || '/';
+ const pref = usePref();
+
+ if (to.query.simple !== undefined) {
+ const value = parseMode(to.query.simple);
+ if (value !== null) {
+ savePref(value);
+ }
+
+ const query = { ...to.query };
+ delete query.simple;
+ const target = value === true ? '/simple' : value === false ? '/' : to.path;
+
+ return navigateTo({ path: target, query, hash: to.hash }, { replace: true });
+ }
+
+ if (path !== '/') {
+ return;
+ }
+
+ let def = cookieDefault();
+ if (pref.value === null && def === null) {
+ const cfg = useYtpConfig();
+ await cfg.loadConfig();
+ def = Boolean(cfg.app.simple_mode);
+ }
+
+ const target = routeTarget(path, pref.value, Boolean(def));
+ if (target) {
+ return navigateTo(target, { replace: true });
+ }
+});
diff --git a/ui/app/pages/index.vue b/ui/app/pages/index.vue
index 799254ac..cf077eab 100644
--- a/ui/app/pages/index.vue
+++ b/ui/app/pages/index.vue
@@ -754,7 +754,6 @@ import { requirePageShell } from '~/utils/topLevelNavigation';
const config = useYtpConfig();
const stateStore = useQueueState();
const socket = useAppSocket();
-const route = useRoute();
const toast = useNotification();
const box = useConfirm();
const { confirmDialog } = useDialog();
@@ -889,15 +888,6 @@ const stopAutoRefresh = (): void => {
};
onMounted(async () => {
- if (route.query?.simple !== undefined) {
- const simpleMode = useStorage
+
- ![YTPTube]()
-
-
+
+
-
-
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
+
+ - YTPTube -
-- {{ config.app.instance_title }} -
-
+
-
-
-
-
-
-
- + This usually takes less than a few seconds. If this is taking too long, + + to reload the page. +
- -
-
-
-
+
+
+
+ + Failed to load the application configuration. This likely indicates a + problem with the backend. Try to + + or + + . +
+ +
+
+
- {{ section.label }}
-
-
-
-
- Home
-
-
-
-
-
-
-
- Limits
-
-
-
- {{ colorModeButtonTitle }}
-
-
-
- Reload
-
-
-
- WebUI Settings
-
-
-
- Shutdown
-
-
-
-
-
-
-
-
-
+
-
+
+
+
+
+
-
-
-
+
-
-
-
+
+
+
-
-
+
- Reconnect
-
-
-
+
+ {{ moment.unix(config.app?.started).fromNow() }}
+
+
+
+
+
+
+
+
+
+ {{ config?.app?.app_version || 'unknown' }}
+
+
+
+
+
+
-
-
-
-
- - This usually takes less than a few seconds. If this is taking too - long, - - to reload the page. -
- -- Failed to load the application configuration. This likely indicates a - problem with the backend. Try to - - or - - . -
- -
-
-
-
- + Powered by +
-
@@ -111,7 +128,7 @@
('logContainer');
-const textWrap = useStorage('logs_wrap', true);
+const textWrap = useStorage('logs_text_wrap', false);
const selectedLevels = useStorage('logs_level_filter', [...LOG_LEVELS]);
const sseController = ref(null);
const runtimeLogLevel = ref(null);
@@ -297,6 +314,7 @@ const loading = ref(false);
const autoScroll = ref(true);
const reachedEnd = ref(false);
const detailsOpen = ref(false);
+const expandedRows = ref>(new Set());
const pageCardUi = {
root: 'w-full min-w-0 max-w-full bg-transparent',
@@ -765,14 +783,23 @@ const logLevelBadgeClass = (level: LogLevel): string[] => [
level === 'error' ? 'bg-error/10 text-error' : '',
];
-const logLineClass = (): string[] => [
- 'flex-1',
- textWrap.value
- ? 'min-w-0 whitespace-pre-wrap break-words [overflow-wrap:anywhere]'
- : 'min-w-max whitespace-pre',
- 'text-default',
+const messageClass = (id: string): string[] => [
+ 'block text-sm text-default',
+ expandedRows.value.has(id) || textWrap.value
+ ? 'whitespace-pre-wrap wrap-break-word'
+ : 'message-collapsed md:block md:truncate',
];
+const toggleRow = (id: string): void => {
+ const next = new Set(expandedRows.value);
+ if (next.has(id)) {
+ next.delete(id);
+ } else {
+ next.add(id);
+ }
+ expandedRows.value = next;
+};
+
const logRowClass = (entry: FilteredLogEntry, index: number): string[] => {
const classes = [LOG_ROW_CLASS];
diff --git a/ui/app/pages/simple.vue b/ui/app/pages/simple.vue
index a7651a37..7407867e 100644
--- a/ui/app/pages/simple.vue
+++ b/ui/app/pages/simple.vue
@@ -1,12 +1,1469 @@
-
+
+
+
-
@@ -284,7 +301,7 @@ const route = useRoute();
const pageShell = requirePageShell('logs');
const logContainer = useTemplateRef
-
-
+ => {
+ if (Array.isArray(value)) {
+ if (0 === value.length) {
+ return prefix ? [`${prefix}: []`] : [];
+ }
+
+ return value.flatMap((item, index) =>
+ flattenJsonPaths(item, prefix ? `${prefix}.${index}` : String(index)),
+ );
+ }
+
+ if (value && typeof value === 'object') {
+ const entries = Object.entries(value as Record);
+ if (0 === entries.length) {
+ return prefix ? [`${prefix}: {}`] : [];
+ }
+
+ return entries.flatMap(([key, item]) =>
+ flattenJsonPaths(item, prefix ? `${prefix}.${key}` : key),
+ );
+ }
+
+ return prefix ? [`${prefix}: ${formatPathValue(value)}`] : [];
+};
+
+export const filterLogTextLines = (value: string, filter: string): Array => {
+ const query = filter.trim();
+ if (!query) {
+ return value.split('\n');
+ }
+
+ const needle = query.toLowerCase();
+
+ if (query.includes('.')) {
+ try {
+ const flattened = flattenJsonPaths(JSON.parse(value) as unknown);
+ const matches = flattened.filter((line) => line.toLowerCase().includes(needle));
+ if (matches.length > 0) {
+ return matches;
+ }
+ } catch {
+ // Fall back to plain line filtering for non-JSON content.
+ }
+ }
+
+ return value.split('\n').filter((line) => line.toLowerCase().includes(needle));
+};
diff --git a/ui/tests/composables/useMode.test.ts b/ui/tests/composables/useMode.test.ts
new file mode 100644
index 00000000..e3344e31
--- /dev/null
+++ b/ui/tests/composables/useMode.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'bun:test';
+
+import {
+ SIMPLE_PATH,
+ isSimple,
+ modeFromPref,
+ parseMode,
+ prefFromMode,
+ routeTarget,
+} from '~/composables/useMode';
+
+describe('useMode', () => {
+ it('parse', () => {
+ expect(parseMode('true')).toBe(true);
+ expect(parseMode('false')).toBe(false);
+ expect(parseMode(true)).toBe(true);
+ expect(parseMode(false)).toBe(false);
+ expect(parseMode('null')).toBeNull();
+ expect(parseMode('')).toBeNull();
+ });
+
+ it('resolve', () => {
+ expect(isSimple(null, true)).toBe(true);
+ expect(isSimple(null, false)).toBe(false);
+ expect(isSimple(false, true)).toBe(false);
+ expect(isSimple(true, false)).toBe(true);
+ });
+
+ it('map', () => {
+ expect(modeFromPref(null)).toBe('default');
+ expect(modeFromPref(true)).toBe('simple');
+ expect(modeFromPref(false)).toBe('regular');
+ expect(prefFromMode('default')).toBeNull();
+ expect(prefFromMode('simple')).toBe(true);
+ expect(prefFromMode('regular')).toBe(false);
+ });
+
+ it('route', () => {
+ expect(routeTarget('/', null, true)).toBe(SIMPLE_PATH);
+ expect(routeTarget('/', false, true)).toBeNull();
+ expect(routeTarget('/history', null, true)).toBeNull();
+ expect(routeTarget(SIMPLE_PATH, null, false)).toBeNull();
+ });
+});