|
1 | 1 | <script lang="ts"> |
2 | | - import { getPreferences, getWikiOrder } from "$ctx"; |
| 2 | + import { getPreferences } from "$ctx"; |
3 | 3 | import { SettingsTab } from "$lib/components/header/types"; |
4 | | - import { sections } from "$lib/sections/constants"; |
5 | | - import { cn, flyAndScale } from "$lib/shared/utils"; |
6 | | - import { RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers"; |
7 | | - import { move } from "@dnd-kit/helpers"; |
8 | | - import type { DragDropEventHandlers } from "@dnd-kit/svelte"; |
9 | | - import { DragDropProvider, DragOverlay } from "@dnd-kit/svelte"; |
10 | | - import { createSortable } from "@dnd-kit/svelte/sortable"; |
11 | | - import BookOpenText from "@lucide/svelte/icons/book-open-text"; |
12 | | - import CircleQuestionMark from "@lucide/svelte/icons/circle-question-mark"; |
13 | | - import Fan from "@lucide/svelte/icons/fan"; |
14 | | - import GripVertical from "@lucide/svelte/icons/grip-vertical"; |
15 | | - import Keyboard from "@lucide/svelte/icons/keyboard"; |
16 | 4 | import Pickaxe from "@lucide/svelte/icons/pickaxe"; |
17 | | - import Rainbow from "@lucide/svelte/icons/rainbow"; |
18 | 5 | import Settings2 from "@lucide/svelte/icons/settings-2"; |
19 | | - import Sparkle from "@lucide/svelte/icons/sparkle"; |
20 | | - import { Button, Separator, Tabs, Tooltip } from "bits-ui"; |
| 6 | + import { Tabs } from "bits-ui"; |
21 | 7 | import SettingToggleRow from "./SettingToggleRow.svelte"; |
22 | 8 |
|
23 | 9 | const preferences = getPreferences(); |
24 | | - const wikiOrderContext = getWikiOrder(); |
25 | | - type WikiSource = (typeof wikiOrderContext.current)[number]; |
26 | | - type SortableItem = ReturnType<typeof createSortable>; |
27 | | -
|
28 | | - let isListening = $state(false); |
29 | | - let wikiOrder = $state(wikiOrderContext.current); |
30 | | -
|
31 | | - const defaultSectionOrder = sections; |
32 | | - const differsFromDefault = $derived(JSON.stringify(preferences.sectionOrder) !== JSON.stringify(defaultSectionOrder)); |
33 | | -
|
34 | | - function handleKeybindKeydown(e: KeyboardEvent) { |
35 | | - if (isListening) { |
36 | | - e.preventDefault(); |
37 | | - e.stopPropagation(); |
38 | | - const key = e.key; |
39 | | - if (key.length === 1 && key.match(/[a-zA-Z0-9/\\.,;'"`~!@#$%^&*()_+\-=[\]{}|:<>?]/)) { |
40 | | - preferences.keybind = key; |
41 | | - isListening = false; |
42 | | - } else if (key === "Escape") { |
43 | | - isListening = false; |
44 | | - preferences.keybind = preferences.keybind || "/"; |
45 | | - } |
46 | | - } |
47 | | - } |
48 | | -
|
49 | | - function handleKeybindClick() { |
50 | | - isListening = true; |
51 | | - setTimeout(() => { |
52 | | - if (isListening) { |
53 | | - isListening = false; |
54 | | - } |
55 | | - }, 5000); |
56 | | - } |
57 | | -
|
58 | | - function onDragEnd(event: Parameters<NonNullable<DragDropEventHandlers["onDragEnd"]>>[0]) { |
59 | | - wikiOrderContext.current = move(wikiOrder, event); |
60 | | - } |
61 | 10 | </script> |
62 | 11 |
|
63 | 12 | <Tabs.Content value={SettingsTab.Misc} class="space-y-6"> |
|
73 | 22 | </div> |
74 | 23 | </div> |
75 | 24 | </div> |
76 | | - <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)}> |
77 | | - {#snippet icon()} |
78 | | - <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} /> |
79 | | - {/snippet} |
80 | | - <Tooltip.Provider delayDuration={0}> |
81 | | - <Tooltip.Root> |
82 | | - <Tooltip.Trigger class="flex items-center gap-1"> |
83 | | - <CircleQuestionMark class="size-4 h-lh text-text/60" /> |
84 | | - </Tooltip.Trigger> |
85 | | - <Tooltip.Portal> |
86 | | - <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")}> |
87 | | - {#snippet child({ wrapperProps, props, open })} |
88 | | - {#if open} |
89 | | - <div {...wrapperProps}> |
90 | | - <div {...props} transition:flyAndScale> |
91 | | - <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> |
92 | | - <p>Graphics Acceleration gives the browsers access to your GPU for rendering, which can significantly improve performance; especially with opacity and blur effects.</p> |
93 | | - <p> |
94 | | - 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. |
95 | | - </p> |
96 | | - <Tooltip.Arrow /> |
97 | | - </div> |
98 | | - </div> |
99 | | - {/if} |
100 | | - {/snippet} |
101 | | - </Tooltip.Content> |
102 | | - </Tooltip.Portal> |
103 | | - </Tooltip.Root> |
104 | | - </Tooltip.Provider> |
105 | | - </SettingToggleRow> |
106 | | - |
107 | | - <SettingToggleRow id="glint" title="Show Glint" description="Show the enchantment glint effect on enchanted items." checked={preferences.showGlint} onCheckedChange={() => (preferences.showGlint = !preferences.showGlint)}> |
108 | | - {#snippet icon()} |
109 | | - <Sparkle class="size-6 h-lh shrink-0" /> |
110 | | - {/snippet} |
111 | | - </SettingToggleRow> |
112 | 25 |
|
113 | 26 | <SettingToggleRow id="mctooltip" title="Minecraft Styled Tooltips" description="Enable Minecraft styled tooltips for items." checked={preferences.mctooltip} onCheckedChange={() => (preferences.mctooltip = !preferences.mctooltip)}> |
114 | 27 | {#snippet icon()} |
115 | 28 | <Pickaxe class="size-6 h-lh shrink-0" /> |
116 | 29 | {/snippet} |
117 | 30 | </SettingToggleRow> |
118 | | - |
119 | | - <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)}> |
120 | | - {#snippet icon()} |
121 | | - <Rainbow class="size-6 h-lh shrink-0" /> |
122 | | - {/snippet} |
123 | | - </SettingToggleRow> |
124 | | - |
125 | | - <div class="flex items-center justify-between gap-4 rounded-lg bg-text/5 p-2"> |
126 | | - <div class="flex items-start gap-2"> |
127 | | - <Keyboard class="size-6 h-lh shrink-0" /> |
128 | | - <div class="flex flex-col"> |
129 | | - <h4 class="font-semibold text-text/90">Keybind</h4> |
130 | | - <p class="text-text/60">Set the keybind to open the command menu</p> |
131 | | - </div> |
132 | | - </div> |
133 | | - <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}> |
134 | | - {#if isListening} |
135 | | - <span class="animate-pulse text-icon">Press a key</span> |
136 | | - {:else} |
137 | | - <span class="min-w-2 text-center">{preferences.keybind}</span> |
138 | | - {/if} |
139 | | - </Button.Root> |
140 | | - </div> |
141 | | - </div> |
142 | | - <Separator.Root class="shrink-0 bg-icon/30 data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-0.5" /> |
143 | | - <div class="space-y-4 rounded-lg bg-text/5 p-4"> |
144 | | - <div class="flex items-start gap-2 rounded-lg p-2 font-semibold"> |
145 | | - <BookOpenText class="size-5 h-lh shrink-0" /> |
146 | | - <div class=""> |
147 | | - <h4>Wiki Order</h4> |
148 | | - <div class="space-y-2"> |
149 | | - <p class="text-text/60">Drag and drop the wiki sources to reorder them as you like.</p> |
150 | | - <p class="text-text/60">If the wiki source isn't available, the next one in the list will be used.</p> |
151 | | - </div> |
152 | | - </div> |
153 | | - </div> |
154 | | - |
155 | | - <DragDropProvider {onDragEnd} modifiers={(defaults) => [...defaults, RestrictToVerticalAxis]}> |
156 | | - {#each wikiOrder as wiki, index (wiki.id)} |
157 | | - {@const sortable = createSortable({ id: wiki.id, index, feedback: "clone" })} |
158 | | - {@render wikiRowContent(wiki, sortable, true)} |
159 | | - {/each} |
160 | | - |
161 | | - <DragOverlay> |
162 | | - {#snippet children(source)} |
163 | | - {@const activeWiki = wikiOrder.find((wiki) => wiki.id === source.id)} |
164 | | - {#if activeWiki} |
165 | | - {@render wikiRowContent(activeWiki)} |
166 | | - {/if} |
167 | | - {/snippet} |
168 | | - </DragOverlay> |
169 | | - </DragDropProvider> |
170 | | - {#if differsFromDefault} |
171 | | - <Button.Root |
172 | | - class="mt-4 w-full rounded-lg bg-text/65 p-1.5 text-sm font-semibold text-background/80 uppercase transition-colors ease-out hover:bg-text/80" |
173 | | - onclick={() => { |
174 | | - preferences.sectionOrder = defaultSectionOrder; |
175 | | - }}> |
176 | | - Reset to default |
177 | | - </Button.Root> |
178 | | - {/if} |
179 | 31 | </div> |
180 | 32 | </div> |
181 | 33 | </Tabs.Content> |
182 | | - |
183 | | -{#snippet wikiRowContent(wiki: WikiSource, sortable: SortableItem | null = null, flipEnabled = false)} |
184 | | - <div {@attach sortable?.attach} class="relative flex items-center gap-2 rounded-lg bg-text/5 p-2 font-semibold data-[dragging=true]:animate-pulse data-[dragging=true]:opacity-30 data-[flip=true]:will-change-transform" data-dragging={sortable?.isDropTarget} data-flip={flipEnabled}> |
185 | | - <GripVertical class="size-5 shrink-0 text-text/60" /> |
186 | | - <div class="flex flex-col"> |
187 | | - {wiki.name.replaceAll("_", " ")} |
188 | | - <Button.Root href={wiki.link} target="_blank" class="text-link/60 underline">{new URL(wiki.link).hostname}</Button.Root> |
189 | | - </div> |
190 | | - </div> |
191 | | -{/snippet} |
0 commit comments