From 52d6672fb32a5460724999703b31ec8071ea791b Mon Sep 17 00:00:00 2001 From: arabcoders Date: Sun, 21 Jun 2026 21:25:47 +0300 Subject: [PATCH] refactor: update design layout --- .vscode/settings.json | 3 + FAQ.md | 5 +- ui/app/app.config.ts | 64 ++ ui/app/assets/css/tailwind.css | 131 ++- ui/app/components/ConditionForm.vue | 4 +- ui/app/components/DLInput.vue | 6 +- ui/app/components/FolderInput.vue | 2 +- ui/app/components/InputAutocomplete.vue | 4 +- ui/app/components/LimitsPage.vue | 14 +- ui/app/components/LogDetailModal.vue | 22 +- ui/app/components/NewDownload.vue | 897 ++++++++++----------- ui/app/components/NotifyDropdown.vue | 4 +- ui/app/components/PageHeader.vue | 36 + ui/app/components/SettingsPanel.vue | 69 +- ui/app/components/StatCard.vue | 17 +- ui/app/components/TaskDefinitionEditor.vue | 6 +- ui/app/components/TaskInspect.vue | 2 +- ui/app/components/TextareaAutocomplete.vue | 2 +- ui/app/components/YTDLPOptions.vue | 11 +- ui/app/components/shutdown.vue | 79 +- ui/app/error.vue | 123 ++- ui/app/layouts/default.vue | 2 +- ui/app/pages/browser/[...slug].vue | 80 +- ui/app/pages/changelog.vue | 221 ++--- ui/app/pages/conditions.vue | 217 +++-- ui/app/pages/console.vue | 608 +++++++------- ui/app/pages/diagnostics.vue | 91 +-- ui/app/pages/dl_fields.vue | 133 ++- ui/app/pages/docs/[...slug].vue | 49 +- ui/app/pages/history.vue | 398 +++++---- ui/app/pages/index.vue | 269 +++--- ui/app/pages/logs.vue | 261 +++--- ui/app/pages/notifications.vue | 243 +++--- ui/app/pages/presets.vue | 207 +++-- ui/app/pages/simple.vue | 779 ++++++++++-------- ui/app/pages/task_definitions.vue | 117 ++- ui/app/pages/tasks.vue | 319 ++++---- ui/app/types/index.d.ts | 8 + ui/app/utils/topLevelNavigation.ts | 3 +- ui/package.json | 6 +- uv.lock | 224 ++--- 41 files changed, 2909 insertions(+), 2827 deletions(-) create mode 100644 ui/app/components/PageHeader.vue diff --git a/.vscode/settings.json b/.vscode/settings.json index a7bb977a..c46b3ba6 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -30,5 +30,8 @@ "editor.defaultFormatter": "oxc.oxc-vscode", "editor.formatOnSave": true, "editor.formatOnSaveMode": "file" + }, + "files.associations": { + "*.css": "tailwindcss" } } diff --git a/FAQ.md b/FAQ.md index 6b7bee3a..45f58a65 100644 --- a/FAQ.md +++ b/FAQ.md @@ -3,8 +3,9 @@ Certain configuration values can be set via environment variables, using the `-e` parameter on the docker command line, or the `environment:` section in `compose.yaml` file. +
-Click to expand +Click to expand all environment Variables | Environment Variable | Description | Default | | ------------------------------- | ------------------------------------------------------------------- | --------------------- | @@ -64,7 +65,6 @@ or the `environment:` section in `compose.yaml` file. | YTP_THUMB_GENERATE | Enable ffmpeg thumbnail generation when no local thumbnail exists. | `true` | | YTP_THUMB_SIDECAR | Save generated thumbnails next to media instead of temp cache. | `false` | | YTP_DISABLE_EXEC | Strip some dangerous yt-dlp options. | `false` | -
> [!NOTE] > To raise the worker limit for a specific extractor, set an env variable using this format: `YTP_MAX_WORKERS_FOR_` @@ -77,6 +77,7 @@ or the `environment:` section in `compose.yaml` file. > `YTP_AUTO_CLEAR_HISTORY_DAYS` `0` days means no automatic clearing of the download history. lowest value that will > trigger the clearing is `1` day. This setting will **NOT** delete the downloaded files, it will only clear the > history from the database. + # Browser extensions & bookmarklets diff --git a/ui/app/app.config.ts b/ui/app/app.config.ts index 5419534f..f49b9688 100644 --- a/ui/app/app.config.ts +++ b/ui/app/app.config.ts @@ -7,5 +7,69 @@ export default defineAppConfig({ success: 'emerald', neutral: 'stone', }, + formField: { + slots: { + label: 'block font-bold text-default', + }, + }, + tooltip: { + slots: { + content: 'pointer-events-auto', + }, + }, + dropdownMenu: { + slots: { + content: 'ytp-floating-surface', + }, + }, + popover: { + slots: { + content: 'ytp-floating-surface', + }, + }, + select: { + slots: { + content: 'ytp-floating-surface', + }, + variants: { + variant: { + outline: 'bg-elevated/40 hover:bg-elevated/55 disabled:bg-elevated/20', + }, + }, + }, + selectMenu: { + slots: { + content: 'ytp-floating-surface', + }, + variants: { + variant: { + outline: 'bg-elevated/40 hover:bg-elevated/55 disabled:bg-elevated/20', + }, + }, + }, + button: { + compoundVariants: [ + { + color: 'neutral', + variant: 'outline', + class: + 'bg-transparent hover:bg-elevated/30 active:bg-elevated/40 disabled:bg-transparent aria-disabled:bg-transparent', + }, + { + color: 'neutral', + variant: 'soft', + class: + 'bg-elevated/30 hover:bg-elevated/45 active:bg-elevated/55 disabled:bg-elevated/20 aria-disabled:bg-elevated/20', + }, + { + color: 'neutral', + variant: 'ghost', + class: 'hover:bg-elevated/30 active:bg-elevated/40 focus-visible:bg-elevated/30', + }, + ], + defaultVariants: { + size: 'sm', + }, + }, }, }); diff --git a/ui/app/assets/css/tailwind.css b/ui/app/assets/css/tailwind.css index db327c5a..5dad100c 100644 --- a/ui/app/assets/css/tailwind.css +++ b/ui/app/assets/css/tailwind.css @@ -1,3 +1,5 @@ +@layer theme, base, legacy, components, utilities; + @import 'tailwindcss'; @import '@nuxt/ui'; @@ -30,6 +32,11 @@ html.simple-mode.bg-fanart #__nuxt { background-image: none !important; } + + html.dark.simple-mode.bg-fanart body, + html.dark.simple-mode.bg-fanart #__nuxt { + background-color: var(--ui-bg) !important; + } } @layer components { @@ -51,9 +58,9 @@ .shell-surface { background: - radial-gradient(circle at top left, rgb(99 102 241 / 0.1), transparent 28%), - radial-gradient(circle at top right, rgb(245 158 11 / 0.08), transparent 22%), - linear-gradient(180deg, rgb(255 255 255 / 0.84), rgb(248 250 252 / 0.9)); + radial-gradient(circle at top left, rgb(99 102 241 / 0.14), transparent 28%), + radial-gradient(circle at top right, rgb(245 158 11 / 0.12), transparent 22%), + linear-gradient(180deg, rgb(255 255 255 / 0.6), rgb(248 250 252 / 0.72)); backdrop-filter: blur(16px); } @@ -65,6 +72,115 @@ backdrop-filter: blur(16px); } + .ytp-page-header { + @apply flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between; + } + + .ytp-page-heading { + @apply flex min-w-0 items-center gap-3; + } + + .ytp-page-kicker { + @apply flex flex-wrap items-center gap-2 text-xs font-medium uppercase tracking-[0.2em] text-toned; + } + + .ytp-page-icon { + @apply inline-flex size-11 shrink-0 items-center justify-center rounded-md border bg-elevated/70 text-primary; + border-color: var(--ytp-surface-border-solid); + } + + .ytp-section-icon { + @apply inline-flex size-10 shrink-0 items-center justify-center rounded-md border bg-elevated/70 text-primary; + border-color: var(--ytp-surface-border-solid); + } + + .ytp-detail-icon { + @apply inline-flex size-9 shrink-0 items-center justify-center rounded-md border bg-elevated/70 text-primary; + border-color: var(--ytp-surface-border-solid); + } + + .ytp-card { + @apply rounded-lg border bg-elevated/20; + border-color: var(--ytp-surface-border-soft); + } + + .ytp-card-padded { + @apply rounded-lg border bg-elevated/20 p-4; + border-color: var(--ytp-surface-border-soft); + } + + .ytp-card-padded-lg { + @apply rounded-lg border bg-elevated/20 p-4 sm:p-5; + border-color: var(--ytp-surface-border-soft); + } + + .ytp-panel { + @apply rounded-lg border; + border-color: var(--ytp-surface-border-soft); + } + + .ytp-panel-padded { + @apply rounded-lg border p-4; + border-color: var(--ytp-surface-border-soft); + } + + .ytp-panel-padded-lg { + @apply rounded-lg border p-4 sm:p-5; + border-color: var(--ytp-surface-border-soft); + } + + .ytp-frame { + @apply rounded-lg border; + border-color: var(--ytp-surface-border-soft); + } + + .ytp-table-surface { + @apply rounded-sm border bg-elevated/20; + border-color: var(--ytp-surface-border-solid); + } + + .ytp-floating-surface { + @apply border bg-default/95 shadow-xl backdrop-blur-md; + border-color: var(--ytp-surface-border-solid); + box-shadow: 0 1rem 2rem rgb(15 23 42 / 0.1); + } + + .ytp-floating-surface [data-slot='item'][data-highlighted]::before, + .ytp-floating-surface [data-slot='item'][data-state='open']::before, + .ytp-floating-surface [data-slot='item']:hover::before { + background-color: color-mix(in oklab, var(--ui-primary) 11%, transparent) !important; + } + + .ytp-floating-surface [data-slot='item'][data-disabled]::before { + background-color: transparent !important; + } + + .dark .ytp-floating-surface { + background: color-mix(in oklab, var(--ui-bg) 92%, var(--ui-bg-elevated) 8%); + box-shadow: 0 1rem 2rem rgb(0 0 0 / 0.3); + } + + .dark .ytp-floating-surface [data-slot='item'][data-highlighted]::before, + .dark .ytp-floating-surface [data-slot='item'][data-state='open']::before, + .dark .ytp-floating-surface [data-slot='item']:hover::before { + background-color: color-mix(in oklab, var(--ui-primary) 16%, transparent) !important; + } + + .ytp-border-top-soft { + @apply border-t; + border-color: var(--ytp-surface-border-soft); + } + + .ytp-border-bottom-soft { + @apply border-b; + border-color: var(--ytp-surface-border-soft); + } + + .ytp-border-left-soft { + @apply border-l; + border-color: var(--ytp-surface-border-soft); + } + .ytp-terminal { display: block; width: 100%; @@ -167,6 +283,15 @@ --ui-radius: 0.5rem; --ui-container: 96rem; --ui-header-height: 4.25rem; + --ytp-border-strong: var(--ui-border-accented); + --ytp-surface-border-soft: var(--ui-border-accented); + --ytp-surface-border-solid: var(--ui-border-accented); +} + +.dark { + --ytp-border-strong: var(--ui-border); + --ytp-surface-border-soft: color-mix(in oklab, var(--ui-border) 70%, transparent); + --ytp-surface-border-solid: var(--ui-border); } html:not(.no-page-anim) .page-enter-active { diff --git a/ui/app/components/ConditionForm.vue b/ui/app/components/ConditionForm.vue index 5f5f53c1..1d93820f 100644 --- a/ui/app/components/ConditionForm.vue +++ b/ui/app/components/ConditionForm.vue @@ -261,9 +261,7 @@ -
+