app: refactor indicators and filters to provide more robust system for adding new icons and transitions

[katemihalikova]

Viz thread.

Ikonky se teď definují jen na jednom místě, v souboru indicators.js, takže případné změny budou jednodušší a nebude nám přibývat s každou ikonkou milion nových elementů v DOM. Každá ikonka má svoje id (star), emoji (⭐) a transformační funkci. Kdybys chtěl nějaké složité flow, tak to umí transformace podmiňovat podle stisknuté modifikační klávesy (Shift, Ctrl, Alt, AltGr, Meta), stisknutého myšítka (levé, prostřední, pravé), flagů uživatele (intro) nebo jakékoliv jejich kombinace.

WIP

• doprogramovat načtení předchozího stavu naklikání filtrů z localStorage
• shodnout se na ikonkách pro nové stavy
• dovymyslet filtrování nových stavů (zahrnout pod původní trojici? udělat víc tlačítek? nebo třeba nechat postaru tři ikonky, které se se shiftem transformují na filtr všech ikonek? něco jiného?)

Aktuální flowchart

flowchart LR
    not-done("not-done\n❔")
    maybe("maybe\n❓")
    star("star\n⭐")
    together("together\n🗨️")
    alone-then-together("alone-then-together\n👁‍🗨")
    alone-then-tick("alone-then-tick\n🟨")
    tick("tick\n☑️")
    ignore("ignore\n❎")
    done("done\n✅")
    %% standard transition
    not-done --> star --> done --> not-done
    %% flag transitions
    not-done --->|intro flag XOR shift key| maybe --> star
    maybe --->|intro flag XOR shift key| not-done
    %% shift key transitions
    star -->|shift key| together --> done
    together -->|shift key| alone-then-together --> done
    alone-then-together -->|shift key| alone-then-tick --> done
    alone-then-tick -->|shift key| tick --> done
    %% ctrl key transitions
    star -->|ctrl key| ignore --> not-done

Loading

[benabraham]

Takže sem vymyslel tohle.
Bude to realizovatelný snadno? 😬
Hvězdičku jsem přejmenoval na „do“.

Tlustý čáry jsou kdokoli, tenký čáry jen CoreSkill.

flowchart LR
    not-done("not-done\n❔")
    maybe("maybe\n❓")
    do("do\n👉")
    together("do together\n👨‍🏫")
    alone-then-together("do alone then\ntogether\n📖👨‍🏫")
    alone-then-tick("do alone and tick\n🔲")
    tick("tick\n☑️")
    ignore("ignore\n❎")
    done("done\n✅")
    ready("ready\nfor together\n🏁")
    have-question("have a question\n🙋‍♀️")
    
    subgraph LEARNED
        %% basic flow
        not-done ==> do ==> done -.-> not-done
        do --> |"\nCS flag"| tick

        %% intro flow
        not-done ==> |"[shift] XOR\nintro flag"| maybe ==> do
        maybe -.-> |"[shift] XOR \nintro flag\n\n\n\n"| not-done

        %% do together flow
        do --> |"[shift]\nCS flag only"| together --> |"[shift]\nCS flag only"| alone-then-together ==> ready --> |"\nCS flag only"| tick ==> done
        together --> |"\nCS flag only"| tick
        
        %% do alone flow
        do --> |"[ctrl]\nCS flag only"| alone-then-tick ==> have-question ==> done
        have-question --> |"\nCS flag"| tick
               
    end 

    subgraph IGNORED
        x((any\nstate)) --> |"[ctrl+shift]\nCS flag only"| ignore -.-> not-done
    end

Loading

[benabraham]

Filtry zatím nechávám otevřené.

Přemýšlím spíš o nějakých sdružených filtrech podle toho, co je zrovna cílem.

Např.:

• sedím s klientem a řeším co může udělat sám
• klient sedí a řeší co má dělat dál
• klient má chvíli času a chce si odškrtat věci, které už asi zná

[benabraham]

Aktualizoval jsem ten flow.
Jen malá změna, kdy z otázky to jde v případě coreskill flagu vždy na tick, přijde mi fajn, že si to finální budou dělat sami vždycky.