From 1c5b4f344d68e1f5f1b6cd24c677519fbc972414 Mon Sep 17 00:00:00 2001 From: arabcoders Date: Sat, 3 Jan 2026 17:26:58 +0300 Subject: [PATCH] Refactor: re-design the settings page. --- app/routes/api/_static.py | 2 +- ui/app/assets/css/style.css | 4 + .../SettingsPanel.vue} | 330 +++++++++--------- ui/app/components/Simple.vue | 39 ++- ui/app/layouts/default.vue | 60 ++-- ui/app/pages/index.vue | 6 +- ui/app/pages/simple.vue | 12 + 7 files changed, 253 insertions(+), 200 deletions(-) rename ui/app/{pages/settings.vue => components/SettingsPanel.vue} (58%) create mode 100644 ui/app/pages/simple.vue diff --git a/app/routes/api/_static.py b/app/routes/api/_static.py index 7cf9155d..62df7f01 100644 --- a/app/routes/api/_static.py +++ b/app/routes/api/_static.py @@ -33,7 +33,7 @@ FRONTEND_ROUTES: list[str] = [ "/logs/", "/conditions/", "/browser/", - "/settings/", + "/simple/", "/browser/{path:.*}", ] diff --git a/ui/app/assets/css/style.css b/ui/app/assets/css/style.css index c6bd7d8a..fbcee187 100644 --- a/ui/app/assets/css/style.css +++ b/ui/app/assets/css/style.css @@ -374,3 +374,7 @@ div.is-centered { padding: 0; margin: 0 auto; } + +.is-rounded-less { + border-radius: 0px !important; +} diff --git a/ui/app/pages/settings.vue b/ui/app/components/SettingsPanel.vue similarity index 58% rename from ui/app/pages/settings.vue rename to ui/app/components/SettingsPanel.vue index 08b0e65d..a792ac32 100644 --- a/ui/app/pages/settings.vue +++ b/ui/app/components/SettingsPanel.vue @@ -1,51 +1,39 @@

- - -
-
- -
-
-
+
+
-
+
- +
+ + diff --git a/ui/app/components/Simple.vue b/ui/app/components/Simple.vue index f4d6cd38..66ed5fb8 100644 --- a/ui/app/components/Simple.vue +++ b/ui/app/components/Simple.vue @@ -1,10 +1,11 @@ @@ -225,10 +227,19 @@ import { ag, encodePath, formatTime, makeDownload, request, stripPath, ucFirst, defineEmits<{ (e: 'show_settings'): void }>() +withDefaults(defineProps<{ + settingsOpen?: boolean +}>(), { + settingsOpen: false +}) + const configStore = useConfigStore() const stateStore = useStateStore() const socketStore = useSocketStore() const toast = useNotification() +const dlFields = useStorage>('dl_fields', {}) +const show_thumbnail = useStorage('show_thumbnail', true) +const isMobile = useMediaQuery({ maxWidth: 1024 }) const { app, paused, presets } = storeToRefs(configStore) const { queue, history } = storeToRefs(stateStore) @@ -241,12 +252,9 @@ const formUrl = ref('') const formPreset = ref<{ preset: string }>({ preset: app.value.default_preset || '' }) const addInProgress = ref(false) const showExtras = ref(false) -const dlFields = useStorage>('dl_fields', {}) -const show_thumbnail = useStorage('show_thumbnail', true) + const paginationInfo = computed(() => stateStore.getPagination()) - const queueItems = computed(() => Object.values(queue.value ?? {}).slice().sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0))) - const historyEntries = computed(() => { const items = Object.values(history.value ?? {}) return items.slice().sort((a, b) => new Date(b.datetime).getTime() - new Date(a.datetime).getTime()) @@ -654,6 +662,10 @@ onMounted(async () => { if (route.query?.simple !== undefined) { const simpleMode = useStorage('simple_mode', configStore.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 (socketStore.isConnected && !paginationInfo.value.isLoaded) { @@ -718,6 +730,17 @@ useIntersectionObserver(loadMoreTrigger, ([entry]) => { align-items: center; gap: 2.5rem; padding: 2rem 1rem 4rem; + transition: transform 0.3s ease; +} + +.basic-wrapper.settings-open { + transform: translateX(-300px); +} + +@media screen and (max-width: 768px) { + .basic-wrapper.settings-open { + transform: translateX(0); + } } .form-container { diff --git a/ui/app/layouts/default.vue b/ui/app/layouts/default.vue index f7d3a01f..dc925da8 100644 --- a/ui/app/layouts/default.vue +++ b/ui/app/layouts/default.vue @@ -2,38 +2,16 @@ - +