chore: upgrade and refactor the web client (#236)

* chore: upgrade dependencies

* refactor: fix issues after upgrading

* chore: introduce tailwind

* refactor: make the style more compact

* chore: update readme

* chore: add new screenshot

* chore: update screenshot

* chore: remove console.log

* chore: bump node and go versions

Author: ihexxa

.github/workflows/ci_build.yml

@@ -28,10 +28,10 @@ jobs:
       # Install runtimes
       - uses: actions/setup-go@v2
         with:
-          go-version: "^1.17.0"
+          go-version: "^1.23.0"
       - uses: actions/setup-node@v2
         with:
-          node-version: "12"
+          node-version: "18"
       - run: go version
       - name: Install dependencies
         run: |

README.md

@@ -3,7 +3,10 @@
 </h1>
 <p align="center">
   Quick and simple file sharing between different devices.
-  (<a href="https://github.com/ihexxa/quickshare/blob/main/docs/screenshots.md">Screenshots</a>)
+  (
+    <a href="https://github.com/ihexxa/quickshare/blob/main/docs/screenshots.md">Screenshots</a>&nbsp;|&nbsp;
+    <a href="https://github.com/ihexxa/quickshare/blob/main/docs/imgs/v0.9.1/quickshare_1920.gif">Demo</a>
+  )
 </p>
 <p align="center">
   <a href="https://github.com/ihexxa/quickshare/actions">
@@ -20,7 +23,7 @@
   </a>
 <p>
 
-<image src="./docs/imgs/v0.9.1/quickshare_1920.gif" title="preview">
+<image src="./docs/imgs/v0.11.0/newlook.png" title="preview">
 
 
 English | [简体中文](./docs/README_zh-cn.md)

docs/README_zh-cn.md

@@ -3,7 +3,10 @@
 </h1>
 <p align="center">
   简单的文件共享服务, 使用Go/Golang, Typescript, Gin, React, Boltdb等构建.
-  (<a href="https://github.com/ihexxa/quickshare/blob/main/docs/screenshots.md">界面截图</a>)
+  (
+    <a href="https://github.com/ihexxa/quickshare/blob/main/docs/screenshots.md">界面截图</a>&nbsp;|&nbsp;
+    <a href="https://github.com/ihexxa/quickshare/blob/main/docs/imgs/v0.9.1/quickshare_1920.gif">录频</a>
+  )
 </p>
 <p align="center">
   <a href="https://github.com/ihexxa/quickshare/actions">
@@ -20,7 +23,7 @@
   </a>
 <p>
 
-<image src="./imgs/v0.9.1/quickshare_1920.gif" title="preview">
+<image src="./imgs/v0.11.0/newlook.png" title="preview">
 
 [English](../README.md) | 简体中文
 

docs/imgs/v0.11.0/newlook.png

@@ -6,8 +6,9 @@
   "scripts": {
     "build:fe": "yarn && bash scripts/copy_js.sh && webpack --config src/client/web/webpack.app.prod.js",
     "build:fe:dev": "yarn && bash scripts/copy_js_dev.sh && webpack --config src/client/web/webpack.app.dev.js --watch",
-    "build:fe:watch": "yarn && bash scripts/copy_js.sh && webpack --config src/client/web/webpack.app.prod.js --watch",
+    "build:fe:prod": "yarn && bash scripts/copy_js.sh && webpack --config src/client/web/webpack.app.prod.js --watch",
     "start": "yarn build:fe && go run cmd/start/main.go -c `pwd`/configs/dev.yml",
+    "server:dev": "go run cmd/start/main.go -c `pwd`/configs/dev.yml",
     "build": "yarn build:fe && bash scripts/build_be.sh",
     "build:docker": "docker build . -f Dockerfile_default -t hexxa/quickshare:latest",
     "build:docker:heroku": "docker build . -t hexxa/quickshare:latest"

package.json

@@ -16,15 +16,21 @@
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.0.0",
+    "@tailwindcss/postcss": "^4.1.7",
     "@types/assert": "^1.4.2",
     "@types/deep-diff": "^1.0.0",
     "@types/jest": "^27.0.1",
     "@types/object-hash": "^2.2.1",
     "assert": "^2.0.0",
     "babel-loader": "^8.2.2",
+    "css-loader": "^7.1.2",
     "deep-diff": "^1.0.2",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^27.2.0",
+    "postcss": "^8.5.3",
+    "postcss-loader": "^8.1.1",
+    "style-loader": "^4.0.0",
+    "tailwindcss": "^4.1.7",
     "terser-webpack-plugin": "^5.2.4",
     "ts-jest": "^27.0.5",
     "ts-loader": "^9.2.8",

src/client/web/package.json

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  }
+}

src/client/web/postcss.config.mjs

@@ -5,6 +5,8 @@ import { StateMgr } from "./components/state_mgr";
 import { ErrorLogger } from "./common/log_error";
 import { errCorsScript } from "./common/errors";
 
+import './style/tailwind.css';
+
 window.onerror = (
   msg: string,
   source: string,

src/client/web/src/app.tsx

@@ -15,24 +15,29 @@ export const BtnList = (props: Props) => {
   const titleIcon =
     props.titleIcon != null ? (
       getIconWithProps(props.titleIcon, {
-        size: "3rem",
-        className: "major-font margin-r-m",
+        size: "1.8rem",
+        className: "major-font mr-4",
       })
     ) : (
       <span></span>
     );
 
   const btns = props.btnNames.map((btnName: string, i: number) => {
     const cb = props.btnCallbacks.get(i);
+    const isLast = i === props.btnNames.size - 1;
     return (
-      <button key={`rows-${i}`} className="inline-block margin-r-m button-default" onClick={cb}>
+      <button
+        key={`rows-${i}`}
+        className={`inline-block ${isLast ? "" : "mr-8"}`}
+        onClick={cb}
+      >
         {btnName}
       </button>
     );
   });
 
   return (
-    <div className="margin-b-l">
+    <div>
       <Flexbox
         children={List([titleIcon, <span>{btns}</span>])}
         childrenStyles={List([{ flex: "0 0 auto" }, { flex: "0 0 auto" }])}

src/client/web/src/components/control/btn_list.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
-import { Map } from "immutable";
+import { List, Map } from "immutable";
 
 import { updater } from "../state_updater";
 import { ICoreState, MsgProps, UIProps } from "../core_state";
 import { Env } from "../../common/env";
 import { IconProps, getIcon } from "../visual/icons";
 import { colorClass } from "../visual/colors";
+import { Flexbox } from "../layout/flexbox";
 
 const defaultIconProps: IconProps = {
   name: "RiFolder2Fill",
@@ -52,19 +53,19 @@ export class Tabs extends React.Component<Props, State, {}> {
 
       const iconColor = displaying === option ? iconProps.color : "normal";
       const icon = getIcon(iconProps.name, iconProps.size, iconColor);
-      const fontColor =
-        displaying === option ? `${colorClass(iconColor)}-font` : "normal-font";
+      const fontWeight =
+        displaying === option ? `font-bold` : "";
 
       return (
         <button
           key={`${this.props.targetControl}-${option}`}
           onClick={() => {
             this.setTab(this.props.targetControl, option);
           }}
-          className="float-l margin-r-m minor-bg"
+          className="float-left mr-12"
         >
-          <div className="float-l icon-s margin-r-s">{icon}</div>
-          <div className={`float-l font-xs ${fontColor}`}>
+          <div className="float-left icon-s margin-r-s">{icon}</div>
+          <div className={`float-left font-xs ${fontWeight}`}>
             {this.props.msg.pkg.get(
               `control.${this.props.targetControl}.${option}`
             )}
@@ -75,10 +76,21 @@ export class Tabs extends React.Component<Props, State, {}> {
     });
 
     return (
-      <div className={`tabs control-${this.props.targetControl}`}>
-        {tabs}
-        <div className="fix"></div>
-      </div>
+      <Flexbox
+        children={List([
+          <div className={`tabs control-${this.props.targetControl}`}>
+            {tabs}
+            <div className="fix"></div>
+          </div>,
+          <a href="//github.com/ihexxa/quickshare" className="major-font">
+            {getIcon("FaGithub", "2rem", "normal")}
+          </a>,
+        ])}
+        childrenStyles={List([
+          { flex: "0 0 auto" },
+          { justifyContent: "flex-end" },
+        ])}
+      />
     );
   }
 }