feat: mobile UX fixes + Phase C one-click generation

Mobile UX: - index.css: comprehensive mobile media queries — headings scale down, touch targets enforced, grid-2col-mobile collapse class, tablet breakpoint - ContentArchive/ContentPage: grid minmax uses min(100%, Npx) to prevent overflow on small screens - CharacterForm: visual style + rules editor grids collapse on mobile - Dashboard: stat cards grid mobile-safe - Layout: better nav touch targets, footer responsive gap Phase C — One-Click Generation: - Backend: GET /api/content/suggestions endpoint — LLM generates 3 topic ideas based on character profile and avoids repeating recent posts - Dashboard: "Suggerimenti per oggi" section loads suggestions on mount, each card links to /content with prefilled topic + character - ContentPage: reads ?topic= and ?character= URL params, auto-fills form and auto-triggers generation (one-click flow from Dashboard) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 01:28:25 +02:00
parent 16c7c4404c
commit 67bc0d2980
7 changed files with 186 additions and 25 deletions
--- a/backend/app/routers/content.py
+++ b/backend/app/routers/content.py
@@ -340,3 +340,78 @@ def approve_post(
    db.commit()
    db.refresh(post)
    return post
+
+
+@router.get("/suggestions")
+def get_topic_suggestions(
+    character_id: int | None = Query(None),
+    db: Session = Depends(get_db),
+    current_user: User = Depends(get_current_user),
+):
+    """Suggest 3 content topics based on character profile and recent posts."""
+    if character_id:
+        character = (
+            db.query(Character)
+            .filter(Character.id == character_id, Character.user_id == current_user.id)
+            .first()
+        )
+    else:
+        character = (
+            db.query(Character)
+            .filter(Character.user_id == current_user.id, Character.is_active == True)
+            .first()
+        )
+    if not character:
+        return {"suggestions": [], "character_id": None}
+
+    provider_name = _get_setting(db, "llm_provider", current_user.id)
+    api_key = _get_setting(db, "llm_api_key", current_user.id)
+    model = _get_setting(db, "llm_model", current_user.id)
+
+    if not provider_name or not api_key:
+        return {"suggestions": [], "character_id": character.id, "needs_setup": True}
+
+    recent_posts = (
+        db.query(Post)
+        .filter(Post.character_id == character.id)
+        .order_by(Post.created_at.desc())
+        .limit(5)
+        .all()
+    )
+    recent_topics = [p.text_content[:100] for p in recent_posts if p.text_content]
+    recent_str = "\n".join(f"- {t}" for t in recent_topics) if recent_topics else "Nessun post recente."
+
+    base_url = _get_setting(db, "llm_base_url", current_user.id)
+    llm = get_llm_provider(provider_name, api_key, model, base_url=base_url)
+
+    topics = character.topics or []
+    niche = character.niche or "general"
+    target = character.target_audience or ""
+
+    system_prompt = (
+        "Sei un social media strategist esperto. "
+        "Suggerisci 3 idee per post social, ciascuna su una riga. "
+        "Ogni idea deve essere una frase breve (max 15 parole) che descrive il topic. "
+        "Non numerare, non aggiungere spiegazioni. Solo 3 righe, una per idea."
+    )
+
+    prompt = (
+        f"Personaggio: {character.name}, nicchia: {niche}\n"
+        f"Topic abituali: {', '.join(topics) if topics else 'generici'}\n"
+        f"Target: {target}\n"
+        f"Post recenti (evita ripetizioni):\n{recent_str}\n\n"
+        f"Suggerisci 3 idee per post nuovi e diversi dai recenti:"
+    )
+
+    try:
+        result = llm.generate(prompt, system=system_prompt)
+        lines = [line.strip() for line in result.strip().splitlines() if line.strip()]
+        suggestions = lines[:3]
+    except Exception:
+        suggestions = []
+
+    return {
+        "suggestions": suggestions,
+        "character_id": character.id,
+        "character_name": character.name,
+    }
--- a/frontend/src/components/CharacterForm.jsx
+++ b/frontend/src/components/CharacterForm.jsx
@@ -299,7 +299,7 @@ export default function CharacterForm() {

        {/* ── Stile visivo ──────────────────────────────────────── */}
        <Section title="Stile visivo">
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+          <div className="grid-2col-mobile" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
            <Field label="Colore primario">
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.625rem' }}>
                <input type="color" value={form.visual_style.primary_color} onChange={(e) => handleStyleChange('primary_color', e.target.value)}
@@ -396,7 +396,7 @@ function RulesEditor({ doRules, dontRules, onChange }) {
  const removeDont = (i) => onChange(doRules, dontRules.filter((_, idx) => idx !== i))

  return (
-    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+    <div className="grid-2col-mobile" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
      <div>
        <label style={miniLabelStyle}>FA SEMPRE</label>
        <div style={{ display: 'flex', gap: '0.35rem', marginBottom: '0.5rem' }}>
--- a/frontend/src/components/ContentArchive.jsx
+++ b/frontend/src/components/ContentArchive.jsx
@@ -127,7 +127,7 @@ export default function ContentArchive() {
          </p>
        </div>
      ) : (
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(380px, 1fr))', gap: '1rem' }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, 380px), 1fr))', gap: '1rem' }}>
          {groups.map(group => {
            const activeIdx = activePlatform[group.key] || 0
            const activePost = group.posts[activeIdx] || group.posts[0]
--- a/frontend/src/components/ContentPage.jsx
+++ b/frontend/src/components/ContentPage.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useSearchParams } from 'react-router-dom'
 import { api } from '../api'
 import { useAuth } from '../AuthContext'
 import ConfirmModal from './ConfirmModal'
@@ -38,7 +38,9 @@ const STATUS_COLORS = {

 export default function ContentPage() {
  const { isPro } = useAuth()
+  const [searchParams, setSearchParams] = useSearchParams()
  const availablePlatforms = isPro ? PLATFORMS : PLATFORMS.filter(p => ['instagram', 'facebook'].includes(p.value))
+  const autoGenerateRef = useRef(false)
  const [characters, setCharacters] = useState([])
  const [loading, setLoading] = useState(false)
  const [charsLoading, setCharsLoading] = useState(true)
@@ -60,9 +62,32 @@ export default function ContentPage() {
  })

  useEffect(() => {
-    api.get('/characters/').then(d => { setCharacters(d); setCharsLoading(false) }).catch(() => setCharsLoading(false))
+    api.get('/characters/').then(d => {
+      setCharacters(d)
+      setCharsLoading(false)
+      // One-click flow: pre-fill from URL params
+      const urlTopic = searchParams.get('topic')
+      const urlCharacter = searchParams.get('character')
+      if (urlTopic && d.length > 0) {
+        const charId = urlCharacter || String(d[0].id)
+        setForm(prev => ({ ...prev, character_id: charId, topic_hint: urlTopic }))
+        autoGenerateRef.current = true
+        setSearchParams({}, { replace: true })  // clean URL
+      }
+    }).catch(() => setCharsLoading(false))
  }, [])

+  // Auto-generate when arriving from one-click flow
+  useEffect(() => {
+    if (autoGenerateRef.current && form.character_id && !charsLoading) {
+      autoGenerateRef.current = false
+      // Small delay to let React render the form
+      setTimeout(() => {
+        document.querySelector('form')?.requestSubmit()
+      }, 300)
+    }
+  }, [form.character_id, charsLoading])
+
  const toggleChip = (field, value) => {
    setForm(prev => {
      const arr = prev[field]
@@ -196,7 +221,7 @@ export default function ContentPage() {
        </div>
      ))}

-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1.25rem' }}>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: '1.25rem' }}>
        {/* Generation form */}
        <div style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)', borderTop: '4px solid var(--accent)', padding: '1.5rem' }}>
          <div style={{ marginBottom: '1.25rem' }}>
--- a/frontend/src/components/Dashboard.jsx
+++ b/frontend/src/components/Dashboard.jsx
@@ -13,6 +13,8 @@ export default function Dashboard() {
  const [recentPosts, setRecentPosts] = useState([])
  const [providerStatus, setProviderStatus] = useState(null)
  const [loading, setLoading] = useState(true)
+  const [suggestions, setSuggestions] = useState(null)
+  const [suggestionsLoading, setSuggestionsLoading] = useState(false)

  useEffect(() => {
    Promise.all([
@@ -36,6 +38,14 @@ export default function Dashboard() {
      setRecentPosts(posts.slice(0, 5))
      setProviderStatus(providers)
      setLoading(false)
+      // Load suggestions if LLM is configured
+      if (providers?.llm?.configured && chars.length > 0) {
+        setSuggestionsLoading(true)
+        api.get('/content/suggestions')
+          .then(data => setSuggestions(data))
+          .catch(() => {})
+          .finally(() => setSuggestionsLoading(false))
+      }
    })
  }, [])

@@ -87,7 +97,7 @@ export default function Dashboard() {
      {/* ── Stats grid ──────────────────────────────────────────── */}
      <div style={{
        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, 160px), 1fr))',
        gap: '1rem',
        marginBottom: '2rem',
      }}>
@@ -133,6 +143,43 @@ export default function Dashboard() {
        </div>
      </div>

+      {/* ── Topic Suggestions (Phase C) ─────────────────────────── */}
+      {(suggestionsLoading || (suggestions?.suggestions?.length > 0)) && (
+        <div style={{ marginBottom: '2rem' }}>
+          <span className="editorial-tag" style={{ marginBottom: '0.75rem', display: 'block' }}>Suggerimenti per oggi</span>
+          {suggestionsLoading ? (
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '1rem', backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}>
+              <div style={{ width: 18, height: 18, border: '2px solid var(--border)', borderTopColor: 'var(--accent)', borderRadius: '50%', animation: 'spin 0.8s linear infinite' }} />
+              <span style={{ fontSize: '0.85rem', color: 'var(--ink-muted)' }}>Genero idee per te...</span>
+            </div>
+          ) : (
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, 280px), 1fr))', gap: '0.75rem' }}>
+              {suggestions.suggestions.map((topic, i) => (
+                <Link
+                  key={i}
+                  to={`/content?topic=${encodeURIComponent(topic)}&character=${suggestions.character_id}`}
+                  style={{
+                    display: 'block', padding: '1rem 1.25rem',
+                    backgroundColor: 'var(--surface)', border: '1px solid var(--border)',
+                    borderLeft: '4px solid var(--accent)', textDecoration: 'none',
+                    transition: 'border-color 0.15s, background-color 0.15s',
+                  }}
+                  onMouseEnter={e => { e.currentTarget.style.backgroundColor = 'var(--accent-light)'; e.currentTarget.style.borderColor = 'var(--accent)' }}
+                  onMouseLeave={e => { e.currentTarget.style.backgroundColor = 'var(--surface)'; e.currentTarget.style.borderColor = 'var(--border)' }}
+                >
+                  <p style={{ fontSize: '0.88rem', color: 'var(--ink)', margin: 0, lineHeight: 1.5, fontWeight: 500 }}>
+                    {topic}
+                  </p>
+                  <span style={{ fontSize: '0.72rem', color: 'var(--accent)', fontWeight: 600, marginTop: '0.4rem', display: 'inline-block' }}>
+                    Genera →
+                  </span>
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
      {/* ── Recent posts ────────────────────────────────────────── */}
      {recentPosts.length > 0 && (
        <div>
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -77,7 +77,7 @@ export default function Layout() {
              onClick={() => isMobile && setSidebarOpen(false)}
              style={({ isActive }) => ({
                display: 'block',
-                padding: '0.6rem 0.875rem',
+                padding: '0.7rem 0.875rem',
                fontSize: '0.84rem',
                fontWeight: isActive ? 600 : 400,
                color: isActive ? 'var(--accent)' : 'var(--ink-light)',
@@ -221,7 +221,7 @@ export default function Layout() {
            <p style={{ fontSize: '0.72rem', color: 'var(--ink-muted)', margin: 0 }}>
              © {new Date().getFullYear()} Leopost
            </p>
-            <div style={{ display: 'flex', gap: '1.25rem' }}>
+            <div style={{ display: 'flex', gap: isMobile ? '0.75rem' : '1.25rem' }}>
              {[{ to: '/privacy', label: 'Privacy' }, { to: '/termini', label: 'Termini' }, { to: '/cookie', label: 'Cookie' }].map(({ to, label }) => (
                <Link
                  key={to}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -196,44 +196,58 @@ h1, h2, h3, h4 {

 /* ─── Mobile / Responsive ───────────────────────────────────── */
@media (max-width: 767px) {
-  /* Minimum touch target size */
+  /* Touch targets */
  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
-  /* Prevent iOS font size zoom on inputs */
+  /* Prevent iOS font size zoom */
  input, select, textarea {
    font-size: 16px !important;
  }
-  /* Cards stack nicely on mobile */
  .card-editorial {
-    padding: 1.25rem !important;
+    padding: 1rem !important;
  }
-  /* Legal pages readable on small screens */
+  /* Headings scale down */
+  h2 {
+    font-size: 1.35rem !important;
+  }
+  h3 {
+    font-size: 1.1rem !important;
+  }
+  /* Buttons */
+  .btn-outline, .btn-primary {
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.6rem 1rem;
+    font-size: 0.82rem;
+  }
+  /* Legal tables */
  .legal-content table {
    font-size: 0.78rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
-
-  /* Fix ghost navbar space on mobile */
+  /* Ghost navbar fix */
  #root {
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }
-
-  /* Ensure secondary buttons always look like buttons on mobile */
-  .btn-outline, .btn-primary {
-    min-height: 44px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+  /* Two-column grids collapse */
+  .grid-2col-mobile {
+    grid-template-columns: 1fr !important;
  }
 }

-
-/* ─── Mobile UX improvements ───────────────────────────────────── */
+/* Tablet */
+@media (min-width: 768px) and (max-width: 1024px) {
+  h2 {
+    font-size: 1.6rem !important;
+  }
+}
 /* ─── Print ─────────────────────────────────────────────────── */
@media print {
  aside, footer, .cookie-banner { display: none !important; }