Add label list component

source/Panel/LabelList/LabelList.scss

@@ -1,3 +1,4 @@
+@import "../../Component/Theme/Theme.scss";
 
 div.label-list-command-bar {
     width: 100%;
@@ -15,4 +16,18 @@ div.label-list-command-bar {
         user-select: none;
         cursor: pointer;
     }
+}
+
+div.dark.label-list-command-bar {
+
+    div.command-item:hover {
+        background-color: $lt-bg-color-lvl3-dark;
+    }
+}
+
+div.light.label-list-command-bar {
+
+    div.command-item:hover {
+        background-color: $lt-bg-color-lvl3-light;
+    }
 }

source/Panel/LabelList/LabelList.tsx

@@ -1,15 +1,23 @@
 import { Theme } from "@Component/Theme/Theme";
+import { LabelList as LabelListComponent } from "@Component/LabelList/LabelList";
 import { Component } from "react";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { Label } from "@Model/Label";
 import "./LabelList.scss";
 
 interface ILabelListProps {
 
 }
 
-class LabelList extends Component<ILabelListProps> {
+@useStatusWithEvent("labelChange")
+class LabelList extends Component<ILabelListProps & IMixinStatusProps> {
     
     public render() {
-        return <Theme>LabelList</Theme>
+        let labels: Label[] = [];
+        if (this.props.status) {
+            labels = this.props.status.model.labelPool.concat([]);
+        }
+        return <LabelListComponent labels={labels} canDelete/>
     }
 }
 

source/Panel/LabelList/LabelListCommand.tsx

@@ -1,23 +0,0 @@
-import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme";
-import { Icon } from "@fluentui/react";
-import { Component } from "react";
-import "./LabelList.scss";
-
-interface ILabelListCommandProps {}
-
-class LabelListCommand extends Component<ILabelListCommandProps> {
-    
-    public render() {
-        return <Theme
-            className="label-list-command-bar"
-            backgroundLevel={BackgroundLevel.Level4}
-            fontLevel={FontLevel.normal}
-        >
-            <div className="command-item">
-                <Icon iconName="Tag"></Icon>
-            </div>
-        </Theme>
-    }
-}
-
-export { LabelListCommand };

source/Panel/Panel.tsx

@@ -6,7 +6,6 @@ import { ObjectList } from "./ObjectList/ObjectList";
 import { ObjectCommand } from "./ObjectList/ObjectCommand";
 import { RangeDetails } from "./RangeDetails/RangeDetails";
 import { LabelList } from "./LabelList/LabelList";
-import { LabelListCommand } from "./LabelList/LabelListCommand";
 
 interface IPanelInfo {
 	nameKey: string;
@@ -41,7 +40,7 @@ PanelInfoMap.set("RangeDetails", {
 })
 PanelInfoMap.set("LabelList", {
     nameKey: "Panel.Title.Label.List.View", introKay: "Panel.Info.Label.List.View",
-    class: LabelList, header: LabelListCommand, hidePadding: true
+    class: LabelList
 })
 
 function getPanelById(panelId: PanelId): ReactNode {