feat(app): Workbench-Dock statt Zoom-Landkarte + bedienbare VNC-Konsole (0.2.2.0)

Cockpit neu gedacht — das Pinch-Zoom-Landkarten-Konzept war auf 5 Zoll fummelig: - WorkspaceDeck + WorkspaceDock: Taskleiste unten (Chat · Code · Desktop), Ein-Tap-Panelwechsel im Daumenbereich, animierter Indikator, Aktivitaets- Badges (Code blau / Desktop gruen), Safe-Area, blendet bei offener Tastatur aus. Panels bildschirmfuellend + immer gemountet (kein Remount). - noVNC bedienbar: novncHtml bekommt Tastatur-Bridge (verstecktes Input-Feld → rfb.sendKey inkl. Enter/Backspace/Pfeile), Strg-Alt-Entf, Fit↔1:1. VncTile zeigt eine Steuerungs-Leiste (⌨ / Strg+Alt+Entf / ⤢). - Entfernt: WorkspaceCanvas, Tile, PreviewTile, CockpitOverviewButton, cockpitNav (Pinch-Canvas + Uebersichts-Button obsolet). layout.ts auf Panel-Metadaten geschlankt. Header nur noch mit Kompakt/Cockpit-Umschalter. tsc clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-17 21:44:32 +02:00
parent 7d46d8e531
commit 0110526622
14 changed files with 317 additions and 551 deletions
@@ -0,0 +1,108 @@
+/**
+ * WorkspaceDock — die Taskleiste unten (Daumenzone). Ein Tap wechselt sofort
+ * das Panel; ein animierter Indikator gleitet unter das aktive Icon. Kleine
+ * Aktivitaets-Punkte (Badges) zeigen z.B. „Desktop verbunden" / „Code da".
+ *
+ * Das ist der Kern des Workbench-Gefuehls: Desktop-Umfang, aber Handy-schnell
+ * per Daumen erreichbar — statt einer Zoom-Landkarte.
+ */
+
+import React, { useState } from 'react';
+import { LayoutChangeEvent, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { TileId, TILE_META } from './layout';
+
+interface Props {
+  panels: TileId[];
+  active: TileId;
+  badges?: Partial<Record<TileId, string>>; // TileId → Punkt-Farbe (undefined = kein Punkt)
+  onSelect: (id: TileId) => void;
+}
+
+const WorkspaceDock: React.FC<Props> = ({ panels, active, badges, onSelect }) => {
+  const insets = useSafeAreaInsets();
+  const [rowW, setRowW] = useState(0);
+  const n = Math.max(1, panels.length);
+  const idx = Math.max(0, panels.indexOf(active));
+  const slot = rowW / n;
+
+  const onLayout = (e: LayoutChangeEvent) => setRowW(e.nativeEvent.layout.width);
+
+  const indicatorStyle = useAnimatedStyle(() => ({
+    width: slot,
+    transform: [{ translateX: withTiming(slot * idx, { duration: 200 }) }],
+  }));
+
+  return (
+    <View style={[styles.dock, { paddingBottom: Math.max(insets.bottom, 6) }]}>
+      <View style={styles.row} onLayout={onLayout}>
+        {rowW > 0 && <Animated.View style={[styles.indicator, indicatorStyle]} pointerEvents="none" />}
+        {panels.map((id) => {
+          const meta = TILE_META[id];
+          const isActive = id === active;
+          const badge = badges?.[id];
+          return (
+            <TouchableOpacity
+              key={id}
+              style={styles.item}
+              onPress={() => onSelect(id)}
+              activeOpacity={0.7}
+            >
+              <View>
+                <Text style={[styles.icon, isActive && styles.iconActive]}>{meta.icon}</Text>
+                {!!badge && <View style={[styles.badge, { backgroundColor: badge }]} />}
+              </View>
+              <Text style={[styles.label, isActive && styles.labelActive]} numberOfLines={1}>
+                {meta.title}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  dock: {
+    backgroundColor: '#0B0B18',
+    borderTopWidth: 1,
+    borderTopColor: '#1E1E2E',
+  },
+  row: {
+    flexDirection: 'row',
+    height: 58,
+    position: 'relative',
+  },
+  indicator: {
+    position: 'absolute',
+    top: 0,
+    height: 3,
+    backgroundColor: '#0096FF',
+    borderBottomLeftRadius: 3,
+    borderBottomRightRadius: 3,
+  },
+  item: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 2,
+  },
+  icon: { fontSize: 22, opacity: 0.55 },
+  iconActive: { opacity: 1 },
+  label: { color: '#6A6A85', fontSize: 10, fontWeight: '600' },
+  labelActive: { color: '#0096FF' },
+  badge: {
+    position: 'absolute',
+    top: -2,
+    right: -6,
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#0B0B18',
+  },
+});
+
+export default WorkspaceDock;