ui fixes

2026-06-14 15:15:39 -03:00
parent e024b403e2
commit 475a7c120d
5 changed files with 27 additions and 111 deletions
--- a/Mindforge.Web/src/components/FlashcardReviewComponent.tsx
+++ b/Mindforge.Web/src/components/FlashcardReviewComponent.tsx
@@ -5,10 +5,7 @@ import {
  type FlashcardLibrarySummary,
 } from '../services/MindforgeApiService';
 import { Button } from './Button';
-import {
-  FlashcardStudySession,
-  type FlashcardStudySessionLibraryMeta,
-} from './FlashcardStudySession';
+import { FlashcardStudySession } from './FlashcardStudySession';
 import './FlashcardReviewComponent.css';

 function groupLibrariesBySubject(libraries: FlashcardLibrarySummary[]) {
@@ -76,18 +73,6 @@ export function FlashcardReviewComponent() {

  const groupedLibraries = useMemo(() => groupLibrariesBySubject(libraries), [libraries]);

-  const libraryMetaById = useMemo(() => {
-    return new Map<number, FlashcardStudySessionLibraryMeta>(
-      libraries.map((library) => [
-        library.id,
-        {
-          fileName: library.fileName,
-          difficultyLabel: difficultyLabel(library.difficulty),
-        },
-      ]),
-    );
-  }, [libraries]);
-
  const toggleLibrary = (libraryId: number) => {
    if (selectedLibraryIds.includes(libraryId)) {
      setSelectedLibraryIds(selectedLibraryIds.filter((id) => id !== libraryId));
@@ -189,7 +174,6 @@ export function FlashcardReviewComponent() {
      {sessionCards.length > 0 && (
        <FlashcardStudySession
          cards={sessionCards}
-          libraryMetaById={libraryMetaById}
          onAnswer={recordReviewAnswer}
          onEnd={endSession}
        />
--- a/Mindforge.Web/src/components/FlashcardStudySession.css
+++ b/Mindforge.Web/src/components/FlashcardStudySession.css
@@ -147,7 +147,6 @@
  min-height: 355px;
  display: flex;
  flex-direction: column;
-  justify-content: space-between;
  padding: clamp(24px, 5vw, 42px);
  border-radius: 30px;
  backface-visibility: hidden;
@@ -220,7 +219,8 @@
  display: grid;
  align-content: center;
  gap: 18px;
-  min-height: 190px;
+  flex: 1;
+  min-height: 0;
  color: var(--ink);
  font-family: "Segoe UI", Inter, Avenir, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 }
@@ -262,18 +262,6 @@
  line-height: 1.45;
 }

-.study-card-footer {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  justify-content: space-between;
-  gap: 14px;
-  align-items: center;
-  color: var(--muted);
-  font-size: 13px;
-  font-weight: 800;
-}
-
 .study-controls {
  position: relative;
  z-index: 1;
--- a/Mindforge.Web/src/components/FlashcardStudySession.tsx
+++ b/Mindforge.Web/src/components/FlashcardStudySession.tsx
@@ -3,14 +3,8 @@ import type { FlashcardCard } from '../services/MindforgeApiService';
 import { Button } from './Button';
 import './FlashcardStudySession.css';

-export interface FlashcardStudySessionLibraryMeta {
-  fileName?: string;
-  difficultyLabel?: string;
-}
-
 interface FlashcardStudySessionProps {
  cards: FlashcardCard[];
-  libraryMetaById: Map<number, FlashcardStudySessionLibraryMeta>;
  onAnswer: (card: FlashcardCard, correct: boolean) => Promise<void>;
  onEnd: () => void;
 }
@@ -98,14 +92,9 @@ function resetTimeout(timeoutRef: { current: number | null }) {
  }
 }

-function formatFooter(meta: FlashcardStudySessionLibraryMeta | undefined) {
-  return meta?.fileName || 'Arquivo';
-}
-
-export function FlashcardStudySession({ cards, libraryMetaById, onAnswer, onEnd }: FlashcardStudySessionProps) {
+export function FlashcardStudySession({ cards, onAnswer, onEnd }: FlashcardStudySessionProps) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [showAnswer, setShowAnswer] = useState(false);
-  const [showBackQuestion, setShowBackQuestion] = useState(false);
  const [submittingAnswer, setSubmittingAnswer] = useState(false);
  const [cardExiting, setCardExiting] = useState(false);
  const [stampState, setStampState] = useState<'correct' | 'wrong' | null>(null);
@@ -117,7 +106,6 @@ export function FlashcardStudySession({ cards, libraryMetaById, onAnswer, onEnd
  const advanceTimerRef = useRef<number | null>(null);

  const currentCard = cards[currentIndex];
-  const currentMeta = currentCard ? libraryMetaById.get(currentCard.libraryId) : undefined;
  const correctCount = Object.values(sessionAnswers).filter(Boolean).length;
  const remainingCount = cards.length - currentIndex;
  const progressPercent = cards.length > 0
@@ -127,7 +115,6 @@ export function FlashcardStudySession({ cards, libraryMetaById, onAnswer, onEnd
  useEffect(() => {
    setCurrentIndex(0);
    setShowAnswer(false);
-    setShowBackQuestion(false);
    setSubmittingAnswer(false);
    setCardExiting(false);
    setStampState(null);
@@ -149,13 +136,12 @@ export function FlashcardStudySession({ cards, libraryMetaById, onAnswer, onEnd

      if (e.code === 'Space' || e.code === 'Enter') {
        e.preventDefault();
-        if (!showAnswer) {
-          setShowAnswer(true);
-        }
-      } else if (e.code === 'KeyC' && showAnswer && !showBackQuestion && !submittingAnswer) {
+        if (submittingAnswer) return;
+        setShowAnswer((current) => !current);
+      } else if (e.code === 'KeyC' && showAnswer && !submittingAnswer) {
        e.preventDefault();
        void registerReviewAnswer(true);
-      } else if (e.code === 'KeyW' && showAnswer && !showBackQuestion && !submittingAnswer) {
+      } else if (e.code === 'KeyW' && showAnswer && !submittingAnswer) {
        e.preventDefault();
        void registerReviewAnswer(false);
      }
@@ -163,13 +149,12 @@ export function FlashcardStudySession({ cards, libraryMetaById, onAnswer, onEnd

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [cards.length, currentCard, showAnswer, showBackQuestion, submittingAnswer]);
+  }, [cards.length, currentCard, showAnswer, submittingAnswer]);

  const goToPrevious = () => {
    if (currentIndex === 0 || submittingAnswer) return;
    setCurrentIndex(currentIndex - 1);
    setShowAnswer(false);
-    setShowBackQuestion(false);
    setStampState(null);
    setCardExiting(false);
    setSubmissionError(null);
@@ -183,7 +168,6 @@ export function FlashcardStudySession({ cards, libraryMetaById, onAnswer, onEnd

    setCurrentIndex(currentIndex + 1);
    setShowAnswer(false);
-    setShowBackQuestion(false);
    setStampState(null);
    setCardExiting(false);
    setSubmittingAnswer(false);
@@ -191,7 +175,7 @@ export function FlashcardStudySession({ cards, libraryMetaById, onAnswer, onEnd
  };

  const registerReviewAnswer = async (correct: boolean) => {
-    if (!currentCard || !showAnswer || showBackQuestion || submittingAnswer) return;
+    if (!currentCard || !showAnswer || submittingAnswer) return;

    resetTimeout(stampTimerRef);
    resetTimeout(advanceTimerRef);
@@ -266,37 +250,20 @@ export function FlashcardStudySession({ cards, libraryMetaById, onAnswer, onEnd
              class={`study-flashcard${showAnswer ? ' is-flipped' : ''}${cardExiting ? ' is-reviewed' : ''}`}
              onClick={() => {
                if (submittingAnswer) return;
-                if (!showAnswer) {
-                  setShowAnswer(true);
-                  return;
-                }
-
-                if (!showBackQuestion) {
-                  setShowBackQuestion(true);
-                }
+                setShowAnswer((current) => !current);
              }}
              tabIndex={0}
              role="button"
              aria-label={
                !showAnswer
-                  ? 'Clique ou pressione Espaço para revelar'
-                  : showBackQuestion
-                    ? 'Flashcard com pergunta e resposta visíveis'
-                    : 'Clique para mostrar a pergunta junto da resposta'
+                  ? 'Clique ou pressione Espaço para revelar a resposta'
+                  : 'Clique ou pressione Espaço para voltar à pergunta'
              }
            >
              <div class="study-card-face">
-                {currentMeta?.difficultyLabel && (
-                  <div class="study-card-meta">
-                    <span class="study-tag">{currentMeta.difficultyLabel}</span>
-                  </div>
-                )}
                <div class="study-card-question">
                  {currentCard.front}
                </div>
-                <div class="study-card-footer">
-                  <span>{formatFooter(currentMeta)}</span>
-                </div>
              </div>

              <div class="study-card-face study-card-back">
@@ -307,22 +274,16 @@ export function FlashcardStudySession({ cards, libraryMetaById, onAnswer, onEnd
                )}
                <div class="study-card-meta">
                  <span class="study-tag">Resposta</span>
-                  {currentMeta?.difficultyLabel && <span>{currentMeta.difficultyLabel}</span>}
                </div>
                <div class="study-card-answer">
                  <div class="study-back-answer">
                    <span>Resposta</span>
                    <p>{currentCard.back}</p>
                  </div>
-                  {showBackQuestion && (
-                    <div class="study-back-question">
-                      <span>Pergunta</span>
-                      <p>{currentCard.front}</p>
-                    </div>
-                  )}
-                </div>
-                <div class="study-card-footer">
-                  <span>{formatFooter(currentMeta)}</span>
+                  <div class="study-back-question">
+                    <span>Pergunta</span>
+                    <p>{currentCard.front}</p>
+                  </div>
                </div>
              </div>
            </div>
@@ -332,14 +293,14 @@ export function FlashcardStudySession({ cards, libraryMetaById, onAnswer, onEnd
            <button
              class="study-review-button correct"
              onClick={() => void registerReviewAnswer(true)}
-              disabled={!showAnswer || showBackQuestion || submittingAnswer}
+              disabled={!showAnswer || submittingAnswer}
            >
              Correto
            </button>
            <button
              class="study-review-button wrong"
              onClick={() => void registerReviewAnswer(false)}
-              disabled={!showAnswer || showBackQuestion || submittingAnswer}
+              disabled={!showAnswer || submittingAnswer}
            >
              Incorreto
            </button>
--- a/Mindforge.Web/src/components/SpacedReviewComponent.tsx
+++ b/Mindforge.Web/src/components/SpacedReviewComponent.tsx
@@ -7,10 +7,7 @@ import {
  type FlashcardRagStatus,
 } from '../services/MindforgeApiService';
 import { Button } from './Button';
-import {
-  FlashcardStudySession,
-  type FlashcardStudySessionLibraryMeta,
-} from './FlashcardStudySession';
+import { FlashcardStudySession } from './FlashcardStudySession';
 import './SpacedReviewComponent.css';

 interface RagStatusOption {
@@ -102,13 +99,12 @@ export function SpacedReviewComponent() {
  const [dashboard, setDashboard] = useState<FlashcardRagDashboardResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
-  const [selectedStatuses, setSelectedStatuses] = useState<FlashcardRagStatus[]>(['Red', 'Amber', 'Green', 'Grey']);
+  const [selectedStatuses, setSelectedStatuses] = useState<FlashcardRagStatus[]>(['Red', 'Amber']);
  const [selectedLibraryIds, setSelectedLibraryIds] = useState<number[]>([]);
  const [selectedSubjects, setSelectedSubjects] = useState<string[]>([]);
  const [selectedSubSubjects, setSelectedSubSubjects] = useState<string[]>([]);
  const [startingSession, setStartingSession] = useState(false);
  const [sessionCards, setSessionCards] = useState<FlashcardCard[]>([]);
-  const [sessionLibraries, setSessionLibraries] = useState<FlashcardRagLibrary[]>([]);

  const loadDashboard = async (preserveSelection: boolean) => {
    setLoading(true);
@@ -138,7 +134,7 @@ export function SpacedReviewComponent() {
          return current;
        }

-        return ['Red', 'Amber', 'Green', 'Grey'];
+        return ['Red', 'Amber'];
      });
    } catch (err: any) {
      setError(err?.message || 'Falha ao carregar status de revisão espaçada.');
@@ -183,7 +179,6 @@ export function SpacedReviewComponent() {
    setStartingSession(true);
    setError(null);
    setSessionCards([]);
-    setSessionLibraries([]);

    try {
      const ragByLibraryId = new Map(selectedRagLibraries.map((library) => [library.libraryId, library]));
@@ -198,7 +193,6 @@ export function SpacedReviewComponent() {
        return;
      }

-      setSessionLibraries(selectedRagLibraries);
      setSessionCards(orderedCards);
    } catch (err: any) {
      setError(err?.message || 'Falha ao iniciar revisão espaçada.');
@@ -224,24 +218,14 @@ export function SpacedReviewComponent() {
      libraryIdSet.has(library.libraryId) && statusSet.has(library.ragStatus));
  }, [allRagLibraries, selectedLibraryIds, selectedStatuses]);

-  const sessionLibraryMetaById = useMemo(() => {
-    return new Map<number, FlashcardStudySessionLibraryMeta>(
-      sessionLibraries.map((library) => [
-        library.libraryId,
-        {
-          fileName: library.fileName,
-        },
-      ]),
-    );
-  }, [sessionLibraries]);
-
  const toggleStatus = (status: FlashcardRagStatus) => {
    if (selectedStatuses.includes(status)) {
-      setSelectedStatuses([]);
+      const next = selectedStatuses.filter((s) => s !== status);
+      setSelectedStatuses(next.length > 0 ? next : ['Red']);
      return;
    }

-    setSelectedStatuses(['Red', 'Amber', 'Green', 'Grey']);
+    setSelectedStatuses([...selectedStatuses, status]);
  };

  const toggleLibrary = (libraryId: number) => {
@@ -313,7 +297,6 @@ export function SpacedReviewComponent() {

  const endSession = () => {
    setSessionCards([]);
-    setSessionLibraries([]);
    void loadDashboard(true);
  };

@@ -460,7 +443,6 @@ export function SpacedReviewComponent() {
      {sessionCards.length > 0 && (
        <FlashcardStudySession
          cards={sessionCards}
-          libraryMetaById={sessionLibraryMetaById}
          onAnswer={registerAnswer}
          onEnd={endSession}
        />