Added Material Symbols

static/koboldai.css

@@ -515,6 +515,37 @@
 	height: calc(100vh - 150px);
 }
 
+.story_title_area {
+	display: flex;
+	justify-content: space-between;
+}
+
+.story_title_area .var_sync_story_story_name {
+	border-bottom: 1px solid;
+	padding-bottom: 5px;
+}
+
+.story_title_area .var_sync_story_story_name[contenteditable="true"]:active,
+.story_title_area .var_sync_story_story_name[contenteditable="true"]:focus{
+	border:none;
+	outline:none;
+	color: var(--text_edit);
+	border-bottom: 1px solid var(--text);
+	padding-bottom: 5px;
+}
+
+.story_title {
+	font-size: x-large;
+}
+
+.story_title_icons {
+	font-size: 18px;
+}
+
+.material-icons-outlined[story_gamesaved="true"] {
+	filter: brightness(40%);
+}
+
 @media only screen and (max-aspect-ratio: 7/5) {
 /* mobile */
 .story_menu_pin {
@@ -889,7 +920,6 @@ body {
 }
 
 .popup .popup_list_area {
-	height: 70vh;
 	overflow-x: hidden;
 	flex-grow: 1;
 	flex-shrink: 0;
@@ -1143,7 +1173,32 @@ body.NotConnected {
 }
 
 @font-face {
-  font-family: 'Material Symbols Outlined';
+  font-family: 'Material Icons Outlined';
   font-style: normal;
-  src: url(/material-symbols.woff) format('woff');
+  src: url(/static/MaterialSymbolsOutlined.ttf) format('truetype');
+}
+
+.material-icons-outlined {
+  font-family: 'Material Icons Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
 }

static/koboldai.js

@@ -1859,6 +1859,11 @@ function update_token_lengths() {
 		prompt_length = parseInt(document.getElementById("story_prompt").getAttribute("story_prompt_length"));
 	}
 	
+	//prompt is truncated at 512 tokens
+	if (prompt_length > 512) {
+		prompt_length = 512;
+	}
+	
 	//used token length
 	token_length = memory_length + authors_notes;
 	

templates/settings flyout.html

@@ -51,14 +51,20 @@
 	</div>
 	<div id="setting_menu_story" class="hidden settings_category_area">
 		<div id="Story_Info">
-			<div><b>Story Name: </b><span class="var_sync_story_story_name" contenteditable=true onblur="sync_to_server(this);"></span></div>
+			<hr/>
-			<div>
+			<div class="story_title_area">
-				<button id="new_story" class="btn action_button" onclick="new_story();">New Story</button>
+				<span class="story_title">
-				<button id="load_story" class="btn action_button" onclick="socket.emit('load_story_list', '');">Load Story</button>
+					<b>Story Name: </b>
-				<button id="save_story" class="btn action_button var_sync_alt_story_gamesaved" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'>Save Story</button>
+					<span class="var_sync_story_story_name" contenteditable=true onblur="sync_to_server(this);"></span>
-				<!---<button id="download_story" class="btn action_button" onclick="document.getElementById('download_iframe').src = 'json';">Download Story</button>--->
+				</span>
-				<a class='cursor' onclick="document.getElementById('download_iframe').src = 'json';">Download Story</a>
+				<span class="story_title_icons">
+					<span class="material-icons-outlined cursor" title="Load Story" onclick="socket.emit('load_story_list', '');">file_open</span>
+					<span class="material-icons-outlined cursor var_sync_alt_story_gamesaved" title="Save Story">save</span>
+					<span class="material-icons-outlined cursor" title="Import Story">cloud_download</span>
+					<span class="material-icons-outlined cursor" title="Download Story" onclick="document.getElementById('download_iframe').src = 'json';">file_download</span>
+				</span>
 			</div>
+			<hr/>
 		</div>
 		<div class="setting_tile_area">
 		{% with menu='Story' %}