feat: Add database management, system views, and CI improvements

.eslintrc.cjs

@@ -20,5 +20,16 @@ module.exports = {
   rules: {
     'vue/multi-word-component-names': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    'vue/max-attributes-per-line': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/html-self-closing': ['warn', {
+      html: { void: 'any', normal: 'always', component: 'always' },
+      svg: 'always',
+      math: 'always',
+    }],
+    'vue/attributes-order': 'off',
+    'vue/require-default-prop': 'off',
+    'vue/use-v-on-exact': 'off',
   },
 };

.github/workflows/ci.yml

@@ -0,0 +1,73 @@
+name: CI
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npm run lint
+
+      - name: Check formatting
+        run: npm run format:check
+
+  type-check:
+    name: Type Check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run type check
+        run: npm run type-check
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    needs: [lint, type-check]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: dist/
+          retention-days: 7

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "vueIndentScriptAndStyle": false
+}

package.json

@@ -14,9 +14,11 @@
     "dev": "vite",
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
     "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write src/"
+    "format": "prettier --write src/",
+    "format:check": "prettier --check src/"
   },
   "dependencies": {
     "@codemirror/lang-yaml": "^6.1.2",

src/App.vue

@@ -17,9 +17,7 @@ import ToastNotifications from "@/components/ToastNotifications.vue";
 }
 
 body {
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
   background-color: #f8fafc;
   color: #1e293b;
 }

src/assets/design-system.css

@@ -72,9 +72,7 @@
   --space-12: 3rem;
 
   /* Typography */
-  --font-sans:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-    sans-serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
   --font-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace;
 
   --text-xs: 0.6875rem;

src/components/ConfirmModal.vue

@@ -1,11 +1,7 @@
 <template>
   <Teleport to="body">
     <Transition name="modal">
-      <div
-        v-if="visible"
-        class="modal-overlay"
-        @click.self="!loading && emit('cancel')"
-      >
+      <div v-if="visible" class="modal-overlay" @click.self="!loading && emit('cancel')">
         <div class="confirm-modal" :class="variant">
           <div class="modal-header">
             <div class="header-icon" :class="variant">
@@ -18,11 +14,7 @@
             <p v-if="warning" class="warning-text">{{ warning }}</p>
           </div>
           <div class="modal-footer">
-            <button
-              class="btn btn-secondary"
-              :disabled="loading"
-              @click="emit('cancel')"
-            >
+            <button class="btn btn-secondary" :disabled="loading" @click="emit('cancel')">
               {{ cancelText }}
             </button>
             <button
@@ -60,7 +52,7 @@ const props = withDefaults(
     confirmText: "Confirm",
     cancelText: "Cancel",
     loading: false,
-  }
+  },
 );
 
 const emit = defineEmits<{