improve select components (#147)

* improve select components

* improve path

src/components/asset-change/index.tsx → src/components/asset-change.tsx

@@ -1,9 +1,9 @@
 import { Line } from "react-chartjs-2";
-import { useWindowSize } from "../../utils/hook";
-import { timestampToDate } from "../../utils/date";
-import { AssetChangeData, CurrencyRateDetail } from "../../middlelayers/types";
+import { useWindowSize } from "@/utils/hook";
+import { timestampToDate } from "@/utils/date";
+import { AssetChangeData, CurrencyRateDetail } from "@/middlelayers/types";
 import _ from 'lodash'
-import { currencyWrapper } from '../../utils/currency'
+import { currencyWrapper } from '@/utils/currency'
 
 const App = ({
   data,

src/components/coins-amount-and-value-change/index.tsx → src/components/coins-amount-and-value-change.tsx

@@ -1,15 +1,16 @@
 import _ from "lodash";
+import React from "react";
 import { useEffect, useState } from "react";
 import { Line } from "react-chartjs-2";
-import { useWindowSize } from "../../utils/hook";
-import { timestampToDate } from "../../utils/date";
+import { useWindowSize } from "@/utils/hook";
+import { timestampToDate } from "@/utils/date";
 import {
   CoinsAmountAndValueChangeData,
   CurrencyRateDetail,
-} from "../../middlelayers/types";
-import Select from "../common/select";
-import { currencyWrapper } from "../../utils/currency";
-import { ButtonGroup, ButtonGroupItem } from "../ui/button-group";
+} from "@/middlelayers/types";
+import { currencyWrapper } from "@/utils/currency";
+import { ButtonGroup, ButtonGroupItem } from "./ui/button-group";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from './ui/select'
 
 const prefix = "caaavc";
 
@@ -141,11 +142,23 @@ const App = ({
         </ButtonGroup>
         <div className="ml-5 mt-1">
           <Select
-            height={34}
-            options={data.map((d) => ({ value: d.coin, label: d.coin }))}
-            onSelectChange={onCoinSelectChange}
+            onValueChange={onCoinSelectChange}
             value={currentCoinSelected}
-          />
+          >
+            <SelectTrigger className="w-[120px]">
+              <SelectValue placeholder="Select Coin" />
+            </SelectTrigger>
+            <SelectContent className="overflow-y-auto max-h-[20rem]">
+              <SelectGroup>
+                <SelectLabel>Coins</SelectLabel>
+                {data.map((d) => (
+                  <SelectItem key={d.coin} value={d.coin}>
+                    {d.coin}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
         </div>
       </div>
       <div

src/components/comparison/index.tsx

@@ -6,7 +6,6 @@ import {
   queryCoinDataById,
 } from "../../middlelayers/charts";
 import _ from "lodash";
-import Select from "../common/select";
 import viewIcon from "../../assets/icons/view-icon.png";
 import hideIcon from "../../assets/icons/hide-icon.png";
 import {
@@ -16,6 +15,15 @@ import {
 import { useWindowSize } from "../../utils/hook";
 import { parseDateToTS } from "../../utils/date";
 import { ButtonGroup, ButtonGroupItem } from "../ui/button-group";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
 
 type ComparisonData = {
   name: string;
@@ -353,22 +361,38 @@ const App = ({ currency }: { currency: CurrencyRateDetail }) => {
         </div>
         <div className="grid grid-cols-6 gap-4 mb-5">
           <div className="col-start-2 col-end-4">
-            <Select
-              id="base"
-              options={dateOptions}
-              onSelectChange={(v) => onBaseSelectChange(v)}
-              value={"" + baseId}
-              width={150}
-            />
+            <Select onValueChange={onBaseSelectChange} value={baseId}>
+              <SelectTrigger className="w-[150px]">
+                <SelectValue placeholder="Select Base Date" />
+              </SelectTrigger>
+              <SelectContent className="overflow-y-auto max-h-[20rem]">
+                <SelectGroup>
+                  <SelectLabel>Base Dates</SelectLabel>
+                  {dateOptions.map((d) => (
+                    <SelectItem key={d.value} value={d.value}>
+                      {d.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
           </div>
           <div className="col-end-7 col-span-2">
-            <Select
-              id="head"
-              options={dateOptions}
-              onSelectChange={(v) => onHeadSelectChange(v)}
-              value={"" + headId}
-              width={150}
-            />
+            <Select onValueChange={onHeadSelectChange} value={headId}>
+              <SelectTrigger className="w-[150px]">
+                <SelectValue placeholder="Select Head Date" />
+              </SelectTrigger>
+              <SelectContent className="overflow-y-auto max-h-[20rem]">
+                <SelectGroup>
+                  <SelectLabel>Head Dates</SelectLabel>
+                  {dateOptions.map((d) => (
+                    <SelectItem key={d.value} value={d.value}>
+                      {d.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
           </div>
         </div>
         {_(data).isEmpty() ? (

src/components/configuration/index.tsx → src/components/configuration.tsx

@@ -3,16 +3,15 @@ import { useContext, useEffect, useMemo, useState } from "react";
 import {
   getConfiguration,
   saveConfiguration,
-} from "../../middlelayers/configuration";
+} from "../middlelayers/configuration";
 import { toast } from "react-hot-toast";
-import deleteIcon from "../../assets/icons/delete-icon.png";
-import { GlobalConfig, TokenConfig } from "../../middlelayers/datafetch/types";
-import { LoadingContext } from "../../App";
-import { CurrencyRateDetail } from "../../middlelayers/types";
-import { listAllCurrencyRates } from "../../middlelayers/currency";
-import { Separator } from "../ui/separator";
-import { Checkbox } from "../ui/checkbox";
-import { Label } from "../ui/label";
+import deleteIcon from "@/assets/icons/delete-icon.png";
+import { GlobalConfig, TokenConfig } from "../middlelayers/datafetch/types";
+import { CurrencyRateDetail } from "../middlelayers/types";
+import { listAllCurrencyRates } from "../middlelayers/currency";
+import { Separator } from "./ui/separator";
+import { Checkbox } from "./ui/checkbox";
+import { Label } from "./ui/label";
 import {
   Select,
   SelectContent,
@@ -21,8 +20,8 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from "../ui/select";
-import { Button } from "../ui/button";
+} from "./ui/select";
+import { Button } from "./ui/button";
 import {
   Dialog,
   DialogContent,
@@ -31,9 +30,9 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "../ui/dialog";
-import { Input } from "../ui/input";
-import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+} from "./ui/dialog";
+import { Input } from "./ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 import React from "react";
 
 const initialConfiguration: GlobalConfig = {
@@ -126,7 +125,6 @@ const Configuration = ({
 }: {
   onConfigurationSave?: () => void;
 }) => {
-  const { setLoading } = useContext(LoadingContext);
   const [groupUSD, setGroupUSD] = useState(true);
   const [querySize, setQuerySize] = useState(0);
   const [formChanged, setFormChanged] = useState(false);
@@ -210,7 +208,6 @@ const Configuration = ({
   }
 
   function loadConfiguration() {
-    setLoading(false);
     getConfiguration()
       .then((d) => {
         const globalConfig = d ?? initialConfiguration;
@@ -257,8 +254,7 @@ const Configuration = ({
       })
       .catch((e) => {
         toast.error("get configuration failed:", e);
-      })
-      .finally(() => setLoading(false));
+      });
   }
 
   function onGroupUSDSelectChange(v: boolean) {

src/components/data-management/index.tsx → src/components/data-management.tsx

@@ -2,7 +2,7 @@ import { toast } from "react-hot-toast";
 import {
   exportHistoricalData,
   importHistoricalData,
-} from "../../middlelayers/data";
+} from "@/middlelayers/data";
 import { useEffect, useState } from "react";
 
 import _ from "lodash";
@@ -17,20 +17,20 @@ import {
   signIn,
   signOut,
   syncAssetsToCloudAndLocal,
-} from "../../middlelayers/cloudsync";
-import { timestampToDate } from "../../utils/date";
-import { trackEventWithClientID } from "../../utils/app";
-import { Separator } from "../ui/separator";
-import { Checkbox } from "../ui/checkbox";
-import { Label } from "../ui/label";
-import { Button } from "../ui/button";
+} from "@/middlelayers/cloudsync";
+import { timestampToDate } from "@/utils/date";
+import { trackEventWithClientID } from "@/utils/app";
+import { Separator } from "./ui/separator";
+import { Checkbox } from "./ui/checkbox";
+import { Label } from "./ui/label";
+import { Button } from "./ui/button";
 import {
   ReloadIcon,
   UploadIcon,
   ExitIcon,
   EnterIcon,
 } from "@radix-ui/react-icons";
-import { Input } from "../ui/input";
+import { Input } from "./ui/input";
 
 const App = ({
   onDataImported,

src/components/historical-data/index.tsx

@@ -3,25 +3,25 @@ import {
   deleteHistoricalDataByUUID,
   deleteHistoricalDataDetailById,
   queryHistoricalData,
-} from "../../middlelayers/charts";
-import { CurrencyRateDetail, HistoricalData } from "../../middlelayers/types";
-import deleteIcon from "../../assets/icons/delete-icon.png";
+} from "@/middlelayers/charts";
+import { CurrencyRateDetail, HistoricalData } from "@/middlelayers/types";
+import deleteIcon from "@/assets/icons/delete-icon.png";
 import _ from "lodash";
 
 import "./index.css";
 import { toast } from "react-hot-toast";
-import { LoadingContext } from "../../App";
-import { timestampToDate } from "../../utils/date";
+import { LoadingContext } from "@/App";
+import { timestampToDate } from "@/utils/date";
 import {
   currencyWrapper,
   prettyNumberToLocaleString,
   prettyPriceNumberToLocaleString,
-} from "../../utils/currency";
+} from "@/utils/currency";
 import Modal from "../common/modal";
-import { downloadCoinLogos } from "../../middlelayers/data";
+import { downloadCoinLogos } from "@/middlelayers/data";
 import { appCacheDir as getAppCacheDir } from "@tauri-apps/api/path";
 import { convertFileSrc } from "@tauri-apps/api/tauri";
-import { useWindowSize } from "../../utils/hook";
+import { useWindowSize } from "@/utils/hook";
 import ImageStack from "../common/image-stack";
 
 type RankData = {

src/components/latest-assets-percentage/index.tsx → src/components/latest-assets-percentage.tsx

@@ -1,6 +1,6 @@
 import { Doughnut } from "react-chartjs-2";
-import { useWindowSize } from "../../utils/hook";
-import { LatestAssetsPercentageData } from "../../middlelayers/types";
+import { useWindowSize } from "@/utils/hook";
+import { LatestAssetsPercentageData } from "@/middlelayers/types";
 
 const App = ({ data }: { data: LatestAssetsPercentageData }) => {
   const size = useWindowSize();

src/components/top-coins-percentage-change/index.tsx → src/components/top-coins-percentage-change.tsx

@@ -1,13 +1,13 @@
 import { Line } from "react-chartjs-2";
-import { useWindowSize } from "../../utils/hook";
-import { timestampToDate } from "../../utils/date";
-import { TopCoinsPercentageChangeData } from "../../middlelayers/types";
+import { useWindowSize } from "@/utils/hook";
+import { timestampToDate } from "@/utils/date";
+import { TopCoinsPercentageChangeData } from "@/middlelayers/types";
 import { useRef, useState } from "react";
 import _ from "lodash";
 import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";
 import { BubbleDataPoint, Point } from "chart.js";
-import { legendOnClick } from "../../utils/legend";
-import { ButtonGroup, ButtonGroupItem } from "../ui/button-group";
+import { legendOnClick } from "@/utils/legend";
+import { ButtonGroup, ButtonGroupItem } from "./ui/button-group";
 
 const prefix = "tcpc";
 

src/components/top-coins-rank/index.tsx → src/components/top-coins-rank.tsx

@@ -1,12 +1,12 @@
 import { Line } from "react-chartjs-2";
-import { useWindowSize } from "../../utils/hook";
-import { timestampToDate } from "../../utils/date";
-import { TopCoinsRankData } from "../../middlelayers/types";
+import { useWindowSize } from "@/utils/hook";
+import { timestampToDate } from "@/utils/date";
+import { TopCoinsRankData } from "@/middlelayers/types";
 import { useRef } from "react";
 import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";
 import { BubbleDataPoint, Point } from "chart.js";
 import _ from "lodash";
-import { legendOnClick } from "../../utils/legend";
+import { legendOnClick } from "@/utils/legend";
 
 const App = ({ data }: { data: TopCoinsRankData }) => {
   const size = useWindowSize();

src/components/wallet-analyzer/index.tsx → src/components/wallet-analyzer.tsx

@@ -1,14 +1,14 @@
 import { useContext, useEffect, useState } from "react";
-import WalletAssetsPercentage from "../wallet-assets-percentage";
-import WalletAssetsChange from "../wallet-assets-change";
-import { LoadingContext } from "../../App";
+import WalletAssetsPercentage from "./wallet-assets-percentage";
+import WalletAssetsChange from "./wallet-assets-change";
+import { LoadingContext } from "@/App";
 import {
   CurrencyRateDetail,
   WalletAssetsChangeData,
   WalletAssetsPercentageData,
-} from "../../middlelayers/types";
-import { WALLET_ANALYZER } from "../../middlelayers/charts";
-import { Separator } from "../ui/separator";
+} from "@/middlelayers/types";
+import { WALLET_ANALYZER } from "@/middlelayers/charts";
+import { Separator } from "./ui/separator";
 
 const App = ({ currency }: { currency: CurrencyRateDetail }) => {
   const { setLoading } = useContext(LoadingContext);

src/components/wallet-assets-change/index.tsx → src/components/wallet-assets-change.tsx

@@ -2,12 +2,12 @@ import _ from "lodash";
 import {
   CurrencyRateDetail,
   WalletAssetsChangeData,
-} from "../../middlelayers/types";
+} from "@/middlelayers/types";
 import {
   currencyWrapper,
   prettyNumberToLocaleString,
-} from "../../utils/currency";
-import { insertEllipsis } from "../../utils/string";
+} from "@/utils/currency";
+import { insertEllipsis } from "@/utils/string";
 import {
   TableHead,
   TableRow,

src/components/wallet-assets-percentage/index.tsx → src/components/wallet-assets-percentage.tsx

@@ -1,13 +1,13 @@
 import { Bar } from "react-chartjs-2";
-import { useWindowSize } from "../../utils/hook";
+import { useWindowSize } from "@/utils/hook";
 import {
   CurrencyRateDetail,
   WalletAssetsPercentageData,
-} from "../../middlelayers/types";
-import { currencyWrapper, prettyNumberToLocaleString } from "../../utils/currency";
+} from "@/middlelayers/types";
+import { currencyWrapper, prettyNumberToLocaleString } from "@/utils/currency";
 import _ from "lodash";
 import { useEffect, useState } from "react";
-import { insertEllipsis } from '../../utils/string'
+import { insertEllipsis } from '@/utils/string'
 
 const App = ({
   data,