perf/pipeline-improvements #2
@@ -1,10 +1,48 @@
|
|||||||
use serde::{Deserialize, Serialize};
|
use serde::{Deserialize, Serialize};
|
||||||
|
use std::fs;
|
||||||
use tauri::State;
|
use tauri::State;
|
||||||
|
|
||||||
use crate::db::models::Project;
|
use crate::db::models::Project;
|
||||||
use crate::db::queries;
|
use crate::db::queries;
|
||||||
use crate::state::AppState;
|
use crate::state::AppState;
|
||||||
|
|
||||||
|
// ── File-based project types ────────────────────────────────────
|
||||||
|
|
||||||
|
#[derive(Serialize, Deserialize)]
|
||||||
|
pub struct ProjectFile {
|
||||||
|
pub version: u32,
|
||||||
|
pub name: String,
|
||||||
|
pub audio_file: String,
|
||||||
|
pub created_at: String,
|
||||||
|
pub segments: Vec<ProjectFileSegment>,
|
||||||
|
pub speakers: Vec<ProjectFileSpeaker>,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Serialize, Deserialize)]
|
||||||
|
pub struct ProjectFileSegment {
|
||||||
|
pub text: String,
|
||||||
|
pub start_ms: i64,
|
||||||
|
pub end_ms: i64,
|
||||||
|
pub speaker: Option<String>,
|
||||||
|
pub is_edited: bool,
|
||||||
|
pub words: Vec<ProjectFileWord>,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Serialize, Deserialize)]
|
||||||
|
pub struct ProjectFileWord {
|
||||||
|
pub word: String,
|
||||||
|
pub start_ms: i64,
|
||||||
|
pub end_ms: i64,
|
||||||
|
pub confidence: f64,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Serialize, Deserialize)]
|
||||||
|
pub struct ProjectFileSpeaker {
|
||||||
|
pub label: String,
|
||||||
|
pub display_name: Option<String>,
|
||||||
|
pub color: String,
|
||||||
|
}
|
||||||
|
|
||||||
// ── Input types for save_project_transcript ──────────────────────
|
// ── Input types for save_project_transcript ──────────────────────
|
||||||
|
|
||||||
#[derive(Deserialize)]
|
#[derive(Deserialize)]
|
||||||
@@ -243,3 +281,17 @@ pub fn load_project_transcript(
|
|||||||
speakers: speaker_outputs,
|
speakers: speaker_outputs,
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ── File-based project commands ─────────────────────────────────
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
pub fn save_project_file(path: String, project: ProjectFile) -> Result<(), String> {
|
||||||
|
let json = serde_json::to_string_pretty(&project).map_err(|e| e.to_string())?;
|
||||||
|
fs::write(&path, json).map_err(|e| format!("Failed to save project: {e}"))
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
pub fn load_project_file(path: String) -> Result<ProjectFile, String> {
|
||||||
|
let json = fs::read_to_string(&path).map_err(|e| format!("Failed to read project: {e}"))?;
|
||||||
|
serde_json::from_str(&json).map_err(|e| format!("Failed to parse project: {e}"))
|
||||||
|
}
|
||||||
|
|||||||
@@ -10,8 +10,8 @@ use tauri::Manager;
|
|||||||
use commands::ai::{ai_chat, ai_configure, ai_list_providers};
|
use commands::ai::{ai_chat, ai_configure, ai_list_providers};
|
||||||
use commands::export::export_transcript;
|
use commands::export::export_transcript;
|
||||||
use commands::project::{
|
use commands::project::{
|
||||||
create_project, delete_project, get_project, list_projects, load_project_transcript,
|
create_project, delete_project, get_project, list_projects, load_project_file,
|
||||||
save_project_transcript, update_segment,
|
load_project_transcript, save_project_file, save_project_transcript, update_segment,
|
||||||
};
|
};
|
||||||
use commands::settings::{load_settings, save_settings};
|
use commands::settings::{load_settings, save_settings};
|
||||||
use commands::system::{get_data_dir, llama_list_models, llama_start, llama_status, llama_stop};
|
use commands::system::{get_data_dir, llama_list_models, llama_start, llama_status, llama_stop};
|
||||||
@@ -41,6 +41,8 @@ pub fn run() {
|
|||||||
save_project_transcript,
|
save_project_transcript,
|
||||||
load_project_transcript,
|
load_project_transcript,
|
||||||
update_segment,
|
update_segment,
|
||||||
|
save_project_file,
|
||||||
|
load_project_file,
|
||||||
transcribe_file,
|
transcribe_file,
|
||||||
run_pipeline,
|
run_pipeline,
|
||||||
download_diarize_model,
|
download_diarize_model,
|
||||||
|
|||||||
@@ -19,14 +19,12 @@
|
|||||||
let showSettings = $state(false);
|
let showSettings = $state(false);
|
||||||
|
|
||||||
// Project management state
|
// Project management state
|
||||||
let currentProjectId = $state<string | null>(null);
|
let currentProjectPath = $state<string | null>(null);
|
||||||
let currentProjectName = $state('');
|
let currentProjectName = $state('');
|
||||||
let savedProjects = $state<Array<{id: string, name: string, created_at: string}>>([]);
|
let audioFilePath = $state('');
|
||||||
let showProjectMenu = $state(false);
|
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
loadSettings();
|
loadSettings();
|
||||||
loadProjects();
|
|
||||||
|
|
||||||
// Global keyboard shortcuts
|
// Global keyboard shortcuts
|
||||||
function handleKeyDown(e: KeyboardEvent) {
|
function handleKeyDown(e: KeyboardEvent) {
|
||||||
@@ -45,7 +43,6 @@
|
|||||||
showSettings = true;
|
showSettings = true;
|
||||||
} else if (e.key === 'Escape') {
|
} else if (e.key === 'Escape') {
|
||||||
showExportMenu = false;
|
showExportMenu = false;
|
||||||
showProjectMenu = false;
|
|
||||||
showSettings = false;
|
showSettings = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -58,11 +55,6 @@
|
|||||||
showExportMenu = false;
|
showExportMenu = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (showProjectMenu) {
|
|
||||||
if (!target.closest('.project-dropdown')) {
|
|
||||||
showProjectMenu = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('keydown', handleKeyDown);
|
document.addEventListener('keydown', handleKeyDown);
|
||||||
@@ -83,57 +75,91 @@
|
|||||||
// Speaker color palette for auto-assignment
|
// Speaker color palette for auto-assignment
|
||||||
const speakerColors = ['#e94560', '#4ecdc4', '#ffe66d', '#a8e6cf', '#ff8b94', '#c7ceea', '#ffd93d', '#6bcb77'];
|
const speakerColors = ['#e94560', '#4ecdc4', '#ffe66d', '#a8e6cf', '#ff8b94', '#c7ceea', '#ffd93d', '#6bcb77'];
|
||||||
|
|
||||||
async function loadProjects() {
|
async function saveProject() {
|
||||||
|
const defaultName = currentProjectName || 'Untitled';
|
||||||
|
const outputPath = await save({
|
||||||
|
defaultPath: `${defaultName}.vtn`,
|
||||||
|
filters: [{ name: 'Voice to Notes Project', extensions: ['vtn'] }],
|
||||||
|
});
|
||||||
|
if (!outputPath) return;
|
||||||
|
|
||||||
|
const projectData = {
|
||||||
|
version: 1,
|
||||||
|
name: outputPath.split(/[\\/]/).pop()?.replace('.vtn', '') || defaultName,
|
||||||
|
audio_file: audioFilePath,
|
||||||
|
created_at: new Date().toISOString(),
|
||||||
|
segments: $segments.map(seg => {
|
||||||
|
const speaker = $speakers.find(s => s.id === seg.speaker_id);
|
||||||
|
return {
|
||||||
|
text: seg.text,
|
||||||
|
start_ms: seg.start_ms,
|
||||||
|
end_ms: seg.end_ms,
|
||||||
|
speaker: speaker?.label ?? null,
|
||||||
|
is_edited: seg.is_edited,
|
||||||
|
words: seg.words.map(w => ({
|
||||||
|
word: w.word,
|
||||||
|
start_ms: w.start_ms,
|
||||||
|
end_ms: w.end_ms,
|
||||||
|
confidence: w.confidence ?? 0,
|
||||||
|
})),
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
speakers: $speakers.map(s => ({
|
||||||
|
label: s.label,
|
||||||
|
display_name: s.display_name,
|
||||||
|
color: s.color || '#e94560',
|
||||||
|
})),
|
||||||
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const projects = await invoke<Array<{id: string, name: string, created_at: string}>>('list_projects');
|
await invoke('save_project_file', { path: outputPath, project: projectData });
|
||||||
savedProjects = projects;
|
currentProjectPath = outputPath;
|
||||||
|
currentProjectName = projectData.name;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('Failed to load projects:', err);
|
console.error('Failed to save project:', err);
|
||||||
|
alert(`Failed to save: ${err}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadProject(projectId: string) {
|
async function openProject() {
|
||||||
|
const filePath = await open({
|
||||||
|
filters: [{ name: 'Voice to Notes Project', extensions: ['vtn'] }],
|
||||||
|
multiple: false,
|
||||||
|
});
|
||||||
|
if (!filePath) return;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const result = await invoke<{
|
const project = await invoke<{
|
||||||
project_id: string;
|
version: number;
|
||||||
name: string;
|
name: string;
|
||||||
file_path: string;
|
audio_file: string;
|
||||||
segments: Array<{
|
segments: Array<{
|
||||||
text: string;
|
text: string;
|
||||||
start_ms: number;
|
start_ms: number;
|
||||||
end_ms: number;
|
end_ms: number;
|
||||||
speaker: string | null;
|
speaker: string | null;
|
||||||
words: Array<{
|
is_edited: boolean;
|
||||||
word: string;
|
words: Array<{ word: string; start_ms: number; end_ms: number; confidence: number }>;
|
||||||
start_ms: number;
|
|
||||||
end_ms: number;
|
|
||||||
confidence: number;
|
|
||||||
}>;
|
|
||||||
}>;
|
}>;
|
||||||
speakers: string[];
|
speakers: Array<{ label: string; display_name: string | null; color: string }>;
|
||||||
}>('load_project_transcript', { projectId });
|
}>('load_project_file', { path: filePath });
|
||||||
|
|
||||||
// Set project info
|
|
||||||
currentProjectId = result.project_id;
|
|
||||||
currentProjectName = result.name;
|
|
||||||
|
|
||||||
// Rebuild speakers
|
// Rebuild speakers
|
||||||
const newSpeakers: Speaker[] = (result.speakers || []).map((label, idx) => ({
|
const newSpeakers: Speaker[] = project.speakers.map((s, idx) => ({
|
||||||
id: `speaker-${idx}`,
|
id: `speaker-${idx}`,
|
||||||
project_id: result.project_id,
|
project_id: '',
|
||||||
label,
|
label: s.label,
|
||||||
display_name: null,
|
display_name: s.display_name,
|
||||||
color: speakerColors[idx % speakerColors.length],
|
color: s.color,
|
||||||
}));
|
}));
|
||||||
speakers.set(newSpeakers);
|
speakers.set(newSpeakers);
|
||||||
|
|
||||||
// Build speaker label -> id lookup
|
|
||||||
const speakerLookup = new Map(newSpeakers.map(s => [s.label, s.id]));
|
const speakerLookup = new Map(newSpeakers.map(s => [s.label, s.id]));
|
||||||
|
|
||||||
// Rebuild segments
|
// Rebuild segments
|
||||||
const newSegments: Segment[] = result.segments.map((seg, idx) => ({
|
const newSegments: Segment[] = project.segments.map((seg, idx) => ({
|
||||||
id: `seg-${idx}`,
|
id: `seg-${idx}`,
|
||||||
project_id: result.project_id,
|
project_id: '',
|
||||||
media_file_id: '',
|
media_file_id: '',
|
||||||
speaker_id: seg.speaker ? (speakerLookup.get(seg.speaker) ?? null) : null,
|
speaker_id: seg.speaker ? (speakerLookup.get(seg.speaker) ?? null) : null,
|
||||||
start_ms: seg.start_ms,
|
start_ms: seg.start_ms,
|
||||||
@@ -141,7 +167,7 @@
|
|||||||
text: seg.text,
|
text: seg.text,
|
||||||
original_text: null,
|
original_text: null,
|
||||||
confidence: null,
|
confidence: null,
|
||||||
is_edited: false,
|
is_edited: seg.is_edited,
|
||||||
edited_at: null,
|
edited_at: null,
|
||||||
segment_index: idx,
|
segment_index: idx,
|
||||||
words: seg.words.map((w, widx) => ({
|
words: seg.words.map((w, widx) => ({
|
||||||
@@ -156,44 +182,27 @@
|
|||||||
}));
|
}));
|
||||||
segments.set(newSegments);
|
segments.set(newSegments);
|
||||||
|
|
||||||
// Load audio from saved file path
|
// Load audio
|
||||||
if (result.file_path) {
|
audioFilePath = project.audio_file;
|
||||||
audioUrl = convertFileSrc(result.file_path);
|
audioUrl = convertFileSrc(project.audio_file);
|
||||||
waveformPlayer?.loadAudio(audioUrl);
|
waveformPlayer?.loadAudio(audioUrl);
|
||||||
}
|
|
||||||
|
|
||||||
showProjectMenu = false;
|
currentProjectPath = filePath as string;
|
||||||
|
currentProjectName = project.name;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('Failed to load project:', err);
|
console.error('Failed to load project:', err);
|
||||||
alert(`Failed to load project: ${err}`);
|
alert(`Failed to load project: ${err}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function deleteProject(projectId: string) {
|
|
||||||
try {
|
|
||||||
await invoke('delete_project', { projectId });
|
|
||||||
await loadProjects();
|
|
||||||
if (currentProjectId === projectId) {
|
|
||||||
currentProjectId = null;
|
|
||||||
currentProjectName = '';
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to delete project:', err);
|
|
||||||
alert(`Failed to delete project: ${err}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleWordClick(timeMs: number) {
|
function handleWordClick(timeMs: number) {
|
||||||
console.log('[voice-to-notes] Word clicked, seeking to', timeMs, 'ms');
|
console.log('[voice-to-notes] Word clicked, seeking to', timeMs, 'ms');
|
||||||
waveformPlayer?.seekTo(timeMs);
|
waveformPlayer?.seekTo(timeMs);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleTextEdit(segmentId: string, newText: string) {
|
function handleTextEdit(segmentId: string, newText: string) {
|
||||||
try {
|
// In-memory store is already updated by TranscriptEditor.
|
||||||
await invoke('update_segment', { segmentId, newText });
|
// Changes persist when user saves the project file.
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to save segment edit:', err);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleFileImport() {
|
async function handleFileImport() {
|
||||||
@@ -207,7 +216,8 @@
|
|||||||
});
|
});
|
||||||
if (!filePath) return;
|
if (!filePath) return;
|
||||||
|
|
||||||
// Convert file path to asset URL for wavesurfer
|
// Track the original file path and convert to asset URL for wavesurfer
|
||||||
|
audioFilePath = filePath;
|
||||||
audioUrl = convertFileSrc(filePath);
|
audioUrl = convertFileSrc(filePath);
|
||||||
waveformPlayer?.loadAudio(audioUrl);
|
waveformPlayer?.loadAudio(audioUrl);
|
||||||
|
|
||||||
@@ -367,27 +377,10 @@
|
|||||||
|
|
||||||
segments.set(newSegments);
|
segments.set(newSegments);
|
||||||
|
|
||||||
// Auto-save project
|
// Set project name from audio file name (user can save explicitly)
|
||||||
try {
|
const fileName = filePath.split(/[\\/]/).pop() || 'Untitled';
|
||||||
const fileName = filePath.split(/[\\/]/).pop() || 'Untitled';
|
currentProjectName = fileName.replace(/\.[^.]+$/, '');
|
||||||
const projectName = fileName.replace(/\.[^.]+$/, '');
|
currentProjectPath = null;
|
||||||
const projectId = await invoke<string>('create_project', { name: projectName });
|
|
||||||
await invoke('save_project_transcript', {
|
|
||||||
projectId,
|
|
||||||
filePath,
|
|
||||||
segments: result.segments,
|
|
||||||
speakers: result.speakers.map((label, idx) => ({
|
|
||||||
label,
|
|
||||||
display_name: null,
|
|
||||||
color: speakerColors[idx % speakerColors.length],
|
|
||||||
})),
|
|
||||||
});
|
|
||||||
currentProjectId = projectId;
|
|
||||||
currentProjectName = projectName;
|
|
||||||
await loadProjects();
|
|
||||||
} catch (saveErr) {
|
|
||||||
console.error('Auto-save failed:', saveErr);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('Pipeline failed:', err);
|
console.error('Pipeline failed:', err);
|
||||||
alert(`Pipeline failed: ${err}`);
|
alert(`Pipeline failed: ${err}`);
|
||||||
@@ -461,33 +454,14 @@
|
|||||||
<div class="app-header">
|
<div class="app-header">
|
||||||
<h1>Voice to Notes</h1>
|
<h1>Voice to Notes</h1>
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
<div class="project-dropdown">
|
<button class="settings-btn" onclick={openProject} disabled={isTranscribing}>
|
||||||
<button class="project-btn" onclick={() => showProjectMenu = !showProjectMenu}>
|
Open Project
|
||||||
{currentProjectName ? `Project: ${currentProjectName}` : 'No project'}
|
</button>
|
||||||
|
{#if $segments.length > 0}
|
||||||
|
<button class="settings-btn" onclick={saveProject}>
|
||||||
|
Save Project
|
||||||
</button>
|
</button>
|
||||||
{#if showProjectMenu}
|
{/if}
|
||||||
<div class="project-menu">
|
|
||||||
{#if savedProjects.length === 0}
|
|
||||||
<div class="project-empty">No saved projects</div>
|
|
||||||
{:else}
|
|
||||||
{#each savedProjects as project}
|
|
||||||
<div class="project-item">
|
|
||||||
<button class="project-option" onclick={() => loadProject(project.id)}>
|
|
||||||
{project.name}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="project-delete"
|
|
||||||
onclick={(e) => { e.stopPropagation(); deleteProject(project.id); }}
|
|
||||||
title="Delete project"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<button class="import-btn" onclick={handleFileImport} disabled={isTranscribing}>
|
<button class="import-btn" onclick={handleFileImport} disabled={isTranscribing}>
|
||||||
{#if isTranscribing}
|
{#if isTranscribing}
|
||||||
Processing...
|
Processing...
|
||||||
@@ -591,10 +565,14 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
.settings-btn:hover {
|
.settings-btn:hover:not(:disabled) {
|
||||||
background: rgba(255,255,255,0.05);
|
background: rgba(255,255,255,0.05);
|
||||||
border-color: #e94560;
|
border-color: #e94560;
|
||||||
}
|
}
|
||||||
|
.settings-btn:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
.export-dropdown {
|
.export-dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
@@ -637,78 +615,6 @@
|
|||||||
.export-option:hover {
|
.export-option:hover {
|
||||||
background: rgba(233, 69, 96, 0.2);
|
background: rgba(233, 69, 96, 0.2);
|
||||||
}
|
}
|
||||||
.project-dropdown {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.project-btn {
|
|
||||||
background: #0f3460;
|
|
||||||
border: 1px solid #4a5568;
|
|
||||||
color: #e0e0e0;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
max-width: 200px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.project-btn:hover {
|
|
||||||
background: #1a4a7a;
|
|
||||||
}
|
|
||||||
.project-menu {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
right: 0;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
background: #16213e;
|
|
||||||
border: 1px solid #4a5568;
|
|
||||||
border-radius: 6px;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 10;
|
|
||||||
min-width: 220px;
|
|
||||||
max-height: 300px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
.project-empty {
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
color: #888;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
.project-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.project-option {
|
|
||||||
flex: 1;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: #e0e0e0;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.project-option:hover {
|
|
||||||
background: rgba(233, 69, 96, 0.2);
|
|
||||||
}
|
|
||||||
.project-delete {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: #888;
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.project-delete:hover {
|
|
||||||
color: #e94560;
|
|
||||||
}
|
|
||||||
.app-shell {
|
.app-shell {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
Reference in New Issue
Block a user