Add TaskHub dashboard modal and button group styles

Introduces new modal and button group styles for TaskHub, adds a Dashboard button and dashboard parameter tiddler, and removes the Scheduled button. Also updates VS Code settings to include the 'wikify' plugin.

Author: dongrentianyu

.vscode/settings.json

@@ -45,6 +45,7 @@
     "transclude",
     "transcludeinline",
     "unixtime",
+    "wikify",
     "yaisog"
   ]
 }

src/taskhub/styles/TH-modal-css.tid

@@ -0,0 +1,37 @@
+tags: $:/tags/Stylesheet
+title: $:/plugins/mabuqian/TaskHub/styles/TH-modal-css
+
+.TH-modal-css .tc-modal,
+.TH-modal-css .tc-modal-header,
+.TH-modal-css .tc-modal-body,
+.TH-modal-css .tc-modal-footer {
+  border: none;
+  background-color: #FAFAFA;
+}.TH-modal-css .tc-modal-header {
+	border-radius: 10px 10px 0 0;
+}.TH-modal-css .tc-modal {
+	border-radius: 10px;
+}.TH-modal-css .tc-modal-footer {
+	border-radius: 0 0 10px 10px;
+}@media (max-width: 500px) {
+.TH-modal-css .tc-modal {
+	width: 95% !important;
+}
+}.TH-modal-css .tc-modal-backdrop {
+  cursor: pointer;
+}
+.TH-modal-css .tc-modal {
+  width: 85vw !important;
+	height: 75vh;
+	top: 45% !important;
+	bottom: 20%;
+	max-height: 80vh;
+  border-radius: 10px;
+}.TH-modal-css .tc-modal-footer {
+  display: none;
+}@media (min-width: 55em) {
+.TH-modal-css .tc-modal-body {
+        overflow-y: auto;
+        max-height: 75vh;
+    }
+}

src/taskhub/styles/TH-nice-button-group.tid

@@ -0,0 +1,29 @@
+tags: $:/tags/Stylesheet
+title: $:/plugins/mabuqian/TaskHub/styles/TH-nice-button-group
+
+.TH-nice-button-group {
+    position: fixed;
+    display: flex; /* 使用flexbox布局 */
+    justify-content: space-between; /* 在空间中均匀分布 */
+    width: 80vw;
+    top: 7%;
+}
+.TH-nice-button {
+    cursor: pointer;
+    padding: 10px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    text-align: center; /* 文本居中 */
+    flex: 1; /* 每个选项占据相等的空间 */
+    margin: 0 5px; /* 选项之间的间距 */
+    display: inline-block;
+    background: white; /* 默认背景颜色 */
+    color: black;
+    border: none;
+    font-size: 16px;
+}
+.TH-nice-button-content {
+    margin-top: 1cm;
+    overflow: auto;
+    height: 400px;
+}

src/taskhub/ui/buttons/Dashboard.tid

@@ -0,0 +1,18 @@
+description: Show TaskHub dashboard
+tags: $:/tags/PageControls
+title: $:/plugins/mabuqian/TaskHub/ui/buttons/Dashboard
+
+\procedure lingo-base() $:/language/TaskHub/
+
+<$button class=<<tv-config-toolbar-class>>>
+  <$action-sendmessage $message="tm-modal" $param="$:/plugins/mabuqian/TaskHub/ui/dashboard/Dashboard/param" />
+  <%if [{$:/state/TaskHub/projects-and-schedule}length[]compare:number:lteq[1]] %>
+  <$action-setfield $tiddler="$:/state/TaskHub/projects-and-schedule" text={{$:/config/TaskHub/DefaultDashboardTab}} />
+  <%endif%>
+  <%if [<tv-config-toolbar-icons>match[yes]] %>
+  {{$:/plugins/mabuqian/TaskHub/images/calendar}}
+  <%endif%>
+  <%if [<tv-config-toolbar-text>match[yes]] %>
+  <span class="tc-btn-text"><<lingo TodaysTodos>></span>
+  <%endif%>
+</$button>

src/taskhub/ui/buttons/Scheduled.tid

@@ -0,0 +1,23 @@
+title: $:/plugins/mabuqian/TaskHub/ui/dashboard/Dashboard/param
+class: TH-modal-css tc-modal-centered
+code-body: yes
+subtitle: <div class="TH-right-aligned"><$link to="$:/plugins/mabuqian/TaskHub/doc/Help">{{$:/plugins/mabuqian/TaskHub/images/info}} <<lingo Help>></$link></div>
+mask-closable: yes
+
+<$let dashboardValue={{{ [[$:/state/TaskHub/projects-and-schedule]get[text]else{$:/config/TaskHub/DefaultDashboardTab}] }}} >
+  <div class="TH-nice-button-group" >
+    <$list filter="[all[tiddlers+shadows]tag[$:/plugins/mabuqian/TaskHub/tags/dashboard]sortby{$:/plugins/mabuqian/TaskHub/tags/dashboard!!list}]" variable="thisTitle">
+    <$button class="TH-nice-button">
+    <$action-setfield $tiddler="$:/state/TaskHub/projects-and-schedule" text=<<thisTitle>>/>
+    <%if [<thisTitle>has[caption]] %>
+    <$transclude $tiddler=<<thisTitle>> $field="caption"/>
+    <%else%>
+    <<thisTitle>>
+    <%endif%>
+    </$button>
+    </$list>
+  </div>
+  <div class="TH-nice-button-content" >
+    <$transclude tiddler=<<dashboardValue>> mode="block"/>
+  </div>
+</$let>