Merge pull request #352 from DevLoversTeam/feat/qa-empty-state-polish

(SP: 2) [Frontend] Q&A Empty State UX Refresh

Author: ViktorSvertoka

frontend/app/globals.css

@@ -183,7 +183,24 @@ html {
 .qa-accordion-item:hover,
 .qa-accordion-item:focus-within,
 .qa-accordion-item[data-state='open'] {
-  border-color: var(--qa-accent);
+  border-color: var(--qa-accent, var(--accent-primary));
+}
+
+.qa-accordion-item {
+  position: relative;
+  overflow: hidden;
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    transparent 54%,
+    var(--qa-accent-soft, rgba(161, 161, 170, 0.22)) 100%
+  );
+}
+
+.qa-accordion-item:hover,
+.qa-accordion-item:focus-within,
+.qa-accordion-item[data-state='open'] {
+  background-image: none;
 }
 
 .no-select,
@@ -195,6 +212,31 @@ html {
   user-select: none;
 }
 
+@keyframes fade-up {
+  from {
+    transform: translateY(8px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.animate-fade-up {
+  animation: fade-up 0.6s ease-out forwards;
+  opacity: 0;
+}
+
+.delay-150 {
+  animation-delay: 0.15s;
+}
+
+.delay-300 {
+  animation-delay: 0.3s;
+}
+
 @keyframes progress {
   from {
     width: 100%;
@@ -535,4 +577,4 @@ html {
   .animate-dash-flow {
     animation: none !important;
   }
-}
+}

frontend/components/q&a/AccordionList.tsx

@@ -36,6 +36,24 @@ import {
 import { categoryTabStyles } from '@/data/categoryStyles';
 import { CACHE_KEY, getCachedTerms } from '@/lib/ai/explainCache';
 
+type QaItemStyle = CSSProperties & {
+  '--qa-accent': string;
+  '--qa-accent-soft': string;
+};
+
+function normalizeCachedTerm(term: string): string {
+  return term.toLowerCase().trim();
+}
+
+function hexToRgba(hex: string, alpha: number): string {
+  const normalized = hex.replace('#', '');
+  if (normalized.length !== 6) return `rgba(0, 0, 0, ${alpha})`;
+  const r = parseInt(normalized.slice(0, 2), 16);
+  const g = parseInt(normalized.slice(2, 4), 16);
+  const b = parseInt(normalized.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 function isListItemBlock(value: ListEntry): value is ListItemBlock {
   return (
     !!value &&
@@ -307,11 +325,11 @@ export default function AccordionList({ items }: { items: QuestionEntry[] }) {
   );
   const [modalOpen, setModalOpen] = useState(false);
   const [cachedTerms, setCachedTerms] = useState<Set<string>>(
-    () => new Set(getCachedTerms())
+    () => new Set(getCachedTerms().map(normalizeCachedTerm))
   );
 
   const refreshCachedTerms = useCallback(() => {
-    const terms = getCachedTerms();
+    const terms = getCachedTerms().map(normalizeCachedTerm);
     setCachedTerms(new Set(terms));
   }, []);
 
@@ -380,20 +398,21 @@ export default function AccordionList({ items }: { items: QuestionEntry[] }) {
       <Accordion type="single" collapsible className="w-full">
         {items.map((q, idx) => {
           const key = q.id ?? idx;
-          const accent =
+          const accentColor =
             categoryTabStyles[q.category as keyof typeof categoryTabStyles]
-              ?.accent;
+              ?.accent ?? '#A1A1AA';
           const animationDelay = `${Math.min(idx, 10) * 60}ms`;
-          const itemStyle: CSSProperties = {
+          const itemStyle: QaItemStyle = {
             animationDelay,
             animationFillMode: 'both',
-            ...(accent ? ({ '--qa-accent': accent } as CSSProperties) : {}),
+            '--qa-accent': accentColor,
+            '--qa-accent-soft': hexToRgba(accentColor, 0.22),
           };
           return (
             <AccordionItem
               key={key}
               value={String(key)}
-              className="qa-accordion-item mb-3 rounded-xl border border-black/5 bg-white/90 shadow-sm transition-colors last:mb-0 last:border-b dark:border-white/10 dark:bg-neutral-900/80 animate-in fade-in slide-in-from-bottom-2 duration-500"
+              className="qa-accordion-item mb-3 rounded-xl border border-black/5 bg-white/90 shadow-sm transition-colors last:mb-0 last:border-b dark:border-white/10 dark:bg-neutral-900/80 animate-in fade-in slide-in-from-bottom-2 duration-500 motion-reduce:animate-none"
               style={itemStyle}
             >
               <AccordionTrigger

frontend/components/q&a/FloatingExplainButton.tsx

@@ -51,6 +51,7 @@ export default function FloatingExplainButton({
 
   return (
     <button
+      type="button"
       ref={buttonRef}
       onClick={e => {
         e.stopPropagation();
@@ -67,6 +68,7 @@ export default function FloatingExplainButton({
         'hover:bg-(--accent-hover)',
         'transition-all duration-200',
         'animate-in fade-in-0 zoom-in-95',
+        'motion-reduce:animate-none motion-reduce:transition-none',
         'focus:ring-2 focus:ring-(--accent-primary) focus:ring-offset-2 focus:outline-none'
       )}
       style={{

frontend/components/q&a/QaSection.tsx

@@ -35,6 +35,14 @@ export default function TabsSection() {
     () => `qa-${active}-${currentPage}`,
     [active, currentPage]
   );
+  const emptyStateLines = useMemo(
+    () =>
+      t('noQuestions')
+        .split('\n')
+        .map(line => line.trim())
+        .filter(Boolean),
+    [t]
+  );
 
   const clearSelection = useCallback(() => {
     if (typeof window === 'undefined') return;
@@ -109,7 +117,23 @@ export default function TabsSection() {
               {items.length ? (
                 <AccordionList key={animationKey} items={items} />
               ) : (
-                <p className="py-12 text-center">{t('noQuestions')}</p>
+                <div className="py-20 text-center">
+                  {emptyStateLines[0] && (
+                    <p className="text-lg font-semibold text-gray-900 motion-safe:animate-fade-up motion-reduce:opacity-100 dark:text-white">
+                      {emptyStateLines[0]}
+                    </p>
+                  )}
+                  {emptyStateLines[1] && (
+                    <p className="mt-2 text-gray-400 motion-safe:animate-fade-up motion-safe:[animation-delay:150ms] motion-reduce:opacity-100 dark:text-gray-300">
+                      {emptyStateLines[1]}
+                    </p>
+                  )}
+                  {emptyStateLines[2] && (
+                    <p className="mt-1 text-gray-500 motion-safe:animate-fade-up motion-safe:[animation-delay:300ms] motion-reduce:opacity-100 dark:text-gray-400">
+                      {emptyStateLines[2]}
+                    </p>
+                  )}
+                </div>
               )}
             </div>
           </TabsContent>

frontend/components/tests/q&a/qa-section.test.tsx

@@ -60,6 +60,7 @@ describe('QaSection', () => {
 
   it('renders category tabs and pagination', () => {
     qaState.totalPages = 3;
+    qaState.items = [{ id: 'q1' }];
     render(<QaSection />);
 
     const buttons = screen.getAllByRole('button');

frontend/components/ui/accordion.tsx

@@ -41,7 +41,10 @@ function AccordionTrigger({
         {...props}
       >
         {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+        <ChevronDownIcon
+          aria-hidden="true"
+          className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+        />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   );
@@ -55,7 +58,7 @@ function AccordionContent({
   return (
     <AccordionPrimitive.Content
       data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down motion-reduce:!animate-none overflow-hidden text-sm"
       {...props}
     >
       <div className={cn('pt-0 pb-4', className)}>{children}</div>

frontend/messages/en.json

@@ -124,7 +124,7 @@
     "searchPlaceholder": "Search questions...",
     "clearSearch": "Clear search",
     "noResults": "Nothing found for \"{query}\"",
-    "noQuestions": "No questions found",
+    "noQuestions": "No questions yet…\nBut they’re already in development.\nStay tuned - new content coming soon!",
     "metaTitle": "Q&A | DevLovers",
     "metaDescription": "Questions and answers for technical interview preparation",
     "frontend": "Frontend",
@@ -1477,4 +1477,4 @@
       }
     }
   }
-}
+}

frontend/messages/pl.json

@@ -124,7 +124,7 @@
     "searchPlaceholder": "Szukaj pytań...",
     "clearSearch": "Wyczyść wyszukiwanie",
     "noResults": "Nic nie znaleziono dla \"{query}\"",
-    "noQuestions": "Nie znaleziono pytań",
+    "noQuestions": "Brak pytań na ten moment…\nAle już są w przygotowaniu.\nBądź na bieżąco - wkrótce pojawią się nowe materiały!",
     "metaTitle": "Q&A | DevLovers",
     "metaDescription": "Pytania i odpowiedzi do przygotowania do rozmów kwalifikacyjnych",
     "frontend": "Frontend",
@@ -1478,4 +1478,4 @@
       }
     }
   }
-}
+}

frontend/messages/uk.json

@@ -124,7 +124,7 @@
     "searchPlaceholder": "Пошук...",
     "clearSearch": "Очистити пошук",
     "noResults": "Нічого не знайдено за запитом \"{query}\"",
-    "noQuestions": "Питань не знайдено",
+    "noQuestions": "Питань поки що немає…\nАле вони вже в розробці.\nСлідкуйте за оновленнями - скоро зʼявиться новий контент!",
     "metaTitle": "Q&A | DevLovers",
     "metaDescription": "Питання та відповіді для підготовки до технічних співбесід",
     "frontend": "Frontend",
@@ -1481,4 +1481,4 @@
       }
     }
   }
-}
+}