@turnipxenon/pineapple 2.4.13 → 2.4.15

package/.idea/discord.xml

@@ -2,6 +2,6 @@
 <project version="4">
   <component name="DiscordProjectSettings">
     <option name="show" value="PROJECT" />
-    <option name="description" value="" />
+    <option name="description" value="perhaps goofing around or maybe not" />
   </component>
 </project>

package/.idea/workspace.xml

@@ -4,9 +4,8 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Add animation to dynamically added button in social section">
-      <change beforePath="$PROJECT_DIR$/src/lib/components/layouts/PineappleBaseLayout.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/layouts/PineappleBaseLayout.svelte" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/lib/components/layouts/SeaweedBaseLayout.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/layouts/SeaweedBaseLayout.svelte" afterDir="false" />
+    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Fix dialog layout to make it usable on hobby site">
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -34,6 +33,8 @@
         <option value="Card" />
         <option value="Chip" />
         <option value="ToggleableContent" />
+        <option value="Toast" />
+        <option value="TestCard" />
         <option value="TypeScript File" />
       </list>
     </option>
@@ -45,12 +46,17 @@
       </map>
     </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
-    <option name="RESET_MODE" value="SOFT" />
+    <option name="RESET_MODE" value="HARD" />
     <option name="ROOT_SYNC" value="DONT_SYNC" />
   </component>
   <component name="JsbtTreeLayoutManager">
     <layout place="tools.popupnpm">
-      <scroll-view-position x="0" y="0" />
+      <scroll-view-position x="14" y="0" />
+      <selected-paths>
+        <path>
+          <id value="$PROJECT_DIR$/../speenus/package.json" />
+        </path>
+      </selected-paths>
     </layout>
   </component>
   <component name="MarkdownSettingsMigration">
@@ -70,46 +76,46 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;DefaultHtmlFileTemplate&quot;: &quot;HTML File&quot;,
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;pineapple-redesign&quot;,
-    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
-    &quot;last_opened_file_path&quot;: &quot;C:/Users/Pumpkin/Projects/Web/pineapple/src/routes/(pineapple)&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_interpreter_path&quot;: &quot;node&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;yarn&quot;,
-    &quot;npm.build.executor&quot;: &quot;Run&quot;,
-    &quot;npm.dev (1).executor&quot;: &quot;Run&quot;,
-    &quot;npm.dev --open.executor&quot;: &quot;Run&quot;,
-    &quot;npm.dev offline.executor&quot;: &quot;Run&quot;,
-    &quot;npm.dev-offline.executor&quot;: &quot;Run&quot;,
-    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
-    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Pumpkin\\Projects\\Web\\pineapple\\node_modules\\typescript\\lib&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "DefaultHtmlFileTemplate": "HTML File",
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "WebServerToolWindowFactoryState": "false",
+    "git-widget-placeholder": "turnip/fix",
+    "ignore.virus.scanning.warn.message": "true",
+    "last_opened_file_path": "C:/Users/Pumpkin/Projects/Web/pineapple/src/lib/scripts/pineapple_fiber",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_interpreter_path": "node",
+    "nodejs_package_manager_path": "yarn",
+    "npm.build.executor": "Run",
+    "npm.dev (1).executor": "Run",
+    "npm.dev --open.executor": "Run",
+    "npm.dev offline.executor": "Run",
+    "npm.dev-offline.executor": "Run",
+    "npm.dev.executor": "Run",
+    "settings.editor.selected.configurable": "preferences.pluginManager",
+    "ts.external.directory.path": "C:\\Users\\Pumpkin\\Projects\\Web\\pineapple\\node_modules\\typescript\\lib",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\scripts\pineapple_fiber" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\pineapple\toast\custom-toast" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\pineapple\toast" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(seaweed)" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\portfolio" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\speenus" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\pineapple\toast\custom-toast" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\pineapple\toast" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\pineapple" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(seaweed)" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\template" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\styles" />
     </key>
   </component>
   <component name="RunManager" selected="npm.dev --open">
@@ -142,6 +148,8 @@
       <list>
         <item itemvalue="npm.dev --open" />
         <item itemvalue="npm.dev-offline" />
+        <item itemvalue="npm.dev --open" />
+        <item itemvalue="npm.dev-offline" />
       </list>
     </recent_temporary>
   </component>
@@ -186,103 +194,18 @@
       <workItem from="1710289549437" duration="12580000" />
       <workItem from="1710373069951" duration="3591000" />
       <workItem from="1710403138174" duration="704000" />
-      <workItem from="1710403890552" duration="19000" />
-    </task>
-    <task id="LOCAL-00015" summary="Put prepare properly">
-      <option name="closed" value="true" />
-      <created>1709798418843</created>
-      <option name="number" value="00015" />
-      <option name="presentableId" value="LOCAL-00015" />
-      <option name="project" value="LOCAL" />
-      <updated>1709798418843</updated>
-    </task>
-    <task id="LOCAL-00016" summary="Restrict mutex to one&#10;&#10;Only one yarn instance should run to prevent corrupting other files">
-      <option name="closed" value="true" />
-      <created>1709799004321</created>
-      <option name="number" value="00016" />
-      <option name="presentableId" value="LOCAL-00016" />
-      <option name="project" value="LOCAL" />
-      <updated>1709799004321</updated>
-    </task>
-    <task id="LOCAL-00017" summary="Restrict mutex to one&#10;&#10;Only one yarn instance should run to prevent corrupting other files">
-      <option name="closed" value="true" />
-      <created>1709799061435</created>
-      <option name="number" value="00017" />
-      <option name="presentableId" value="LOCAL-00017" />
-      <option name="project" value="LOCAL" />
-      <updated>1709799061435</updated>
-    </task>
-    <task id="LOCAL-00018" summary="Remove prepare script again">
-      <option name="closed" value="true" />
-      <created>1709799419674</created>
-      <option name="number" value="00018" />
-      <option name="presentableId" value="LOCAL-00018" />
-      <option name="project" value="LOCAL" />
-      <updated>1709799419674</updated>
-    </task>
-    <task id="LOCAL-00019" summary="Fix format">
-      <option name="closed" value="true" />
-      <created>1709799503506</created>
-      <option name="number" value="00019" />
-      <option name="presentableId" value="LOCAL-00019" />
-      <option name="project" value="LOCAL" />
-      <updated>1709799503506</updated>
-    </task>
-    <task id="LOCAL-00020" summary="Remove yarnrc mutex">
-      <option name="closed" value="true" />
-      <created>1709799705567</created>
-      <option name="number" value="00020" />
-      <option name="presentableId" value="LOCAL-00020" />
-      <option name="project" value="LOCAL" />
-      <updated>1709799705567</updated>
-    </task>
-    <task id="LOCAL-00021" summary="Update package.json for publishing">
-      <option name="closed" value="true" />
-      <created>1709800364650</created>
-      <option name="number" value="00021" />
-      <option name="presentableId" value="LOCAL-00021" />
-      <option name="project" value="LOCAL" />
-      <updated>1709800364650</updated>
-    </task>
-    <task id="LOCAL-00022" summary="Update layout for portfolio">
-      <option name="closed" value="true" />
-      <created>1709831870879</created>
-      <option name="number" value="00022" />
-      <option name="presentableId" value="LOCAL-00022" />
-      <option name="project" value="LOCAL" />
-      <updated>1709831870879</updated>
-    </task>
-    <task id="LOCAL-00023" summary="Implement throwoway prototype for game showcase carousel">
-      <option name="closed" value="true" />
-      <created>1709835566776</created>
-      <option name="number" value="00023" />
-      <option name="presentableId" value="LOCAL-00023" />
-      <option name="project" value="LOCAL" />
-      <updated>1709835566776</updated>
-    </task>
-    <task id="LOCAL-00024" summary="Implement sticky element">
-      <option name="closed" value="true" />
-      <created>1709837150508</created>
-      <option name="number" value="00024" />
-      <option name="presentableId" value="LOCAL-00024" />
-      <option name="project" value="LOCAL" />
-      <updated>1709837150508</updated>
-    </task>
-    <task id="LOCAL-00025" summary="Fix upgraded vite package imports">
-      <option name="closed" value="true" />
-      <created>1709837649846</created>
-      <option name="number" value="00025" />
-      <option name="presentableId" value="LOCAL-00025" />
-      <option name="project" value="LOCAL" />
-      <updated>1709837649846</updated>
-    </task>
-    <task id="LOCAL-00026" summary="Implement base layout for portfolio">
-      <option name="closed" value="true" />
-      <created>1709854774552</created>
-      <option name="number" value="00026" />
-      <option name="presentableId" value="LOCAL-00026" />
-      <option name="project" value="LOCAL" />
-      <updated>1709854774553</updated>
+      <workItem from="1710403890552" duration="136000" />
+      <workItem from="1710452675953" duration="2003000" />
+      <workItem from="1710469859511" duration="5000" />
+      <workItem from="1710471362988" duration="1660000" />
+      <workItem from="1710540704044" duration="3221000" />
+      <workItem from="1710553558444" duration="11978000" />
+      <workItem from="1710565588306" duration="339000" />
+      <workItem from="1710566188907" duration="950000" />
+      <workItem from="1710623596666" duration="2298000" />
+      <workItem from="1710645881933" duration="8776000" />
+      <workItem from="1710721345686" duration="2025000" />
+      <workItem from="1710724001847" duration="10956000" />
     </task>
     <task id="LOCAL-00027" summary="Implement experience section">
       <option name="closed" value="true" />
@@ -580,7 +503,103 @@
       <option name="project" value="LOCAL" />
       <updated>1710403640566</updated>
     </task>
-    <option name="localTasksCounter" value="64" />
+    <task id="LOCAL-00064" summary="Implement normal state for PineappleBaseLayout">
+      <option name="closed" value="true" />
+      <created>1710473020513</created>
+      <option name="number" value="00064" />
+      <option name="presentableId" value="LOCAL-00064" />
+      <option name="project" value="LOCAL" />
+      <updated>1710473020514</updated>
+    </task>
+    <task id="LOCAL-00065" summary="Add custom toast">
+      <option name="closed" value="true" />
+      <created>1710560664163</created>
+      <option name="number" value="00065" />
+      <option name="presentableId" value="LOCAL-00065" />
+      <option name="project" value="LOCAL" />
+      <updated>1710560664164</updated>
+    </task>
+    <task id="LOCAL-00066" summary="Add simple text toast">
+      <option name="closed" value="true" />
+      <created>1710564041434</created>
+      <option name="number" value="00066" />
+      <option name="presentableId" value="LOCAL-00066" />
+      <option name="project" value="LOCAL" />
+      <updated>1710564041434</updated>
+    </task>
+    <task id="LOCAL-00067" summary="Enforce stricter typing for Toast components">
+      <option name="closed" value="true" />
+      <created>1710565506639</created>
+      <option name="number" value="00067" />
+      <option name="presentableId" value="LOCAL-00067" />
+      <option name="project" value="LOCAL" />
+      <updated>1710565506640</updated>
+    </task>
+    <task id="LOCAL-00068" summary="Add dismissable toast">
+      <option name="closed" value="true" />
+      <created>1710648639268</created>
+      <option name="number" value="00068" />
+      <option name="presentableId" value="LOCAL-00068" />
+      <option name="project" value="LOCAL" />
+      <updated>1710648639269</updated>
+    </task>
+    <task id="LOCAL-00069" summary="Adjust default toast body styling and add shadow to toast">
+      <option name="closed" value="true" />
+      <created>1710650031611</created>
+      <option name="number" value="00069" />
+      <option name="presentableId" value="LOCAL-00069" />
+      <option name="project" value="LOCAL" />
+      <updated>1710650031611</updated>
+    </task>
+    <task id="LOCAL-00070" summary="Clean up todos">
+      <option name="closed" value="true" />
+      <created>1710651196828</created>
+      <option name="number" value="00070" />
+      <option name="presentableId" value="LOCAL-00070" />
+      <option name="project" value="LOCAL" />
+      <updated>1710651196829</updated>
+    </task>
+    <task id="LOCAL-00071" summary="Add default PR template">
+      <option name="closed" value="true" />
+      <created>1710651695177</created>
+      <option name="number" value="00071" />
+      <option name="presentableId" value="LOCAL-00071" />
+      <option name="project" value="LOCAL" />
+      <updated>1710651695177</updated>
+    </task>
+    <task id="LOCAL-00072" summary="Fix chip in light mode">
+      <option name="closed" value="true" />
+      <created>1710654837283</created>
+      <option name="number" value="00072" />
+      <option name="presentableId" value="LOCAL-00072" />
+      <option name="project" value="LOCAL" />
+      <updated>1710654837283</updated>
+    </task>
+    <task id="LOCAL-00073" summary="2.4.14">
+      <option name="closed" value="true" />
+      <created>1710655474323</created>
+      <option name="number" value="00073" />
+      <option name="presentableId" value="LOCAL-00073" />
+      <option name="project" value="LOCAL" />
+      <updated>1710655474323</updated>
+    </task>
+    <task id="LOCAL-00074" summary="Run dialog parser in runtime">
+      <option name="closed" value="true" />
+      <created>1710731570794</created>
+      <option name="number" value="00074" />
+      <option name="presentableId" value="LOCAL-00074" />
+      <option name="project" value="LOCAL" />
+      <updated>1710731570794</updated>
+    </task>
+    <task id="LOCAL-00075" summary="Fix dialog layout to make it usable on hobby site">
+      <option name="closed" value="true" />
+      <created>1710739937750</created>
+      <option name="number" value="00075" />
+      <option name="presentableId" value="LOCAL-00075" />
+      <option name="project" value="LOCAL" />
+      <updated>1710739937750</updated>
+    </task>
+    <option name="localTasksCounter" value="76" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -618,7 +637,7 @@
                   <entry key="branch">
                     <value>
                       <list>
-                        <option value="pineapple-redesign" />
+                        <option value="turnip/fix" />
                       </list>
                     </value>
                   </entry>
@@ -638,18 +657,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="Turn the portfolio site into a template" />
-    <MESSAGE value="Add content replacer v1" />
-    <MESSAGE value="Testing toggleable content" />
-    <MESSAGE value="switch up image and videos too" />
-    <MESSAGE value="Solve videos not dynamically loading" />
-    <MESSAGE value="Fix unnecessary iframe requests" />
-    <MESSAGE value="Remove unnecessary iframe requests" />
-    <MESSAGE value="Extract head elements out of template component" />
-    <MESSAGE value="Fix path for Seaweed" />
-    <MESSAGE value="Move from dist to lib for package path" />
-    <MESSAGE value="Add missing npm run package to allow dist generation" />
-    <MESSAGE value="Remove postcss reference in non root layout" />
     <MESSAGE value="Add unique class for Card" />
     <MESSAGE value="Remove unnecessary files" />
     <MESSAGE value="Fix accordion rounded border missing" />
@@ -663,6 +670,29 @@
     <MESSAGE value="Improve text contrast" />
     <MESSAGE value="Improve text contrast in dark mode" />
     <MESSAGE value="Add animation to dynamically added button in social section" />
-    <option name="LAST_COMMIT_MESSAGE" value="Add animation to dynamically added button in social section" />
+    <MESSAGE value="Implement normal state for PineappleBaseLayout" />
+    <MESSAGE value="Add custom toast" />
+    <MESSAGE value="Add simple text toast and toast queue" />
+    <MESSAGE value="Enforce stricter typing for Toast components" />
+    <MESSAGE value="Add dismissable toast" />
+    <MESSAGE value="Adjust default toast body styling and add shadow to toast" />
+    <MESSAGE value="Clean up todos" />
+    <MESSAGE value="Add default PR template" />
+    <MESSAGE value="Fix chip in light mode" />
+    <MESSAGE value="2.4.14" />
+    <MESSAGE value="Run dialog parser in runtime" />
+    <MESSAGE value="Fix dialog layout to make it usable on hobby site" />
+    <option name="LAST_COMMIT_MESSAGE" value="Fix dialog layout to make it usable on hobby site" />
+  </component>
+  <component name="XDebuggerManager">
+    <breakpoint-manager>
+      <breakpoints>
+        <line-breakpoint enabled="true" type="javascript">
+          <url>file://$PROJECT_DIR$/src/routes/(pineapple)/pineapple/+page.svelte</url>
+          <line>31</line>
+          <option name="timeStamp" value="1" />
+        </line-breakpoint>
+      </breakpoints>
+    </breakpoint-manager>
   </component>
 </project>

package/.svelte-kit/__package__/app.postcss

@@ -41,11 +41,11 @@ html, body {
 }
 
 /* todo: add some hues to the icon that should be in sync with primary and make them not pure darkness */
-.turnip-button > img {
+.turnip-button > img, .img-icon {
     filter: grayscale(100%) brightness(0%) invert(25%);
 }
 
-.dark .turnip-button > img {
+.dark .turnip-button > img, .dark .img-icon {
     filter: grayscale(100%) brightness(0%) invert(100%);
 }
 
@@ -92,7 +92,7 @@ ul {
 .default-page-container {
     @apply flex justify-center items-center;
     margin-top: 4em;
-    margin-left: clamp(1em, 15vw, 10em);
+    margin-left: 1em;
     margin-right: 1em;
     flex-direction: column;
     z-index: 0;
@@ -164,4 +164,44 @@ a:active {
 .accordion-item {
     @apply variant-filled-primary rounded-md;
 }
+
 /* endregion Accordion css for handling missing styles in package */
+
+:root {
+    --shadow-color: rgba(91, 79, 54, 0.5);
+}
+
+/* todo: adjust shadow for each component + change depending on dark mode or not */
+.fab, #shell-header {
+    box-shadow: 3px 3px 3px var(--shadow-color);
+}
+
+#toast-progress {
+    position: relative;
+    top: 5px;
+    left: 6px;
+    width: calc(100% - 12px);
+    border-radius: 8px;
+    background: transparent;
+    height: 10px;
+}
+
+#toast-progress::-moz-progress-bar {
+    /*background-color: red;*/
+    background: rgba(var(--color-secondary-500));
+}
+
+.dialog-box {
+    background-color: rgb(var(--color-surface-500) / 0.9);
+    position: fixed;
+    bottom: 0;
+    width: var(--dialog-box-width); /*75em + 4em padding*/
+    height: var(--dialog-box-height);
+    max-width: calc(100vw - ((var(--fab-margin) * 2) + 4em));
+}
+
+.dark .dialog-box {
+    background-color: rgb(var(--color-surface-900) / 0.95);
+    --tw-ring-color: rgb(var(--color-text-400));
+    /*background-color: red;*/
+}

package/.svelte-kit/__package__/assets/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>

package/.svelte-kit/__package__/components/Card.svelte

@@ -1,5 +1,5 @@
 <script>export let margin = "0";
-export let marginBottom = "3em";
+export let marginBottom = "2lh";
 export let overrideStyle = "";
 export let includeDataNoSnippet = true;
 const style = `

package/.svelte-kit/__package__/components/Chip.svelte

@@ -8,5 +8,6 @@
         margin: 0.25em;
         font-weight: bold;
         pointer-events: none;
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
     }
 </style>

package/.svelte-kit/__package__/components/DialogOverlay.svelte

@@ -1,6 +1,7 @@
 <script>import AresHappy from "../assets/characters/ares/ares_happy.webp";
 import { onMount } from "svelte";
 import { dialogManager } from "./dialog_manager/DialogManagerStore";
+import { DialogState } from "../types/pineapple_fiber/DialogState";
 let currentMessage = "";
 dialogManager.currentMessage.subscribe((value) => {
   currentMessage = value;
@@ -15,15 +16,25 @@ onMount(() => {
   dialogManager.update(0);
 });
 let hidePercent = 100;
+let isHidden = true;
 dialogManager.hidePercent.subscribe((value) => {
   hidePercent = value * 0.4;
+  isHidden = false;
+});
+dialogManager.currentReadableState.subscribe((value) => {
+  isHidden = value === DialogState.Invisible;
+  if (value === DialogState.Invisible) {
+  }
 });
 const onDialogClick = () => {
   dialogManager.skipAnimation();
 };
 </script>
 
-<div class="dialog-elements" style="--hidePercentWidth: -{hidePercent}vw; --hidePercentHeight: {hidePercent}vh">
+<div class="dialog-elements"
+     hidden={isHidden}
+     style="--hidePercentWidth: -{hidePercent}vw;
+            --hidePercentHeight: {hidePercent}vh;">
 	<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
 	<div class="card dialog-box variant-ghost-primary" on:click={onDialogClick}>
 		<div class="card dialog-name">
@@ -37,59 +48,49 @@ const onDialogClick = () => {
 </div>
 
 <style>
-	.dialog-elements {
-		position: absolute;
-		z-index: 10;
-	}
-
-	.dialog-elements > img {
-		transform: translateX(var(--hidePercentWidth));
-	}
-
-	.dialog-elements > div {
-		transform: translateY(var(--hidePercentHeight));
-	}
+    .dialog-elements {
+        position: fixed;
+        z-index: 10;
+    }
 
-	.dialog-box {
-		background-color: rgb(var(--color-surface-500) / 0.9);
-		position: fixed;
-		bottom: 0;
-		left: var(--dialog-left-pad);
+    .dialog-elements > img {
+        transform: translateX(var(--hidePercentWidth));
+    }
 
-		width: var(--dialog-box-width); /*75em + 4em padding*/
-		height: var(--dialog-box-height);
-	}
+    .dialog-elements > div {
+        transform: translateY(var(--hidePercentHeight));
+    }
 
-	.dialog-box *,
-	.dialog-name * {
-		font-size: clamp(1em, 5vw, 1.3em);
-		line-height: 1.5em;
-	}
+    .dialog-box *,
+    .dialog-name * {
+        font-size: clamp(1em, 5vw, 1.3em);
+        line-height: 1.5em;
+    }
 
-	.dialog-padding :global(p) {
-		font-size: clamp(1em, 5vw, 1.3em) !important;
-		line-height: 1.5em !important;
-	}
+    .dialog-padding :global(p) {
+        font-size: clamp(1em, 5vw, 1.3em) !important;
+        line-height: 1.5em !important;
+    }
 
-	.dialog-padding {
-		padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
-	}
+    .dialog-padding {
+        padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
+    }
 
-	.dialog-name {
-		padding-left: 1rem;
-		padding-right: 1rem;
-		padding-top: 0.5rem;
-		position: fixed;
+    .dialog-name {
+        padding-left: 1rem;
+        padding-right: 1rem;
+        padding-top: 0.5rem;
+        position: fixed;
 
-		/* for centering vertically */
-		transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
+        /* for centering vertically */
+        transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
 }
 
-	.dialog-portrait {
-		position: fixed;
-		bottom: 0;
-		left: clamp(-4rem, calc(5vw - 5em), 0rem);
-		height: clamp(30rem, 75vw, 40rem);
-		width: auto;
-	}
+    .dialog-portrait {
+        position: fixed;
+        bottom: 0;
+        left: clamp(-4rem, calc(5vw - 5em), 0rem);
+        height: clamp(30rem, 75vw, 40rem);
+        width: auto;
+    }
 </style>