rudeshark.net/packages/client/src/components/MkVisibilityPicker.vue

<template>
	<MkModal ref="modal" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
		<div class="_popup" :class="$style.root">
			<button key="public" class="_button" :class="[$style.item, { [$style.active]: v === 'public' }]" data-index="1" @click="choose('public')">
				<div :class="$style.icon"><i class="ph-planet ph-bold ph-lg"></i></div>
				<div :class="$style.body">
					<span :class="$style.itemTitle">{{ i18n.ts._visibility.public }}</span>
					<span :class="$style.itemDescription">{{ i18n.ts._visibility.publicDescription }}</span>
				</div>
			</button>
			<button key="home" class="_button" :class="[$style.item, { [$style.active]: v === 'home' }]" data-index="2" @click="choose('home')">
				<div :class="$style.icon"><i class="ph-house ph-bold ph-lg"></i></div>
				<div :class="$style.body">
					<span :class="$style.itemTitle">{{ i18n.ts._visibility.home }}</span>
					<span :class="$style.itemDescription">{{ i18n.ts._visibility.homeDescription }}</span>
				</div>
			</button>
			<button key="followers" class="_button" :class="[$style.item, { [$style.active]: v === 'followers' }]" data-index="3" @click="choose('followers')">
				<div :class="$style.icon"><i class="ph-lock-simple-open ph-bold ph-lg"></i></div>
				<div :class="$style.body">
					<span :class="$style.itemTitle">{{ i18n.ts._visibility.followers }}</span>
					<span :class="$style.itemDescription">{{ i18n.ts._visibility.followersDescription }}</span>
				</div>
			</button>
			<button key="specified" :disabled="localOnly" class="_button" :class="[$style.item, { [$style.active]: v === 'specified' }]" data-index="4" @click="choose('specified')">
				<div :class="$style.icon"><i class="ph-envelope-simple-open ph-bold ph-lg"></i></div>
				<div :class="$style.body">
					<span :class="$style.itemTitle">{{ i18n.ts._visibility.specified }}</span>
					<span :class="$style.itemDescription">{{ i18n.ts._visibility.specifiedDescription }}</span>
				</div>
			</button>
			<div :class="$style.divider"></div>
			<button key="localOnly" class="_button" :class="[$style.item, $style.localOnly, { [$style.active]: localOnly }]" data-index="5" @click="localOnly = !localOnly">
				<div :class="$style.icon"><i class="ph-hand-fist ph-bold ph-lg"></i></div>
				<div :class="$style.body">
					<span :class="$style.itemTitle">{{ i18n.ts._visibility.localOnly }}</span>
					<span :class="$style.itemDescription">{{ i18n.ts._visibility.localOnlyDescription }}</span>
				</div>
				<div :class="$style.toggle"><i :class="localOnly ? 'ph-toggle-right ph-bold ph-lg' : 'ph-toggle-left ph-bold ph-lg'"></i></div>
			</button>
		</div>
	</MkModal>
</template>

<script lang="ts" setup>
import { nextTick, watch } from 'vue';
import * as misskey from 'calckey-js';
import MkModal from '@/components/MkModal.vue';
import { i18n } from '@/i18n';

const modal = $shallowRef<InstanceType<typeof MkModal>>();

const props = withDefaults(defineProps<{
	currentVisibility: typeof misskey.noteVisibilities[number];
	currentLocalOnly: boolean;
	src?: HTMLElement;
}>(), {
});

const emit = defineEmits<{
	(ev: 'changeVisibility', v: typeof misskey.noteVisibilities[number]): void;
	(ev: 'changeLocalOnly', v: boolean): void;
	(ev: 'closed'): void;
}>();

let v = $ref(props.currentVisibility);
let localOnly = $ref(props.currentLocalOnly);

watch($$(localOnly), () => {
	emit('changeLocalOnly', localOnly);
});

function choose(visibility: typeof misskey.noteVisibilities[number]): void {
	v = visibility;
	emit('changeVisibility', visibility);
	nextTick(() => {
		modal.close();
	});
}
</script>

<style lang="scss" module>
.root {
	width: 240px;
	padding: 8px 0;
}

.divider {
	margin: 8px 0;
	border-top: solid 0.5px var(--divider);
}

.item {
	display: flex;
	padding: 8px 14px;
	font-size: 12px;
	text-align: left;
	width: 100%;
	box-sizing: border-box;

	&:hover {
		background: rgba(0, 0, 0, 0.05);
	}

	&:active {
		background: rgba(0, 0, 0, 0.1);
	}

	&.active {
		color: var(--fgOnAccent);
		background: var(--accent);
	}

	&.localOnly.active {
		color: var(--accent);
		background: inherit;
	}
}

.icon {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
	width: 16px;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
}

.body {
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.itemTitle {
	display: block;
	font-weight: bold;
}

.itemDescription {
	opacity: 0.6;
}

.toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 10px;
	width: 16px;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
}
</style>