ui: SelectButton on ProofKind

Author: zjp-CN

ui/app/components/Kani.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { ofetch } from "ofetch";
-import { URL_MERGE_DIFF, MergeKaniColumns, multiSort, type VecMergeHashKaniList, FILTERS, ProofKind } from "~/shared/utils/kani";
-import { useStyleStore } from "~/stores/style";
+import type { SelectButtonPassThroughMethodOptions } from "primevue";
+import { URL_MERGE_DIFF, MergeKaniColumns, multiSort, type VecMergeHashKaniList, FILTERS, ProofKind, optionsProofKind } from "~/shared/utils/kani";
+import { useDarkStore, useStyleStore } from "~/stores/style";
 
 // Compute absolute scrollHeight for DataTable.
-const { viewportHeight } = storeToRefs(useStyleStore());
+const { color, viewportHeight } = storeToRefs(useStyleStore());
+const { fontColor } = storeToRefs(useDarkStore());
 
 const raw = ref<VecMergeHashKaniList>([]);
 // Download JSON
@@ -23,6 +25,8 @@ const counts = computed<{ total: number, standard: number, contract: number }>((
     raw.value.filter(ele => ele.proof_kind === ProofKind.Contract).length,
 }));
 
+const selectedProofKind = ref<string[]>([]);
+watch(selectedProofKind, val => console.log(val));
 
 // Set title
 useHead({ title: "Verify Rust Std - Kani" });
@@ -37,7 +41,18 @@ useHead({ title: "Verify Rust Std - Kani" });
 
     <template #header>
       <div class="flex justify-between items-center">
-        <div>
+        <div class="flex justify-between items-center gap-1">
+          Proof Kind:
+          <SelectButton v-model="selectedProofKind" :options="optionsProofKind" :option-label="x => x" multiple :pt="{
+            pcToggleButton: {
+              content: (opt: SelectButtonPassThroughMethodOptions) => ({
+                style: {
+                  background: opt.context.active ? color.green : 'transparent',
+                  color: fontColor
+                }
+              })
+            }
+          }" />
         </div>
         <div>
           <IconField>

ui/app/layouts/default.vue

@@ -1,18 +1,23 @@
 <script setup lang="ts">
+import { useDarkStore } from '~/stores/style';
 
 const CLASS_DARK = "my-app-dark";
 const KEY = "theme";
 const DARK = "dark";
 
 const dark = ref(false);
+const storeDark = useDarkStore();
 
 function toggleTheme() {
   const isDark = document.documentElement.classList.toggle(CLASS_DARK);
   dark.value = isDark;
+  storeDark.setFontColor(isDark);
   localStorage.setItem(KEY, isDark ? DARK : "light");
 }
 
-if (localStorage.getItem(KEY) === DARK) {
+const isInitDark = localStorage.getItem(KEY) === DARK;
+storeDark.setFontColor(isInitDark);
+if (isInitDark) {
   document.documentElement.classList.add(CLASS_DARK);
   dark.value = true;
 }

ui/app/shared/utils/kani.ts

@@ -59,3 +59,5 @@ export const FILTERS = {
   },
   fields: ["file", "func"]
 };
+
+export const optionsProofKind: string[] = [ProofKind.Standard, ProofKind.Contract];

ui/app/stores/style.ts

@@ -1,7 +1,7 @@
 export const useStyleStore = defineStore("style", () => {
   const color = reactive({
     green: "green", red: "red", grey: "grey",
-    topButton: "white", orange: "orange", orange_light: "orange",
+    primary: "white", orange: "orange", orange_light: "orange",
   });
   const viewportHeight = ref(800);
 
@@ -10,10 +10,10 @@ export const useStyleStore = defineStore("style", () => {
     const styles = window.getComputedStyle(document.documentElement);
 
     // Set color shortcuts.
-    color.green = styles.getPropertyValue("--p-emerald-500").trim();
+    color.green = styles.getPropertyValue("--p-emerald-300").trim();
     color.red = styles.getPropertyValue("--p-red-500").trim();
     color.grey = styles.getPropertyValue("--p-gray-400").trim();
-    color.topButton = styles.getPropertyValue("--p-button-primary-background").trim();
+    color.primary = styles.getPropertyValue("--p-button-primary-background").trim();
     color.orange_light = styles.getPropertyValue("--p-orange-400").trim();
     color.orange = styles.getPropertyValue("--p-orange-500").trim();
 
@@ -27,3 +27,12 @@ export const useStyleStore = defineStore("style", () => {
   return { color, viewportHeight }
 });
 
+/** Styling based on dark theme mode. */
+export const useDarkStore = defineStore('dark', {
+  state: () => ({ fontColor: "black" }),
+  actions: {
+    setFontColor(isDark: boolean) {
+      this.fontColor = isDark ? "grey" : "black"
+    }
+  }
+});