fix: tabs removing, state management, commands, loading animation

This commit is contained in:
Artemy Egorov 2024-07-31 16:55:14 +03:00
parent a23bead7d8
commit 1488604772
8 changed files with 112 additions and 82 deletions

View file

@ -10,13 +10,28 @@ use tauri::async_runtime::Mutex;
use types::{VigiError, VigiJsState, VigiState};
use utils::{read_or_create_jsonl, read_or_create_number};
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
async fn update_input(
input: String,
state: tauri::State<'_, Mutex<VigiState>>,
) -> Result<(), VigiError> {
state.lock().await.update_input(input).await
state.lock().await.update_input(input);
Ok(())
}
#[tauri::command]
async fn load_input(state: tauri::State<'_, Mutex<VigiState>>) -> Result<(), VigiError> {
state.lock().await.load_input().await?;
Ok(())
}
#[tauri::command]
async fn load_input_force(state: tauri::State<'_, Mutex<VigiState>>) -> Result<(), VigiError> {
state.lock().await.load_input_force().await?;
Ok(())
}
#[tauri::command]
@ -29,17 +44,12 @@ async fn select_tab(
index: usize,
state: tauri::State<'_, Mutex<VigiState>>,
) -> Result<(), VigiError> {
state.lock().await.select_tab(index).await
}
#[tauri::command]
async fn load_tab(state: tauri::State<'_, Mutex<VigiState>>) -> Result<(), VigiError> {
state.lock().await.load_tab().await
state.lock().await.select_tab(index)
}
#[tauri::command]
async fn add_tab(state: tauri::State<'_, Mutex<VigiState>>) -> Result<(), VigiError> {
state.lock().await.add_tab()
state.lock().await.add_tab().await
}
#[tauri::command]
@ -57,10 +67,11 @@ fn main() {
update_input,
get_js_state,
select_tab,
load_tab,
add_tab,
remove_tab,
setup
setup,
load_input,
load_input_force
])
.run(tauri::generate_context!())
.expect("error while running tauri application");
@ -120,7 +131,7 @@ async fn setup(
state.current_tab_index_path = local_data_dir.join("current_tab_index");
state.current_tab_index = read_or_create_number(&state.current_tab_index_path);
state.update_top_bar_input();
state.update_top_bar_input()?;
println!("---Setup done---");

View file

@ -12,6 +12,7 @@ pub enum VigiError {
StateUpdate,
Filesystem,
Config,
GetTab,
}
#[derive(Serialize, Debug, Clone)]
@ -77,24 +78,33 @@ impl VigiState {
}
}
pub async fn select_tab(&mut self, new_index: usize) -> Result<(), VigiError> {
self.current_tab_index = new_index;
self.write_current_tab_index()?;
self.update_top_bar_input();
pub fn select_tab(&mut self, new_index: usize) -> Result<(), VigiError> {
self.update_current_tab_index(new_index)?;
self.update_top_bar_input()?;
Ok(())
}
pub fn update_top_bar_input(&mut self) {
self.top_bar_input = self.tabs[self.current_tab_index].url.clone();
}
fn update_current_tab_index(&mut self, new_index: usize) -> Result<(), VigiError> {
self.current_tab_index = new_index;
fn write_current_tab_index(&mut self) -> Result<(), VigiError> {
fs::write(
&self.current_tab_index_path,
self.current_tab_index.to_string(),
)
.map_err(|_| VigiError::StateUpdate)
.map_err(|_| VigiError::StateUpdate)?;
Ok(())
}
pub fn update_top_bar_input(&mut self) -> Result<(), VigiError> {
self.top_bar_input = self
.tabs
.get(self.current_tab_index)
.ok_or(VigiError::StateUpdate)?
.url
.clone();
Ok(())
}
fn write_id_counter(&mut self) -> Result<(), VigiError> {
@ -155,12 +165,15 @@ impl VigiState {
Ok(())
}
pub async fn update_input(&mut self, input: String) -> Result<(), VigiError> {
pub fn update_input(&mut self, input: String) {
self.top_bar_input = input;
}
pub async fn load_input_force(&mut self) -> Result<(), VigiError> {
self.process_input(true).await
}
pub async fn load_tab(&mut self) -> Result<(), VigiError> {
pub async fn load_input(&mut self) -> Result<(), VigiError> {
self.process_input(false).await
}
@ -177,7 +190,7 @@ impl VigiState {
}
}
pub fn add_tab(&mut self) -> Result<(), VigiError> {
pub async fn add_tab(&mut self) -> Result<(), VigiError> {
self.tabs_id_counter += 1;
self.tabs.push(Tab::new(
"Home".to_string(),
@ -188,23 +201,22 @@ impl VigiState {
self.write_id_counter()?;
write_tabs(&self.local_tabs_path, &self.tabs)?;
self.current_tab_index = self.tabs.len() - 1;
self.write_current_tab_index()?;
self.update_top_bar_input();
self.select_tab(self.tabs.len() - 1)?;
self.load_input().await?;
Ok(())
}
pub fn remove_tab(&mut self, index: usize) -> Result<(), VigiError> {
if self.tabs.len() - 1 == index && self.current_tab_index == index {
if self.current_tab_index >= index {
if self.current_tab_index > 0 {
self.current_tab_index -= 1;
self.write_current_tab_index()?;
self.select_tab(self.current_tab_index - 1)?;
}
}
self.cached_inputs
.remove(&self.tabs.get(index).ok_or(VigiError::GetTab)?.url);
self.tabs.remove(index);
write_tabs(&self.local_tabs_path, &self.tabs)?;

View file

@ -10,8 +10,10 @@
--min-bg: #96e28a;
--max-bg: #193815;
--max-text: #bef5b5;
--min-text: #fff;
--min-text: #bef5b5;
--max-text: #fff;
--colorspace: oklch;
/* Dark */
/* --min: #818181;

View file

@ -39,7 +39,7 @@
{/if}
<button
class="tab"
class={`tab${loading && active ? " animate-pulse" : ""}`}
class:active
transition:slide={{ duration: 100 }}
bind:this={tabElement}
@ -49,11 +49,11 @@
}
}}
>
<div>
<!-- <div class="static right-0">
{#if loading && active}
<GooLoad />
{/if}
</div>
</div> -->
<div>
{tab.title}

View file

@ -5,7 +5,7 @@
import SidebarLeft from "$lib/icons/SidebarLeft.svelte";
import SidebarRight from "$lib/icons/SidebarRight.svelte";
import { state } from "$lib/stores";
import { updateInput } from "$lib/utils";
import { updateAndLoadInput } from "$lib/utils";
import Block from "./Block.svelte";
import Button from "./Button.svelte";
@ -36,7 +36,7 @@
</Button>
<Button onClick={onBack}><ArrowLeft /></Button>
<Button onClick={onForward}><ArrowRight /></Button>
<Button onClick={() => updateInput(input)}><Reload /></Button>
<Button onClick={() => updateAndLoadInput(input)}><Reload /></Button>
</Block>
<input
@ -47,7 +47,7 @@
bind:this={iEl}
on:keypress={(e) => {
if (e.key === "Enter") {
updateInput(currentInput);
updateAndLoadInput(currentInput);
iEl.blur();
}
}}

View file

@ -11,11 +11,14 @@ export async function updateVigiState() {
}
}
export async function updateInput(input: string) {
export async function updateAndLoadInput(input: string) {
await invoke("update_input", { input });
await updateVigiState();
isLoading.set(true);
try {
await invoke("update_input", { input });
await invoke("load_input_force");
await updateVigiState();
} catch (e) {
writeError(e, input);
@ -27,26 +30,25 @@ export async function updateInput(input: string) {
export async function addTab() {
await invoke("add_tab");
await updateVigiState();
await loadTab();
}
export async function selectTab(index: number) {
await invoke("select_tab", { index });
await updateVigiState();
await loadTab();
await loadInput();
}
export async function removeTab(index: number) {
await invoke("remove_tab", { index });
await updateVigiState();
await loadTab();
setTimeout(loadInput, 150);
}
export async function loadTab() {
export async function loadInput() {
isLoading.set(true);
try {
await invoke("load_tab");
await invoke("load_input");
await updateVigiState();
} catch (e) {
writeError(e);

View file

@ -1,44 +1,44 @@
<script lang="ts">
import "../app.css";
import "../app.css";
import TopBar from "$lib/components/TopBar.svelte";
import Sidebar from "$lib/components/Sidebar.svelte";
import BrowserWindow from "$lib/components/BrowserWindow.svelte";
import TopBar from "$lib/components/TopBar.svelte";
import Sidebar from "$lib/components/Sidebar.svelte";
import BrowserWindow from "$lib/components/BrowserWindow.svelte";
import { invoke } from "@tauri-apps/api/tauri";
import { loadTab, updateVigiState } from "$lib/utils";
import { isLoading } from "$lib/stores";
import { invoke } from "@tauri-apps/api/tauri";
import { loadInput, updateVigiState } from "$lib/utils";
import { isLoading } from "$lib/stores";
let sidebarOpen = true;
let sidebarOpen = true;
(async () => {
isLoading.set(true);
await invoke("setup");
await updateVigiState();
await loadTab();
isLoading.set(false);
})();
(async () => {
isLoading.set(true);
await invoke("setup");
await updateVigiState();
await loadInput();
isLoading.set(false);
})();
document.addEventListener("keypress", (e: KeyboardEvent) => {
if (
["INPUT", "TEXTAREA", "SELECT", "OPTION"].includes(
(e.target as Element).tagName
)
) {
return;
}
if (e.code === "KeyQ") sidebarOpen = !sidebarOpen;
});
document.addEventListener("keypress", (e: KeyboardEvent) => {
if (
["INPUT", "TEXTAREA", "SELECT", "OPTION"].includes(
(e.target as Element).tagName,
)
) {
return;
}
if (e.code === "KeyQ") sidebarOpen = !sidebarOpen;
});
</script>
<div
class={`common-window${sidebarOpen ? "" : " collapsed"}`}
data-tauri-drag-region
class={`common-window${sidebarOpen ? "" : " collapsed"}`}
data-tauri-drag-region
>
<Sidebar bind:collapsed={sidebarOpen} />
<Sidebar bind:collapsed={sidebarOpen} />
<div class="main-window">
<TopBar bind:sidebarOpen />
<BrowserWindow />
</div>
<div class="main-window">
<TopBar bind:sidebarOpen />
<BrowserWindow />
</div>
</div>

View file

@ -3,10 +3,10 @@ let textColors = {};
for (let i = 0; i <= 100; i += 5) {
bgColors[`vigi-${i}`] =
`color-mix(in oklch, var(--max-bg) ${i}%, var(--min-bg))`;
`color-mix(in var(--colorspace), var(--max-bg) ${i}%, var(--min-bg))`;
textColors[`vigi-${i}`] =
`color-mix(in oklch, var(--max-text) ${i}%, var(--min-text))`;
`color-mix(in var(--colorspace), var(--min-text) ${i}%, var(--max-text))`;
}
/** @type {import('tailwindcss').Config} */
@ -16,6 +16,9 @@ export default {
extend: {
colors: bgColors,
textColor: textColors,
animation: {
pulse: "pulse 0.7s linear infinite",
},
},
},
plugins: [],