refactor: restructure project layout

- Move main process to electron/main/
- Move preload to electron/preload/
- Add shared types in electron/shared/
- Split redis-service into modular redis/ directory
- Flatten renderer to src/ (remove src/renderer/ nesting)
- Update electron.vite.config.ts paths
- Update tsconfig paths
- Output to electron-dist/

src/components/StatusView.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+// src/renderer/src/components/StatusView.vue
+import { ref, onMounted } from 'vue'
+import { useConnectionStore } from '@renderer/stores/connection'
+
+const connStore = useConnectionStore()
+const info = ref('')
+const dbSize = ref(0)
+
+interface InfoSection {
+  title: string
+  items: { key: string; value: string }[]
+}
+
+const sections = ref<InfoSection[]>([])
+
+function parseInfo(raw: string): InfoSection[] {
+  const result: InfoSection[] = []
+  let current: InfoSection | null = null
+
+  for (const line of raw.split('\n')) {
+    const trimmed = line.trim()
+    if (!trimmed || trimmed.startsWith('#')) {
+      if (trimmed.startsWith('#')) {
+        if (current) result.push(current)
+        current = { title: trimmed.slice(2), items: [] }
+      }
+      continue
+    }
+    const colonIdx = trimmed.indexOf(':')
+    if (colonIdx > 0 && current) {
+      current.items.push({
+        key: trimmed.slice(0, colonIdx),
+        value: trimmed.slice(colonIdx + 1),
+      })
+    }
+  }
+  if (current) result.push(current)
+  return result
+}
+
+async function refresh() {
+  if (!connStore.activeId) return
+  info.value = await connStore.getInfo()
+  sections.value = parseInfo(info.value)
+  dbSize.value = await window.electronAPI.redis.dbSize(connStore.activeId)
+}
+
+onMounted(refresh)
+
+defineExpose({ refresh })
+</script>
+
+<template>
+  <div class="status-view" v-if="connStore.activeConnection">
+    <div class="status-header">
+      <h2>{{ connStore.activeConnection.name }}</h2>
+      <el-button size="small" @click="refresh">Refresh</el-button>
+    </div>
+
+    <div class="info-grid">
+      <div class="info-card">
+        <div class="info-label">Database</div>
+        <div class="info-value">{{ connStore.activeConnection.host }}:{{ connStore.activeConnection.port }}</div>
+      </div>
+      <div class="info-card">
+        <div class="info-label">Keys</div>
+        <div class="info-value">{{ dbSize.toLocaleString() }}</div>
+      </div>
+    </div>
+
+    <div class="info-sections">
+      <div v-for="section in sections" :key="section.title" class="info-section">
+        <h3 class="section-title">{{ section.title }}</h3>
+        <div class="section-items">
+          <div v-for="item in section.items" :key="item.key" class="info-row">
+            <span class="info-key">{{ item.key }}</span>
+            <span class="info-val">{{ item.value }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.status-view {
+  padding: 20px;
+  height: 100%;
+  overflow: auto;
+}
+
+.status-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.status-header h2 {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--accent-light);
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.info-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 16px;
+  box-shadow: var(--shadow-sm);
+}
+
+.info-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  letter-spacing: 0.05em;
+  margin-bottom: 4px;
+}
+
+.info-value {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.info-sections {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 16px;
+}
+
+.info-section {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.section-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--accent-light);
+  padding: 10px 14px;
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.section-items {
+  padding: 4px 0;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 14px;
+  font-size: 12px;
+}
+
+.info-row:hover {
+  background: var(--bg-hover);
+}
+
+.info-key {
+  color: var(--text-secondary);
+}
+
+.info-val {
+  color: var(--text-primary);
+  font-family: 'Cascadia Code', 'Fira Code', monospace;
+}
+</style>