Commit Graph

19 Commits

Author SHA1 Message Date
陈大猫
70b05bfaaf New app logo + sidebar ripple + manager UI polish (#786)
* Replace app logo across window icon, tray, splash, and in-app brand

- public/logo.svg: new netcatty mark
- public/icon.png: regenerated 1024x1024 from new SVG (source for
  electron-builder — .icns/.ico rebuilt automatically at pack time)
- public/dmg-fix-icon.png: regenerated 1024x1024
- public/tray-icon{,@2x}.png: regenerated color 16/32px for Linux/Windows
- public/tray-iconTemplate{,@2x}.png: regenerated monochrome silhouette
  for macOS menu bar (background stripped, foreground flattened to
  black on transparent so template-image rendering produces a clean
  mask)
- components/AppLogo.tsx: render the new logo as a static <img>. The
  old hand-coded inline SVG bound fills to the accent CSS variable;
  the new mark has a fixed palette, so callers keep their sizing /
  rounding classes via className while the asset itself is a single
  file served from /public.
- index.html: splash screen now uses the same /logo.svg via <img>,
  with border-radius for the rounded-square frame.

* Polish logo: theme the in-app mark, gloss the OS icon, shrink cat

- components/AppLogo.tsx: back to an inline SVG. Background rect fills
  with hsl(var(--primary)) so the in-app brand follows the theme
  accent (was fixed navy when imported as <img>). Cat scaled to 68%
  of the frame and centred so it doesn't crowd the edges at small
  sidebar sizes.
- public/logo.svg + regenerated PNGs: polished OS icon variant with a
  large rounded-square clip (rx 224 on 1024), top-left spotlight
  radial gradient, subtle top sheen + bottom darkening, and an inner
  edge vignette for a slight chamfer. The cat is shrunk to the same
  68% as the in-app logo for visual consistency.
- Monochrome tray template (macOS menu bar) is rebuilt from the
  shrunk-cat path set with all fills flattened to black; keeps a
  clean silhouette instead of a filled rounded square.

* Smooth paws, richer gloss on app icon

- Drop the dark toe/claw detail paths from the source illustration
  (indices 22-25, 30, 35, 37, 39 — the ones tracing vertical claw
  dividers inside the paws). At small sizes those read as teeth/
  claws; paws now render as clean rounded blobs.
- public/logo.svg (OS icon source): richer depth pass —
    * two-tone navy vertical gradient (lighter top, deeper bottom)
    * brighter upper-left spotlight for glassy highlight
    * top sheen + bottom darkening for sheen-across-curve effect
    * soft elliptical ground shadow beneath the cat to anchor it
    * 2% inner edge stroke to crisp the rounded-square chamfer
- components/AppLogo.tsx: regenerated with the same cleaned cat set,
  still themed via hsl(var(--primary)). The in-app mark stays flat
  (no gloss) because the effect adds nothing at 20-40px sidebar
  sizes and would fight theme accents.
- All raster variants (icon.png, dmg-fix-icon.png, tray color + tray
  macOS template) rebuilt from the cleaned sources.

* Respect Apple icon safe area; drop gloss, add thin border

macOS icon was rendering to the full 1024x1024 canvas, so it looked
noticeably larger than neighbour apps (VS Code, Ghostty, Zed) in the
Dock. Apple's Big Sur+ convention puts the artwork body inside an
~824x824 safe area centred in a 1024 canvas, which is how those apps
are sized.

- public/logo.svg: artwork body is now 824x824 centred with ~100px
  transparent padding. Corner radius 185 (close enough to the macOS
  squircle at Dock scale). Cat rescaled so it keeps the same 68%
  proportion within the smaller body.
- Gloss layers (spotlight / sheen / ground shadow / vignette) removed
  per request — went for a Ghostty-style clean look instead.
- Thin white inner border (stroke 3px, 22% opacity) outlines the
  rounded square for definition.
- Tray PNGs for Linux/Windows keep the full-bleed variant (tray slots
  expect the icon to fill the space, unlike the Dock safe area).
- components/AppLogo.tsx unchanged conceptually — it still fills its
  own bounding box via hsl(var(--primary)); the Apple safe-area rule
  is Dock-specific, not relevant to in-app rendering.

* AppLogo: tighten corner radius to match previous (rx 18.75%)

Previous AppLogo used rx=12 on a 64 viewBox (18.75%). The inline
replacement had rx=224 on a 1024 viewBox (21.9%), which combined
with the caller's rounded-xl class read noticeably rounder in the
sidebar. Drop to rx=192 on 1024 viewBox so the in-app mark matches
the old proportions.

* Beef up icon border so it survives Dock downscaling

3 px at 22% opacity disappeared when rasterised down to ~128 px Dock /
Launchpad size. Bumped stroke-width to 8 px and opacity to 40% so the
inner highlight reads as ~1 px at Dock scale. Stroke is inset by
stroke-width/2 so it sits fully inside the rounded-square body (no
anti-alias bleed outside the safe area). Same treatment applied to the
full-bleed tray variant.

* Enlarge cat inside icon tile (68% -> 85% of body)

Dock render had too much navy margin around the mark. Bump the cat's
scale so it fills 85% of the Apple safe-area body while keeping a
visible bezel to the rounded corners and the inner border. Tray color
variant and macOS template (scale 0.9, no border) follow the same
scale-up.

* Add ripple effect on sidebar nav and tidy logo in vault header

- Add RippleButton wrapper + ripple keyframe; use it for the six vault
  sidebar nav entries (Hosts, Keychain, Port Forwarding, Snippets,
  Known Hosts, Logs) so clicks get a subtle material-style ripple.
- Shrink vault sidebar AppLogo to h-8 w-8 and drop the outer rounded-xl
  so the visible corner comes from the SVG's own rx instead of the
  container clip.
- Relax AppLogo tile rx/ry to 144 for a more moderate corner radius.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* AppLogo: bump tile corner radius back up to rx 18.75%

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* Unify manager toolbars, tighten tabs and vault sidebar title

- Manager toolbars (Keychain, KnownHosts, PortForwarding, Snippets)
  normalised to h-14 / h-10 controls with bg-secondary/80 backdrop-blur
  and the shared bg-foreground/5 secondary button treatment, so Hosts /
  Keychain / Known Hosts / Port Forwarding / Snippets headers size and
  tint identically.
- Keychain filter tabs: drop primary tint and cert-count pill; reuse
  the same foreground/5 vs foreground/10 active states as other
  managers. Search input grown to h-10 to match.
- Known Hosts: removed the leftover text-xs on Scan System / Import
  File so they inherit Button's text-sm like every other action.
- TopTabs: drop the 2px active-accent top line and add rounded-t-md +
  overflow-hidden so active tabs read as a clean soft tab shape rather
  than a banner.
- VaultView sidebar: wordmark grown to text-xl font-black italic with
  tightened tracking; logo gap trimmed from 3 to 2.5; outer bg dropped
  from secondary/80 to flat secondary to sit flush against the
  toolbars.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-21 22:16:49 +08:00
陈大猫
2933e108bc feat: support system theme auto-switching (#301)
* feat: support system theme auto-switching\n\nAdd 'system' as a third theme option alongside 'light' and 'dark'.\nWhen set to 'system', the UI theme automatically follows the OS\ncolor scheme preference and switches in real-time when the system\nappearance changes.\n\nChanges:\n- useSettingsState.ts: Add resolvedTheme state derived from\n  matchMedia('prefers-color-scheme: dark'), add listener for\n  system preference changes, update applyThemeTokens to use\n  resolvedTheme instead of theme directly\n- SettingsAppearanceTab.tsx: Replace dark mode Toggle with\n  3-segment selector (Light / System / Dark) using Sun/Monitor/Moon\n  icons\n- en.ts/zh-CN.ts: Replace darkMode i18n keys with new theme keys\n  including 'system' option\n- Default theme changed from 'light' to 'system' for new users\n\nPartially addresses #294

* fix: derive resolvedTheme synchronously and guard matchMedia\n\nAddress Codex review feedback:\n1. Replace resolvedTheme useState+useEffect with synchronous\n   derivation from systemPreference state. This eliminates the\n   one-frame stale render where useLayoutEffect could apply\n   tokens from the old palette before useEffect updated\n   resolvedTheme.\n2. Add window.matchMedia guard in the system preference listener\n   to prevent crashes in jsdom tests or constrained webviews.\n3. Make the matchMedia listener unconditional (always tracks OS\n   preference) to avoid setup/teardown churn when toggling modes.

* fix: resolve 'system' theme in pre-hydration bootstrap to prevent flash

The index.html bootstrap script only handled 'dark'/'light' stored
values. Since DEFAULT_THEME is now 'system', new users (or users who
chose system mode) would get a wrong-theme first paint until React
mounted. Now resolve 'system' via matchMedia('(prefers-color-scheme:
dark)') before applying the CSS class, eliminating the visible flash.

Also use the resolved theme (not raw stored value) for accent foreground
calculation to ensure correct contrast on first paint.

Addresses Codex review on PR #301.

* fix: use resolvedTheme for top-bar toggle to avoid no-op in system mode

When theme preference is 'system' and the OS is dark, the toggle button
showed a moon icon and clicking it just switched from 'system' to 'dark'
— visually a no-op. Now we:

1. Pass resolvedTheme (always 'light'|'dark') to TopTabs for icon display
2. Toggle based on resolvedTheme so the first click always produces a
   visible change (e.g. system+dark → light, system+light → dark)

Addresses Codex review on PR #301.
2026-03-09 21:49:00 +08:00
LAPTOP-O016UC3M\Qi Chen
7ffc9d427e Removes unnecessary whitespace for code style consistency
Cleans up extra blank lines and trailing spaces across multiple
components to improve code readability and maintain consistent
formatting. No logic or functional changes are introduced.
2026-01-07 21:09:25 +08:00
LAPTOP-O016UC3M\Qi Chen
d6db6c5db1 Adds Monaco-based syntax highlighting editor and OSC 7 CWD sync
Integrates Monaco Editor for enhanced syntax highlighting in the text editor modal, improving editing experience for code and config files.

Tracks and synchronizes the terminal's current working directory via OSC 7 escape sequences, enabling SFTP dialogs to open at the detected shell path even after user or directory changes.

Introduces IPC and backend support for querying the current shell directory from active SSH sessions, with fallback and path validation logic for remote SFTP browsing.

Improves file type detection by analyzing file content in addition to extensions.

Updates i18n strings and UI elements for clarity and future system application integration.

Adds necessary dependencies for Monaco Editor and updates content security policy for web workers.
2026-01-07 21:09:07 +08:00
LAPTOP-O016UC3M\Qi Chen
d690c75a79 Adds customizable accent color and new UI themes
Introduces user-selectable accent color with custom and preset options, including UI and persistence updates. Enhances appearance settings with a toggle for custom accent mode and color picker support. Also adds several new light and dark UI theme presets for greater personalization.

Improves theme initialization for accent color and updates localization strings for related settings.
2025-12-19 17:57:02 +08:00
LAPTOP-O016UC3M\Qi Chen
e64e71cc91 Refactors UI theme color system to use theme presets
Replaces the previous HSL-based accent color setting with selectable theme color presets for both light and dark modes. Updates settings state, storage, and UI to allow users to pick from predefined color palettes, improving consistency and customization. Syncs the new theme colors with Electron window backgrounds for native appearance integration. Updates language files and cleans up legacy color logic.
2025-12-19 17:42:13 +08:00
LAPTOP-O016UC3M\Qi Chen
cef7441ff9 Improves HTML formatting and code consistency
Refactors indentation and element formatting for better readability.
Enhances maintainability and visual structure without changing logic.
2025-12-18 23:05:13 +08:00
LAPTOP-O016UC3M\Qi Chen
920fa89510 Improves startup UX and cross-window settings sync
Adds a splash screen with fade-out animation for smoother startup and reduces initial blank window time in production.
Implements robust cross-window settings synchronization via IPC, ensuring changes propagate instantly across all open windows.
Optimizes settings persistence, theme/color validation, and settings change notifications.
Refactors Electron protocol handling for more secure, maintainable app resource serving.
Enhances chunk splitting strategy for faster initial load and better caching.
2025-12-18 23:04:57 +08:00
LAPTOP-O016UC3M\Qi Chen
0ac351b41a Eliminates white flash by deferring window show until paint
Defers Electron window display until the renderer signals first
meaningful paint, avoiding initial blank screens or white flashes,
especially on startup and settings windows. Implements a handshake
using a renderer-to-main process message, color-matches background
to the current theme, and falls back to a timeout in development.

Also migrates font loading to npm packages, replaces Google Fonts
usage, and adds code-splitting for dialogs and quick switcher to
improve performance. Restricts console debug output to development.
2025-12-18 17:41:38 +08:00
LAPTOP-O016UC3M\Qi Chen
01d446e98b Switches terminal engine to xterm.js and removes Ghostty
Replaces the Ghostty Web terminal backend with xterm.js, updating references, dependencies, and styles accordingly. Removes Ghostty-specific initialization, CSS, and dependencies for improved compatibility and maintainability. Updates terminal and SFTP mounting to use React lazy loading for better performance. Improves Electron window startup to avoid initial white flash. Cleans up cloud adapter dynamic imports for more efficient loading.

Updates documentation to reflect the terminal engine change.
2025-12-18 16:40:27 +08:00
bincxz
fb35f989b8 Refactors to enforce backend access via application hooks
Replaces all direct usage of browser globals and infrastructure service imports in UI components with dedicated application/state backend hooks. Introduces lint rules to prevent direct access to backend bridges and localStorage from components, promoting a cleaner separation of concerns and improved maintainability.

Moves user preferences (e.g., port forwarding form mode) to persistent state hooks, updates port forwarding and SFTP logic to rely on backend hooks, and centralizes logging through a logger utility. Cleans up debug code and removes obsolete scripts from HTML.

Improves testability, prepares for alternative backend implementations, and enforces architectural boundaries.
2025-12-13 01:38:44 +08:00
LAPTOP-O016UC3M\Qi Chen
0f20d4211d Improves WASM terminal error handling and CSP for web
Handles WASM initialization and terminal opening errors to
provide better diagnostics and reliability for the embedded
terminal. Updates content security policy and dev server
headers to support WASM and SharedArrayBuffer use, and
optimizes build config for proper WASM module loading.
2025-12-11 18:18:15 +08:00
LAPTOP-O016UC3M\Qi Chen
5a687667b5 Improves code consistency and formatting across components
Refactors code for consistent indentation, spacing, and style.
Enhances readability and maintainability by aligning formatting.
No logic changes; only visual and stylistic improvements applied.
2025-12-11 17:08:03 +08:00
LAPTOP-O016UC3M\Qi Chen
ba32d0d75b Migrates to Tailwind CSS v4 and improves hook deps clarity
Switches to Tailwind CSS v4 with theme configuration via CSS, removing inline CDN config for better maintainability and security.

Adds explicit eslint-disable comments in hooks to clarify dependency intent, aiding future development and preventing unnecessary warnings.

Renames props and variables reserved for future features to underscore-prefixed names, improving clarity and reducing confusion.

Removes unused catch parameters for cleaner error handling.

References to future UI and logic enhancements are annotated for maintainability and roadmap visibility.
2025-12-11 17:07:55 +08:00
LAPTOP-O016UC3M\Qi Chen
4881d30879 Reformats HTML for improved readability
Reindents and restructures the HTML and embedded scripts/styles
for greater clarity and maintainability. No functional changes.
2025-12-09 23:16:06 +08:00
LAPTOP-O016UC3M\Qi Chen
a1d2c31be9 Updates terminal to ghostty-web 0.4.0 and improves font support
Upgrades the terminal dependency for better compatibility and API alignment.
Refactors initialization to match upstream changes, removing direct WASM loading.
Expands the terminal font stack and adds extended Unicode font-face for improved
box drawing and symbol rendering in the terminal interface.
2025-12-09 23:15:56 +08:00
bincxz
747e53526c feat: Enhance context menu rendering with dedicated portal and improve primary foreground color 2025-12-08 00:01:58 +08:00
bincxz
e69335c804 feat: Add workspace rename function and optimize theme color settings 2025-12-07 21:10:03 +08:00
bincxz
9360c31a78 first commit 2025-12-07 03:25:07 +08:00