feat: moved project selector to footer

This commit is contained in:
2026-02-10 13:18:44 +01:00
parent 6a80f7c7b6
commit 867b22add0
3 changed files with 17 additions and 20 deletions

View File

@@ -1,34 +1,28 @@
.project-selector { .project-selector {
position: relative; position: relative;
padding: 8px 12px;
border-bottom: 1px solid var(--vscode-sideBar-border);
flex-shrink: 0; flex-shrink: 0;
background-color: var(--vscode-sideBar-background);
min-height: 44px;
} }
.project-selector-trigger { .project-selector-trigger {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 6px;
width: 100%; padding: 0 8px;
padding: 6px 8px; height: 22px;
background-color: #3c3c3c; background: transparent;
border: 1px solid #555555; border: none;
border-radius: 4px; color: var(--vscode-statusBar-foreground);
color: #e0e0e0;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 12px;
text-align: left; text-align: left;
} }
.project-selector-trigger:hover { .project-selector-trigger:hover {
background-color: var(--vscode-list-hoverBackground); background-color: rgba(255, 255, 255, 0.1);
} }
.project-selector-trigger:focus { .project-selector-trigger:focus {
outline: none; outline: none;
border-color: var(--vscode-focusBorder);
} }
.project-icon { .project-icon {
@@ -50,13 +44,14 @@
.project-dropdown { .project-dropdown {
position: absolute; position: absolute;
top: 100%; bottom: 100%;
left: 12px; left: 0;
right: 12px; min-width: 220px;
margin-bottom: 4px;
background-color: var(--vscode-dropdown-background); background-color: var(--vscode-dropdown-background);
border: 1px solid var(--vscode-dropdown-border); border: 1px solid var(--vscode-dropdown-border);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
z-index: 1000; z-index: 1000;
overflow: hidden; overflow: hidden;
} }

View File

@@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useAppStore, PostData } from '../../store'; import { useAppStore, PostData } from '../../store';
import { showToast } from '../Toast'; import { showToast } from '../Toast';
import { ProjectSelector } from '../ProjectSelector';
import './Sidebar.css'; import './Sidebar.css';
const formatDate = (dateString: string) => { const formatDate = (dateString: string) => {
@@ -631,7 +630,6 @@ export const Sidebar: React.FC = () => {
return ( return (
<div className="sidebar"> <div className="sidebar">
<ProjectSelector />
{activeView === 'posts' && <PostsList />} {activeView === 'posts' && <PostsList />}
{activeView === 'media' && <MediaList />} {activeView === 'media' && <MediaList />}
{activeView === 'settings' && <SettingsPanel />} {activeView === 'settings' && <SettingsPanel />}

View File

@@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { useAppStore } from '../../store'; import { useAppStore } from '../../store';
import { ProjectSelector } from '../ProjectSelector';
import './StatusBar.css'; import './StatusBar.css';
export const StatusBar: React.FC = () => { export const StatusBar: React.FC = () => {
@@ -20,6 +21,9 @@ export const StatusBar: React.FC = () => {
return ( return (
<div className="status-bar"> <div className="status-bar">
<div className="status-bar-left"> <div className="status-bar-left">
{/* Project Selector */}
<ProjectSelector />
{/* Sync Status */} {/* Sync Status */}
<div className={`status-bar-item ${!syncConfigured ? 'warning' : ''}`}> <div className={`status-bar-item ${!syncConfigured ? 'warning' : ''}`}>
<span className={`sync-indicator ${syncStatus}`} /> <span className={`sync-indicator ${syncStatus}`} />