[questions][ui] updates

apps/portal/src/components/questions/card/QuestionCard.tsx

@@ -112,17 +112,7 @@ export default function QuestionCard({
   const [showReceivedForm, setShowReceivedForm] = useState(false);
   const { handleDownvote, handleUpvote, vote } = useQuestionVote(questionId);
   const hoverClass = showHover ? 'hover:bg-slate-50' : '';
-  const cardContent = showReceivedForm ? (
-    <CreateQuestionEncounterForm
-      onCancel={() => {
-        setShowReceivedForm(false);
-      }}
-      onSubmit={(data) => {
-        onReceivedSubmit?.(data);
-        setShowReceivedForm(false);
-      }}
-    />
-  ) : (
+  const cardContent = (
     <>
       {showVoteButtons && (
         <VotingButtons
@@ -132,7 +122,7 @@ export default function QuestionCard({
           onUpvote={handleUpvote}
         />
       )}
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col items-start gap-2">
         <div className="flex items-baseline justify-between">
           <div className="flex items-baseline gap-2 text-slate-500">
             <Badge label={company} variant="primary" />
@@ -150,12 +140,10 @@ export default function QuestionCard({
             />
           )}
         </div>
-        <div className="ml-2">
-          <p className={clsx(truncateContent && 'line-clamp-2 text-ellipsis')}>
-            {content}
-          </p>
-        </div>
-        {(showAnswerStatistics || showReceivedStatistics) && (
+        <p className={clsx(truncateContent && 'line-clamp-2 text-ellipsis')}>
+          {content}
+        </p>
+        {!showReceivedForm && (showAnswerStatistics || showReceivedStatistics) && (
           <div className="flex gap-2">
             {showAnswerStatistics && (
               <Button
@@ -190,6 +178,17 @@ export default function QuestionCard({
             )}
           </div>
         )}
+        {showReceivedForm && (
+          <CreateQuestionEncounterForm
+            onCancel={() => {
+              setShowReceivedForm(false);
+            }}
+            onSubmit={(data) => {
+              onReceivedSubmit?.(data);
+              setShowReceivedForm(false);
+            }}
+          />
+        )}
       </div>
     </>
   );

apps/portal/src/components/questions/card/QuestionListCard.tsx

@@ -21,7 +21,7 @@ export type QuestionListCardProps = Omit<
 function QuestionListCardWithoutHref(props: QuestionListCardProps) {
   return (
     <QuestionCard
-      {...props}
+      {...(props as any)}
       showActionButton={false}
       showAnswerStatistics={false}
       showDeleteButton={true}

apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx

@@ -2,7 +2,6 @@ import { startOfMonth } from 'date-fns';
 import { useState } from 'react';
 import { Button } from '@tih/ui';
 
-import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
 import type { Month } from '~/components/shared/MonthYearPicker';
 import MonthYearPicker from '~/components/shared/MonthYearPicker';
 
@@ -36,115 +35,113 @@ export default function CreateQuestionEncounterForm({
   );
 
   return (
-    <div>
-      <Button
-        label="Cancel"
-        variant="tertiary"
-        onClick={(event) => {
-          event.preventDefault();
-          onCancel();
-        }}
-      />
-      <div className="flex items-center gap-2">
-        <p className="font-md text-md text-slate-600">I saw this question at</p>
-        {step === 0 && (
-          <div>
-            <CompanyTypeahead
-              placeholder="Other company"
-              suggestedCount={3}
-              onSuggestionClick={({ value: company }) => {
-                setSelectedCompany(company);
-                setStep(step + 1);
-              }}
-              isLabelHidden={true}
-              onSelect={({ value: company }) => {
-                setSelectedCompany(company);
-              }}
-            />
-          </div>
-        )}
-        {step === 1 && (
-          <div>
-            <LocationTypeahead
-              suggestedCount={3}
-              onSuggestionClick={({ value: location }) => {
-                setSelectedLocation(location);
-                setStep(step + 1);
-              }}
-              isLabelHidden={true}
-              placeholder="Other location"
-              // eslint-disable-next-line @typescript-eslint/no-empty-function
-              onQueryChange={() => {}}
-              onSelect={({ value: location }) => {
-                setSelectedLocation(location);
-              }}
-            />
-          </div>
-        )}
-        {step === 2 && (
-          <div>
-            <RoleTypeahead
-              isLabelHidden={true}
-              suggestedCount={3}
-              onSuggestionClick={({ value: role }) => {
-                setSelectedRole(role);
-                setStep(step + 1);
-              }}
-              placeholder="Other role"
-              // eslint-disable-next-line @typescript-eslint/no-empty-function
-              onQueryChange={() => {}}
-              onSelect={({ value: role }) => {
-                setSelectedRole(role);
-              }}
-            />
-          </div>
-        )}
-        {step === 3 && (
-          <MonthYearPicker
-            yearLabel={''}
-            monthLabel={''}
-            value={{
-              month: ((selectedDate?.getMonth() ?? 0) + 1) as Month,
-              year: selectedDate?.getFullYear() as number,
+    <div className="flex items-center gap-2">
+      <p className="font-md text-md text-slate-600">I saw this question at</p>
+      {step === 0 && (
+        <div>
+          <CompanyTypeahead
+            placeholder="Other company"
+            suggestedCount={3}
+            onSuggestionClick={({ value: company }) => {
+              setSelectedCompany(company);
+              setStep(step + 1);
             }}
-            onChange={(value) => {
-              setSelectedDate(
-                startOfMonth(new Date(value.year, value.month - 1)),
-              );
+            isLabelHidden={true}
+            onSelect={({ value: company }) => {
+              setSelectedCompany(company);
             }}
           />
-        )}
-        {step < 3 && (
-          <Button
-            label="Next"
-            variant="primary"
-            onClick={() => {
+        </div>
+      )}
+      {step === 1 && (
+        <div>
+          <LocationTypeahead
+            suggestedCount={3}
+            onSuggestionClick={({ value: location }) => {
+              setSelectedLocation(location);
               setStep(step + 1);
             }}
+            isLabelHidden={true}
+            placeholder="Other location"
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            onQueryChange={() => {}}
+            onSelect={({ value: location }) => {
+              setSelectedLocation(location);
+            }}
           />
-        )}
-        {step === 3 && (
-          <Button
-            label="Submit"
-            variant="primary"
-            onClick={() => {
-              if (
-                selectedCompany &&
-                selectedLocation &&
-                selectedRole &&
-                selectedDate
-              ) {
-                onSubmit({
-                  company: selectedCompany,
-                  location: selectedLocation,
-                  role: selectedRole,
-                  seenAt: selectedDate,
-                });
-              }
+        </div>
+      )}
+      {step === 2 && (
+        <div>
+          <RoleTypeahead
+            isLabelHidden={true}
+            suggestedCount={3}
+            onSuggestionClick={({ value: role }) => {
+              setSelectedRole(role);
+              setStep(step + 1);
+            }}
+            placeholder="Other role"
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            onQueryChange={() => {}}
+            onSelect={({ value: role }) => {
+              setSelectedRole(role);
             }}
           />
-        )}
-      </div>
+        </div>
+      )}
+      {step === 3 && (
+        <MonthYearPicker
+          yearLabel={''}
+          monthLabel={''}
+          value={{
+            month: ((selectedDate?.getMonth() ?? 0) + 1) as Month,
+            year: selectedDate?.getFullYear() as number,
+          }}
+          onChange={(value) => {
+            setSelectedDate(
+              startOfMonth(new Date(value.year, value.month - 1)),
+            );
+          }}
+        />
+      )}
+      {step < 3 && (
+        <Button
+          label="Next"
+          variant="primary"
+          onClick={() => {
+            setStep(step + 1);
+          }}
+        />
+      )}
+      {step === 3 && (
+        <Button
+          label="Submit"
+          variant="primary"
+          onClick={() => {
+            if (
+              selectedCompany &&
+              selectedLocation &&
+              selectedRole &&
+              selectedDate
+            ) {
+              onSubmit({
+                company: selectedCompany,
+                location: selectedLocation,
+                role: selectedRole,
+                seenAt: selectedDate,
+              });
+            }
+          }}
+        />
+      )}
+      <Button
+        label="Cancel"
+        variant="tertiary"
+        onClick={(event) => {
+          event.preventDefault();
+          onCancel();
+        }}
+      />
     </div>
   );
 }

apps/portal/src/components/questions/typeahead/ExpandedTypeahead.tsx

@@ -1,7 +1,7 @@
 import type { ComponentProps } from 'react';
 import { Button, Typeahead } from '@tih/ui';
 
-type RequireAllOrNone<T> = T | { [K in keyof T]?: never };
+import type { RequireAllOrNone } from '~/utils/questions/RequireAllOrNone';
 
 type TypeaheadProps = ComponentProps<typeof Typeahead>;
 type TypeaheadOption = TypeaheadProps['options'][number];

apps/portal/src/utils/questions/RequireAllOrNone.ts

@@ -0,0 +1 @@
+export type RequireAllOrNone<T> = T | { [K in keyof T]?: never };