From cfaded3a6e1410cf7ab723a890e07dad9bd0d3fc Mon Sep 17 00:00:00 2001 From: Huakun Shen Date: Tue, 18 Feb 2025 04:27:22 -0500 Subject: [PATCH 1/7] feat(desktop) semi-transparent background for mac --- apps/desktop/src-tauri/tauri.conf.json | 4 ++++ apps/desktop/src/app.css | 4 ++++ apps/desktop/src/routes/app/+page.svelte | 2 +- packages/extension/src/window.ts | 4 ++++ .../jarvis/permissions/autogenerated/reference.md | 2 ++ 5 files changed, 15 insertions(+), 1 deletion(-) diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json index a617fcc1..da5657f5 100644 --- a/apps/desktop/src-tauri/tauri.conf.json +++ b/apps/desktop/src-tauri/tauri.conf.json @@ -22,6 +22,10 @@ "width": 800, "visible": false, "height": 600, + "transparent": true, + "windowEffects": { + "effects": ["sidebar"] + }, "decorations": true }, { diff --git a/apps/desktop/src/app.css b/apps/desktop/src/app.css index 704625e7..f69aa557 100644 --- a/apps/desktop/src/app.css +++ b/apps/desktop/src/app.css @@ -79,3 +79,7 @@ html { overscroll-behavior: none; } + +body { + background-color: transparent; +} \ No newline at end of file diff --git a/apps/desktop/src/routes/app/+page.svelte b/apps/desktop/src/routes/app/+page.svelte index ca0a2f73..e8a595f2 100644 --- a/apps/desktop/src/routes/app/+page.svelte +++ b/apps/desktop/src/routes/app/+page.svelte @@ -95,7 +95,7 @@ }} /> @@ -6,6 +7,7 @@ Description + From be073a0926913808612342dd767ac1688433c9a1 Mon Sep 17 00:00:00 2001 From: Huakun Shen Date: Tue, 18 Feb 2025 04:33:35 -0500 Subject: [PATCH 2/7] feat(desktop): hardcode theme to be dark, in order for transparent bg to look good --- apps/desktop/src/lib/stores/appConfig.ts | 7 ++++++- apps/desktop/src/routes/app/+page.svelte | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/apps/desktop/src/lib/stores/appConfig.ts b/apps/desktop/src/lib/stores/appConfig.ts index 0feb422e..c05a6922 100644 --- a/apps/desktop/src/lib/stores/appConfig.ts +++ b/apps/desktop/src/lib/stores/appConfig.ts @@ -70,7 +70,12 @@ function createAppConfig(): WithSyncStore & Ap store.subscribe(async (config) => { console.log("Saving app config", config) await persistStore.set("config", config) - updateTheme(config.theme) + updateTheme({ + theme: "neutral", + radius: 0.5, + lightMode: "dark" + }) + // updateTheme(config.theme) }) } diff --git a/apps/desktop/src/routes/app/+page.svelte b/apps/desktop/src/routes/app/+page.svelte index e8a595f2..16d870a1 100644 --- a/apps/desktop/src/routes/app/+page.svelte +++ b/apps/desktop/src/routes/app/+page.svelte @@ -137,7 +137,7 @@ - + From ce6657ce1f7cd00f79ef71e3340f616dd9683eba Mon Sep 17 00:00:00 2001 From: Huakun Shen Date: Tue, 18 Feb 2025 05:13:15 -0500 Subject: [PATCH 3/7] feat: improve color for bg and border under semi transparent window --- apps/desktop/src/app.css | 10 +++++----- .../lib/components/standalone/general-settings.svelte | 4 ++-- apps/desktop/src/routes/app/+page.svelte | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/desktop/src/app.css b/apps/desktop/src/app.css index f69aa557..177ae8c3 100644 --- a/apps/desktop/src/app.css +++ b/apps/desktop/src/app.css @@ -36,21 +36,21 @@ } .dark { - --background: 0 0% 3.9%; + --background: 0 0% 15%; --foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; - --popover: 0 0% 3.9%; + --popover: 0 0% 12%; --popover-foreground: 0 0% 98%; - --card: 0 0% 3.9%; + --card: 0 0% 10%; --card-foreground: 0 0% 98%; --border: 0 0% 14.9%; - --input: 0 0% 14.9%; + --input: 0 0% 30%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; - --accent: 0 0% 14.9%; + --accent: 0 0% 24.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; diff --git a/apps/desktop/src/lib/components/standalone/general-settings.svelte b/apps/desktop/src/lib/components/standalone/general-settings.svelte index 52ebc46b..c08c62f8 100644 --- a/apps/desktop/src/lib/components/standalone/general-settings.svelte +++ b/apps/desktop/src/lib/components/standalone/general-settings.svelte @@ -29,7 +29,7 @@ const triggerContent = $derived(languages.find((f) => f.value === language)?.label ?? "Language") -
    +
    • {m.settings_general_launch_at_login()} li { - @apply flex items-center justify-between border-b px-3 py-3; + @apply border-accent flex items-center justify-between border-b px-3 py-3; } ul li:last-child { @apply border-b-0; diff --git a/apps/desktop/src/routes/app/+page.svelte b/apps/desktop/src/routes/app/+page.svelte index 16d870a1..ea31f14a 100644 --- a/apps/desktop/src/routes/app/+page.svelte +++ b/apps/desktop/src/routes/app/+page.svelte @@ -137,7 +137,7 @@ - + From d9065dff4074e02c48074e3591d20a2353893ccc Mon Sep 17 00:00:00 2001 From: Huakun Shen Date: Tue, 18 Feb 2025 05:22:00 -0500 Subject: [PATCH 4/7] chore: format code --- apps/desktop/src/routes/app/+page.svelte | 2 +- .../tauri-plugins/jarvis/permissions/autogenerated/reference.md | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/desktop/src/routes/app/+page.svelte b/apps/desktop/src/routes/app/+page.svelte index ea31f14a..08a718c9 100644 --- a/apps/desktop/src/routes/app/+page.svelte +++ b/apps/desktop/src/routes/app/+page.svelte @@ -95,7 +95,7 @@ }} /> @@ -7,7 +6,6 @@ Description - From c054e62fa65d88da2b3c5aff4b00fe567e060149 Mon Sep 17 00:00:00 2001 From: Huakun Shen Date: Tue, 18 Feb 2025 05:36:08 -0500 Subject: [PATCH 5/7] format --- apps/desktop/src/app.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/desktop/src/app.css b/apps/desktop/src/app.css index 177ae8c3..99d2bd9e 100644 --- a/apps/desktop/src/app.css +++ b/apps/desktop/src/app.css @@ -82,4 +82,4 @@ html { body { background-color: transparent; -} \ No newline at end of file +} From b9b4ef54c3e0464c64b0a9828d01e871e7182301 Mon Sep 17 00:00:00 2001 From: Huakun Shen Date: Wed, 19 Feb 2025 08:22:50 -0500 Subject: [PATCH 6/7] feat: use micaDark for windows window effect --- apps/desktop/src-tauri/tauri.conf.json | 2 +- apps/desktop/src/routes/app/+page.svelte | 8 ++++++-- .../src/routes/app/extension/store/+page.svelte | 16 ++++++++++++++-- .../permissions/autogenerated/reference.md | 2 ++ 4 files changed, 23 insertions(+), 5 deletions(-) diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json index da5657f5..cb5bb804 100644 --- a/apps/desktop/src-tauri/tauri.conf.json +++ b/apps/desktop/src-tauri/tauri.conf.json @@ -24,7 +24,7 @@ "height": 600, "transparent": true, "windowEffects": { - "effects": ["sidebar"] + "effects": ["sidebar", "micaDark"] }, "decorations": true }, diff --git a/apps/desktop/src/routes/app/+page.svelte b/apps/desktop/src/routes/app/+page.svelte index 08a718c9..a73baef7 100644 --- a/apps/desktop/src/routes/app/+page.svelte +++ b/apps/desktop/src/routes/app/+page.svelte @@ -41,6 +41,7 @@ import { ArrowBigUpIcon, CircleXIcon, EllipsisVerticalIcon, RefreshCcwIcon } from "lucide-svelte" import { onMount } from "svelte" + const _platform = platform() const win = getCurrentWindow() let inputEle: HTMLInputElement | null = $state(null) function onKeyDown(event: KeyboardEvent) { @@ -95,7 +96,10 @@ }} /> {m.home_command_input_dropdown_open_preference()} - {#if platform() === "macos"} + {#if _platform === "macos"} ⌘+Comma {:else} Ctrl+Comma diff --git a/apps/desktop/src/routes/app/extension/store/+page.svelte b/apps/desktop/src/routes/app/extension/store/+page.svelte index ae6f15de..39e457b3 100644 --- a/apps/desktop/src/routes/app/extension/store/+page.svelte +++ b/apps/desktop/src/routes/app/extension/store/+page.svelte @@ -11,12 +11,15 @@ import { Constants } from "@kksh/ui" import { ExtListItem } from "@kksh/ui/extension" import { CustomCommandInput, GlobalCommandPaletteFooter } from "@kksh/ui/main" + import { cn } from "@kksh/ui/utils" + import { platform } from "@tauri-apps/plugin-os" import { goto } from "$app/navigation" import { ArrowLeft } from "lucide-svelte" import type { Snippet } from "svelte" import { toast } from "svelte-sonner" import { getInstallExtras } from "./[identifier]/helper.js" + const _platform = platform() let { data } = $props() const { storeExtList, installedStoreExts, installedExtsMap, upgradableExpsMap } = data @@ -85,13 +88,22 @@ variant="outline" size="icon" onclick={goHome} - class={Constants.CLASSNAMES.BACK_BUTTON} + class={cn(Constants.CLASSNAMES.BACK_BUTTON, { + "bg-background/50": _platform === "windows", + "bg-transparent": _platform === "macos" + })} data-flip-id={Constants.CLASSNAMES.BACK_BUTTON} > {/snippet} - + @@ -6,6 +7,7 @@ Description + From e650afdb1485f4365b54fa24ad4bbeeafe604352 Mon Sep 17 00:00:00 2001 From: Huakun Shen Date: Wed, 19 Feb 2025 08:30:58 -0500 Subject: [PATCH 7/7] feat: improve background transparency for UI components --- .../ui/src/components/extension/GitHubProvenanceCard.svelte | 2 +- packages/ui/src/components/extension/StoreExtDetail.svelte | 2 +- packages/ui/src/components/extension/templates/Markdown.svelte | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/components/extension/GitHubProvenanceCard.svelte b/packages/ui/src/components/extension/GitHubProvenanceCard.svelte index 8fd00c76..3b122c0f 100644 --- a/packages/ui/src/components/extension/GitHubProvenanceCard.svelte +++ b/packages/ui/src/components/extension/GitHubProvenanceCard.svelte @@ -21,7 +21,7 @@ const workflowRunUrl = `https://github.com/${repoOwner}/${repoName}/actions/runs/${workflowRunId}/workflow` - +
      diff --git a/packages/ui/src/components/extension/StoreExtDetail.svelte b/packages/ui/src/components/extension/StoreExtDetail.svelte index b9b9f45f..f253e11b 100644 --- a/packages/ui/src/components/extension/StoreExtDetail.svelte +++ b/packages/ui/src/components/extension/StoreExtDetail.svelte @@ -308,7 +308,7 @@

      README

      {#if extPublish?.readme} - + {/if} diff --git a/packages/ui/src/components/extension/templates/Markdown.svelte b/packages/ui/src/components/extension/templates/Markdown.svelte index 29c09a79..bdc4eedd 100644 --- a/packages/ui/src/components/extension/templates/Markdown.svelte +++ b/packages/ui/src/components/extension/templates/Markdown.svelte @@ -5,6 +5,6 @@ const { markdown, class: className }: { markdown: string; class?: string } = $props() -
      +