From 2f3003ee8ca53c549a2e876b2a316e8ae5158e7b Mon Sep 17 00:00:00 2001
From: Jeder <jeder+git@jeder.pl>
Date: Tue, 22 Aug 2023 22:56:31 +0200
Subject: [PATCH] Touch-optimized visibility picker

---
 .../src/components/MkVisibilityPicker.vue     | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index ca43df736..502635849 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -1,12 +1,15 @@
 <template>
 	<MkModal
 		ref="modal"
+		v-slot="{ type }"
 		:z-priority="'high'"
 		:src="src"
 		@click="modal.close()"
 		@closed="emit('closed')"
 	>
-		<div class="_popup" :class="$style.root">
+		<div 
+			class="_popup" 
+			:class="{ [$style.root]: true, [$style.asDrawer]: type === 'drawer' }">
 			<button
 				key="public"
 				class="_button"
@@ -167,6 +170,25 @@ function choose(visibility: (typeof misskey.noteVisibilities)[number]): void {
 .root {
 	width: 240px;
 	padding: 8px 0;
+	&.asDrawer {
+		padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
+		width: 100%;
+		border-radius: 24px;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+		.icon {
+			width: 18px;
+			margin-right: 24px;
+		}
+		.item {
+			font-size: 14px;
+			padding: 10px 24px;
+		}
+		.toggle {
+			margin-left: 24px;
+			width: 18px;
+		}
+	}
 }
 
 .divider {