For a more straightforward understanding of the interface, it will be necessary to include a section where the user can immediately click a button to add:

• a new folder/label
• a new file

This action can be accessed both from the sidebar (Upload or Create) and from within the library.

More info: https://typedoc.org/

Subtasks:

• Install svelte-i18n
• Try to think of a way to register several i18n files at once
• Integrate with crowdin (new project?)
• Tool or mechanism to convert properties files to json
• Use the locale setting that the backend returns when fetching the current user
• Switch current test translations to converted translations from 3akai-ux

On the authentication modal window there are icons for twitter, google and facebook buttons, but we need ones we can use without attribution. Not important just yet, but let's not forget to do this.

As a restructuring of the platform homepage, we will need to redesign the primary sections. This will help with structuring the landing page so we are able two include two distinct functionalities:

• project
• product

The idea is to show the two distinct functionalities associated to the OAE. While the project section aims to inform users that there is an open source github repository they can contribute to, the product section is intended a showcase/demo of the some of the platform features.

Right now, we're starting with a redesign of the primary top section, as will be shown in the following mockups (soon to be added).

the user should be able to fill in the username and password and just press enter instead of clicking the sign in button.

This is all there is right now:

      loginFailed = <div>Ouch! credentials not valid</div>;

🤷🏻‍♂️

Right now we're just displaying the default one if the server replies shared/oae/ui/oae-logo.jog or a custom one if the server replies something else (like, the real one)

...as it is currently duplicated in both HomeTopBar.svelte and MainTopBar.svelte

For the new iteration of the main layout, we will implement a navbar that contains the basic main user activities.

Resources:

• Svelte with TypeScript and Jest (Starter Project)
• Testing Svelte components with Jest
• How to test Svelte components
• https://sveltesociety.dev/recipes/testing-and-debugging/unit-testing-svelte-component/
• https://testing-library.com/docs/svelte-testing-library/example/
• https://testing-library.com/docs/cypress-testing-library/intro/
• https://www.thisdot.co/blog/testing-web-components-with-cypress-and-typescript

Egghead resources on cypress:

• https://egghead.io/lessons/cypress-use-cy-server-and-cy-route-to-control-api-response-in-a-cypress-test
• https://egghead.io/courses/test-production-ready-apps-with-cypress
• https://egghead.io/courses/end-to-end-testing-with-cypress

TODO:

• Setup Jest / Testing-library for unit testing
• Setup Cypress
  • Create admin user as a before fn (can't have access to admin backend for now)
  • Create regular user as a before fn (can't have access to admin backend for now)

When pressing the list/mosaic button, the library files should be displayed accordingly.

Right, we have appended both types (table and mosaic) as a showcase.

The /dashboard and /group pages each are structured to display an activity feed that includes several types of files and user activity items. So far, we have the following (non-exhaustive) list of activities:

• File (.doc, .docx, .jpg, .png, .pdf)*
• Link
• Discussion
• Folder (Label)
• Group
• Meeting
• Etherpad
• Ethercalc

*most common type of activity. Contains a small display of the content inside.

To be better understand how these should behave, we need to create a series of mockups to analyse dynamic behaviour and put them up for review.

UPDATE:

Some details we need to take care of:

• Redimension the thumbnails properly
• Give them a banner or some kind of overlay with extra information:
  • Type of content (link, folder, document, etc)
  • Visibility
• Visibility needs to be given a visual representation (similar to the one OAE has right now) for public, private and loggedin
• The text currently does not respect the boundaries of the div it's put into

Adding the logout button in prominence for the sidebar is more straightforward for the user. This way, we can include the avatar, notifications icon and the dark/light mode toggle in a section on top of the main content. This section also includes the search bar.

Take a look at how things are done in signin.js in 3akai-ux.

It appears that on webkit browsers it looks bad, like this:

Tested on brave and safari. Looks good on firefox.

There should be a folder/label section visible so that the user can access all the files within at once and have them displayed as a mosaic or table.

NOTE: navigating within a folder will activate the breadcrumbs.

I'm leaving the paginating for another issue, as well as infinity scrolling.

Update:

• Convert previous ActivityItems model to a new one
• Transform activity and activity collection description (humanize sentences)
• Apply i18n

For future reference, here are some resources on the decision not to go with typescript but instead JSDoc TS:

Articles with good points

• https://medium.com/@tomas.sivicki/this-article-is-so-polarising-i-have-to-respond-6acaa8a81c44
• https://dev.to/jfbrennan/the-reasons-i-don-t-use-typescript-2fhb
• https://javascript.plainenglish.io/7-really-good-reasons-not-to-use-typescript-166af597c466
• https://medium.com/javascript-scene/the-typescript-tax-132ff4cb175b
• https://dev.to/rtorr/typescript-without-typescript-kg8

JSDoc TS resources

• https://medium.com/@trukrs/type-safe-javascript-with-jsdoc-7a2a63209b76
• https://medium.com/@trukrs/javascript-type-linting-5903e9e3625f
• https://jsdoc.app/
• https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html

Cheatsheets

• https://devhints.io/jsdoc

import * as MyTypes from '../types';

/**
 * @typedef {MyTypes.Person} Person
 */

Twitter threads

• https://twitter.com/swyx/status/1350427690814251010
• https://twitter.com/rich_harris/status/1323758415504646144?lang=en
• https://twitter.com/rich_harris/status/1350436286948122625
• https://twitter.com/brianleroux/status/1350441610681618439

Let's use Crowdin's cli tool for this. Then let's attach this tool to mocha tests for translation (instead of git cloning 3akai-ux).

Todos:

• Set up Crowdin's cli tool
• Attach it to mocha translation tests

Resources:

• Internationalization library for Svelte
• A Step-by-Step Guide to Svelte Localization with svelte-i18n v3

Might be worth checking out:

• Workbox
• Case study: Creating a Progressive Web App with StencilJS and Workbox

For the next iteration of the main layout, we will need to simulate search results.

Svelte tutorial as a reference

Some stuff to check:

• npm run validate
• npm run lint
• npm run lint:css
• npm run format
• npm run test-translations
• npm run e2e-headless
• Also find a way to run tsc in order to validate jsdoc types

Given the recent updates, we will need to redesign feed cards to accommodate the changes. We will start with:

• image cards

The OAE image cards can contain more than one image. Right now, the cards only show the first out of the x images, so we need to find a way to include them all and split the file names.

Mini-tasks:

• Babel
• Svelte through ESlint
• Prettier
• Stylelint
• VSCode integrations

Base layout main content div is set to overflow: scroll when the content displayed in the page exceeds the height of the viewport. However, the div itself is scrolling when the scroll should be happening in the browser.

In 3akai-ux this is what we have:

    function(oae, $) {
        $.ajaxSetup({
            // Make caching the default behavior for $.getScript
            'cache': true,
            // Intercept 419 status indicating that the user has to accept the Terms and Conditions before continuing
            'complete': function(xhr, textStatus) {
                if (xhr.status === 419) {
                    // Update user status
                    oae.data.me.needsToAcceptTC = true;
                    // Hide any modal that might be open as bootstrap doesn't support 2 modals at once
                    $('.modal').modal('hide');
                    // Insert the Terms and Conditions widget in settings mode
                    var termsandconditionsId = oae.api.util.generateId();
                    oae.api.widget.insertWidget('termsandconditions', termsandconditionsId, null, true);
                }
            }
        });
        // Make sure that arrays passed in as arguments are properly encoded
        $.ajaxSettings.traditional = true;
        // Tell IE9 that cross-domain requests are a possibility when Amazon S3 is enabled
        // as the content storage strategy
        $.support.cors = true;

        return oae;
    }

When migrating the final version of Biscuit-ux for the homepage, keep in mind the following issues:

1. The search bar is now in prominence, which means that it will stay centered;
2. The search bar is on top of a background. This element can be changed by the corresponding tenant to a photo or a solid colour;
3. The modal must have a z-index higher than any other element in the homepage.

Consider adding the following tweaks in the future:

4. For 2, include the possibility to drag the background and set it into the preferred position;
5. Search bar needs a filtering system