initial commit

src/renderer/components/ActivityBar/ActivityBar.css

@@ -0,0 +1,82 @@
+.activity-bar {
+  width: 48px;
+  height: 100%;
+  background-color: var(--vscode-activityBar-background);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-right: 1px solid var(--vscode-panel-border);
+}
+
+.activity-bar-top,
+.activity-bar-bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px 0;
+}
+
+.activity-bar-item {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--vscode-activityBar-foreground);
+  opacity: 0.6;
+  cursor: pointer;
+  position: relative;
+  padding: 0;
+  border-radius: 0;
+}
+
+.activity-bar-item:hover {
+  opacity: 1;
+  background: transparent;
+}
+
+.activity-bar-item.active {
+  opacity: 1;
+}
+
+.activity-bar-item.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--vscode-activityBar-foreground);
+}
+
+.activity-bar-item.syncing svg {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.activity-bar-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  font-size: 10px;
+  font-weight: 600;
+  background-color: var(--vscode-activityBarBadge-background);
+  color: var(--vscode-activityBarBadge-foreground);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/renderer/components/ActivityBar/ActivityBar.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { useAppStore } from '../../store';
+import './ActivityBar.css';
+
+// Simple SVG icons
+const PostsIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/>
+    <path d="M8 12h8v2H8zm0 4h8v2H8z"/>
+  </svg>
+);
+
+const MediaIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+  </svg>
+);
+
+const SettingsIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
+  </svg>
+);
+
+const SyncIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
+  </svg>
+);
+
+export const ActivityBar: React.FC = () => {
+  const { activeView, setActiveView, syncStatus, pendingChanges } = useAppStore();
+  
+  const totalPending = pendingChanges.posts + pendingChanges.media;
+
+  return (
+    <div className="activity-bar">
+      <div className="activity-bar-top">
+        <button
+          className={`activity-bar-item ${activeView === 'posts' ? 'active' : ''}`}
+          onClick={() => setActiveView('posts')}
+          title="Posts"
+        >
+          <PostsIcon />
+        </button>
+        <button
+          className={`activity-bar-item ${activeView === 'media' ? 'active' : ''}`}
+          onClick={() => setActiveView('media')}
+          title="Media"
+        >
+          <MediaIcon />
+        </button>
+      </div>
+      
+      <div className="activity-bar-bottom">
+        <button
+          className={`activity-bar-item ${syncStatus === 'syncing' ? 'syncing' : ''}`}
+          onClick={() => window.electronAPI?.sync.start()}
+          title={`Sync (${totalPending} pending)`}
+        >
+          <SyncIcon />
+          {totalPending > 0 && (
+            <span className="activity-bar-badge">{totalPending}</span>
+          )}
+        </button>
+        <button
+          className={`activity-bar-item ${activeView === 'settings' ? 'active' : ''}`}
+          onClick={() => setActiveView('settings')}
+          title="Settings"
+        >
+          <SettingsIcon />
+        </button>
+      </div>
+    </div>
+  );
+};

src/renderer/components/ActivityBar/index.ts

@@ -0,0 +1 @@
+export { ActivityBar } from './ActivityBar';