Add label details panel

source/Panel/LabelList/LabelList.scss

@@ -1,33 +1,8 @@
 @import "../../Component/Theme/Theme.scss";
 
-div.label-list-command-bar {
+div.label-list-panel-root {
     width: 100%;
-    height: 30px;
-    flex-shrink: 0;
-    display: flex;
-
-    div.command-item {
-        width: 30px;
-        height: 100%;
-        display: flex;
-        flex-shrink: 0;
-        justify-content: center;
-        align-items: center;
-        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;
-    }
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
 }

source/Panel/LabelList/LabelList.tsx

@@ -1,7 +1,7 @@
-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 { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { Label } from "@Model/Label";
 import "./LabelList.scss";
 
@@ -9,15 +9,48 @@ interface ILabelListProps {
 
 }
 
-@useStatusWithEvent("labelChange")
-class LabelList extends Component<ILabelListProps & IMixinStatusProps> {
+@useSetting
+@useStatusWithEvent("labelChange", "focusLabelChange")
+class LabelList extends Component<ILabelListProps & IMixinStatusProps & IMixinSettingProps> {
     
+    private labelInnerClick: boolean = false;
+
     public render() {
         let labels: Label[] = [];
         if (this.props.status) {
             labels = this.props.status.model.labelPool.concat([]);
         }
-        return <LabelListComponent labels={labels} canDelete/>
+        return <div
+            className="label-list-panel-root"
+            onClick={() => {
+                if (this.props.status && !this.labelInnerClick) {
+                    this.props.status.setLabelObject();
+                }
+                this.labelInnerClick = false;
+            }}
+        >
+            <LabelListComponent
+                canDelete
+                labels={labels}
+                focusLabel={this.props.status ? this.props.status.focusLabel : undefined}
+                clickLabel={(label) => {
+                    if (this.props.status) {
+                        this.props.status.setLabelObject(label);
+                    }
+                    if (this.props.setting) {
+                        this.props.setting.layout.focus("LabelDetails");
+                    }
+                    this.labelInnerClick = true;
+                }}
+                deleteLabel={(label) => {
+                    if (this.props.status) {
+                        this.props.status.model.deleteLabel(label);
+                        this.props.status.setLabelObject();
+                    }
+                    this.labelInnerClick = true;
+                }}
+            />
+        </div>;
     }
 }