|
1 | 1 | <script lang="ts"> |
2 | 2 | import { getPreferences } from "$ctx"; |
3 | 3 | import { SettingsTab } from "$lib/components/header/types"; |
4 | | - import { cn, flyAndScale } from "$lib/shared/utils"; |
5 | | - import CircleQuestionMark from "@lucide/svelte/icons/circle-question-mark"; |
6 | | - import Fan from "@lucide/svelte/icons/fan"; |
7 | | - import Keyboard from "@lucide/svelte/icons/keyboard"; |
8 | 4 | import Pickaxe from "@lucide/svelte/icons/pickaxe"; |
9 | | - import Rainbow from "@lucide/svelte/icons/rainbow"; |
10 | 5 | import Settings2 from "@lucide/svelte/icons/settings-2"; |
11 | | - import Sparkle from "@lucide/svelte/icons/sparkle"; |
12 | | - import { Button, Tabs, Tooltip } from "bits-ui"; |
| 6 | + import { Tabs } from "bits-ui"; |
13 | 7 | import SettingToggleRow from "./SettingToggleRow.svelte"; |
14 | 8 |
|
15 | 9 | const preferences = getPreferences(); |
16 | | -
|
17 | | - let isListening = $state(false); |
18 | | -
|
19 | | - function handleKeybindKeydown(e: KeyboardEvent) { |
20 | | - if (isListening) { |
21 | | - e.preventDefault(); |
22 | | - e.stopPropagation(); |
23 | | - const key = e.key; |
24 | | - if (key.length === 1 && key.match(/[a-zA-Z0-9/\\.,;'"`~!@#$%^&*()_+\-=[\]{}|:<>?]/)) { |
25 | | - preferences.keybind = key; |
26 | | - isListening = false; |
27 | | - } else if (key === "Escape") { |
28 | | - isListening = false; |
29 | | - preferences.keybind = preferences.keybind || "/"; |
30 | | - } |
31 | | - } |
32 | | - } |
33 | | -
|
34 | | - function handleKeybindClick() { |
35 | | - isListening = true; |
36 | | - setTimeout(() => { |
37 | | - if (isListening) { |
38 | | - isListening = false; |
39 | | - } |
40 | | - }, 5000); |
41 | | - } |
42 | 10 | </script> |
43 | 11 |
|
44 | 12 | <Tabs.Content value={SettingsTab.Misc} class="space-y-6"> |
|
54 | 22 | </div> |
55 | 23 | </div> |
56 | 24 | </div> |
57 | | - <SettingToggleRow id="performance" title="Performance Mode" description="Disables blur, transparency and backdrop effects for better performance on low-end devices." checked={preferences.performanceMode} onCheckedChange={() => (preferences.performanceMode = !preferences.performanceMode)}> |
58 | | - {#snippet icon()} |
59 | | - <Fan class="size-6 h-lh shrink-0 will-change-transform data-[performance=false]:animate-spin-slow data-[performance=true]:animate-spin" data-performance={preferences.performanceMode} /> |
60 | | - {/snippet} |
61 | | - <Tooltip.Provider delayDuration={0}> |
62 | | - <Tooltip.Root> |
63 | | - <Tooltip.Trigger class="flex items-center gap-1"> |
64 | | - <CircleQuestionMark class="size-4 h-lh text-text/60" /> |
65 | | - </Tooltip.Trigger> |
66 | | - <Tooltip.Portal> |
67 | | - <Tooltip.Content forceMount class={cn("z-50 flex w-full max-w-lg flex-col space-y-2 overflow-hidden rounded-lg p-4 select-text", preferences.performanceMode ? "bg-background-grey" : "backdrop-blur-lg backdrop-brightness-50")}> |
68 | | - {#snippet child({ wrapperProps, props, open })} |
69 | | - {#if open} |
70 | | - <div {...wrapperProps}> |
71 | | - <div {...props} transition:flyAndScale> |
72 | | - <p>You might not need this! We've noticed that often the reason for low performance is due to Graphics Acceleration being disabled in the browser settings.</p> |
73 | | - <p>Graphics Acceleration gives the browsers access to your GPU for rendering, which can significantly improve performance; especially with opacity and blur effects.</p> |
74 | | - <p> |
75 | | - Enable <a href="https://www.google.com/search?q=enable+graphics+acceleration+in+%5Bbrowser%5D" target="_blank" rel="noopener noreferrer" class="text-icon underline">Graphics Acceleration</a> in your browser settings first, and if you still experience performance issues, then consider enabling Performance Mode. |
76 | | - </p> |
77 | | - <Tooltip.Arrow /> |
78 | | - </div> |
79 | | - </div> |
80 | | - {/if} |
81 | | - {/snippet} |
82 | | - </Tooltip.Content> |
83 | | - </Tooltip.Portal> |
84 | | - </Tooltip.Root> |
85 | | - </Tooltip.Provider> |
86 | | - </SettingToggleRow> |
87 | | - |
88 | | - <SettingToggleRow id="glint" title="Show Glint" description="Show the enchantment glint effect on enchanted items." checked={preferences.showGlint} onCheckedChange={() => (preferences.showGlint = !preferences.showGlint)}> |
89 | | - {#snippet icon()} |
90 | | - <Sparkle class="size-6 h-lh shrink-0" /> |
91 | | - {/snippet} |
92 | | - </SettingToggleRow> |
93 | 25 |
|
94 | 26 | <SettingToggleRow id="mctooltip" title="Minecraft Styled Tooltips" description="Enable Minecraft styled tooltips for items." checked={preferences.mctooltip} onCheckedChange={() => (preferences.mctooltip = !preferences.mctooltip)}> |
95 | 27 | {#snippet icon()} |
96 | 28 | <Pickaxe class="size-6 h-lh shrink-0" /> |
97 | 29 | {/snippet} |
98 | 30 | </SettingToggleRow> |
99 | | - |
100 | | - <SettingToggleRow id="rainbow" title="Rainbow Colors" titleClass="group-data-[rainbow=true]/html:chroma-gradient" description="Enable rainbow colors animation for maxed enchants on items." checked={preferences.rainbowEnchantments} onCheckedChange={() => (preferences.rainbowEnchantments = !preferences.rainbowEnchantments)}> |
101 | | - {#snippet icon()} |
102 | | - <Rainbow class="size-6 h-lh shrink-0" /> |
103 | | - {/snippet} |
104 | | - </SettingToggleRow> |
105 | | - |
106 | | - <div class="flex items-center justify-between gap-4 rounded-lg bg-text/5 p-2"> |
107 | | - <div class="flex items-start gap-2"> |
108 | | - <Keyboard class="size-6 h-lh shrink-0" /> |
109 | | - <div class="flex flex-col"> |
110 | | - <h4 class="font-semibold text-text/90">Keybind</h4> |
111 | | - <p class="text-text/60">Set the keybind to open the command menu</p> |
112 | | - </div> |
113 | | - </div> |
114 | | - <Button.Root class="flex h-8 min-w-8 items-center justify-center rounded-md border border-text/20 bg-text/10 px-2 py-1 font-mono text-sm font-semibold text-text/90 transition-colors ease-out hover:bg-text/20 focus:ring-2 focus:ring-icon/50 focus:outline-none" onclick={handleKeybindClick} onkeydown={handleKeybindKeydown} tabindex={0}> |
115 | | - {#if isListening} |
116 | | - <span class="animate-pulse text-icon">Press a key</span> |
117 | | - {:else} |
118 | | - <span class="min-w-2 text-center">{preferences.keybind}</span> |
119 | | - {/if} |
120 | | - </Button.Root> |
121 | | - </div> |
122 | 31 | </div> |
123 | 32 | </div> |
124 | 33 | </Tabs.Content> |
0 commit comments