Added some important stuff again

src/main/java/de/fullrisk/citrusDev/UI/MyScreen.java

@@ -1,7 +1,6 @@
 package de.fullrisk.citrusDev.UI;
 
 import io.wispforest.owo.ui.base.BaseOwoScreen;
-import io.wispforest.owo.ui.component.LabelComponent;
 import io.wispforest.owo.ui.component.UIComponents;
 import io.wispforest.owo.ui.container.FlowLayout;
 import io.wispforest.owo.ui.container.UIContainers;
@@ -9,16 +8,45 @@ import io.wispforest.owo.ui.core.*;
 import net.minecraft.client.Minecraft;
 import net.minecraft.client.resources.sounds.SimpleSoundInstance;
 import net.minecraft.network.chat.Component;
+import net.minecraft.network.chat.FontDescription;
 import net.minecraft.resources.Identifier;
 import net.minecraft.sounds.SoundEvents;
 import de.fullrisk.citrusDev.UIHelper.ScalableLabel;
 import de.fullrisk.citrusDev.UIHelper.ScalableButton;
 import de.fullrisk.citrusDev.UIHelper.ScaleValue;
 
+import java.util.List;
+
+import static de.fullrisk.citrusDev.UI.Module_FPS.toggle;
+
 public class MyScreen extends BaseOwoScreen<FlowLayout> {
 
     private static final Identifier MC_FIVE = Identifier.fromNamespaceAndPath("citrus-dev", "minecraft_five");
 
+    private static final Surface GLASS_PANEL = Surface.blur(5f, 15f)
+            .and(Surface.flat(0x40FFFFFF))
+            .and(Surface.outline(0x64de4b));
+
+    private static final Surface DISABLED = Surface.blur(5f, 15f)
+            .and(Surface.flat(0x401c1c1c));
+
+    private static final Surface FLAT = Surface.blur(5f, 15f)
+            .and(Surface.flat(0x40FFFFFF));
+
+    private static final int PANEL_WIDTH = 250;
+    private static final int PANEL_HEIGHT = 150;
+    private static final int INNER_WIDTH = PANEL_WIDTH - 4;
+    private static final int INNER_HEIGHT = PANEL_HEIGHT - 4;
+    private static final int NAVBAR_HEIGHT = 24;
+    private static final int DIVIDER_SIZE = 1;
+    private static final int SIDEBAR_WIDTH = 34;
+    private static final int ROW_HEIGHT = INNER_HEIGHT - NAVBAR_HEIGHT - DIVIDER_SIZE;
+    private static final int CONTENT_WIDTH = INNER_WIDTH - SIDEBAR_WIDTH - DIVIDER_SIZE;
+
+    private record TabDef(String label, Runnable onClick) {}
+
+    private FlowLayout content;
+
     public MyScreen() {
         super(Component.literal("Citrus Dev"));
         Minecraft.getInstance().getSoundManager().play(
@@ -38,132 +66,262 @@ public class MyScreen extends BaseOwoScreen<FlowLayout> {
                 .horizontalAlignment(HorizontalAlignment.CENTER)
                 .verticalAlignment(VerticalAlignment.CENTER);
 
-        // ----- Main panel (now a horizontal container: sidebar | divider | content) -----
+        FlowLayout panel = UIContainers.verticalFlow(Sizing.content(), Sizing.content());
-        FlowLayout panel = UIContainers.horizontalFlow(Sizing.content(), Sizing.content());
         panel.gap(0);
         panel.padding(Insets.of(2));
-
         panel.horizontalAlignment(HorizontalAlignment.CENTER);
         panel.verticalAlignment(VerticalAlignment.CENTER);
         panel.horizontalSizing(Sizing.fixed(0));
         panel.verticalSizing(Sizing.fixed(0));
-        panel.horizontalSizing().animate(300, Easing.CUBIC, Sizing.fixed(250)).forwards();
+        panel.horizontalSizing().animate(300, Easing.CUBIC, Sizing.fixed(PANEL_WIDTH)).forwards();
-        panel.verticalSizing().animate(300, Easing.CUBIC, Sizing.fixed(150)).forwards();
+        panel.verticalSizing().animate(300, Easing.CUBIC, Sizing.fixed(PANEL_HEIGHT)).forwards();
+        panel.surface(GLASS_PANEL);
 
-        // inner content area, accounting for panel's 2px padding on each side
+        FlowLayout navbar = UIContainers.horizontalFlow(Sizing.fixed(INNER_WIDTH), Sizing.fixed(NAVBAR_HEIGHT));
-        int innerHeight = 150 - 4; // 146
+        buildNavbar(navbar);
-        int sidebarWidth = 34;
+        panel.child(navbar);
-        int dividerWidth = 1;
-        int contentWidth = 250 - 4 - sidebarWidth - dividerWidth; // 211
 
-        // ----- Sidebar -----
+        FlowLayout navDivider = UIContainers.horizontalFlow(Sizing.fixed(INNER_WIDTH), Sizing.fixed(DIVIDER_SIZE));
-        FlowLayout sidebar = UIContainers.verticalFlow(Sizing.fixed(sidebarWidth), Sizing.fixed(innerHeight));
+        navDivider.surface(Surface.flat(0x80FFFFFF));
-        sidebar.horizontalAlignment(HorizontalAlignment.CENTER);
+        panel.child(navDivider);
-        sidebar.verticalAlignment(VerticalAlignment.TOP);
-        sidebar.padding(Insets.of(4));
-        sidebar.gap(2);
 
-        var sidebarButton = new ScalableButton(Component.literal("+"), btn -> {
+        FlowLayout row = UIContainers.horizontalFlow(Sizing.fixed(INNER_WIDTH), Sizing.fixed(ROW_HEIGHT));
-            Minecraft.getInstance().getSoundManager().play(
+        row.gap(0);
-                    SimpleSoundInstance.forUI(SoundEvents.UI_BUTTON_CLICK.value(), 2.0F, 2)
-            );
-        },
-                0x80FFFFFF,  // base fill
-                0xA0FFFFFF,  // hovered fill
-                0xFFFFFFFF,  // base outline
-                0xFFFFFFFF,  // hovered outline
-                1            // outline width
-        );
-        sidebarButton.horizontalSizing(Sizing.fixed(20));
-        sidebarButton.verticalSizing(Sizing.fixed(20));
-        sidebarButton.scale().animate(300, Easing.CUBIC, new ScaleValue(1f)).forwards();
 
-        var friendsButton = new ScalableButton(Component.literal("-"), btn -> {
+        FlowLayout sidebar = buildSidebar();
-            Minecraft.getInstance().getSoundManager().play(
+        row.child(sidebar);
-                    SimpleSoundInstance.forUI(SoundEvents.UI_BUTTON_CLICK.value(), 2.0F, 2)
-            );
-        },
-                0x80FFFFFF,  // base fill
-                0xA0FFFFFF,  // hovered fill
-                0xFFFFFFFF,  // base outline
-                0xFFFFFFFF,  // hovered outline
-                1            // outline width
-        );
-        friendsButton.horizontalSizing(Sizing.fixed(20));
-        friendsButton.verticalSizing(Sizing.fixed(20));
-        friendsButton.scale().animate(300, Easing.CUBIC, new ScaleValue(1f)).forwards();
 
-// --- Sidebar Button Animations (Pop-in) ---
+        content = UIContainers.verticalFlow(Sizing.fixed(CONTENT_WIDTH), Sizing.fixed(ROW_HEIGHT));
-        sidebarButton.scale().set(new ScaleValue(0f));
-        sidebarButton.scale().animate(400, Easing.CUBIC, new ScaleValue(1f)).forwards();
-
-        friendsButton.scale().set(new ScaleValue(0f));
-        friendsButton.scale().animate(430, Easing.CUBIC, new ScaleValue(1f)).forwards();
-
-// --- Sidebar Button Hover Interactions ---
-        sidebarButton.mouseEnter().subscribe(() -> sidebarButton.scale().animate(120, Easing.CUBIC, new ScaleValue(1.1f)).forwards());
-        sidebarButton.mouseLeave().subscribe(() -> sidebarButton.scale().animate(120, Easing.CUBIC, new ScaleValue(1.0f)).forwards());
-
-        friendsButton.mouseEnter().subscribe(() -> friendsButton.scale().animate(120, Easing.CUBIC, new ScaleValue(1.1f)).forwards());
-        friendsButton.mouseLeave().subscribe(() -> friendsButton.scale().animate(120, Easing.CUBIC, new ScaleValue(1.0f)).forwards());
-
-        sidebar.child(friendsButton);
-        sidebar.child(sidebarButton);
-        panel.child(sidebar);
-
-        // ----- Divider -----
-        FlowLayout divider = UIContainers.verticalFlow(Sizing.fixed(dividerWidth), Sizing.fixed(innerHeight));
-        divider.surface(Surface.flat(0x80FFFFFF)); // subtle line, matches glass aesthetic
-        panel.child(divider);
-
-        // ----- Content column (header, button, version) -----
-        FlowLayout content = UIContainers.verticalFlow(Sizing.fixed(contentWidth), Sizing.fixed(innerHeight));
         content.gap(6);
+        content.padding(Insets.of(4));
         content.horizontalAlignment(HorizontalAlignment.CENTER);
-        content.verticalAlignment(VerticalAlignment.CENTER);
+        content.verticalAlignment(VerticalAlignment.TOP);
-        panel.child(content);
+        buildGeneralPanel(content);
+        row.child(content);
 
-        var header = new ScalableLabel(Component.literal("Citrus Dev"));
+        panel.child(row);
-        content.child(header);
 
-        var header_button = new ScalableButton(Component.literal("Click me"), btn -> {
+        FlowLayout sidebarDivider = UIContainers.verticalFlow(Sizing.fixed(DIVIDER_SIZE), Sizing.fixed(INNER_HEIGHT));
-            btn.setMessage(Component.literal("Clicked!"));
+        sidebarDivider.surface(Surface.flat(0x80FFFFFF));
-            Minecraft.getInstance().getSoundManager().play(
+        sidebarDivider.positioning(Positioning.absolute(SIDEBAR_WIDTH, 0));
-                    SimpleSoundInstance.forUI(SoundEvents.UI_BUTTON_CLICK.value(), 2.0F, 2)
+        panel.child(sidebarDivider);
-            );
-        },
-                0x80FFFFFF,  // base fill
-                0xA0FFFFFF,  // hovered fill
-                0xFFFFFFFF,  // base outline
-                0xFFFFFFFF,  // hovered outline
-                1            // outline width
-        );
-
-        header_button.scale().animate(300, Easing.CUBIC, new ScaleValue(1f)).forwards();
-        header_button.margins(Insets.top(6));
-        content.child(header_button);
-        header.scale().animate(300, Easing.CUBIC, new ScaleValue(2f)).forwards();
-
-        Surface glassPanel = Surface.blur(5f, 15f)
-                .and(Surface.flat(0x40FFFFFF))
-                .and(Surface.outline(0xFFFFFFFF));
-
-        panel.surface(glassPanel);
 
         var version = new ScalableLabel(Component.literal("Citrus-Dev v2.0"));
         version.horizontalTextAlignment(HorizontalAlignment.RIGHT);
         version.verticalTextAlignment(VerticalAlignment.BOTTOM);
         version.horizontalSizing(Sizing.fixed(202));
         version.verticalSizing(Sizing.fixed(12));
-        version.positioning(Positioning.relative(125, 100)); // bottom-right corner of `panel`
+        version.positioning(Positioning.relative(125, 100));
-
         version.scale().set(new ScaleValue(0.7f));
-
         panel.child(version);
 
         rootComponent.child(panel);
     }
 
+    private void buildNavbar(FlowLayout navbar) {
+        navbar.horizontalAlignment(HorizontalAlignment.RIGHT);
+        navbar.verticalAlignment(VerticalAlignment.CENTER);
+        navbar.padding(Insets.of(0, 0, 0, 24));
+        navbar.gap(16);
+        navbar.child(UIComponents.texture(
+                Identifier.fromNamespaceAndPath("citrus-dev", "textures/icons/citrus-logo.png"),
+                0, 0, 30, 30, 30, 30
+        )).horizontalAlignment(HorizontalAlignment.LEFT);
+
+        List<TabDef> tabs = List.of(
+                new TabDef("general", () -> {
+                    content.clearChildren();
+                    buildGeneralPanel(content);
+                }),
+                new TabDef("modules", () -> {
+                    content.clearChildren();
+                    buildModulesPanel(content);
+                }),
+                new TabDef("settings", () -> {
+                    content.clearChildren();
+                    buildSettingsPanel(content);
+                })
+        );
+
+        for (TabDef tab : tabs) {
+            navbar.child(makeTab(tab.label(), tab.onClick()));
+        }
+    }
+
+    private FlowLayout makeTab(String text, Runnable onClick) {
+        FlowLayout tab = UIContainers.verticalFlow(Sizing.content(), Sizing.content());
+        tab.verticalAlignment(VerticalAlignment.CENTER);
+        tab.horizontalAlignment(HorizontalAlignment.CENTER);
+        tab.padding(Insets.of(2, 0, 2, 2));
+        tab.gap(2);
+
+        var label = UIComponents.label(Component.literal(text)
+                        .withStyle(style -> style.withFont(new FontDescription.Resource(MC_FIVE))))
+                .color(Color.ofRgb(0xCCCCCC))
+                .shadow(true);;
+        tab.child(label);
+
+        int underlineWidth = Math.max(text.length() * 6, 10);
+        FlowLayout underline = UIContainers.horizontalFlow(Sizing.fixed(underlineWidth), Sizing.fixed(1));
+        underline.surface(Surface.flat(0x00FFFFFF));
+        tab.child(underline);
+
+        tab.mouseEnter().subscribe(() -> {
+            label.color(Color.ofRgb(0xFFFFFF));
+            underline.surface(Surface.flat(0xFFFFFFFF));
+        });
+        tab.mouseLeave().subscribe(() -> {
+            label.color(Color.ofRgb(0xCCCCCC));
+            underline.surface(Surface.flat(0x00FFFFFF));
+        });
+
+        tab.mouseDown().subscribe((click, doubled) -> {
+            Minecraft.getInstance().getSoundManager().play(
+                    SimpleSoundInstance.forUI(SoundEvents.UI_BUTTON_CLICK.value(), 2.0F, 2)
+            );
+            onClick.run();
+            return true;
+        });
+
+        return tab;
+    }
+
+    private FlowLayout buildSidebar() {
+        FlowLayout sidebar = UIContainers.verticalFlow(Sizing.fixed(SIDEBAR_WIDTH), Sizing.fixed(ROW_HEIGHT));
+        sidebar.horizontalAlignment(HorizontalAlignment.CENTER);
+        sidebar.verticalAlignment(VerticalAlignment.TOP);
+        sidebar.padding(Insets.of(4));
+        sidebar.gap(2);
+
+        sidebar.child(makeSidebarButton("-", 430));
+        sidebar.child(makeSidebarButton("+", 400));
+
+        return sidebar;
+    }
+
+    private ScalableButton makeSidebarButton(String symbol, int animateDelay) {
+        var button = new ScalableButton(Component.literal(symbol), btn -> {
+            Minecraft.getInstance().getSoundManager().play(
+                    SimpleSoundInstance.forUI(SoundEvents.UI_BUTTON_CLICK.value(), 2.0F, 2)
+            );
+        },
+                0x80FFFFFF,
+                0xA0FFFFFF,
+                0xFFFFFFFF,
+                0xFFFFFFFF,
+                1
+        );
+        button.horizontalSizing(Sizing.fixed(20));
+        button.verticalSizing(Sizing.fixed(20));
+
+        button.scale().set(new ScaleValue(0f));
+        button.scale().animate(animateDelay, Easing.CUBIC, new ScaleValue(1f)).forwards();
+
+        button.mouseEnter().subscribe(() -> button.scale().animate(120, Easing.CUBIC, new ScaleValue(1.1f)).forwards());
+        button.mouseLeave().subscribe(() -> button.scale().animate(120, Easing.CUBIC, new ScaleValue(1.0f)).forwards());
+
+        return button;
+    }
+
+
+    private void buildGeneralPanel(FlowLayout content) {
+        FlowLayout iconButton = UIContainers.horizontalFlow(Sizing.content(), Sizing.content());
+        iconButton.gap(8);
+        iconButton.verticalAlignment(VerticalAlignment.TOP);
+        iconButton.horizontalAlignment(HorizontalAlignment.CENTER);
+        iconButton.padding(Insets.of(6));
+        iconButton.horizontalSizing(Sizing.fixed(0));
+        iconButton.verticalSizing(Sizing.fixed(0));
+        iconButton.surface(toggle ? GLASS_PANEL : DISABLED);
+        iconButton.child(UIComponents.texture(
+                        Identifier.fromNamespaceAndPath("citrus-dev", "textures/icons/block_culling_file.png"),
+                        0, 0, 18, 12, 18, 12
+                )).horizontalAlignment(HorizontalAlignment.LEFT)
+                .verticalAlignment(VerticalAlignment.CENTER);
+
+        FlowLayout textStack = UIContainers.verticalFlow(Sizing.content(), Sizing.content());
+        textStack.gap(2);
+        textStack.horizontalAlignment(HorizontalAlignment.LEFT);
+        textStack.verticalAlignment(VerticalAlignment.CENTER);
+
+        var fpsLabel = UIComponents.label(
+                Component.literal("FPS")
+                        .withStyle(style -> style.withFont(new FontDescription.Resource(MC_FIVE)))
+        ).color(Color.ofRgb(toggle ? 0xffffff : 0x797b86));
+
+        textStack.child(fpsLabel);
+
+        textStack.child(UIComponents.label(
+                        Component.literal("Displays your FPS"))
+                .color(Color.ofRgb(0xa3a3ac))
+                .maxWidth(130)
+        );
+
+        iconButton.child(textStack);
+        iconButton.child(UIComponents.spacer());
+
+        FlowLayout settingsButton = makeSmallButton(
+                FLAT,
+                Identifier.fromNamespaceAndPath("citrus-dev", "textures/icons/settings.png"),
+                () -> {
+                    Minecraft.getInstance().setScreen(new MyScreen());
+                }
+        );
+        iconButton.child(settingsButton);
+
+        iconButton.mouseEnter().subscribe(() -> iconButton.surface(toggle ? GLASS_PANEL : DISABLED));
+        iconButton.mouseLeave().subscribe(() -> iconButton.surface(toggle ? GLASS_PANEL : DISABLED));
+
+        iconButton.mouseDown().subscribe((click, doubled) -> {
+            toggle = !toggle;
+            fpsLabel.color(Color.ofRgb(toggle ? 0xffffff : 0x797b86));
+            iconButton.surface(toggle ? GLASS_PANEL : DISABLED);
+
+            Minecraft.getInstance().getSoundManager().play(
+                    SimpleSoundInstance.forUI(SoundEvents.UI_BUTTON_CLICK.value(), 2.0F, 2)
+            );
+            return true;
+        });
+
+        iconButton.horizontalSizing().animate(150, Easing.CUBIC, Sizing.fixed(200)).forwards();
+        iconButton.verticalSizing().animate(150, Easing.CUBIC, Sizing.fixed(35)).forwards();
+
+        content.child(iconButton);
+    }
+
+    private void buildModulesPanel(FlowLayout content) {
+        content.child(UIComponents.label(Component.literal("Modules tab - coming soon")));
+    }
+
+    private void buildSettingsPanel(FlowLayout content) {
+        content.child(UIComponents.label(Component.literal("Settings tab - coming soon")));
+    }
+
+    private FlowLayout makeSmallButton(Surface baseSurface, Identifier texture, Runnable onClick) {
+        FlowLayout button = UIContainers.verticalFlow(Sizing.fixed(16), Sizing.fixed(16));
+        button.verticalAlignment(VerticalAlignment.CENTER);
+        button.horizontalAlignment(HorizontalAlignment.CENTER);
+        button.surface(baseSurface);
+        button.child(UIComponents.texture(texture, 0, 0, 12, 12, 12, 12))
+                .horizontalAlignment(HorizontalAlignment.CENTER)
+                .verticalAlignment(VerticalAlignment.CENTER);
+
+        button.mouseEnter().subscribe(() -> button.surface(
+                Surface.blur(5f, 15f).and(Surface.flat(0x70FFFFFF)).and(Surface.outline(0xFFFFFFFF))
+        ));
+        button.mouseLeave().subscribe(() -> button.surface(baseSurface));
+
+        button.mouseDown().subscribe((click, doubled) -> {
+            Minecraft.getInstance().getSoundManager().play(
+                    SimpleSoundInstance.forUI(SoundEvents.UI_BUTTON_CLICK.value(), 2.0F, 2)
+            );
+            onClick.run();
+            return true;
+        });
+
+        return button;
+    }
+
     @Override
     public boolean isPauseScreen() {
         return false;

src/main/java/de/fullrisk/citrusDev/UI/OverviewScreen.java

@@ -34,44 +34,73 @@ public class OverviewScreen extends BaseOwoScreen<FlowLayout> {
                 .horizontalAlignment(HorizontalAlignment.CENTER)
                 .verticalAlignment(VerticalAlignment.CENTER);
 
+        Surface glassPanel = Surface.blur(5f, 15f)
+                .and(Surface.flat(0x40FFFFFF))
+                .and(Surface.outline(0xFFFFFFFF));
+
+        Surface Flat = Surface.blur(5f, 15f)
+                .and(Surface.flat(0x40FFFFFF));
+
         FlowLayout iconButton = UIContainers.horizontalFlow(Sizing.content(), Sizing.content());
-        iconButton.gap(4);
+        iconButton.gap(8);
         iconButton.verticalAlignment(VerticalAlignment.CENTER);
         iconButton.horizontalAlignment(HorizontalAlignment.CENTER);
         iconButton.padding(Insets.of(6));
         iconButton.horizontalSizing(Sizing.fixed(0));
         iconButton.verticalSizing(Sizing.fixed(0));
-
-        Surface glassPanel = Surface.blur(5f, 15f)
-                .and(Surface.flat(0x40FFFFFF))
-                .and(Surface.outline(0xFFFFFFFF));
         iconButton.surface(glassPanel);
         iconButton.child(UIComponents.texture(
                 Identifier.fromNamespaceAndPath("citrus-dev", "textures/icons/block_culling_file.png"),
                 0, 0, 18, 12, 18, 12
         )).horizontalAlignment(HorizontalAlignment.LEFT);
-        iconButton.child(UIComponents.label(
+
-                        Component.literal("FPS")
+        FlowLayout textStack = UIContainers.verticalFlow(Sizing.content(), Sizing.content());
-                                .withStyle(style -> style.withFont(new FontDescription.Resource(MC_FIVE))))
+        textStack.gap(2);
-                .verticalTextAlignment(VerticalAlignment.TOP)
+        textStack.horizontalAlignment(HorizontalAlignment.LEFT);
-                .verticalSizing(Sizing.fill(85)) // Forces the label component to span the full height
+        textStack.verticalAlignment(VerticalAlignment.CENTER);
+
+        textStack.child(UIComponents.label(
+                Component.literal("FPS")
+                        .withStyle(style -> style.withFont(new FontDescription.Resource(MC_FIVE))))
         );
-        iconButton.child(UIComponents.label(
+
-                        Component.literal("Test")
+        textStack.child(UIComponents.label(
-                                .withStyle(style -> style.withFont(new FontDescription.Resource(MC_FIVE))))
+                        Component.literal("Displays your FPS"))
-                .verticalTextAlignment(VerticalAlignment.TOP)
+                .color(Color.ofRgb(0xAAAAAA))
-                .verticalSizing(Sizing.fill(85)) // Forces the label component to span the full height
+                .maxWidth(130)
         );
 
+        iconButton.child(textStack);
+
+        // ich liebe spacer
+        iconButton.child(UIComponents.spacer());
+
+        FlowLayout settingsButton = makeSmallButton(
+                Flat,
+                Identifier.fromNamespaceAndPath("citrus-dev", "textures/icons/settings.png"),
+                () -> {
+                    Minecraft.getInstance().setScreen(new MyScreen()); // whatever, nur zum testen rn
+                }
+        );
+
+        FlowLayout secondButton = makeSmallButton(
+                glassPanel,
+                Identifier.fromNamespaceAndPath("citrus-dev", "textures/icons/some_other_icon.png"),
+                () -> {
+                    Minecraft.getInstance().setScreen(new MyScreen());
+                }
+        );
+
+        iconButton.child(settingsButton);
+
         iconButton.mouseEnter().subscribe(() -> {
             iconButton.surface(Surface.blur(5f, 15f)
-                    .and(Surface.flat(0x70FFFFFF))
+                    .and(Surface.flat(0x40FFFFFF))
                     .and(Surface.outline(0xFFFFFFFF)));
         });
         iconButton.mouseLeave().subscribe(() -> {
             iconButton.surface(Surface.blur(5f, 15f)
-                    .and(Surface.flat(0x40FFFFFF))
+                    .and(Surface.flat(0x40FFFFFF)));
-                    .and(Surface.outline(0xFFFFFFFF)));
         });
 
         iconButton.mouseDown().subscribe((click, doubled) -> {
@@ -81,11 +110,41 @@ public class OverviewScreen extends BaseOwoScreen<FlowLayout> {
             );
             return true;
         });
-        iconButton.horizontalSizing().animate(150, Easing.CUBIC, Sizing.fixed(100)).forwards();
+
-        iconButton.verticalSizing().animate(150, Easing.CUBIC, Sizing.fixed(35)).forwards();
+        iconButton.horizontalSizing().animate(150, Easing.CUBIC, Sizing.fixed(220)).forwards();
+        iconButton.verticalSizing().animate(150, Easing.CUBIC, Sizing.fixed(40)).forwards();
+
         rootComponent.child(iconButton);
     }
 
+    // idk was ich hier gekocht hab, macht das leben leichter
+
+    private FlowLayout makeSmallButton(Surface baseSurface, Identifier texture, Runnable onClick) {
+        FlowLayout button = UIContainers.verticalFlow(Sizing.fixed(16), Sizing.fixed(16));
+        button.verticalAlignment(VerticalAlignment.CENTER);
+        button.horizontalAlignment(HorizontalAlignment.CENTER);
+        button.surface(baseSurface);
+        button.child(UIComponents.texture(texture, 0, 0, 12, 12, 12, 12))
+                .horizontalAlignment(HorizontalAlignment.CENTER)
+                .verticalAlignment(VerticalAlignment.CENTER);
+
+        button.mouseEnter().subscribe(() -> button.surface(
+                Surface.blur(5f, 15f).and(Surface.flat(0x70FFFFFF)).and(Surface.outline(0xFFFFFFFF))
+        ));
+        button.mouseLeave().subscribe(() ->
+                button.surface(baseSurface));
+
+        button.mouseDown().subscribe((click, doubled) -> {
+            Minecraft.getInstance().getSoundManager().play(
+                    SimpleSoundInstance.forUI(SoundEvents.UI_BUTTON_CLICK.value(), 2.0F, 2)
+            );
+            onClick.run(); // geht das so? Edit: ja
+            return true;
+        });
+
+        return button;
+    }
+
     @Override
     public boolean isPauseScreen() {
         return false;