Some UI changes

.editorconfig

@@ -22,7 +22,7 @@ indent_style = space
 indent_size = 4
 
 [**.latte]
-indent_style = tab
+indent_style = space
 indent_size = 2
 
 [**.html]

misc/scss/cssgg.scss

@@ -16,6 +16,7 @@
 @import "./node_modules/css.gg/icons/scss/share.scss";
 @import "./node_modules/css.gg/icons/scss/software-download.scss";
 @import "./node_modules/css.gg/icons/scss/check-o.scss";
+@import "./node_modules/css.gg/icons/scss/tag.scss";
 
 @import "./node_modules/css.gg/icons/scss/lock.scss";
 @import "./node_modules/css.gg/icons/scss/lock-unlock.scss";

misc/scss/yarn.lock

@@ -48,9 +48,9 @@ bulmaswatch@^0.8.1:
     fsevents "~2.3.2"
 
 css.gg@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/css.gg/-/css.gg-2.0.0.tgz#1ba891092ceac58a2550540171c2d469a86b27b2"
-  integrity sha512-8qO59kSXLbewo7xaUM4eC8328MTdGmb8atpmw6PRzeDGsZrCkAVjJzKeFDIntagl1/aCee+NG1OQtIvWAjgG/A==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/css.gg/-/css.gg-2.1.1.tgz#62b2e242633c1cdf9de9840f2cf343ce03f6548e"
+  integrity sha512-OJrjd4+CdjrLvrVB+EFctAnk7eeM+zc8aKfVlO5BfNBgSqcC9wMHQTZ7ALcCiZGpE62kVVhwQ3Mvl1u6RkVFvQ==
 
 fill-range@^7.0.1:
   version "7.0.1"
@@ -60,9 +60,9 @@ fill-range@^7.0.1:
     to-regex-range "^5.0.1"
 
 fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
 glob-parent@~5.1.2:
   version "5.1.2"
@@ -72,9 +72,9 @@ glob-parent@~5.1.2:
     is-glob "^4.0.1"
 
 immutable@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
-  integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f"
+  integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==
 
 is-binary-path@~2.1.0:
   version "2.1.0"
@@ -118,9 +118,9 @@ readdirp@~3.6.0:
     picomatch "^2.2.1"
 
 sass@^1.46.0:
-  version "1.56.1"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.56.1.tgz#94d3910cd468fd075fa87f5bb17437a0b617d8a7"
-  integrity sha512-VpEyKpyBPCxE7qGDtOcdJ6fFbcpOM+Emu7uZLxVrkX8KVU/Dp5UF7WLvzqRuUhB6mqqQt1xffLoG+AndxTZrCQ==
+  version "1.68.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.68.0.tgz#0034b0cc9a50248b7d1702ac166fd25990023669"
+  integrity sha512-Lmj9lM/fef0nQswm1J2HJcEsBUba4wgNx2fea6yJHODREoMFnwRpZydBnX/RjyXw2REIwdkbqE4hrTo4qfDBUA==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"

templates/components/themes/common/audio.latte

@@ -0,0 +1,2 @@
+<p class="mb-1">{include '../../icon.latte', icon: 'music', text: $songTitle}</p>
+<audio controls preload="none" src="{url_stream($url)}"></audio>

templates/components/themes/common/tags.latte

@@ -1,5 +1,8 @@
-<div class="tags">
-	{foreach $challenges as $challenge}
-		<a class="tag is-primary is-rounded" href="{path('/tag/' . $challenge->title)}">#{$challenge->title}</a>
-	{/foreach}
-</div>
+<details>
+	<summary>{include '../../icon.latte', icon: 'tag', text: 'Tags used'}</summary>
+	<div class="tags">
+		{foreach $challenges as $challenge}
+			<a class="tag is-primary is-rounded" href="{path('/tag/' . $challenge->title)}">#{$challenge->title}</a>
+		{/foreach}
+	</div>
+</details>

templates/components/themes/default.latte

@@ -21,11 +21,10 @@
 				<small title="{date('M d, Y H:i:s e', $item->createTime)}">{date('M d, Y', $item->createTime)}</small>
       </p>
 			{if !empty($item->challenges)}
-			<p>{include './common/tags.latte', challenges: $item->challenges}</p>
+			{include './common/tags.latte', challenges: $item->challenges}
 			{/if}
-			<p n:ifcontent>{render_desc($item->desc, $item->textExtra ?? [])|noescape}</p>
-			<p>Song: {$item->music->title}</p>
-			<audio controls preload="none" src="{url_stream($item->music->playUrl)}"></audio>
+			<p class="mb-2 mt-2" n:ifcontent>{render_desc($item->desc, $item->textExtra ?? [])|noescape}</p>
+      {include './common/audio.latte', songTitle: $item->music->title, url: $item->music->playUrl}
 			{include './common/stats.latte', playCount: $item->stats->playCount, diggCount: $item->stats->diggCount, commentCount: $item->stats->commentCount, shareCount: $item->stats->shareCount}
 			<div class="has-text-centered">
 				{include './common/content.latte', item: $item, isAutoplay: false, isBig: false}

templates/views/video.latte

@@ -30,12 +30,11 @@
 							<small title="{date('M d, Y H:i:s e', $item->createTime)}">{date('M d, Y', $item->createTime)}</small>
   			    </p>
 						{if !empty($item->challenges)}
-						<p>{include '../components/themes/common/tags.latte', challenges: $item->challenges}</p>
+						{include '../components/themes/common/tags.latte', challenges: $item->challenges}
 						{/if}
 						<div class="content">
 							<p n:ifcontent>{render_desc($item->desc, $item->textExtra ?? [])|noescape}</p>
-							<p>Song: {$item->music->title}</p>
-							<audio controls preload="none" src="{url_stream($item->music->playUrl)}"></audio>
+              {include '../components/themes/common/audio.latte', songTitle: $item->music->title, url: $item->music->playUrl}
 							{include '../components/themes/common/stats.latte', playCount: $item->stats->playCount, diggCount: $item->stats->diggCount, commentCount: $item->stats->commentCount, shareCount: $item->stats->shareCount}
 							<div class="has-text-centered">
 								{include '../components/themes/common/share.latte', uniqueId: $info->detail->uniqueId, id: $item->id}