#19 Use shortname for the stash items (#21)

src-tauri/src/ui_profile/ui_profile_serializer.rs

@@ -44,6 +44,8 @@ pub struct Item {
 pub struct BsgItem {
     pub id: String,
     pub name: String,
+    #[serde(rename = "shortName")]
+    pub short_name: String,
 }
 
 pub fn convert_profile_to_ui(
@@ -132,17 +134,22 @@ pub fn convert_profile_to_ui(
         let item = bsg_items_root.get(k).unwrap();
         let id = item.get("_id").unwrap().as_str().unwrap();
         if let Some(props) = item.get("_props") {
-            if let Some(name) = props.get("ShortName") {
-                let locale_id = format!("{} Name", id);
-                let maybe_name = locale_root.get(locale_id.as_str());
+            if let Some(short_name) = props.get("ShortName") {
+                let maybe_name = locale_root.get(format!("{} Name", id).as_str());
+                let maybe_short_name = locale_root.get(format!("{} ShortName", id).as_str());
                 let name = maybe_name
                     .and_then(|v| v.as_str())
-                    .unwrap_or_else(|| name.as_str().unwrap());
+                    .unwrap_or_else(|| short_name.as_str().unwrap());
+                let short_name = maybe_short_name
+                    .and_then(|v| v.as_str())
+                    .unwrap_or_else(|| short_name.as_str().unwrap());
+
                 bsg_items.insert(
                     id.to_string(),
                     BsgItem {
                         id: id.to_string(),
                         name: name.to_string(),
+                        short_name: short_name.to_string(),
                     },
                 );
             }

src/routes/stash/stash-grid.svelte

@@ -53,6 +53,7 @@
 
 			orderedItems = [...tempItems];
 			bsgItems = profile.bsgItems;
+			console.log('bsgItems', bsgItems);
 		}
 	}
 
@@ -93,6 +94,7 @@
 							class="item-info"
 							style={`background-color: ${hexStringToCssColor(item.tpl, 0.8)};`}
 						>
+							<div class="short-name">{bsgItems[item.tpl].shortName}</div>
 							{#if item.isFir}
 								<div class="fir" />
 							{/if}
@@ -148,7 +150,7 @@
 		height: 64px;
 		width: 64px;
 		position: relative;
-		background-image: url($lib/images/unknown.png);
+		background-image: url($lib/images/empty.png);
 	}
 
 	.item-5449016a4bdc2d6f028b456f {
@@ -169,9 +171,13 @@
 		cursor: pointer;
 	}
 
+	.item-clickable:hover {
+		filter: brightness(120%);
+	}
+
 	.fir {
 		position: absolute;
-		top: 2px;
+		bottom: 2px;
 		left: 2px;
 		height: 10px;
 		width: 10px;
@@ -189,6 +195,13 @@
 		height: 100%;
 	}
 
+	.short-name {
+		font-size: 10px;
+		position: absolute;
+		right: 2px;
+		top: 2px;
+	}
+
 	.empty {
 		height: 64px;
 		width: 64px;

src/types/index.ts

@@ -23,6 +23,7 @@ export interface Item {
 export interface BsgItem {
 	id: string;
 	name: string;
+	shortName: string;
 }
 
 export type Option = 'amount' | 'fir';