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/ConnectionCard.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+// src/renderer/src/components/ConnectionCard.vue
+import { computed } from 'vue'
+import type { ConnectionConfig } from '@renderer/stores/connection'
+import { useConnectionStore } from '@renderer/stores/connection'
+
+const props = defineProps<{ connection: ConnectionConfig }>()
+const emit = defineEmits<{ edit: [conn: ConnectionConfig]; delete: [id: string] }>()
+const connStore = useConnectionStore()
+
+const isActive = computed(() => connStore.activeId === props.connection.id)
+const statusColor = computed(() => {
+  if (isActive.value) return 'var(--success)'
+  return 'var(--text-muted)'
+})
+
+function handleClick() {
+  if (isActive.value) {
+    connStore.disconnect()
+  } else {
+    connStore.connect(props.connection)
+  }
+}
+</script>
+
+<template>
+  <div
+    class="connection-card"
+    :class="{ active: isActive, connecting: connStore.connecting && connStore.activeId === connection.id }"
+    @click="handleClick"
+    :style="{ '--status-color': statusColor }"
+  >
+    <div class="card-status" />
+    <div class="card-body">
+      <div class="card-name">{{ connection.name }}</div>
+      <div class="card-host">{{ connection.host }}:{{ connection.port }}</div>
+    </div>
+    <div class="card-actions" @click.stop>
+      <button class="card-btn" title="Edit" @click="emit('edit', connection)">&#x270E;</button>
+      <button class="card-btn card-btn-danger" title="Delete" @click="emit('delete', connection.id)">&#x2715;</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.connection-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: var(--shadow-sm);
+}
+
+.connection-card:hover {
+  background: var(--bg-card-hover);
+  transform: perspective(600px) rotateY(-1deg);
+}
+
+.connection-card.active {
+  background: var(--bg-card-active);
+  border-color: var(--border-accent);
+  box-shadow: var(--shadow-glow);
+}
+
+.connection-card.connecting {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.card-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--status-color);
+  box-shadow: 0 0 8px var(--status-color);
+  flex-shrink: 0;
+}
+
+.card-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.card-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-host {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+.card-actions {
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.connection-card:hover .card-actions {
+  opacity: 1;
+}
+
+.card-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-btn:hover {
+  background: var(--bg-card-hover);
+  color: var(--text-primary);
+}
+
+.card-btn-danger:hover {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--danger);
+}
+</style>