From 24af5bada38139431293919c851d79d97a1bbbe5 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 30 Jun 2021 19:55:56 +0200
Subject: [PATCH] More uniform file naming

kebap-case for .ts, .scss, .html, and directories
---
 qt/aqt/changenotetype.py                      |  2 +-
 qt/aqt/data/web/css/deckbrowser.scss          |  2 +-
 qt/aqt/data/web/css/overview.scss             |  2 +-
 qt/aqt/data/web/css/reviewer-bottom.scss      |  2 +-
 qt/aqt/data/web/pages/BUILD.bazel             |  4 +--
 qt/aqt/deckoptions.py                         |  2 +-
 .../BUILD.bazel                               | 16 +++++------
 .../ChangeNotetypePage.svelte                 |  0
 .../Mapper.svelte                             |  0
 .../MapperRow.svelte                          |  0
 .../NotetypeSelector.svelte                   |  0
 .../SaveButton.svelte                         |  0
 .../change-notetype-base.scss}                |  0
 .../change-notetype.html}                     |  6 ++---
 .../index.ts                                  |  2 +-
 .../lib.test.ts                               |  0
 ts/{ChangeNotetype => change-notetype}/lib.ts |  0
 ts/components/ButtonDropdown.svelte           |  2 +-
 ts/components/ButtonGroup.svelte              |  2 +-
 ts/components/ButtonGroupItem.svelte          |  2 +-
 ts/components/ButtonToolbar.svelte            |  2 +-
 ts/components/DropdownItem.svelte             |  4 +--
 ts/components/DropdownMenu.svelte             |  2 +-
 ts/components/IconButton.svelte               |  4 +--
 ts/components/Item.svelte                     |  2 +-
 ts/components/LabelButton.svelte              |  4 +--
 ts/components/Section.svelte                  |  2 +-
 ts/components/SelectButton.svelte             |  4 +--
 ts/components/WithDropdown.svelte             |  2 +-
 ts/components/WithLabel.svelte                | 27 -------------------
 .../{contextKeys.ts => context-keys.ts}       |  0
 ts/components/types.ts                        | 17 ------------
 .../Addons.svelte                             |  0
 .../AdvancedOptions.svelte                    |  0
 .../AudioOptions.svelte                       |  0
 ts/{deckoptions => deck-options}/BUILD.bazel  | 16 +++++------
 ts/{deckoptions => deck-options}/Badge.svelte |  2 +-
 .../BuryOptions.svelte                        |  0
 .../CardStateCustomizer.svelte                |  0
 .../CheckBox.svelte                           |  0
 .../CheckBoxRow.svelte                        |  0
 ts/{deckoptions => deck-options}/Col.svelte   |  0
 .../ConfigSelector.svelte                     |  2 +-
 .../DailyLimits.svelte                        |  0
 .../DeckOptionsPage.svelte                    |  0
 .../DisplayOrder.svelte                       |  0
 .../EnumSelector.svelte                       |  6 ++---
 .../EnumSelectorRow.svelte                    |  0
 .../HtmlAddon.svelte                          |  0
 ts/{deckoptions => deck-options}/Label.svelte |  0
 .../LapseOptions.svelte                       |  0
 .../NewOptions.svelte                         |  0
 .../RevertButton.svelte                       |  2 +-
 ts/{deckoptions => deck-options}/Row.svelte   |  0
 .../SaveButton.svelte                         |  0
 .../SpinBox.svelte                            |  4 +--
 .../SpinBoxFloat.svelte                       |  4 +--
 .../SpinBoxFloatRow.svelte                    |  0
 .../SpinBoxRow.svelte                         |  0
 .../StepsInput.svelte                         |  4 +--
 .../StepsInputRow.svelte                      |  0
 .../Switch.svelte                             |  2 +-
 .../SwitchRow.svelte                          |  0
 .../TextInputModal.svelte                     |  4 +--
 .../TimerOptions.svelte                       |  0
 .../TitledContainer.svelte                    |  0
 .../TooltipLabel.svelte                       |  0
 .../Warning.svelte                            |  0
 .../WithTooltip.svelte                        |  0
 ts/{deckoptions => deck-options}/col.ts       |  0
 .../deck-options-base.scss}                   |  0
 .../deck-options.html}                        |  6 ++---
 ts/{deckoptions => deck-options}/icons.ts     |  0
 ts/{deckoptions => deck-options}/index.ts     |  2 +-
 ts/{deckoptions => deck-options}/lib.test.ts  |  0
 ts/{deckoptions => deck-options}/lib.ts       |  0
 .../steps.test.ts                             |  0
 ts/{deckoptions => deck-options}/steps.ts     |  0
 ts/{deckoptions => deck-options}/strings.ts   |  0
 ts/editor/ClozeButton.svelte                  |  4 +--
 ts/editor/FormatBlockButtons.svelte           |  2 +-
 ts/editor/OnlyEditable.svelte                 |  4 +--
 ts/editor/TemplateButtons.svelte              |  4 +--
 ts/editor/{changeTimer.ts => change-timer.ts} |  4 +--
 ts/editor/{contextKeys.ts => context-keys.ts} |  0
 ts/editor/{editingArea.ts => editing-area.ts} |  4 +--
 ts/editor/{editorField.ts => editor-field.ts} |  4 +--
 .../{focusHandlers.ts => focus-handlers.ts}   |  4 +--
 ts/editor/index.ts                            | 12 ++++-----
 .../{inputHandlers.ts => input-handlers.ts}   |  4 +--
 .../{labelContainer.ts => label-container.ts} |  0
 ts/editor/{noteId.ts => note-id.ts}           |  0
 ts/editor/toolbar.ts                          |  4 +--
 ts/sass/BUILD.bazel                           |  8 +++---
 .../{_fusion_vars.scss => _fusion-vars.scss}  |  0
 ts/sass/bootstrap-dark.scss                   |  2 +-
 ...{button_mixins.scss => button-mixins.scss} |  0
 ts/sass/buttons.scss                          | 12 ++++-----
 .../{card_counts.scss => card-counts.scss}    |  0
 ts/sass/{night_mode.scss => night-mode.scss}  |  0
 ts/sass/scrollbar.scss                        |  4 +--
 101 files changed, 100 insertions(+), 144 deletions(-)
 rename ts/{ChangeNotetype => change-notetype}/BUILD.bazel (93%)
 rename ts/{ChangeNotetype => change-notetype}/ChangeNotetypePage.svelte (100%)
 rename ts/{ChangeNotetype => change-notetype}/Mapper.svelte (100%)
 rename ts/{ChangeNotetype => change-notetype}/MapperRow.svelte (100%)
 rename ts/{ChangeNotetype => change-notetype}/NotetypeSelector.svelte (100%)
 rename ts/{ChangeNotetype => change-notetype}/SaveButton.svelte (100%)
 rename ts/{ChangeNotetype/ChangeNotetype-base.scss => change-notetype/change-notetype-base.scss} (100%)
 rename ts/{ChangeNotetype/ChangeNotetype.html => change-notetype/change-notetype.html} (79%)
 rename ts/{ChangeNotetype => change-notetype}/index.ts (95%)
 rename ts/{ChangeNotetype => change-notetype}/lib.test.ts (100%)
 rename ts/{ChangeNotetype => change-notetype}/lib.ts (100%)
 delete mode 100644 ts/components/WithLabel.svelte
 rename ts/components/{contextKeys.ts => context-keys.ts} (100%)
 delete mode 100644 ts/components/types.ts
 rename ts/{deckoptions => deck-options}/Addons.svelte (100%)
 rename ts/{deckoptions => deck-options}/AdvancedOptions.svelte (100%)
 rename ts/{deckoptions => deck-options}/AudioOptions.svelte (100%)
 rename ts/{deckoptions => deck-options}/BUILD.bazel (95%)
 rename ts/{deckoptions => deck-options}/Badge.svelte (94%)
 rename ts/{deckoptions => deck-options}/BuryOptions.svelte (100%)
 rename ts/{deckoptions => deck-options}/CardStateCustomizer.svelte (100%)
 rename ts/{deckoptions => deck-options}/CheckBox.svelte (100%)
 rename ts/{deckoptions => deck-options}/CheckBoxRow.svelte (100%)
 rename ts/{deckoptions => deck-options}/Col.svelte (100%)
 rename ts/{deckoptions => deck-options}/ConfigSelector.svelte (98%)
 rename ts/{deckoptions => deck-options}/DailyLimits.svelte (100%)
 rename ts/{deckoptions => deck-options}/DeckOptionsPage.svelte (100%)
 rename ts/{deckoptions => deck-options}/DisplayOrder.svelte (100%)
 rename ts/{deckoptions => deck-options}/EnumSelector.svelte (83%)
 rename ts/{deckoptions => deck-options}/EnumSelectorRow.svelte (100%)
 rename ts/{deckoptions => deck-options}/HtmlAddon.svelte (100%)
 rename ts/{deckoptions => deck-options}/Label.svelte (100%)
 rename ts/{deckoptions => deck-options}/LapseOptions.svelte (100%)
 rename ts/{deckoptions => deck-options}/NewOptions.svelte (100%)
 rename ts/{deckoptions => deck-options}/RevertButton.svelte (97%)
 rename ts/{deckoptions => deck-options}/Row.svelte (100%)
 rename ts/{deckoptions => deck-options}/SaveButton.svelte (100%)
 rename ts/{deckoptions => deck-options}/SpinBox.svelte (88%)
 rename ts/{deckoptions => deck-options}/SpinBoxFloat.svelte (88%)
 rename ts/{deckoptions => deck-options}/SpinBoxFloatRow.svelte (100%)
 rename ts/{deckoptions => deck-options}/SpinBoxRow.svelte (100%)
 rename ts/{deckoptions => deck-options}/StepsInput.svelte (87%)
 rename ts/{deckoptions => deck-options}/StepsInputRow.svelte (100%)
 rename ts/{deckoptions => deck-options}/Switch.svelte (95%)
 rename ts/{deckoptions => deck-options}/SwitchRow.svelte (100%)
 rename ts/{deckoptions => deck-options}/TextInputModal.svelte (96%)
 rename ts/{deckoptions => deck-options}/TimerOptions.svelte (100%)
 rename ts/{deckoptions => deck-options}/TitledContainer.svelte (100%)
 rename ts/{deckoptions => deck-options}/TooltipLabel.svelte (100%)
 rename ts/{deckoptions => deck-options}/Warning.svelte (100%)
 rename ts/{deckoptions => deck-options}/WithTooltip.svelte (100%)
 rename ts/{deckoptions => deck-options}/col.ts (100%)
 rename ts/{deckoptions/deckoptions-base.scss => deck-options/deck-options-base.scss} (100%)
 rename ts/{deckoptions/deckoptions.html => deck-options/deck-options.html} (75%)
 rename ts/{deckoptions => deck-options}/icons.ts (100%)
 rename ts/{deckoptions => deck-options}/index.ts (98%)
 rename ts/{deckoptions => deck-options}/lib.test.ts (100%)
 rename ts/{deckoptions => deck-options}/lib.ts (100%)
 rename ts/{deckoptions => deck-options}/steps.test.ts (100%)
 rename ts/{deckoptions => deck-options}/steps.ts (100%)
 rename ts/{deckoptions => deck-options}/strings.ts (100%)
 rename ts/editor/{changeTimer.ts => change-timer.ts} (92%)
 rename ts/editor/{contextKeys.ts => context-keys.ts} (100%)
 rename ts/editor/{editingArea.ts => editing-area.ts} (97%)
 rename ts/editor/{editorField.ts => editor-field.ts} (92%)
 rename ts/editor/{focusHandlers.ts => focus-handlers.ts} (88%)
 rename ts/editor/{inputHandlers.ts => input-handlers.ts} (96%)
 rename ts/editor/{labelContainer.ts => label-container.ts} (100%)
 rename ts/editor/{noteId.ts => note-id.ts} (100%)
 rename ts/sass/{_fusion_vars.scss => _fusion-vars.scss} (100%)
 rename ts/sass/{button_mixins.scss => button-mixins.scss} (100%)
 rename ts/sass/{card_counts.scss => card-counts.scss} (100%)
 rename ts/sass/{night_mode.scss => night-mode.scss} (100%)

diff --git a/qt/aqt/changenotetype.py b/qt/aqt/changenotetype.py
index 3928bed04..89be796fb 100644
--- a/qt/aqt/changenotetype.py
+++ b/qt/aqt/changenotetype.py
@@ -52,7 +52,7 @@ class ChangeNotetypeDialog(QDialog):
 
         self.web = AnkiWebView(title=self.TITLE)
         self.web.setVisible(False)
-        self.web.load_ts_page("ChangeNotetype")
+        self.web.load_ts_page("change-notetype")
         layout = QVBoxLayout()
         layout.setContentsMargins(0, 0, 0, 0)
         layout.addWidget(self.web)
diff --git a/qt/aqt/data/web/css/deckbrowser.scss b/qt/aqt/data/web/css/deckbrowser.scss
index 21d7d54b7..6a123a23c 100644
--- a/qt/aqt/data/web/css/deckbrowser.scss
+++ b/qt/aqt/data/web/css/deckbrowser.scss
@@ -1,7 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use 'ts/sass/card_counts';
+@use 'ts/sass/card-counts';
 
 a.deck {
     color: var(--text-fg);
diff --git a/qt/aqt/data/web/css/overview.scss b/qt/aqt/data/web/css/overview.scss
index 7b9c4587e..7973aff99 100644
--- a/qt/aqt/data/web/css/overview.scss
+++ b/qt/aqt/data/web/css/overview.scss
@@ -1,7 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use 'ts/sass/card_counts';
+@use 'ts/sass/card-counts';
 
 .smallLink {
     font-size: 10px;
diff --git a/qt/aqt/data/web/css/reviewer-bottom.scss b/qt/aqt/data/web/css/reviewer-bottom.scss
index 3d2267b16..67ca6d3b2 100644
--- a/qt/aqt/data/web/css/reviewer-bottom.scss
+++ b/qt/aqt/data/web/css/reviewer-bottom.scss
@@ -1,7 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use 'ts/sass/card_counts';
+@use 'ts/sass/card-counts';
 
 body {
     margin: 0;
diff --git a/qt/aqt/data/web/pages/BUILD.bazel b/qt/aqt/data/web/pages/BUILD.bazel
index 8b24cbe54..b3aecd12f 100644
--- a/qt/aqt/data/web/pages/BUILD.bazel
+++ b/qt/aqt/data/web/pages/BUILD.bazel
@@ -3,8 +3,8 @@ load("//ts:copy.bzl", "copy_files_into_group")
 _pages = [
     "graphs",
     "congrats",
-    "deckoptions",
-    "ChangeNotetype",
+    "deck-options",
+    "change-notetype",
 ]
 
 [copy_files_into_group(
diff --git a/qt/aqt/deckoptions.py b/qt/aqt/deckoptions.py
index 3e87cfcda..9027bc8fb 100644
--- a/qt/aqt/deckoptions.py
+++ b/qt/aqt/deckoptions.py
@@ -46,7 +46,7 @@ class DeckOptionsDialog(QDialog):
 
         self.web = AnkiWebView(title=self.TITLE)
         self.web.setVisible(False)
-        self.web.load_ts_page("deckoptions")
+        self.web.load_ts_page("deck-options")
         layout = QVBoxLayout()
         layout.setContentsMargins(0, 0, 0, 0)
         layout.addWidget(self.web)
diff --git a/ts/ChangeNotetype/BUILD.bazel b/ts/change-notetype/BUILD.bazel
similarity index 93%
rename from ts/ChangeNotetype/BUILD.bazel
rename to ts/change-notetype/BUILD.bazel
index be24c1eac..697ae9685 100644
--- a/ts/ChangeNotetype/BUILD.bazel
+++ b/ts/change-notetype/BUILD.bazel
@@ -7,7 +7,7 @@ load("//ts:compile_sass.bzl", "compile_sass")
 load("//ts:jest.bzl", "jest_test")
 
 compile_sass(
-    srcs = ["ChangeNotetype-base.scss"],
+    srcs = ["change-notetype-base.scss"],
     group = "base_css",
     visibility = ["//visibility:public"],
     deps = [
@@ -48,7 +48,7 @@ ts_library(
     srcs = [
         "lib.ts",
     ],
-    module_name = "ChangeNotetype",
+    module_name = "change-notetype",
     deps = [
         "//ts/components",
         "//ts/lib",
@@ -60,7 +60,7 @@ ts_library(
 )
 
 esbuild(
-    name = "ChangeNotetype",
+    name = "change-notetype",
     srcs = [
         "//ts:protobuf-shim.js",
     ],
@@ -75,22 +75,22 @@ esbuild(
     external = [
         "protobufjs/light",
     ],
-    output_css = "ChangeNotetype.css",
+    output_css = "change-notetype.css",
     visibility = ["//visibility:public"],
     deps = [
         "index",
+        ":base_css",
+        "@npm//bootstrap",
+        "@npm//marked",
         "//ts/lib",
         "//ts/lib:backend_proto",
-        "@npm//bootstrap",
-        ":base_css",
         "//ts/sveltelib",
-        "@npm//marked",
         "//ts/components",
         "//ts/components:svelte_components",
     ] + svelte_names,
 )
 
-exports_files(["ChangeNotetype.html"])
+exports_files(["change-notetype.html"])
 
 # Tests
 ################
diff --git a/ts/ChangeNotetype/ChangeNotetypePage.svelte b/ts/change-notetype/ChangeNotetypePage.svelte
similarity index 100%
rename from ts/ChangeNotetype/ChangeNotetypePage.svelte
rename to ts/change-notetype/ChangeNotetypePage.svelte
diff --git a/ts/ChangeNotetype/Mapper.svelte b/ts/change-notetype/Mapper.svelte
similarity index 100%
rename from ts/ChangeNotetype/Mapper.svelte
rename to ts/change-notetype/Mapper.svelte
diff --git a/ts/ChangeNotetype/MapperRow.svelte b/ts/change-notetype/MapperRow.svelte
similarity index 100%
rename from ts/ChangeNotetype/MapperRow.svelte
rename to ts/change-notetype/MapperRow.svelte
diff --git a/ts/ChangeNotetype/NotetypeSelector.svelte b/ts/change-notetype/NotetypeSelector.svelte
similarity index 100%
rename from ts/ChangeNotetype/NotetypeSelector.svelte
rename to ts/change-notetype/NotetypeSelector.svelte
diff --git a/ts/ChangeNotetype/SaveButton.svelte b/ts/change-notetype/SaveButton.svelte
similarity index 100%
rename from ts/ChangeNotetype/SaveButton.svelte
rename to ts/change-notetype/SaveButton.svelte
diff --git a/ts/ChangeNotetype/ChangeNotetype-base.scss b/ts/change-notetype/change-notetype-base.scss
similarity index 100%
rename from ts/ChangeNotetype/ChangeNotetype-base.scss
rename to ts/change-notetype/change-notetype-base.scss
diff --git a/ts/ChangeNotetype/ChangeNotetype.html b/ts/change-notetype/change-notetype.html
similarity index 79%
rename from ts/ChangeNotetype/ChangeNotetype.html
rename to ts/change-notetype/change-notetype.html
index ffb644492..244e1cf81 100644
--- a/ts/ChangeNotetype/ChangeNotetype.html
+++ b/ts/change-notetype/change-notetype.html
@@ -3,11 +3,11 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" id="viewport" content="width=device-width" />
-        <link href="ChangeNotetype-base.css" rel="stylesheet" />
-        <link href="ChangeNotetype.css" rel="stylesheet" />
+        <link href="change-notetype-base.css" rel="stylesheet" />
+        <link href="change-notetype.css" rel="stylesheet" />
         <script src="../js/vendor/protobuf.min.js"></script>
         <script src="../js/vendor/bootstrap.bundle.min.js"></script>
-        <script src="ChangeNotetype.js"></script>
+        <script src="change-notetype.js"></script>
     </head>
     <body>
         <div id="main"></div>
diff --git a/ts/ChangeNotetype/index.ts b/ts/change-notetype/index.ts
similarity index 95%
rename from ts/ChangeNotetype/index.ts
rename to ts/change-notetype/index.ts
index 89482144d..67bb83707 100644
--- a/ts/ChangeNotetype/index.ts
+++ b/ts/change-notetype/index.ts
@@ -9,7 +9,7 @@ import { ChangeNotetypeState, getChangeNotetypeInfo, getNotetypeNames } from "./
 import { setupI18n, ModuleName } from "lib/i18n";
 import { checkNightMode } from "lib/nightmode";
 import ChangeNotetypePage from "./ChangeNotetypePage.svelte";
-import { nightModeKey } from "components/contextKeys";
+import { nightModeKey } from "components/context-keys";
 
 export async function changeNotetypePage(
     target: HTMLDivElement,
diff --git a/ts/ChangeNotetype/lib.test.ts b/ts/change-notetype/lib.test.ts
similarity index 100%
rename from ts/ChangeNotetype/lib.test.ts
rename to ts/change-notetype/lib.test.ts
diff --git a/ts/ChangeNotetype/lib.ts b/ts/change-notetype/lib.ts
similarity index 100%
rename from ts/ChangeNotetype/lib.ts
rename to ts/change-notetype/lib.ts
diff --git a/ts/components/ButtonDropdown.svelte b/ts/components/ButtonDropdown.svelte
index 8c18d92a3..4beaaccc0 100644
--- a/ts/components/ButtonDropdown.svelte
+++ b/ts/components/ButtonDropdown.svelte
@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import { setContext } from "svelte";
-    import { dropdownKey } from "./contextKeys";
+    import { dropdownKey } from "./context-keys";
 
     import ButtonToolbar from "./ButtonToolbar.svelte";
 
diff --git a/ts/components/ButtonGroup.svelte b/ts/components/ButtonGroup.svelte
index d6577d958..53d834d30 100644
--- a/ts/components/ButtonGroup.svelte
+++ b/ts/components/ButtonGroup.svelte
@@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ButtonGroupItem from "./ButtonGroupItem.svelte";
     import { setContext } from "svelte";
     import { writable } from "svelte/store";
-    import { buttonGroupKey } from "./contextKeys";
+    import { buttonGroupKey } from "./context-keys";
     import type { Identifier } from "./identifier";
     import { insertElement, appendElement } from "./identifier";
     import type { ButtonRegistration } from "./buttons";
diff --git a/ts/components/ButtonGroupItem.svelte b/ts/components/ButtonGroupItem.svelte
index 9f0656ea4..50a9938bf 100644
--- a/ts/components/ButtonGroupItem.svelte
+++ b/ts/components/ButtonGroupItem.svelte
@@ -11,7 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Register } from "./registration";
 
     import { getContext, hasContext } from "svelte";
-    import { buttonGroupKey } from "./contextKeys";
+    import { buttonGroupKey } from "./context-keys";
 
     export let id: string | undefined = undefined;
     export let registration: ButtonRegistration | undefined = undefined;
diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte
index bbdf968ad..a81e3cc6f 100644
--- a/ts/components/ButtonToolbar.svelte
+++ b/ts/components/ButtonToolbar.svelte
@@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { setContext } from "svelte";
     import { writable } from "svelte/store";
     import Item from "./Item.svelte";
-    import { sectionKey } from "./contextKeys";
+    import { sectionKey } from "./context-keys";
     import type { Identifier } from "./identifier";
     import { insertElement, appendElement } from "./identifier";
     import type { SvelteComponent, Registration } from "./registration";
diff --git a/ts/components/DropdownItem.svelte b/ts/components/DropdownItem.svelte
index 7ccae8405..5a2cedc58 100644
--- a/ts/components/DropdownItem.svelte
+++ b/ts/components/DropdownItem.svelte
@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import { onMount, createEventDispatcher, getContext } from "svelte";
-    import { nightModeKey } from "./contextKeys";
+    import { nightModeKey } from "./context-keys";
 
     export let id: string | undefined = undefined;
     let className = "";
@@ -34,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </button>
 
 <style lang="scss">
-    @use 'ts/sass/button_mixins' as button;
+    @use 'ts/sass/button-mixins' as button;
 
     button {
         display: flex;
diff --git a/ts/components/DropdownMenu.svelte b/ts/components/DropdownMenu.svelte
index 84423e7ea..e960ef943 100644
--- a/ts/components/DropdownMenu.svelte
+++ b/ts/components/DropdownMenu.svelte
@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import { setContext } from "svelte";
-    import { dropdownKey } from "./contextKeys";
+    import { dropdownKey } from "./context-keys";
 
     export let id: string | undefined = undefined;
 
diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index 7c02c44fe..d64bdded0 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import { getContext, onMount, createEventDispatcher } from "svelte";
-    import { nightModeKey, dropdownKey } from "./contextKeys";
+    import { nightModeKey, dropdownKey } from "./context-keys";
     import type { DropdownProps } from "./dropdown";
 
     export let id: string | undefined = undefined;
@@ -49,7 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </button>
 
 <style lang="scss">
-    @use "ts/sass/button_mixins" as button;
+    @use "ts/sass/button-mixins" as button;
 
     button {
         padding: 0;
diff --git a/ts/components/Item.svelte b/ts/components/Item.svelte
index 09e086f3a..8f6906ff5 100644
--- a/ts/components/Item.svelte
+++ b/ts/components/Item.svelte
@@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Register, Registration } from "./registration";
 
     import { getContext, hasContext } from "svelte";
-    import { sectionKey } from "./contextKeys";
+    import { sectionKey } from "./context-keys";
 
     export let id: string | undefined = undefined;
     export let registration: Registration | undefined = undefined;
diff --git a/ts/components/LabelButton.svelte b/ts/components/LabelButton.svelte
index d0a3b5df1..2a7326d68 100644
--- a/ts/components/LabelButton.svelte
+++ b/ts/components/LabelButton.svelte
@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
-    import { disabledKey, nightModeKey, dropdownKey } from "./contextKeys";
+    import { disabledKey, nightModeKey, dropdownKey } from "./context-keys";
     import type { DropdownProps } from "./dropdown";
 
     export let id: string | undefined = undefined;
@@ -53,7 +53,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </button>
 
 <style lang="scss">
-    @use "ts/sass/button_mixins" as button;
+    @use "ts/sass/button-mixins" as button;
 
     button {
         padding: 0 calc(var(--buttons-size) / 3);
diff --git a/ts/components/Section.svelte b/ts/components/Section.svelte
index 4483d5ff0..45ef6f567 100644
--- a/ts/components/Section.svelte
+++ b/ts/components/Section.svelte
@@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { setContext } from "svelte";
     import { writable } from "svelte/store";
     import Item from "./Item.svelte";
-    import { sectionKey } from "./contextKeys";
+    import { sectionKey } from "./context-keys";
     import type { Identifier } from "./identifier";
     import { insertElement, appendElement } from "./identifier";
     import type { SvelteComponent, Registration } from "./registration";
diff --git a/ts/components/SelectButton.svelte b/ts/components/SelectButton.svelte
index f4c0230a9..17060fd20 100644
--- a/ts/components/SelectButton.svelte
+++ b/ts/components/SelectButton.svelte
@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
-    import { disabledKey, nightModeKey } from "./contextKeys";
+    import { disabledKey, nightModeKey } from "./context-keys";
 
     export let id: string | undefined = undefined;
     let className = "";
@@ -43,7 +43,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </select>
 
 <style lang="scss">
-    @use "ts/sass/button_mixins" as button;
+    @use "ts/sass/button-mixins" as button;
 
     select {
         height: var(--buttons-size);
diff --git a/ts/components/WithDropdown.svelte b/ts/components/WithDropdown.svelte
index 00ab70ed5..c50008fdb 100644
--- a/ts/components/WithDropdown.svelte
+++ b/ts/components/WithDropdown.svelte
@@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Dropdown from "bootstrap/js/dist/dropdown";
 
     import { setContext, onDestroy } from "svelte";
-    import { dropdownKey } from "./contextKeys";
+    import { dropdownKey } from "./context-keys";
 
     setContext(dropdownKey, {
         dropdown: true,
diff --git a/ts/components/WithLabel.svelte b/ts/components/WithLabel.svelte
deleted file mode 100644
index 97f9a1e11..000000000
--- a/ts/components/WithLabel.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="typescript">
-    import type { ToolbarItem } from "./types";
-
-    export let id: string;
-    export let className = "";
-
-    export let label: string;
-    export let button: ToolbarItem;
-</script>
-
-<!-- svelte-ignore a11y-label-has-associated-control -->
-
-<label {id} class={className}>
-    <span class="me-1">{label}</span>
-    <svelte:component this={button.component} {...button} />
-</label>
-
-<style lang="scss">
-    label {
-        display: flex;
-        padding: 0 calc(var(--buttons-size) / 10);
-    }
-</style>
diff --git a/ts/components/contextKeys.ts b/ts/components/context-keys.ts
similarity index 100%
rename from ts/components/contextKeys.ts
rename to ts/components/context-keys.ts
diff --git a/ts/components/types.ts b/ts/components/types.ts
deleted file mode 100644
index ef4b39a31..000000000
--- a/ts/components/types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
-import type { SvelteComponentDev } from "svelte/internal";
-
-export interface ToolbarItem<
-    T extends typeof SvelteComponentDev = typeof SvelteComponentDev
-> extends DynamicSvelteComponent<T> {
-    id?: string;
-    hidden?: boolean;
-}
-
-export interface IterableToolbarItem<
-    T extends typeof SvelteComponentDev = typeof SvelteComponentDev
-> extends ToolbarItem<T> {
-    items: ToolbarItem[];
-}
diff --git a/ts/deckoptions/Addons.svelte b/ts/deck-options/Addons.svelte
similarity index 100%
rename from ts/deckoptions/Addons.svelte
rename to ts/deck-options/Addons.svelte
diff --git a/ts/deckoptions/AdvancedOptions.svelte b/ts/deck-options/AdvancedOptions.svelte
similarity index 100%
rename from ts/deckoptions/AdvancedOptions.svelte
rename to ts/deck-options/AdvancedOptions.svelte
diff --git a/ts/deckoptions/AudioOptions.svelte b/ts/deck-options/AudioOptions.svelte
similarity index 100%
rename from ts/deckoptions/AudioOptions.svelte
rename to ts/deck-options/AudioOptions.svelte
diff --git a/ts/deckoptions/BUILD.bazel b/ts/deck-options/BUILD.bazel
similarity index 95%
rename from ts/deckoptions/BUILD.bazel
rename to ts/deck-options/BUILD.bazel
index 688733c84..6703cb8b5 100644
--- a/ts/deckoptions/BUILD.bazel
+++ b/ts/deck-options/BUILD.bazel
@@ -8,7 +8,7 @@ load("//ts:compile_sass.bzl", "compile_sass")
 load("//ts:jest.bzl", "jest_test")
 
 compile_sass(
-    srcs = ["deckoptions-base.scss"],
+    srcs = ["deck-options-base.scss"],
     group = "base_css",
     visibility = ["//visibility:public"],
     deps = [
@@ -76,7 +76,7 @@ ts_library(
 )
 
 esbuild(
-    name = "deckoptions",
+    name = "deck-options",
     srcs = [
         "//ts:protobuf-shim.js",
     ],
@@ -91,23 +91,23 @@ esbuild(
     external = [
         "protobufjs/light",
     ],
-    output_css = "deckoptions.css",
+    output_css = "deck-options.css",
     visibility = ["//visibility:public"],
     deps = [
         "index",
+        ":bootstrap-icons",
+        ":base_css",
+        "@npm//bootstrap",
+        "@npm//marked",
         "//ts/lib",
         "//ts/lib:backend_proto",
-        ":bootstrap-icons",
-        "@npm//bootstrap",
-        ":base_css",
         "//ts/sveltelib",
-        "@npm//marked",
         "//ts/components",
         "//ts/components:svelte_components",
     ] + svelte_names,
 )
 
-exports_files(["deckoptions.html"])
+exports_files(["deck-options.html"])
 
 # Tests
 ################
diff --git a/ts/deckoptions/Badge.svelte b/ts/deck-options/Badge.svelte
similarity index 94%
rename from ts/deckoptions/Badge.svelte
rename to ts/deck-options/Badge.svelte
index 5fbfa4d4b..be767bb24 100644
--- a/ts/deckoptions/Badge.svelte
+++ b/ts/deck-options/Badge.svelte
@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import type { DropdownProps } from "components/dropdown";
-    import { dropdownKey } from "components/contextKeys";
+    import { dropdownKey } from "components/context-keys";
     import { onMount, createEventDispatcher, getContext } from "svelte";
 
     let className = "";
diff --git a/ts/deckoptions/BuryOptions.svelte b/ts/deck-options/BuryOptions.svelte
similarity index 100%
rename from ts/deckoptions/BuryOptions.svelte
rename to ts/deck-options/BuryOptions.svelte
diff --git a/ts/deckoptions/CardStateCustomizer.svelte b/ts/deck-options/CardStateCustomizer.svelte
similarity index 100%
rename from ts/deckoptions/CardStateCustomizer.svelte
rename to ts/deck-options/CardStateCustomizer.svelte
diff --git a/ts/deckoptions/CheckBox.svelte b/ts/deck-options/CheckBox.svelte
similarity index 100%
rename from ts/deckoptions/CheckBox.svelte
rename to ts/deck-options/CheckBox.svelte
diff --git a/ts/deckoptions/CheckBoxRow.svelte b/ts/deck-options/CheckBoxRow.svelte
similarity index 100%
rename from ts/deckoptions/CheckBoxRow.svelte
rename to ts/deck-options/CheckBoxRow.svelte
diff --git a/ts/deckoptions/Col.svelte b/ts/deck-options/Col.svelte
similarity index 100%
rename from ts/deckoptions/Col.svelte
rename to ts/deck-options/Col.svelte
diff --git a/ts/deckoptions/ConfigSelector.svelte b/ts/deck-options/ConfigSelector.svelte
similarity index 98%
rename from ts/deckoptions/ConfigSelector.svelte
rename to ts/deck-options/ConfigSelector.svelte
index 9d51bd886..c80b15924 100644
--- a/ts/deckoptions/ConfigSelector.svelte
+++ b/ts/deck-options/ConfigSelector.svelte
@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "lib/i18n";
     import { getContext } from "svelte";
-    import { modalsKey } from "components/contextKeys";
+    import { modalsKey } from "components/context-keys";
     import type { DeckOptionsState, ConfigListEntry } from "./lib";
     import type Modal from "bootstrap/js/dist/modal";
 
diff --git a/ts/deckoptions/DailyLimits.svelte b/ts/deck-options/DailyLimits.svelte
similarity index 100%
rename from ts/deckoptions/DailyLimits.svelte
rename to ts/deck-options/DailyLimits.svelte
diff --git a/ts/deckoptions/DeckOptionsPage.svelte b/ts/deck-options/DeckOptionsPage.svelte
similarity index 100%
rename from ts/deckoptions/DeckOptionsPage.svelte
rename to ts/deck-options/DeckOptionsPage.svelte
diff --git a/ts/deckoptions/DisplayOrder.svelte b/ts/deck-options/DisplayOrder.svelte
similarity index 100%
rename from ts/deckoptions/DisplayOrder.svelte
rename to ts/deck-options/DisplayOrder.svelte
diff --git a/ts/deckoptions/EnumSelector.svelte b/ts/deck-options/EnumSelector.svelte
similarity index 83%
rename from ts/deckoptions/EnumSelector.svelte
rename to ts/deck-options/EnumSelector.svelte
index b5725ed86..0473dbf55 100644
--- a/ts/deckoptions/EnumSelector.svelte
+++ b/ts/deck-options/EnumSelector.svelte
@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { getContext } from "svelte";
-    import { nightModeKey } from "components/contextKeys";
+    import { nightModeKey } from "components/context-keys";
 
     export let choices: string[];
     export let value: number = 0;
@@ -24,8 +24,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </select>
 
 <style lang="scss">
-    @use "ts/sass/night_mode" as nightmode;
-    @use "ts/sass/button_mixins" as button;
+    @use "ts/sass/night-mode" as nightmode;
+    @use "ts/sass/button-mixins" as button;
 
     .nightMode {
         @include nightmode.input;
diff --git a/ts/deckoptions/EnumSelectorRow.svelte b/ts/deck-options/EnumSelectorRow.svelte
similarity index 100%
rename from ts/deckoptions/EnumSelectorRow.svelte
rename to ts/deck-options/EnumSelectorRow.svelte
diff --git a/ts/deckoptions/HtmlAddon.svelte b/ts/deck-options/HtmlAddon.svelte
similarity index 100%
rename from ts/deckoptions/HtmlAddon.svelte
rename to ts/deck-options/HtmlAddon.svelte
diff --git a/ts/deckoptions/Label.svelte b/ts/deck-options/Label.svelte
similarity index 100%
rename from ts/deckoptions/Label.svelte
rename to ts/deck-options/Label.svelte
diff --git a/ts/deckoptions/LapseOptions.svelte b/ts/deck-options/LapseOptions.svelte
similarity index 100%
rename from ts/deckoptions/LapseOptions.svelte
rename to ts/deck-options/LapseOptions.svelte
diff --git a/ts/deckoptions/NewOptions.svelte b/ts/deck-options/NewOptions.svelte
similarity index 100%
rename from ts/deckoptions/NewOptions.svelte
rename to ts/deck-options/NewOptions.svelte
diff --git a/ts/deckoptions/RevertButton.svelte b/ts/deck-options/RevertButton.svelte
similarity index 97%
rename from ts/deckoptions/RevertButton.svelte
rename to ts/deck-options/RevertButton.svelte
index 948982d57..8432893ea 100644
--- a/ts/deckoptions/RevertButton.svelte
+++ b/ts/deck-options/RevertButton.svelte
@@ -11,7 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Badge from "./Badge.svelte";
     import { revertIcon } from "./icons";
     import { isEqual as isEqualLodash, cloneDeep } from "lodash-es";
-    import { touchDeviceKey } from "components/contextKeys";
+    import { touchDeviceKey } from "components/context-keys";
     import { getContext } from "svelte";
 
     type T = unknown;
diff --git a/ts/deckoptions/Row.svelte b/ts/deck-options/Row.svelte
similarity index 100%
rename from ts/deckoptions/Row.svelte
rename to ts/deck-options/Row.svelte
diff --git a/ts/deckoptions/SaveButton.svelte b/ts/deck-options/SaveButton.svelte
similarity index 100%
rename from ts/deckoptions/SaveButton.svelte
rename to ts/deck-options/SaveButton.svelte
diff --git a/ts/deckoptions/SpinBox.svelte b/ts/deck-options/SpinBox.svelte
similarity index 88%
rename from ts/deckoptions/SpinBox.svelte
rename to ts/deck-options/SpinBox.svelte
index 2c51ed94d..505420c33 100644
--- a/ts/deckoptions/SpinBox.svelte
+++ b/ts/deck-options/SpinBox.svelte
@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { getContext } from "svelte";
-    import { nightModeKey } from "components/contextKeys";
+    import { nightModeKey } from "components/context-keys";
 
     export let value: number;
     export let min = 1;
@@ -34,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 />
 
 <style lang="scss">
-    @use "ts/sass/night_mode" as nightmode;
+    @use "ts/sass/night-mode" as nightmode;
 
     .nightMode {
         @include nightmode.input;
diff --git a/ts/deckoptions/SpinBoxFloat.svelte b/ts/deck-options/SpinBoxFloat.svelte
similarity index 88%
rename from ts/deckoptions/SpinBoxFloat.svelte
rename to ts/deck-options/SpinBoxFloat.svelte
index 8125a86df..cfcd8e4aa 100644
--- a/ts/deckoptions/SpinBoxFloat.svelte
+++ b/ts/deck-options/SpinBoxFloat.svelte
@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { getContext } from "svelte";
-    import { nightModeKey } from "components/contextKeys";
+    import { nightModeKey } from "components/context-keys";
 
     export let value: number;
     export let min = 1;
@@ -34,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 />
 
 <style lang="scss">
-    @use "ts/sass/night_mode" as nightmode;
+    @use "ts/sass/night-mode" as nightmode;
 
     .nightMode {
         @include nightmode.input;
diff --git a/ts/deckoptions/SpinBoxFloatRow.svelte b/ts/deck-options/SpinBoxFloatRow.svelte
similarity index 100%
rename from ts/deckoptions/SpinBoxFloatRow.svelte
rename to ts/deck-options/SpinBoxFloatRow.svelte
diff --git a/ts/deckoptions/SpinBoxRow.svelte b/ts/deck-options/SpinBoxRow.svelte
similarity index 100%
rename from ts/deckoptions/SpinBoxRow.svelte
rename to ts/deck-options/SpinBoxRow.svelte
diff --git a/ts/deckoptions/StepsInput.svelte b/ts/deck-options/StepsInput.svelte
similarity index 87%
rename from ts/deckoptions/StepsInput.svelte
rename to ts/deck-options/StepsInput.svelte
index 20c2ce57c..16877bd77 100644
--- a/ts/deckoptions/StepsInput.svelte
+++ b/ts/deck-options/StepsInput.svelte
@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { getContext } from "svelte";
-    import { nightModeKey } from "components/contextKeys";
+    import { nightModeKey } from "components/context-keys";
     import { stepsToString, stringToSteps } from "./steps";
 
     export let value: number[];
@@ -28,7 +28,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 />
 
 <style lang="scss">
-    @use "ts/sass/night_mode" as nightmode;
+    @use "ts/sass/night-mode" as nightmode;
 
     .nightMode {
         @include nightmode.input;
diff --git a/ts/deckoptions/StepsInputRow.svelte b/ts/deck-options/StepsInputRow.svelte
similarity index 100%
rename from ts/deckoptions/StepsInputRow.svelte
rename to ts/deck-options/StepsInputRow.svelte
diff --git a/ts/deckoptions/Switch.svelte b/ts/deck-options/Switch.svelte
similarity index 95%
rename from ts/deckoptions/Switch.svelte
rename to ts/deck-options/Switch.svelte
index 502e9b60f..090b5d8d4 100644
--- a/ts/deckoptions/Switch.svelte
+++ b/ts/deck-options/Switch.svelte
@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { getContext } from "svelte";
-    import { nightModeKey } from "components/contextKeys";
+    import { nightModeKey } from "components/context-keys";
 
     export let id: string | undefined;
     export let value: boolean;
diff --git a/ts/deckoptions/SwitchRow.svelte b/ts/deck-options/SwitchRow.svelte
similarity index 100%
rename from ts/deckoptions/SwitchRow.svelte
rename to ts/deck-options/SwitchRow.svelte
diff --git a/ts/deckoptions/TextInputModal.svelte b/ts/deck-options/TextInputModal.svelte
similarity index 96%
rename from ts/deckoptions/TextInputModal.svelte
rename to ts/deck-options/TextInputModal.svelte
index 306c70ee7..e8cde4f94 100644
--- a/ts/deckoptions/TextInputModal.svelte
+++ b/ts/deck-options/TextInputModal.svelte
@@ -7,7 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     @typescript-eslint/no-non-null-assertion: "off",
     */
     import { onMount, onDestroy, getContext } from "svelte";
-    import { nightModeKey, modalsKey } from "components/contextKeys";
+    import { nightModeKey, modalsKey } from "components/context-keys";
     import Modal from "bootstrap/js/dist/modal";
 
     export let title: string;
@@ -96,7 +96,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </div>
 
 <style lang="scss">
-    @use "ts/sass/night_mode" as nightmode;
+    @use "ts/sass/night-mode" as nightmode;
 
     .nightMode {
         @include nightmode.input;
diff --git a/ts/deckoptions/TimerOptions.svelte b/ts/deck-options/TimerOptions.svelte
similarity index 100%
rename from ts/deckoptions/TimerOptions.svelte
rename to ts/deck-options/TimerOptions.svelte
diff --git a/ts/deckoptions/TitledContainer.svelte b/ts/deck-options/TitledContainer.svelte
similarity index 100%
rename from ts/deckoptions/TitledContainer.svelte
rename to ts/deck-options/TitledContainer.svelte
diff --git a/ts/deckoptions/TooltipLabel.svelte b/ts/deck-options/TooltipLabel.svelte
similarity index 100%
rename from ts/deckoptions/TooltipLabel.svelte
rename to ts/deck-options/TooltipLabel.svelte
diff --git a/ts/deckoptions/Warning.svelte b/ts/deck-options/Warning.svelte
similarity index 100%
rename from ts/deckoptions/Warning.svelte
rename to ts/deck-options/Warning.svelte
diff --git a/ts/deckoptions/WithTooltip.svelte b/ts/deck-options/WithTooltip.svelte
similarity index 100%
rename from ts/deckoptions/WithTooltip.svelte
rename to ts/deck-options/WithTooltip.svelte
diff --git a/ts/deckoptions/col.ts b/ts/deck-options/col.ts
similarity index 100%
rename from ts/deckoptions/col.ts
rename to ts/deck-options/col.ts
diff --git a/ts/deckoptions/deckoptions-base.scss b/ts/deck-options/deck-options-base.scss
similarity index 100%
rename from ts/deckoptions/deckoptions-base.scss
rename to ts/deck-options/deck-options-base.scss
diff --git a/ts/deckoptions/deckoptions.html b/ts/deck-options/deck-options.html
similarity index 75%
rename from ts/deckoptions/deckoptions.html
rename to ts/deck-options/deck-options.html
index 456031072..ecbbb4def 100644
--- a/ts/deckoptions/deckoptions.html
+++ b/ts/deck-options/deck-options.html
@@ -3,11 +3,11 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" id="viewport" content="width=device-width" />
-        <link href="deckoptions-base.css" rel="stylesheet" />
-        <link href="deckoptions.css" rel="stylesheet" />
+        <link href="deck-options-base.css" rel="stylesheet" />
+        <link href="deck-options.css" rel="stylesheet" />
         <script src="../js/vendor/protobuf.min.js"></script>
         <script src="../js/vendor/bootstrap.bundle.min.js"></script>
-        <script src="deckoptions.js"></script>
+        <script src="deck-options.js"></script>
     </head>
     <body>
         <div id="main"></div>
diff --git a/ts/deckoptions/icons.ts b/ts/deck-options/icons.ts
similarity index 100%
rename from ts/deckoptions/icons.ts
rename to ts/deck-options/icons.ts
diff --git a/ts/deckoptions/index.ts b/ts/deck-options/index.ts
similarity index 98%
rename from ts/deckoptions/index.ts
rename to ts/deck-options/index.ts
index 436146eb1..5fa0c33a2 100644
--- a/ts/deckoptions/index.ts
+++ b/ts/deck-options/index.ts
@@ -14,7 +14,7 @@ import SpinBoxFloat from "./SpinBoxFloat.svelte";
 import EnumSelector from "./EnumSelector.svelte";
 import CheckBox from "./CheckBox.svelte";
 
-import { nightModeKey, touchDeviceKey, modalsKey } from "components/contextKeys";
+import { nightModeKey, touchDeviceKey, modalsKey } from "components/context-keys";
 
 export async function deckOptions(
     target: HTMLDivElement,
diff --git a/ts/deckoptions/lib.test.ts b/ts/deck-options/lib.test.ts
similarity index 100%
rename from ts/deckoptions/lib.test.ts
rename to ts/deck-options/lib.test.ts
diff --git a/ts/deckoptions/lib.ts b/ts/deck-options/lib.ts
similarity index 100%
rename from ts/deckoptions/lib.ts
rename to ts/deck-options/lib.ts
diff --git a/ts/deckoptions/steps.test.ts b/ts/deck-options/steps.test.ts
similarity index 100%
rename from ts/deckoptions/steps.test.ts
rename to ts/deck-options/steps.test.ts
diff --git a/ts/deckoptions/steps.ts b/ts/deck-options/steps.ts
similarity index 100%
rename from ts/deckoptions/steps.ts
rename to ts/deck-options/steps.ts
diff --git a/ts/deckoptions/strings.ts b/ts/deck-options/strings.ts
similarity index 100%
rename from ts/deckoptions/strings.ts
rename to ts/deck-options/strings.ts
diff --git a/ts/editor/ClozeButton.svelte b/ts/editor/ClozeButton.svelte
index e5fa9f934..a83428583 100644
--- a/ts/editor/ClozeButton.svelte
+++ b/ts/editor/ClozeButton.svelte
@@ -4,8 +4,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import * as tr from "lib/i18n";
-    import { disabledKey } from "components/contextKeys";
-    import { inCodableKey } from "./contextKeys";
+    import { disabledKey } from "components/context-keys";
+    import { inCodableKey } from "./context-keys";
 
     import IconButton from "components/IconButton.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
diff --git a/ts/editor/FormatBlockButtons.svelte b/ts/editor/FormatBlockButtons.svelte
index ee65cbb08..3cade2d96 100644
--- a/ts/editor/FormatBlockButtons.svelte
+++ b/ts/editor/FormatBlockButtons.svelte
@@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import type { EditingArea } from "./editingArea";
+    import type { EditingArea } from "./editing-area";
     import * as tr from "lib/i18n";
 
     import ButtonGroup from "components/ButtonGroup.svelte";
diff --git a/ts/editor/OnlyEditable.svelte b/ts/editor/OnlyEditable.svelte
index c36bfa86d..1dac48d73 100644
--- a/ts/editor/OnlyEditable.svelte
+++ b/ts/editor/OnlyEditable.svelte
@@ -4,8 +4,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import WithContext from "components/WithContext.svelte";
-    import { disabledKey } from "components/contextKeys";
-    import { inCodableKey } from "./contextKeys";
+    import { disabledKey } from "components/context-keys";
+    import { inCodableKey } from "./context-keys";
 </script>
 
 <WithContext key={disabledKey} let:context={disabled}>
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index 42dd4164b..693a7b4b7 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -5,8 +5,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import * as tr from "lib/i18n";
     import { bridgeCommand } from "lib/bridgecommand";
-    import { disabledKey } from "components/contextKeys";
-    import { inCodableKey } from "./contextKeys";
+    import { disabledKey } from "components/context-keys";
+    import { inCodableKey } from "./context-keys";
 
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
diff --git a/ts/editor/changeTimer.ts b/ts/editor/change-timer.ts
similarity index 92%
rename from ts/editor/changeTimer.ts
rename to ts/editor/change-timer.ts
index 577cc3c82..fb580fb84 100644
--- a/ts/editor/changeTimer.ts
+++ b/ts/editor/change-timer.ts
@@ -1,11 +1,11 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import type { EditingArea } from "./editingArea";
+import type { EditingArea } from "./editing-area";
 
 import { getCurrentField } from ".";
 import { bridgeCommand } from "./lib";
-import { getNoteId } from "./noteId";
+import { getNoteId } from "./note-id";
 
 let changeTimer: number | null = null;
 
diff --git a/ts/editor/contextKeys.ts b/ts/editor/context-keys.ts
similarity index 100%
rename from ts/editor/contextKeys.ts
rename to ts/editor/context-keys.ts
diff --git a/ts/editor/editingArea.ts b/ts/editor/editing-area.ts
similarity index 97%
rename from ts/editor/editingArea.ts
rename to ts/editor/editing-area.ts
index 6dbc222cd..08933c2d0 100644
--- a/ts/editor/editingArea.ts
+++ b/ts/editor/editing-area.ts
@@ -10,8 +10,8 @@ import type { Codable } from "./codable";
 
 import { updateActiveButtons } from "./toolbar";
 import { bridgeCommand } from "./lib";
-import { onInput, onKey, onKeyUp } from "./inputHandlers";
-import { onFocus, onBlur } from "./focusHandlers";
+import { onInput, onKey, onKeyUp } from "./input-handlers";
+import { onFocus, onBlur } from "./focus-handlers";
 
 function onCutOrCopy(): void {
     bridgeCommand("cutOrCopy");
diff --git a/ts/editor/editorField.ts b/ts/editor/editor-field.ts
similarity index 92%
rename from ts/editor/editorField.ts
rename to ts/editor/editor-field.ts
index 789af8d3d..0c1cca362 100644
--- a/ts/editor/editorField.ts
+++ b/ts/editor/editor-field.ts
@@ -1,8 +1,8 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import type { EditingArea } from "./editingArea";
-import type { LabelContainer } from "./labelContainer";
+import type { EditingArea } from "./editing-area";
+import type { LabelContainer } from "./label-container";
 
 export class EditorField extends HTMLDivElement {
     labelContainer: LabelContainer;
diff --git a/ts/editor/focusHandlers.ts b/ts/editor/focus-handlers.ts
similarity index 88%
rename from ts/editor/focusHandlers.ts
rename to ts/editor/focus-handlers.ts
index 6d782cd9a..e72595d38 100644
--- a/ts/editor/focusHandlers.ts
+++ b/ts/editor/focus-handlers.ts
@@ -2,9 +2,9 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 import { enableButtons, disableButtons } from "./toolbar";
-import type { EditingArea } from "./editingArea";
+import type { EditingArea } from "./editing-area";
 
-import { saveField } from "./changeTimer";
+import { saveField } from "./change-timer";
 import { bridgeCommand } from "./lib";
 
 export function onFocus(evt: FocusEvent): void {
diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index a3325c550..14ec2e16b 100644
--- a/ts/editor/index.ts
+++ b/ts/editor/index.ts
@@ -11,17 +11,17 @@ import { setupI18n, ModuleName } from "lib/i18n";
 
 import "./fields.css";
 
-import { saveField } from "./changeTimer";
+import { saveField } from "./change-timer";
 
-import { EditorField } from "./editorField";
-import { LabelContainer } from "./labelContainer";
-import { EditingArea } from "./editingArea";
+import { EditorField } from "./editor-field";
+import { LabelContainer } from "./label-container";
+import { EditingArea } from "./editing-area";
 import { Editable } from "./editable";
 import { Codable } from "./codable";
 import { initToolbar } from "./toolbar";
 
-export { setNoteId, getNoteId } from "./noteId";
-export { saveNow } from "./changeTimer";
+export { setNoteId, getNoteId } from "./note-id";
+export { saveNow } from "./change-timer";
 export { wrap, wrapIntoText } from "./wrap";
 export { editorToolbar } from "./toolbar";
 
diff --git a/ts/editor/inputHandlers.ts b/ts/editor/input-handlers.ts
similarity index 96%
rename from ts/editor/inputHandlers.ts
rename to ts/editor/input-handlers.ts
index ae2c8c44f..3bd61eb8d 100644
--- a/ts/editor/inputHandlers.ts
+++ b/ts/editor/input-handlers.ts
@@ -6,9 +6,9 @@
  */
 
 import { updateActiveButtons } from "./toolbar";
-import { EditingArea } from "./editingArea";
+import { EditingArea } from "./editing-area";
 import { nodeIsElement } from "./helpers";
-import { triggerChangeTimer } from "./changeTimer";
+import { triggerChangeTimer } from "./change-timer";
 import { registerShortcut } from "lib/shortcuts";
 
 export function onInput(event: Event): void {
diff --git a/ts/editor/labelContainer.ts b/ts/editor/label-container.ts
similarity index 100%
rename from ts/editor/labelContainer.ts
rename to ts/editor/label-container.ts
diff --git a/ts/editor/noteId.ts b/ts/editor/note-id.ts
similarity index 100%
rename from ts/editor/noteId.ts
rename to ts/editor/note-id.ts
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index ac6c18b42..a8fb63ab1 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -6,8 +6,8 @@
 @typescript-eslint/no-explicit-any: "off",
  */
 
-import { disabledKey, nightModeKey } from "components/contextKeys";
-import { inCodableKey } from "./contextKeys";
+import { disabledKey, nightModeKey } from "components/context-keys";
+import { inCodableKey } from "./context-keys";
 import { writable } from "svelte/store";
 
 import EditorToolbar from "./EditorToolbar.svelte";
diff --git a/ts/sass/BUILD.bazel b/ts/sass/BUILD.bazel
index 947413cd9..11d62e1c3 100644
--- a/ts/sass/BUILD.bazel
+++ b/ts/sass/BUILD.bazel
@@ -14,7 +14,7 @@ sass_library(
 sass_library(
     name = "buttons_lib",
     srcs = [
-        "_fusion_vars.scss",
+        "_fusion-vars.scss",
         "buttons.scss",
     ],
     visibility = ["//visibility:public"],
@@ -23,7 +23,7 @@ sass_library(
 sass_library(
     name = "card_counts_lib",
     srcs = [
-        "card_counts.scss",
+        "card-counts.scss",
     ],
     visibility = ["//visibility:public"],
 )
@@ -48,7 +48,7 @@ sass_library(
 sass_library(
     name = "button_mixins_lib",
     srcs = [
-        "button_mixins.scss",
+        "button-mixins.scss",
     ],
     visibility = ["//visibility:public"],
 )
@@ -56,7 +56,7 @@ sass_library(
 sass_library(
     name = "night_mode_lib",
     srcs = [
-        "night_mode.scss",
+        "night-mode.scss",
     ],
     visibility = ["//visibility:public"],
 )
diff --git a/ts/sass/_fusion_vars.scss b/ts/sass/_fusion-vars.scss
similarity index 100%
rename from ts/sass/_fusion_vars.scss
rename to ts/sass/_fusion-vars.scss
diff --git a/ts/sass/bootstrap-dark.scss b/ts/sass/bootstrap-dark.scss
index 716119f94..b6161698f 100644
--- a/ts/sass/bootstrap-dark.scss
+++ b/ts/sass/bootstrap-dark.scss
@@ -2,7 +2,7 @@
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
 @use 'vars';
-@use 'fusion_vars';
+@use 'fusion-vars';
 
 @mixin night-mode {
     input,
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button-mixins.scss
similarity index 100%
rename from ts/sass/button_mixins.scss
rename to ts/sass/button-mixins.scss
diff --git a/ts/sass/buttons.scss b/ts/sass/buttons.scss
index bddc3baff..c7b29f544 100644
--- a/ts/sass/buttons.scss
+++ b/ts/sass/buttons.scss
@@ -1,4 +1,4 @@
-@use 'fusion_vars';
+@use 'fusion-vars';
 
 .isWin {
     button {
@@ -31,11 +31,11 @@
         /* match the fusion button gradient */
         background: linear-gradient(
             0deg,
-            fusion_vars.$button-gradient-start 0%,
-            fusion_vars.$button-gradient-end 100%
+            fusion-vars.$button-gradient-start 0%,
+            fusion-vars.$button-gradient-end 100%
         );
-        box-shadow: 0 0 3px fusion_vars.$button-outline;
-        border: 1px solid fusion_vars.$button-border;
+        box-shadow: 0 0 3px fusion-vars.$button-outline;
+        border: 1px solid fusion-vars.$button-border;
 
         border-radius: 2px;
         padding: 10px;
@@ -44,7 +44,7 @@
     }
 
     button:hover {
-        background: fusion_vars.$button-hover-bg;
+        background: fusion-vars.$button-hover-bg;
     }
 }
 
diff --git a/ts/sass/card_counts.scss b/ts/sass/card-counts.scss
similarity index 100%
rename from ts/sass/card_counts.scss
rename to ts/sass/card-counts.scss
diff --git a/ts/sass/night_mode.scss b/ts/sass/night-mode.scss
similarity index 100%
rename from ts/sass/night_mode.scss
rename to ts/sass/night-mode.scss
diff --git a/ts/sass/scrollbar.scss b/ts/sass/scrollbar.scss
index 3e92769c1..3ca8c7453 100644
--- a/ts/sass/scrollbar.scss
+++ b/ts/sass/scrollbar.scss
@@ -2,7 +2,7 @@
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
 @use 'vars';
-@use 'fusion_vars';
+@use 'fusion-vars';
 
 @mixin night-mode {
     &::-webkit-scrollbar {
@@ -18,7 +18,7 @@
     }
 
     &::-webkit-scrollbar-thumb {
-        background: fusion_vars.$button-hover-bg;
+        background: fusion-vars.$button-hover-bg;
         border-radius: 8px;
 
         &:horizontal {