generated from nhcarrigan/template
feat: add compact mode for minimal widget interface (#36)
Add a compact mode that shrinks the window to a small widget showing just the character sprite, recent messages, and a quick input box. Perfect for quick questions while working without the full UI. - Add CompactMode.svelte component with minimal widget interface - Add compact mode toggle in StatusBar (Ctrl+Shift+M shortcut) - Save/restore window size when toggling compact mode - Handle display scaling by converting physical to logical pixels - Add compact_mode to config (Rust + TypeScript) - Add required Tauri window permissions for resize operations
This commit is contained in:
@@ -19,6 +19,9 @@
|
||||
"core:tray:default",
|
||||
"fs:default",
|
||||
"fs:allow-read-text-file",
|
||||
"fs:allow-write-text-file"
|
||||
"fs:allow-write-text-file",
|
||||
"core:window:allow-set-size",
|
||||
"core:window:allow-set-always-on-top",
|
||||
"core:window:allow-inner-size"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -79,6 +79,9 @@ pub struct HikariConfig {
|
||||
|
||||
#[serde(default)]
|
||||
pub streamer_hide_paths: bool,
|
||||
|
||||
#[serde(default)]
|
||||
pub compact_mode: bool,
|
||||
}
|
||||
|
||||
impl Default for HikariConfig {
|
||||
@@ -101,6 +104,7 @@ impl Default for HikariConfig {
|
||||
minimize_to_tray: false,
|
||||
streamer_mode: false,
|
||||
streamer_hide_paths: false,
|
||||
compact_mode: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -157,6 +161,7 @@ mod tests {
|
||||
assert!(!config.minimize_to_tray);
|
||||
assert!(!config.streamer_mode);
|
||||
assert!(!config.streamer_hide_paths);
|
||||
assert!(!config.compact_mode);
|
||||
}
|
||||
|
||||
#[test]
|
||||
@@ -177,6 +182,9 @@ mod tests {
|
||||
character_panel_width: Some(400),
|
||||
font_size: 16,
|
||||
minimize_to_tray: true,
|
||||
streamer_mode: false,
|
||||
streamer_hide_paths: false,
|
||||
compact_mode: false,
|
||||
};
|
||||
|
||||
let json = serde_json::to_string(&config).unwrap();
|
||||
|
||||
@@ -0,0 +1,560 @@
|
||||
<script lang="ts">
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { get } from "svelte/store";
|
||||
import { claudeStore, isClaudeProcessing } from "$lib/stores/claude";
|
||||
import { characterState, characterInfo } from "$lib/stores/character";
|
||||
import { configStore, isStreamerMode } from "$lib/stores/config";
|
||||
import { handleNewUserMessage } from "$lib/notifications/rules";
|
||||
import type { CharacterState, CharacterStateInfo } from "$lib/types/states";
|
||||
|
||||
interface Props {
|
||||
onExpand: () => void;
|
||||
}
|
||||
|
||||
let { onExpand }: Props = $props();
|
||||
|
||||
let inputValue = $state("");
|
||||
let isSubmitting = $state(false);
|
||||
let isConnected = $state(false);
|
||||
let isProcessing = $state(false);
|
||||
let streamerModeActive = $state(false);
|
||||
let currentState: CharacterState = $state("idle");
|
||||
let info: CharacterStateInfo = $state({
|
||||
state: "idle",
|
||||
label: "Ready",
|
||||
description: "Waiting for your command~",
|
||||
spriteFile: "idle.png",
|
||||
});
|
||||
|
||||
// Recent messages for compact display
|
||||
let recentMessages = $state<Array<{ type: string; content: string }>>([]);
|
||||
const MAX_RECENT_MESSAGES = 3;
|
||||
|
||||
claudeStore.connectionStatus.subscribe((status) => {
|
||||
isConnected = status === "connected";
|
||||
});
|
||||
|
||||
isClaudeProcessing.subscribe((processing) => {
|
||||
isProcessing = processing;
|
||||
});
|
||||
|
||||
isStreamerMode.subscribe((value) => {
|
||||
streamerModeActive = value;
|
||||
});
|
||||
|
||||
characterState.subscribe((state) => {
|
||||
currentState = state;
|
||||
});
|
||||
|
||||
characterInfo.subscribe((i) => {
|
||||
info = i;
|
||||
});
|
||||
|
||||
// Track recent terminal output
|
||||
claudeStore.terminalLines.subscribe((lines) => {
|
||||
const recent = lines.slice(-MAX_RECENT_MESSAGES).map((line) => ({
|
||||
type: line.type,
|
||||
content: line.content.substring(0, 100) + (line.content.length > 100 ? "..." : ""),
|
||||
}));
|
||||
recentMessages = recent;
|
||||
});
|
||||
|
||||
function getAnimationClass(): string {
|
||||
switch (currentState) {
|
||||
case "thinking":
|
||||
return "animate-thinking";
|
||||
case "typing":
|
||||
return "animate-typing";
|
||||
case "searching":
|
||||
return "animate-searching";
|
||||
case "success":
|
||||
return "animate-celebrate";
|
||||
case "error":
|
||||
return "animate-shake";
|
||||
default:
|
||||
return "animate-idle";
|
||||
}
|
||||
}
|
||||
|
||||
function getStateGlow(): string {
|
||||
switch (currentState) {
|
||||
case "thinking":
|
||||
return "glow-thinking";
|
||||
case "typing":
|
||||
return "glow-typing";
|
||||
case "success":
|
||||
return "glow-success";
|
||||
case "error":
|
||||
return "glow-error";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
|
||||
const message = inputValue.trim();
|
||||
if (!message || isSubmitting || !isConnected) return;
|
||||
|
||||
isSubmitting = true;
|
||||
inputValue = "";
|
||||
|
||||
handleNewUserMessage();
|
||||
claudeStore.addLine("user", message);
|
||||
characterState.setState("thinking");
|
||||
|
||||
try {
|
||||
const conversationId = get(claudeStore.activeConversationId);
|
||||
if (!conversationId) {
|
||||
throw new Error("No active conversation");
|
||||
}
|
||||
await invoke("send_prompt", {
|
||||
conversationId,
|
||||
message,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to send prompt:", error);
|
||||
claudeStore.addLine("error", `Failed to send: ${error}`);
|
||||
characterState.setTemporaryState("error", 3000);
|
||||
} finally {
|
||||
isSubmitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleInterrupt() {
|
||||
try {
|
||||
const conversationId = get(claudeStore.activeConversationId);
|
||||
if (!conversationId) return;
|
||||
|
||||
await invoke("interrupt_claude", { conversationId });
|
||||
claudeStore.addLine("system", "Interrupted");
|
||||
characterState.setState("idle");
|
||||
} catch (error) {
|
||||
console.error("Failed to interrupt:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
handleSubmit(event);
|
||||
}
|
||||
// Escape expands to full mode
|
||||
if (event.key === "Escape") {
|
||||
onExpand();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="compact-container {getStateGlow()}">
|
||||
<!-- Character sprite (smaller) -->
|
||||
<div class="compact-character">
|
||||
<div class="sprite-wrapper {getAnimationClass()}">
|
||||
<img
|
||||
src="/sprites/{info.spriteFile}"
|
||||
alt="Hikari - {info.label}"
|
||||
class="compact-sprite"
|
||||
onerror={(e) => {
|
||||
const target = e.currentTarget as HTMLImageElement;
|
||||
target.src = "/sprites/placeholder.svg";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="state-badge">{info.label}</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent message preview -->
|
||||
<div class="message-preview">
|
||||
{#if recentMessages.length > 0}
|
||||
{#each recentMessages.slice(-1) as msg}
|
||||
<div class="preview-message {msg.type}">
|
||||
{msg.content}
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="preview-message system">Ask me anything~</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Compact input -->
|
||||
<form onsubmit={handleSubmit} class="compact-input-form">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={inputValue}
|
||||
onkeydown={handleKeyDown}
|
||||
placeholder={isConnected ? "Quick message..." : "Not connected"}
|
||||
disabled={isSubmitting || !isConnected}
|
||||
class="compact-input"
|
||||
/>
|
||||
|
||||
<div class="compact-buttons">
|
||||
{#if isProcessing}
|
||||
<button type="button" onclick={handleInterrupt} class="compact-btn stop-btn" title="Stop">
|
||||
■
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!isConnected || isSubmitting || !inputValue.trim()}
|
||||
class="compact-btn send-btn"
|
||||
title="Send"
|
||||
>
|
||||
→
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<button type="button" onclick={onExpand} class="compact-btn expand-btn" title="Expand (Esc)">
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<polyline points="15 3 21 3 21 9"></polyline>
|
||||
<polyline points="9 21 3 21 3 15"></polyline>
|
||||
<line x1="21" y1="3" x2="14" y2="10"></line>
|
||||
<line x1="3" y1="21" x2="10" y2="14"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Streamer mode indicator -->
|
||||
{#if streamerModeActive}
|
||||
<div class="compact-live-indicator" title="Streamer mode active"></div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.compact-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
|
||||
padding: 12px;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.compact-container::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 2px;
|
||||
background: transparent;
|
||||
-webkit-mask:
|
||||
linear-gradient(#fff 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
pointer-events: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.glow-thinking {
|
||||
box-shadow: inset 0 0 30px rgba(147, 51, 234, 0.15);
|
||||
}
|
||||
|
||||
.glow-thinking::before {
|
||||
background: linear-gradient(180deg, #9333ea, var(--trans-blue));
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.glow-typing {
|
||||
box-shadow: inset 0 0 30px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
.glow-typing::before {
|
||||
background: linear-gradient(180deg, #3b82f6, var(--trans-pink));
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.glow-success {
|
||||
box-shadow: inset 0 0 30px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
.glow-success::before {
|
||||
background: linear-gradient(180deg, #10b981, var(--trans-blue));
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.glow-error {
|
||||
box-shadow: inset 0 0 30px rgba(239, 68, 68, 0.15);
|
||||
}
|
||||
|
||||
.glow-error::before {
|
||||
background: linear-gradient(180deg, #ef4444, var(--trans-pink));
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.compact-character {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.sprite-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.compact-sprite {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.state-badge {
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.message-preview {
|
||||
min-height: 24px;
|
||||
max-height: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-message {
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
color: var(--text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
padding: 4px 8px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.preview-message.user {
|
||||
color: var(--trans-pink);
|
||||
}
|
||||
|
||||
.preview-message.assistant {
|
||||
color: var(--trans-blue);
|
||||
}
|
||||
|
||||
.preview-message.error {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.compact-input-form {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.compact-input {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
color: var(--text-primary);
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.compact-input:focus {
|
||||
border-color: var(--trans-blue);
|
||||
box-shadow: 0 0 0 2px rgba(91, 206, 250, 0.2);
|
||||
}
|
||||
|
||||
.compact-input:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.compact-input::placeholder {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.compact-buttons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.compact-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.compact-btn:hover:not(:disabled) {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--accent-primary);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.compact-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.send-btn:not(:disabled) {
|
||||
background: var(--trans-gradient-vibrant);
|
||||
border-color: transparent;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
.stop-btn {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
border-color: rgb(239, 68, 68);
|
||||
color: rgb(248, 113, 113);
|
||||
}
|
||||
|
||||
.stop-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.compact-live-indicator {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgb(239, 68, 68);
|
||||
animation: pulse-live 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-live {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Character animations (smaller scale for compact) */
|
||||
@keyframes idle-bob {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes thinking-sway {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing-bounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-2px) scale(1.01);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes searching-look {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes celebrate {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05) rotate(3deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
25%,
|
||||
75% {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-idle {
|
||||
animation: idle-bob 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-thinking {
|
||||
animation: thinking-sway 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-typing {
|
||||
animation: typing-bounce 0.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-searching {
|
||||
animation: searching-look 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-celebrate {
|
||||
animation: celebrate 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-shake {
|
||||
animation: shake 0.5s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
@@ -29,6 +29,7 @@
|
||||
font_size: 14,
|
||||
streamer_mode: false,
|
||||
streamer_hide_paths: false,
|
||||
compact_mode: false,
|
||||
});
|
||||
|
||||
let isOpen = $state(false);
|
||||
|
||||
@@ -12,6 +12,8 @@
|
||||
{ keys: ["Escape"], description: "Close modals and panels" },
|
||||
{ keys: ["Ctrl", "L"], description: "Clear the terminal" },
|
||||
{ keys: ["Ctrl", ","], description: "Open settings" },
|
||||
{ keys: ["Ctrl", "Shift", "M"], description: "Toggle compact mode" },
|
||||
{ keys: ["Ctrl", "Shift", "S"], description: "Toggle streamer mode" },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
onToggleAchievements?: () => void;
|
||||
onToggleCompact?: () => void;
|
||||
}
|
||||
|
||||
const { onToggleAchievements = () => {} }: Props = $props();
|
||||
const { onToggleAchievements = () => {}, onToggleCompact = () => {} }: Props = $props();
|
||||
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { getVersion } from "@tauri-apps/api/app";
|
||||
@@ -56,6 +57,7 @@
|
||||
minimize_to_tray: false,
|
||||
streamer_mode: false,
|
||||
streamer_hide_paths: false,
|
||||
compact_mode: false,
|
||||
});
|
||||
|
||||
let streamerModeActive = $state(false);
|
||||
@@ -217,6 +219,20 @@
|
||||
{#if streamerModeActive}
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500 animate-pulse" title="Streamer mode active (Ctrl+Shift+S to toggle)"></div>
|
||||
{/if}
|
||||
<button
|
||||
onclick={onToggleCompact}
|
||||
class="p-1 text-gray-500 icon-trans-hover"
|
||||
title="Compact Mode (Ctrl+Shift+M)"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onclick={toggleAchievements}
|
||||
class="p-1 text-gray-500 icon-trans-hover relative"
|
||||
|
||||
@@ -21,6 +21,7 @@ export interface HikariConfig {
|
||||
font_size: number;
|
||||
streamer_mode: boolean;
|
||||
streamer_hide_paths: boolean;
|
||||
compact_mode: boolean;
|
||||
}
|
||||
|
||||
const defaultConfig: HikariConfig = {
|
||||
@@ -41,6 +42,7 @@ const defaultConfig: HikariConfig = {
|
||||
font_size: 14,
|
||||
streamer_mode: false,
|
||||
streamer_hide_paths: false,
|
||||
compact_mode: false,
|
||||
};
|
||||
|
||||
function createConfigStore() {
|
||||
@@ -155,6 +157,16 @@ function createConfigStore() {
|
||||
config.subscribe((c) => (currentConfig = c))();
|
||||
await updateConfig({ streamer_mode: !currentConfig.streamer_mode });
|
||||
},
|
||||
|
||||
toggleCompactMode: async () => {
|
||||
let currentConfig: HikariConfig = defaultConfig;
|
||||
config.subscribe((c) => (currentConfig = c))();
|
||||
await updateConfig({ compact_mode: !currentConfig.compact_mode });
|
||||
},
|
||||
|
||||
setCompactMode: async (enabled: boolean) => {
|
||||
await updateConfig({ compact_mode: enabled });
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -186,6 +198,7 @@ export const configStore = createConfigStore();
|
||||
export const isDarkTheme = derived(configStore.config, ($config) => $config.theme === "dark");
|
||||
|
||||
export const isStreamerMode = derived(configStore.config, ($config) => $config.streamer_mode);
|
||||
export const isCompactMode = derived(configStore.config, ($config) => $config.compact_mode);
|
||||
export const shouldHidePaths = derived(
|
||||
configStore.config,
|
||||
($config) => $config.streamer_mode && $config.streamer_hide_paths
|
||||
|
||||
+125
-35
@@ -3,16 +3,17 @@
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { get } from "svelte/store";
|
||||
import { initializeTauriListeners, cleanupTauriListeners } from "$lib/tauri";
|
||||
import { configStore, applyTheme, applyFontSize } from "$lib/stores/config";
|
||||
import { configStore, applyTheme, applyFontSize, isCompactMode } from "$lib/stores/config";
|
||||
import { initNotificationSync, cleanupNotificationSync } from "$lib/stores/notifications";
|
||||
import { conversationsStore } from "$lib/stores/conversations";
|
||||
import { claudeStore, isClaudeProcessing } from "$lib/stores/claude";
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import { getCurrentWindow, LogicalSize } from "@tauri-apps/api/window";
|
||||
import "$lib/notifications/testNotifications";
|
||||
import Terminal from "$lib/components/Terminal.svelte";
|
||||
import InputBar from "$lib/components/InputBar.svelte";
|
||||
import StatusBar from "$lib/components/StatusBar.svelte";
|
||||
import AnimeGirl from "$lib/components/AnimeGirl.svelte";
|
||||
import CompactMode from "$lib/components/CompactMode.svelte";
|
||||
import { characterState } from "$lib/stores/character";
|
||||
import type { CharacterState } from "$lib/types/states";
|
||||
import PermissionModal from "$lib/components/PermissionModal.svelte";
|
||||
@@ -26,11 +27,23 @@
|
||||
let updateNotification: UpdateNotification;
|
||||
let achievementPanelOpen = $state(false);
|
||||
let currentCharacterState: CharacterState = $state("idle");
|
||||
let compactModeActive = $state(false);
|
||||
|
||||
// Window size constants
|
||||
const COMPACT_WIDTH = 280;
|
||||
const COMPACT_HEIGHT = 400;
|
||||
|
||||
// Store the previous window size to restore when exiting compact mode
|
||||
let previousWindowSize: { width: number; height: number } | null = null;
|
||||
|
||||
characterState.subscribe((state) => {
|
||||
currentCharacterState = state;
|
||||
});
|
||||
|
||||
isCompactMode.subscribe((value) => {
|
||||
compactModeActive = value;
|
||||
});
|
||||
|
||||
function getPanelGlowClass(): string {
|
||||
switch (currentCharacterState) {
|
||||
case "thinking":
|
||||
@@ -156,6 +169,13 @@
|
||||
configStore.toggleStreamerMode();
|
||||
return;
|
||||
}
|
||||
|
||||
// Ctrl+Shift+M - Toggle compact mode
|
||||
if (event.ctrlKey && event.shiftKey && event.key === "M") {
|
||||
event.preventDefault();
|
||||
toggleCompactMode();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleInterrupt() {
|
||||
@@ -170,6 +190,59 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function enterCompactMode() {
|
||||
try {
|
||||
const window = getCurrentWindow();
|
||||
const currentSize = await window.innerSize();
|
||||
const scaleFactor = await window.scaleFactor();
|
||||
|
||||
// Save current window size (convert from physical to logical pixels)
|
||||
// innerSize() returns physical pixels, but setSize() with LogicalSize expects logical
|
||||
previousWindowSize = {
|
||||
width: Math.round(currentSize.width / scaleFactor),
|
||||
height: Math.round(currentSize.height / scaleFactor),
|
||||
};
|
||||
|
||||
// Resize to compact dimensions
|
||||
await window.setSize(new LogicalSize(COMPACT_WIDTH, COMPACT_HEIGHT));
|
||||
|
||||
// Enable compact mode in config
|
||||
await configStore.setCompactMode(true);
|
||||
} catch (error) {
|
||||
console.error("Failed to enter compact mode:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async function exitCompactMode() {
|
||||
try {
|
||||
const window = getCurrentWindow();
|
||||
|
||||
// Only resize if we have a saved previous size
|
||||
// (i.e., user entered compact mode during this session)
|
||||
// Otherwise, just expand to a reasonable default
|
||||
if (previousWindowSize) {
|
||||
await window.setSize(new LogicalSize(previousWindowSize.width, previousWindowSize.height));
|
||||
previousWindowSize = null;
|
||||
} else {
|
||||
// No saved size (e.g., app started in compact mode) - use modest default
|
||||
await window.setSize(new LogicalSize(900, 650));
|
||||
}
|
||||
|
||||
// Disable compact mode in config
|
||||
await configStore.setCompactMode(false);
|
||||
} catch (error) {
|
||||
console.error("Failed to exit compact mode:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleCompactMode() {
|
||||
if (compactModeActive) {
|
||||
await exitCompactMode();
|
||||
} else {
|
||||
await enterCompactMode();
|
||||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (!initialized) {
|
||||
initialized = true;
|
||||
@@ -206,6 +279,12 @@
|
||||
if (config.update_checks_enabled) {
|
||||
updateNotification?.checkForUpdates();
|
||||
}
|
||||
|
||||
// Apply compact mode if saved (resize window)
|
||||
if (config.compact_mode) {
|
||||
const window = getCurrentWindow();
|
||||
await window.setSize(new LogicalSize(COMPACT_WIDTH, COMPACT_HEIGHT));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -219,43 +298,54 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="app-container h-screen w-screen flex flex-col bg-[var(--bg-primary)] overflow-hidden">
|
||||
<StatusBar onToggleAchievements={() => (achievementPanelOpen = !achievementPanelOpen)} />
|
||||
{#if compactModeActive}
|
||||
<!-- Compact mode: minimal widget interface -->
|
||||
<div class="app-container compact-app h-screen w-screen flex flex-col bg-[var(--bg-primary)] overflow-hidden">
|
||||
<CompactMode onExpand={exitCompactMode} />
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Full mode: standard interface -->
|
||||
<div class="app-container h-screen w-screen flex flex-col bg-[var(--bg-primary)] overflow-hidden">
|
||||
<StatusBar
|
||||
onToggleAchievements={() => (achievementPanelOpen = !achievementPanelOpen)}
|
||||
onToggleCompact={enterCompactMode}
|
||||
/>
|
||||
|
||||
<main class="flex-1 flex overflow-hidden">
|
||||
<!-- Left panel: Character display -->
|
||||
<div
|
||||
class="character-panel {getPanelGlowClass()} flex flex-col items-center justify-center bg-[var(--bg-secondary)]/50"
|
||||
style="width: {panelWidth}px; min-width: {MIN_PANEL_WIDTH}px; max-width: {MAX_PANEL_WIDTH}px;"
|
||||
>
|
||||
<AnimeGirl />
|
||||
</div>
|
||||
<main class="flex-1 flex overflow-hidden">
|
||||
<!-- Left panel: Character display -->
|
||||
<div
|
||||
class="character-panel {getPanelGlowClass()} flex flex-col items-center justify-center bg-[var(--bg-secondary)]/50"
|
||||
style="width: {panelWidth}px; min-width: {MIN_PANEL_WIDTH}px; max-width: {MAX_PANEL_WIDTH}px;"
|
||||
>
|
||||
<AnimeGirl />
|
||||
</div>
|
||||
|
||||
<!-- Resize handle -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="resize-handle w-1 cursor-col-resize bg-[var(--border-color)] hover:bg-[var(--accent-primary)] transition-colors flex-shrink-0"
|
||||
class:bg-[var(--accent-primary)]={isResizing}
|
||||
onmousedown={startResize}
|
||||
></div>
|
||||
<!-- Resize handle -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="resize-handle w-1 cursor-col-resize bg-[var(--border-color)] hover:bg-[var(--accent-primary)] transition-colors flex-shrink-0"
|
||||
class:bg-[var(--accent-primary)]={isResizing}
|
||||
onmousedown={startResize}
|
||||
></div>
|
||||
|
||||
<!-- Right panel: Terminal and input -->
|
||||
<div class="terminal-panel flex-1 flex flex-col min-w-0">
|
||||
<Terminal />
|
||||
<InputBar />
|
||||
</div>
|
||||
</main>
|
||||
<!-- Right panel: Terminal and input -->
|
||||
<div class="terminal-panel flex-1 flex flex-col min-w-0">
|
||||
<Terminal />
|
||||
<InputBar />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<PermissionModal />
|
||||
<UserQuestionModal />
|
||||
<ConfigSidebar />
|
||||
<AchievementNotification />
|
||||
<AchievementsPanel
|
||||
bind:isOpen={achievementPanelOpen}
|
||||
onClose={() => (achievementPanelOpen = false)}
|
||||
/>
|
||||
<UpdateNotification bind:this={updateNotification} />
|
||||
</div>
|
||||
<PermissionModal />
|
||||
<UserQuestionModal />
|
||||
<ConfigSidebar />
|
||||
<AchievementNotification />
|
||||
<AchievementsPanel
|
||||
bind:isOpen={achievementPanelOpen}
|
||||
onClose={() => (achievementPanelOpen = false)}
|
||||
/>
|
||||
<UpdateNotification bind:this={updateNotification} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.app-container {
|
||||
|
||||
Reference in New Issue
Block a user