Вадим

Итак, для этого вам понадобится:

1. Медиафайл, который доложен вот так вот выпрыгивать(картинка, анимация, да хоть видео)
   
2. Добавить этот медиа на страницу. и обернём его в div с классом, какой вашей душе угодно. Но лучше чтобы название намекало на суть элемента - что это какой-то выскакивающий блок. Скажем, toast(как тост из тостера)
   
3. Делаем ему position: fixed и размещаем с помощью right И bottom так, чтобы его не было видно на экране.(right и bottom - чтобы не зависеть от размера экрана и он всегда был в одном месте)
   
4. Так же опишем класс модификатор, например, toast_active, в котором будут стили отвечающие за позиционирование. Так, чтобы элемент было видно. То есть toast_active должны содержать такие bottom и right, чтобы элемент был на экране.
   
5. Ну и далее нужен элемент триггер - по нажатию который надо добавлять класс toast_active на наш элемент. Например, через js.
   
6. Внутри обработчика сделать таймер(setTImeout) на нужное вам время, через которое нужно скрыть этот элемент снова. В функции таймера убрать класс toast_active.
   
7. Если пропишете в классе .toast свойство transition для bottom, то будет ещё и плавно всплывать.
   
8. Профит
   

Если отвечать на поставленный вопрос - то после текста должен идти слот под эту иконку.
Пустой div, у которого и будет этот background указан.
Таким образом, div всегда будет идти строго за текстом. Вы сможете задать ему отступ от текста, размеры, и прочие стили.

div а не span просто потому что span всё таки обёртка для текста. А иконка это не текст.

<div style="width: 100%; background-color: #fff;">
  <button style="width: 100%;height: 50px;">
    Зарегистрироваться
    <div style="background-size: 20px 20px;background-repeat: no-repeat; background-position: right 0 center;background-image: url(https://img2.freepng.ru/20180325/qaw/kisspng-email-computer-icons-clip-art-coin-5ab83d2671f511.2388637315220237184668.jpg);"></div>
  </button>
</div>

1. (Можно пропустить)Выделяете мышкой в инструментах разработчика в дереве элемент . Теперь он доступен в консоле через алиас $0
   
2. Сохраняете ссылку на видео элемент в переменную. (через $0 или поиск элемента)
   
3. Пишите функцию setInterval, в которой указываете v.currentTime = %секунда видео, которая вам нужна%
   
4. В интервале указываете период, который вас интересует.
   
5. Профит.
   

const v = $0 // или вместо $0 document.querySelector... - получить элемент video
let startTime = 15 // 15ая секунда видео - секунда, с которой будет начинаться цикл
let duration = 1000 // 1000 миллисекунд = 1 секунда - продолжительность цикла

const repeat = setInterval(function () {
  v.currentTime = startTime 
}, duration)

Капец у Вас тут каша конечно... var, let,const, разные подходы к объявлению переменных, то используйте dataset, то через getAttribute, то querySelector, то getBy* и куча не нужных циклов.

Переписал:

// helper functions
function linearInterpolate (from_range, to_range, val) {
    var minX = from_range[0],
        minY = to_range[0],
        rangeX = from_range[1] - from_range[0],
        rangeY = to_range[1] - to_range[0];

    return (val - minX) * rangeY / rangeX + minY;
}

function clamp (x, min, max) {
    if (x < min) {
		return min;
	}
	if (x > max) {
		return max;
	}
	return x; 
}

// constructor
function Gauge (elem, options) {
    var gaugeVal = elem.dataset.value
	var options = options || {},
		canvas = document.createElement('canvas'),
		value = options.value || 0;
	
	this.options = options;
	
	this.ctx = canvas.getContext("2d");
	this.width = options.width || 100;
	this.height = options.height || this.width;
	
	// readjust lineWidth based on radius
	if (options.radius) {
		this.lineWidth = (this.width / 2 - options.radius);
	} else {
		this.lineWidth = options.lineWidth || 4;
	}
	this.radius = (this.width - this.lineWidth) / 2;
	
	//set colors for chart
	if (gaugeVal < 50) {
		this.color = options.color || 'rgba(224, 99, 100, 1)';
	} else {
		this.color = options.color || 'rgba(43, 197, 132, 1)'
	};
	
	this.background = options.background || 'rgba(241, 244, 249, 1)';

	this.range = [0, 100];
	
	this.interpolate = linearInterpolate.bind(this, this.range, [Math.PI, 2*Math.PI]);
	
	canvas.width = this.width;
	canvas.height = this.height / 2;
	
	this.set( value );
		
	elem.appendChild( canvas );
}

// get/set methods
Gauge.prototype.get = function () {
	return this.value || 0;
};

Gauge.prototype.set = function (value) {
	var ctx = this.ctx,
		range = this.range,
		value = clamp(value, range[0], range[1]),
		drawArc = function () {
			ctx.beginPath();
			ctx.arc.apply(ctx, arguments);
			ctx.stroke();
			// bind all arguments except the end value
		}.bind(this, this.width / 2, this.height / 2, 
				this.radius,
				Math.PI);

	this.value = value;
	ctx.clearRect(0,0,this.width,this.height / 2);
	
	ctx.lineWidth = this.lineWidth;
	
	// background
	ctx.strokeStyle = this.background;
	drawArc( 2 * Math.PI );
	
	// foreground
	ctx.strokeStyle = this.color;
	drawArc( this.interpolate( value ) );
	
	// optional display value
	if (this.options.displayvalue && 
	   this.options.displayvalue !== 'false') {
		ctx.font = "bold " + this.lineWidth + "px Russia, Arial, sans-serif";
		if (gaugeVal < 50){
		ctx.fillStyle = "rgba(43, 197, 132, 1)";
			} else {
				ctx.fillStyle = 'rgba(224, 99, 100, 1)';
			}
		ctx.textAlign = "center";
		ctx.textBaseline = "top";
		ctx.fillText(value, this.width / 2, 0);
	}
};



// create instances/handlers
var gauges = document.querySelectorAll('.gauge');
var gaugeHtml = document.querySelectorAll('.gauge__value');


gaugeHtml.forEach(function(gaugeValue){
    const value = Number(gaugeValue.parentElement.dataset.value)
    gaugeValue.style.color = value > 50 ? 'rgba(43, 197, 132, 1)' : 'rgba(224, 99, 100, 1)';
})
// Инициализация
gauges.forEach(function(gauge){
    let gaugeVal = gauge.dataset.value;
    const gaugeValueElement = gauge.querySelector('.gauge__value')
    gaugeValueElement.textContent = gaugeVal;
    new Gauge(gauge, gauge.dataset)
})

Возвращает у вас судя по всему всегда this, а то что в скобках это так называемый side effect. Стороннее действие.
Тык

Ну у вас тут 2 варианта.

1) После addTask вызывать getAllTasks (2 запроса, но максимально актуальные данные)
2) в addTask делать не только post на сервер, но ещё и обновлять стэйт. (лучше конечно разделить на 2 функции, чтобы не нарушать принцип единственной ответственности)
то есть:

const addTask = async (event) => {
        event.preventDefault();

        await API.post("/tasks", {
            title: title
        });

        setTasks([...tasks, { title: title }])
    };

Однако, тут стоит учесть, что если Post запрос не пройдёт, а вы обновите стэйт, то данные будут не актуальные у пользователя. Таким образом, если ваше API.post возвращает промис, то стоит обновлять стэйт в .then(). Ну или через await

Дальше уже смотрите по ситуации что Вам больше подойдёт.

В зависимости от необходимой браузернйо поддержки у вас 2 варианта.

1 - более универсальный, но больше работы руками:
При загрузке документа находить в дереве ваш элемент с id=popup. Сохранить в переменную.
Добавлять обработчик скрола на документ и сверять текущий скролл и позицию элемента сверху от начала документа(тык и тык). Совпадает - вызываем модалку.

2 - более современный, но браузер сделает всё за вас:
Воспользоваться Intersection Observer
Суть ,в целом, та же. Указываете за каким элементом следить, указываете что следить нужно за появлением этого элемента во вьюпорте и указываете функцию обработчик этого события, в которой открываете модалку.

Вот пример кода на Intersection observer

var options = {
    root: null, // Не указываем = следим за областью вьюпорта.
    rootMargin: '0px', // отступы вокруг root
    threshold: 1.0
}
var callback = function(entries, observer) { 
    // Открываем модалку
};
var observer = new IntersectionObserver(callback, options);

/* Параметр threshold со значением 1.0 означает что функция будет вызвана при 100% пересечении объекта (за которым мы следим) с объектом root */


var target = document.querySelector('#popup'); // элемент, за которым будем следить.
observer.observe(target);

Профит

Так как код Вы скинули не полный, то и дебажить сложнее. У Вас тут явно не 338 строк кода, на которой показывает ошибку, плюс непонятно откуда берущаяся переменная в cloneDeep.

Поэтому на глаз: renderопределить как метод, а не как переменную?
https://ru.reactjs.org/docs/components-and-props.html

И сделать return из App

то есть

// Не так
render = () => {
// code...
}

// А так
render() {
// code...
}

// И так
function App() {
  return <DragAndDropSidebar/>
}

// Или так:
const App = <DragAndDropSidebar/>

https://www.cssscript.com/tag/scroll-animation/

Смотрите демки, выбирайте какой душе угодно.
Такое можно найти если не быть забаненым в гугле за 10 секунд.
Удивительно, но ищется по запросу : scroll content animation

Не совсем понятно что именно нужно подсветить.
• Если саму ссылку, на которую нужно нажать, то тут либо через css анимации(transition/keyframes), однако анимация будет зависеть от наличия конкретного состояния(наведение, focus и тд), либо же через JS. Суть та же, однако можно не зависеть от состояния, включать анимацию и выключать по таймеру. А так же есть дополнительные варианты, такие как обработчик нажатия на ссылку.
• Если цель ссылки, на которую она указывает, то тут, в целом, варианты те же. Однако, через css, например, это можно сделать воспользовавшись псевдоклассом :target htmlbook.ru/css/target, либо через js брать назначение ссылки, искать этот элемент по id и так же навешивать анимацию.

Пример на :target, то есть если нужно подсветить цель ссылки:

#one {
  color: blue;
  background-color: transparent;
}

#one:target {
// и другие параметры анимации - направление, длительность, задержка и тд. 
// в соответствии с css keyframes анимациями https://webref.ru/css/keyframes
  animation: blur 10s ease-in-out ... ;
}

@keyframes blur {
   // другие ключевые кадры
   50% {
     color: red;
     background-color: yellow;
   }
}

1. Целиком картинкой сделать фон(Плохой вариант)
   
2. Фоновый зелёный + через background-image задать этот круг(Должна быть отдельная картинка с этим кругом. Лучше svg) и правильно его спозиционировать с помощью соответствюущего свойства(background-position). Ваш вопрос разбирается в любой книжке про html\css, где есть глава про фоны.
   
3. Можно через радиальный градиент, как предлагали выше, однако учитывайте какая браузерная поддержка вам нужна. Работать будет не взеде.
   

Ну, испокон веков, когда юзер что-то менял в фильтрах, пагинации и тд то это сохранялось в гет параметрах урла.
Использование session\local storage тоже приемлемые варианты. Выбор как именно сделать зависит, скорее от ТЗ.
Но через параметры выглядит, как по мне, более правильным вариантом.

Итак, я представил что у Вас следующая html структура:

<div class="card__wrapper">
  <div class="card__wrapper_api-show">Бургер</div>
  <div class="card__wrapper_api">Скрытый див</div>
</div>
<div class="card__wrapper">
  <div class="card__wrapper_api-show">Бургер</div>
  <div class="card__wrapper_api">Скрытый див</div>
</div>
<div class="card__wrapper">
  <div class="card__wrapper_api-show">Бургер</div>
  <div class="card__wrapper_api">Скрытый див</div>
</div>

Если Вам не принципиально отслеживать клики только на тех card__wrapper_api-show, которые находятся в card__wrapper, то:
можно сделать так:

$(".card__wrapper_api-show").click(function() {
    $(this) // jquery элемент, на котором произошёл клик
      .next(".card__wrapper_api") // непосредственно следующий в разметке блок (если идут не друг за другом то можно применить nextAll
      .stop() // Ваш код.
      .animate(
        {
          right: "0"
        },
        500,
        function() {
           // Animation complete.
        }
      );
  });

Если принципиально, то модифицируйте селектор из примера выше на $('.card__wrapper .card__wrapper_api-show').

Более лучшей практикой считается использовать в подобном случае делегирование событий.
Обработчик должен быть на общем контейнере верхнего уровня, и смотреть на каком элементе произошёл клик.
Таким образом, заворачиваем всё в один контейнер, разметка примет вид:

<div class="cards">
  <div class="card__wrapper">
    <div class="card__wrapper_api-show">Бургер</div>
    <div class="card__wrapper_api">Скрытый див</div>
  </div>
  <div class="card__wrapper">
    <div class="card__wrapper_api-show">Бургер</div>
    <div class="card__wrapper_api">Скрытый див</div>
  </div>
  <div class="card__wrapper">
    <div class="card__wrapper_api-show">Бургер</div>
    <div class="card__wrapper_api">Скрытый див</div>
  </div>
</div>

А скрипт:

$(".cards").click(function(evt) {
    // Сохраняем элемент, на котором произошёл клик в jQuery обёртку
    const $element = $(evt.target);
     // проверяем, что элемент содержит класс api-show
    // и если содержит, то делаем что нам надо со следующим в разметке элементом .card__wrapper_api
    if($element.hasClass('.card__wrapper_api-show')){ 
       $element
       .next(".card__wrapper_api")
       .stop()
       .animate(
         {
          right: "0"
        },
        500,
        function() {
          // Animation complete.
         }
       );
    }
  });

Таким образом, у нас всего один обработчик кликов - лучше для производительности.

P.s. Так как песочницу Вы не предоставили, код на работоспособность не тестировался.

Да вариантов хоть отбавляй. Зависит от вашей фантазии.

Можно сделать из двух псевдоэлементов ::before, ::after, Задав правильное позиционирование, transform-rotate и border (или width\height + background-color).

Можно из одного (псевдо)элемента. Делайте квадратик, задаёте границу с двух смежных сторон, а не полную - профит. В этом случае может не получиться полного красивого скругления всех углов стрелочки.

Можно жёстко задать размер блока, скрыть overflow, запихнуть внутрь блока букву "К" и подобрать соответствующий размер шрифта, чтобы осталась видна только такая вот "стрелочка" :-D

SVG\Canvas не предлагаю т.к. тэг CSS :-)

Instance - Это экземпляр.
Используя A instanceof B, Вы как бы спрашиваете: является ли А экземпляром класса B?
Классов у нас нет, но есть прототипное наследование и функции-консструкторы взамен.

Экземпляр возвращается конструктором через new неявно, или же если в конструкторе Вы строго укажите какой объект, в качестве экземпляра, будет возвращён.

В примере же указано что функция-конструктор должна возвращать себя же.
Таким образом, фукнция - не экземпляр самой себя.
Отсюда и new F() instanceof F - false;

Но!
Функции в JS являются экземплярами класса Function.
А в примере, как уже писалось выше, функция конструтор возвращает саму себя, следовательно, возвращает объект-экземпляр клаcса Function.
Отсюда и new F() instanceof Function - true;

Предположу, что Вам нужно скриптом скопировать "AZE KING" и отправить это запросом.
В таком случае,
• на основе предоставленной информации;
• а так же при условии, что в нике игрока не может быть запятых;
• у каждого игрока есть уровень, который отделяется от ника запятой;
предложу слудющее:

var playerInfo = document.querySelector('.win').textContent.trim(); // AZE KING, 47 уровень
var playerName = playerInfo.slice(0, playerInfo.indexOf(',')) // AZE KING;
var url = "site.com/add.php?name=" + playerName;

var req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);

Можно переделать на:

// И сделать это массивом. Удобно, если дальше нужно так же что-то делать с уровнем или будут ещё другие параметры игрока через запятую.
var playerInfo = document.querySelector('.win').textContent.trim().split(','); // ['AZE KING', '47 уровень']
var playerName = playerInfo[0] // AZE KING;
var url = "site.com/add.php?name=" + playerName;

var req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);

Исходя из JS кода, а так же Ваших пояснений в комментариях к вопросу, предлагаю переоформить Ваше решение следующим образом:

• Скрываем css`ом все .lvl2
  
• Было бы так же хорошо поместить все .list в отдельный контейнер, чтобы не слушать весь документ. Если это возможно, конечно.
  
• Переписываем js слудующим образом:
  

$('.list-container').on('click', '.list', listClickHandler);

function listClickHandler(){
  $(this).next('.lvl2').slideToggle(); // this - элемент, на котором произошёл клик. Соответственно $(this) - его jQuery версия
}

.next()
.slideToggle()