[FEAT] Save all programs automatically (hedyorg#4057)

Instead of children having to click a button to save their programs, all programs will be saved automatically.
    
Introduce new UI elements to support current sharing and handing in workflows.

## Notes on this PR

We are nowhere near done, this PR is in a preview state to show the progress.

The PR is built on top of the previous refactoring PR, so will show a lot of changes that aren't actually new here (these will disappear after the previous PR is merged and this branch is updated from main).

## Implementation

The feature is going to work as follows:

- In the current model, we are expecting to have either 0 or 1 programs saved for each `(user, level, adventure)` combination (In the limit, all users will have a program for every `(level, adventure)` combination).
- On page load of the code page (for a logged in user):
  - If no program is requested, the backend will send at most one saved program with each adventure to the frontend. If it so happens there there is more than one program for a `(user, level, adventure)` combination, we will pick the most recently saved one.
  - If a program is specifically requested by id, we will give that program preference over any other program in the same `(user, level, adventure)` combination.
  - If a program is specifically requested requested by id for a tab that no longer exists, we invent a tab (by its shortname, without a story) with the program loaded into it.
  - If no program is specifically requested by id, but a program is available in localstorage for the current `(level, adventure)` combination, we will load that instead (covering the case of writing code before logging in).
- During interaction with the page:
  - If the user has modified the code since the last save point AND (has stopped typing for 5 seconds OR switches tabs OR clicks the run button OR changes the program title [on blur] OR clicks share/hand in), the code is saved.
  - If the user is not logged in, saving entails writing to localStorage.
  - If the user is logged in, saving will write to the server database. If the save was triggered by clicking the Run button, saving will be done as part of the parse (since the program is sent to the server anyway). If the save was triggered by a client action, the code will be sent to the server via a separate POST. A save to the server clears the corresponding localStorage entry.
- The new sharing/hand in dialogs replace the equivalent functionality that exists today. If you are not currently logged in, they will prompt you to log in instead. That login will send you back to the code page with the right tab focused, giving the child an opportunity to click the button again. (As a consequence of the behavior described above, the program will be retrieved from local storage, but stored to the server upon clicking this button).

## TODO

- [x] Translations
- [x] JavaScript to make the popups work
- [x] Show/hide UI elements based on user being logged in/being in a class, etc
- [x] Make sure that the login flow works and sends the user back to the right tab with the program still there
- [x] Backend and database work to support this
  - [x] ~~Make loading a user's programs for a single level efficient (`programs_for_user` will iterate all programs the user has every time)~~ (postponed: hedyorg#4121)
  - [x] Make the **My programs** page paginated
- [x] Block editing submitted programs on the edit page
- [x] Tab anchors in URL
- [ ] Cypress tests
- [x] More than one program for each `(level, adventure)` combination? 
- [ ] Remove old modals that are no longer used.
- [ ] Review the implications these changes have for the tutorial


## UI Preview

<img width="744" alt="image" src="https://user-images.githubusercontent.com/524162/220924082-fd7ac980-0b49-435c-9f29-cdd50221a457.png">

<img width="708" alt="image" src="https://user-images.githubusercontent.com/524162/220924207-26f370c8-d4c3-4c9a-93b4-787892641691.png">

<img width="667" alt="image" src="https://user-images.githubusercontent.com/524162/220924305-e6422f8e-0f1a-4b4f-be89-41c5c6f6bfec.png">

build-tools/heroku/generate-client-messages.py

@@ -14,10 +14,12 @@
 
 OUTPUT_FILE = 'static/js/message-translations.ts'
 
+# Every key you add here must also be added to content/client-messages.txt
 ADDITIONAL_GETTEXT_KEYS = [
     'level_title',
     'unsaved_class_changes',
     'teacher_welcome',
+    'copy_link_to_share',
 ]
 
 

build-tools/heroku/tailwind/styles.css

@@ -366,7 +366,7 @@ input:disabled {
 }
 
 input[type=checkbox], input[type=radio] {
-  @apply appearance-none border border-gray-400 w-4 h-4;
+  @apply appearance-none border border-gray-700 w-5 h-5;
 }
 
 input[type=radio] {
@@ -423,6 +423,11 @@ body[dir='rtl'] .right-hand-shadow {
   @apply border-blue-300;
 }
 
+.active-bluebar-btn {
+  @apply bg-blue-300;
+  box-shadow: inset 0 2px 4px 0 rgb(0 0 10 / 0.3);
+}
+
 /* TB: We shouldn't ever do this, all this dynamic handling can already be fixed with Tailwind! */
 @screen lg {
   .tab {

content/client-messages.txt

@@ -1,3 +1,4 @@
 gettext('level_title')
 gettext('unsaved_class_changes')
 gettext('teacher_welcome')
+gettext('copy_link_to_share')

content/pages/ar.yaml

@@ -83,13 +83,18 @@ sections:
 
     -   title: "Storing programs"
         text: |
-            Because you are now logged in, you'll see the blue banner with My profile and My programs.
-            These tabs exist for your students too. In My programs you can find all the codes that you've saved.
+            When you are logged in, you'll see My programs next to your profile icon.
+            This option exists for your students too. In My programs you can find all the programs that you've worked on.
+            By default, programs will be saved to 'My programs' when you run the code, and every 10 seconds, under their default name
+            and their level (for example: Story 5). If you want to store a program under a new name, just type the new name in the name bar.
+            Currently, only one program can be saved per level, per tab.
 
-            You can save your projects easily by giving your project a name in the white bar and pressing the green button Save Code.
-            You (and your students) can also share programs. These programs will be posted on our [explore page](https://hedycode.com/explore), for everybody to see and use.
+            You (and your students) can also share programs using the share button next to program names.
+            These programs will be posted on our <a href="https://hedy.org/explore" target="_blank">explore page</a>, for everybody to see and use.
             If you want to unshare your program, go to 'My programs' and click 'Unshare'.
 
+            The paper plane icon can be used to hand in programs to the teacher of a class. Programs that have been handed is will no longer be editable.
+
 -   title: "Teaching with Hedy"
     key: "teaching"
     subsections:
@@ -1091,8 +1096,8 @@ sections:
 learn-more-sections:
 -   title: "Join the Hedy Community"
     text: |
-        We love to hear from you! The best way to get in touch with us is by joining our [Discord server](https://discord.gg/8yY7dEme9r). 
-        
+        We love to hear from you! The best way to get in touch with us is by joining our [Discord server](https://discord.gg/8yY7dEme9r).
+
         You can also [send us an email](mailto:[email protected] "About Hedy").
 -   title: "A deep dive!"
     text: |

content/pages/bn.yaml

@@ -82,13 +82,18 @@ sections:
 
     -   title: "Storing programs"
         text: |
-            Because you are now logged in, you'll see the blue banner with My profile and My programs.
-            These tabs exist for your students too. In My programs you can find all the codes that you've saved.
+            When you are logged in, you'll see My programs next to your profile icon.
+            This option exists for your students too. In My programs you can find all the programs that you've worked on.
+            By default, programs will be saved to 'My programs' when you run the code, and every 10 seconds, under their default name
+            and their level (for example: Story 5). If you want to store a program under a new name, just type the new name in the name bar.
+            Currently, only one program can be saved per level, per tab.
 
-            You can save your projects easily by giving your project a name in the white bar and pressing the green button Save Code.
-            You (and your students) can also share programs. These programs will be posted on our [explore page](https://hedycode.com/explore), for everybody to see and use.
+            You (and your students) can also share programs using the share button next to program names.
+            These programs will be posted on our <a href="https://hedy.org/explore" target="_blank">explore page</a>, for everybody to see and use.
             If you want to unshare your program, go to 'My programs' and click 'Unshare'.
 
+            The paper plane icon can be used to hand in programs to the teacher of a class. Programs that have been handed is will no longer be editable.
+
 -   title: "Teaching with Hedy"
     key: "teaching"
     subsections:

content/pages/ca.yaml

@@ -89,6 +89,8 @@ sections:
             Tu (i els teus estudiants) també pots compartir programes. Aquests programes es publicaran a la nostra <a href="https://hedycode.com/explore" target="_blank">pàgina d'exploració</a>, perquè tothom els pugui veure i utilitzar.
             Si voleu deixar de compartir el vostre programa, aneu a "Els meus programes" i feu clic a "Deixa de compartir".
 
+            The paper plane icon can be used to hand in programs to the teacher of a class. Programs that have been handed is will no longer be editable.
+
 -   title: "Teaching with Hedy"
     key: "teaching"
     subsections:

content/pages/cs.yaml

@@ -82,13 +82,18 @@ sections:
 
     -   title: "Storing programs"
         text: |
-            Because you are now logged in, you'll see the blue banner with My profile and My programs.
-            These tabs exist for your students too. In My programs you can find all the codes that you've saved.
+            When you are logged in, you'll see My programs next to your profile icon.
+            This option exists for your students too. In My programs you can find all the programs that you've worked on.
+            By default, programs will be saved to 'My programs' when you run the code, and every 10 seconds, under their default name
+            and their level (for example: Story 5). If you want to store a program under a new name, just type the new name in the name bar.
+            Currently, only one program can be saved per level, per tab.
 
-            You can save your projects easily by giving your project a name in the white bar and pressing the green button Save Code.
-            You (and your students) can also share programs. These programs will be posted on our [explore page](https://hedycode.com/explore), for everybody to see and use.
+            You (and your students) can also share programs using the share button next to program names.
+            These programs will be posted on our <a href="https://hedy.org/explore" target="_blank">explore page</a>, for everybody to see and use.
             If you want to unshare your program, go to 'My programs' and click 'Unshare'.
 
+            The paper plane icon can be used to hand in programs to the teacher of a class. Programs that have been handed is will no longer be editable.
+
 -   title: "Teaching with Hedy"
     key: "teaching"
     subsections:

content/pages/cy.yaml

@@ -82,13 +82,18 @@ sections:
 
     -   title: "Storing programs"
         text: |
-            Because you are now logged in, you'll see the blue banner with My profile and My programs.
-            These tabs exist for your students too. In My programs you can find all the codes that you've saved.
+            When you are logged in, you'll see My programs next to your profile icon.
+            This option exists for your students too. In My programs you can find all the programs that you've worked on.
+            By default, programs will be saved to 'My programs' when you run the code, and every 10 seconds, under their default name
+            and their level (for example: Story 5). If you want to store a program under a new name, just type the new name in the name bar.
+            Currently, only one program can be saved per level, per tab.
 
-            You can save your projects easily by giving your project a name in the white bar and pressing the green button Save Code.
-            You (and your students) can also share programs. These programs will be posted on our [explore page](https://hedycode.com/explore), for everybody to see and use.
+            You (and your students) can also share programs using the share button next to program names.
+            These programs will be posted on our <a href="https://hedy.org/explore" target="_blank">explore page</a>, for everybody to see and use.
             If you want to unshare your program, go to 'My programs' and click 'Unshare'.
 
+            The paper plane icon can be used to hand in programs to the teacher of a class. Programs that have been handed is will no longer be editable.
+
 -   title: "Teaching with Hedy"
     key: "teaching"
     subsections:

content/pages/da.yaml

@@ -82,13 +82,18 @@ sections:
 
     -   title: "Storing programs"
         text: |
-            Because you are now logged in, you'll see the blue banner with My profile and My programs.
-            These tabs exist for your students too. In My programs you can find all the codes that you've saved.
+            When you are logged in, you'll see My programs next to your profile icon.
+            This option exists for your students too. In My programs you can find all the programs that you've worked on.
+            By default, programs will be saved to 'My programs' when you run the code, and every 10 seconds, under their default name
+            and their level (for example: Story 5). If you want to store a program under a new name, just type the new name in the name bar.
+            Currently, only one program can be saved per level, per tab.
 
-            You can save your projects easily by giving your project a name in the white bar and pressing the green button Save Code.
-            You (and your students) can also share programs. These programs will be posted on our [explore page](https://hedycode.com/explore), for everybody to see and use.
+            You (and your students) can also share programs using the share button next to program names.
+            These programs will be posted on our <a href="https://hedy.org/explore" target="_blank">explore page</a>, for everybody to see and use.
             If you want to unshare your program, go to 'My programs' and click 'Unshare'.
 
+            The paper plane icon can be used to hand in programs to the teacher of a class. Programs that have been handed is will no longer be editable.
+
 -   title: "Teaching with Hedy"
     key: "teaching"
     subsections:

content/pages/el.yaml

@@ -83,13 +83,18 @@ sections:
 
     -   title: "Storing programs"
         text: |
-            Because you are now logged in, you'll see the blue banner with My profile and My programs.
-            These tabs exist for your students too. In My programs you can find all the codes that you've saved.
+            When you are logged in, you'll see My programs next to your profile icon.
+            This option exists for your students too. In My programs you can find all the programs that you've worked on.
+            By default, programs will be saved to 'My programs' when you run the code, and every 10 seconds, under their default name
+            and their level (for example: Story 5). If you want to store a program under a new name, just type the new name in the name bar.
+            Currently, only one program can be saved per level, per tab.
 
-            You can save your projects easily by giving your project a name in the white bar and pressing the green button Save Code.
-            You (and your students) can also share programs. These programs will be posted on our [explore page](https://hedycode.com/explore), for everybody to see and use.
+            You (and your students) can also share programs using the share button next to program names.
+            These programs will be posted on our <a href="https://hedy.org/explore" target="_blank">explore page</a>, for everybody to see and use.
             If you want to unshare your program, go to 'My programs' and click 'Unshare'.
 
+            The paper plane icon can be used to hand in programs to the teacher of a class. Programs that have been handed is will no longer be editable.
+
 -   title: "Teaching with Hedy"
     key: "teaching"
     subsections:

content/pages/en.yaml

@@ -83,13 +83,17 @@ sections:
 
     -   title: "Storing programs"
         text: |
-            Because you are now logged in, you'll see the blue banner with My profile and My programs.
-            These tabs exist for your students too. In My programs you can find all the codes that you've saved.
+            When you are logged in, you'll see My programs next to your profile icon.
+            This option exists for your students too. In My programs you can find all the programs that you've worked on.
+            By default, programs will be saved to 'My programs' when you run the code, and every 10 seconds, under their default name
+            and their level (for example: Story 5). If you want to store a program under a new name, just type the new name in the name bar.
+            Currently, only one program can be saved per level, per tab.
 
-            You can save your projects easily by giving your project a name in the white bar and pressing the green button Save Code.
-            You (and your students) can also share programs. These programs will be posted on our <a href="https://hedycode.com/explore" target="_blank">explore page</a>, for everybody to see and use.
+            You (and your students) can also share programs using the share button next to program names.
+            These programs will be posted on our <a href="https://hedy.org/explore" target="_blank">explore page</a>, for everybody to see and use.
             If you want to unshare your program, go to 'My programs' and click 'Unshare'.
 
+            The paper plane icon can be used to hand in programs to the teacher of a class. Programs that have been handed is will no longer be editable.
 -   title: "Teaching with Hedy"
     key: "teaching"
     subsections:

content/pages/fa.yaml

@@ -82,13 +82,18 @@ sections:
 
     -   title: "Storing programs"
         text: |
-            Because you are now logged in, you'll see the blue banner with My profile and My programs.
-            These tabs exist for your students too. In My programs you can find all the codes that you've saved.
+            When you are logged in, you'll see My programs next to your profile icon.
+            This option exists for your students too. In My programs you can find all the programs that you've worked on.
+            By default, programs will be saved to 'My programs' when you run the code, and every 10 seconds, under their default name
+            and their level (for example: Story 5). If you want to store a program under a new name, just type the new name in the name bar.
+            Currently, only one program can be saved per level, per tab.
 
-            You can save your projects easily by giving your project a name in the white bar and pressing the green button Save Code.
-            You (and your students) can also share programs. These programs will be posted on our [explore page](https://hedycode.com/explore), for everybody to see and use.
+            You (and your students) can also share programs using the share button next to program names.
+            These programs will be posted on our <a href="https://hedy.org/explore" target="_blank">explore page</a>, for everybody to see and use.
             If you want to unshare your program, go to 'My programs' and click 'Unshare'.
 
+            The paper plane icon can be used to hand in programs to the teacher of a class. Programs that have been handed is will no longer be editable.
+
 -   title: "Teaching with Hedy"
     key: "teaching"
     subsections:

content/pages/fi.yaml

@@ -83,13 +83,18 @@ sections:
 
     -   title: "Storing programs"
         text: |
-            Because you are now logged in, you'll see the blue banner with My profile and My programs.
-            These tabs exist for your students too. In My programs you can find all the codes that you've saved.
+            When you are logged in, you'll see My programs next to your profile icon.
+            This option exists for your students too. In My programs you can find all the programs that you've worked on.
+            By default, programs will be saved to 'My programs' when you run the code, and every 10 seconds, under their default name
+            and their level (for example: Story 5). If you want to store a program under a new name, just type the new name in the name bar.
+            Currently, only one program can be saved per level, per tab.
 
-            You can save your projects easily by giving your project a name in the white bar and pressing the green button Save Code.
-            You (and your students) can also share programs. These programs will be posted on our [explore page](https://hedycode.com/explore), for everybody to see and use.
+            You (and your students) can also share programs using the share button next to program names.
+            These programs will be posted on our <a href="https://hedy.org/explore" target="_blank">explore page</a>, for everybody to see and use.
             If you want to unshare your program, go to 'My programs' and click 'Unshare'.
 
+            The paper plane icon can be used to hand in programs to the teacher of a class. Programs that have been handed is will no longer be editable.
+
 -   title: "Teaching with Hedy"
     key: "teaching"
     subsections: