feat: added a profile settings and settings nav (#432)

2022-12-26 16:50:11 +08:00 · 2022-12-26 16:50:11 +08:00 · 613c5315b3
commit 613c5315b3
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@ -62,6 +62,8 @@ watchEffect(() => {
  namedFields.value = named
  iconFields.value = icons
 })
+
+const isSelf = $computed(() => currentUser.value?.account.id === account.id)
 </script>

 <template>
@ -91,6 +93,15 @@ watchEffect(() => {
        <div absolute top-18 right-0 flex gap-2 items-center>
          <AccountMoreButton :account="account" :command="command" />
          <AccountFollowButton :account="account" :command="command" />
+          <!-- Edit profile -->
+          <NuxtLink
+            v-if="isSelf"
+            to="/settings/profile/appearance"
+            gap-1 items-center border="1" rounded-full flex="~ gap2 center" font-500 w-30 h-fit py1
+            hover="border-primary text-primary bg-active"
+          >
+            {{ $t('settings.profile.appearance.title') }}
+          </NuxtLink>
          <!-- <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
            <div rounded p2 group-hover="bg-rose/10">
              <div i-ri:bell-line />
--- a/components/common/CommonCropImage.vue
+++ b/components/common/CommonCropImage.vue
@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import type { Boundaries } from 'vue-advanced-cropper'
+import { Cropper } from 'vue-advanced-cropper'
+import 'vue-advanced-cropper/dist/style.css'
+
+export interface Props {
+  /** Images to be cropped */
+  modelValue?: File
+  /** Crop frame aspect ratio (width/height), default 1/1 */
+  stencilAspectRatio?: number
+  /** The ratio of the longest edge of the cut box to the length of the cut screen, default 0.9, not more than 1 */
+  stencilSizePercentage?: number
+}
+const props = withDefaults(defineProps<Props>(), {
+  stencilAspectRatio: 1 / 1,
+  stencilSizePercentage: 0.9,
+})
+
+const emits = defineEmits<{
+  (event: 'update:modelValue', value: File): void
+}>()
+
+const vmFile = useVModel(props, 'modelValue', emits, { passive: true })
+
+const cropperDialog = ref(false)
+
+const cropper = ref<InstanceType<typeof Cropper>>()
+
+const cropperFlag = ref(false)
+
+const cropperImage = reactive({
+  src: '',
+  type: 'image/jpg',
+})
+
+const stencilSize = ({ boundaries }: { boundaries: Boundaries }) => {
+  return {
+    width: boundaries.width * props.stencilSizePercentage,
+    height: boundaries.height * props.stencilSizePercentage,
+  }
+}
+
+watch(vmFile, (file, _, onCleanup) => {
+  let expired = false
+  onCleanup(() => expired = true)
+
+  if (file && !cropperFlag.value) {
+    cropperDialog.value = true
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = (e) => {
+      if (expired)
+        return
+      cropperImage.src = e.target?.result as string
+      cropperImage.type = file.type
+    }
+  }
+  cropperFlag.value = false
+})
+
+const cropImage = () => {
+  if (cropper.value && vmFile.value) {
+    cropperFlag.value = true
+    cropperDialog.value = false
+    const { canvas } = cropper.value.getResult()
+    canvas?.toBlob((blob) => {
+      vmFile.value = new File([blob as any], `cropped${vmFile.value?.name}` as string, { type: blob?.type })
+    }, cropperImage.type)
+  }
+}
+</script>
+
+<template>
+  <ModalDialog v-model="cropperDialog" :use-v-if="false" max-w-500px flex>
+    <div flex-1 w-0>
+      <div text-lg text-center my2 px3>
+        <h1>
+          {{ $t('action.edit') }}
+        </h1>
+      </div>
+      <div aspect-ratio-1>
+        <Cropper
+          ref="cropper"
+          class="overflow-hidden w-full h-full"
+          :src="cropperImage.src"
+          :resize-image="{
+            adjustStencil: false,
+          }"
+          :stencil-size="stencilSize"
+          :stencil-props="{
+            aspectRatio: props.stencilAspectRatio,
+            movable: false,
+            resizable: false,
+            handlers: {},
+          }"
+          image-restriction="stencil"
+        />
+      </div>
+      <div m-4>
+        <button
+          btn-solid w-full rounded text-sm
+          @click="cropImage()"
+        >
+          {{ $t('action.confirm') }}
+        </button>
+      </div>
+    </div>
+  </ModalDialog>
+</template>
--- a/components/common/CommonInputImage.vue
+++ b/components/common/CommonInputImage.vue
@ -0,0 +1,121 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  modelValue?: File
+  /** The image src before change */
+  original?: string
+  /** Allowed file types */
+  allowedFileTypes?: string[]
+  /** Allowed file size */
+  allowedFileSize?: number
+
+  imgClass?: string
+
+  loading?: boolean
+}>(), {
+  allowedFileTypes: () => ['image/jpeg', 'image/png'],
+  allowedFileSize: 1024 * 1024 * 5, // 5 MB
+})
+const emits = defineEmits<{
+  (event: 'update:modelValue', value: File): void
+  (event: 'error', code: number, message: string): void
+}>()
+
+const vmFile = useVModel(props, 'modelValue', emits, { passive: true })
+
+const { t } = useI18n()
+
+const elInput = ref<HTMLInputElement>()
+
+function clearInput() {
+  if (elInput.value)
+    elInput.value.value = ''
+}
+
+function selectImage(e: Event) {
+  const target = e.target as HTMLInputElement
+  const image = target.files?.[0]
+  if (!image) {
+    vmFile.value = image
+  }
+  else if (!props.allowedFileTypes.includes(image.type)) {
+    emits('error', 1, t('error.unsupported_file_format'))
+    clearInput()
+  }
+  else if (image.size > props.allowedFileSize) {
+    emits('error', 2, t('error.file_size_cannot_exceed_n_mb', [5]))
+    clearInput()
+  }
+  else {
+    vmFile.value = image
+    clearInput()
+  }
+}
+
+const defaultImage = computed(() => props.original || '')
+/** Preview of selected images */
+const previewImage = ref('')
+/** The current images on display */
+const imageSrc = computed<string>(() => previewImage.value || defaultImage.value)
+
+// Update the preview image when the input file change
+watch(vmFile, (image, _, onCleanup) => {
+  let expired = false
+  onCleanup(() => expired = true)
+
+  if (image) {
+    const reader = new FileReader()
+    reader.readAsDataURL(image)
+    reader.onload = (e) => {
+      if (expired)
+        return
+      previewImage.value = e.target?.result as string
+    }
+  }
+  else {
+    previewImage.value = ''
+    clearInput()
+  }
+})
+
+defineExpose({
+  clearInput,
+})
+</script>
+
+<template>
+  <label
+    class="bg-slate-500/10 focus-within:(outline outline-primary)"
+    relative
+    flex justify-center items-center
+    cursor-pointer
+    of-hidden
+  >
+    <img
+      v-if="imageSrc"
+      :src="imageSrc"
+      :class="imgClass || ''"
+      object-cover
+      w-full
+      h-full
+    >
+    <div absolute bg="black/50" text-white rounded-full text-xl w12 h12 flex justify-center items-center hover="bg-black/40 text-primary">
+      <div i-ri:upload-line />
+    </div>
+
+    <div
+      v-if="loading"
+      absolute inset-0
+      bg="black/30" text-white
+      flex justify-center items-center
+    >
+      <div class="i-ri:loader-4-line animate-spin animate-duration-[2.5s]" text-4xl />
+    </div>
+    <input
+      ref="elInput"
+      type="file"
+      absolute opacity-0 inset-0 z--1
+      :accept="allowedFileTypes.join(',')"
+      @change="selectImage"
+    >
+  </label>
+</template>
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@ -21,5 +21,6 @@ const { notifications } = useNotifications()
    <NavSideItem :text="$t('nav_side.conversations')" to="/conversations" icon="i-ri:at-line" user-only />
    <NavSideItem :text="$t('nav_side.favourites')" to="/favourites" icon="i-ri:heart-3-line" user-only />
    <NavSideItem :text="$t('nav_side.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line " user-only />
+    <NavSideItem :text="$t('nav_side.settings')" to="/settings" icon="i-ri:settings-4-line " user-only />
  </nav>
 </template>
--- a/components/settings/SettingsNavItem.vue
+++ b/components/settings/SettingsNavItem.vue
@ -0,0 +1,60 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  text?: string
+  icon?: string
+  to: string | Record<string, string>
+  command?: boolean
+}>()
+
+const router = useRouter()
+
+if (props.command) {
+  useCommand({
+    scope: 'Settings',
+
+    name: () => props.text ?? (typeof props.to === 'string' ? props.to as string : props.to.name),
+    icon: () => props.icon || '',
+
+    onActivate() {
+      router.push(props.to)
+    },
+  })
+}
+</script>
+
+<template>
+  <NuxtLink
+    :to="to"
+    exact-active-class="text-primary"
+    block w-full group focus:outline-none
+    @click="$scrollToTop"
+  >
+    <div
+      w-full flex w-fit px5 py3 md:gap2 gap4 items-center
+      transition-250 group-hover:bg-active
+      group-focus-visible:ring="2 current"
+    >
+      <div flex-1 flex items-center md:gap2 gap4>
+        <div
+          flex items-center justify-center
+          :class="$slots.description ? 'w-12 h-12' : ''"
+        >
+          <slot name="icon">
+            <div v-if="icon" :class="icon" md:text-size-inherit text-xl />
+          </slot>
+        </div>
+        <div space-y-1>
+          <p>
+            <slot>
+              <span>{{ text }}</span>
+            </slot>
+          </p>
+          <p v-if="$slots.description" text-sm text-secondary>
+            <slot name="description" />
+          </p>
+        </div>
+      </div>
+      <div i-ri:arrow-right-s-line text-xl text-secondary-light />
+    </div>
+  </NuxtLink>
+</template>
--- a/components/user/UserSwitcher.vue
+++ b/components/user/UserSwitcher.vue
@ -44,6 +44,13 @@ const switchUser = (user: UserLogin) => {
        icon="i-ri:user-add-line"
        @click="openSigninDialog"
      />
+
+      <NuxtLink to="/settings">
+        <CommonDropdownItem
+          :text="$t('nav_side.settings')"
+          icon="i-ri:settings-4-line"
+        />
+      </NuxtLink>
      <CommonDropdownItem
        v-if="isMastoInitialised && currentUser"
        :text="$t('user.sign_out_account', [getFullHandle(currentUser.account)])"
--- a/composables/command.ts
+++ b/composables/command.ts
@ -14,6 +14,7 @@ const scopes = [
  'Account',
  'Languages',
  'Switch account',
+  'Settings',
 ] as const

 export type CommandScopeNames = typeof scopes[number]
--- a/composables/users.ts
+++ b/composables/users.ts
@ -103,6 +103,24 @@ async function loginTo(user?: Omit<UserLogin, 'account'> & { account?: AccountCr
  return masto
 }

+export function setAccountInfo(userId: string, account: AccountCredentials) {
+  const index = getUsersIndexByUserId(userId)
+  if (index === -1)
+    return false
+
+  users.value[index].account = account
+  return true
+}
+
+export async function pullMyAccountInfo() {
+  const me = await useMasto().accounts.verifyCredentials()
+  setAccountInfo(currentUserId.value, me)
+}
+
+export function getUsersIndexByUserId(userId: string) {
+  return users.value.findIndex(u => u.account?.id === userId)
+}
+
 export async function removePushNotificationData(user: UserLogin, fromSWPushManager = true) {
  // clear push subscription
  user.pushSubscription = undefined
--- a/composables/utils.ts
+++ b/composables/utils.ts
@ -31,6 +31,8 @@ export const useIsMac = () => computed(() =>
  useRequestHeaders(['user-agent'])['user-agent']?.includes('Macintosh')
    ?? navigator?.platform?.includes('Mac') ?? false)

+export const isEmptyObject = (object: Object) => Object.keys(object).length === 0
+
 export function removeHTMLTags(str: string) {
  return str.replaceAll(HTMLTagRE, '')
 }
--- a/https-dev-config/local-https-server.mjs
+++ b/https-dev-config/local-https-server.mjs
@ -9,4 +9,3 @@ async function run() {
 }

 run()
-
--- a/layouts/default.vue
+++ b/layouts/default.vue
@ -1,3 +1,9 @@
+<script lang="ts" setup>
+const route = useRoute()
+
+const wideLayout = computed(() => route.meta.wideLayout ?? false)
+</script>
+
 <template>
  <div h-full :class="{ zen: isZenMode }">
    <div v-if="isHydrated.value && showUserSwitcherSidebar" fixed h-full hidden lg:block bg-code border-r-1 border-base>
@ -39,7 +45,7 @@
          </slot>
        </div>
      </aside>
-      <div class="w-full sm:w-600px min-h-screen sm:border-l sm:border-r border-base">
+      <div class="w-full min-h-screen" :class="wideLayout ? 'lg:w-full sm:w-600px' : 'sm:w-600px'" sm:border-l sm:border-r border-base>
        <div min-h="[calc(100vh-3.5rem)]" sm:min-h-screen>
          <slot />
        </div>
@ -48,7 +54,7 @@
          <NavBottom v-if="isHydrated.value" />
        </div>
      </div>
-      <aside class="hidden sm:none lg:block w-1/4 zen-hide">
+      <aside v-if="!wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">
        <div sticky top-0 h-screen flex="~ col" py3>
          <slot name="right">
            <SearchWidget />
--- a/locales/en-US.json
+++ b/locales/en-US.json
@ -46,6 +46,7 @@
    "clear_upload_failed": "Clear file upload errors",
    "close": "Close",
    "compose": "Compose",
+    "confirm": "Confirm",
    "edit": "Edit",
    "enter_app": "Enter App",
    "favourite": "Favourite",
@ -55,6 +56,7 @@
    "prev": "Prev",
    "publish": "Publish!",
    "reply": "Reply",
+    "save": "Save",
    "save_changes": "Save changes",
    "sign_in": "Sign in",
    "switch_account": "Switch account",
@ -95,8 +97,10 @@
  "error": {
    "account_not_found": "Account {0} not found",
    "explore-list-empty": "Nothing is trending right now. Check back later!",
+    "file_size_cannot_exceed_n_mb": "File size cannot exceed {0}MB",
    "sign_in_error": "Cannot connect to the server.",
-    "status_not_found": "Post not found"
+    "status_not_found": "Post not found",
+    "unsupported_file_format": "Unsupported file format"
  },
  "feature_flag": {
    "avatar_on_avatar": "Avatar on Avatar",
@ -153,7 +157,8 @@
    "local": "Local",
    "notifications": "Notifications",
    "profile": "Profile",
-    "search": "Search {0}"
+    "search": "Search {0}",
+    "settings": "Settings"
  },
  "nav_user": {
    "sign_in_desc": "Sign in to follow profiles or hashtags, favourite, share and reply to posts, or interact from your account on a different server."
@ -219,6 +224,26 @@
  "search": {
    "search_desc": "Search for people & hashtags"
  },
+  "settings": {
+    "preferences": {
+      "label": "Preferences"
+    },
+    "profile": {
+      "appearance": {
+        "bio": "Bio",
+        "description": "Edit avatar, username, profile, etc.",
+        "display_name": "Display name",
+        "label": "Appearance",
+        "title": "Edit profile"
+      },
+      "featured_tags": {
+        "description": "People can browse your public posts under these hashtags.",
+        "label": "Featured hashtags"
+      },
+      "label": "Profile"
+    },
+    "select_a_settings": "Select a settings"
+  },
  "state": {
    "edited": "(Edited)",
    "editing": "Editing",
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@ -37,6 +37,8 @@
    "boosted": "已转发",
    "close": "关闭",
    "compose": "撰写",
+    "confirm": "确认",
+    "edit": "编辑",
    "enter_app": "进入应用",
    "favourite": "喜欢",
    "favourited": "已喜欢",
@ -45,6 +47,7 @@
    "prev": "上一个",
    "publish": "发布！",
    "reply": "回复",
+    "save": "保存",
    "save_changes": "保存更改",
    "sign_in": "登鹿",
    "switch_account": "切换帐号",
@ -81,8 +84,10 @@
  "error": {
    "account_not_found": "未找到用户 {0}",
    "explore-list-empty": "目前没有热门话题，稍后再来看看吧！",
+    "file_size_cannot_exceed_n_mb": "文件大小不能超过 {0}MB",
    "sign_in_error": "无法连接服务器",
-    "status_not_found": "未找到帖文"
+    "status_not_found": "未找到帖文",
+    "unsupported_file_format": "不支持的文件格式"
  },
  "feature_flag": {
    "avatar_on_avatar": "头像堆叠",
@ -139,7 +144,8 @@
    "local": "本地",
    "notifications": "通知",
    "profile": "个人资料",
-    "search": "搜索 {0}"
+    "search": "搜索 {0}",
+    "settings": "设置"
  },
  "nav_user": {
    "sign_in_desc": "登录后可关注其他人或标签、点赞、分享和回复帖文，或与不同服务器上的账号交互。"
@ -201,6 +207,26 @@
  "search": {
    "search_desc": "搜索用户或话题标签"
  },
+  "settings": {
+    "preferences": {
+      "label": "首选项"
+    },
+    "profile": {
+      "appearance": {
+        "bio": "简介",
+        "description": "编辑个人资料，例如头像、用户名、个人简介等。",
+        "display_name": "昵称",
+        "label": "外观",
+        "title": "编辑个人资料"
+      },
+      "featured_tags": {
+        "description": "人们可以在这些标签下浏览你的公共嘟文。",
+        "label": "精选的话题标签"
+      },
+      "label": "个人资料"
+    },
+    "select_a_settings": "在左侧选择一个设置"
+  },
  "state": {
    "edited": "（已编辑）",
    "editing": "编辑中",
--- a/package.json
+++ b/package.json
@ -47,11 +47,13 @@
    "pinia": "^2.0.28",
    "shiki": "^0.12.1",
    "shiki-es": "^0.1.2",
+    "slimeform": "^0.8.0",
    "tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log",
    "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store",
    "tippy.js": "^6.3.7",
    "ufo": "^1.0.1",
    "ultrahtml": "^1.2.0",
+    "vue-advanced-cropper": "^2.8.6",
    "vue-virtual-scroller": "2.0.0-beta.7"
  },
  "devDependencies": {
--- a/pages/settings.vue
+++ b/pages/settings.vue
@ -0,0 +1,41 @@
+<script lang="ts" setup>
+definePageMeta({
+  wideLayout: true,
+})
+
+const route = useRoute()
+
+const isRootPath = computedEager(() => route.name === 'settings')
+</script>
+
+<template>
+  <div min-h-screen flex>
+    <div border="x base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
+      <MainContent>
+        <template #title>
+          <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+            <div i-ri:settings-4-line />
+            <span>{{ $t('nav_side.settings') }}</span>
+          </div>
+        </template>
+        <div xl:w-97 lg:w-78 w-full>
+          <SettingsNavItem
+            command
+            icon="i-ri:user-line"
+            :text="$t('settings.profile.label')"
+            to="/settings/profile"
+          />
+          <SettingsNavItem
+            command
+            icon="i-ri:settings-2-line"
+            :text="$t('settings.preferences.label')"
+            to="/settings/preferences"
+          />
+        </div>
+      </MainContent>
+    </div>
+    <div flex-1 :class="isRootPath ? 'hidden lg:block' : 'block'">
+      <NuxtPage />
+    </div>
+  </div>
+</template>
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@ -0,0 +1,8 @@
+<template>
+  <div min-h-screen flex justify-center items-center>
+    <div text-center flex="~ col gap-2" items-center>
+      <div i-ri:settings-4-line text-5xl />
+      <span text-xl>{{ $t('settings.select_a_settings') }}</span>
+    </div>
+  </div>
+</template>
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@ -0,0 +1,21 @@
+<script lang="ts" setup>
+const { lg } = breakpoints
+</script>
+
+<template>
+  <MainContent :back="!lg">
+    <template #title>
+      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <span>{{ $t('settings.preferences.label') }}</span>
+      </div>
+    </template>
+    <div text-center mt-10>
+      <h1 text-4xl>
+        🚧
+      </h1>
+      <h3 text-xl>
+        {{ $t('settings.preferences.label') }}
+      </h3>
+    </div>
+  </MainContent>
+</template>
--- a/pages/settings/profile/appearance.vue
+++ b/pages/settings/profile/appearance.vue
@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { invoke } from '@vueuse/shared'
+import { useForm } from 'slimeform'
+
+definePageMeta({
+  // Keep alive the form page will reduce raw data timeliness and its status timeliness
+  keepalive: false,
+})
+
+const router = useRouter()
+
+const my = $computed(() => currentUser.value?.account)
+
+watch($$(my), (value) => {
+  if (!value)
+    router.push('/')
+})
+
+const onlineSrc = $computed(() => ({
+  avatar: my?.avatar || '',
+  header: my?.header || '',
+}))
+
+const { form, reset, submitter, dirtyFields, isError } = useForm({
+  form: () => ({
+    displayName: my?.displayName ?? '',
+    note: my?.source.note.replaceAll('\r', '') ?? '',
+
+    avatar: null as null | File,
+    header: null as null | File,
+
+    // These look more like account and privacy settings than appearance settings
+    // discoverable: false,
+    // bot: false,
+    // locked: false,
+  }),
+})
+
+// Keep the information to be edited up to date
+invoke(async () => {
+  await pullMyAccountInfo()
+  reset()
+})
+
+const isCanSubmit = computed(() => !isError.value && !isEmptyObject(dirtyFields.value))
+
+const { submit, submitting } = submitter(async ({ dirtyFields }) => {
+  const res = await useMasto().accounts.updateCredentials(dirtyFields.value)
+    .then(account => ({ account }))
+    .catch((error: Error) => ({ error }))
+
+  if ('error' in res) {
+    // TODO: Show error message
+    console.error('Error(updateCredentials):', res.error)
+    return
+  }
+
+  setAccountInfo(my!.id, res.account)
+  reset()
+})
+</script>
+
+<template>
+  <MainContent back>
+    <template #title>
+      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <span>{{ $t('settings.profile.appearance.title') }}</span>
+      </div>
+    </template>
+
+    <form space-y-5 @submit.prevent="submit">
+      <div>
+        <!-- banner -->
+        <div of-hidden bg="gray-500/20" aspect="3">
+          <CommonInputImage
+            ref="elInputImage"
+            v-model="form.header"
+            :original="onlineSrc.header"
+            w-full h-full
+          />
+        </div>
+        <CommonCropImage v-model="form.header" :stencil-aspect-ratio="3 / 1" />
+
+        <!-- avatar -->
+        <div px-4>
+          <CommonInputImage
+            v-model="form.avatar"
+            :original="onlineSrc.avatar"
+            mt--10
+            rounded-full border="bg-base 4"
+            w="sm:30 24" min-w="sm:30 24" h="sm:30 24"
+          />
+        </div>
+        <CommonCropImage v-model="form.avatar" />
+      </div>
+
+      <div px4 py3 space-y-5>
+        <!-- display name -->
+        <label space-y-2 block>
+          <p font-medium>
+            {{ $t('settings.profile.appearance.display_name') }}
+          </p>
+          <input v-model="form.displayName" type="text" input-base>
+        </label>
+
+        <!-- note -->
+        <label space-y-2 block>
+          <p font-medium>
+            {{ $t('settings.profile.appearance.bio') }}
+          </p>
+          <textarea v-model="form.note" maxlength="500" min-h-10ex input-base />
+        </label>
+
+        <!-- submit -->
+        <div text-right>
+          <button
+            type="submit"
+            btn-solid rounded-full text-sm
+            flex-inline gap-x-2 items-center
+            :disabled="submitting || !isCanSubmit"
+          >
+            <span
+              aria-hidden="true"
+              inline-block
+              :class="submitting ? 'i-ri:loader-2-fill animate animate-spin' : 'i-ri:save-line'"
+            />
+            <span>
+              {{ $t('action.save') }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </form>
+  </MainContent>
+</template>
--- a/pages/settings/profile/featured-tags.vue
+++ b/pages/settings/profile/featured-tags.vue
@ -0,0 +1,18 @@
+<template>
+  <MainContent back>
+    <template #title>
+      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <div i-ri:test-tube-line />
+        <span>{{ $t('settings.profile.featured_tags.label') }}</span>
+      </div>
+    </template>
+    <div text-center mt-10>
+      <h1 text-4xl>
+        🚧
+      </h1>
+      <h3 text-xl>
+        {{ $t('settings.profile.featured_tags.label') }}
+      </h3>
+    </div>
+  </MainContent>
+</template>
--- a/pages/settings/profile/index.vue
+++ b/pages/settings/profile/index.vue
@ -0,0 +1,34 @@
+<script lang="ts" setup>
+const { lg } = breakpoints
+</script>
+
+<template>
+  <MainContent :back="!lg">
+    <template #title>
+      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <span>{{ $t('settings.profile.label') }}</span>
+      </div>
+    </template>
+
+    <SettingsNavItem
+      command
+      icon="i-ri:user-settings-line"
+      :text="$t('settings.profile.appearance.label')"
+      to="/settings/profile/appearance"
+    >
+      <template #description>
+        {{ $t('settings.profile.appearance.description') }}
+      </template>
+    </SettingsNavItem>
+    <SettingsNavItem
+      command
+      icon="i-ri:hashtag"
+      :text="$t('settings.profile.featured_tags.label')"
+      to="/settings/profile/featured-tags"
+    >
+      <template #description>
+        {{ $t('settings.profile.featured_tags.description') }}
+      </template>
+    </SettingsNavItem>
+  </MainContent>
+</template>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -56,6 +56,7 @@ specifiers:
  shiki: ^0.12.1
  shiki-es: ^0.1.2
  simple-git-hooks: ^2.8.1
+  slimeform: ^0.8.0
  std-env: ^3.3.1
  tauri-plugin-log-api: github:tauri-apps/tauri-plugin-log
  tauri-plugin-store-api: github:tauri-apps/tauri-plugin-store
@ -68,6 +69,7 @@ specifiers:
  vite-plugin-inspect: ^0.7.11
  vite-plugin-pwa: ^0.13.3
  vitest: ^0.26.2
+  vue-advanced-cropper: ^2.8.6
  vue-tsc: ^1.0.16
  vue-virtual-scroller: 2.0.0-beta.7
  workbox-window: ^6.5.4
@ -97,11 +99,13 @@ dependencies:
  pinia: 2.0.28_typescript@4.9.4
  shiki: 0.12.1
  shiki-es: 0.1.2
+  slimeform: 0.8.0
  tauri-plugin-log-api: github.com/tauri-apps/tauri-plugin-log/b58475bbc410fa78eb69276c62d0b64c91c07914
  tauri-plugin-store-api: github.com/tauri-apps/tauri-plugin-store/9bd993aa67766596638bbfd91e79a1bf8f632014
  tippy.js: 6.3.7
  ufo: 1.0.1
  ultrahtml: 1.2.0
+  vue-advanced-cropper: 2.8.6
  vue-virtual-scroller: 2.0.0-beta.7

 devDependencies:
@ -4163,6 +4167,10 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /classnames/2.3.2:
+    resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
+    dev: false
+
  /clean-regexp/1.0.0:
    resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
    engines: {node: '>=4'}
@ -4544,6 +4552,10 @@ packages:
    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
    dev: true

+  /debounce/1.2.1:
+    resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
+    dev: false
+
  /debug/2.6.9:
    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
    peerDependencies:
@ -4758,6 +4770,10 @@ packages:
    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
    dev: true

+  /easy-bem/1.1.1:
+    resolution: {integrity: sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==}
+    dev: false
+
  /ee-first/1.1.1:
    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
    dev: true
@ -8807,6 +8823,12 @@ packages:
      is-fullwidth-code-point: 4.0.0
    dev: true

+  /slimeform/0.8.0:
+    resolution: {integrity: sha512-oh0GY3qPkN1ouH3TQex/+SbVsgGmJhZvgz8NqfECuMuSy7k0NOQNUudH/bebcAY7fIk5nVunMS2GPfo4UWwmDw==}
+    peerDependencies:
+      vue: '>=3'
+    dev: false
+
  /snake-case/3.0.4:
    resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
    dependencies:
@ -10013,6 +10035,17 @@ packages:
    resolution: {integrity: sha512-fmL7V1eiDBFRRnu+gfRWTzyPpNIHJTc4mWnFkwBUmO9U3KPgJAmTx7oxi2bl/Rh6HLdU7+4C9wlj0k2E4AdKFQ==}
    dev: true

+  /vue-advanced-cropper/2.8.6:
+    resolution: {integrity: sha512-R1vkXG/Vam3OEd3vMJsVSJkXUc9ejM9l/NzPcPvkyzKGHwF69c2v1lh2Kqj2A5MCqrTmk76bmzmWFuYj+AcwmA==}
+    engines: {node: '>=8', npm: '>=5'}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      classnames: 2.3.2
+      debounce: 1.2.1
+      easy-bem: 1.1.1
+    dev: false
+
  /vue-bundle-renderer/1.0.0:
    resolution: {integrity: sha512-43vCqTgaMXfHhtR8/VcxxWD1DgtzyvNc4wNyG5NKCIH19O1z5G9ZCRXTGEA2wifVec5PU82CkRLD2sTK9NkTdA==}
    dependencies:
--- a/styles/vars.css
+++ b/styles/vars.css
@ -3,6 +3,7 @@
  --c-primary-active: #C16929;
  --c-primary-light: #EA9E441A;
  --c-border: #eee;
+  --c-border-dark: #dccfcf;

  --c-bg-base: #fff;
  --c-bg-active: #f6f6f6;
@ -18,10 +19,15 @@
  --c-bg-btn-disabled: #a1a1a1;
  --c-text-btn-disabled: #fff;
  --c-text-btn: #232323;
+
+  --c-success: #67C23A;
+  --c-warning: #E6A23C;
+  --c-error: #F56C6C;
 }

 .dark {
  --c-border: #222;
+  --c-border-dark: #545251;

  --c-bg-base: #111;
  --c-bg-active: #191919;
--- a/unocss.config.ts
+++ b/unocss.config.ts
@ -13,6 +13,7 @@ export default defineConfig({
  shortcuts: [
    {
      'border-base': 'border-$c-border',
+      'border-dark': 'border-$c-border-dark',
      'border-strong': 'border-$c-text-base',
      'border-bg-base': 'border-$c-bg-base',
      'border-primary-light': 'border-$c-primary-light',
@ -38,6 +39,12 @@ export default defineConfig({
      'btn-text': 'btn-base px-4 py-2 text-$c-primary hover:text-$c-primary-active',
      'btn-action-icon': 'btn-base hover:bg-active rounded-full h9 w9 flex items-center justify-center',

+      // input
+      'input-base-focus': 'focus:outline-none focus:border-$c-primary',
+      'input-base-disabled': 'disabled:pointer-events-none disabled:bg-gray-500/5 disabled:text-gray-500/50',
+      'input-base': 'p2 rounded w-full bg-transparent border border-dark input-base-focus input-base-disabled',
+      'input-error': 'border-$c-error focus:(outline-offset-0 outline-$c-error outline-1px)',
+
      // link
      'text-link-rounded': 'focus:outline-none focus:ring-(2 primary inset) hover:bg-active rounded md:rounded-full px2 mx--2',