Some fixes

src/components/SelectedTerm.tsx

@@ -63,11 +63,11 @@ export const SelectedTerm = observer(() => {
           </label>
 
           <label className="flex flex-col gap-1 text-sm">
-            <span className="font-semibold">Description</span>
+            <span className="font-semibold">Notes</span>
             <textarea
               className="rounded border p-2 "
               rows={20}
-              placeholder="Description"
+              placeholder="Write down some notes about the word here"
               value={notes}
               onKeyDown={(e) => {
                 e.stopPropagation();

src/components/TextStatsView.tsx

@@ -3,11 +3,10 @@ import { observer } from 'mobx-react-lite';
 import { PropsWithChildren, useMemo } from 'react';
 
 import { levelKeys } from '@/constants/levels.ts';
-import { PersonalStats } from '@/stores/PersonalStatsStore.ts';
-import { terms } from '@/stores/TermsStore.ts';
+import { PersonalStatsStore } from '@/stores/PersonalStatsStore.ts';
 import { TextStatsStore } from '@/stores/TextStatsStore.ts';
 
-const Percentages = ({ stats }: { stats: PersonalStats }) => {
+const Percentages = ({ stats }: { stats: PersonalStatsStore }) => {
   return (
     <div className="z-30 mt-1 h-2 w-full  bg-slate-50">
       {stats.percents.map(({ level, percent }) => (
@@ -33,7 +32,7 @@ const Percentages = ({ stats }: { stats: PersonalStats }) => {
   );
 };
 
-const PersonalStatsView = observer(({ stats }: { stats: PersonalStats }) => {
+const PersonalStatsView = observer(({ stats }: { stats: PersonalStatsStore }) => {
   return (
     <>
       {levelKeys.map((level) => (
@@ -57,12 +56,17 @@ interface TextStatsViewProps extends PropsWithChildren {
 }
 
 export const TextStatsView = observer((props: TextStatsViewProps) => {
-  const stats = useMemo(() => new TextStatsStore(props.stats), [props.stats]);
-  const personal = useMemo(() => new PersonalStats(stats.uniqueWords, terms), [stats.uniqueWords]);
+  const stats = useMemo(() => TextStatsStore.of(props.stats), [props.stats]);
+  const personal = useMemo(() => PersonalStatsStore.of(stats.uniqueWords), [stats.uniqueWords]);
 
   return (
     <>
-      <div className="flex items-center gap-2 text-right  text-sm">
+      <div
+        className={cx('flex items-center gap-2 text-right text-sm', {
+          // 'bg-emerald-50': true,
+          'bg-amber-50': !personal.of['unidentified']?.length,
+        })}
+      >
         {props.children}
         <div className="w-12" title="Paragraphs">
           {stats.paragraphCount || '...'}

src/components/TokenView.tsx

@@ -6,19 +6,21 @@ import { TokenStore } from '@/stores/TokenStore.ts';
 
 export const TokenView = observer(({ token }: { token: TokenStore }) => {
   return (
-    <>
-      {token.token.pre}
+    <span>
+      {token.token?.pre}
       <span
         className={cx('lexi-word-unidentified border border-dashed border-transparent', {
           [`lexi-word-${token.term?.level}`]: token.term?.level,
-          'border-slate-500': token.normalized === terms.selected,
-          asterisk: token.term?.notes,
+          '!border-slate-500': token.normalized === terms.selected,
+          'mark asterisk': token.term?.notes,
+          'mark exclamation': token.term?.notes?.startsWith('!'),
+          'mark question': token.term?.notes?.startsWith('?'),
         })}
         onClick={() => terms.select(token.normalized)}
       >
         {token.token.text}
       </span>
-      {token.token.post}
-    </>
+      {token.token?.post}
+    </span>
   );
 });

src/index.css

@@ -81,15 +81,25 @@ body {
 }
 
 @layer utilities {
-  .asterisk {
+  .mark {
     position: relative;
   }
 
-  .asterisk::after {
+  .mark::after {
     position: absolute;
     opacity: 50%;
-    right: -5px;
+    right: -4px;
     top: -12px;
+    font-size: 80%;
+  }
+
+  .asterisk::after {
     content: '*';
   }
+  .exclamation::after {
+    content: '!';
+  }
+  .question::after {
+    content: '?';
+  }
 }

src/services/Tokenizer/compromise/three.worker.ts

@@ -1,35 +1,17 @@
-import { compromiseThree } from './three.ts';
+import three from 'compromise';
+
+import { Compromise } from '@/utils/compromise.ts';
 
 self.onmessage = (e) => {
-  const doc = compromiseThree(e.data);
+  const view = three(e.data);
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   const paragraphs = e.data.split('\n\n');
 
-  const uniqueWords = (
-    doc.terms().unique().toLowerCase().json() as Array<{
-      terms: Array<{ text: string; tags: string[] }>;
-    }>
-  )
-    .flatMap((_) =>
-      _.terms.map((_) => {
-        const found = _.text.match(/['’]/);
-
-        if (_.tags.includes('Possessive') && found) {
-          const [text] = _.text.split(/['’]/);
-          return text;
-        }
-        return _.text;
-      }),
-    )
-    .filter(Boolean);
-
   const data = {
-    // paragraphs,
     paragraphCount: paragraphs.length,
-    sentenceCount: doc.length,
-    wordCount: doc.wordCount(),
-    uniqueWords: uniqueWords,
-    uniqueWordCount: uniqueWords.length,
+    sentenceCount: Compromise.getSentenceCount(view),
+    wordCount: Compromise.getWordCount(view),
+    uniqueWords: Compromise.getUniqueWords(view),
   };
 
   self.postMessage(data);

src/stores/PersonalStatsStore.ts

@@ -2,25 +2,34 @@ import { groupBy } from 'lodash';
 import { makeAutoObservable } from 'mobx';
 
 import { levelKeys } from '@/constants/levels.ts';
-import { TermsStore } from '@/stores/TermsStore.ts';
+import { terms, TermsStore } from '@/stores/TermsStore.ts';
+
+export class PersonalStatsStore {
+  static of(words: string[]) {
+    return new PersonalStatsStore(words, terms);
+  }
 
-export class PersonalStats {
   constructor(
     private words: string[],
     private terms: TermsStore,
   ) {
     makeAutoObservable(this);
   }
 
+  // FIXME: this is incorrect
+  get uniqueWords() {
+    return [...new Set(this.words)];
+  }
+
   get of() {
-    return groupBy(this.words, (word) => {
+    return groupBy(this.uniqueWords, (word) => {
       return this.terms.map.get(word)?.level || 'unidentified';
     });
   }
 
   get percents() {
     return levelKeys.map((level) => {
-      return { level, percent: ((this.of[level]?.length ?? 0) / this.words.length) * 100 };
+      return { level, percent: ((this.of[level]?.length ?? 0) / this.uniqueWords.length) * 100 };
     });
   }
 }

src/stores/TermsStore.ts

@@ -37,6 +37,8 @@ export class TermsStore {
     if (!this.map.has(selected)) {
       this.map.set(selected, TermStore.of({ id: selected, level: 'unidentified' }));
     }
+
+    void navigator.clipboard.writeText(this.selected);
   }
 }
 

src/stores/TextStatsStore.ts

@@ -1,6 +1,10 @@
 import { makeAutoObservable } from 'mobx';
 
 export class TextStatsStore {
+  static of(stats?: Lexi.TextStats) {
+    return new TextStatsStore(stats);
+  }
+
   paragraphCount = 0;
   sentenceCount = 0;
   wordCount = 0;

src/utils/compromise.ts

@@ -42,7 +42,9 @@ export class Compromise {
       cur.post = apostrophe + possessive + cur.post;
       acc.push(cur);
     } else if (cur.text.includes('—')) {
-      acc[acc.length - 1].post += cur.text;
+      if (acc[acc.length - 1]?.post) {
+        acc[acc.length - 1].post += cur.text;
+      }
     } else {
       acc.push(cur);
     }