Show percent translated on the translation form page

[liammulh]

In phetsims/qa#869, @DianaTavares asked:

It is possible to have the information in the picture always visible while we are translating the strings? I always give a fast scroll up-down to be sure that I translate all strings, but having this information, I think, is more efficient.

I think this is a feature @kathy-phet also thought would be nice.

I'm not sure how we'd show the percentage dynamically. Maybe every time the translation form data changes, we compute the string percentages:

// This is just pseudocode.

const [translatedStringsData, setTranslatedStringsData] = useState({});
useEffect(() => {
  const newData = computeTranslatedStringsData(translationValues);
  setTranslatedStringsData(newData);
}, [translationFormData]);

And then in the JSX:

// This is just pseudocode.

const formJsx = (
  <div>
    <h2>Sim-Specific Strings</h2>
    <p>{translatedStringsData.translated} of {translatedStringsData.total}</p>
  </div>
);

(We'd need to compute the percentage again, I think. And we'd need to do the pseudocode for each type of strings. And we might want to make the percentage show at the top of the screen in a sticky container so it's always visible.)

[oliver-phet]

This will be accomplished in #417