feat: qr codes for note sharing

packages/backend/src/server/web/index.ts

@@ -546,7 +546,7 @@ router.get("/notes/:note", async (ctx, next) => {
 			ctx.set("Cache-Control", "public, max-age=15");
 			ctx.set(
 				"Content-Security-Policy",
-				"default-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src *; font-src 'self' data:; img-src *; media-src *; worker-src 'self'; frame-ancestors *",
+				"default-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src *; font-src 'self' data:; img-src * data:; media-src *; worker-src 'self'; frame-ancestors *",
 			);
 
 			return;

packages/client/src/components/MkQrCode.vue

@@ -6,9 +6,14 @@
           :value="qrCode"
         />
 			</div>
-			<MkButton :class="$style.gotIt" primary full @click="gotIt()">{{
+			<div class="_flexList" style="gap: 0.6rem">
-				i18n.ts.gotIt
+				<MkButton :class="$style.gotIt" primary full @click="gotIt()">{{
-			}}</MkButton>
+					i18n.ts.gotIt
+				}}</MkButton>
+				<MkButton :class="$style.copyLink" full @click="copyLink()">{{
+					i18n.ts.copyLink
+				}}</MkButton>
+			</div>
 		</div>
 	</MkModal>
 </template>
@@ -19,8 +24,10 @@ import QRCodeVue3 from "qrcode-vue3";
 import MkModal from "@/components/MkModal.vue";
 import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
+import * as os from "@/os";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
 
-defineProps<{
+const props = defineProps<{
 	qrCode: string;
 }>();
 
@@ -29,6 +36,11 @@ const modal = shallowRef<InstanceType<typeof MkModal>>();
 const gotIt = () => {
 	modal.value.close();
 };
+
+const copyLink = () => {
+	copyToClipboard(props.qrCode);
+	os.success();
+};
 </script>
 
 <style lang="scss" module>

packages/client/src/scripts/get-note-menu.ts

@@ -399,6 +399,13 @@ export function getNoteMenu(props: {
 								action: copyOriginal,
 							}
 						: undefined,
+					{
+						icon: `${icon("ph-qr-code")}`,
+						text: i18n.ts.getQrCode,
+						action: () => {
+							os.displayQrCode(`${url}/notes/${appearNote.id}`);
+						},
+					},
 					shareAvailable()
 						? {
 								icon: `${icon("ph-share-network")}`,
@@ -516,6 +523,13 @@ export function getNoteMenu(props: {
 						action: copyOriginal,
 					}
 				: undefined,
+			{
+				icon: `${icon("ph-qr-code")}`,
+				text: i18n.ts.getQrCode,
+				action: () => {
+					os.displayQrCode(`${url}/notes/${appearNote.id}`);
+				},
+			},
 			shareAvailable()
 				? {
 						icon: `${icon("ph-share-network")}`,