🎨

src/web/app/ch/style.styl

@@ -1,4 +1,5 @@
 @import "../base"
 
 html
+	padding 8px
 	background #efefef

src/web/app/ch/tags/channel.tag

@@ -1,5 +1,5 @@
 <mk-channel>
-	<header><a href={ CONFIG.chUrl }>Misskey Channels</a></header>
+	<mk-header/>
 	<hr>
 	<main if={ !fetching }>
 		<h1>{ channel.title }</h1>
@@ -36,7 +36,6 @@
 	<style>
 		:scope
 			display block
-			padding 8px
 
 			> main
 				> h1

src/web/app/ch/tags/header.tag

@@ -0,0 +1,20 @@
+<mk-header>
+	<div>
+		<a href={ CONFIG.chUrl }>Index</a> | <a href={ CONFIG.url }>Misskey</a>
+	</div>
+	<div>
+		<a if={ !SIGNIN } href={ CONFIG.url }>ログイン(新規登録)</a>
+		<a if={ SIGNIN } href={ CONFIG.url + '/' + I.username }>{ I.username }</a>
+	</div>
+	<style>
+		:scope
+			display flex
+
+			> div:last-child
+				margin-left auto
+
+	</style>
+	<script>
+		this.mixin('i');
+	</script>
+</mk-header>

src/web/app/ch/tags/index.js

@@ -1,2 +1,3 @@
 require('./index.tag');
 require('./channel.tag');
+require('./header.tag');

src/web/app/ch/tags/index.tag

@@ -1,4 +1,6 @@
 <mk-index>
+	<mk-header/>
+	<hr>
 	<button onclick={ n }>%i18n:ch.tags.mk-index.new%</button>
 	<hr>
 	<ul if={ channels }>