Skip to content

Dev #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TatevikGr wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Dev #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0e57640
Refactor: env (#91)
TatevikGr Jul 29, 2026
88c00fc
use dev branch for core
tatevikg1 Jul 29, 2026
cbf56ab
feat: enhance template error handling with field-specific validation …
tatevikg1 Jul 29, 2026
20b89db
Update openapi.json from web frontend workflow 2026-08-04T12:38:04Z
Aug 4, 2026
34972eb
feat: add cursor pointer to buttons for better user interaction
tatevikg1 Aug 4, 2026
c0437c6
Merge branch 'dev' of github.com:phpList/web-frontend into dev
tatevikg1 Aug 4, 2026
f2dd0dc
chore: update @symfony/webpack-encore and other dependencies in packa…
tatevikg1 Aug 4, 2026
48707a2
feat: add cursor pointer style to interactive buttons globally
tatevikg1 Aug 5, 2026
dab6039
feat: add dark mode
tatevikg1 Aug 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions assets/editor/EditorAssetPicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,100 +8,100 @@
aria-labelledby="editor-asset-picker-title"
@keydown.esc="$emit('close')"
>
<div class="w-full max-w-5xl overflow-hidden rounded-lg border border-slate-200 bg-white shadow-xl">
<div class="flex items-center justify-between gap-3 border-b border-slate-200 px-4 py-3">
<div class="w-full max-w-5xl overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 shadow-xl">
<div class="flex items-center justify-between gap-3 border-b border-slate-200 dark:border-slate-700 px-4 py-3">
<div class="min-w-0">
<h3 id="editor-asset-picker-title" class="text-sm font-semibold text-slate-900">
<h3 id="editor-asset-picker-title" class="text-sm font-semibold text-slate-900 dark:text-slate-100">
Choose an existing asset
</h3>
<p class="text-xs text-slate-500">Pick a file to insert it at the cursor position.</p>
<p class="text-xs text-slate-500 dark:text-slate-400">Pick a file to insert it at the cursor position.</p>
</div>

<button
type="button"
class="rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
class="rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700"
@click="$emit('close')"
>
Close
</button>
</div>

<div class="flex flex-col gap-3 border-b border-slate-200 px-4 py-3 sm:flex-row sm:items-center">
<div class="flex flex-col gap-3 border-b border-slate-200 dark:border-slate-700 px-4 py-3 sm:flex-row sm:items-center">
<input
ref="searchInput"
:value="query"
type="search"
class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
placeholder="Search by file name"
@input="$emit('update:query', $event.target.value)"
>

<button
type="button"
class="rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
class="rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700"
@click="$emit('refresh')"
>
Refresh
</button>
</div>

<div class="max-h-[60vh] overflow-auto">
<div v-if="loading" class="px-4 py-8 text-sm text-slate-500">
<div v-if="loading" class="px-4 py-8 text-sm text-slate-500 dark:text-slate-400">
Loading assets...
</div>

<div v-else-if="error" class="px-4 py-8 text-sm text-red-600">
<div v-else-if="error" class="px-4 py-8 text-sm text-red-600 dark:text-red-400">
{{ error }}
</div>

<table v-else class="w-full table-fixed border-separate border-spacing-0">
<thead class="sticky top-0 bg-slate-50">
<tr class="text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
<th class="w-24 border-b border-slate-200 px-4 py-3">Preview</th>
<th class="border-b border-slate-200 px-4 py-3">Name</th>
<th class="w-32 border-b border-slate-200 px-4 py-3">Type</th>
<th class="w-28 border-b border-slate-200 px-4 py-3">Size</th>
<th class="w-40 border-b border-slate-200 px-4 py-3">Updated</th>
<th class="w-28 border-b border-slate-200 px-4 py-3"></th>
<thead class="sticky top-0 bg-slate-50 dark:bg-slate-800">
<tr class="text-left text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
<th class="w-24 border-b border-slate-200 dark:border-slate-700 px-4 py-3">Preview</th>
<th class="border-b border-slate-200 dark:border-slate-700 px-4 py-3">Name</th>
<th class="w-32 border-b border-slate-200 dark:border-slate-700 px-4 py-3">Type</th>
<th class="w-28 border-b border-slate-200 dark:border-slate-700 px-4 py-3">Size</th>
<th class="w-40 border-b border-slate-200 dark:border-slate-700 px-4 py-3">Updated</th>
<th class="w-28 border-b border-slate-200 dark:border-slate-700 px-4 py-3"></th>
</tr>
</thead>
<tbody>
<tr v-if="!filteredItems.length">
<td colspan="6" class="px-4 py-8 text-center text-sm text-slate-500">
<td colspan="6" class="px-4 py-8 text-center text-sm text-slate-500 dark:text-slate-400">
No assets found.
</td>
</tr>

<tr
v-for="item in filteredItems"
:key="item.url"
class="border-b border-slate-100 text-sm text-slate-700 hover:bg-slate-50"
class="border-b border-slate-100 dark:border-slate-700 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700"
>
<td class="px-4 py-3 align-top">
<img
v-if="item.isImage"
:src="item.url"
:alt="item.fileName.slice(0, 5) + '...'"
class="h-14 w-14 rounded border border-slate-200 object-cover"
class="h-14 w-14 rounded border border-slate-200 dark:border-slate-700 object-cover"
>
<div
v-else
class="flex h-14 w-14 items-center justify-center rounded border border-slate-200 bg-slate-50 text-xs font-semibold uppercase text-slate-500"
class="flex h-14 w-14 items-center justify-center rounded border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-xs font-semibold uppercase text-slate-500 dark:text-slate-400"
>
{{ extensionLabel(item.fileName) }}
</div>
</td>
<td class="px-4 py-3 align-top">
<p class="break-all font-medium text-slate-900">{{ item.fileName }}</p>
<p class="break-all text-xs text-slate-500">{{ item.url }}</p>
<p class="break-all font-medium text-slate-900 dark:text-slate-100">{{ item.fileName }}</p>
<p class="break-all text-xs text-slate-500 dark:text-slate-400">{{ item.url }}</p>
</td>
<td class="px-4 py-3 align-top text-xs uppercase text-slate-500">
<td class="px-4 py-3 align-top text-xs uppercase text-slate-500 dark:text-slate-400">
{{ item.mimeType }}
</td>
<td class="px-4 py-3 align-top text-sm text-slate-600">
<td class="px-4 py-3 align-top text-sm text-slate-600 dark:text-slate-300">
{{ formatBytes(item.size) }}
</td>
<td class="px-4 py-3 align-top text-sm text-slate-600">
<td class="px-4 py-3 align-top text-sm text-slate-600 dark:text-slate-300">
{{ formatDate(item.modifiedAt) }}
</td>
<td class="px-4 py-3 align-top text-right">
Expand All @@ -118,9 +118,9 @@
</table>
</div>

<div class="flex items-center justify-between gap-3 border-t border-slate-200 px-4 py-3 text-sm text-slate-600">
<div class="flex items-center justify-between gap-3 border-t border-slate-200 dark:border-slate-700 px-4 py-3 text-sm text-slate-600 dark:text-slate-300">
<span>{{ filteredItems.length }} asset{{ filteredItems.length === 1 ? '' : 's' }}</span>
<span class="text-xs text-slate-500">Choose a row to insert it immediately.</span>
<span class="text-xs text-slate-500 dark:text-slate-400">Choose a row to insert it immediately.</span>
</div>
</div>
</div>
Expand Down
11 changes: 11 additions & 0 deletions assets/styles/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
@import "tailwindcss";
@tailwind utilities;

@custom-variant dark (&:where(.dark, .dark *));

@theme {
--color-primary: #2563eb;
--color-secondary: #6b7280;
Expand All @@ -14,3 +16,12 @@

@source "../../templates/**/*.twig";
@source "../**/*.vue";

@layer base {
button:not(:disabled),
[type="button"]:not(:disabled),
[type="submit"]:not(:disabled),
[type="reset"]:not(:disabled) {
cursor: pointer;
}
}
10 changes: 9 additions & 1 deletion assets/vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="min-h-screen bg-[#F8FAFC] flex text-slate-900 font-sans">
<div class="min-h-screen bg-[#F8FAFC] dark:bg-slate-900 flex text-slate-900 dark:text-slate-100 font-sans">
<AppSidebar />

<div class="flex flex-col flex-1 min-h-screen min-w-0">
Expand All @@ -9,5 +9,13 @@
</template>

<script setup>
import { onMounted } from 'vue'
import AppSidebar from './components/sidebar/AppSidebar.vue'
import { useDarkMode } from './composables/useDarkMode'

const { initDarkMode } = useDarkMode()

onMounted(() => {
initDarkMode()
})
Comment thread
coderabbitai[bot] marked this conversation as resolved.
</script>
3 changes: 2 additions & 1 deletion assets/vue/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ const redirectToLogin = () => {

const appElement = document.getElementById('vue-app');
const apiToken = appElement?.dataset.apiToken;
const apiBaseUrl = appElement?.dataset.apiBaseUrl;
const apiElement = document.getElementById('api-config');
const apiBaseUrl = apiElement?.dataset.apiBaseUrl;

if (!apiBaseUrl) {
console.error('API Base URL is not configured.');
Expand Down
4 changes: 2 additions & 2 deletions assets/vue/components/base/BaseBadge.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ const badgeClass = computed(() => {
const base = 'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium';
switch (props.variant) {
case 'counter':
return `${base} bg-indigo-50 text-ext-wf3 border border-indigo-100`;
return `${base} bg-indigo-50 dark:bg-indigo-500/10 text-ext-wf3 dark:text-indigo-300 border border-indigo-100 dark:border-indigo-500/20`;
case 'neutral':
default:
return `${base} bg-gray-100 text-gray-800`;
return `${base} bg-gray-100 dark:bg-slate-700 text-gray-800 dark:text-slate-200`;
}
})
</script>
4 changes: 2 additions & 2 deletions assets/vue/components/base/BaseButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ const buttonClass = computed(() => {
const base = 'inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2';
switch (props.variant) {
case 'secondary':
return `${base} text-gray-700 bg-white border-gray-300 hover:bg-gray-50 focus:ring-blue-500`;
return `${base} text-gray-700 dark:text-slate-200 bg-white dark:bg-slate-800 border-gray-300 dark:border-slate-600 hover:bg-gray-50 dark:hover:bg-slate-700 focus:ring-blue-500`;
case 'ghost':
return 'inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-600 bg-transparent hover:bg-blue-50 focus:outline-none';
return 'inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-600 dark:text-blue-400 bg-transparent hover:bg-blue-50 dark:hover:bg-blue-500/10 focus:outline-none';
case 'primary':
default:
return `${base} text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500`;
Expand Down
4 changes: 2 additions & 2 deletions assets/vue/components/base/BaseCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ const props = defineProps({
})

const cardVariantMap = {
default: 'rounded-lg shadow-sm border border-gray-100 bg-white',
subtle: 'rounded-lg shadow-sm border-0 bg-gray-50',
default: 'rounded-lg shadow-sm border border-gray-100 dark:border-slate-700 bg-white dark:bg-slate-800',
subtle: 'rounded-lg shadow-sm border-0 bg-gray-50 dark:bg-slate-800',
danger: 'rounded-lg shadow-sm border-0 bg-red-600 text-white',
success: 'rounded-lg shadow-sm border-0 bg-green-600 text-white',
}
Expand Down
8 changes: 6 additions & 2 deletions assets/vue/components/base/BaseIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,10 @@ const icons = {

pause: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="5" width="3" height="14" rx="1"></rect><rect x="14" y="5" width="3" height="14" rx="1"></rect></svg>`,

sun: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>`,

moon: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon" aria-hidden="true"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path></svg>`,

start: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 4 20 12 6 20 6 4" rx="1"></polygon></svg>`,
};

Expand All @@ -108,9 +112,9 @@ const wrapperClass = computed(() => {
];

if (props.active) {
classes.push("text-ext-wf3");
classes.push("text-ext-wf3 dark:text-indigo-400");
} else {
classes.push("text-slate-400 group-hover:text-slate-600");
classes.push("text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-300");
Comment on lines +115 to +117

@coderabbitai coderabbitai Bot Aug 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Files:"
git ls-files | rg '(^|/)BaseIcon\.vue$|base/SvgRegistry|SvgRegistry|IconRegistry|icon.*registry' || true

echo
echo "BaseIcon outline/size:"
if [ -f assets/vue/components/base/BaseIcon.vue ]; then
  wc -l assets/vue/components/base/BaseIcon.vue
  ast-grep outline assets/vue/components/base/BaseIcon.vue --view expanded || true
fi

echo
echo "Context around lines 100-130:"
sed -n '1,180p' assets/vue/components/base/BaseIcon.vue

echo
echo "Search registry entries and text classes:"
rg -n "warning|template|public|list|copy|text-slate-500|wrapperClass|innerClass|svgClass|color|dark:text-indigo|text-ext-wf3|group-hover:text-slate-300" assets/vue/components/base -S || true

Repository: phpList/web-frontend

Length of output: 22641

🏁 Script executed:

#!/bin/bash
set -euo pipefail

python3 - <<'PY'
from pathlib import Path
p = Path("assets/vue/components/base/BaseIcon.vue")
if p.exists():
    text = p.read_text()
    state_classes = [
        "text-ext-wf3",
        "dark:text-indigo-400",
        "group-hover:text-slate-600",
        "dark:group-hover:text-slate-300",
        "dark:text-slate-400"
    ]
    entries = ["warning", "template", "public", "list", "copy"]
    print("Has relevant state class in BaseIcon.vue:", any(c in text for c in state_classes))
    for entry in entries:
        idx = text.find(entry)
        print(f"\nINDEX {entry}: {idx}")
        if idx != -1:
            lo=max(0, idx-500); hi=min(len(text), idx+500)
            print(text[lo:hi])
else:
    print("file missing")
PY

Repository: phpList/web-frontend

Length of output: 4808

Make inner SVG icons inherit or inherit wrapper colors.

BaseIcon applies dark selected/hover colors on the wrapper <span>, but registries like warning, template, public, list, and copy set a child SVG’s own text-slate-500 and bypass the wrapper state colors. Add the matching dark state variants to those SVG entries, or use wrapper-only color variants in the registry.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@assets/vue/components/base/BaseIcon.vue` around lines 115 - 117, Update the
SVG registry entries for warning, template, public, list, and copy in BaseIcon
so their child SVG color classes inherit the wrapper’s selected and hover
colors, including the matching dark variants; remove or replace fixed text-slate
color classes that override wrapper styling while preserving each icon’s
existing state behavior.

}

return classes.join(" ");
Expand Down
2 changes: 1 addition & 1 deletion assets/vue/components/base/BaseProgressBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!-- assets/vue/components/base/BaseProgressBar.vue -->
<template>
<div class="progress bg-secondary bg-opacity-25 rounded-pill" :style="wrapperStyle">
<div class="progress bg-secondary bg-opacity-25 dark:bg-slate-700 rounded-pill" :style="wrapperStyle">
<div
class="progress-bar bg-primary rounded-pill"
role="progressbar"
Expand Down
6 changes: 3 additions & 3 deletions assets/vue/components/base/CkEditorField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<label
v-if="label"
:for="fieldId"
class="mb-1 block text-sm font-medium text-slate-700"
class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200"
>
{{ label }}
</label>
Expand All @@ -22,8 +22,8 @@
:config="config"
/>

<p v-if="helperText" class="mt-1 text-xs text-slate-500">{{ helperText }}</p>
<p v-if="errorMessage" class="mt-1 text-xs text-red-600">{{ errorMessage }}</p>
<p v-if="helperText" class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ helperText }}</p>
<p v-if="errorMessage" class="mt-1 text-xs text-red-600 dark:text-red-400">{{ errorMessage }}</p>
</div>
</template>

Expand Down
Loading
Loading