Add setting to options page

src/components/CustomListItem.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  value: string;
+}>();
+
+const emits = defineEmits<{
+  (event: "update:value", newValue: string): void;
+}>();
+</script>
+
+<template>
+  <div class="rounded border divide-y">
+    <div class="py-2 px-2.5 font-bold"><slot /></div>
+
+    <textarea
+      class="font-mono p-2 w-full resize-y m-0 outline-none -mb-1 min-h-[5rem]"
+      :placeholder="'Enter glob patterns:\n*.lock\n**/vendor/**'"
+      :value="value"
+      @input="
+        emits('update:value', ($event.target as HTMLTextAreaElement).value)
+      "
+    />
+  </div>
+</template>

src/components/CustomListsPref.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { CustomLists } from "../utils/storage";
+import CustomListItem from "./CustomListItem.vue";
+
+const props = defineProps<{
+  customLists: CustomLists;
+}>();
+
+const emits = defineEmits<{
+  (event: "update:customLists", newValue: CustomLists): void;
+}>();
+
+const customLists = useVModel(props, "customLists", emits);
+const all = computed({
+  get() {
+    return customLists.value.all;
+  },
+  set(newAll) {
+    customLists.value = {
+      ...customLists.value,
+      all: newAll,
+    };
+  },
+});
+</script>
+
+<template>
+  <li class="flex flex-col gap-4">
+    <!-- Header -->
+    <div class="flex flex-col gap-2">
+      <p class="font-medium text-base-content text-lg">Custom Lists</p>
+      <p class="text-base">
+        Use
+        <a
+          class="link link-secondary"
+          href="https://github.com/isaacs/minimatch#features"
+          target="_blank"
+          >minimatch</a
+        >
+        glob patterns to mark files as generated accross all repos.
+      </p>
+    </div>
+
+    <!-- All Repos -->
+    <CustomListItem v-model:value="all">All Repos</CustomListItem>
+  </li>
+</template>

src/components/OptionsForm.vue

@@ -1,32 +1,42 @@
 <script lang="ts" setup>
 import TokenPref from "./TokenPref.vue";
 import ShowGeneratedCountPref from "./ShowGeneratedCountPref.vue";
-import { extensionStorage } from "../utils/storage";
+import CustomListsPref from "./CustomListsPref.vue";
+import { CustomLists, extensionStorage } from "../utils/storage";
 
-const { state, hasChanges, reset, saveChanges } = useForm(
+const { state, hasChanges, reset, saveChanges } = useForm<{
+  hideGeneratedLineCount: boolean;
+  githubPat: string;
+  customLists: CustomLists;
+}>(
   {
     hideGeneratedLineCount: !!(await extensionStorage.getItem(
       "hideGeneratedLineCount",
     )),
     githubPat: (await extensionStorage.getItem("githubPat")) ?? "",
+    // This value is set when extension is installed.
+    customLists: (await extensionStorage.getItem("customLists"))!,
   },
   async (newState) => {
     await extensionStorage.setItem(
       "hideGeneratedLineCount",
       newState.hideGeneratedLineCount,
     );
     await extensionStorage.setItem("githubPat", newState.githubPat);
+    await extensionStorage.setItem("customLists", newState.customLists);
   },
 );
 </script>
 
 <template>
-  <form class="flex flex-col gap-4 pb-20" @submit.prevent="saveChanges">
+  <form class="flex flex-col gap-8 pb-20" @submit.prevent="saveChanges">
     <TokenPref v-model:github-pat="state.githubPat" />
     <ShowGeneratedCountPref
       v-model:hide-generated-line-count="state.hideGeneratedLineCount"
     />
 
+    <CustomListsPref v-model:custom-lists="state.customLists" />
+
     <div
       class="fixed inset-x-0 bottom-0 bg-base-100 flex gap-4 p-4 border-t border-neutral border-opacity-10"
     >