update

src/ui/Beat/Beat.vue

@@ -22,7 +22,7 @@
                            @change="onMove" 
                            item-key="index">
                     <template #item="{ element }">
-                        <div class="beat-line">
+                        <div v-if="element.track.visible.value" class="beat-line">
                             <editable-text-field class="track-name" v-model="element.track.name.value" />
                             <span class="handle"><icon color="var(--color-ui-neutral-dark)" icon-name="list" /></span>
                             <track-view :beat-index="beatIndex" 
@@ -44,7 +44,7 @@
     import Draggable from "vuedraggable";
     import { TrackUnitStickingTypeList, type Track } from "@/Track";
     import Icon from "@/ui/Widgets/Icon/Icon.vue";
-import { StickingTypeIconMap } from "../TrackUnit/trackUnit";
+    import { StickingTypeIconMap } from "../TrackUnit/trackUnit";
 
     const props = defineProps<{
         beatIndex: number,

src/ui/TrackSettings/TrackSettings.vue

@@ -11,13 +11,17 @@
             </div>
             <div class="loop-settings-option" :class="{ hide: !track.looping.value }">
                 <number-input v-model="track.loopLength.value" />
-           </div>
+            </div>
+            <div class="visibility">
+                <icon color="var(--color-ui-neutral-dark)" :icon-name="track.visible.value ? 'eye' : 'eyeOff'" @click="track.visible.value = !track.visible.value"/>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
     import NumberInput from "@/ui/Widgets/NumberInput/NumberInput.vue";
+    import Icon from "@/ui/Widgets/Icon/Icon.vue";
     import BoolBox from "@/ui/Widgets/BoolBox/BoolBox.vue";
     import ActionButton from "@/ui/Widgets/ActionButton/ActionButton.vue";
     import EditableTextField from "@/ui/Widgets/EditableTextField/EditableTextField.vue";
@@ -39,7 +43,7 @@
         min-width: 100%;
         height: 2em;
     }
-p
+
     .track-settings-title-container > div {
         width: 100%;
         font-weight: bold;
@@ -81,4 +85,8 @@ p
         flex: auto;
         padding-right: 1em;
     }
+
+    .visibility { 
+        cursor: pointer;
+    }
 </style>

src/ui/Widgets/Icon/icons.ts

@@ -11,6 +11,8 @@ import Eraser from "@/assets/svgs/eraser-fill.svg";
 import Upload from "@/assets/svgs/upload.svg";
 import Floppy from "@/assets/svgs/floppy2-fill.svg";
 import Delete from "@/assets/svgs/delete.svg";
+import Eye from "@/assets/svgs/eye.svg";
+import EyeOff from "@/assets/svgs/eye-off.svg";
 
 export const IconUrlMap = {
     arrowClockwise: ArrowClockwise,
@@ -26,6 +28,8 @@ export const IconUrlMap = {
     upload: Upload,
     save: Floppy,
     delete: Delete,
+    eye: Eye,
+    eyeOff: EyeOff,
 } as const;
 
 export type IconName = keyof typeof IconUrlMap;