#16

5 files changed, 310 insertions, 302 deletions

diff --git a/src/web/app/dev/tags/new-app-form.tag b/src/web/app/dev/tags/new-app-form.tag
index 443bf2bfff..c74a43d151 100644
--- a/src/web/app/dev/tags/new-app-form.tag
+++ b/src/web/app/dev/tags/new-app-form.tag
@@ -1,260 +1,243 @@
-mk-new-app-form
-	form(onsubmit={ onsubmit }, autocomplete='off')
-		section.name: label
-			p.caption
-				| アプリケーション名
-			input@name(
-				type='text'
-				placeholder='ex) Misskey for iOS'
-				autocomplete='off'
-				required)
-
-		section.nid: label
-			p.caption
-				| Named ID
-			input@nid(
-				type='text'
-				pattern='^[a-zA-Z0-9\-]{3,30}$'
-				placeholder='ex) misskey-for-ios'
-				autocomplete='off'
-				required
-				onkeyup={ on-change-nid })
-
-			p.info(if={ nid-state == 'wait' }, style='color:#999')
-				i.fa.fa-fw.fa-spinner.fa-pulse
-				| 確認しています...
-			p.info(if={ nid-state == 'ok' }, style='color:#3CB7B5')
-				i.fa.fa-fw.fa-check
-				| 利用できます
-			p.info(if={ nid-state == 'unavailable' }, style='color:#FF1161')
-				i.fa.fa-fw.fa-exclamation-triangle
-				| 既に利用されています
-			p.info(if={ nid-state == 'error' }, style='color:#FF1161')
-				i.fa.fa-fw.fa-exclamation-triangle
-				| 通信エラー
-			p.info(if={ nid-state == 'invalid-format' }, style='color:#FF1161')
-				i.fa.fa-fw.fa-exclamation-triangle
-				| a~z、A~Z、0~9、-(ハイフン)が使えます
-			p.info(if={ nid-state == 'min-range' }, style='color:#FF1161')
-				i.fa.fa-fw.fa-exclamation-triangle
-				| 3文字以上でお願いします！
-			p.info(if={ nid-state == 'max-range' }, style='color:#FF1161')
-				i.fa.fa-fw.fa-exclamation-triangle
-				| 30文字以内でお願いします
+<mk-new-app-form>
+	<form onsubmit="{ onsubmit }" autocomplete="off">
+		<section class="name">
+			<label>
+				<p class="caption">アプリケーション名</p>
+				<input ref="name" type="text" placeholder="ex) Misskey for iOS" autocomplete="off" required="required"/>
+			</label>
+		</section>
+		<section class="nid">
+			<label>
+				<p class="caption">Named ID</p>
+				<input ref="nid" type="text" pattern="^[a-zA-Z0-9-]{3,30}$" placeholder="ex) misskey-for-ios" autocomplete="off" required="required" onkeyup="{ onChangeNid }"/>
+				<p class="info" if="{ nidState == 'wait' }" style="color:#999"><i class="fa fa-fw fa-spinner fa-pulse"></i>確認しています...</p>
+				<p class="info" if="{ nidState == 'ok' }" style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>利用できます</p>
+				<p class="info" if="{ nidState == 'unavailable' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>既に利用されています</p>
+				<p class="info" if="{ nidState == 'error' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>通信エラー</p>
+				<p class="info" if="{ nidState == 'invalid-format' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>a~z、A~Z、0~9、-(ハイフン)が使えます</p>
+				<p class="info" if="{ nidState == 'min-range' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>3文字以上でお願いします！</p>
+				<p class="info" if="{ nidState == 'max-range' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>30文字以内でお願いします</p>
+			</label>
+		</section>
+		<section class="description">
+			<label>
+				<p class="caption">アプリの概要</p>
+				<textarea ref="description" placeholder="ex) Misskey iOSクライアント。" autocomplete="off" required="required"></textarea>
+			</label>
+		</section>
+		<section class="callback">
+			<label>
+				<p class="caption">コールバックURL (オプション)</p>
+				<input ref="cb" type="url" placeholder="ex) https://your.app.example.com/callback.php" autocomplete="off"/>
+			</label>
+		</section>
+		<section class="permission">
+			<p class="caption">権限</p>
+			<div ref="permission">
+				<label>
+					<input type="checkbox" value="account-read"/>
+					<p>アカウントの情報を見る。</p>
+				</label>
+				<label>
+					<input type="checkbox" value="account-write"/>
+					<p>アカウントの情報を操作する。</p>
+				</label>
+				<label>
+					<input type="checkbox" value="post-write"/>
+					<p>投稿する。</p>
+				</label>
+				<label>
+					<input type="checkbox" value="like-write"/>
+					<p>いいねしたりいいね解除する。</p>
+				</label>
+				<label>
+					<input type="checkbox" value="following-write"/>
+					<p>フォローしたりフォロー解除する。</p>
+				</label>
+				<label>
+					<input type="checkbox" value="drive-read"/>
+					<p>ドライブを見る。</p>
+				</label>
+				<label>
+					<input type="checkbox" value="drive-write"/>
+					<p>ドライブを操作する。</p>
+				</label>
+				<label>
+					<input type="checkbox" value="notification-read"/>
+					<p>通知を見る。</p>
+				</label>
+				<label>
+					<input type="checkbox" value="notification-write"/>
+					<p>通知を操作する。</p>
+				</label>
+			</div>
+			<p><i class="fa fa-exclamation-triangle"></i>アプリ作成後も変更できますが、新たな権限を付与する場合、その時点で関連付けられているユーザーキーはすべて無効になります。</p>
+		</section>
+		<button onclick="{ onsubmit }">アプリ作成</button>
+	</form>
+	<style type="stylus">
+		:scope
+			display block
+			overflow hidden
 
-		section.description: label
-			p.caption
-				| アプリの概要
-			textarea@description(
-				placeholder='ex) Misskey iOSクライアント。'
-				autocomplete='off'
-				required)
+			> form
 
-		section.callback: label
-			p.caption
-				| コールバックURL (オプション)
-			input@cb(
-				type='url'
-				placeholder='ex) https://your.app.example.com/callback.php'
-				autocomplete='off')
+				section
+					display block
+					margin 16px 0
 
-		section.permission
-			p.caption
-				| 権限
-			div@permission
-				label
-					input(type='checkbox', value='account-read')
-					p アカウントの情報を見る。
-				label
-					input(type='checkbox', value='account-write')
-					p アカウントの情報を操作する。
-				label
-					input(type='checkbox', value='post-write')
-					p 投稿する。
-				label
-					input(type='checkbox', value='like-write')
-					p いいねしたりいいね解除する。
-				label
-					input(type='checkbox', value='following-write')
-					p フォローしたりフォロー解除する。
-				label
-					input(type='checkbox', value='drive-read')
-					p ドライブを見る。
-				label
-					input(type='checkbox', value='drive-write')
-					p ドライブを操作する。
-				label
-					input(type='checkbox', value='notification-read')
-					p 通知を見る。
-				label
-					input(type='checkbox', value='notification-write')
-					p 通知を操作する。
-			p
-				i.fa.fa-exclamation-triangle
-				| アプリ作成後も変更できますが、新たな権限を付与する場合、その時点で関連付けられているユーザーキーはすべて無効になります。
+					.caption
+						margin 0 0 4px 0
+						color #616161
+						font-size 0.95em
 
-		button(onclick={ onsubmit })
-			| アプリ作成
+						> i
+							margin-right 0.25em
+							color #96adac
 
-style.
-	display block
-	overflow hidden
+					.info
+						display block
+						margin 4px 0
+						font-size 0.8em
 
-	> form
+						> i
+							margin-right 0.3em
 
-		section
-			display block
-			margin 16px 0
+				section.permission
+					div
+						padding 8px 0
+						max-height 160px
+						overflow auto
+						background #fff
+						border solid 1px #cecece
+						border-radius 4px
 
-			.caption
-				margin 0 0 4px 0
-				color #616161
-				font-size 0.95em
+					label
+						display block
+						padding 0 12px
+						line-height 32px
+						cursor pointer
 
-				> i
-					margin-right 0.25em
-					color #96adac
+						&:hover
+							> p
+								color #999
 
-			.info
-				display block
-				margin 4px 0
-				font-size 0.8em
+							[type='checkbox']:checked + p
+								color #000
 
-				> i
-					margin-right 0.3em
+						[type='checkbox']
+							margin-right 4px
 
-		section.permission
-			div
-				padding 8px 0
-				max-height 160px
-				overflow auto
-				background #fff
-				border solid 1px #cecece
-				border-radius 4px
+						[type='checkbox']:checked + p
+							color #111
 
-			label
-				display block
-				padding 0 12px
-				line-height 32px
-				cursor pointer
+						> p
+							display inline
+							color #aaa
+							user-select none
 
-				&:hover
-					> p
+					> p:last-child
+						margin 6px
+						font-size 0.8em
 						color #999
 
-					[type='checkbox']:checked + p
-						color #000
-
-				[type='checkbox']
-					margin-right 4px
-
-				[type='checkbox']:checked + p
-					color #111
-
-				> p
-					display inline
-					color #aaa
-					user-select none
+						> i
+							margin-right 4px
 
-			> p:last-child
-				margin 6px
-				font-size 0.8em
-				color #999
+				[type=text]
+				[type=url]
+				textarea
+					user-select text
+					display inline-block
+					cursor auto
+					padding 8px 12px
+					margin 0
+					width 100%
+					font-size 1em
+					color #333
+					background #fff
+					outline none
+					border solid 1px #cecece
+					border-radius 4px
 
-				> i
-					margin-right 4px
+					&:hover
+						border-color #bbb
 
-		[type=text]
-		[type=url]
-		textarea
-			user-select text
-			display inline-block
-			cursor auto
-			padding 8px 12px
-			margin 0
-			width 100%
-			font-size 1em
-			color #333
-			background #fff
-			outline none
-			border solid 1px #cecece
-			border-radius 4px
+					&:focus
+						border-color $theme-color
 
-			&:hover
-				border-color #bbb
+					&:disabled
+						opacity 0.5
 
-			&:focus
-				border-color $theme-color
-
-			&:disabled
-				opacity 0.5
-
-		> button
-			margin 20px 0 32px 0
-			width 100%
-			font-size 1em
-			color #111
-			border-radius 3px
-
-script.
-	@mixin \api
+				> button
+					margin 20px 0 32px 0
+					width 100%
+					font-size 1em
+					color #111
+					border-radius 3px
 
-	@nid-state = null
+	</style>
+	<script>
+		@mixin \api
 
-	@on-change-nid = ~>
-		nid = @refs.nid.value
+		@nid-state = null
 
-		if nid == ''
-			@nid-state = null
-			@update!
-			return
+		@on-change-nid = ~>
+			nid = @refs.nid.value
 
-		err = switch
-			| not nid.match /^[a-zA-Z0-9\-]+$/ => \invalid-format
-			| nid.length < 3chars              => \min-range
-			| nid.length > 30chars             => \max-range
-			| _                                     => null
+			if nid == ''
+				@nid-state = null
+				@update!
+				return
 
-		if err?
-			@nid-state = err
-			@update!
-		else
-			@nid-state = \wait
-			@update!
+			err = switch
+				| not nid.match /^[a-zA-Z0-9\-]+$/ => \invalid-format
+				| nid.length < 3chars              => \min-range
+				| nid.length > 30chars             => \max-range
+				| _                                     => null
 
-			@api \app/name_id/available do
-				name_id: nid
-			.then (result) ~>
-				if result.available
-					@nid-state = \ok
-				else
-					@nid-state = \unavailable
+			if err?
+				@nid-state = err
 				@update!
-			.catch (err) ~>
-				@nid-state = \error
+			else
+				@nid-state = \wait
 				@update!
 
-	@onsubmit = ~>
-		name = @refs.name.value
-		nid = @refs.nid.value
-		description = @refs.description.value
-		cb = @refs.cb.value
-		permission = []
+				@api \app/name_id/available do
+					name_id: nid
+				.then (result) ~>
+					if result.available
+						@nid-state = \ok
+					else
+						@nid-state = \unavailable
+					@update!
+				.catch (err) ~>
+					@nid-state = \error
+					@update!
 
-		@refs.permission.query-selector-all \input .for-each (el) ~>
-			if el.checked then permission.push el.value
+		@onsubmit = ~>
+			name = @refs.name.value
+			nid = @refs.nid.value
+			description = @refs.description.value
+			cb = @refs.cb.value
+			permission = []
 
-		locker = document.body.append-child document.create-element \mk-locker
+			@refs.permission.query-selector-all \input .for-each (el) ~>
+				if el.checked then permission.push el.value
 
-		@api \app/create do
-			name: name
-			name_id: nid
-			description: description
-			callback_url: cb
-			permission: permission.join \,
-		.then ~>
-			location.href = '/apps'
-		.catch ~>
-			alert 'アプリの作成に失敗しました。再度お試しください。'
+			locker = document.body.append-child document.create-element \mk-locker
+
+			@api \app/create do
+				name: name
+				name_id: nid
+				description: description
+				callback_url: cb
+				permission: permission.join \,
+			.then ~>
+				location.href = '/apps'
+			.catch ~>
+				alert 'アプリの作成に失敗しました。再度お試しください。'
 
-			locker.parent-node.remove-child locker
+				locker.parent-node.remove-child locker
+	</script>
+</mk-new-app-form>
diff --git a/src/web/app/dev/tags/pages/app.tag b/src/web/app/dev/tags/pages/app.tag
index aa9ba68f3f..4311f11565 100644
--- a/src/web/app/dev/tags/pages/app.tag
+++ b/src/web/app/dev/tags/pages/app.tag
@@ -1,24 +1,30 @@
-mk-app-page
-	p(if={ fetching }) 読み込み中
-	main(if={ !fetching })
-		header
-			h1 { app.name }
-		div.body
-			p App Secret
-			input(value={ app.secret }, readonly)
+<mk-app-page>
+	<p if="{ fetching }">読み込み中</p>
+	<main if="{ !fetching }">
+		<header>
+			<h1>{ app.name }</h1>
+		</header>
+		<div class="body">
+			<p>App Secret</p>
+			<input value="{ app.secret }" readonly="readonly"/>
+		</div>
+	</main>
+	<style type="stylus">
+		:scope
+			display block
 
-style.
-	display block
+	</style>
+	<script>
+		@mixin \api
 
-script.
-	@mixin \api
+		@fetching = true
 
-	@fetching = true
-
-	@on \mount ~>
-		@api \app/show do
-			app_id: @opts.app
-		.then (app) ~>
-			@app = app
-			@fetching = false
-			@update!
+		@on \mount ~>
+			@api \app/show do
+				app_id: @opts.app
+			.then (app) ~>
+				@app = app
+				@fetching = false
+				@update!
+	</script>
+</mk-app-page>
diff --git a/src/web/app/dev/tags/pages/apps.tag b/src/web/app/dev/tags/pages/apps.tag
index f46a9d3282..b7eb441faa 100644
--- a/src/web/app/dev/tags/pages/apps.tag
+++ b/src/web/app/dev/tags/pages/apps.tag
@@ -1,26 +1,30 @@
-mk-apps-page
-	h1 アプリを管理
-	a(href='/app/new') アプリ作成
-	div.apps
-		p(if={ fetching }) 読み込み中
-		virtual(if={ !fetching })
-			p(if={ apps.length == 0 }) アプリなし
-			ul(if={ apps.length > 0 })
-				li(each={ app in apps })
-					a(href={ '/app/' + app.id })
-						p.name { app.name }
+<mk-apps-page>
+	<h1>アプリを管理</h1><a href="/app/new">アプリ作成</a>
+	<div class="apps">
+		<p if="{ fetching }">読み込み中</p>
+		<virtual if="{ !fetching }">
+			<p if="{ apps.length == 0 }">アプリなし</p>
+			<ul if="{ apps.length &gt; 0 }">
+				<li each="{ app in apps }"><a href="{ '/app/' + app.id }">
+						<p class="name">{ app.name }</p></a></li>
+			</ul>
+		</virtual>
+	</div>
+	<style type="stylus">
+		:scope
+			display block
 
-style.
-	display block
+	</style>
+	<script>
+		@mixin \api
 
-script.
-	@mixin \api
+		@fetching = true
 
-	@fetching = true
-
-	@on \mount ~>
-		@api \my/apps
-		.then (apps) ~>
-			@fetching = false
-			@apps = apps
-			@update!
+		@on \mount ~>
+			@api \my/apps
+			.then (apps) ~>
+				@fetching = false
+				@apps = apps
+				@update!
+	</script>
+</mk-apps-page>
diff --git a/src/web/app/dev/tags/pages/index.tag b/src/web/app/dev/tags/pages/index.tag
index 7bc57fbb00..6be52e61ba 100644
--- a/src/web/app/dev/tags/pages/index.tag
+++ b/src/web/app/dev/tags/pages/index.tag
@@ -1,5 +1,11 @@
-mk-index
-	a(href='/apps') アプリ
+<mk-index><a href="/apps">アプリ</a>
+	<style type="stylus">
+		:scope
+			display block
 
-style.
-	display block
+			
+
+			
+
+	</style>
+</mk-index>
diff --git a/src/web/app/dev/tags/pages/new-app.tag b/src/web/app/dev/tags/pages/new-app.tag
index 8c19e39f4b..f255b84328 100644
--- a/src/web/app/dev/tags/pages/new-app.tag
+++ b/src/web/app/dev/tags/pages/new-app.tag
@@ -1,33 +1,42 @@
-mk-new-app-page
-	main
-		header
-			h1 新しいアプリを作成
-			p MisskeyのAPIを利用したアプリケーションを作成できます。
-		mk-new-app-form
+<mk-new-app-page>
+	<main>
+		<header>
+			<h1>新しいアプリを作成</h1>
+			<p>MisskeyのAPIを利用したアプリケーションを作成できます。</p>
+		</header>
+		<mk-new-app-form></mk-new-app-form>
+	</main>
+	<style type="stylus">
+		:scope
+			display block
+			padding 64px 0
 
-style.
-	display block
-	padding 64px 0
+			> main
+				width 100%
+				max-width 700px
+				margin 0 auto
 
-	> main
-		width 100%
-		max-width 700px
-		margin 0 auto
+				> header
+					margin 0 0 16px 0
+					padding 0 0 16px 0
+					border-bottom solid 1px #282827
 
-		> header
-			margin 0 0 16px 0
-			padding 0 0 16px 0
-			border-bottom solid 1px #282827
+					> h1
+						margin 0 0 12px 0
+						padding 0
+						line-height 32px
+						font-size 32px
+						font-weight normal
+						color #000
 
-			> h1
-				margin 0 0 12px 0
-				padding 0
-				line-height 32px
-				font-size 32px
-				font-weight normal
-				color #000
+					> p
+						margin 0
+						line-height 16px
+						color #9a9894
 
-			> p
-				margin 0
-				line-height 16px
-				color #9a9894
+			
+
+			
+
+	</style>
+</mk-new-app-page>