feat: use micaDark for windows window effect

This commit is contained in:
Huakun Shen 2025-02-19 08:22:50 -05:00
parent c054e62fa6
commit b9b4ef54c3
4 changed files with 23 additions and 5 deletions

View File

@ -24,7 +24,7 @@
"height": 600, "height": 600,
"transparent": true, "transparent": true,
"windowEffects": { "windowEffects": {
"effects": ["sidebar"] "effects": ["sidebar", "micaDark"]
}, },
"decorations": true "decorations": true
}, },

View File

@ -41,6 +41,7 @@
import { ArrowBigUpIcon, CircleXIcon, EllipsisVerticalIcon, RefreshCcwIcon } from "lucide-svelte" import { ArrowBigUpIcon, CircleXIcon, EllipsisVerticalIcon, RefreshCcwIcon } from "lucide-svelte"
import { onMount } from "svelte" import { onMount } from "svelte"
const _platform = platform()
const win = getCurrentWindow() const win = getCurrentWindow()
let inputEle: HTMLInputElement | null = $state(null) let inputEle: HTMLInputElement | null = $state(null)
function onKeyDown(event: KeyboardEvent) { function onKeyDown(event: KeyboardEvent) {
@ -95,7 +96,10 @@
}} }}
/> />
<Command.Root <Command.Root
class={cn("h-screen rounded-lg border bg-transparent shadow-md")} class={cn("h-screen rounded-lg border border-none shadow-md", {
"bg-transparent": _platform === "macos",
"bg-background/50": _platform === "windows"
})}
bind:value={$appState.highlightedCmd} bind:value={$appState.highlightedCmd}
shouldFilter={true} shouldFilter={true}
loop loop
@ -173,7 +177,7 @@
<RefreshCcwIcon class="mr-2 h-4 w-4 text-green-500" /> <RefreshCcwIcon class="mr-2 h-4 w-4 text-green-500" />
{m.home_command_input_dropdown_open_preference()} {m.home_command_input_dropdown_open_preference()}
<DropdownMenu.Shortcut> <DropdownMenu.Shortcut>
{#if platform() === "macos"} {#if _platform === "macos"}
<span class="flex items-center">⌘+Comma</span> <span class="flex items-center">⌘+Comma</span>
{:else} {:else}
<span class="flex items-center">Ctrl+Comma</span> <span class="flex items-center">Ctrl+Comma</span>

View File

@ -11,12 +11,15 @@
import { Constants } from "@kksh/ui" import { Constants } from "@kksh/ui"
import { ExtListItem } from "@kksh/ui/extension" import { ExtListItem } from "@kksh/ui/extension"
import { CustomCommandInput, GlobalCommandPaletteFooter } from "@kksh/ui/main" 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 { goto } from "$app/navigation"
import { ArrowLeft } from "lucide-svelte" import { ArrowLeft } from "lucide-svelte"
import type { Snippet } from "svelte" import type { Snippet } from "svelte"
import { toast } from "svelte-sonner" import { toast } from "svelte-sonner"
import { getInstallExtras } from "./[identifier]/helper.js" import { getInstallExtras } from "./[identifier]/helper.js"
const _platform = platform()
let { data } = $props() let { data } = $props()
const { storeExtList, installedStoreExts, installedExtsMap, upgradableExpsMap } = data const { storeExtList, installedStoreExts, installedExtsMap, upgradableExpsMap } = data
@ -85,13 +88,22 @@
variant="outline" variant="outline"
size="icon" size="icon"
onclick={goHome} 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} data-flip-id={Constants.CLASSNAMES.BACK_BUTTON}
> >
<ArrowLeft class="size-4" /> <ArrowLeft class="size-4" />
</Button> </Button>
{/snippet} {/snippet}
<Command.Root class="h-screen rounded-lg border shadow-md" loop> <Command.Root
class={cn("h-screen rounded-lg shadow-md", {
"bg-transparent": _platform === "macos",
"bg-background/50": _platform === "windows"
})}
loop
>
<CustomCommandInput <CustomCommandInput
autofocus autofocus
placeholder="Type a command or search..." placeholder="Type a command or search..."

View File

@ -1,3 +1,4 @@
## Permission Table ## Permission Table
<table> <table>
@ -6,6 +7,7 @@
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr> <tr>
<td> <td>