new directory structure and oldmigrate (#327)

frontend/app/asset/dots-anim-4.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="12" width="12" viewBox="0 0 16 16">
+<title>dots anim 4</title>
+<g class="nc-icon-wrapper">
+<g class="nc-loop-dots-4-16-icon-f">
+<circle cx="3" cy="8" r="2"></circle>
+<circle cx="8" cy="8" r="2" data-color="color-2"></circle>
+<circle cx="13" cy="8" r="2"></circle>
+</g>
+<style>
+.nc-loop-dots-4-16-icon-f{--animation-duration:0.8s}
+.nc-loop-dots-4-16-icon-f *{opacity:.4;transform:scale(.75);animation:nc-loop-dots-4-anim var(--animation-duration) infinite}
+.nc-loop-dots-4-16-icon-f :nth-child(1){transform-origin:3px 8px;animation-delay:-.3s;animation-delay:calc(var(--animation-duration)/-2.666)}
+.nc-loop-dots-4-16-icon-f :nth-child(2){transform-origin:8px 8px;animation-delay:-.15s;animation-delay:calc(var(--animation-duration)/-5.333)}
+.nc-loop-dots-4-16-icon-f :nth-child(3){transform-origin:13px 8px}
+@keyframes nc-loop-dots-4-anim{0%,100%{opacity:.4;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}
+</style>
+</g>
+</svg>

frontend/app/block/block.less

@@ -174,6 +174,15 @@
                         overflow: hidden;
                         padding-right: 4px;
                     }
+
+                    .connecting-svg {
+                        position: relative;
+                        top: 5px;
+                        left: 9px;
+                        svg {
+                            fill: var(--warning-color);
+                        }
+                    }
                 }
 
                 .block-frame-textelems-wrapper {

frontend/app/block/blockutil.tsx

@@ -9,6 +9,7 @@ import * as util from "@/util/util";
 import clsx from "clsx";
 import * as jotai from "jotai";
 import * as React from "react";
+import DotsSvg from "../asset/dots-anim-4.svg";
 
 export const colorRegex = /^((#[0-9a-f]{6,8})|([a-z]+))$/;
 
@@ -225,11 +226,16 @@ export const ConnectionButton = React.memo(
             } else {
                 titleText = "Connected to " + connection;
                 let iconName = "arrow-right-arrow-left";
+                let iconSvg = null;
                 if (connStatus?.status == "connecting") {
                     color = "var(--warning-color)";
                     titleText = "Connecting to " + connection;
-                    iconName = "rotate";
-                    shouldSpin = true;
+                    shouldSpin = false;
+                    iconSvg = (
+                        <div className="connecting-svg">
+                            <DotsSvg />
+                        </div>
+                    );
                 } else if (connStatus?.status == "error") {
                     color = "var(--error-color)";
                     titleText = "Error connecting to " + connection;
@@ -242,12 +248,16 @@ export const ConnectionButton = React.memo(
                     titleText = "Disconnected from " + connection;
                     showDisconnectedSlash = true;
                 }
-                connIconElem = (
-                    <i
-                        className={clsx(util.makeIconClass(iconName, false), "fa-stack-1x")}
-                        style={{ color: color, marginRight: 2 }}
-                    />
-                );
+                if (iconSvg != null) {
+                    connIconElem = iconSvg;
+                } else {
+                    connIconElem = (
+                        <i
+                            className={clsx(util.makeIconClass(iconName, false), "fa-stack-1x")}
+                            style={{ color: color, marginRight: 2 }}
+                        />
+                    );
+                }
             }
 
             return (

frontend/types/gotypes.d.ts

@@ -36,6 +36,7 @@ declare global {
     type Client = WaveObj & {
         windowids: string[];
         tosagreed?: number;
+        historymigrated?: boolean;
     };
 
     // wshrpc.CommandAppendIJsonData